/* ============================================================
   HEADER NAV - hamburger menu below 1200px: the 8 top-level items plus
   search do not fit a single row under the 1200px container
   ============================================================ */
@media (max-width: 1199px) {
    /* Mobile nav */
    .nav-toggle {
        display: flex;
    }

    /* Disable hover dropdown on mobile */
    .nav-list li:hover>.nav-dropdown {
        display: none !important;
        animation: none;
    }

    .nav-list>li:has(.nav-dropdown)>a::after {
        display: inline-block;
    }

    .nav-dropdown {
        position: static !important;
        display: none !important;
        background: rgba(0, 0, 0, .15);
        box-shadow: none;
        border-top: none;
        border-radius: 0;
        min-width: 0;
        list-style: none;
    }

    /* .open MUST come after and have higher specificity than hover rule (0,3,1) */
    .nav-list li>.nav-dropdown.open {
        display: block !important;
        animation: none;
    }

    .nav-dropdown li a {
        padding-left: calc(var(--sp-lg) + 16px) !important;
        font-size: 14px !important;
        border-bottom-color: rgba(255, 255, 255, .06) !important;
    }

    .nav-list {
        display: none !important;
        position: fixed;
        top: var(--nav-height);
        left: 0;
        right: 0;
        width: 100%;
        background: var(--brand-blue-dark);
        flex-direction: column;
        box-shadow: var(--shadow-overlay);
        max-height: calc(100vh - var(--nav-height));
        max-height: calc(100dvh - var(--nav-height));
        overflow-y: auto;
        z-index: 99999;
    }

    .nav-list.show {
        display: flex !important;
    }

    .nav-list>li {
        border-bottom: 1px solid rgba(255, 255, 255, .1);
        width: 100%;
    }

    .nav-list>li:last-child {
        border-bottom: none;
    }

    .nav-list li a {
        height: auto;
        padding: var(--sp-md) var(--sp-lg);
        border-bottom: none;
        font-size: 14px;
        justify-content: flex-start;
        text-align: left;
    }

    /* Home icon item: show as "Trang chủ" text link on mobile */
    .nav-list li a .home-icon {
        display: none;
    }

    .nav-list li a .home-text {
        display: inline;
    }

    .nav-search {
        display: none;
    }

    .main-nav .container {
        justify-content: space-between;
    }
}

/* ============================================================
   HEADER SEARCH - magnifier button + drop-down search bar at every width
   ============================================================ */
/* Mobile search in header */
/* Vùng bấm 44×44 (cùng .nav-toggle), icon giữ cỡ cũ */
.mobile-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    background: none;
    border: none;
    color: #fff;
    padding: var(--sp-sm);
    cursor: pointer;
}

.mobile-search-btn svg {
    width: 20px;
    height: 20px;
}

/* Mobile search overlay */
.mobile-search-overlay {
    display: none;
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    overflow: hidden;
    background: var(--brand-blue-dark);
    padding: var(--sp-md) var(--sp-lg);
    box-shadow: var(--shadow-overlay);
    z-index: 99998;
    transform: translateY(-100%);
    opacity: 0;
    transition: transform .2s ease-out, opacity .2s ease-out;
}

.mobile-search-overlay.show {
    display: flex;
    transform: translateY(0);
    opacity: 1;
}

.mobile-search-form {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

/* Desktop: keep the bar a readable width, lined up under the magnifier */
@media (min-width: 1200px) {
    .mobile-search-overlay {
        justify-content: flex-end;
        padding-right: max(var(--sp-lg), calc((100vw - 1200px) / 2 + var(--sp-lg)));
    }

    .mobile-search-form {
        max-width: 560px;
    }
}

.mobile-search-form input {
    flex: 1;
    min-width: 0;
    height: 40px;
    padding: 0 var(--sp-md);
    border: none;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, .15);
    color: #fff;
    font-size: 1.4rem;
    font-family: var(--font-body);
    outline: none;
}

.mobile-search-form input::placeholder {
    color: rgba(255, 255, 255, .5);
}

.mobile-search-form input:focus {
    background: rgba(255, 255, 255, .25);
}

.mobile-search-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: var(--radius-sm);
    color: #fff;
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: rgba(255,255,255,.2);
}
.mobile-search-scrim {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.3);
    z-index: 99997;
}
.mobile-search-scrim.show { display: block; }

.mobile-search-close:hover {
    color: #fff;
}

.mobile-search-close svg {
    width: 20px;
    height: 20px;
}

/* ============================================================
   RESPONSIVE - Tablet (< 992px)
   ============================================================ */
@media (max-width: 991px) {
    .feature-grid {
        grid-template-columns: 3fr 2fr;
    }

    .feature-latest {
        display: none;
    }

    .feature-main {
        grid-column: 1;
        grid-row: 1;
    }

    .feature-sub {
        grid-column: 2;
        grid-row: 1;
    }

    .topic-video-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .special-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .content-grid {
        grid-template-columns: minmax(0, 1fr) 280px;
    }

    .media-grid {
        grid-template-columns: 1fr;
    }

    .category-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-main {
        grid-template-columns: 1fr 1fr;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

    .header-banner {
        display: none;
    }
}

/* ============================================================
   RESPONSIVE - Mobile (< 768px)
   ============================================================ */
@media (max-width: 767px) {
    :root {
        --sp-lg: 12px;
        --sp-xl: 16px;
    }

    .container {
        padding: 0 10px;
    }

    /* Header compact */
    .header-main {
        padding: var(--sp-sm) 0;
    }

    .header-logo img {
        max-height: 40px;
    }

    .top-bar {
        display: none;
    }

    .header-banner {
        display: none;
    }

    .ad-placeholder-970,
    .ad-placeholder-728 {
        width: 100%;
        height: 60px;
    }

    /* Feature */
    .feature-grid {
        grid-template-columns: 1fr;
        gap: var(--sp-md);
    }

    .feature-main {
        grid-column: 1;
        grid-row: auto;
    }

    .feature-main h2 {
        font-size: 1.8rem;
    }

    /* grid-row: auto bỏ grid-row:1 của tablet, để bài chính đứng trước 2 bài phụ */
    .feature-sub {
        flex-direction: row;
        gap: var(--sp-sm);
        grid-column: 1;
        grid-row: auto;
    }

    /* Sidebar xếp dưới nội dung: chỉ giữ banner 1–2 và "Bài đọc nhiều" */
    .sidebar .sidebar-extra {
        display: none;
    }

    .feature-sub-item {
        flex: 1;
    }

    .feature-sub-item h3 {
        font-size: 1.3rem;
    }

    .feature-latest {
        display: none;
    }

    /* Đề tài nổi bật: vuốt ngang 4 thẻ thay cho lưới 2×2 */
    .topic-grid {
        grid-template-columns: repeat(4, 220px);
        overflow-x: auto;
        -ms-overflow-style: none;
        scrollbar-width: none;
        gap: var(--sp-sm);
    }

    .topic-grid::-webkit-scrollbar {
        display: none;
    }

    /* Chip chuyên mục video: 1 dòng vuốt ngang thay vì xuống 4 dòng */
    .video-cat-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        -ms-overflow-style: none;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
    }

    .video-cat-nav::-webkit-scrollbar {
        display: none;
    }

    .video-cat-link {
        flex-shrink: 0;
        white-space: nowrap;
    }

    .special-grid {
        gap: var(--sp-sm);
    }

    /* Content */
    .content-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .news-list-thumb {
        width: 110px;
    }

    .news-list-sapo {
        display: none;
    }

    .highlight-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-sm);
    }

    /* Category */
    .category-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-sm);
    }

    /* Cột hẹp (2 cột trên ~480–767px): thu ảnh nhỏ để tiêu đề còn chỗ */
    .category-list-thumb {
        width: 72px;
    }

    /* Footer */
    .footer-main {
        grid-template-columns: 1fr;
        gap: var(--sp-lg);
    }

    .footer-nav {
        gap: var(--sp-md);
    }
}

/* ============================================================
   RESPONSIVE - Small Mobile (< 480px)
   ============================================================ */
@media (max-width: 479px) {
    .feature-sub {
        flex-direction: column;
    }

    .feature-sub-item {
        display: flex;
        gap: var(--sp-sm);
        align-items: flex-start;
    }

    .feature-sub-item .feature-img {
        width: 100px;
        flex-shrink: 0;
        aspect-ratio: 3/2;
    }

    .feature-sub-item h3 {
        margin-top: 0;
    }

    .highlight-grid {
        grid-template-columns: 1fr;
    }

    /* Như khối tin chính: bài đầu ảnh lớn, các bài sau ảnh nhỏ bên trái
       (3 ảnh lớn xếp chồng dài gần 900px) */
    .highlight-card:not(:first-child) {
        display: flex;
        gap: var(--sp-sm);
        align-items: flex-start;
    }

    .highlight-card:not(:first-child) .highlight-card-img {
        width: 100px;
        flex-shrink: 0;
    }

    .highlight-card:not(:first-child) h4 {
        margin-top: 0;
    }

    .category-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   RESPONSIVE - New Page Components (Tablet < 992px)
   ============================================================ */
@media (max-width: 991px) {
    .relate-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .video-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .article-title {
        font-size: 2rem;
    }
}

/* ============================================================
   RESPONSIVE - New Page Components (Mobile < 768px)
   ============================================================ */
@media (max-width: 767px) {
    /* Article */
    .article-title {
        font-size: 1.8rem;
    }

    .article-sapo {
        font-size: calc(1.4rem * var(--fs-scale, 1));
    }

    .article-body {
        font-size: calc(1.4rem * var(--fs-scale, 1));
    }

    /* Content images: reset float & width on mobile */
    .article-body .cnt-img.align-left,
    .article-body .cnt-img.left,
    .article-body .cnt-img.align-right,
    .article-body .cnt-img.right {
        float: none;
        margin: var(--sp-md) auto;
        text-align: center;
    }

    .article-body .cnt-img.w-50,
    .article-body .cnt-img.w-75,
    .article-body .cnt-img.w-25 {
        width: 100%;
    }

    .article-body .desktop-only { display: none; }
    .article-body .mobile-only { display: block; }

    .article-meta {
        flex-wrap: wrap;
        gap: var(--sp-sm);
    }

    /* Related */
    .relate-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-sm);
    }

    .relate-item h4 {
        font-size: 1.2rem;
    }

    /* Tiêu đề chuyên mục 1 dòng (dài thì "…"); nút chuyên mục con chỉ còn icon,
       chữ ẩn bằng clip nên vẫn là tên đọc của <summary> cho trình đọc màn hình */
    .cat-page-header h1 {
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .cat-page-header .cat-child-toggle {
        justify-content: center;
        width: 44px;
        min-height: 44px;
        padding: 0;
    }

    .cat-page-header .cat-child-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    /* Category listing: bài lớn trên, 2 bài nhỏ chia đôi hàng bên dưới */
    .cat-hot-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--sp-md);
    }

    .cat-hot-side {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--sp-md);
    }

    /* Pagination */
    .pagination-link,
    .pagination-current {
        min-width: 32px;
        height: 32px;
        font-size: 1.2rem;
    }

    /* Video */
    .video-grid-4 {
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-sm);
    }

    .video-detail-title {
        font-size: 1.8rem;
    }

    .video-detail-meta {
        flex-direction: column;
        gap: var(--sp-sm);
        align-items: flex-start;
    }

    /* Sharing */
    .sharing-bar {
        flex-wrap: wrap;
    }

    /* Breadcrumb */
    .breadcrumb-nav {
        font-size: 1.1rem;
    }
}

/* ============================================================
   RESPONSIVE - New Page Components (Small Mobile < 480px)
   ============================================================ */
@media (max-width: 479px) {
    .relate-grid {
        grid-template-columns: 1fr;
    }

    .video-grid-4 {
        grid-template-columns: 1fr;
    }

    .video-detail-title {
        font-size: 1.6rem;
    }
}

/* ============================================================
   RESPONSIVE - eMagazine / Infographic
   ============================================================ */
@media (max-width: 991px) {
    .emag-body .align-overflow {
        min-width: 0;
        width: 100%;
        left: 0;
    }

    .emag-title {
        font-size: 2.8rem;
    }
}

@media (max-width: 767px) {
    .emag-title {
        font-size: 2.2rem;
    }

    .emag-body .article-sapo {
        font-size: calc(1.35rem * var(--fs-scale, 1));
    }

    .emag-body .align-left,
    .emag-body .align-right {
        float: none;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .info-card {
        padding: var(--sp-lg) var(--sp-md);
    }

    .info-template .article-title {
        font-size: 2rem;
    }
}