/* =========================================
   EDITORIAL GRID - CHUẨN LAYOUT TẠP CHÍ
   ========================================= */
html body .editorial-grid { 
    display: grid !important; 
    grid-template-columns: repeat(3, 1fr) !important; 
    gap: 40px 24px !important; 
}

/* Thẻ bài viết chung */
html body .article-card { 
    display: flex !important; 
    flex-direction: column !important; 
    height: 100% !important;
}

/* THẺ LỚN NHẤT: Chiếm 2 cột ngang, 2 cột dọc */
html body .article-card--large { 
    grid-column: span 2 !important; 
    grid-row: span 2 !important; 
}

/* Xử lý phần Ảnh */
html body .article-card__img-wrap { 
    border-radius: 12px !important; 
    overflow: hidden !important; 
    margin-bottom: 16px !important;
}
/* Ảnh thẻ nhỏ tỷ lệ 16:10 */
html body .article-card:not(.article-card--large) .article-card__img-wrap { 
    aspect-ratio: 16 / 10 !important; 
}
/* Ảnh thẻ lớn tự động kéo giãn cho bằng 2 thẻ nhỏ chồng lên nhau */
html body .article-card--large .article-card__img-wrap { 
    flex-grow: 1 !important; 
    min-height: 380px !important; 
}
html body .article-card__img-wrap img { 
    width: 100% !important; 
    height: 100% !important; 
    object-fit: cover !important; 
    transition: transform 0.4s ease !important;
}
html body .article-card:hover .article-card__img-wrap img { 
    transform: scale(1.05) !important; 
}

/* Xử lý Nội dung */
html body .article-card__content { 
    display: flex !important; 
    flex-direction: column !important; 
    flex-grow: 1 !important; 
}

/* Label Điểm đến, Kinh nghiệm... (Có dấu chấm) */
html body .ac-badge { 
    display: flex !important; align-items: center !important; gap: 8px !important; 
    font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; 
    color: #101214 !important; margin-bottom: 8px !important; 
}
html body .ac-badge .dot { 
    width: 6px !important; height: 6px !important; border-radius: 50% !important; background: #52C41A !important; 
}

/* Tiêu đề */
html body .article-card__title { 
    font-size: 18px !important; font-weight: 800 !important; line-height: 1.4 !important; 
    color: #101214 !important; margin: 0 0 16px 0 !important; 
}
html body .article-card__title a { color: inherit !important; text-decoration: none !important; }
/* Tiêu đề thẻ lớn thì to hơn */
html body .article-card--large .article-card__title { 
    font-size: 28px !important; margin-bottom: 12px !important; 
}

/* Mô tả ngắn (Chỉ hiện ở thẻ lớn) */
html body .article-card__desc { 
    font-size: 15px !important; color: #667085 !important; line-height: 1.5 !important; 
    margin: 0 0 24px 0 !important; padding-right: 20px !important;
}

/* Footer (Avatar & Nút bấm) */
html body .article-card__footer { 
    display: flex !important; justify-content: space-between !important; align-items: center !important; 
    margin-top: auto !important; /* Đẩy footer xuống đáy */
}
html body .ac-meta { 
    display: flex !important; align-items: center !important; gap: 8px !important; 
    font-size: 12px !important; color: #667085 !important; 
}
html body .ac-meta img { 
    width: 24px !important; height: 24px !important; border-radius: 50% !important; object-fit: cover !important; 
}
html body .ac-meta strong { color: #101214 !important; font-weight: 600 !important; }

/* Nút mũi tên viền đỏ tròn */
html body .ac-btn { 
    width: 36px !important; height: 36px !important; border-radius: 50% !important; 
    border: 1px solid #FF4D2E !important; color: #FF4D2E !important; background: white !important;
    display: flex !important; align-items: center !important; justify-content: center !important; 
    cursor: pointer !important; transition: all 0.2s !important; 
}
html body .article-card:hover .ac-btn { 
    background: #FF4D2E !important; color: white !important; 
}

/* =========================================
   FIX AVATAR & META INFO TRONG HERO BÀI VIẾT
   ========================================= */
html body .hero-featured-post__content .meta {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    margin-bottom: 24px !important;
}

html body .hero-featured-post__content .meta .avatar {
    width: 36px !important; 
    height: 36px !important; 
    border-radius: 50% !important; /* Bo tròn tuyệt đối */
    object-fit: cover !important; /* Tránh méo ảnh */
    border: 2px solid rgba(255, 255, 255, 0.2) !important; /* Thêm viền mờ cho sang */
}

/* Ẩn dấu chấm phụ trên mobile nếu bị chật */
html body .hero-featured-post__content .meta .dot-sep {
    color: rgba(255, 255, 255, 0.5) !important;
}
/* =========================================
   TRANG JOURNAL (CẨM NANG)
   ========================================= */
.journal-hero { padding: 40px 0 60px 0; }
.journal-hero__title { font-size: 4.5rem; font-weight: 900; line-height: 1.1; margin: 16px 0 24px 0; }
.journal-hero__desc { font-size: 16px; color: #475467; line-height: 1.6; margin-bottom: 40px; padding-right: 40px; }
.journal-hero__stats { display: flex; gap: 32px; border-top: 1px solid #E5E7EB; padding-top: 24px; }
.journal-hero__stats .stat { display: flex; flex-direction: column; }
.journal-hero__stats .num { font-size: 24px; font-weight: 800; color: #101214; }
.journal-hero__stats .label { font-size: 12px; color: #667085; }

/* Hero Featured Card */
.hero-featured-post { position: relative; height: 480px; border-radius: 16px; overflow: hidden; }
.hero-featured-post__img { width: 100%; height: 100%; object-fit: cover; }
.hero-featured-post__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent 60%); }
.hero-featured-post__content { position: absolute; bottom: 0; padding: 40px; color: white; width: 80%; }
.hero-featured-post h2 a { color: white; text-decoration: none; font-size: 32px; font-weight: 800; line-height: 1.3; display: block; margin: 12px 0; }

/* Category Tabs */
.journal-category-nav { border-top: 1px solid #E5E7EB; border-bottom: 1px solid #E5E7EB; position: sticky; top: 80px; background: white; z-index: 90; }
.category-tabs { display: flex; list-style: none; margin: 0; padding: 0; justify-content: space-between; overflow-x: auto; scrollbar-width: none; }
.category-tabs::-webkit-scrollbar { display: none; }
.category-tabs li a { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 24px; color: #667085; text-decoration: none; font-weight: 600; font-size: 13px; border-bottom: 2px solid transparent; white-space: nowrap; }
.category-tabs li a svg { width: 24px; height: 24px; }
.category-tabs li.active a { color: #FF4D2E; border-bottom-color: #FF4D2E; }

/* Editorial Grid */
.editorial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 24px; }
.article-card { display: flex; flex-direction: column; gap: 16px; }
.article-card--large { grid-column: span 2; }
.article-card__img-wrap { border-radius: 12px; overflow: hidden; aspect-ratio: 16/10; }
.article-card--large .article-card__img-wrap { aspect-ratio: 18/17; }
.article-card__img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.article-card:hover .article-card__img-wrap img { transform: scale(1.05); }
.article-card__title a { color: #101214; text-decoration: none; font-size: 20px; font-weight: 800; line-height: 1.4; }
.article-card--large .article-card__title a { font-size: 28px; }
.article-card__footer { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 16px; border-top: 1px solid #F2F4F7; }

/* Editor's Pick & Newsletter */
/* =========================================
   FIX KHỐI EDITOR'S PICK CHUẨN DESIGN
   ========================================= */
html body .journal-editors-pick {
    position: relative !important;
    padding: 100px 0 !important; /* Đẩy padding cao lên cho thoáng */
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: #101214 !important; 
    display: block !important; /* Xóa lưới grid 2 cột cũ */
}

/* Lớp màng đen gradient mờ dần từ trái sang phải */
html body .ep-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(90deg, #101214 0%, rgba(16, 18, 20, 0.85) 45%, transparent 100%) !important;
    z-index: 1 !important;
}

/* Nâng content lên trên lớp màng */
html body .journal-editors-pick .nomad-container {
    position: relative !important;
    z-index: 2 !important;
}

/* Bóp chiều rộng khối chữ lại để nhường không gian cho ảnh nền bên phải */
html body .ep-text {
    max-width: 520px !important;
}

html body .ep-title {
    font-size: 36px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    margin: 0 0 16px 0 !important;
    color: white !important;
}

html body .ep-desc {
    font-size: 16px !important;
    color: rgba(255, 255, 255, 0.8) !important;
    line-height: 1.6 !important;
    margin-bottom: 32px !important;
}

/* Nút bấm viền cam đỏ bo tròn chuẩn thiết kế */
html body .ep-btn {
    display: inline-flex !important;
    align-items: center !important;
    padding: 12px 28px !important;
    border-radius: 50px !important;
    background: #101214 !important; 
    border: 1px solid #FF4D2E !important;
    color: #FF4D2E !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

html body .ep-btn:hover {
    background: #FF4D2E !important;
    color: white !important;
}

.journal-newsletter { background: #FAFAFA; border-top: 1px solid #E5E7EB; border-bottom: 1px solid #E5E7EB; padding: 40px 0; }
.jn-inner { display: flex; justify-content: space-between; align-items: center; gap: 40px; }
.jn-form { display: flex; flex: 1; max-width: 400px; background: white; border-radius: 50px; padding: 4px 4px 4px 20px; border: 1px solid #E5E7EB; }
.jn-form input { border: none; outline: none; flex: 1; font-family: inherit; }
.jn-form button { width: 40px; height: 40px; border-radius: 50%; background: #FF4D2E; color: white; border: none; cursor: pointer; }

/* ==============================================================
   TRANG CHI TIẾT BÀI VIẾT (ARTICLE DETAIL) - FULL BỘ CHUẨN DESIGN
   ============================================================== */

/* =========================================
   1. LAYOUT 2 CỘT CHÍNH XÁC (DESKTOP)
   ========================================= */
.article-page-layout {
    display: grid !important;
    grid-template-columns: 8fr 3fr !important; /* Cột trái to, cột phải nhỏ */
    gap: 40px !important;
    padding-top: 40px !important;
    align-items: flex-start !important;
}

.article-main-col {
    display: flex;
    flex-direction: column;
    gap: 40px;
    min-width: 0;
}

.article-sidebar-col {
    position: sticky;
    top: 100px; /* Cố định sidebar khi cuộn chuột */
    width: 100%;
}

/* =========================================
   2. THIẾT KẾ KHỐI HERO CARD TRONG CỘT TRÁI
   ========================================= */
.article-hero-card {
    position: relative;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    padding: 48px; /* Padding lớn để chữ thụt vào trong card */
    box-sizing: border-box;
}

/* Ảnh nền nằm dưới cùng */
.article-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center; /* Ép cảnh đẹp sang phải */
    z-index: 1;
}

/* Lớp phủ Gradient trắng: Rất đậm bên trái, mờ dần sang phải */
.article-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #FFFFFF 45%, rgba(255,255,255,0.85) 60%, transparent 100%);
    z-index: 2;
}

/* Nội dung chữ đè lên trên lớp phủ */
.article-hero-content {
    position: relative;
    z-index: 3;
    max-width: 75%; /* Bóp chiều ngang chữ lại để nhường chỗ cho ảnh bên phải */
    color: #101214;
}

/* Chi tiết Typography Hero */
.article-hero-title { font-size: 3.5rem; font-weight: 900; line-height: 1.15; margin: 16px 0; letter-spacing: -1px; }
.highlight-orange { color: #FF4D2E; }
.article-hero-lead { font-size: 15px; color: #475467; line-height: 1.6; margin-bottom: 24px; max-width: 90%; }

.nomad-breadcrumb { font-size: 13px; color: #667085; margin-bottom: 24px; font-weight: 500; display: block; }
.nomad-breadcrumb a { color: #101214; text-decoration: none; }
.article-hero-meta-top { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.read-time { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #667085; font-weight: 500; }
.read-time svg { display: block; width: 14px; height: 14px; }

/* Thông tin tác giả */
.article-author-info {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 24px;
    border-top: 1px solid #E5E7EB;
    margin-top: 32px;
}
.author-avatar { width: 48px; height: 48px; min-width: 48px; border-radius: 50%; object-fit: cover; }
.author-text { display: flex; flex-direction: column; }
.author-text strong { font-size: 15px; color: #101214; line-height: 1.2; }
.author-text span { font-size: 13px; color: #667085; }
.publish-date { margin-left: auto; font-size: 13px; color: #667085; border-left: 1px solid #E5E7EB; padding-left: 16px; }

/* =========================================
   3. NỘI DUNG BÀI VIẾT CHÍNH
   ========================================= */
.article-content { flex: 1; min-width: 0; font-size: 17px; line-height: 1.8; color: #344054; }
.article-content p { margin-bottom: 24px; }
.article-content h2 { font-size: 28px; font-weight: 800; color: #101214; margin: 48px 0 24px 0; scroll-margin-top: 100px; }

/* Các phần tử bên trong bài viết */
.numbered-section { margin-top: 48px; }
.numbered-heading { display: flex; gap: 16px; align-items: baseline; margin-bottom: 24px; }
.numbered-heading .num { font-size: 40px; color: #FF4D2E; font-weight: 300; line-height: 1; }
.numbered-heading h3 { font-size: 24px; font-weight: 800; margin: 0; color: #101214; }

.content-inline-img { width: 100%; border-radius: 12px; margin: 24px 0; }
.article-quote { border-left: 4px solid #FF4D2E; padding: 16px 0 16px 32px; margin: 40px 0; font-size: 20px; font-weight: 600; color: #101214; font-style: italic; background: #FFF5F3; border-radius: 0 12px 12px 0; }
.article-quote footer { font-size: 14px; font-weight: 500; color: #667085; margin-top: 16px; font-style: normal; display: block; }

.article-full-image img, .article-image-grid img { width: 100%; border-radius: 12px; }
.article-full-image figcaption, .article-image-grid figcaption { font-size: 13px; color: #667085; text-align: center; margin-top: 12px; font-style: italic; }
.grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 40px 0; }

/* =========================================
   4. KHỐI WIDGETS (Checklist & Expert Tip)
   ========================================= */
.article-widgets-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 48px 0; }
.widget-box { border-radius: 12px; padding: 32px; }
.widget-checklist { border: 1px solid #E5E7EB; background: #FAFAFA; }
.widget-checklist h4 { display: flex; align-items: center; gap: 12px; margin: 0 0 20px 0; font-size: 18px; color: #101214; }
/* =========================================
   FIX THẲNG HÀNG CHECKLIST WIDGET
   ========================================= */
.widget-checklist label {
    display: flex !important;
    align-items: flex-start !important; /* Giữ ở trên cùng lỡ chữ rớt 2 dòng */
    gap: 12px !important;
    margin-bottom: 16px !important;
    cursor: pointer !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    color: #344054 !important;
}
/* Tùy chỉnh riêng cho ô vuông checkbox */
.widget-checklist input[type="checkbox"] {
    flex-shrink: 0 !important; /* Khóa cứng, chống bị teo nhỏ khi chữ bên cạnh quá dài */
    width: 18px !important; 
    height: 18px !important;
    margin: 0 !important;
    margin-top: 2px !important; /* Đẩy xuống 2px để tâm ô check cân bằng chính xác với bụng chữ */
    cursor: pointer !important;
}
.widget-expert-tip { background: #101214; color: white; }
.widget-expert-tip h4 { display: flex; align-items: center; gap: 12px; margin: 0 0 16px 0; font-size: 18px; color: #FF4D2E; }
.widget-expert-tip p { color: rgba(255,255,255,0.9); font-size: 15px; margin-bottom: 24px; }
.nomad-button--white { background: white; color: #101214; padding: 12px 24px; border-radius: 40px; display: inline-block; font-weight: 600; text-decoration: none; }

/* =========================================
   5. FOOTER BÀI VIẾT (Tags, Share, Tác giả)
   ========================================= */
.article-footer-meta { display: flex; justify-content: space-between; align-items: center; padding: 32px 0; border-top: 1px solid #E5E7EB; border-bottom: 1px solid #E5E7EB; margin-top: 48px; }
.tags, .shares { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.tags a { background: #F2F4F7; color: #475467; padding: 6px 12px; border-radius: 20px; text-decoration: none; font-weight: 500; }
.circle-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid #E5E7EB; background: white; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #475467; }
.circle-btn svg { width: 16px; height: 16px; }

.article-author-box { display: flex; align-items: center; gap: 24px; padding: 40px 0; }
.article-author-box img { width: 80px; height: 80px; border-radius: 50%; }
.article-author-box .info h4 { margin: 0 0 4px 0; font-size: 18px; }
.article-author-box .info p { margin: 0; font-size: 14px; color: #667085; }
.article-author-box .bio { flex: 1; font-size: 15px; color: #475467; line-height: 1.6; padding-left: 24px; border-left: 1px solid #E5E7EB; margin-left: 24px; margin-bottom: 0; }

/* =========================================
   6. CỘT SIDEBAR MỤC LỤC
   ========================================= */
.sticky-toc { background: #FAFAFA; border-radius: 12px; padding: 24px; border: 1px solid #F2F4F7; }
.sticky-toc h3 { font-size: 16px; margin: 0 0 16px 0; padding-bottom: 16px; border-bottom: 1px solid #E5E7EB; }
.toc-list, .toc-list-secondary { list-style: none; padding: 0; margin: 0; }
.toc-list li a, .toc-list-secondary li a {
    display: flex; align-items: center; gap: 12px; padding: 10px 0; color: #475467; 
    text-decoration: none; font-size: 14px; transition: all 0.2s;
}
.toc-list li a:hover, .toc-list li a.active { color: #FF4D2E; font-weight: 600; }
.toc-list-secondary li a { color: #101214; font-weight: 500; }
.article-toc-mobile { display: none; } 

/* BÀI VIẾT LIÊN QUAN */
.related-articles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 32px; }

/* ==============================================================
   7. ĐẶC TRỊ MOBILE (<768px) CHO CHI TIẾT BÀI VIẾT
   ============================================================== */
@media (max-width: 768px) {
    /* Đập 2 cột thành 1 cột dọc */
    .article-page-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;
        padding-top: 24px !important;
    }

    /* Đổi gradient Hero trên mobile: Phủ trắng từ dưới lên trên */
    .article-hero-overlay {
        background: linear-gradient(0deg, #FFFFFF 30%, rgba(255,255,255,0.9) 60%, rgba(255,255,255,0.4) 100%) !important;
    }

    /* Thu nhỏ padding của Hero Card */
    .article-hero-card { padding: 24px !important; }
    .article-hero-content { max-width: 100% !important; }
    .article-hero-title { font-size: 2.2rem !important; margin: 12px 0 !important; }
    .article-hero-lead { font-size: 15px !important; }
    
    /* Gộp tác giả & ngày tháng thành dọc */
    .article-author-info { flex-wrap: wrap !important; gap: 12px !important; }
    .publish-date { margin-left: 0 !important; border-left: none !important; padding-left: 0 !important; width: 100% !important; }

    /* Ẩn Sidebar Desktop, Bật TOC Mobile */
    .article-sidebar-col { display: none !important; }
    .article-toc-mobile { 
        display: block !important; 
        background: #FAFAFA !important; 
        border: 1px solid #E5E7EB !important; 
        border-radius: 8px !important; 
        padding: 16px !important; 
        margin-bottom: 24px !important; 
    }
    .article-toc-mobile summary { font-weight: 700 !important; cursor: pointer !important; font-size: 15px !important; }
    .article-toc-mobile ul { margin-top: 16px !important; padding-top: 16px !important; border-top: 1px solid #E5E7EB !important; }

    /* Typography Nội dung */
    .article-content h2 { font-size: 24px !important; margin: 32px 0 16px 0 !important; }
    .numbered-heading { align-items: center !important; gap: 12px !important; margin: 32px 0 16px 0 !important; }
    .numbered-heading .num { font-size: 32px !important; }
    .numbered-heading h3 { font-size: 20px !important; }
    
    .article-quote { padding: 16px !important; margin: 24px 0 !important; font-size: 16px !important; border-radius: 12px !important; border-left: none !important; border-top: 4px solid #FF4D2E !important; }

    /* Ép tất cả lưới ảnh và khối Widget thành 1 cột dọc */
    .grid-2col, .article-widgets-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        margin: 24px 0 !important;
    }
    
    .widget-box { padding: 20px !important; }
    
    /* Khối Footer Tag và Tác giả */
    .article-footer-meta {
        flex-direction: column !important;
        gap: 20px !important;
        align-items: flex-start !important;
        padding: 24px 0 !important;
    }
    .tags, .shares { flex-wrap: wrap !important; }
    
    .article-author-box {
        flex-direction: column !important;
        text-align: center !important;
        align-items: center !important;
        gap: 16px !important;
        padding: 24px 0 !important;
    }
    .article-author-box .bio { border-left: none !important; padding-left: 0 !important; margin-left: 0 !important; font-size: 14px !important; }

    /* Bài viết liên quan -> Biến thành dải vuốt ngang */
    .related-articles-section { padding: 40px 0 !important; margin-top: 32px !important; }
    .related-articles-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        gap: 16px !important;
        padding-bottom: 24px !important;
        scrollbar-width: none !important;
        margin: 16px -16px 0 -16px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .related-articles-grid::-webkit-scrollbar { display: none !important; }
    
    .related-articles-grid .article-card {
        flex: 0 0 85% !important;
        scroll-snap-align: center !important;
        min-width: 280px !important;
    }
    
    /* Đảm bảo Header chứa "Xem tất cả" không bị bóp méo */
    .related-articles-section .nomad-section-heading {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }
}

/* =========================================
   TỐI ƯU HÓA MOBILE TOÀN DIỆN CHO TRANG JOURNAL (CHUẨN UX/UI)
   ========================================= */
@media (max-width: 768px) {
    /* 1. Reset tổng thể chống tràn ngang màn hình */
    html, body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* 2. Header & Thanh Menu Tabs dính đỉnh an toàn */
    html body .nomad-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
        background-color: #FFFFFF !important;
        border-bottom: 1px solid #E5E7EB !important;
    }

    html body .journal-category-nav {
        position: sticky !important;
        top: 60px !important;
        z-index: 999 !important;
        background-color: #FFFFFF !important;
        border-bottom: 1px solid #E5E7EB !important;
    }
    
    html body .category-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 0 16px !important;
        gap: 16px !important;
        scrollbar-width: none !important;
    }
    html body .category-tabs::-webkit-scrollbar { display: none !important; }
    html body .category-tabs li { flex: 0 0 auto !important; }

    /* 3. Tối ưu khu vực Hero: Bẻ gập thành 1 cột dọc (Chữ trên, Ảnh dưới) */
    html body .journal-hero {
        padding: 24px 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    html body .journal-hero .nomad-container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 16px !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }

    html body .journal-hero .nomad-grid,
    html body .journal-hero-grid {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 24px !important;
        margin: 0 !important;
    }

    /* Giải phóng chiều rộng các cột Hero */
    html body .journal-hero .nomad-col-5,
    html body .journal-hero .nomad-col-7,
    html body .journal-hero-col-text,
    html body .journal-hero-col-img {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* Thu gọn typography tiêu đề Hero cho vừa màn hình hẹp */
    html body .journal-hero__title {
        font-size: 30px !important;
        line-height: 1.2 !important;
        margin: 12px 0 16px 0 !important;
    }

    html body .journal-hero__desc {
        font-size: 14px !important;
        line-height: 1.5 !important;
        margin-bottom: 20px !important;
        padding-right: 0 !important;
    }

    /* Lưới thông số thống kê (200+, 50+, 100+) dàn 2 cột đều nhau */
    html body .journal-hero__stats {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
        padding-top: 16px !important;
        border-top: 1px solid #E5E7EB !important;
    }
    html body .journal-hero__stats .stat .num {
        font-size: 20px !important;
    }

    /* Thẻ bài viết nổi bật (Hero Featured Post) */
    html body .hero-featured-post {
        height: 380px !important;
        width: 100% !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        position: relative !important;
    }

    html body .hero-featured-post__content {
        padding: 20px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    html body .hero-featured-post h2 a {
        font-size: 18px !important;
        line-height: 1.3 !important;
    }

    /* 4. Danh sách bài viết (Editorial Grid): Ép hiển thị 1 cột dọc */
    html body .editorial-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;
        width: 100% !important;
        margin: 0 !important;
    }

    html body .article-card,
    html body .article-card--large {
        width: 100% !important;
        max-width: 100% !important;
        grid-column: span 1 !important;
        grid-row: span 1 !important;
    }

    html body .article-card__img-wrap,
    html body .article-card--large .article-card__img-wrap {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16/10 !important;
        min-height: unset !important;
        margin: 0 0 12px 0 !important;
        border-radius: 12px !important;
    }

    html body .article-card__content {
        padding: 0 !important;
    }

    html body .article-card__title a,
    html body .article-card--large .article-card__title a {
        font-size: 18px !important;
        line-height: 1.3 !important;
    }

    /* 5. Khối Editor's Pick Banner */
    html body .journal-editors-pick {
        padding: 60px 16px !important;
        box-sizing: border-box !important;
        background-size: cover !important;
    }
    
    html body .ep-text {
        max-width: 100% !important;
        padding: 0 !important;
    }

    html body .ep-title {
        font-size: 26px !important;
    }

    /* 6. Newsletter & Footer */
    html body .journal-newsletter .jn-inner {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 20px !important;
        padding: 0 16px !important;
        box-sizing: border-box !important;
    }

    html body .jn-form {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    html body .nomad-footer__top {
        display: flex !important;
        flex-direction: column !important;
        gap: 32px !important;
    }

    html body .nomad-footer__menus {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 20px !important;
    }
}