/* ==========================================================================
   TỔNG KHO BÁNH TRUNG THU - banhtrungthu si cho doanh nghiep (B2B landing)
   Bo mau: --night (xanh reu) · --moon (vang dong) · --lacquer (do sen)
           --paper (giay ngo) · --ink (muc)
   Chu: Be Vietnam Pro (400/600/700 cho than bai, 800 cho tieu de)
   ========================================================================== */

/* ---------- Fonts (self-hosted, Vietnamese subset) ---------- */
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/be-vietnam-pro-vietnamese-400-normal.woff2') format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/be-vietnam-pro-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/be-vietnam-pro-vietnamese-600-normal.woff2') format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/be-vietnam-pro-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/be-vietnam-pro-vietnamese-700-normal.woff2') format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/be-vietnam-pro-latin-700-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}

@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:800;font-display:swap;src:url('assets/fonts/be-vietnam-pro-vietnamese-800-normal.woff2') format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:800;font-display:swap;src:url('assets/fonts/be-vietnam-pro-latin-800-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}

/* ---------- Tokens ---------- */
:root{
  --night:#14352C; --night-2:#1D4A3C; --moon:#C9A227; --moon-soft:#E8CD7A;
  --lacquer:#B5312C; --lacquer-dark:#8A2320;
  --paper:#F7F4EA; --white:#fff; --ink:#20261F; --muted:#5F6B5E;
  --line:#E3DFD2; --radius:10px; --radius-sm:6px;
  --shadow:0 8px 26px rgba(20,53,44,.09);
  --font-body:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-display:'Be Vietnam Pro',system-ui,sans-serif;
  --container:1180px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{font-family:var(--font-body);color:var(--ink);background:var(--white);line-height:1.65;font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--lacquer);text-decoration:none}
h1,h2{font-family:var(--font-display);font-weight:800;line-height:1.16;letter-spacing:-.022em}
h3{font-weight:700}
.container{max-width:var(--container);margin:0 auto;padding:0 22px}
.container-narrow{max-width:820px}
:focus-visible{outline:3px solid var(--moon);outline-offset:2px;border-radius:4px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:.98rem;padding:13px 24px;border-radius:999px;border:2px solid transparent;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s ease;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--lacquer);color:#fff;box-shadow:0 6px 18px rgba(181,49,44,.35)}
.btn-primary:hover{background:var(--lacquer-dark)}
.btn-gold{background:var(--moon);color:var(--night);box-shadow:0 6px 18px rgba(201,162,39,.35)}
.btn-night{background:var(--night);color:#fff}
.btn-line{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-line:hover{border-color:var(--lacquer);color:var(--lacquer)}
.btn-lg{padding:16px 30px;font-size:1.05rem}
.btn-sm{padding:9px 16px;font-size:.88rem}
.btn-block{width:100%}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:14px;min-height:74px}
.logo{display:flex;align-items:center;gap:10px;color:var(--ink)}
.logo-seal{display:block;width:44px;height:44px;flex:0 0 44px;border-radius:10px;overflow:hidden;box-shadow:0 2px 8px rgba(181,49,44,.35)}
.logo-seal img{width:100%;height:100%;object-fit:cover;display:block}
.logo-text{font-family:var(--font-display);font-weight:800;font-size:1.02rem;line-height:1.15;white-space:nowrap;text-align:left}
.logo-break{display:block}
.logo-text small{display:block;font-family:var(--font-body);font-weight:600;font-size:.62rem;letter-spacing:.06em;color:var(--muted);text-transform:none}
.nav-links{display:flex;gap:14px;margin-left:auto}
.nav-links a{color:var(--ink);font-weight:600;font-size:.95rem;white-space:nowrap}
.nav-links a:hover{color:var(--lacquer)}
.header-call{gap:10px;padding:8px 16px}
.header-call small{display:block;font-size:.68rem;color:var(--muted);font-weight:600;line-height:1}
.header-call strong{font-size:1rem;color:var(--lacquer)}
.header-call .ic{font-size:1.2rem}
.menu-btn{display:none;background:none;border:0;cursor:pointer;padding:10px}
.menu-btn span{display:block;width:24px;height:2.5px;background:var(--ink);margin:5px 0;border-radius:2px;transition:.2s}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.mobile-menu{display:none;flex-direction:column;background:#fff;border-bottom:1px solid var(--line)}
.mobile-menu a{padding:15px 22px;border-top:1px solid var(--line);font-weight:600;color:var(--ink)}
.mobile-menu a:last-child{color:var(--lacquer)}

/* ---------- Hero ---------- */
.hero{position:relative;background:linear-gradient(180deg,var(--night) 0%,var(--night-2) 100%);color:#fff;overflow:hidden}
.hero-urgency{position:relative;z-index:2;background:var(--moon);color:var(--night)}
.hero-moon{position:absolute;top:-140px;right:-100px;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle at 38% 38%,#FFF2CC 0%,var(--moon) 45%,rgba(201,162,39,0) 72%);opacity:.9;pointer-events:none}
.hero-grid{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center;padding-top:40px;padding-bottom:52px}
.eyebrow{font-weight:700;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--lacquer);margin-bottom:14px}
.eyebrow-gold{color:var(--moon)}
.hero h1{font-size:clamp(1.9rem,3.6vw,3rem);margin-bottom:20px}
.hero h1 em{font-style:normal;color:var(--moon)}
.hero-usp{list-style:none;margin-bottom:10px;display:grid;gap:8px}
.hero-usp li{padding-left:28px;position:relative;color:#E6EFE7;font-size:.98rem}
.hero-usp li::before{content:'✦';position:absolute;left:0;color:var(--moon)}
.hero-usp strong{color:#fff}
.hero-usp-note{font-size:.78rem;color:#A9BCAE;font-style:italic;line-height:1.4;margin-bottom:22px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.hero-note{font-size:.92rem;color:#C3D3C7;margin-bottom:26px}
.hero-note a{color:var(--moon-soft)}
.trust-chips{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.trust-chips.trust-chips-3{grid-template-columns:repeat(3,1fr)}
.trust-chips div{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-sm);padding:10px 16px}
.trust-chips strong{display:block;font-family:var(--font-display);font-size:1.35rem;color:var(--moon)}
.trust-chips span{font-size:.78rem;color:#C3D3C7;line-height:1.3;display:block}
.trust-dark div{background:#fff;border-color:var(--line)}
.trust-dark strong{color:var(--lacquer)}
.trust-dark span{color:var(--muted)}
.hero-visual{display:grid;gap:16px}
.hero-photo{background:#fff;border-radius:var(--radius);padding:10px;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.hero-photo img{border-radius:9px}
.hero-photo figcaption{font-size:.85rem;color:var(--muted);padding:10px 6px 4px;text-align:center}
.hero-brand-strip{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;gap:10px;width:max-content;animation:marquee 22s linear infinite}
.marquee-track span{flex:0 0 auto;font-family:var(--font-display);font-weight:800;font-size:.92rem;color:var(--moon-soft);border:1px solid rgba(201,162,39,.35);border-radius:999px;padding:6px 16px}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- Countdown ---------- */
.countdown-inner{display:flex;align-items:center;gap:26px;padding:14px 22px;flex-wrap:wrap}
.countdown-copy{flex:1;min-width:240px}
.countdown-copy strong{display:block;font-size:1.08rem}
.countdown-copy span{font-size:.86rem;opacity:.85}
.countdown-clock{display:flex;align-items:center;gap:6px}
.countdown-clock div{background:var(--night);color:#fff;border-radius:var(--radius-sm);padding:8px 12px;text-align:center;min-width:62px}
.countdown-clock b{display:block;font-family:var(--font-display);font-size:1.5rem;line-height:1;color:var(--moon)}
.countdown-clock i{font-style:normal;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;opacity:.8}
.cd-sep{font-weight:800;font-size:1.3rem}

/* ---------- Sections ---------- */
.section{padding:78px 0}
.section-paper{background:var(--paper)}
.section-night{background:linear-gradient(180deg,var(--night-2),var(--night));color:#fff}
.section-head{max-width:720px;margin-bottom:44px}
.section-head h2,.heritage-copy h2,.form-intro h2{font-size:clamp(1.55rem,2.6vw,2.2rem);margin-bottom:14px}
.section-desc{color:var(--muted);font-size:1.03rem}

/* ---------- Brand grid ---------- */
.brand-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.brand-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px;display:flex;flex-direction:column;gap:10px;transition:box-shadow .2s,transform .2s}
.brand-card:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.brand-seal{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#BE3B33,var(--lacquer) 70%);color:#fff;font-family:var(--font-display);font-weight:800;font-size:1.25rem;box-shadow:inset 0 0 0 3px rgba(255,255,255,.3),0 4px 12px rgba(181,49,44,.3);transform:rotate(-4deg);font-style:normal}
/* Ô logo hãng: có file logo thì hiện logo, chưa có thì hiện huy hiệu chữ */
.brand-logo{display:flex;align-items:center;height:56px}
.brand-logo img{max-height:48px;max-width:130px;width:auto;object-fit:contain}
.brand-logo .brand-seal{display:none}
.brand-logo.no-logo img{display:none}
.brand-logo.no-logo .brand-seal{display:grid}
/* Khu logo trong lưới "Thương hiệu": ô vuông đồng nhất để mọi logo thẳng hàng dù kích thước gốc khác nhau */
.brand-card .brand-logo{width:72px;height:72px;flex:0 0 auto;justify-content:center;border-radius:10px}
.brand-card .brand-logo:not(.no-logo){background:var(--paper);border:1px solid var(--line)}
.brand-card .brand-logo img{max-width:66%;max-height:66%;height:auto}
.brand-card .brand-logo.no-logo .brand-seal{width:100%;height:100%;border-radius:10px;transform:none}
.brand-card h3{font-size:1.15rem}
.brand-card p{font-size:.9rem;color:var(--muted);flex:1}
.brand-actions{display:flex;gap:8px}

/* ---------- Price download ---------- */
.price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:34px}
.price-btn{display:flex;align-items:center;gap:14px;background:#fff;border:2px solid var(--line);border-radius:var(--radius);padding:16px 18px;font-weight:700;color:var(--ink);position:relative;transition:border-color .15s,box-shadow .15s}
.price-btn:hover{border-color:var(--lacquer);box-shadow:var(--shadow)}
.price-btn::after{content:'⤓';margin-left:auto;color:var(--lacquer);font-size:1.2rem}
.pb-text b{display:block;font-size:.98rem;line-height:1.25}
.pb-text em{display:block;font-style:normal;font-size:.72rem;font-weight:500;color:var(--muted)}
.seal-sm{width:42px;height:42px;font-size:.95rem;flex:0 0 auto}
.price-all{display:flex;align-items:center;justify-content:space-between;gap:20px;background:var(--night);color:#fff;border-radius:var(--radius);padding:24px 30px;flex-wrap:wrap;width:100%;box-sizing:border-box;margin-top:32px}
.price-all p{font-size:1.02rem}
.price-all strong{color:var(--moon-soft)}

/* ---------- USP ---------- */
.usp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.usp-card{border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;background:#fff}
.usp-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:var(--paper);color:var(--lacquer);font-weight:800;font-size:1.25rem;margin-bottom:14px;border:1px solid var(--line)}
.usp-card h3{font-size:1.05rem;margin-bottom:8px}
.usp-card p{font-size:.92rem;color:var(--muted)}

/* ---------- Combo ---------- */
.combo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.combo-card{background:#fff;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}
.combo-card img{aspect-ratio:4/3;object-fit:cover;cursor:zoom-in;transition:transform .25s}
.combo-card:hover img{transform:scale(1.04)}
.combo-card figcaption{padding:14px 16px}
.combo-card strong{display:block;font-size:1rem}
.combo-card span{font-size:.84rem;color:var(--muted)}

/* ---------- Steps (timeline) ---------- */
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative}
.steps::before{content:'';position:absolute;top:24px;left:calc(12.5% + 24px);right:calc(12.5% + 24px);height:2px;background:linear-gradient(90deg,var(--moon),var(--lacquer));opacity:.45}
.steps li{position:relative;padding:0 10px}
.step-no{position:relative;z-index:1;display:grid;place-items:center;width:48px;height:48px;margin:0 auto 18px;border-radius:50%;background:var(--night);color:var(--moon);font-family:var(--font-display);font-weight:800;font-size:1.05rem;box-shadow:0 0 0 6px var(--white),0 6px 16px rgba(20,53,44,.22)}
.steps li:hover .step-no{background:var(--lacquer);color:#fff}
.steps h3{font-size:1.02rem;margin-bottom:8px;text-align:center}
.steps p{font-size:.9rem;color:var(--muted);text-align:center}

/* ---------- Heritage ---------- */
.heritage-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center}
.heritage-photos{display:grid;grid-template-columns:1.2fr .8fr;gap:14px;align-items:start}
.heritage-photos img{border-radius:var(--radius);cursor:zoom-in;box-shadow:var(--shadow)}
.heritage-photos img:last-child{margin-top:38px}
.heritage-copy p{margin-bottom:14px;color:#3C4A3E}
.heritage-copy .trust-chips{margin-top:10px}
.heritage-copy h2 .hl-red{color:var(--lacquer)}
.heritage-copy h2 .hl-gold{color:#8A6714}
.heritage-cta{margin-top:20px}

/* ---------- FAQ ---------- */
.faq-list{display:grid;gap:12px}
.faq-list details{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:0 20px}
.faq-list summary{cursor:pointer;font-weight:700;padding:17px 0;list-style:none;position:relative;padding-right:34px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:'+';position:absolute;right:2px;top:50%;transform:translateY(-50%);font-size:1.4rem;color:var(--lacquer);font-weight:600}
.faq-list details[open] summary::after{content:'–'}
.faq-list details p{padding:0 0 18px;color:var(--muted);font-size:.95rem}

/* ---------- Form ---------- */
.section-lead{padding:52px 0}
.form-grid-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:44px;align-items:center}
.form-intro h2{margin-bottom:10px}
.form-intro p{color:#C3D3C7;margin-bottom:14px;font-size:.96rem}
.contact-line{font-size:.96rem}
.contact-line a{color:var(--moon-soft)}
.contact-line strong{color:var(--moon)}
.mini-clock{margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.14)}
.mini-clock-label{font-size:.82rem;color:#C3D3C7;margin-bottom:8px}
.countdown-mini{gap:6px}
.countdown-mini div{background:var(--moon);color:var(--night);padding:7px 11px;min-width:50px;border-radius:8px}
.countdown-mini b{font-size:1.2rem;color:var(--night)}
.countdown-mini i{color:var(--night);opacity:.65;font-size:.6rem}
.countdown-mini .cd-sep{color:var(--moon);font-size:1.1rem}
.quote-form{background:#fff;border-radius:var(--radius);padding:24px;color:var(--ink);box-shadow:0 24px 60px rgba(0,0,0,.35)}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:12px}
.field label{display:block;font-weight:600;font-size:.83rem;margin-bottom:5px}
.field input,.field select{width:100%;border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:10px 13px;font:inherit;font-size:.94rem;background:#fff;color:var(--ink)}
.field input:focus,.field select:focus{border-color:var(--lacquer);outline:none}
.form-status{margin-top:12px;font-weight:600;min-height:1.3em;font-size:.92rem}
.form-status.ok{color:#2E7D5B}
.form-status.err{color:var(--lacquer)}

/* ---------- Footer ---------- */
.site-footer{background:var(--night);color:#C3D3C7;padding:58px 0 0}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:36px;padding-bottom:40px}
.site-footer .logo-text{color:#fff}
.site-footer .logo-text small{color:#93A897}
.site-footer p{font-size:.9rem;margin-top:14px}
.footer-title{font-weight:700;color:#fff;margin-bottom:14px}
.footer-links{display:grid;gap:9px}
.footer-links-brand{display:flex;flex-wrap:wrap;gap:10px 20px}
.footer-links-brand a{flex:0 0 auto}
.footer-links a{color:#C3D3C7;font-size:.92rem}
.footer-links a:hover{color:var(--moon)}
.footer-logo-cloud{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}
.footer-logo-tile{display:block}
.footer-logo-tile .brand-logo{width:100%;height:56px;background:#fff;border:1px solid rgba(255,255,255,.14);border-radius:10px;justify-content:center}
.footer-logo-tile .brand-logo img{max-width:72%;max-height:72%}
.footer-logo-tile .brand-logo.no-logo .brand-seal{width:100%;height:100%;border-radius:10px;transform:none}
.footer-logo-tile:hover .brand-logo{border-color:var(--moon)}
.footer-phone{display:block;font-weight:700;color:var(--moon);font-size:1.05rem;margin-bottom:8px}
.footer-company{padding:24px 22px;border-top:1px solid rgba(255,255,255,.12);text-align:center}
.footer-company-info strong{display:block;color:#fff;font-size:.98rem;margin-bottom:12px}
.footer-company-info ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px;max-width:900px;margin:0 auto}
.footer-company-info li{font-size:.85rem;color:#A9BCAE}
.footer-company-info li i{font-style:normal;display:inline-block;width:16px;color:var(--moon)}
.footer-company-info a{color:#A9BCAE}
.footer-company-info a:hover{color:var(--moon)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding:18px 22px;font-size:.82rem;color:#93A897;text-align:center}

/* ---------- Floating buttons ----------
   Zalo: 2 nút xếp cột, luôn hiện (mọi thiết bị), góc phải dưới.
   Gọi: 2 nút xếp cột, chỉ hiện trên mobile (xem media query bên dưới), góc trái dưới.
   Khung chat Tawk.to duoc day len cao hon nut Goi bang Tawk_API.customStyle (yOffset)
   khai bao trong tracking.js , doi vi tri nut noi o day thi nho chinh lai yOffset
   cho khop (dang de 96px). */
.float-btn{position:fixed;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;font-weight:800;color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.25);transition:transform .15s;z-index:70}
.float-btn:hover{transform:scale(1.08)}
/* Vi tri, mau va co cua 2 nut nay nam o cuoi file (khoi "v2 , NUT NOI"). */
.float-call-mobile{display:none}
@keyframes ring{0%,100%{transform:rotate(0)}5%{transform:rotate(-12deg)}10%{transform:rotate(10deg)}15%{transform:rotate(-8deg)}20%{transform:rotate(0)}}

/* ---------- Lead popup ---------- */
.lead-popup{position:fixed;left:20px;bottom:24px;z-index:75;display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--moon);border-radius:12px;box-shadow:0 12px 34px rgba(20,53,44,.22);padding:12px 14px;max-width:330px;animation:leadin .35s ease}
.lead-popup[hidden]{display:none}
@keyframes leadin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.lead-dot{width:9px;height:9px;border-radius:50%;background:#2E7D5B;box-shadow:0 0 0 4px rgba(46,125,91,.18);flex:0 0 auto}
.lead-text{font-size:.83rem;line-height:1.35}
.lead-text strong{display:block;font-size:.87rem}
.lead-text em{font-style:normal;color:var(--muted);font-size:.74rem;display:block}
.lead-close{background:none;border:0;color:var(--muted);cursor:pointer;font-size:.9rem;padding:11px;margin:-11px -7px -7px 0;align-self:flex-start}

/* ---------- Lightbox ---------- */
.modal{position:fixed;inset:0;z-index:100;background:rgba(10,28,22,.9);display:grid;place-items:center;padding:24px;overflow:auto;overscroll-behavior:contain}
.modal[hidden]{display:none}
.modal img{max-width:min(1100px,94vw);max-height:88vh;width:auto;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
/* Ảnh bảng giá là ảnh dọc rất dài: cho phép xem full chiều ngang rồi cuộn dọc,
   thay vì bị nén vừa chiều cao màn hình và không đọc được chữ. */
.modal.modal-tall{place-items:start center;padding:64px 10px 32px}
.modal.modal-tall img{max-height:none;max-width:min(1240px,98vw);width:100%}
.modal.modal-tall .modal-close,
.modal.modal-tall .prev-btn,
.modal.modal-tall .next-btn{position:fixed}
.modal-close{position:absolute;top:18px;right:22px;background:rgba(255,255,255,.12);border:0;color:#fff;width:44px;height:44px;border-radius:50%;font-size:1.1rem;cursor:pointer}

/* ---------- trang mau-banh ---------- */
.brand-section{padding:64px 0;border-top:1px solid var(--line)}
.brand-section:nth-child(even){background:var(--paper)}
.brand-head{display:flex;align-items:center;gap:18px;margin-bottom:10px}
.brand-head h2{font-size:clamp(1.4rem,2.2vw,1.9rem)}
.brand-intro{max-width:760px;color:var(--muted);margin-bottom:26px}
.cat-wrap{display:grid;gap:20px}
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cat-grid[hidden]{display:none}
.cat-empty{background:#fff;border:1px dashed var(--line);border-radius:var(--radius);padding:22px 24px}
.cat-empty[hidden]{display:none}
.cat-empty p{color:var(--muted);font-size:.94rem;margin:0}

/* ---------- Trang con: Bảng giá & Chiết khấu theo hãng ---------- */
.price-table-figure{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line);margin-bottom:24px;background:#fff}
.price-table-figure img{width:100%;height:auto;display:block;cursor:zoom-in}
.price-table-figure figcaption{font-size:.8rem;color:var(--muted);text-align:center;padding:9px 14px;border-top:1px solid var(--line);background:var(--paper)}
.price-table-actions{text-align:center}
.price-table-note{margin-top:14px;color:var(--muted);font-size:.92rem;max-width:480px;margin-left:auto;margin-right:auto}
.note-hl{color:var(--lacquer);font-weight:700}
.btn-loose{white-space:normal;text-align:center;line-height:1.3}
.btn-sub{font-weight:400;font-size:.85em;opacity:.75}
.price-table-note-top{margin-top:0;margin-bottom:18px;max-width:none}
.brand-crumb{font-size:.86rem;color:#C3D3C7;margin-bottom:10px}
.brand-crumb a{color:#C3D3C7;text-decoration:underline}
.brand-crumb a:hover{color:var(--moon)}
.other-brands-nav{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:36px;padding-top:28px;border-top:1px solid var(--line)}
.other-brands-nav a{font-size:.86rem;padding:8px 16px;border-radius:999px;border:1px solid var(--line);color:var(--ink)}
.other-brands-nav a:hover{border-color:var(--lacquer);color:var(--lacquer)}
@media (max-width:640px){
  .price-table-actions .btn{width:100%}
}
.cat-grid img{border-radius:var(--radius-sm);border:1px solid var(--line);cursor:zoom-in;aspect-ratio:auto;background:#fff}
.brand-cta{display:flex;gap:12px;flex-wrap:wrap}
.page-hero{background:linear-gradient(180deg,var(--night),var(--night-2));color:#fff;padding:64px 0}
.page-hero h1{font-size:clamp(1.7rem,3vw,2.5rem);margin-bottom:16px}

/* ---------- Journey (partnership timeline) ---------- */
.journey-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.journey-item{padding-top:4px}
.journey-no{display:block;font-family:var(--font-display);font-weight:800;font-size:2rem;color:var(--lacquer);opacity:.85;line-height:1;margin-bottom:8px}
.journey-item h3{font-size:1.08rem;margin-bottom:8px}
.journey-item p{color:var(--muted);font-size:.94rem}
.journey-photo{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);align-self:start}
.journey-photo img{width:100%;height:100%;object-fit:cover;cursor:zoom-in}
.page-hero p{color:#C3D3C7;max-width:760px;margin-bottom:22px}

/* ---------- Reveal on scroll (JS adds .in) ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .brand-grid,.price-grid,.combo-grid,.steps{grid-template-columns:repeat(2,1fr)}
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .hero-visual{max-width:560px}
  .form-grid-wrap,.heritage-grid{grid-template-columns:1fr;gap:36px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .cat-grid{grid-template-columns:repeat(3,1fr)}
}
/* Menu desktop cần nhiều chỗ hơn ngưỡng layout lưới ở trên (logo + 4 link +
   số hotline + nút CTA trên cùng 1 hàng) — thu gọn sang hamburger sớm hơn,
   ở 1220px, để không bao giờ rơi vào khoảng bị ép hiển thị. */
@media (max-width:1220px){
  .nav-links,.header-call{display:none !important}
  .menu-btn{display:block;margin-left:auto}
  .header-cta{margin-left:auto}
  .menu-btn{margin-left:0}
}
@media (max-width:1024px){
  .steps::before{display:none}
}
@media (max-width:640px){
  .section{padding:56px 0}
  .step-no{margin:0 0 12px}
  .steps h3,.steps p{text-align:left}
  .steps li{padding:0}
  .brand-grid,.price-grid,.combo-grid,.steps,.usp-grid,.f-row,.cat-grid{grid-template-columns:1fr}
  .journey-grid{grid-template-columns:1fr}
  .journey-photo{max-width:320px}
  .footer-logo-cloud{margin-left:auto;margin-right:auto}
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .hero-grid{padding-top:44px;padding-bottom:54px}
  .hero-actions .btn{flex:1}
  .countdown-inner{justify-content:center;text-align:center}
  .price-all{justify-content:center;text-align:center}
  .quote-form{padding:22px 18px}
  .float-call-mobile{display:grid}
  .lead-popup{left:0;right:0;margin-left:auto;margin-right:auto;width:fit-content;bottom:88px;max-width:min(240px,calc(100vw - 184px))}
  .footer-grid{grid-template-columns:1fr;gap:28px}
  .trust-chips div{padding:8px 10px}
  .modal-close{top:auto;bottom:24px;right:50%;transform:translateX(50%)}
  .heritage-photos{grid-template-columns:1fr}
  .heritage-photos img:last-child{margin-top:0}
  .section-lead{padding:44px 0}
  .form-grid-wrap{gap:26px}
  .countdown-mini{flex-wrap:wrap}
  .hero-urgency .countdown-copy span{display:none}
  /* padding:8px 0 (bản cũ) ghi đè luôn padding ngang 22px của .container nên
     logo dính sát mép trái, hàng menu lệch hẳn so với mọi nội dung khác của
     trang. Giữ 8px trên dưới, trả lại 22px hai bên cho khớp .container. */
  .nav{gap:10px;height:auto;min-height:64px;padding:8px 22px}
  .logo{gap:8px}
  .logo-seal{width:38px;height:38px;flex-basis:38px}
  .logo-text{font-size:.86rem}
  .logo-break{display:block}
  .site-footer .logo-break{display:none}
  .logo-text small{display:none}
  /* Sau khi .nav lấy lại 22px padding hai bên, nút CTA thiếu chỗ nên bị xuống
     2 dòng, đẩy cao cả header. Thu gọn padding và cỡ chữ để vừa 1 dòng. */
  .header-cta{padding:10px 12px;font-size:.82rem}
}
.price-btn .brand-logo{
    display:flex;
    align-items:center;
    justify-content:center;
    width:54px;
    height:54px;
    flex-shrink:0;
}

.price-btn .brand-logo img{
    width:42px;
    height:42px;
    object-fit:contain;
    display:block;
}

.price-btn .brand-logo .brand-seal{
    display:none;
}
.brand-actions{
    display:flex;
    justify-content:center;
    gap:6px;
}
.prev-btn,
.next-btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:55px;
    height:55px;
    border:none;
    border-radius:50%;
    background:rgba(0,0,0,.55);
    color:#fff;
    font-size:30px;
    cursor:pointer;
    z-index:9999;
}

.prev-btn{
    left:25px;
}

.next-btn{
    right:25px;
}

.prev-btn:hover,
.next-btn:hover{
    background:#BE9A2E;
}
.combo-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:24px;
    margin-top:30px;
}

.combo-card{
    background:#fff;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 8px 24px rgba(0,0,0,.08);
    transition:.3s;
}

.combo-card:hover{
    transform:translateY(-6px);
}

.combo-card img{
    width:100%;
    height:230px;
    object-fit:cover;
    display:block;
    cursor:pointer;
}

.combo-card figcaption{
    padding:18px;
}

.combo-card strong{
    display:block;
    font-size:28px;
    font-weight:700;
    color:#123A2E;
    margin-bottom:8px;
}

.combo-card span{
    display:block;
    font-size:18px;
    color:#666;
}
/* ===== Hotline ===== */

.header-call{
    display:flex;
    align-items:center;
    gap:10px;
}

.header-call span:last-child{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    line-height:1.2;
}

.header-call small{
    display:block;
    font-size:12px;
    margin-bottom:3px;
    text-transform:uppercase;
    color:#666;
}

.header-call strong{
    display:block;
    font-size:15px;
    text-align:center;
} 
.hero-brand-strip{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
}

.price-btn .brand-logo{
    display:flex;
    align-items:center;
    justify-content:center;
    width:54px;
    height:54px;
    flex-shrink:0;
}

.price-btn .brand-logo img{
    width:42px;
    height:42px;
    object-fit:contain;
    display:block;
}

.price-btn .brand-logo .brand-seal{
    display:none;
}
.header-call{
    min-height:64px;
    padding:10px 22px;
}
.brand-thankyou{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin: 22px 0;
    color: #E2C078;
    font-size: 18px;
    font-weight: 600;
    font-style: italic;
}

.brand-thankyou::before,
.brand-thankyou::after{
    content: "";
    width: 80px;
    height: 1px;
    background: rgba(226,192,120,.6);
}
.hero-brand-strip:hover .marquee-track{
    animation-play-state: paused;
}
.brand-thankyou{
    display:inline-block;
    margin:30px auto;
    padding:12px 30px;
    background:linear-gradient(90deg,#FBEFC0,#E7BE2A,#D9A518);
    color:#123A2E;
    border-radius:50px;
    font-size:20px;
    font-weight:800;
    letter-spacing:.5px;
    box-shadow:0 8px 25px rgba(231,190,42,.35);
    text-align:center;
    animation:glow 2.5s infinite ease-in-out;
}

@keyframes glow{
    0%,100%{
        box-shadow:0 8px 25px rgba(231,190,42,.35);
    }
    50%{
        box-shadow:0 8px 35px rgba(231,190,42,.7);
    }
}
.banner-slider{
    width:100%;
    overflow:hidden;
    position:relative;
}

.slide{
    display:none;
    width:100%;
    height:430px;
    object-fit:contain;
}

.slide.active{
    display:block;
}
.brand-tabs{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:14px;
    width:100%;
    margin:20px auto;
}

.brand-tabs span{
    padding:12px 24px;
    border:1px solid rgba(226,192,120,.45);
    border-radius:30px;
    color:#E2C078;
    font-weight:700;
    font-size:18px;
    background:rgba(255,255,255,.04);
    transition:.3s;
}

.brand-tabs span:hover{
    background:#BE9A2E;
    color:#1D4A3C;
}
.banner-slider{
    width:100%;
    overflow:hidden;
    border-radius:20px;
}

#mainBanner{
    width:100%;
    height:430px;
    object-fit:contain;
    transition:.4s ease;
}

.brand-tabs{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:12px;
    margin-top:20px;
}

.brand-tabs span{

    cursor:pointer;

    padding:12px 22px;

    border-radius:30px;

    border:1px solid rgba(226,192,120,.4);

    color:#E2C078;

    font-weight:600;

    transition:.3s;

}

.brand-tabs span:hover{

    background:#B8912A;

    color:#1D4A3C;

}

.brand-tabs span.active{

    background:#E2C078;

    color:#1D4A3C;

}
.brand-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    align-items:center;
}
.btn-icon{
    width:18px;
    height:18px;
    margin-right:6px;
}
.btn-icon{
    width:18px;
    height:18px;
    object-fit:contain;
    margin-right:6px;
    vertical-align:middle;
}


/* ============================================================
   ƯU ĐÃI DOANH NGHIỆP , thay cho khối PROMO STICKY cũ
   Gồm 2 phần:
     1. .btt-offer , section thật trong trang index.html
     2. .btt-fab   , pill nổi góc dưới trái, thu gọn/mở rộng theo ý khách
   Dùng lại biến màu, font và .container của site, không thêm token mới.
   ============================================================ */

:root{
  /* JS cập nhật theo chiều cao pill/panel để .lead-popup neo lên trên */
  --btt-left-stack:82px;
}

/* ---------- 1. Section trong trang ---------- */
.btt-offer{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--night-2),var(--night));color:#fff}

/* Vành khuôn bánh dập nổi, vẽ bằng gradient nên không thêm file ảnh nào */
.btt-offer::after{
  content:"";position:absolute;right:-110px;top:50%;width:560px;height:560px;
  transform:translateY(-50%);border-radius:50%;pointer-events:none;opacity:.55;
  background-image:
    repeating-conic-gradient(from 0deg at 50% 50%,rgba(255,255,255,.032) 0deg 4deg,transparent 4deg 11.25deg),
    radial-gradient(circle at 50% 50%,transparent 21%,rgba(201,162,39,.16) 21.4%,transparent 22.2%),
    radial-gradient(circle at 50% 50%,transparent 33%,rgba(255,255,255,.07) 33.4%,transparent 34.2%),
    radial-gradient(circle at 50% 50%,transparent 47%,rgba(255,255,255,.05) 47.4%,transparent 48.2%);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,transparent 17%,#000 30%,#000 52%,transparent 70%);
  mask-image:radial-gradient(circle at 50% 50%,transparent 17%,#000 30%,#000 52%,transparent 70%);
}
.btt-offer__inner{position:relative;z-index:1;display:grid;gap:clamp(28px,4vw,56px)}
.btt-offer__title{font-family:var(--font-display);font-weight:800;font-size:clamp(1.5rem,3.2vw,2.15rem);line-height:1.22;letter-spacing:-.01em;color:#fff;margin:0}
.btt-offer__figure{margin:22px 0 10px;font-variant-numeric:lining-nums;font-family:var(--font-display);font-weight:800;font-size:clamp(1.75rem,5.4vw,2.9rem);line-height:1.05;letter-spacing:-.025em;color:var(--moon)}
.btt-offer__figure-pre{display:block;margin-bottom:4px;font-family:var(--font-body);font-weight:600;font-size:1.0625rem;line-height:1.4;letter-spacing:0;color:rgba(255,255,255,.88)}
.btt-offer__lead{margin:0;max-width:44ch;font-size:1rem;line-height:1.65;color:rgba(255,255,255,.78)}
.btt-offer__note{margin:18px 0 0;max-width:48ch;font-size:.8125rem;line-height:1.6;color:rgba(255,255,255,.55)}

/* Bảng ưu đãi: các mục song song nên không đánh số, chỉ dùng đường kẻ mảnh */
.btt-benefits{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.14)}
.btt-benefit{display:flex;gap:14px;align-items:flex-start;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.btt-benefit__icon{flex:0 0 auto;display:grid;place-items:center;width:32px;height:32px;margin-top:1px;border:1px solid rgba(201,162,39,.45);border-radius:50%;color:var(--moon)}
.btt-benefit__icon svg{display:block;width:15px;height:15px}
.btt-benefit__text{font-size:1.0313rem;font-weight:600;line-height:1.5;color:rgba(255,255,255,.94)}
.btt-offer__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.btt-cta{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 22px;border:1px solid transparent;border-radius:999px;font-family:inherit;font-size:.9688rem;font-weight:700;line-height:1;cursor:pointer;transition:background-color .15s}
.btt-cta svg{display:block;width:17px;height:17px}
.btt-cta-gold{background:var(--moon);color:var(--night)}
.btt-cta-gold:hover{background:var(--moon-soft)}
.btt-cta-ghost{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
.btt-cta-ghost:hover{background:rgba(255,255,255,.1)}
.btt-cta-red{background:var(--lacquer);color:#fff}
.btt-cta-red:hover{background:var(--lacquer-dark)}
.btt-cta:focus-visible{outline:2px solid var(--moon);outline-offset:3px}

@media (min-width:900px){
  .btt-offer__inner{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center}
}
@media (max-width:899px){
  .btt-offer::after{display:none}
}

/* ---------- 2. Pill nổi ---------- */
.btt-fab{position:fixed;left:20px;bottom:24px;z-index:68;pointer-events:none}
.btt-fab[hidden]{display:none}
.btt-pill,.btt-panel{pointer-events:auto}

.btt-pill{box-sizing:border-box;display:inline-flex;align-items:center;gap:10px;max-width:calc(100vw - 40px);min-height:46px;padding:0 15px 0 13px;border:1px solid rgba(201,162,39,.5);border-radius:999px;background:var(--night);box-shadow:0 12px 30px rgba(20,53,44,.4);color:#fff;font-family:inherit;font-size:.9063rem;font-weight:700;line-height:1;text-align:left;cursor:pointer;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent}
.btt-pill:hover{background:var(--night-2)}
.btt-pill:focus-visible{outline:2px solid var(--moon);outline-offset:3px}
.btt-pill__dot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--moon)}
.btt-pill__label{white-space:nowrap}
.btt-pill__chev{flex:0 0 auto;display:block;width:14px;height:14px;color:var(--moon)}
.btt-fab.is-open .btt-pill{display:none}

.btt-panel{box-sizing:border-box;width:min(360px,calc(100vw - 40px));max-height:min(74vh,604px);display:flex;flex-direction:column;overflow:hidden;border-radius:var(--radius);background:var(--white);box-shadow:0 20px 44px rgba(20,53,44,.45);color:var(--ink);opacity:0;transform:translateY(10px) scale(.97);transform-origin:left bottom}
.btt-panel[hidden]{display:none}
.btt-fab.is-open .btt-panel{opacity:1;transform:none}

.btt-panel__head{position:relative;overflow:hidden;flex:0 0 auto;padding:18px 50px 16px 18px;background:var(--night);color:#fff}
.btt-panel__head::before{
  content:"";position:absolute;right:-52px;top:50%;width:190px;height:190px;
  transform:translateY(-50%);pointer-events:none;
  background-image:
    repeating-conic-gradient(from 0deg at 50% 50%,rgba(255,255,255,.05) 0deg 4deg,transparent 4deg 11.25deg),
    radial-gradient(circle at 50% 50%,transparent 30%,rgba(201,162,39,.3) 31%,transparent 32.4%),
    radial-gradient(circle at 50% 50%,transparent 46%,rgba(255,255,255,.12) 47%,transparent 48.4%);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,transparent 24%,#000 38%,#000 52%,transparent 68%);
  mask-image:radial-gradient(circle at 50% 50%,transparent 24%,#000 38%,#000 52%,transparent 68%);
}
.btt-panel__head>*{position:relative}
.btt-panel__eyebrow{margin:0 0 6px;font-size:.6875rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--moon)}
.btt-panel__figure{margin:0;font-variant-numeric:lining-nums;font-family:var(--font-display);font-weight:800;font-size:1.3125rem;line-height:1.25;letter-spacing:-.015em;color:#fff}
.btt-panel__figure-pre{display:block;margin-bottom:2px;font-family:var(--font-body);font-weight:600;font-size:.9375rem;letter-spacing:0;color:rgba(255,255,255,.86)}
.btt-panel__close{position:absolute;top:10px;right:10px;display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;-webkit-appearance:none;appearance:none}
.btt-panel__close:hover{background:rgba(255,255,255,.24)}
.btt-panel__close:focus-visible{outline:2px solid var(--moon);outline-offset:2px}
.btt-panel__close svg{display:block;width:13px;height:13px}

.btt-panel__body{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:6px 18px 14px}
.btt-panel__list{list-style:none;margin:0;padding:0}
.btt-panel__list li{display:flex;gap:11px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--line);font-size:.9375rem;font-weight:600;line-height:1.5;color:var(--ink)}
.btt-panel__list li:last-child{border-bottom:0}
.btt-panel__list svg{flex:0 0 auto;display:block;width:16px;height:16px;margin-top:2px;color:var(--lacquer)}
.btt-panel__note{margin:14px 0 2px;font-size:.8125rem;line-height:1.55;color:var(--muted)}
.btt-panel__foot{flex:0 0 auto;padding:14px 18px calc(14px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:var(--paper)}
.btt-panel__foot .btt-cta{width:100%}

@media (prefers-reduced-motion:no-preference){
  .btt-panel{transition:opacity .18s ease,transform .24s cubic-bezier(.2,.9,.25,1)}
  .btt-pill{transition:background-color .16s ease,transform .16s ease}
  .btt-pill:active{transform:scale(.97)}
  .btt-fab.is-nudging .btt-pill__dot{animation:btt-ping 1.5s ease-out 3}
  @keyframes btt-ping{
    0%{box-shadow:0 0 0 0 rgba(201,162,39,.75)}
    70%{box-shadow:0 0 0 9px rgba(201,162,39,0)}
    100%{box-shadow:0 0 0 0 rgba(201,162,39,0)}
  }
}

/* Mobile: 2 nút Gọi chiếm góc dưới trái, 2 nút Zalo chiếm góc dưới phải,
   nên pill nằm giữa khoảng trống ở giữa. Panel mở thì rộng gần hết bề ngang,
   lúc đó 4 nút kia mờ lại (xem khối HOOK bên dưới). */
@media (max-width:640px){
  .btt-fab{left:12px;right:12px;display:flex;justify-content:center}
  .btt-pill{max-width:calc(100vw - 176px);font-size:.8125rem;padding:0 13px}
  .btt-pill__chev{display:none}
  .btt-panel{width:100%;max-height:70vh}
  .btt-panel__head::before{right:-84px;opacity:.72}
}

/* ---------- 3. CHẶN TRÀN NGANG TRÊN MOBILE ----------
   .btn dang dat white-space:nowrap. Nut dai kieu "Goi ngay 0975 400 143"
   ở khối heritage dài 411px, nằm trong grid 1 cột nên nó ép cả track rộng 411px
   trong khi khung nội dung chỉ 346px. Tài liệu phồng ra 433px, các section nền màu
   vẫn chỉ rộng 390px nên chừa lại dải trắng bên phải. */
@media (max-width:640px){
  .btn{white-space:normal;text-align:center}
  .heritage-grid>*,.hero-grid>*,.form-grid-wrap>*{min-width:0}
}
/* Lưới an toàn cho những chuỗi dài phát sinh sau này (số điện thoại, URL, mã bánh).
   Dùng clip chứ không dùng hidden để không phá position:sticky của header. */
html,body{overflow-x:clip}

/* ---------- 4. HOOK: widget sẵn có tự nhường chỗ ---------- */
/* Pill thu gọn nằm đúng chỗ .lead-popup trên desktop nên đẩy popup lên trên pill.
   Chỉ áp từ 641px trở lên, dưới mốc đó giữ nguyên bottom:88px sẵn có của site. */
@media (min-width:641px){
  .lead-popup{bottom:var(--btt-left-stack)}
}
/* Đang đọc section ưu đãi, hoặc panel đang mở, thì popup lặng đi.
   Phải có animation:none, vì keyframes leadin ghi đè cả opacity khi đang chạy. */
.btt-reading-offer .lead-popup,
.btt-offer-open .lead-popup{opacity:0;visibility:hidden;animation:none;pointer-events:none}
@media (max-width:640px){
  .btt-offer-open .float-btn{opacity:.22;pointer-events:none}
}

/* ============================================================
   MÁY HẸP (≤400px): thu nhỏ logo và nút CTA một nhắc nữa để hàng menu đủ chỗ
   cho nút "Dùng thử Bánh" nằm 1 dòng, vẫn giữ đúng 22px lề hai bên như mọi
   nội dung khác của trang.
   ============================================================ */
@media (max-width:400px){
  .nav{gap:8px}
  .logo{gap:6px}
  .logo-seal{width:34px;height:34px;flex-basis:34px}
  .logo-text{font-size:.78rem}
  .header-cta{padding:9px 11px;font-size:.76rem}
}

/* Máy rất hẹp (≤359px): thu thêm một nhắc nữa. Mốc 359 chứ không phải 340 để
   không chừa khoảng hở 341-359px, ở đó nút CTA sẽ bị xuống 2 dòng. Máy Android
   360px phổ biến vẫn dùng cỡ chữ của khối ≤400px, không bị nhỏ oan. Dưới 330px
   nút vẫn có thể xuống 2 dòng, chấp nhận được, miễn không thành 3 dòng. */
@media (max-width:359px){
  .logo-seal{width:30px;height:30px;flex-basis:30px}
  .logo-text{font-size:.7rem}
  .header-cta{padding:8px 10px;font-size:.7rem}
  .menu-btn{padding:10px 6px}
}

/* ============================================================
   HÀNG MENU DESKTOP ĐẦY ĐỦ (≥1221px): logo + 4 link + hotline + nút CTA cộng
   lại rộng 1158px trong khi khung nội dung .container chỉ có 1116px, nên nút
   "Dùng thử Bánh" bị đẩy lồi ra khỏi lề phải của trang 22px. Lỗi này có từ
   trước, không nhìn ra ngay vì nó không tạo thanh cuộn ngang. Thu bớt khoảng
   cách và padding để cả hàng nằm gọn trong lề, thẳng với nội dung bên dưới.
   ============================================================ */
@media (min-width:1221px){
  .nav{gap:10px}
  .nav-links{gap:11px}
  .header-call{padding-left:14px;padding-right:14px}
  .header-cta{padding-left:20px;padding-right:20px}
}

/* ============================================================
   TRANG BẢNG GIÁ , 2 khối bổ sung
     1. .bg-price , bảng giá dạng văn bản đặt dưới ảnh bảng giá, để Google và
        Google Ads đọc được nội dung thật thay vì chỉ thấy ảnh + nút tải file.
     2. .bg-why   , "Lý do doanh nghiệp lựa chọn", cùng nội dung với section
        #ly-do ở trang chủ nhưng trình bày khác cho khỏi đọc giống nhau.
   Dùng lại biến màu, font và .container sẵn có, không thêm token mới.
   ============================================================ */

/* ---------- 1. Bảng giá dạng văn bản ---------- */
.bg-price{margin:34px 0 30px}
.bg-price__h{font-family:var(--font-display);font-weight:800;font-size:1.22rem;line-height:1.3;color:var(--ink);margin:0 0 8px}
.bg-price__intro{font-size:.94rem;line-height:1.65;color:var(--muted);margin:0 0 22px;max-width:62ch}
.bg-price__group{font-size:.8rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--lacquer);margin:26px 0 8px}
.bg-price__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.bg-price__table{width:100%;border-collapse:collapse;font-size:.94rem;line-height:1.45}
.bg-price__table th,.bg-price__table td{text-align:left;padding:9px 12px 9px 0;border-bottom:1px solid var(--line);vertical-align:top}
.bg-price__table th{font-size:.76rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--ink);white-space:nowrap}
.bg-price__table td:last-child,.bg-price__table th:last-child{padding-right:0}
.bg-price__table tbody tr:hover{background:rgba(201,162,39,.09)}
.bg-price__table .bg-code{font-weight:700;color:var(--ink);white-space:nowrap}
.bg-price__table .bg-num{text-align:right;white-space:nowrap;font-weight:700;font-variant-numeric:tabular-nums;color:var(--lacquer)}
.bg-price__note{font-size:.82rem;line-height:1.6;color:var(--muted);margin:14px 0 0}

@media (max-width:640px){
  .bg-price__table{font-size:.86rem}
  .bg-price__table th,.bg-price__table td{padding:8px 10px 8px 0}
  .bg-price__h{font-size:1.1rem}
}

/* Tiêu đề cho dải link hãng khác + khối "Xem thêm N trang" bằng <details>
   thuần HTML, không cần JS nên không thể vỡ nếu file js bị cache bản cũ. */
.other-brands-h{font-size:.82rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);text-align:center;margin:38px 0 -6px}
.price-more{margin:0}
.price-more>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;min-height:48px;margin:6px 0 22px;padding:0 22px;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink);font-weight:700;font-size:.94rem;text-align:center}
.price-more>summary::-webkit-details-marker{display:none}
.price-more>summary::after{content:"⌄";font-size:1.15rem;line-height:1;margin-top:-4px}
.price-more[open]>summary::after{content:"⌃";margin-top:4px}
.price-more>summary:hover{background:var(--white);border-color:var(--lacquer);color:var(--lacquer)}
.price-more>summary:focus-visible{outline:2px solid var(--lacquer);outline-offset:3px}

/* ---------- 2. Lý do doanh nghiệp lựa chọn ---------- */
.bg-why{background:var(--white)}
.bg-why__panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(26px,4vw,44px)}
.bg-why__eyebrow{font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--lacquer);margin:0 0 10px}
.bg-why__title{font-family:var(--font-display);font-weight:800;font-size:clamp(1.32rem,2.6vw,1.72rem);line-height:1.28;color:var(--ink);margin:0 0 6px;max-width:34ch}
.bg-why__list{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:0 38px;border-top:1px solid var(--line)}
.bg-why__list li{display:flex;gap:13px;align-items:flex-start;padding:15px 0;border-bottom:1px solid var(--line)}
.bg-why__ic{flex:0 0 auto;display:grid;place-items:center;width:30px;height:30px;margin-top:1px;border:1px solid rgba(181,49,44,.28);border-radius:50%;background:var(--white);color:var(--lacquer);font-size:.9rem;line-height:1}
.bg-why__list h3{font-size:.97rem;font-weight:700;line-height:1.35;color:var(--ink);margin:0 0 3px}
.bg-why__list p{font-size:.89rem;line-height:1.55;color:var(--muted);margin:0}
.bg-why__note{font-size:.82rem;line-height:1.6;color:var(--muted);margin:20px 0 0;font-style:italic}

@media (min-width:760px){
  .bg-why__list{grid-template-columns:1fr 1fr}
}
@media (min-width:1100px){
  .bg-why__list{grid-template-columns:repeat(3,1fr);gap:0 40px}
}


/* ==========================================================================
   BO SUNG RIENG CHO TONGKHOBANHTRUNGTHU.COM
   Cac khoi ben duoi la phan giao dien khac biet so voi ban goc:
   thanh utility tren cung, bo goc vuong hon, footer dung lai cau truc,
   cac khoi noi dung cua trang moi (chinh sach si, in logo, gioi thieu, lien he).
   ========================================================================== */

/* ---------- Bo goc: site nay dung goc vuong hon cho cam giac "tong kho" ---------- */
.btn{border-radius:8px}
.btn-sm{border-radius:7px}
.btt-cta{border-radius:8px}
.other-brands-nav a{border-radius:8px}
.price-more>summary{border-radius:8px}
.marquee-track span{border-radius:8px}

/* ---------- Ghi chu nho tren nen sang (khac .hero-usp-note dung tren nen toi) ---------- */
.note-muted{font-size:.86rem;color:var(--muted);font-style:italic;line-height:1.6;margin:14px 0}
.note-muted a{font-style:normal;font-weight:700}

/* ==========================================================================
   v3 , NUT NOI: 2 Zalo + 2 Goi, doi ben so voi web goc.
     Goc duoi TRAI : Zalo a (24px) · Zalo b (88px)   , moi thiet bi
     Goc duoi PHAI : Goi  a (24px) · Goi  b (88px)   , chi mobile
   Cot trai bi 2 nut Zalo chiem toi 144px, nen pill "Uu dai khach si" phai leo
   len 156px va .lead-popup leo tiep theo --btt-left-stack (app.js tinh h + 168).
   ========================================================================== */
.float-zalo{display:flex;align-items:center;justify-content:center;
  left:20px;right:auto;font-size:.85rem}
.float-zalo-a{bottom:24px;background:#0068FF;color:#fff}
.float-zalo-b{bottom:88px;background:#fff;color:#0068FF;border:2.5px solid #0068FF;
  box-shadow:0 8px 20px rgba(0,104,255,.28)}

/* Nut Goi: nen do sen thay cho anh tron xanh la cua ban goc. Khong dat display
   o day , de nguyen display:none cua .float-call-mobile, chi bat trong media
   mobile ben duoi, neu khong nut se hien ca tren desktop. */
.float-call-mobile{right:20px;left:auto;background:var(--lacquer);color:#fff;
  padding:0;overflow:visible;animation:ring 2.2s ease-in-out infinite}
.float-call-a{bottom:24px;box-shadow:0 8px 22px rgba(181,49,44,.42)}
.float-call-b{bottom:88px;background:#fff;color:var(--lacquer);
  border:2.5px solid var(--lacquer);box-shadow:0 8px 20px rgba(181,49,44,.26)}
.float-call-mobile svg{display:block;width:26px;height:26px}

@media (min-width:641px){
  .btt-fab{bottom:156px}
}
@media (max-width:640px){
  .float-call-mobile{display:flex;align-items:center;justify-content:center}
  /* Hai ben deu co nut nen pill o giua phai hep lai, va popup neo tren pill. */
  .lead-popup{bottom:152px;max-width:min(300px,calc(100vw - 40px))}
}

/* An tam thoi nut Zalo va nut Goi so 0963337939 (bien the -b) tren mobile.
   Desktop khong doi gi , van hien ca 2 nut Zalo, nut Goi -b van an theo dung
   quy tac cu (Goi von dut chi hien mobile). Muon bat lai: xoa nguyen khoi
   @media nay. */
@media (max-width:640px){
  .float-zalo-b, .float-call-b{display:none}
}

/* ---------- Thanh utility tren cung ---------- */
.topbar{background:var(--night);color:#DCE8DE;font-size:.8rem}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:38px;padding:7px 22px;flex-wrap:wrap}
.topbar strong{color:var(--moon);font-weight:700}
.topbar ul{list-style:none;display:flex;gap:18px;flex-wrap:wrap;margin:0}
.topbar li{position:relative;padding-left:15px;white-space:nowrap}
.topbar li::before{content:'';position:absolute;left:0;top:.55em;width:5px;height:5px;
  border-radius:50%;background:var(--moon)}
.topbar a{color:var(--moon-soft);font-weight:700}
@media (max-width:900px){.topbar{display:none}}

/* ---------- Header: gach chan mau dong, logo vuong ---------- */
.site-header{border-bottom:2px solid var(--moon)}
.logo-seal{border-radius:6px}
.logo-text{font-weight:800;letter-spacing:-.015em}

/* ---------- The uy tin dang hang ngang duoi hero ---------- */
.credbar{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.credbar-inner{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:0 22px}
.credbar-inner>div{padding:18px 16px;border-left:1px solid var(--line)}
.credbar-inner>div:first-child{border-left:0}
.credbar strong{display:block;font-weight:800;font-size:1.5rem;color:var(--lacquer);line-height:1.1}
.credbar span{display:block;font-size:.82rem;color:var(--muted);margin-top:3px}
@media (max-width:760px){
  .credbar-inner{grid-template-columns:repeat(2,1fr)}
  .credbar-inner>div:nth-child(3){border-left:0}
  .credbar-inner>div:nth-child(n+3){border-top:1px solid var(--line)}
}

/* ---------- Khoi phan khuc ngan sach (trang chu + trang chinh sach) ---------- */
.tier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tier-card{border:1px solid var(--line);border-radius:var(--radius);background:#fff;
  padding:24px 22px;display:flex;flex-direction:column;gap:10px}
.tier-card.is-hot{border-color:var(--moon);box-shadow:0 8px 26px rgba(201,162,39,.18)}
.tier-tag{align-self:flex-start;font-size:.72rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--lacquer);background:rgba(181,49,44,.08);
  border-radius:5px;padding:5px 10px}
.tier-card h3{font-size:1.12rem}
.tier-price{font-weight:800;font-size:1.45rem;color:var(--night)}
.tier-price small{display:block;font-size:.78rem;font-weight:600;color:var(--muted);margin-top:2px}
.tier-card ul{list-style:none;display:grid;gap:7px;margin-top:2px}
.tier-card li{padding-left:22px;position:relative;font-size:.92rem;color:var(--muted)}
.tier-card li::before{content:'✓';position:absolute;left:0;color:var(--lacquer);font-weight:800}
@media (max-width:900px){.tier-grid{grid-template-columns:1fr}}

/* ---------- Bang chiet khau bac thang ---------- */
.step-table{width:100%;border-collapse:collapse;font-size:.94rem;background:#fff}
.step-table th,.step-table td{border:1px solid var(--line);padding:12px 14px;text-align:left}
.step-table thead th{background:var(--night);color:#fff;font-weight:700;font-size:.88rem}
.step-table tbody tr:nth-child(even){background:var(--paper)}
.step-table td:last-child{font-weight:700;color:var(--lacquer);white-space:nowrap}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius-sm)}

/* ---------- Khoi noi dung dai (trang chinh sach, gioi thieu, in logo) ---------- */
.prose{max-width:820px}
.prose h2{font-size:clamp(1.35rem,2.3vw,1.85rem);margin:34px 0 12px}
.prose h3{font-size:1.1rem;margin:24px 0 8px;color:var(--night)}
.prose p{margin-bottom:14px;color:#3B443C}
.prose ul,.prose ol{margin:0 0 16px 20px;color:#3B443C}
.prose li{margin-bottom:7px}
.prose strong{color:var(--night)}
.callout{border-left:4px solid var(--moon);background:var(--paper);border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  padding:16px 20px;margin:20px 0}
.callout p:last-child{margin-bottom:0}

/* ---------- Luoi 2 cot noi dung + anh ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:38px;align-items:start}
.split-photos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.split-photos img{border-radius:var(--radius);border:1px solid var(--line)}
.split-photos img:first-child{grid-column:1/-1}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:24px}}

/* ---------- Trang lien he ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
.contact-card{border:1px solid var(--line);border-radius:var(--radius);padding:24px;background:#fff}
.contact-card h3{font-size:1.05rem;margin-bottom:12px}
.contact-card dl{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:.94rem}
.contact-card dt{color:var(--muted);white-space:nowrap}
.contact-card dd{margin:0;color:var(--ink);font-weight:600}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
/* Chong tran: email va ten cong ty la chuoi dai khong co khoang trang de ngat. */
.contact-card dd{min-width:0;overflow-wrap:anywhere}
.contact-card dt{min-width:0}
@media (max-width:480px){
  .contact-card{padding:20px 16px}
  .contact-card dl{grid-template-columns:1fr;gap:0}
  .contact-card dt{margin-top:10px;font-size:.82rem}
  .contact-card dt:first-child{margin-top:0}
}

/* ==========================================================================
   FOOTER - cau truc rieng cho site nay
   Hang 1: gioi thieu + 2 cot lien ket · Hang 2: dai thong tin phap ly + lien he
   Hang 3: dong ban quyen
   ========================================================================== */
.tk-footer{background:var(--night);color:#CFDDD2;margin-top:0}
.tk-footer a{color:#CFDDD2}
.tk-footer a:hover{color:var(--moon)}
.tk-foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:38px;padding:52px 22px 40px}
.tk-foot-title{font-weight:800;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--moon);margin-bottom:16px}
.tk-foot-about p{font-size:.92rem;line-height:1.7;color:#B6C9BB;margin-bottom:16px}
.tk-foot-logo{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.tk-foot-logo img{width:46px;height:46px;border-radius:6px}
.tk-foot-logo span{font-weight:800;font-size:1.06rem;line-height:1.18;color:#fff}
.tk-foot-logo small{display:block;font-weight:600;font-size:.66rem;letter-spacing:.08em;
  color:var(--moon);text-transform:uppercase}
.tk-foot-badges{display:flex;gap:8px;flex-wrap:wrap}
.tk-foot-badges span{font-size:.74rem;font-weight:700;border:1px solid rgba(201,162,39,.4);
  color:var(--moon-soft);border-radius:5px;padding:5px 10px}
.tk-foot-list{list-style:none;display:grid;gap:9px;font-size:.92rem}
.tk-foot-list a,.tk-legal a{overflow-wrap:anywhere}
.tk-legal li{overflow-wrap:anywhere}
.tk-foot-list.two{grid-template-columns:1fr 1fr;gap:9px 14px}
.tk-foot-mid{display:grid;grid-template-columns:1.35fr 1fr;gap:32px;
  padding:26px 22px;border-top:1px solid rgba(255,255,255,.12)}
.tk-legal strong{display:block;color:#fff;font-size:1rem;margin-bottom:10px}
.tk-legal ul{list-style:none;display:grid;gap:7px;font-size:.9rem;color:#B6C9BB}
.tk-legal li i{display:inline-block;width:18px;font-style:normal;color:var(--moon)}
.tk-contact{display:grid;gap:10px;align-content:start}
.tk-contact .tk-phone{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.12rem;
  color:#fff;border:1px solid rgba(201,162,39,.45);border-radius:8px;padding:11px 15px}
.tk-contact .tk-phone em{font-style:normal;font-weight:600;font-size:.78rem;color:var(--moon-soft)}
.tk-contact p{font-size:.86rem;color:#B6C9BB}
.tk-foot-bottom{border-top:1px solid rgba(255,255,255,.12);padding:18px 22px;
  font-size:.82rem;color:#93A897;display:flex;gap:14px;justify-content:space-between;flex-wrap:wrap}
@media (max-width:980px){
  .tk-foot-top{grid-template-columns:1fr 1fr;gap:30px;padding:40px 22px 30px}
  .tk-foot-about{grid-column:1/-1}
  .tk-foot-mid{grid-template-columns:1fr;gap:24px}
}
@media (max-width:560px){
  .tk-foot-top{grid-template-columns:1fr}
  .tk-foot-list.two{grid-template-columns:1fr 1fr}
}

/* ============================================================
   GÓC TƯ VẤN , trang hub + các bài viết chuyên đề.
   Chỉ thêm class mới, không sửa selector nào có sẵn ở trên, nên
   không ảnh hưởng tới 11 trang cũ.
   ============================================================ */
.article-body{max-width:760px;margin:0 auto}
.article-body h2{font-size:clamp(1.3rem,2.3vw,1.65rem);margin:40px 0 14px;line-height:1.28}
.article-body h2:first-child{margin-top:0}
.article-body p{margin:0 0 18px;font-size:1.02rem;line-height:1.75;color:var(--ink)}
.article-body ul,.article-body ol{margin:0 0 18px;padding-left:22px}
.article-body li{margin-bottom:9px;line-height:1.65;font-size:1.02rem}
.article-body li:last-child{margin-bottom:0}
.article-body li>strong:first-child{color:var(--lacquer)}
.article-body a{font-weight:600;text-decoration:underline;text-decoration-color:rgba(181,49,44,.35);text-underline-offset:2px}
.article-body a:hover{text-decoration-color:var(--lacquer)}
.article-body .bg-price__table{margin-bottom:8px}
.article-body figure{margin:8px 0 30px}
.article-body figure img{border-radius:var(--radius);box-shadow:var(--shadow);width:100%}
.article-body figcaption{margin-top:10px;font-size:.85rem;color:var(--muted);text-align:center}
.fill-note{background:#FBF3DA;color:var(--lacquer-dark);padding:1px 6px;border-radius:4px;font-style:normal;font-weight:600;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.article-meta{color:#C3D3C7;font-size:.85rem;margin-top:8px}

/* Lưới bài viết ở trang hub /cam-nang-doanh-nghiep/ — dùng lại đúng
   .brand-grid/.brand-card đã có sẵn, chỉ thêm phần đọc thêm (excerpt). */
.article-card p.article-excerpt{font-size:.9rem;color:var(--muted);flex:1;margin:0}
.article-card .eyebrow{margin-bottom:0;font-size:.72rem}

@media (max-width:640px){
  .article-body h2{margin-top:32px}
}

/* ============================================================
   TAG + CHỈ MỤC BÀI VIẾT THEO CHỦ ĐỀ (v39)
   Thiết kế để mở rộng: thêm bài mới chỉ cần thêm vào danh sách,
   không phải đổi layout. Chỉ thêm class mới.
   ============================================================ */
.post-tags{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:34px 0 0;padding-top:22px;border-top:1px solid var(--line)}
.post-tags__label{font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-right:2px}
.tag-chip{display:inline-block;padding:5px 13px;border:1px solid var(--line);border-radius:999px;font-size:.85rem;font-weight:600;color:var(--lacquer);background:#fff;text-decoration:none;transition:.18s}
.tag-chip:hover{background:var(--lacquer);border-color:var(--lacquer);color:#fff}

.post-cat-badge{display:inline-block;padding:4px 12px;border-radius:999px;font-size:.78rem;font-weight:700;letter-spacing:.04em;background:rgba(181,49,44,.09);color:var(--lacquer);text-decoration:none}
.post-cat-badge:hover{background:rgba(181,49,44,.16)}

/* Chỉ mục toàn bộ bài viết, gom theo category */
.post-index__grid{display:grid;gap:22px;grid-template-columns:1fr}
.post-index__cat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 22px 18px}
.post-index__cat h3{font-size:1.02rem;margin:0 0 4px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.post-index__count{font-size:.78rem;font-weight:700;color:var(--muted);background:var(--paper);border-radius:999px;padding:2px 9px}
.post-index__cat > p{font-size:.86rem;color:var(--muted);margin:0 0 14px}
.post-index__list{list-style:none;margin:0;padding:0}
.post-index__list li{padding:8px 0;border-top:1px dashed var(--line);font-size:.94rem;line-height:1.5}
.post-index__list li:first-child{border-top:0;padding-top:0}
.post-index__list a{text-decoration:none;font-weight:600}
.post-index__list a:hover{text-decoration:underline}
.post-index__list li[aria-current="page"]{color:var(--muted);font-weight:600}
.post-index__list li[aria-current="page"]::after{content:" (bài đang đọc)";font-size:.8rem;font-weight:400;color:var(--muted)}

@media (min-width:760px){ .post-index__grid{grid-template-columns:1fr 1fr} }
@media (min-width:1100px){ .post-index__grid{grid-template-columns:repeat(2,1fr);gap:22px 26px} }

/* Bộ lọc theo tag ở trang hub */
.tag-filter{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 26px}
.tag-filter__label{font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);width:100%;margin-bottom:2px}
.tag-filter .tag-chip{cursor:pointer;font-family:inherit}
.tag-filter .tag-chip[aria-pressed="true"]{background:var(--lacquer);border-color:var(--lacquer);color:#fff}
.hub-empty{color:var(--muted);font-size:.95rem;margin:18px 0 0}
.article-card[hidden]{display:none}