/*
Theme Name: Nhà Kẻ Truyền Bê Tông
Theme URI: https://nhaketruyenbetong.com
Author: Nguyễn Đại
Description: Theme WordPress — v2.1.1 (rebrand Nguyễn Đại, mobile menu, popup báo giá, lưu lead DB)
Version: 2.1.1
*/

/* =============================================================
   DESIGN SYSTEM — tokens tập trung
   ============================================================= */
:root{
    /* Palette — XANH là màu chính (theo site gốc), đỏ chỉ chấm phá cho hotline/CTA khẩn cấp */
    --c-primary:       #3a7d8b;   /* xanh teal chủ đạo (match banner) */
    --c-primary-dark:  #2d6270;   /* xanh đậm hover */
    --c-primary-soft:  #e8f1f3;   /* xanh nhạt bg/tint */
    --c-accent:        #f5c842;   /* vàng kim — chấm phá */
    --c-accent-dark:   #d9ad24;
    --c-highlight:     #ec2028;   /* đỏ — CHỈ dùng cho hotline/call CTA */
    --c-highlight-dark:#c11a20;
    --c-ink:           #1a1a1a;   /* text đậm */
    --c-ink-2:         #3d3d3d;   /* text thường */
    --c-muted:         #6b7280;   /* text phụ */
    --c-line:          #e1e7ea;   /* border cool nhạt khớp blue */
    --c-bg:            #ffffff;
    --c-bg-soft:       #f4f8f9;   /* blue-tint bg thay cream */
    --c-bg-dark:       #1c3a44;   /* xanh đậm thay đen cho section tối */

    /* Font family */
    --ff-sans:   "Be Vietnam Pro", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --ff-serif:  "Playfair Display", Georgia, "Times New Roman", serif;

    /* Type scale (fluid) */
    --fs-h1: clamp(2rem, 2rem + 2vw, 2.75rem);     /* 32→44 */
    --fs-h2: clamp(1.5rem, 1.35rem + 1.1vw, 2rem); /* 24→32 */
    --fs-h3: clamp(1.15rem, 1.05rem + .5vw, 1.375rem);
    --fs-lg:  1.0625rem;
    --fs-md:  1rem;
    --fs-sm:  .9375rem;
    --fs-xs:  .8125rem;

    /* Spacing scale (4 → 120) */
    --s-1: 4px;  --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
    --s-5: 24px; --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
    --s-9: 80px; --s-10: 96px; --s-11: 120px;

    /* Radius + shadow */
    --r-sm: 6px;  --r-md: 10px;  --r-lg: 14px;  --r-pill: 999px;
    --sh-sm: 0 1px 2px rgba(0,0,0,.05);
    --sh-md: 0 4px 24px rgba(0,0,0,.06);
    --sh-lg: 0 12px 40px rgba(0,0,0,.10);

    /* Layout */
    --container: 1200px;
    --header-h:  64px;

    /* Motion */
    --easing: cubic-bezier(.2,.8,.2,1);
}

/* =============================================================
   RESET
   ============================================================= */
*,*::before,*::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body{ width: 100%; max-width: 100%; overflow-x: hidden; }
body{
    margin: 0; padding: 0;
    font-family: var(--ff-sans);
    font-size: var(--fs-md);
    line-height: 1.65;
    color: var(--c-ink-2);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
main{ display: block; width: 100%; }
img{ max-width: 100%; height: auto; display: block; }
a{ color: var(--c-primary); text-decoration: none; transition: color .2s var(--easing); }
a:hover{ color: var(--c-primary-dark); }
h1,h2,h3,h4,h5,h6{
    font-family: var(--ff-serif);
    color: var(--c-ink);
    line-height: 1.2;
    font-weight: 700;
    margin: 0 0 var(--s-4);
}
p{ margin: 0 0 var(--s-4); max-width: 68ch; }
button{ font-family: inherit; cursor: pointer; }

/* Screen-reader only */
.screen-reader-text{ position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Skip link */
.skip-link{ position: absolute; top: -40px; left: 8px; background: var(--c-primary); color: #fff; padding: 8px 16px; z-index: 10000; border-radius: var(--r-sm); font-weight: 600; }
.skip-link:focus{ top: 8px; color: #fff; outline: 3px solid var(--c-accent); }

/* Container */
.loprong{ max-width: var(--container); margin: 0 auto; padding: 0 var(--s-5); }
.loprong--fullbleed{ max-width: 100%; padding: 0; }
@media (max-width: 640px){
    .loprong{ padding: 0 var(--s-4); }
}

/* =============================================================
   BUTTONS (unified)
   ============================================================= */
.btn,
.cta-btn-call,
.cta-btn-form,
.link_xem_toanbo_duoi,
.popup-submit,
.popup-success-call{
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 14px 28px;
    font-size: var(--fs-md);
    font-weight: 600;
    line-height: 1.2;
    border-radius: var(--r-sm);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all .2s var(--easing);
    text-decoration: none;
    font-family: var(--ff-sans);
}
.btn-primary,
.cta-btn-call,
.link_xem_toanbo_duoi,
.popup-submit,
.popup-success-call{
    background: var(--c-primary); color: #fff;
    box-shadow: 0 4px 14px rgba(58,125,139,.25);
}
.btn-primary:hover,
.cta-btn-call:hover,
.link_xem_toanbo_duoi:hover,
.popup-submit:hover,
.popup-success-call:hover{
    background: var(--c-primary-dark); color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(58,125,139,.35);
}
.btn-accent{
    background: var(--c-accent); color: var(--c-ink);
}
.btn-accent:hover{ background: var(--c-accent-dark); color: var(--c-ink); }

.btn-outline,
.cta-btn-form{
    background: transparent; color: var(--c-ink);
    border-color: var(--c-ink);
}
.btn-outline:hover,
.cta-btn-form:hover{
    background: var(--c-ink); color: #fff;
    border-color: var(--c-ink);
}
.btn-outline-light,
.cta-btn-form--light{
    background: transparent; color: #fff; border-color: rgba(255,255,255,.7);
}
.btn-outline-light:hover,
.cta-btn-form--light:hover{
    background: var(--c-accent); color: var(--c-ink); border-color: var(--c-accent);
}
.btn-sm{ padding: 10px 20px; font-size: var(--fs-sm); }
.btn-lg{ padding: 16px 32px; font-size: var(--fs-lg); }

/* =============================================================
   HEADER (bocuc_4)
   ============================================================= */
.bocuc_4{
    position: fixed; top: 0; left: 0; right: 0;
    background: #fff;
    box-shadow: 0 1px 0 var(--c-line);
    z-index: 9990;
    transition: box-shadow .2s, background .2s;
}
/* WP admin bar offset (logged-in users) */
.admin-bar .bocuc_4{ top: 32px; }
@media (max-width: 782px){ .admin-bar .bocuc_4{ top: 46px; } }
.bocuc_4.scrolled{ box-shadow: 0 2px 12px rgba(0,0,0,.08); }
.bocuc_4 > .loprong{ max-width: var(--container); }
.bocuc_4 > .loprong > .padding{
    display: flex; align-items: center; gap: var(--s-5);
    height: var(--header-h);
    min-height: var(--header-h);
    padding: 0 var(--s-5);
}
.bocuc_5{ flex: 0 0 auto; }
.header-brand-link{
    display: flex; flex-direction: row; align-items: center;
    gap: 8px; text-decoration: none;
}
.header-logo-icon{
    width: 44px; height: 44px;
    border-radius: 50%; object-fit: cover;
    flex-shrink: 0;
    border: 1.5px solid rgba(213,165,10,.35);
}
.header-brand-text{ display: flex; flex-direction: column; line-height: 1.2; gap: 1px; }
.header-brand-line1{
    font-family: var(--ff-sans);
    font-size: .62rem;
    font-weight: 700;
    color: var(--c-accent-dark);
    text-transform: uppercase;
    letter-spacing: .08em;
}
.header-brand-line2{
    font-family: var(--ff-serif);
    font-size: .9rem;
    font-weight: 700;
    color: var(--c-ink);
    white-space: nowrap;
}
@media (max-width: 480px){
    .header-brand-line2{ font-size: .8rem; }
    .header-logo-icon{ width: 38px; height: 38px; }
}
.bocuc_8{ flex: 1; }
.bocuc_292{ flex: 0 0 auto; }
.bocuc_292 .headerhotline-block a{
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--c-highlight); color: #fff;
    padding: 10px 20px; border-radius: var(--r-pill);
    font-weight: 700; font-size: var(--fs-md);
    box-shadow: 0 4px 14px rgba(236,32,40,.25);
}
.bocuc_292 .headerhotline-block a:hover{ background: var(--c-highlight-dark); color: #fff; }
.bocuc_292 i{ color: #fff; margin: 0; }

/* Main menu — DESKTOP (id #menu_desktop, inline trong header). Mobile dùng drawer #menu_8 ở body root, style ở @media block bên dưới. */
#menu_desktop > ul{ margin: 0; padding: 0; list-style: none; text-align: right; }
#menu_desktop > ul > li{
    display: inline-block; position: relative;
    font-size: var(--fs-sm); font-weight: 500;
}
#menu_desktop > ul > li > a{
    display: block; padding: 12px 16px;
    color: var(--c-ink); font-weight: 500;
    transition: color .2s;
}
#menu_desktop > ul > li:hover > a,
#menu_desktop > ul > .current-menu-item > a,
#menu_desktop > ul > .dang_chon > a{ color: var(--c-primary); font-weight: 600; }

#menu_desktop .ul2, #menu_desktop .ul3,
#menu_desktop .sub-menu,
#menu_desktop ul ul{
    display: none !important; position: absolute; z-index: 9999;
    top: 100%; left: 0; min-width: 220px;
    background: #fff; text-align: left;
    border: 1px solid var(--c-line);
    border-radius: var(--r-sm);
    box-shadow: var(--sh-md);
    padding: 8px 0; margin: 0; list-style: none;
}
#menu_desktop > ul > li:hover > .ul2,
#menu_desktop > ul > li:hover > .sub-menu,
#menu_desktop > ul > li:hover > ul{ display: block !important; }
#menu_desktop .ul2 > li,
#menu_desktop .sub-menu > li,
#menu_desktop ul ul > li{ display: block; list-style: none; }
#menu_desktop .ul2 > li > a,
#menu_desktop .sub-menu > li > a,
#menu_desktop ul ul > li > a{
    display: block; padding: 10px 18px; white-space: nowrap;
    color: var(--c-ink-2); font-size: var(--fs-sm);
}
#menu_desktop .ul2 > li:hover > a,
#menu_desktop .sub-menu > li:hover > a,
#menu_desktop ul ul > li:hover > a{ background: var(--c-bg-soft); color: var(--c-primary); }

/* Drawer ẩn trên desktop, desktop nav ẩn trên mobile */
#menu_8.mobile-drawer{ display: none; }
@media (max-width: 900px){
    #menu_desktop{ display: none; }
    #menu_8.mobile-drawer{ display: flex; }
}

.menu_button{ display: none; }
.hamburger{
    background: transparent; border: none;
    width: 44px; height: 44px; padding: 10px;
    display: none; align-items: center; justify-content: center;
    flex-direction: column; gap: 4px;
    cursor: pointer;
}
.ham-bar{ display: block; width: 24px; height: 2px; background: var(--c-ink); border-radius: 2px; transition: all .3s; }
.hamburger.is-open .ham-bar:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.hamburger.is-open .ham-bar:nth-child(2){ opacity: 0; }
.hamburger.is-open .ham-bar:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

/* =============================================================
   HERO / BANNER SLIDER — RADICAL REDESIGN
   ============================================================= */
.bocuc_171{ margin-top: 0; padding: 0; }
.bocuc_171 > .loprong{ padding: 0; max-width: 100%; }
.bocuc_272{ position: relative; overflow: hidden; background: var(--c-bg-dark); margin: 0; padding: 0; display: block; line-height: 0; }

.swiper-container{ position: relative; width: 100%; overflow: hidden; }
.swiper-wrapper{
    position: relative; width: 100%;
    height: 65vh;
    min-height: 460px;
    max-height: none;
    background: var(--c-bg-dark);
}
.swiper-slide{
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    opacity: 0;
    transition: opacity .6s var(--easing);
    pointer-events: none;
    z-index: 1;
}
.swiper-slide.is-active{
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
}
.swiper-slide picture,
.swiper-slide img{
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center top;
}
/* Gradient scrim overlay */
.swiper-wrapper::after{
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to right, rgba(8,24,16,.82) 0%, rgba(8,24,16,.58) 50%, rgba(8,24,16,.15) 100%);
    z-index: 3;
    pointer-events: none;
}

/* Hero overlay — real overlay showing text on top of image */
.hero-overlay{
    position: absolute; inset: 0; z-index: 4;
    display: flex; align-items: center;
    padding: 0 var(--s-5);
    pointer-events: none;
}
.hero-overlay > *{ pointer-events: auto; }
.hero-overlay-inner{
    max-width: var(--container);
    margin: 0 auto;
    width: 100%;
}
.hero-content{
    max-width: 580px;
    color: #fff;
}
.hero-eyebrow{
    display: inline-block;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--c-accent);
    margin-bottom: var(--s-2);
    opacity: .9;
}
.hero-title{
    font-family: var(--ff-serif);
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
    margin: 0 0 var(--s-4);
    text-shadow: 0 3px 12px rgba(0,0,0,.4);
}
.hero-title .hl{ color: var(--c-accent); }
.hero-sub{
    font-size: var(--fs-sm);
    color: rgba(255,255,255,.82);
    line-height: 1.65;
    margin-bottom: var(--s-5);
    text-shadow: 0 1px 4px rgba(0,0,0,.25);
    max-width: 480px;
}
.hero-ctas{
    display: flex; flex-wrap: wrap; gap: var(--s-3);
    align-items: center;
}
.hero-trust{
    display: flex; flex-wrap: wrap; gap: var(--s-4);
    margin-top: var(--s-4);
}
.hero-trust span{ display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: rgba(255,255,255,.8); font-weight: 500; }
.hero-trust i{ color: var(--c-accent); font-size: .9rem; }

/* Gold CTA button */
.btn-gold{
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--c-accent); color: var(--c-ink);
    padding: 13px 28px; border-radius: var(--r-pill);
    font-weight: 700; font-size: var(--fs-md);
    text-decoration: none; transition: all .2s;
    box-shadow: 0 4px 16px rgba(213,165,10,.35);
}
.btn-gold:hover{ background: var(--c-accent-dark); transform: translateY(-1px); color: var(--c-ink); }

/* Swiper nav buttons */
.swiper-button-prev, .swiper-button-next{
    position: absolute; top: 50%; z-index: 6;
    width: 48px; height: 48px; margin-top: -24px;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.35);
    color: #fff; font-size: 22px; line-height: 1;
    border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(4px);
    transition: all .2s;
}
.swiper-button-prev{ left: var(--s-5); }
.swiper-button-next{ right: var(--s-5); }
.swiper-button-prev:hover, .swiper-button-next:hover{
    background: var(--c-primary); border-color: var(--c-primary);
}

/* Pagination dots */
.swiper-pagination{
    position: absolute; bottom: var(--s-5); left: 50%;
    transform: translateX(-50%);
    z-index: 6; display: flex; gap: 8px;
}
.swiper-pagination-bullet{
    width: 10px; height: 10px; padding: 0;
    background: rgba(255,255,255,.4);
    border: none; border-radius: 50%;
    opacity: 1; cursor: pointer;
    transition: all .2s;
}
.swiper-pagination-bullet-active{
    background: var(--c-accent);
    transform: scale(1.25);
}

@media (max-width: 768px){
    .swiper-wrapper{ height: 60vh; min-height: 420px; aspect-ratio: unset; }
    .swiper-slide img, .swiper-slide picture{ object-fit: cover; object-position: center top; }
    .hero-overlay{ align-items: center; padding: var(--s-4) 60px; }
    .hero-content{ max-width: 100%; width: 100%; text-align: center; }
    .hero-title{ font-size: clamp(1.6rem, 7vw, 2.2rem); }
    .hero-sub{ display: none; }
    .hero-ctas{ justify-content: center; }
    .hero-ctas .btn, .hero-ctas .btn-gold, .hero-ctas .btn-outline-light{ width: 100%; justify-content: center; }
    .hero-trust{ display: none; }
    .swiper-button-prev, .swiper-button-next{ width: 40px; height: 40px; }
    .swiper-button-prev{ left: var(--s-3); }
    .swiper-button-next{ right: var(--s-3); }
}

/* =============================================================
   SECTION — base rhythm
   ============================================================= */
/* Section rhythm — đồng đều toàn site (96px desktop / 72px tablet / 48px mobile) */
section, .section,
.intro-section,
.commitments-section,
.faq-section,
.cta-banner-section,
.bocuc_270,
.related-mau{
    padding-block: var(--s-10);
}
/* Hero text section — dưới banner, không overlay */
.hero-text-section{ background: var(--c-bg-soft); padding-block: var(--s-7); border-bottom: 1px solid var(--c-line); }
.hero-text-inner{ display: flex; align-items: center; gap: var(--s-8); flex-wrap: wrap; }
.hero-text-main{ flex: 1 1 420px; }
.hero-text-title{
    font-family: var(--ff-serif);
    font-size: var(--fs-h2);
    font-weight: 700;
    color: var(--c-ink);
    margin: var(--s-2) 0 var(--s-4);
    line-height: 1.25;
}
.hero-text-title .hl{ color: var(--c-primary); }
.hero-text-sub{ color: var(--c-ink-2); line-height: 1.7; margin-bottom: var(--s-5); max-width: 520px; }
.hero-text-ctas{ display: flex; gap: var(--s-3); flex-wrap: wrap; }
.hero-text-trust{
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-4) var(--s-6);
}
.trust-item{ text-align: center; }
.trust-num{
    display: block;
    font-family: var(--ff-serif);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--c-primary);
    line-height: 1;
}
.trust-label{ font-size: var(--fs-xs); color: var(--c-muted); margin-top: 4px; display: block; }
.btn-outline{
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 24px; border-radius: var(--r-pill);
    border: 2px solid var(--c-primary); color: var(--c-primary);
    font-weight: 600; font-size: var(--fs-md);
    text-decoration: none; transition: background .2s, color .2s;
}
.btn-outline:hover{ background: var(--c-primary); color: #fff; }
@media (max-width: 768px){
    .hero-text-inner{ flex-direction: column; gap: var(--s-5); }
    .hero-text-trust{ grid-template-columns: repeat(4, 1fr); width: 100%; }
    .hero-text-ctas{ flex-direction: column; }
    .hero-text-ctas .btn, .hero-text-ctas .btn-outline{ width: 100%; justify-content: center; }
}

/* Section ngay sau hero (bocuc_270 = products) — giảm padding-top để tránh dư sau hero fullbleed */
.bocuc_272 + .bocuc_270,
.bocuc_171 .bocuc_270{
    padding-top: var(--s-8);
}
/* Trust bar mảnh hơn (không phải section "to") */
.why-us-strip{ padding-block: var(--s-6); }

@media (max-width: 1024px){
    section, .section,
    .intro-section,
    .commitments-section,
    .faq-section,
    .cta-banner-section,
    .bocuc_270,
    .related-mau{
        padding-block: var(--s-9);
    }
    .bocuc_272 + .bocuc_270,
    .bocuc_171 .bocuc_270{ padding-top: var(--s-7); }
    .why-us-strip{ padding-block: var(--s-5); }
}
@media (max-width: 768px){
    section, .section,
    .intro-section,
    .commitments-section,
    .faq-section,
    .cta-banner-section,
    .bocuc_270,
    .related-mau{
        padding-block: var(--s-7);
    }
    .bocuc_272 + .bocuc_270,
    .bocuc_171 .bocuc_270{ padding-top: var(--s-6); }
    .why-us-strip{ padding-block: var(--s-5); }
}

.section-eyebrow{
    display: block; text-align: center;
    font-family: var(--ff-sans);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--c-primary);
    margin: 0 0 var(--s-3);
}
.section-title{
    text-align: center;
    font-family: var(--ff-serif);
    font-size: var(--fs-h2);
    line-height: 1.22;
    color: var(--c-ink);
    margin: 0 auto var(--s-4);
    max-width: 820px;
}
.section-sub{
    text-align: center;
    color: var(--c-muted);
    font-size: var(--fs-md);
    line-height: 1.65;
    margin: 0 auto var(--s-8);
    max-width: 680px;
}
.section-divider{
    display: block;
    width: 60px; height: 3px;
    background: var(--c-accent);
    margin: var(--s-3) auto var(--s-6);
    border-radius: 2px;
}

@media (max-width: 768px){
    .section-sub{ margin-bottom: var(--s-6); }
}

/* =============================================================
   WHY-US STRIP (trust bar)
   ============================================================= */
.why-us-strip{
    background: var(--c-bg-soft);
    padding-block: var(--s-6);
    border-top: 1px solid var(--c-line);
    border-bottom: 1px solid var(--c-line);
}
.why-us-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-5);
}
.why-us-item{
    display: flex; align-items: center; gap: var(--s-4);
    min-height: 48px;
}
.why-us-icon{
    width: 48px; height: 48px; flex: 0 0 48px;
    display: flex; align-items: center; justify-content: center;
    background: var(--c-primary); color: #fff;
    border-radius: 50%; font-size: 18px;
}
.why-us-text{
    display: flex; flex-direction: column; gap: var(--s-1);
    min-width: 0;
}
.why-us-text strong{
    font-family: var(--ff-sans);
    color: var(--c-ink);
    font-size: var(--fs-md);
    font-weight: 700;
    line-height: 1.3;
}
.why-us-text span{
    color: var(--c-muted);
    font-size: var(--fs-sm);
    line-height: 1.4;
}
.why-us-text a{ color: var(--c-primary); font-weight: 700; }
@media (max-width: 900px){
    .why-us-grid{ grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
}
@media (max-width: 520px){
    .why-us-grid{ grid-template-columns: 1fr; gap: var(--s-4); }
}

/* =============================================================
   INTRO SECTION — 2 cột text + stats
   ============================================================= */
.intro-section{ background: var(--c-bg); }
.intro-grid{
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: var(--s-8);
    align-items: center;
}
.intro-text h2{
    font-family: var(--ff-serif);
    font-size: var(--fs-h2);
    line-height: 1.25;
    color: var(--c-ink);
    margin: 0 0 var(--s-4);
}
.intro-text p{
    color: var(--c-ink-2);
    line-height: 1.75;
    margin: 0 0 var(--s-4);
    max-width: 60ch;
}
.intro-list{
    list-style: none;
    padding: 0;
    margin: var(--s-5) 0 var(--s-6);
}
.intro-list li{
    display: flex; align-items: flex-start; gap: var(--s-3);
    padding: var(--s-3) 0;
    color: var(--c-ink-2);
    border-bottom: 1px solid var(--c-line);
    font-size: var(--fs-md);
}
.intro-list li:last-child{ border-bottom: none; }
.intro-list li i{ color: var(--c-primary); margin-top: 5px; flex-shrink: 0; }

.intro-cta{
    display: inline-flex !important;
    align-items: center;
    gap: var(--s-2);
    margin-top: var(--s-2);
}

.intro-stats{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-4);
    padding: var(--s-6);
    background: var(--c-bg-soft);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
}
.stat-item{
    text-align: center;
    padding: var(--s-5) var(--s-3);
    background: #fff;
    border-radius: var(--r-md);
    box-shadow: var(--sh-sm);
    border: 1px solid var(--c-line);
}
.stat-num{
    display: block;
    font-family: var(--ff-serif);
    font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem);
    font-weight: 700;
    color: var(--c-primary);
    line-height: 1;
    margin-bottom: var(--s-2);
}
.stat-label{
    display: block;
    color: var(--c-muted);
    font-size: var(--fs-sm);
    line-height: 1.4;
}
@media (max-width: 900px){
    .intro-grid{ grid-template-columns: 1fr; gap: var(--s-6); }
}

/* =============================================================
   COMMITMENTS (5 cam kết)
   ============================================================= */
.commitments-section{
    background: var(--c-bg-dark);
    color: #fff;
    position: relative;
}
.commitments-section .section-title{ color: #fff; }
.commitments-section .section-eyebrow{ color: var(--c-accent); }
.commitments-section .section-sub{ color: rgba(255,255,255,.7); }

.commitments-grid{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--s-4);
}
.commitment-item{
    text-align: center;
    padding: var(--s-7) var(--s-4) var(--s-6);
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--r-md);
    transition: all .25s var(--easing);
    display: flex; flex-direction: column;
}
.commitment-item:hover{
    background: rgba(245,200,66,.08);
    border-color: var(--c-accent);
    transform: translateY(-4px);
}
.commitment-icon{
    width: 64px; height: 64px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto var(--s-5);
    background: var(--c-primary);
    color: #fff;
    border-radius: 50%;
    font-size: 24px;
}
.commitment-item:hover .commitment-icon{ background: var(--c-accent); color: var(--c-ink); }
.commitment-item h3{
    font-family: var(--ff-sans);
    color: #fff;
    font-size: var(--fs-lg);
    font-weight: 700;
    margin: 0 0 var(--s-3);
    line-height: 1.3;
}
.commitment-item p{
    color: rgba(255,255,255,.78);
    font-size: var(--fs-sm);
    line-height: 1.65;
    margin: 0 auto;
    max-width: 28ch;
}
@media (max-width: 1024px){
    .commitments-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px){
    .commitments-grid{ grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
    .commitment-item{ padding: var(--s-5) var(--s-3); }
}

/* =============================================================
   PRODUCTS (bocuc_270)
   ============================================================= */
.bocuc_270{
    background: var(--c-bg);
    padding-block: var(--s-10);
}
.bocuc_270 > .loprong{ max-width: var(--container); margin: 0 auto; padding: 0 var(--s-5); }
.bocuc_270 .header{
    text-align: center;
    padding: 0 0 var(--s-7);
}
.bocuc_270 .header .section-eyebrow{ margin: 0 0 var(--s-3); }
.bocuc_270 .header_text,
.bocuc_270 .header > h2{
    font-family: var(--ff-serif);
    font-size: var(--fs-h2);
    line-height: 1.22;
    color: var(--c-ink);
    margin: 0 auto var(--s-4);
    max-width: 820px;
    text-transform: none;
    font-weight: 700;
    letter-spacing: 0;
}
.bocuc_270 .header .section-sub{ margin-bottom: var(--s-3); }
.bocuc_270 .header::after{
    content: "";
    display: block;
    width: 60px; height: 3px;
    background: var(--c-accent);
    margin: var(--s-5) auto 0;
    border-radius: 2px;
}

.bocuc_270 .sanpham_box > ul{
    list-style: none; padding: 0; margin: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-5);
}
.bocuc_270 .sanpham_box > ul > li{ display: block; }
.bocuc_270 .div_noidung{
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: all .25s var(--easing);
    height: 100%;
    display: flex; flex-direction: column;
    padding: 0;
    margin: 0;
    box-shadow: var(--sh-sm);
}
.bocuc_270 .div_noidung:hover{
    transform: translateY(-4px);
    box-shadow: var(--sh-md);
    border-color: var(--c-primary);
}
.bocuc_270 .anh{
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border: none;
    background: var(--c-bg-soft);
}
.bocuc_270 .anh a{ display: block; height: 100%; }
.bocuc_270 .anh img{
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .35s var(--easing);
}
.bocuc_270 .div_noidung:hover .anh img{ transform: scale(1.05); }
.bocuc_270 .tieude{
    margin: 0;
    padding: var(--s-4);
    font-family: var(--ff-sans);
    font-size: var(--fs-md);
    font-weight: 600;
    line-height: 1.4;
    background: #fff;
}
.bocuc_270 .tieude a{
    color: var(--c-ink);
    background: transparent;
    border: none;
    padding: 0;
    display: block;
    text-decoration: none;
}
.bocuc_270 .tieude a:hover{ color: var(--c-primary); }

.bocuc_270 .html201{
    position: absolute; top: 12px; left: 12px;
    padding: 4px 12px; border-radius: var(--r-pill);
    color: var(--c-ink); background: var(--c-accent);
    font-size: var(--fs-xs); font-weight: 700;
    letter-spacing: .5px;
    z-index: 2;
}
.bocuc_270 .html200{ display: none; }

.div_link_xem_toanbo{
    text-align: center;
    margin-top: var(--s-7);
    padding-top: var(--s-3);
}

@media (max-width: 1024px){
    .bocuc_270 .sanpham_box > ul{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px){
    .bocuc_270 .sanpham_box > ul{ grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
    .bocuc_270 .tieude{ padding: var(--s-3); font-size: var(--fs-sm); }
}

/* =============================================================
   FAQ
   ============================================================= */
.faq-section{ background: var(--c-bg); }
.faq-list{
    max-width: 880px;
    margin: 0 auto;
    display: flex; flex-direction: column;
    gap: var(--s-4);
}
.faq-item{
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: box-shadow .2s;
}
.faq-item[open]{ box-shadow: var(--sh-md); border-color: var(--c-primary); }
.faq-question{
    list-style: none;
    padding: var(--s-5) var(--s-5);
    cursor: pointer;
    font-family: var(--ff-sans);
    font-weight: 600;
    font-size: var(--fs-md);
    color: var(--c-ink);
    display: flex; justify-content: space-between; align-items: center;
    gap: var(--s-3);
    transition: color .2s;
    line-height: 1.4;
}
.faq-question::-webkit-details-marker{ display: none; }
.faq-question::after{
    content: "+";
    font-size: 22px; font-weight: 400;
    color: var(--c-primary);
    line-height: 1;
    flex-shrink: 0;
    transition: transform .2s;
}
.faq-item[open] .faq-question{ color: var(--c-primary); border-bottom: 1px solid var(--c-line); }
.faq-item[open] .faq-question::after{ content: "−"; color: var(--c-primary); }
.faq-answer{
    padding: var(--s-5) var(--s-5);
    color: var(--c-ink-2);
    font-size: var(--fs-md);
    line-height: 1.75;
}
.faq-answer p{ margin: 0 0 var(--s-3); }
.faq-answer p:last-child{ margin: 0; }
.faq-answer a{ color: var(--c-primary); font-weight: 700; }

@media (max-width: 640px){
    .faq-question{ padding: var(--s-4); font-size: var(--fs-sm); }
    .faq-answer{ padding: var(--s-4); font-size: var(--fs-sm); }
}

/* =============================================================
   CTA BANNER (trước footer)
   ============================================================= */
.cta-banner-section{
    background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-dark) 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
    padding-block: var(--s-10) !important;
}
@media (max-width: 768px){
    .cta-banner-section{ padding-block: var(--s-7) !important; }
}
.cta-banner-section::before{
    content: "";
    position: absolute; inset: 0;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(245,200,66,.15) 0%, transparent 40%),
        radial-gradient(circle at 85% 70%, rgba(255,255,255,.10) 0%, transparent 45%);
    pointer-events: none;
}
.cta-banner-inner{
    position: relative;
    text-align: center;
    max-width: 760px;
    margin: 0 auto;
}
.cta-banner-inner h2{
    font-family: var(--ff-serif);
    font-size: var(--fs-h2);
    color: #fff;
    line-height: 1.2;
    margin: 0 0 var(--s-4);
}
.cta-banner-inner p{
    color: rgba(255,255,255,.92);
    font-size: var(--fs-lg);
    line-height: 1.6;
    margin: 0 auto var(--s-7);
    max-width: 560px;
}
.cta-banner-ctas{
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: var(--s-3);
}
@media (max-width: 560px){
    .cta-banner-ctas{ flex-direction: column; align-items: stretch; }
    .cta-banner-ctas .btn{ width: 100%; justify-content: center; }
}
.cta-banner-ctas .btn-primary{
    background: var(--c-accent); color: var(--c-ink);
    box-shadow: 0 4px 14px rgba(0,0,0,.2);
}
.cta-banner-ctas .btn-primary:hover{ background: #fff; color: var(--c-primary); }
.cta-banner-ctas .btn-outline-light{ border-color: rgba(255,255,255,.8); color: #fff; }
.cta-banner-ctas .btn-outline-light:hover{ background: #fff; color: var(--c-primary); border-color: #fff; }

/* =============================================================
   FOOTER — 3 cột gọn gàng
   ============================================================= */
.bocuc_231{
    background: var(--c-bg-dark);
    color: rgba(255,255,255,.72);
    padding-block: var(--s-9) var(--s-7);
    font-size: var(--fs-sm);
    line-height: 1.7;
}
.bocuc_231 a{ color: rgba(255,255,255,.78); transition: color .2s; }
.bocuc_231 a:hover{ color: var(--c-accent); }
.bocuc_231 > .loprong{ max-width: var(--container); margin: 0 auto; padding: 0 var(--s-5); }

.footer-grid{
    display: grid;
    grid-template-columns: 1.4fr 1fr 1.2fr;
    gap: var(--s-7);
    align-items: start;
}

.footer-col > *:first-child{ margin-top: 0; }
.footer-col > *:last-child{ margin-bottom: 0; }

/* Col titles */
.footer-title{
    font-family: var(--ff-sans);
    font-size: var(--fs-sm);
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 var(--s-4);
    padding-bottom: var(--s-3);
    border-bottom: 2px solid var(--c-primary);
    display: inline-block;
}
.footer-title--mt{ margin-top: var(--s-5); }

/* Col 1: About */
.footer-logo{ display: inline-flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); text-decoration: none; }
.footer-logo img{ width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(213,165,10,.5); flex-shrink: 0; }
.footer-logo-text{ display: flex; flex-direction: column; line-height: 1.25; }
.footer-logo-text .flt-line1{ font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--c-accent); }
.footer-logo-text .flt-line2{ font-family: var(--ff-serif); font-size: 1rem; font-weight: 700; color: #fff; white-space: nowrap; }
.footer-tagline{ color: rgba(255,255,255,.8); margin: 0 0 var(--s-4); max-width: 360px; }
.footer-contact{ list-style: none; padding: 0; margin: 0; }
.footer-contact li{
    display: flex; align-items: flex-start; gap: var(--s-3);
    margin-bottom: var(--s-3);
    color: rgba(255,255,255,.75);
}
.footer-contact li:last-child{ margin-bottom: 0; }
.footer-contact li i{
    flex: 0 0 16px;
    color: var(--c-accent);
    font-size: 14px;
    margin-top: 4px;
    text-align: center;
}
.footer-contact li strong{ color: #fff; font-weight: 600; }
.footer-contact a{ color: var(--c-accent); font-weight: 600; }
.footer-contact a[href^="tel:"]{ font-size: var(--fs-lg); }

/* Col 2: Links */
.footer-links{ list-style: none; padding: 0; margin: 0; }
.footer-links li{ margin-bottom: var(--s-3); }
.footer-links li:last-child{ margin-bottom: 0; }
.footer-links a{
    display: inline-block;
    transition: color .2s, padding .2s;
    line-height: 1.5;
}
.footer-links a:hover{ padding-left: 4px; }

/* Col 3: Social + Newsletter */
.footer-social{
    list-style: none; padding: 0; margin: 0 0 var(--s-4);
    display: flex; flex-wrap: wrap; gap: var(--s-3);
}
.footer-social li{ width: 40px; height: 40px; }
.footer-social a{
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 50%;
    color: rgba(255,255,255,.85);
    font-size: 15px;
    transition: all .2s;
}
.footer-social a:hover{
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: #fff;
    transform: translateY(-2px);
}
.footer-social .fs-zalo span{
    font-size: 13px; font-weight: 800; letter-spacing: -.5px;
}

.footer-newsletter-note{
    color: rgba(255,255,255,.65);
    margin: 0 0 var(--s-4);
    font-size: var(--fs-sm);
    line-height: 1.6;
}
.footer-baogia-btn{
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--c-accent); color: var(--c-ink) !important;
    padding: 12px 22px; border-radius: 8px;
    font-weight: 700; font-size: var(--fs-sm);
    text-decoration: none;
    transition: background .2s, transform .15s;
    box-shadow: 0 4px 14px rgba(245,200,66,.25);
}
.footer-baogia-btn:hover{ background: var(--c-accent-dark); transform: translateY(-1px); }
.footer-newsletter-msg{
    margin-top: var(--s-2);
    font-size: var(--fs-xs);
    color: rgba(255,255,255,.7);
    min-height: 1.2em;
}

/* Footer bottom bar */
.footer-bottom{
    background: #0f0f0f;
    padding: var(--s-4) 0;
    text-align: center;
    color: rgba(255,255,255,.55);
    font-size: var(--fs-sm);
    border-top: 1px solid rgba(255,255,255,.06);
}
.footer-bottom p{ margin: 0; }
.footer-bottom a{ color: rgba(255,255,255,.8); }
.footer-bottom a:hover{ color: var(--c-accent); }

@media (max-width: 1024px){
    .footer-grid{ gap: var(--s-6); }
}
@media (max-width: 900px){
    .bocuc_231{ padding-block: var(--s-8) var(--s-5); }
    .footer-grid{ grid-template-columns: 1fr 1fr; gap: var(--s-6); }
    .footer-col--connect{ grid-column: 1 / -1; }
}
@media (max-width: 600px){
    .footer-grid{ grid-template-columns: 1fr; gap: var(--s-5); }
    .footer-col--connect{ grid-column: auto; }
    .footer-newsletter{ max-width: 100%; }
}

/* =============================================================
   FLOATING widgets
   ============================================================= */
.nut_goi_nhanh{
    position: fixed; bottom: 20px; left: 20px;
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--c-primary); color: #fff;
    padding: 12px 22px; border-radius: var(--r-pill);
    font-weight: 700; font-size: var(--fs-md);
    box-shadow: 0 6px 24px rgba(58,125,139,.4);
    z-index: 9500; text-decoration: none;
    transition: all .2s;
}
.nut_goi_nhanh:hover{ background: var(--c-primary-dark); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 28px rgba(58,125,139,.55); }
.nut_goi_nhanh .ngn-icon{ width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 14px; }
@media (max-width: 640px){
    .nut_goi_nhanh .ngn-number{ display: none; }
    .nut_goi_nhanh{ width: 48px; height: 48px; padding: 0; justify-content: center; }
}

.zalo-widget{
    position: fixed; bottom: 20px; right: 20px;
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--c-primary); color: #fff;
    padding: 10px 18px; border-radius: var(--r-pill);
    font-weight: 700; font-size: var(--fs-sm);
    box-shadow: 0 6px 20px rgba(58,125,139,.35);
    z-index: 9500; text-decoration: none;
    transition: all .2s;
}
.zalo-widget:hover{ background: var(--c-primary-dark); color: #fff; transform: translateY(-2px); }
.zalo-icon{
    width: 22px; height: 22px; border-radius: 50%;
    background: #fff; color: var(--c-primary);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: 13px;
}

.scrollup{
    position: fixed; bottom: 84px; right: 20px;
    width: 44px; height: 44px;
    background: var(--c-accent-dark);
    color: var(--c-ink);
    border-radius: 50%;
    display: none; align-items: center; justify-content: center;
    font-size: 16px; cursor: pointer; text-decoration: none;
    z-index: 9499;
    border: none;
    transition: all .2s;
}
.scrollup.show{ display: flex; }
.scrollup:hover{ background: var(--c-accent); }

/* =============================================================
   POPUP FORM
   ============================================================= */
.popup-overlay{
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.65);
    z-index: 99999;
    align-items: center; justify-content: center;
    padding: 12px;
}
.popup-overlay.active{ display: flex; }
.popup-box{
    background: #fff;
    border-radius: var(--r-lg);
    max-width: 540px; width: 100%;
    max-height: 92vh; overflow-y: auto;
    position: relative;
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.popup-head{
    background: linear-gradient(135deg, var(--c-bg-dark) 0%, #244f5c 100%);
    color: #fff;
    padding: 18px 52px 18px 22px;
    position: relative;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.popup-head-text h3{ margin: 0 0 4px; font-size: var(--fs-lg); color: #fff; font-family: var(--ff-sans); font-weight: 700; }
.popup-head-text p{ margin: 0; font-size: var(--fs-sm); color: rgba(255,255,255,.75); }
.popup-head-text p strong{ color: var(--c-accent); }
.popup-close-btn{
    position: absolute; top: 14px; right: 14px;
    background: rgba(255,255,255,.15); border: none;
    color: rgba(255,255,255,.85); width: 30px; height: 30px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; cursor: pointer; transition: background .2s;
}
.popup-close-btn:hover{ background: rgba(255,255,255,.3); color: #fff; }

.popup-body-inner{ padding: var(--s-5); }
.popup-form .form-group{ margin-bottom: var(--s-4); }
.popup-form label{
    display: block;
    font-size: var(--fs-xs); font-weight: 700;
    color: var(--c-ink); margin-bottom: 5px;
    text-transform: uppercase; letter-spacing: .4px;
    font-family: var(--ff-sans);
}
.popup-form .req{ color: #e53e3e; }
.popup-form .form-optional{ font-weight: 400; text-transform: none; color: var(--c-muted); }
.popup-form input, .popup-form select, .popup-form textarea{
    width: 100%;
    border: 1.5px solid var(--c-line);
    border-radius: var(--r-sm);
    padding: 11px 14px;
    font-size: var(--fs-md);
    font-family: inherit;
    color: var(--c-ink);
    background: #fff;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.popup-form input:focus, .popup-form select:focus, .popup-form textarea:focus{
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(58,125,139,.12);
}
.popup-form textarea{ height: 80px; resize: vertical; }

.form-msg{ font-size: var(--fs-sm); margin-top: var(--s-2); text-align: center; color: var(--c-muted); }
.form-msg.error{ color: var(--c-primary); font-weight: 600; }
.form-msg.success{ color: #10b981; font-weight: 600; }
.popup-note-text{
    font-size: var(--fs-xs); color: var(--c-muted);
    text-align: center; margin: var(--s-3) 0 0;
    display: flex; align-items: center; justify-content: center; gap: 6px;
}
.popup-note-text i{ color: var(--c-primary); }

.popup-success-msg{ display: none; text-align: center; padding: var(--s-6) var(--s-5); }
.popup-success-msg.show, .popup-success-msg.visible{ display: block; }
.popup-success-icon{ font-size: 52px; color: #10b981; margin-bottom: var(--s-3); }
.popup-success-msg h4{ font-size: var(--fs-h3); color: var(--c-ink); margin: 0 0 var(--s-2); font-family: var(--ff-serif); }
.popup-success-msg p{ color: var(--c-muted); margin: 0 0 var(--s-4); }

/* =============================================================
   BREADCRUMB / PAGE TITLE
   ============================================================= */
.page-title-bar{
    background: linear-gradient(135deg, var(--c-bg-dark) 0%, #244f5c 100%);
    padding: var(--s-8) 0 var(--s-6);
    color: #fff;
    border-bottom: none;
    margin-top: var(--header-h);
    position: relative;
    overflow: hidden;
}
.page-title-bar::before{
    content: '';
    position: absolute; inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}
.page-title-bar .loprong{ position: relative; z-index: 1; }
.page-title-bar h1{
    font-family: var(--ff-serif);
    margin: 0 0 var(--s-3);
    font-size: clamp(1.25rem, 1.1rem + 1vw, 1.75rem);
    color: #fff;
    text-transform: none;
    line-height: 1.3;
    text-wrap: balance;
}
.page-title-bar .breadcrumb,
.breadcrumb-nav{
    font-size: var(--fs-sm);
    color: rgba(255,255,255,.65);
    margin-top: 0;
}
.breadcrumb-list{
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
}
.breadcrumb-sep{ opacity: .6; }
.breadcrumb-nav a,
.page-title-bar .breadcrumb a{ color: rgba(255,255,255,.65); transition: color .2s; }
.breadcrumb-nav a:hover,
.page-title-bar .breadcrumb a:hover{ color: var(--c-accent); }

@media (max-width: 768px){
    .page-title-bar{ padding: var(--s-6) 0 var(--s-5); }
}

/* =============================================================
   CONTENT WRAP (single/archive/page)
   ============================================================= */
.content-wrap{
    max-width: var(--container);
    margin: var(--s-7) auto var(--s-8);
    padding: 0 var(--s-5);
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--s-6);
    align-items: start;
}
.main-col{
    background: #fff; padding: var(--s-7);
    min-width: 0;
    border-radius: var(--r-md);
    box-shadow: var(--sh-sm);
    border: 1px solid var(--c-line);
}
.main-col h1, .main-col h2, .main-col h3{
    color: var(--c-ink);
    font-family: var(--ff-serif);
    margin: var(--s-6) 0 var(--s-3);
    line-height: 1.25;
}
.main-col > *:first-child{ margin-top: 0; }
.main-col h1{ font-size: var(--fs-h1); }
.main-col h2{ font-size: var(--fs-h2); }
.main-col h3{ font-size: var(--fs-h3); }
.main-col p{
    margin: 0 0 var(--s-4);
    line-height: 1.75;
    color: var(--c-ink-2);
    font-size: var(--fs-md);
}
.main-col img{
    margin: var(--s-4) 0;
    border-radius: var(--r-sm);
    border: 1px solid var(--c-line);
}
.main-col ul, .main-col ol{ margin: 0 0 var(--s-4); padding-left: var(--s-5); }
.main-col li{ margin-bottom: var(--s-3); }

.content-wrap > div:last-child{ align-self: start; position: sticky; top: calc(var(--header-h) + var(--s-4)); }

.widget-box{
    background: #fff;
    margin-top: var(--s-4);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: var(--sh-sm);
}
.widget-box:first-child{ margin-top: 0; }
.widget-box .widget-title{
    background: var(--c-bg-soft);
    color: var(--c-ink);
    font-size: var(--fs-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: var(--s-4) var(--s-5);
    margin: 0;
    border-bottom: 2px solid var(--c-primary);
}
.widget-box .widget-content{
    padding: var(--s-4) var(--s-5);
    font-size: var(--fs-sm);
    color: var(--c-ink-2);
    line-height: 1.7;
}
.widget-box .widget-content a{ color: var(--c-ink-2); transition: color .2s; }
.widget-box .widget-content a:hover{ color: var(--c-primary); }

.widget-list{
    padding: 0; margin: 0;
    list-style: none;
}
.widget-list li{
    padding: var(--s-2) 0;
    border-bottom: 1px dashed var(--c-line);
    font-size: var(--fs-sm);
    line-height: 1.4;
}
.widget-list li:last-child{ border-bottom: none; }
.widget-list li a{
    display: flex; align-items: center;
    gap: var(--s-2);
    color: var(--c-ink-2);
    padding: var(--s-2) 0;
}
.widget-list li a:hover{ color: var(--c-primary); padding-left: var(--s-1); }
.widget-list li a i{ color: var(--c-primary); width: 14px; flex-shrink: 0; }
.widget-list .widget-count{ color: var(--c-muted); font-size: var(--fs-xs); margin-left: auto; }
.widget-list-all a{ font-weight: 700; color: var(--c-ink) !important; }

.widget-contact p{
    margin: 0 0 var(--s-3);
    display: flex; align-items: center;
    gap: var(--s-2);
    line-height: 1.5;
}
.widget-contact p:last-child{ margin-bottom: 0; }
.widget-contact p i{
    color: var(--c-primary);
    width: 16px; flex-shrink: 0;
}
.widget-phone{
    color: var(--c-primary) !important;
    font-weight: 700;
}
.widget-phone:hover{ color: var(--c-primary-dark) !important; }

.pagination{
    margin: var(--s-7) 0 var(--s-4);
    text-align: center;
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: var(--s-2);
}
.pagination .page-numbers{
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; height: 40px;
    padding: 0 var(--s-3);
    background: #fff;
    border: 1px solid var(--c-line);
    font-size: var(--fs-sm);
    color: var(--c-ink);
    border-radius: var(--r-sm);
    transition: all .2s;
    font-weight: 600;
}
.pagination .page-numbers.current,
.pagination .page-numbers:hover{
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: #fff;
}

@media (max-width: 900px){
    .content-wrap{
        grid-template-columns: 1fr;
        gap: var(--s-5);
        margin: var(--s-5) auto var(--s-6);
    }
    .content-wrap > div:last-child{ display: none; }
    .main-col{ padding: var(--s-5); }
}
@media (max-width: 600px){
    .content-wrap{ padding: 0 var(--s-4); }
    .main-col{ padding: var(--s-4); }
}

/* =============================================================
   SINGLE MAU (du_an) / RELATED
   ============================================================= */
.single-mau-wrap{
    max-width: var(--container);
    margin: var(--s-7) auto;
    padding: 0 var(--s-5);
}
.single-mau-hero{
    margin-bottom: var(--s-6);
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--c-line);
    box-shadow: var(--sh-sm);
}
.single-mau-hero img{ width: 100%; height: auto; display: block; }

.single-mau-body{
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--s-6);
    align-items: start;
}
.single-mau-content{
    background: #fff;
    padding: var(--s-6);
    border-radius: var(--r-md);
    border: 1px solid var(--c-line);
    box-shadow: var(--sh-sm);
    min-width: 0;
}
.single-mau-content .entry-content{
    line-height: 1.85;
    color: var(--c-ink-2);
    font-size: var(--fs-md);
}
.single-mau-content .entry-content > *:first-child{ margin-top: 0; }
.single-mau-content h2,
.single-mau-content h3{
    color: var(--c-ink);
    font-family: var(--ff-serif);
    margin: var(--s-6) 0 var(--s-3);
}
.single-mau-content h2:first-child,
.single-mau-content h3:first-child{ margin-top: 0; }
.single-mau-content p{ margin: 0 0 var(--s-4); }
.single-mau-content img{ margin: var(--s-4) 0; border-radius: var(--r-sm); border: 1px solid var(--c-line); }

.single-share{
    margin-top: var(--s-6);
    padding-top: var(--s-5);
    border-top: 1px solid var(--c-line);
    font-size: var(--fs-sm);
    display: flex; align-items: center; flex-wrap: wrap;
    gap: var(--s-3);
}
.single-share strong{ margin-right: var(--s-2); color: var(--c-ink); font-weight: 700; }
.share-fb, .share-zalo{
    padding: 10px 16px;
    border-radius: var(--r-sm);
    display: inline-flex; align-items: center; gap: 6px;
    color: #fff; font-weight: 600;
    transition: opacity .2s, transform .2s;
}
.share-fb{ background: #1877f2; }
.share-zalo{ background: #0068ff; }
.share-fb:hover, .share-zalo:hover{ opacity: .92; color: #fff; transform: translateY(-1px); }

.single-mau-aside{ align-self: start; position: sticky; top: calc(var(--header-h) + var(--s-4)); }

/* Aside CTA box (dùng chung cho single-du_an + sidebar) */
.aside-cta-box{
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    padding: var(--s-5);
    box-shadow: var(--sh-sm);
    margin-bottom: var(--s-4);
}
.aside-cta-head{
    font-family: var(--ff-serif);
    font-size: var(--fs-h3);
    color: var(--c-ink);
    font-weight: 700;
    margin: 0 0 var(--s-3);
    padding-bottom: var(--s-3);
    border-bottom: 2px solid var(--c-primary);
}
.aside-cta-box > p{
    color: var(--c-muted);
    font-size: var(--fs-sm);
    line-height: 1.7;
    margin: 0 0 var(--s-4);
}
.aside-cta-call,
.aside-cta-form{
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%;
    padding: 12px 20px;
    border-radius: var(--r-sm);
    font-weight: 700; font-size: var(--fs-md);
    margin-bottom: var(--s-3);
    text-decoration: none;
    transition: all .2s;
}
.aside-cta-call{ background: var(--c-primary); color: #fff; }
.aside-cta-call:hover{ background: var(--c-primary-dark); color: #fff; transform: translateY(-1px); }
.aside-cta-form{ background: var(--c-accent); color: var(--c-ink); }
.aside-cta-form:hover{ background: var(--c-accent-dark); color: var(--c-ink); transform: translateY(-1px); }

.aside-features{
    list-style: none;
    padding: var(--s-4) 0 0;
    margin: var(--s-2) 0 0;
    border-top: 1px solid var(--c-line);
    display: flex; flex-direction: column;
    gap: var(--s-3);
}
.aside-features li{
    display: flex; align-items: center; gap: var(--s-2);
    font-size: var(--fs-sm);
    color: var(--c-ink-2);
}
.aside-features li i{
    color: var(--c-primary);
    width: 16px;
    flex-shrink: 0;
}

.related-mau-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-5);
}
.related-mau-item{
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: all .25s var(--easing);
}
.related-mau-item:hover{ transform: translateY(-4px); box-shadow: var(--sh-md); border-color: var(--c-primary); }
.related-mau-item a{ display: block; color: var(--c-ink); }
.related-mau-item img{
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
}
.related-mau-name{
    padding: var(--s-4);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--c-ink);
    line-height: 1.4;
}
.related-mau-item:hover .related-mau-name{ color: var(--c-primary); }

.related-mau-title{
    color: var(--c-ink); font-family: var(--ff-serif);
    font-size: var(--fs-h2); text-align: center;
    margin: 0 0 var(--s-3);
}
.related-mau-title::after{
    content: ""; display: block;
    width: 60px; height: 3px;
    background: var(--c-accent);
    margin: var(--s-3) auto var(--s-7);
    border-radius: 2px;
}

@media (max-width: 1024px){
    .related-mau-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px){
    .single-mau-body{ grid-template-columns: 1fr; gap: var(--s-5); }
    .single-mau-aside{ position: static; }
    .related-mau-grid{ grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
}
@media (max-width: 600px){
    .single-mau-wrap{ margin: var(--s-5) auto; padding: 0 var(--s-4); }
    .single-mau-content{ padding: var(--s-4); }
    .aside-cta-box{ padding: var(--s-4); }
}

/* =============================================================
   CTA STRIP (sau single/archive/page)
   ============================================================= */
.cta-strip{
    background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-dark) 100%);
    color: #fff;
    padding: var(--s-8) 0;
    margin-top: var(--s-8);
    position: relative;
    overflow: hidden;
}
.cta-strip::before{
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 18% 28%, rgba(245,200,66,.14) 0%, transparent 42%),
        radial-gradient(circle at 82% 72%, rgba(255,255,255,.08) 0%, transparent 48%);
    pointer-events: none;
}
.cta-strip-inner{
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--s-6);
    align-items: center;
}
.cta-strip-text h3{
    color: #fff;
    font-family: var(--ff-serif);
    font-size: var(--fs-h3);
    margin: 0 0 var(--s-2);
    line-height: 1.25;
}
.cta-strip-text p{
    color: rgba(255,255,255,.9);
    margin: 0;
    font-size: var(--fs-md);
    line-height: 1.5;
}
.cta-strip-actions{
    display: flex; flex-wrap: wrap;
    gap: var(--s-3);
    align-items: center;
}
.cta-strip-actions .cta-btn-call,
.cta-strip-actions .cta-btn-form{
    padding: 12px 24px;
    font-weight: 700;
    font-size: var(--fs-md);
    border-radius: var(--r-sm);
    text-decoration: none;
    white-space: nowrap;
    transition: all .2s;
}
.cta-strip-actions .cta-btn-call{
    background: var(--c-accent);
    color: var(--c-ink);
    box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.cta-strip-actions .cta-btn-call:hover{ background: #fff; color: var(--c-primary); transform: translateY(-1px); }
.cta-strip-actions .cta-btn-form{
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255,255,255,.7);
}
.cta-strip-actions .cta-btn-form:hover{ background: #fff; color: var(--c-primary); border-color: #fff; transform: translateY(-1px); }

@media (max-width: 768px){
    .cta-strip{ padding: var(--s-7) 0; margin-top: var(--s-7); }
    .cta-strip-inner{ grid-template-columns: 1fr; text-align: center; gap: var(--s-4); }
    .cta-strip-actions{ justify-content: center; }
    .cta-strip-actions .cta-btn-call,
    .cta-strip-actions .cta-btn-form{ width: 100%; justify-content: center; display: inline-flex; align-items: center; gap: 8px; }
}

/* Single-content-share (dùng ở single.php) */
.single-content-share{
    margin-top: var(--s-6);
    padding-top: var(--s-5);
    border-top: 1px solid var(--c-line);
    display: flex; align-items: center; flex-wrap: wrap;
    gap: var(--s-3);
    font-size: var(--fs-sm);
}
.single-content-share strong{ color: var(--c-ink); font-weight: 700; margin-right: var(--s-2); }

/* Single meta bar (date/category/tags) — thay inline style */
.single-meta{
    font-size: var(--fs-xs);
    color: var(--c-muted);
    margin-bottom: var(--s-5);
    display: flex; flex-wrap: wrap; gap: var(--s-3);
    align-items: center;
}
.single-meta i{ color: var(--c-primary); margin-right: 4px; }
.single-tags{
    margin-top: var(--s-5);
    padding-top: var(--s-4);
    border-top: 1px solid var(--c-line);
    font-size: var(--fs-xs);
    color: var(--c-muted);
}
.single-thumb{ margin-bottom: var(--s-5); border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--c-line); }
.single-thumb img{ width: 100%; height: auto; display: block; }

/* =============================================================
   BLOG LAYOUT (index.php / search.php)
   ============================================================= */
.blog-layout{
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--s-6);
    align-items: start;
    margin: var(--s-7) auto;
    padding: 0 var(--s-5);
}
.blog-main{ min-width: 0; }
.blog-sidebar{ align-self: start; position: sticky; top: calc(var(--header-h) + var(--s-4)); }

.blog-list{
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-5);
}
.blog-card{
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    overflow: hidden;
    display: grid;
    grid-template-columns: 220px 1fr;
    transition: all .25s var(--easing);
    box-shadow: var(--sh-sm);
}
.blog-card:hover{ transform: translateY(-4px); box-shadow: var(--sh-md); border-color: var(--c-primary); }
.blog-card-thumb{
    aspect-ratio: 16/10;
    overflow: hidden;
    background: var(--c-bg-soft);
    display: block;
}
.blog-card-thumb img{
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .35s;
}
.blog-card:hover .blog-card-thumb img{ transform: scale(1.05); }
.blog-card-body{
    padding: var(--s-5);
    display: flex; flex-direction: column;
    gap: var(--s-3);
    flex: 1;
    min-width: 0;
}
.blog-card-meta{
    display: flex;
    gap: var(--s-4);
    font-size: var(--fs-xs);
    color: var(--c-muted);
}
.blog-card-meta i{ color: var(--c-primary); margin-right: 4px; }
.blog-card-title{
    font-size: var(--fs-lg);
    font-family: var(--ff-sans);
    margin: 0;
    font-weight: 600;
    line-height: 1.35;
}
.blog-card-title a{ color: var(--c-ink); }
.blog-card-title a:hover{ color: var(--c-primary); }
.blog-card-excerpt{
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--c-muted);
    line-height: 1.65;
}
.blog-card-more{
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--c-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: auto;
}
.blog-empty{
    background: #fff;
    padding: var(--s-7) var(--s-5);
    text-align: center;
    color: var(--c-muted);
    border-radius: var(--r-md);
    border: 1px solid var(--c-line);
}
.blog-empty a{ color: var(--c-primary); font-weight: 700; }
.blog-pagination{ margin-top: var(--s-7); }

@media (max-width: 900px){
    .blog-layout{ grid-template-columns: 1fr; gap: var(--s-5); }
    .blog-sidebar{ position: static; }
    .blog-card{ grid-template-columns: 160px 1fr; }
    .blog-card-body{ padding: var(--s-4); gap: var(--s-2); }
}
@media (max-width: 768px){
    .blog-card{ grid-template-columns: 1fr; }
    .blog-card-thumb{ aspect-ratio: 16/9; }
    .blog-layout{ padding: 0 var(--s-4); margin: var(--s-5) auto; }
}

/* =============================================================
   404 / Empty states
   ============================================================= */
.error-404-wrap{
    max-width: 760px;
    margin: var(--s-8) auto;
    padding: var(--s-10) var(--s-6);
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    text-align: center;
}
.error-404-num{
    font-size: clamp(80px, 10vw, 140px);
    color: var(--c-line);
    font-family: var(--ff-serif);
    font-weight: 900;
    line-height: 1;
    margin-bottom: var(--s-4);
}
.error-404-inner h1{
    color: var(--c-ink);
    font-family: var(--ff-serif);
    font-size: var(--fs-h2);
    margin: 0 0 var(--s-3);
}
.error-404-inner p{
    color: var(--c-muted);
    margin: 0 auto var(--s-6);
    max-width: 520px;
}
.error-404-links{
    display: flex; flex-wrap: wrap;
    gap: var(--s-3);
    justify-content: center;
    margin-bottom: var(--s-6);
}
.error-404-links .cta-btn-call,
.error-404-links .cta-btn-form{
    padding: 12px 24px;
    border-radius: var(--r-sm);
    font-weight: 700;
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 8px;
    transition: all .2s;
}
.error-404-links .cta-btn-call{ background: var(--c-primary); color: #fff; }
.error-404-links .cta-btn-call:hover{ background: var(--c-primary-dark); color: #fff; }
.error-404-links .cta-btn-form{
    background: transparent; color: var(--c-ink);
    border: 2px solid var(--c-ink);
}
.error-404-links .cta-btn-form:hover{ background: var(--c-ink); color: #fff; }
.error-404-sitemap{
    list-style: none;
    padding: var(--s-5) 0 0;
    margin: 0;
    display: flex; flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-3);
    border-top: 1px solid var(--c-line);
}
.error-404-sitemap li a{
    display: inline-block;
    font-size: var(--fs-sm); color: var(--c-ink);
    border: 1px solid var(--c-line);
    padding: 8px 18px; border-radius: var(--r-pill);
    transition: all .2s;
}
.error-404-sitemap li a:hover{ background: var(--c-primary); border-color: var(--c-primary); color: #fff; }

.archive-empty{
    width: 100%;
    padding: var(--s-7);
    text-align: center;
    color: var(--c-muted);
    list-style: none;
    background: #fff;
    border: 1px dashed var(--c-line);
    border-radius: var(--r-md);
}

@media (max-width: 600px){
    .error-404-wrap{ padding: var(--s-8) var(--s-4); margin: var(--s-6) auto; }
    .error-404-links{ flex-direction: column; align-items: stretch; }
    .error-404-links .cta-btn-call,
    .error-404-links .cta-btn-form{ justify-content: center; }
}

/* =============================================================
   FOCUS / A11Y
   ============================================================= */
:focus-visible{ outline: 3px solid var(--c-accent); outline-offset: 2px; border-radius: 2px; }
a:focus-visible, button:focus-visible{ outline-offset: 3px; }

/* =============================================================
   MOBILE NAV DRAWER
   ============================================================= */
#menu-drawer-overlay{ display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 9997; }
#menu-drawer-overlay.visible{ display: block; }

/* Ẩn trên desktop */
.mdrawer-head, .mdrawer-foot{ display: none; }

@media (max-width: 900px){
    .bocuc_4 > .loprong > .padding{ padding: 0 var(--s-4); height: 60px; min-height: 60px; gap: var(--s-3); }
    .bocuc_5 img, .bocuc_5 .custom-logo-link img{ height: 40px; }
    :root{ --header-h: 60px; }
    .bocuc_292{ display: none; }
    .bocuc_8{ margin-left: auto; display: flex; align-items: center; justify-content: flex-end; }
    .bocuc_8 nav{ display: flex; align-items: center; }

    .hamburger{ display: flex; }

    /* Drawer container */
    #menu_8{
        position: fixed; top: 0; left: 0;
        width: 84%; max-width: 320px; height: 100vh;
        background: #fff;
        display: flex; flex-direction: column;
        transform: translateX(-100%);
        transition: transform .32s cubic-bezier(.4,0,.2,1);
        z-index: 9998;
        box-shadow: 8px 0 40px rgba(0,0,0,.18);
        overflow: hidden;
    }
    #menu_8.open{ transform: translateX(0); }

    /* Drawer header */
    .mdrawer-head{
        display: flex; align-items: center; justify-content: space-between;
        padding: 12px 14px;
        background: var(--c-bg-dark);
        border-bottom: 2px solid var(--c-primary);
        flex-shrink: 0;
    }
    .mdrawer-logo{ display: flex; align-items: center; gap: 10px; text-decoration: none; }
    .mdrawer-logo img{ width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 1.5px solid rgba(213,165,10,.5); flex-shrink: 0; }
    .mdrawer-logo-text{ display: flex; flex-direction: column; line-height: 1.2; }
    .mdlt-1{ font-size: .56rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--c-accent); }
    .mdlt-2{ font-family: var(--ff-serif); font-size: .88rem; font-weight: 700; color: #fff; white-space: nowrap; }
    .mdrawer-x{
        background: rgba(255,255,255,.1); border: none; color: rgba(255,255,255,.85);
        width: 32px; height: 32px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        cursor: pointer; font-size: .9rem; flex-shrink: 0;
        transition: background .2s;
    }
    .mdrawer-x:hover{ background: rgba(255,255,255,.22); color: #fff; }

    /* Nav list */
    #menu_8 > .ul1{
        flex: 1; overflow-y: auto;
        padding: 6px 0; margin: 0; list-style: none;
        background: #fff;
        position: static; transform: none;
        width: 100%; height: auto; max-width: 100%;
        box-shadow: none;
    }
    #menu_8 > .ul1 > li{ display: block; border-bottom: 1px solid #f0f0f0; }
    #menu_8 > .ul1 > li > a{
        display: flex; align-items: center;
        padding: 14px 20px 14px 16px;
        color: var(--c-ink) !important;
        font-weight: 600; font-size: var(--fs-md);
        position: relative;
        transition: color .2s, background .2s;
    }
    #menu_8 > .ul1 > li > a::before{
        content: '';
        position: absolute; left: 0; top: 25%; bottom: 25%;
        width: 3px; background: var(--c-primary);
        border-radius: 0 2px 2px 0;
        transform: scaleX(0); transform-origin: left;
        transition: transform .2s;
    }
    #menu_8 > .ul1 > li > a:hover,
    #menu_8 > .ul1 > .current-menu-item > a,
    #menu_8 > .ul1 > .dang_chon > a{
        color: var(--c-primary) !important;
        background: rgba(58,125,139,.06);
    }
    #menu_8 > .ul1 > li > a:hover::before,
    #menu_8 > .ul1 > .current-menu-item > a::before,
    #menu_8 > .ul1 > .dang_chon > a::before{ transform: scaleX(1); }

    /* Submenu — mobile: click-to-expand only, KHÔNG dùng :hover */
    #menu_8 .ul2,
    #menu_8 .sub-menu,
    #menu_8 ul ul{
        position: static; display: none;
        background: #f7f8f9; box-shadow: none; border: none;
        padding: 4px 0; border-radius: 0; margin: 0;
        list-style: none;
        border-top: 1px solid #ebebeb;
    }
    #menu_8 > .ul1 > li.open > .ul2,
    #menu_8 > .ul1 > li.open > .sub-menu,
    #menu_8 > .ul1 > li.open > ul{ display: block; }
    #menu_8 .ul2 > li,
    #menu_8 .sub-menu > li,
    #menu_8 ul ul > li{ list-style: none; }
    #menu_8 .ul2 > li > a,
    #menu_8 .sub-menu > li > a,
    #menu_8 ul ul > li > a{
        display: block; padding: 11px 20px 11px 32px;
        color: var(--c-ink-2) !important; font-size: var(--fs-sm);
        transition: color .2s, background .2s;
    }
    #menu_8 .ul2 > li > a:hover,
    #menu_8 .sub-menu > li > a:hover,
    #menu_8 ul ul > li > a:hover{ color: var(--c-primary) !important; background: rgba(58,125,139,.06); }

    /* Parent item có submenu: link nằm bên trái, nút mũi tên bên phải */
    #menu_8 > .ul1 > li.menu-item-has-children{ position: relative; }
    #menu_8 > .ul1 > li.menu-item-has-children > a{ padding-right: 56px; }
    #menu_8 .submenu-toggle{
        position: absolute; top: 0; right: 0;
        width: 48px; height: 48px;
        display: flex; align-items: center; justify-content: center;
        background: transparent; border: none; cursor: pointer;
        color: var(--c-ink-2);
        border-left: 1px solid #f0f0f0;
    }
    #menu_8 .submenu-toggle::before{
        content: '\f107'; /* fa-chevron-down */
        font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', FontAwesome;
        font-weight: 900;
        font-size: 14px;
        transition: transform .25s ease;
    }
    #menu_8 > .ul1 > li.open > .submenu-toggle::before{ transform: rotate(180deg); }
    #menu_8 .submenu-toggle:hover{ background: rgba(58,125,139,.06); color: var(--c-primary); }

    /* Drawer footer: hotline CTA */
    .mdrawer-foot{
        display: block;
        padding: 14px 16px;
        border-top: 1px solid #eee;
        background: #fff;
        flex-shrink: 0;
    }
    .mdrawer-cta{
        display: flex; align-items: center; justify-content: center; gap: 8px;
        background: var(--c-primary); color: #fff !important;
        padding: 12px 16px; border-radius: 8px;
        font-weight: 700; font-size: var(--fs-md);
        text-decoration: none;
        transition: background .2s;
    }
    .mdrawer-cta:hover{ background: #2d6272; }

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

/* =============================================================
   LEGACY overrides — neutralize các class cũ nếu còn dùng
   ============================================================= */
.bocuc_258{ background: var(--c-bg); padding: var(--s-6) 0; border-top: 3px solid var(--c-primary); }
.bocuc_258 h1{ font-size: var(--fs-h2); color: var(--c-ink); margin-bottom: var(--s-3); font-family: var(--ff-serif); }
.bocuc_258 p{ font-size: var(--fs-md); color: var(--c-ink-2); line-height: 1.75; margin-bottom: var(--s-3); }
.nut3{ background: var(--c-primary) !important; color: #fff !important; }
.page-article .entry-content h2{ color: var(--c-ink); font-family: var(--ff-serif); font-size: var(--fs-h2); margin: var(--s-6) 0 var(--s-3); border-left: 4px solid var(--c-primary); padding-left: 14px; }
.page-article .entry-content h3{ color: var(--c-ink); font-family: var(--ff-serif); font-size: var(--fs-h3); margin: var(--s-5) 0 var(--s-3); }

/* Reading progress bar */
#reading-progress{
    position: fixed; top: 0; left: 0; z-index: 9999;
    height: 3px; width: 0%;
    background: linear-gradient(to right, var(--c-primary), var(--c-accent));
    transition: width .1s linear;
    pointer-events: none;
}

/* Page 2-column layout */
.page-content-wrap{ max-width: var(--container); margin: var(--s-7) auto var(--s-8); }
.page-layout-grid{
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: var(--s-7);
    align-items: start;
}
.page-article{
    background: #fff;
    padding: var(--s-7);
    border-radius: var(--r-md);
    border: 1px solid var(--c-line);
    box-shadow: var(--sh-sm);
    min-width: 0;
}

/* TOC Sidebar */
.page-toc-sidebar{
    position: sticky;
    top: calc(var(--header-h) + var(--s-5));
    max-height: calc(100vh - var(--header-h) - var(--s-7));
    overflow-y: auto;
}
.toc-box{
    background: var(--c-bg-soft);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    padding: var(--s-5);
}
.toc-title{
    font-family: var(--ff-sans);
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--c-ink);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: var(--s-4);
    display: flex; align-items: center; gap: 8px;
}
.toc-title i{ color: var(--c-primary); }
.toc-list{ list-style: none; margin: 0; padding: 0; }
.toc-item{ margin-bottom: 2px; }
.toc-item a{
    display: block;
    padding: 5px 8px;
    font-size: var(--fs-xs);
    color: var(--c-ink-2);
    border-radius: 4px;
    text-decoration: none;
    transition: all .15s;
    border-left: 2px solid transparent;
    line-height: 1.4;
}
.toc-item a:hover{ color: var(--c-primary); background: rgba(58,125,139,.06); border-left-color: var(--c-primary); }
.toc-item a.active{ color: var(--c-primary); font-weight: 600; border-left-color: var(--c-primary); background: rgba(58,125,139,.08); }
.toc-h3 a{ padding-left: var(--s-5); font-size: .8rem; opacity: .85; }

.page-featured-img{
    margin: 0 0 var(--s-6);
    border-radius: var(--r-md);
    overflow: hidden;
    border: 1px solid var(--c-line);
}
.page-featured-img img{ width: 100%; height: auto; display: block; }
.page-article .entry-content{ line-height: 1.8; color: var(--c-ink-2); font-size: var(--fs-md); }
.page-article .entry-content > *:first-child{ margin-top: 0; }
.page-article .entry-content p{ margin: 0 0 var(--s-4); }
.page-article .entry-content img{
    max-width: 100%; height: auto;
    border-radius: var(--r-sm);
    border: 1px solid var(--c-line);
    margin: var(--s-4) 0;
}
.page-article .entry-content ul,
.page-article .entry-content ol{ margin: 0 0 var(--s-4); padding-left: var(--s-5); }
.page-article .entry-content li{ margin-bottom: var(--s-3); }

@media (max-width: 900px){
    .page-layout-grid{ grid-template-columns: 1fr; }
    .page-toc-sidebar{ position: static; max-height: none; order: -1; }
    .page-article{ padding: var(--s-5); }
}
@media (max-width: 768px){
    .page-content-wrap{ margin: var(--s-5) auto var(--s-6); }
}

/* reset legacy popup */
.popup{ display: none !important; }

/* Single post 2-column layout */
.single-layout-wrap{ max-width: var(--container); margin: var(--s-7) auto var(--s-8); padding: 0 var(--s-5); }
.single-layout-grid{
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: var(--s-7);
    align-items: start;
}
.single-article{
    background: #fff;
    padding: var(--s-7);
    border-radius: var(--r-md);
    border: 1px solid var(--c-line);
    box-shadow: var(--sh-sm);
    min-width: 0;
}
.single-toc-sidebar{
    position: sticky;
    top: calc(var(--header-h) + var(--s-5));
    max-height: calc(100vh - var(--header-h) - var(--s-7));
    overflow-y: auto;
    display: flex; flex-direction: column; gap: var(--s-5);
}
@media (max-width: 900px){
    .single-layout-grid{ grid-template-columns: 1fr; }
    .single-toc-sidebar{ position: static; max-height: none; order: -1; }
    .single-article{ padding: var(--s-5); }
}
@media (max-width: 768px){
    .single-layout-wrap{ margin: var(--s-5) auto; padding: 0 var(--s-4); }
}