/* ==========================================================================
   TỔNG KHO BÁNH TRUNG THU - B2B landing
   Tokens: --night (đêm rằm) · --moon (vàng trăng) · --lacquer (đỏ son)
           --paper (giấy dó) · --ink (mực)
   ========================================================================== */

/* ---------- 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:'Playfair Display';font-style:normal;font-weight:800;font-display:swap;src:url('assets/fonts/playfair-display-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:'Playfair Display';font-style:normal;font-weight:800;font-display:swap;src:url('assets/fonts/playfair-display-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:#211C44; --night-2:#2E2860; --moon:#F2C14E; --moon-soft:#F8DFA0;
  --lacquer:#B5312C; --lacquer-dark:#8F2420;
  --paper:#FBF6EC; --white:#fff; --ink:#2A2438; --muted:#6E6880;
  --line:#E8E0D2; --radius:14px; --radius-sm:9px;
  --shadow:0 10px 30px rgba(33,28,68,.10);
  --font-body:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-display:'Playfair Display',Georgia,serif;
  --container:1160px;
}

*{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.18;letter-spacing:-.01em}
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(242,193,78,.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%,#FFF3D0 0%,var(--moon) 45%,rgba(242,193,78,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:#EDE9F7;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:#B9B2D6;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:#C9C3DE;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:#C9C3DE;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(242,193,78,.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%,#D4463F,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:14px}
.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:14px;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(33,28,68,.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:#4C455E}
.heritage-copy .trust-chips{margin-top:10px}
.heritage-copy h2 .hl-red{color:var(--lacquer)}
.heritage-copy h2 .hl-gold{color:#B8791E}
.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:#C9C3DE;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:#C9C3DE;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:#C9C3DE;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:#9A93B8}
.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:#C9C3DE;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:#B7B1CC}
.footer-company-info li i{font-style:normal;display:inline-block;width:16px;color:var(--moon)}
.footer-company-info a{color:#B7B1CC}
.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:#9A93B8;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 (khi bật ở HUONG-DAN-CAI-DAT.md mục 1) đã được đẩy lên cao hơn
   CẢ 2 nút Zalo bằng Tawk_API.customStyle (yOffset) ngay trong đoạn mã nhúng — đổi vị
   trí 2 nút Zalo ở đây thì nhớ chỉnh lại yOffset đó cho khớp (đang để 160px). */
.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)}
/* Nút "a" (Ms. Thúy): kiểu đặc (filled). Nút "b" (Ms. Dung): kiểu viền (outline) —
   khác nhau rõ ràng để khách không tưởng nhầm là 2 nút bị lỗi trùng lặp. */
.float-zalo{right:20px;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)}
.float-call-mobile{left:20px;display:none;background:#fff;padding:0;overflow:hidden}
.float-call-mobile img{width:100%;height:100%;object-fit:cover}
.float-call-a{bottom:24px;box-shadow:0 8px 20px rgba(76,175,80,.35)}
.float-call-b{bottom:88px;box-shadow:0 8px 20px rgba(76,175,80,.35)}
/* Lịch sử xử lý lỗi nút Gọi bị lấm tấm trên iPhone (Safari):
   - v35: bỏ animation:ring (xoay lắc liên tục) — chưa hết lỗi.
   - v36: nghi do giải mã ảnh WebP, đổi tạm sang ký tự ☎ — không giữ lại,
     theo yêu cầu của anh dùng đúng ảnh gốc (v25-30) cho chắc.
   - v37 (bản hiện tại): quay lại dùng ảnh call-a.webp/call-b.webp gốc như
     trước, chỉ giữ lại phần đã chắc chắn đúng là bỏ animation:ring. */

/* ---------- 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(33,28,68,.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(20,16,42,.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}

/* ---------- san-pham page ---------- */
.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:#C9C3DE;margin-bottom:10px}
.brand-crumb a{color:#C9C3DE;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:#C9C3DE;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:#d4af37;
}
.combo-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:24px;
    margin-top:30px;
}

.combo-card{
    background:#fff;
    border-radius:18px;
    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:#1d2d5a;
    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: #f4d18b;
    font-size: 18px;
    font-weight: 600;
    font-style: italic;
}

.brand-thankyou::before,
.brand-thankyou::after{
    content: "";
    width: 80px;
    height: 1px;
    background: rgba(244,209,139,.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,#FFF4C1,#FFD700,#FFB800);
    color:#1D3557;
    border-radius:50px;
    font-size:20px;
    font-weight:800;
    letter-spacing:.5px;
    box-shadow:0 8px 25px rgba(255,215,0,.35);
    text-align:center;
    animation:glow 2.5s infinite ease-in-out;
}

@keyframes glow{
    0%,100%{
        box-shadow:0 8px 25px rgba(255,215,0,.35);
    }
    50%{
        box-shadow:0 8px 35px rgba(255,215,0,.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(244,209,139,.45);
    border-radius:30px;
    color:#f4d18b;
    font-weight:700;
    font-size:18px;
    background:rgba(255,255,255,.04);
    transition:.3s;
}

.brand-tabs span:hover{
    background:#d6a44d;
    color:#2d245f;
}
.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(244,209,139,.4);

    color:#f4d18b;

    font-weight:600;

    transition:.3s;

}

.brand-tabs span:hover{

    background:#d5a23d;

    color:#2d245f;

}

.brand-tabs span.active{

    background:#f4d18b;

    color:#2d245f;

}
.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(242,193,78,.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(242,193,78,.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(242,193,78,.5);border-radius:999px;background:var(--night);box-shadow:0 12px 30px rgba(33,28,68,.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(33,28,68,.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(242,193,78,.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(242,193,78,.75)}
    70%{box-shadow:0 0 0 9px rgba(242,193,78,0)}
    100%{box-shadow:0 0 0 0 rgba(242,193,78,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 đang đặt white-space:nowrap. Nút "Liên hệ ngay! 0975 400 143/0963 33 79 39"
   ở 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(242,193,78,.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}
}

/* ============================================================
   CẨM NANG DOANH NGHIỆP (v35) — 10 bài viết SEO mới + trang hub.
   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:#FDF1D6;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:#C9C3DE;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}