/* ======================================
STYLE:single / category / taxonomy / archive
====================================== */
.single-breadcrumb { font-size:13px; margin-bottom:20px; color:#888; }
.single-breadcrumb a { color:#00aaff; text-decoration:none; }
.single-breadcrumb a:hover { text-decoration:underline; }
.single-title { font-size:32px; font-weight:700; border-bottom:3px solid #00aaff; padding-bottom:8px; margin-bottom:20px; }

/* ======================================
TÙY CHỈNH ENTRY META
GLOBAL ENTRY UI
Dùng cho single / category / taxonomy / archive
====================================== */

.entry-title{
    margin:0 0 14px;
    font-size:34px;
    line-height:1.35;
    font-weight:700;
    color:#111;
    letter-spacing:-0.3px;
}

.entry-meta{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px 16px;
    margin-bottom:22px;
    padding:12px 16px;
    background:#f8f9fb;
    border:1px solid #eceff3;
    border-radius:12px;
    font-size:14px;
    color:#666;
}

.entry-date,
.entry-author{
    position:relative;
    display:inline-flex;
    align-items:center;
    line-height:1.4;
    font-weight:500;
}

/* divider */
.entry-author{
    padding-left:16px;
}

.entry-author:before{
    content:"";
    position:absolute;
    left:0;
    top:50%;
    width:4px;
    height:4px;
    margin-top:-2px;
    border-radius:50%;
    background:#b8c0cc;
}

/* icon style text */
.entry-date:before{
    content:"📅";
    margin-right:6px;
    font-size:14px;
}

.entry-author:before{
    box-shadow:-12px 0 0 0 transparent;
}

.entry-author:after{
    content:"👤";
    margin-right:6px;
    font-size:14px;
    position:static;
}

/* nếu author là link */
.entry-author a{
    color:#444;
    font-weight:600;
}

.entry-author a:hover{
    color:#0d6efd;
}

/* SHARE */

.entry-share{
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:8px;
}

.entry-share a{
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#fff;
    border:1px solid #e7ebf0;
    color:#555;
    transition:.25s ease;
    text-decoration:none;
}

.entry-share a:hover{
    transform:translateY(-2px);
    background:#0d6efd;
    border-color:#0d6efd;
    color:#fff;
    box-shadow:0 8px 16px rgba(13,110,253,.18);
}

/* ======================================
MOBILE
====================================== */

@media (max-width:767px){

.entry-title{
    font-size:28px;
    line-height:1.4;
}

.entry-meta{
    padding:10px 12px;
    gap:8px 12px;
    font-size:13px;
}

.entry-share{
    width:100%;
    margin-left:0;
    padding-top:6px;
}

.entry-share a{
    width:32px;
    height:32px;
}

}


#countdown-code { cursor:pointer; font-weight:500; color:#111; }
.single-social { padding:20px 0; text-align:center; }
.single-social img { transition:transform 0.3s; }
.single-social img:hover { transform:scale(1.2); }

@media(max-width:991px){ 
    .single-sidebar{margin-top:20px;}
    .related-title,.benefit-title{font-size:14px;} 
    .benefit-desc{font-size:13px;}
}
@media(max-width:767px){ 
    .single-title{font-size:28px;} 
}

/*==================================================
   Style: SINGLE: BENEFIT & FORM
================================================== */
.single-contact-benefit { padding:40px 0; background:#f7f7f9; }
/* Container ul */
.benefit-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    list-style: none;
    justify-content: center;
}

/* Li mỗi benefit */
.benefit-wrap li {
    border-radius: 16px;
    flex: 1 1 calc(50% - 20px); /* 2 cột desktop */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.benefit-img { max-width:80px; margin-bottom:15px; }
.benefit-title { font-size:18px; font-weight:600; margin-bottom:10px; }
.benefit-desc { font-size:14px; color:#555; margin-bottom:10px; }
.benefit-link { color:#00aaff; text-decoration:none; font-weight:500; transition:0.3s; }
.benefit-link:hover { text-decoration:underline; }
/* Hover nâng card */
.benefit-wrap li:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}

/* Image */
.benefit-wrap li img {
    max-width: 80px;
    border-radius: 50%;
    margin-bottom: 15px;
    transition: transform 0.3s ease;
}

.benefit-wrap li:hover img {
    transform: scale(1.1);
}

/* Title */
.benefit-wrap li h4 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
    text-align: center;
}

/* Description */
.benefit-wrap li p {
    font-size: 14px;
    color: #555;
    text-align: center;
    margin-bottom: 10px;
}

/* Link */
.benefit-wrap li a {
    color: #00aaff;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.25s ease;
}

.benefit-wrap li a:hover {
    text-decoration: underline;
}

/* Responsive mobile */
@media(max-width:767px){
    .benefit-wrap li {
        flex: 1 1 100%;
    }
}

/* Card mỗi benefit */
.benefit-card {
    background: #fff;
    padding: 20px;
    border-radius: 16px;
    text-align: center;
    flex: 1 1 calc(50% - 20px); /* 2 cột desktop */
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover nâng card */
.benefit-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}

/* Image */
.benefit-card img.benefit-img {
    max-width: 80px;
    margin-bottom: 15px;
    border-radius: 50%;
    transition: transform 0.3s ease;
}
.benefit-card:hover img.benefit-img {
    transform: scale(1.1);
}

/* Title & Description */
.benefit-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
}
.benefit-desc {
    font-size: 14px;
    color: #555;
    margin-bottom: 10px;
}

/* Link */
.benefit-link {
    color: #00aaff;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.25s ease;
}
.benefit-link:hover {
    text-decoration: underline;
}

/* Responsive mobile */
@media(max-width:767px){
    .benefit-card { flex: 1 1 100%; }
}





/*==================================================
   Style: SINGLE: CONTENT
================================================== */
/* =============================
   General Content Styles
   Dành cho nội dung trong post (single.php)
   Chuyên nghiệp – Tối ưu SEO & Speed
============================= */

/* --- Container --- */
.post-content {
    max-width: 900px;       /* Giới hạn chiều rộng, dễ đọc */
    margin: 0 auto;
    line-height: 1.65;
    font-family: 'Inter', 'Helvetica', 'Arial', sans-serif;
    font-size: 1rem;
    color: #222;
    word-wrap: break-word;
}

/* --- Headings --- */
.post-content h1, 
.post-content h2, 
.post-content h3, 
.post-content h4, 
.post-content h5, 
.post-content h6 {
    line-height: 1.3;
    margin: 1em 0 0.75em 0;
    font-weight: 600;
    color: #111;            /* Mạnh hơn chữ thường */
}

.post-content h1 { font-size: 2.2rem; }
.post-content h2 { font-size: 1.8rem; }
.post-content h3 { font-size: 1.5rem; }
.post-content h4 { font-size: 1.25rem; }
.post-content h5 { font-size: 1rem; }
.post-content h6 { font-size: 0.9rem; }

/* --- Paragraphs --- */
.post-content p {
    margin: 0 0 1em 0;
    text-align: justify;    /* Cân bằng chữ đẹp trên desktop */
    hyphens: auto;          /* Ngắt chữ thông minh */
}

/* --- Links --- */
.post-content a {
    color: #1a73e8;
    text-decoration: underline;
    transition: color 0.2s ease-in-out;
}
.post-content a:hover {
    color: #0b59d1;
}

/* --- Lists --- */
.post-content ul, .post-content ol {
    padding-left: 1.5em;
    margin-bottom: 1em;
}
.post-content li {
    margin-bottom: 0.5em;
}

/* --- Images --- */
.post-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 4px;        /* Nhẹ nhàng */
    box-shadow: 0 2px 6px rgba(0,0,0,0.05); /* Nhẹ, không ảnh hưởng tốc độ */
    object-fit: cover;
}

/* --- Lazyload support --- */
.post-content img.lazyload {
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}
.post-content img.lazyloaded {
    opacity: 1;
}
/* --- Highlight missing alt for devs --- */
.single-content img[alt=""] {
    outline: 1px dashed red;
}
/* --- Blockquotes --- */
.post-content blockquote {
    border-left: 4px solid #1a73e8;
    padding-left: 1em;
    margin: 1.5em 0;
    color: #555;
    font-style: italic;
    background-color: #f9f9f9;
}

.single-content b,
.single-content strong {
    font-weight: 600;
}

.single-content i,
.single-content em {
    font-style: italic;
}

.single-content del {
    text-decoration: line-through;
    color: #999;
}

/* --- Inline elements --- */
.single-content span {
    display: inline;
}

/* --- Tables --- */
.post-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
    font-size: 0.95rem;
}
.post-content th, 
.post-content td {
    border: 1px solid #ddd;
    padding: 0.5em 0.75em;
}
.post-content th {
    background-color: #f2f2f2;
}

/* --- Code & Preformatted --- */
.post-content code {
    background-color: #f5f5f5;
    padding: 0.15em 0.3em;
    border-radius: 3px;
    font-family: 'Source Code Pro', monospace;
    font-size: 0.95em;
}
.post-content pre {
    background-color: #f5f5f5;
    padding: 1em;
    overflow-x: auto;
    border-radius: 4px;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .post-content {
        padding: 1em;
        font-size: 0.95rem;
    }
    .post-content h1 { font-size: 1.8rem; }
    .post-content h2 { font-size: 1.5rem; }
    .post-content h3 { font-size: 1.25rem; }
}

/* --- Optional: SEO-friendly micro-optimizations --- */
/* Link focus for accessibility */
.post-content a:focus {
    outline: 2px dashed #1a73e8;
    outline-offset: 2px;
}

/* Ensure images have alt text (SEO) */
.post-content img[alt=""] {
    outline: 1px dashed red; /* Developer warning, không hiển thị user */
}

/* --- iframe / video --- */
.single-content iframe,
.single-content embed,
.single-content video {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1em auto;
}

/* --- Horizontal rule --- */
.single-content hr {
    border: none;
    border-top: 1px solid #ddd;
    margin: 2em 0;
}

.single-content blockquote {
    border-left: 4px solid #1a73e8;
    padding-left: 1em;
    margin: 1.5em 0;
    color: #555;
    font-style: italic;
    background-color: #f9f9f9;
}

.single-content img.lazyload {
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}
.single-content img.lazyloaded {
    opacity: 1;
}

/*========================================
 ULTRA PRO MAX: Kho Giao Diện
 Style: SINGLE: READMORE in POST CONTENT
=========================================*/

ul.theme-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.readmore ul.theme-list li.theme-card {
    flex: 1 1 calc(50% - 30px);
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

ul.theme-list li.theme-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}

.theme-thumb {
    position: relative;
    overflow: hidden;
}

.theme-thumb img {
    width: 100%;
    display: block;
    transition: transform 0.3s ease;
    border-bottom: 1px solid #eee;
}

.theme-thumb:hover img {
    transform: scale(1.05);
}

.theme-thumb .hover-view {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,123,255,0.9);
    color: #fff;
    padding: 8px 20px;
    border-radius: 25px;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.theme-thumb:hover .hover-view {
    opacity: 1;
    pointer-events: auto;
}

.theme-info {
    padding: 0 20px 0 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.theme-info .meta {
    font-size: 13px;
    color: #888;
    margin-bottom: 8px;
}

.theme-info h2 {
    font-size: 16px;
    margin: 0 0 12px 0;
    font-weight: 700;
    line-height: 1.3;
}

.theme-info h2 a {
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease;
}

.theme-info h2 a:hover {
    color: #007bff;
}

.cta-download {
    display: inline-block;
    text-align: center;
    background: #007bff;
    color: #fff;
    padding: 10px 18px;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.3s ease, transform 0.3s ease;
}

.cta-download:hover {
    background: #0056b3;
    transform: translateY(-2px);
    color:white;
}

/* Responsive */
@media (max-width: 1200px) {
    ul.theme-list li.theme-card { flex: 1 1 calc(33.333% - 20px); }
}
@media (max-width: 992px) {
    ul.theme-list li.theme-card { flex: 1 1 calc(50% - 15px); }
}
@media (max-width: 576px) {
    ul.theme-list li.theme-card { flex: 1 1 100%; }
}   


aside .left-col .widget{margin-bottom: 10px;}

/* ===============================
SIDEBAR WIDGET PRO MAX POST IN 1 CATEGORY L1
=============================== */
.sem-sidebar-widget{
    background:#fff;
    border:1px solid #eee;
    border-radius:14px;
    padding:18px;
    box-shadow:0 8px 24px rgba(0,0,0,.05);
}

/* Title */
.sem-widget-title{
    font-size:18px;
    font-weight:700;
    color:#111;
    margin:0 0 18px;
    padding-bottom:12px;
    border-bottom:2px solid #f1f1f1;
    position:relative;
    text-transform:uppercase;
    letter-spacing:.5px;
}

.sem-widget-title:after{
    content:'';
    width:48px;
    height:3px;
    background:#e60023;
    position:absolute;
    left:0;
    bottom:-2px;
    border-radius:20px;
}

/* Item */
.sem-widget-item{
    display:flex;
    gap:14px;
    padding:12px 0;
    border-bottom:1px solid #f3f3f3;
    transition:.25s ease;
}

.sem-widget-item:last-child{
    border-bottom:none;
    padding-bottom:0;
}

.sem-widget-item:hover{
    transform:translateY(-2px);
}

/* Thumbnail */
.sem-widget-item .thumb{
    width:92px;
    min-width:92px;
    height:72px;
    overflow:hidden;
    border-radius:10px;
    display:block;
}

.sem-widget-item .thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.4s ease;
}

.sem-widget-item:hover .thumb img{
    transform:scale(1.06);
}

/* Content */
.sem-widget-item .content{
    flex:1;
}

/* Title post */
.sem-widget-item .title{
    margin:0 0 8px;
    font-size:14px;
    line-height:1.45;
    font-weight:700;
}

.sem-widget-item .title a{
    color:#111;
    text-decoration:none;
    transition:.25s;
}

.sem-widget-item .title a:hover{
    color:#e60023;
}

/* Meta */
.sem-widget-item .meta{
    font-size:12px;
    color:#888;
    display:flex;
    align-items:center;
    gap:7px;
}

.sem-widget-item .dot{
    font-size:10px;
    opacity:.6;
}

/* Responsive */
@media(max-width:991px){
    .sem-widget-item .thumb{
        width:82px;
        min-width:82px;
        height:64px;
    }
}

/* =====================================================
ULTRA WIDGET - BANNER TOP STYLE
POST IN 1 CATEGORY L2
Post #1 = banner lớn trên cùng
Các post còn lại = list dưới
===================================================== */

/* BOX */
.sem-ultra-widget{
    background:#fff;
    border:1px solid #ececec;
    border-radius:18px;
    padding:22px;
    margin-bottom:30px;
    box-shadow:0 12px 30px rgba(0,0,0,.05);
    overflow:hidden;
}

/* TITLE */
.sem-ultra-widget .title{
    margin:0 0 18px;
    padding-bottom:14px;
    border-bottom:2px solid #f2f2f2;
    font-size:18px;
    font-weight:700;
    color:#111;
    text-transform:uppercase;
    line-height:1.2;
}

/* =====================================================
POST ĐẦU = BANNER
===================================================== */

.sem-ultra-widget .item-1{
    display:block;
    padding:0 0 22px;
    margin:0 0 18px;
    border-bottom:1px solid #f0f0f0;
}

/* Ẩn rank post đầu */
.sem-ultra-widget .item-1 .rank{
    display:none;
}

/* Banner ảnh lớn */
.sem-ultra-widget .item-1 .thumb{
    display:block;
    width:100%;
    height:210px;
    border-radius:16px;
    overflow:hidden;
    margin:0 0 14px;
}

.sem-ultra-widget .item-1 .thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .4s ease;
}

.sem-ultra-widget .item-1:hover .thumb img{
    transform:scale(1.05);
}

/* Content xuống dưới ảnh */
.sem-ultra-widget .item-1 .content{
    display:block;
}

/* Title banner */
.sem-ultra-widget .item-1 .actpost{
    margin:0 0 10px;
}

.sem-ultra-widget .item-1 .actpost a{
    display:block;
    font-size:24px;
    line-height:1.35;
    font-weight:700;
    color:#111;
    text-decoration:none;
}

.sem-ultra-widget .item-1 .actpost a:hover{
    color:#e11d48;
}

/* Meta banner */
.sem-ultra-widget .item-1 .meta{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    font-size:13px;
    color:#777;
}

/* =====================================================
POST CÒN LẠI = LIST
===================================================== */

.sem-ultra-widget .sidebar-bg:not(.item-1){
    display:flex;
    align-items:flex-start;
    gap:14px;
    padding:16px 0;
    border-bottom:1px solid #f5f5f5;
    transition:.25s ease;
}

.sem-ultra-widget .sidebar-bg:last-child{
    border-bottom:none;
    padding-bottom:0;
}

.sem-ultra-widget .sidebar-bg:not(.item-1):hover{
    transform:translateX(4px);
}

/* Rank */
.sem-ultra-widget .sidebar-bg:not(.item-1) .rank{
    width:34px;
    height:34px;
    line-height:34px;
    text-align:center;
    border-radius:50%;
    color:#fff;
    font-size:14px;
    font-weight:700;
    flex:0 0 34px;
    margin-top:4px;
    background:#111;
}

.sem-ultra-widget .item-2 .rank{background:#2563eb;}
.sem-ultra-widget .item-3 .rank{background:#10b981;}
.sem-ultra-widget .item-4 .rank{background:#f59e0b;}

/* Thumb nhỏ */
.sem-ultra-widget .sidebar-bg:not(.item-1) .thumb{
    width:84px;
    height:64px;
    flex:0 0 84px;
    border-radius:12px;
    overflow:hidden;
    display:block;
    background:#f4f4f4;
}

.sem-ultra-widget .sidebar-bg:not(.item-1) .thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* Content */
.sem-ultra-widget .sidebar-bg:not(.item-1) .content{
    flex:1;
}

/* Title nhỏ */
.sem-ultra-widget .sidebar-bg:not(.item-1) .actpost{
    margin:0 0 7px;
}

.sem-ultra-widget .sidebar-bg:not(.item-1) .actpost a{
    display:block;
    font-size:15px;
    line-height:1.4;
    font-weight:700;
    color:#111;
    text-decoration:none;
}

.sem-ultra-widget .sidebar-bg:not(.item-1) .actpost a:hover{
    color:#e11d48;
}

/* Meta nhỏ */
.sem-ultra-widget .sidebar-bg:not(.item-1) .meta{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    font-size:12px;
    color:#777;
}

/* =====================================================
MOBILE
===================================================== */

@media(max-width:767px){

    .sem-ultra-widget{
        padding:16px;
    }

    .sem-ultra-widget .title{
        font-size:20px;
    }

    .sem-ultra-widget .item-1 .thumb{
        height:180px;
    }

    .sem-ultra-widget .item-1 .actpost a{
        font-size:20px;
    }

    .sem-ultra-widget .sidebar-bg:not(.item-1) .thumb{
        width:72px;
        height:54px;
        flex:0 0 72px;
    }

    .sem-ultra-widget .sidebar-bg:not(.item-1) .actpost a{
        font-size:15px;
    }

}








/* ==========================================================
   SEM Widget Latest Post: Bài viết mới nhất
========================================================== */

.sem-latest-post-widget{
    background:#ffffff;
    border:1px solid #e8e8e8;
    border-radius:14px;
    padding:18px;
    box-shadow:0 8px 22px rgba(0,0,0,.04);
    overflow:hidden;
}

/* Title */
.sem-latest-post-widget .widget-title{
    margin:0 0 18px;
    padding-bottom:12px;
    border-bottom:1px solid #ececec;
    font-size:20px;
    line-height:1.3;
    font-weight:700;
    position:relative;
}

.sem-latest-post-widget .widget-title span{
    display:inline-block;
    padding-left:14px;
    position:relative;
}

.sem-latest-post-widget .widget-title span:before{
    content:"";
    position:absolute;
    left:0;
    top:4px;
    width:4px;
    height:20px;
    border-radius:10px;
    background:#111;
}

/* List */
.sem-latest-post-widget .widget-post-list{
    display:flex;
    flex-direction:column;
    gap:16px;
}

/* Item */
.sem-latest-post-widget .widget-post-item{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:12px;
    border:1px solid #f0f0f0;
    border-radius:12px;
    transition:all .25s ease;
    background:#fff;
}

.sem-latest-post-widget .widget-post-item:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 20px rgba(0,0,0,.06);
    border-color:#ddd;
}

/* Rank */
.sem-latest-post-widget .post-rank{
    width:30px;
    height:30px;
    min-width:30px;
    border-radius:50%;
    background:#111;
    color:#fff;
    font-size:14px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-top:2px;
}

/* Thumb */
.sem-latest-post-widget .post-thumb{
    width:78px;
    min-width:78px;
    height:78px;
    overflow:hidden;
    border-radius:10px;
    display:block;
}

.sem-latest-post-widget .post-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .3s ease;
}

.sem-latest-post-widget .widget-post-item:hover .post-thumb img{
    transform:scale(1.06);
}

/* Content */
.sem-latest-post-widget .post-content{
    flex:1;
    min-width:0;
}

/* Title */
.sem-latest-post-widget .post-title{
    margin:0 0 8px;
    font-size:15px;
    line-height:1.45;
    font-weight:700;
}

.sem-latest-post-widget .post-title a{
    color:#111;
    text-decoration:none;
}

.sem-latest-post-widget .post-title a:hover{
    color:#e60023;
}

/* Meta */
.sem-latest-post-widget .post-meta{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    font-size:13px;
    color:#777;
    line-height:1.4;
}

.sem-latest-post-widget .post-meta a{
    color:#777;
    text-decoration:none;
}

.sem-latest-post-widget .post-meta a:hover{
    color:#111;
}

.sem-latest-post-widget .dot{
    opacity:.6;
}

/* Empty */
.sem-latest-post-widget .empty-post{
    margin:0;
    color:#888;
    font-size:14px;
}

/* Mobile */
@media(max-width:767px){

    .sem-latest-post-widget{
        padding:15px;
        border-radius:12px;
    }

    .sem-latest-post-widget .post-thumb{
        width:68px;
        min-width:68px;
        height:68px;
    }

    .sem-latest-post-widget .post-title{
        font-size:14px;
    }

    .sem-latest-post-widget .post-meta{
        font-size:12px;
    }
}




/* ==================================================
SEM ALL HỌC TẬP WIDGET
Đã fix:
✓ Title không bị ẩn quá nhiều
✓ Thu nhỏ ảnh để nhường chỗ chữ
✓ Hiển thị 3 dòng tiêu đề
✓ UI sang hơn
================================================== */

.sem-study-widget{
    margin:0 0 34px;
}

/* BOX */
.sem-study-widget-wrap{
    position:relative;
    background:#ffffff;
    border-radius:22px;
    overflow:hidden;
    border:1px solid rgba(0,0,0,.06);
    box-shadow:
        0 14px 40px rgba(0,0,0,.06),
        0 3px 10px rgba(0,0,0,.04);
}

/* glow */
.sem-study-widget-wrap::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(
        135deg,
        rgba(255,255,255,.55),
        transparent 42%,
        rgba(255,255,255,.18)
    );
}

/* ======================================
HEADER
====================================== */
.sem-study-header{
    position:relative;
    padding:18px 22px;
    background:linear-gradient(135deg,#0f172a,#1e293b 55%,#334155);
}

.sem-study-header::after{
    content:"";
    position:absolute;
    left:22px;
    bottom:0;
    width:76px;
    height:3px;
    border-radius:50px;
    background:#ffffff;
    opacity:.85;
}

.sem-study-heading{
    margin:0;
    color:#fff;
    font-size:22px;
    line-height:1.2;
    font-weight:700;
    letter-spacing:.3px;
    text-transform:uppercase;
}

/* ======================================
LIST
====================================== */
.sem-study-grid{
    display:flex;
    flex-direction:column;
}

.sem-study-card{
    display:flex;
    gap:16px;
    padding:18px 22px;
    border-bottom:1px solid #edf1f6;
    transition:all .28s ease;
    position:relative;
}

.sem-study-card:last-child{
    border-bottom:none;
}

.sem-study-card:hover{
    background:linear-gradient(90deg,#f8fbff,#ffffff);
    transform:translateY(-2px);
}

/* ======================================
THUMB
====================================== */
.sem-study-thumb{
    width:105px;
    min-width:105px;
    height:78px;
    display:block;
    border-radius:16px;
    overflow:hidden;
    background:#f1f5f9;
    box-shadow:0 10px 20px rgba(0,0,0,.08);
    position:relative;
}

.sem-study-thumb::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        180deg,
        transparent,
        rgba(0,0,0,.08)
    );
}

.sem-study-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .45s ease;
}

.sem-study-card:hover .sem-study-thumb img{
    transform:scale(1.08);
}

/* ======================================
CONTENT
====================================== */
.sem-study-body{
    flex:1;
    min-width:0;
}

/* TITLE FIX */
.sem-study-title{
    margin:0 0 8px;
    font-size:15px;
    line-height:1.45;
    font-weight:700;
}

.sem-study-title a{
    color:#111827;
    text-decoration:none;

    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;

    overflow:hidden;
    white-space:normal;
    word-break:break-word;
    max-height:4.35em;

    transition:.25s ease;
}

.sem-study-title a:hover{
    color:#2563eb;
}

/* META */
.sem-study-meta{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
    margin-bottom:14px;
    font-size:13px;
    color:#6b7280;
}

.sem-study-meta .dot{
    width:4px;
    height:4px;
    border-radius:50%;
    background:#cbd5e1;
    display:inline-block;
}

/* BUTTON */
.sem-study-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:38px;
    padding:10px 16px;
    border-radius:12px;
    background:linear-gradient(135deg,#2563eb,#1d4ed8);
    color:#fff;
    text-decoration:none;
    font-size:14px;
    font-weight:700;
    box-shadow:0 8px 18px rgba(37,99,235,.24);
    transition:all .25s ease;
}

.sem-study-btn:hover{
    color:#fff;
    transform:translateY(-2px);
    box-shadow:0 14px 28px rgba(37,99,235,.28);
}

/* EMPTY */
.sem-study-empty{
    padding:24px;
    color:#6b7280;
    font-size:14px;
}

/* ======================================
MOBILE
====================================== */
@media (max-width:767px){

    .sem-study-header{
        padding:16px;
    }

    .sem-study-heading{
        font-size:18px;
    }

    .sem-study-card{
        padding:15px;
        gap:12px;
    }

    .sem-study-thumb{
        width:92px;
        min-width:92px;
        height:70px;
        border-radius:14px;
    }

    .sem-study-title{
        font-size:14px;
    }

    .sem-study-title a{
        -webkit-line-clamp:3;
        max-height:4.2em;
    }

    .sem-study-btn{
        padding:8px 13px;
        min-height:34px;
        font-size:13px;
    }
}


/* =====================================================
SEM STUDY PRO WIDGET Post in học tập 1
Sidebar Style PRO MAX
Dùng cho: .sem-study-widget
===================================================== */

.sem-study-widget{
    background:#ffffff;
    border:1px solid #e8e8e8;
    border-radius:16px;
    padding:20px;
    margin-bottom:30px;
    box-shadow:0 10px 30px rgba(0,0,0,.04);
    overflow:hidden;
}

/* TITLE */
.sem-study-widget .sem-widget-title{
    margin:0 0 18px;
    padding-bottom:14px;
    border-bottom:2px solid #f1f1f1;
    font-size:20px;
    line-height:1.3;
    font-weight:700;
    letter-spacing:-0.3px;
}

.sem-study-widget .sem-widget-title a{
    color:#111;
    text-decoration:none;
    transition:.25s ease;
}

.sem-study-widget .sem-widget-title a:hover{
    color:#e11d48;
}

/* ITEM */
.sem-study-widget .sem-widget-item{
    display:flex;
    align-items:flex-start;
    gap:14px;
    padding:14px 0;
    border-bottom:1px solid #f3f3f3;
    position:relative;
}

.sem-study-widget .sem-widget-item:last-child{
    border-bottom:none;
    padding-bottom:0;
}

/* RANK */
.sem-study-widget .rank{
    flex:0 0 34px;
    width:34px;
    height:34px;
    line-height:34px;
    text-align:center;
    font-size:14px;
    font-weight:700;
    color:#fff;
    border-radius:50%;
    background:linear-gradient(135deg,#111,#444);
    margin-top:2px;
}

/* THUMB */
.sem-study-widget .thumb{
    flex:0 0 84px;
    width:84px;
    height:64px;
    border-radius:12px;
    overflow:hidden;
    display:block;
    background:#f5f5f5;
}

.sem-study-widget .thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .35s ease;
}

.sem-study-widget .sem-widget-item:hover .thumb img{
    transform:scale(1.08);
}

/* CONTENT */
.sem-study-widget .content{
    flex:1;
    min-width:0;
}

/* POST TITLE */
.sem-study-widget .title{
    margin:0 0 8px;
    font-size:15px;
    line-height:1.45;
    font-weight:700;
}

.sem-study-widget .title a{
    color:#111;
    text-decoration:none;
    transition:.25s ease;
}

.sem-study-widget .title a:hover{
    color:#e11d48;
}

/* META */
.sem-study-widget .meta{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:7px;
    font-size:12px;
    color:#777;
    line-height:1.5;
}

.sem-study-widget .meta .dot{
    opacity:.6;
}

/* EMPTY */
.sem-study-widget .empty{
    margin:0;
    font-size:14px;
    color:#777;
}

/* HOVER CARD */
.sem-study-widget .sem-widget-item:hover{
    transform:translateX(2px);
    transition:.25s ease;
}

/* =====================================================
TOP 3 STYLE
===================================================== */

.sem-study-widget .sem-widget-item:nth-child(2) .rank{
    background:linear-gradient(135deg,#f59e0b,#f97316);
}

.sem-study-widget .sem-widget-item:nth-child(3) .rank{
    background:linear-gradient(135deg,#6366f1,#3b82f6);
}

.sem-study-widget .sem-widget-item:nth-child(4) .rank{
    background:linear-gradient(135deg,#10b981,#14b8a6);
}

/* =====================================================
RESPONSIVE
===================================================== */

@media (max-width:767px){

    .sem-study-widget{
        padding:16px;
        border-radius:14px;
    }

    .sem-study-widget .thumb{
        flex:0 0 72px;
        width:72px;
        height:58px;
    }

    .sem-study-widget .title{
        font-size:14px;
    }

    .sem-study-widget .rank{
        width:30px;
        height:30px;
        line-height:30px;
        flex:0 0 30px;
        font-size:13px;
    }

}


/* ==================================================
SEM post in 1 STIUDY 2 | SIDEBAR WIDGET 
================================================== */
.sem-study-widget{
    background:#ffffff;
    border:1px solid #e9eef5;
    border-radius:18px;
    padding:18px;
    box-shadow:0 10px 35px rgba(0,0,0,.05);
}

/* HEADER */
.sem-study-widget__header{
    margin-bottom:18px;
    padding-bottom:14px;
    border-bottom:2px solid #edf2f7;
    position:relative;
}

.sem-study-widget__header:before{
    content:'';
    position:absolute;
    left:0;
    bottom:-2px;
    width:60px;
    height:2px;
    background:#2563eb;
}

.sem-study-widget__title{
    margin:0;
    font-size:28px;
    font-weight:700;
    line-height:1.2;
    letter-spacing:-0.3px;
}

.sem-study-widget__title a{
    color:#111827;
    text-decoration:none;
}

/* LIST */
.sem-study-widget__list{
    display:flex;
    flex-direction:column;
    gap:16px;
}

/* CARD */
.sem-study-card{
    display:flex;
    gap:14px;
    align-items:flex-start;
    padding:14px;
    border:1px solid #edf2f7;
    border-radius:16px;
    transition:.25s ease;
    background:#fff;
}

.sem-study-card:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 25px rgba(0,0,0,.06);
}

/* THUMB */
.sem-study-card__thumb{
    width:110px;
    flex:0 0 110px;
    position:relative;
}

.sem-study-card__thumb img{
    width:110px;
    height:80px;
    object-fit:cover;
    border-radius:14px;
    display:block;
}

/* RANK */
.sem-study-card__rank{
    position:absolute;
    top:-8px;
    left:-8px;
    width:28px;
    height:28px;
    border-radius:50%;
    background:#2563eb;
    color:#fff;
    font-size:13px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 6px 14px rgba(37,99,235,.25);
}

/* BODY */
.sem-study-card__body{
    flex:1;
    min-width:0;
}

/* TITLE */
.sem-study-card__title{
    margin:0 0 8px;
    font-size:15px;
    line-height:1.45;
    font-weight:700;
}

.sem-study-card__title a{
    color:#111827;
    text-decoration:none;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.sem-study-card__title a:hover{
    color:#2563eb;
}

/* META */
.sem-study-card__meta{
    font-size:13px;
    color:#6b7280;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:10px;
}

/* BUTTON */
.sem-study-card__btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:38px;
    padding:0 16px;
    border-radius:10px;
    border:1px solid #dbeafe;
    background:#eff6ff;
    color:#2563eb;
    font-size:14px;
    font-weight:600;
    text-decoration:none;
    transition:.25s;
}

.sem-study-card__btn:hover{
    background:#2563eb;
    color:#fff;
}

/* MOBILE */
@media(max-width:767px){

.sem-study-widget{
    padding:14px;
}

.sem-study-widget__title{
    font-size:22px;
}

.sem-study-card{
    padding:12px;
}

.sem-study-card__thumb{
    width:92px;
    flex:0 0 92px;
}

.sem-study-card__thumb img{
    width:92px;
    height:72px;
}

.sem-study-card__title{
    font-size:16px;
}

}