/* Bống Work — site dịch vụ. Token gốc: bong-run/styles/ds (navy/teal). Nhận diện đóng băng: không đổi màu, không gradient. */
/* Font tự host (assets/fonts, OFL): Be Vietnam Pro 400/600/700/800 · IBM Plex Mono 600 — subset latin + vietnamese. CSP không cần Google Fonts. */
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 400; font-display: swap; src: url(../assets/fonts/bvp-400-vie.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/bvp-400-lat.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 600; font-display: swap; src: url(../assets/fonts/bvp-600-vie.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/bvp-600-lat.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 700; font-display: swap; src: url(../assets/fonts/bvp-700-vie.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/bvp-700-lat.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 800; font-display: swap; src: url(../assets/fonts/bvp-800-vie.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/bvp-800-lat.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url(../assets/fonts/ipm-600-vie.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: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url(../assets/fonts/ipm-600-lat.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --navy-950: #04122f; --navy-900: #061a42; --navy-800: #082054; --navy-700: #0d2c6c;
  --navy-600: #153a86; --navy-500: #2450a4; --navy-400: #4c74c0; --navy-300: #8aa4d8;
  --navy-200: #c2d0ea; --navy-100: #e3e9f6; --navy-50: #f2f5fb;
  --teal-800: #005c74; --teal-700: #007b99; --teal-600: #0093b5; --teal-500: #00a9cc;
  --teal-400: #33bcd9; --teal-300: #7ed3e8; --teal-200: #b9e6f2; --teal-100: #e0f4fa;
  --gray-900: #141a24; --gray-700: #333d4d; --gray-600: #4d5768; --gray-500: #6b7688;
  --gray-300: #b8c0cc; --gray-200: #d8dde5; --gray-100: #f0f2f6; --gray-50: #f7f8fb;

  --bg: var(--gray-50); --fg: var(--gray-900); --muted: var(--gray-600); --line: var(--navy-100);
  --card: #ffffff;
  --font-sans: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --gutter: 20px; --wrap: 1080px; --radius: 18px;
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --top-h: 60px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--top-h) + 12px); }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 400 16px/1.62 var(--font-sans); -webkit-font-smoothing: antialiased; text-wrap: pretty;
}
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
a { color: var(--teal-700); }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; line-height: 1.18; letter-spacing: -0.02em; }
h1 { font-size: clamp(30px, 4.6vw, 48px); font-weight: 800; line-height: 1.12; }
h2 { font-size: clamp(26px, 4vw, 38px); font-weight: 700; }
h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-wide { max-width: 1200px; }
.wrap-narrow { max-width: 760px; }
.sect { padding-block: clamp(56px, 8vw, 104px); }
.sect-alt { background: #fff; border-block: 1px solid var(--line); }
.eyebrow {
  font: 600 12.5px/1.5 var(--font-mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--teal-700); margin-bottom: 14px;
}
.lead { font-size: clamp(17px, 2.2vw, 19px); color: var(--muted); max-width: 34em; }
.sect-head { max-width: 40em; margin-bottom: clamp(28px, 4vw, 44px); }
.sect-head .lead { margin-top: 14px; }
.note { font-size: 14px; color: var(--gray-500); }
.anchor-line { margin-top: clamp(24px, 3vw, 36px); font-size: clamp(17px, 2.2vw, 20px); font-weight: 600; color: var(--navy-800); max-width: 36em; }
:focus-visible { outline: 3px solid var(--teal-500); outline-offset: 3px; border-radius: 6px; }

/* ---- Nút. Chữ trên nền teal là navy đậm: 5,6:1 (chữ trắng chỉ 2,8:1) ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border-radius: 999px; border: 0; cursor: pointer;
  font: 600 16px/1 var(--font-sans); text-decoration: none; transition: transform .18s var(--ease-out), background .18s, box-shadow .18s;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn-teal { background: var(--teal-500); color: var(--navy-950); box-shadow: 0 8px 24px -10px rgba(0,169,204,.8); }
.btn-teal:hover { background: var(--teal-400); }
.btn-ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.55); }
.btn-ghost:hover { background: rgba(255,255,255,.1); border-color: #fff; }
.btn-line { background: #fff; color: var(--navy-800); border: 1.5px solid var(--navy-200); }
.btn-line:hover { border-color: var(--navy-400); }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; }
@media (max-width: 480px) { .hero .cta .btn { flex: 1 1 100%; } } /* xếp dọc cố định → không nhảy layout khi font đổi */

/* ---- S0. Nav ---- */
.top {
  position: sticky; top: 0; z-index: 20; background: rgba(8,32,84,.9); backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); color: #fff; border-bottom: 1px solid rgba(255,255,255,.08);
}
.top .wrap { display: flex; align-items: center; gap: 14px; min-height: var(--top-h); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; font-weight: 700; }
.brand-tile { flex: none; width: 40px; height: 40px; border-radius: 11px; background: var(--navy-950); display: grid; place-items: center; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.14); }
.brand-tile img { width: 40px; height: 40px; object-fit: cover; }
.brand-name { line-height: 1.15; }
.brand-name small { display: block; font-weight: 400; font-size: 11.5px; color: rgba(255,255,255,.72); line-height: 1.3; }
.top-nav { display: none; gap: 16px; margin-left: 10px; }
.top-nav a { color: rgba(255,255,255,.82); text-decoration: none; font-weight: 600; font-size: 14px; white-space: nowrap; }
.top-nav a:hover, .top-nav a[aria-current="page"] { color: #fff; }
.top-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--teal-400); }
.top-acts { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.top-cta { min-height: 40px; padding-inline: 16px; font-size: 14.5px; white-space: nowrap; }
.top-burger { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; border: 1.5px solid rgba(255,255,255,.28); background: transparent; color: #fff; cursor: pointer; }
.top-burger span { display: block; width: 18px; height: 2px; background: #fff; border-radius: 2px; box-shadow: 0 -6px 0 #fff, 0 6px 0 #fff; }
.top-menu { display: none; background: var(--navy-900); border-top: 1px solid rgba(255,255,255,.08); }
.top-menu.open { display: block; }
.top-menu a { display: block; padding: 14px var(--gutter); color: #fff; text-decoration: none; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,.06); }
@media (min-width: 1024px) { .top-nav { display: flex; } .top-burger, .top-menu { display: none !important; } }

/* ---- S1. Hero: navy phẳng ---- */
.hero { background: var(--navy-900); color: #fff; padding-block: clamp(48px, 7vw, 96px); overflow: hidden; }
.hero .eyebrow { color: var(--teal-300); }
.hero-grid { display: grid; gap: 40px; align-items: center; }
.hero-copy { max-width: 36em; }
.rot { display: inline-block; color: var(--teal-300); font-weight: 700; will-change: transform; }
.hero-sub { margin-top: 14px; font-size: 16px; color: rgba(255,255,255,.72); max-width: 32em; }

.hero-art { position: relative; justify-self: center; width: min(100%, 340px); }

/* Khung điện thoại bằng CSS */
.phone {
  background: var(--gray-100); border-radius: 34px; border: 6px solid var(--navy-950);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.7); overflow: hidden; color: var(--gray-900);
}
.phone-top { display: flex; align-items: center; gap: 10px; padding: 14px 18px 12px; background: #fff; border-bottom: 1px solid var(--gray-200); }
.phone-top .dot { width: 30px; height: 30px; border-radius: 50%; background: var(--navy-800); flex: none; }
.phone-title { font-weight: 700; font-size: 15px; }
.phone-time { margin-left: auto; font: 600 12.5px/1 var(--font-mono); color: var(--gray-500); }
.phone-body { padding: 16px 14px 24px; min-height: 300px; }
.phone-meta { font: 600 11.5px/1.4 var(--font-mono); color: var(--gray-600); margin-bottom: 8px; text-align: center; }
.bubble {
  background: #fff; border-radius: 18px; border-top-left-radius: 6px; padding: 12px 14px; max-width: 92%;
  font-size: 15px; line-height: 1.5; box-shadow: 0 8px 20px -14px rgba(0,0,0,.35);
}
.bubble-user { background: var(--teal-200); border-top-left-radius: 18px; border-top-right-radius: 6px; margin-left: auto; margin-top: 8px; color: var(--navy-950); }
.phone-body .bubble + .bubble { margin-top: 8px; }
.tw-line { min-height: 1.5em; white-space: pre-wrap; }
.tw.tw-live .tw-line { display: grid; } /* chỉ khi JS đã bọc ghost/typed; reduced-motion giữ dòng thường */
.tw-ghost, .tw-typed { grid-area: 1 / 1; }
.tw-ghost { visibility: hidden; }
.tw.tw-typing .tw-line.cur .tw-typed::after { content: "▍"; color: var(--teal-500); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

@media (min-width: 860px) {
  .hero { padding-top: 132px; } /* chừa chỗ cho Bống V2 (176×131) bơi phía trên điện thoại (.bong-stage top -116px, vây trước chạm mép điện thoại); .hero overflow hidden nên không được nhô khỏi hero */
  .hero-grid { grid-template-columns: 1.2fr .8fr; gap: 48px; }
  .hero-art { justify-self: end; }
}

/* ---- Khung chat dùng chung (S2) ---- */
.chat { display: grid; gap: 10px; width: 100%; }
.msg { padding: 11px 14px; border-radius: 18px; font-size: 15px; line-height: 1.5; max-width: 90%; }
.msg.me { justify-self: end; background: #0068ff; color: #fff; border-bottom-right-radius: 6px; }
.msg.bong { justify-self: start; background: #fff; color: var(--gray-900); border: 1px solid var(--gray-200); border-bottom-left-radius: 6px; }
.msg.bong::before { content: "Bống"; display: block; font: 600 11px/1 var(--font-mono); letter-spacing: .06em; color: var(--teal-700); margin-bottom: 6px; text-transform: uppercase; }

/* ---- S2. Thẻ xếp chồng ---- */
.stack { display: grid; gap: 18px; }
.scard {
  background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 24px;
  display: grid; gap: 22px; box-shadow: 0 18px 44px -30px rgba(8,32,84,.35);
}
.scard h3 { font-size: clamp(22px, 2.6vw, 28px); }
.scard .chat { background: var(--navy-50); border-radius: 14px; padding: 16px; }
@media (min-width: 768px) {
  .stack { gap: 0; }
  .scard {
    position: sticky; top: calc(var(--top-h) + 36px); grid-template-columns: 1.1fr .9fr; align-items: center;
    padding: 36px; min-height: 340px; margin-bottom: 28px; will-change: transform, opacity;
  }
  .scard:last-child { margin-bottom: 0; }
}

/* ---- S3. Bảng so sánh ---- */
.cmp { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; }
.cmp th, .cmp td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.cmp thead th { font: 600 12.5px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gray-600); border-bottom: 2px solid var(--navy-200); }
.cmp thead th.cmp-bong { color: var(--teal-700); }
.cmp tbody th { font-weight: 600; color: var(--navy-800); width: 20%; }
.cmp tbody td:first-of-type { color: var(--muted); }
.cmp tbody td:last-child { color: var(--gray-900); font-weight: 600; background: var(--teal-100); }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
.cmp tbody tr:last-child td:last-child { border-bottom-right-radius: 12px; }
.cmp thead th.cmp-bong { background: var(--teal-100); border-top-left-radius: 12px; border-top-right-radius: 12px; }
@media (max-width: 767px) {
  .cmp, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; }
  .cmp thead { display: none; }
  .cmp tbody tr { background: #fff; border: 1.5px solid var(--line); border-radius: 14px; margin-bottom: 12px; overflow: hidden; }
  .cmp tbody th { width: auto; padding: 12px 16px 6px; border: 0; }
  .cmp tbody td { border: 0; padding: 8px 16px 12px; }
  .cmp tbody td::before { content: attr(data-h); display: block; font: 600 11px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gray-500); margin-bottom: 2px; }
  .cmp tbody td:last-child::before { color: var(--teal-700); }
  .cmp tbody td:last-child { border-radius: 0; }
}

/* ---- S4. Gói & giá ---- */
.plans { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); align-items: stretch; }
.plan {
  position: relative; background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 24px 20px;
  display: flex; flex-direction: column; gap: 10px;
}
.plan.hot { border: 2px solid var(--teal-500); box-shadow: 0 24px 60px -30px rgba(0,169,204,.55); }
.plan-tag {
  position: absolute; top: -13px; left: 20px; padding: 5px 11px; border-radius: 999px;
  background: var(--teal-500); color: var(--navy-950); font: 600 12px/1 var(--font-sans);
}
.plan-k { font: 600 12.5px/1.5 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--teal-700); }
.plan-p b { font-size: clamp(26px, 2.4vw, 30px); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; display: block; color: var(--navy-900); }
.plan-p span { display: block; margin-top: 4px; font-size: 13.5px; color: var(--muted); }
.plan-h { margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--gray-500); text-transform: uppercase; letter-spacing: .06em; }
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14.5px; line-height: 1.5; }
.plan ul li { padding-left: 20px; position: relative; }
.plan ul li::before { content: ""; position: absolute; left: 0; top: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--teal-500); }
.plan .btn { margin-top: auto; padding-inline: 16px; font-size: 15px; }
@media (max-width: 767px) { .plans { grid-template-columns: 1fr; } .plan { padding: 24px; } }
.cost .note { font-size: 13.5px; color: var(--gray-500); border-top: 1px dashed var(--navy-200); padding-top: 10px; }

/* ---- S6. Hỏi Bống (nền navy nhạt) ---- */
.ask { background: var(--navy-100); border-block: 1px solid var(--navy-200); }
.ask-grid { display: grid; gap: 28px; align-items: center; }
.ask h2 { color: var(--navy-900); }
.ask .lead { color: var(--gray-700); }
.ask .eyebrow { color: var(--teal-800); }
.qr-box { display: none; justify-self: end; text-align: center; }
.qr-box .qr { width: 148px; height: 148px; border-radius: 14px; border: 1px solid var(--navy-200); padding: 8px; background: #fff; margin: 0 auto 8px; }
@media (min-width: 640px) { .ask-grid { grid-template-columns: 1fr auto; } .qr-box { display: block; } }

/* ---- S7. Hỏi đáp ---- */
.faq { display: grid; gap: 10px; }
.faq details { background: #fff; border: 1.5px solid var(--line); border-radius: 14px; padding: 0 20px; }
.faq summary { cursor: pointer; padding: 16px 0; font-weight: 600; font-size: 16.5px; color: var(--navy-900); list-style: none; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--navy-200); display: grid; place-items: center; font-weight: 600; color: var(--teal-700); }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 0 18px; color: var(--muted); max-width: 40em; }

/* ---- S8. Footer ---- */
.foot { background: var(--navy-950); color: rgba(255,255,255,.72); padding-block: 36px; font-size: 14px; }
.foot .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.foot .brand { color: #fff; }
.foot .brand-tile { width: 34px; height: 34px; border-radius: 9px; }
.foot .brand-tile img { width: 34px; height: 34px; }
.foot-tag { color: rgba(255,255,255,.72); }
.foot a:not(.brand) { color: var(--teal-300); text-decoration: none; }
.foot a:not(.brand):hover { text-decoration: underline; }
.foot .brand + .foot-tag { margin-right: auto; }

/* ---- Thanh dưới cùng (điện thoại) ---- */
.mbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: rgba(247,248,251,.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-top: 1px solid var(--line);
  transition: transform .25s var(--ease-out), opacity .25s;
}
.mbar .btn { width: 100%; }
.mbar.off { transform: translateY(110%); opacity: 0; pointer-events: none; }
@media (min-width: 768px) { .mbar { display: none; } }
@media (max-width: 767px) { body { padding-bottom: 76px; } .foot { padding-bottom: 36px; } }
@media (min-width: 768px) { body:not([data-no-fab]) .foot { padding-bottom: 92px; } } /* chừa chỗ cho nút nổi Hỏi Bống, khỏi đè link cuối footer */


/* ===================== V2 (18/09) — khối mới ===================== */

/* ---- Đầu trang con (không phải hero) ---- */
.page-head { background: var(--navy-900); color: #fff; padding-block: clamp(40px, 6vw, 72px); }
.page-head .eyebrow { color: var(--teal-300); }
.page-head .lead { color: rgba(255,255,255,.8); }
.page-head h1 { font-size: clamp(28px, 4.2vw, 44px); }
.crumb { font-size: 13.5px; color: rgba(255,255,255,.6); margin-bottom: 12px; }
.crumb a { color: rgba(255,255,255,.8); text-decoration: none; }

/* ---- Reveal khi cuộn (JS đặt opacity/transform; không JS vẫn hiện) ---- */
.reveal { will-change: transform, opacity; }
.group {
  background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 22px;
  text-decoration: none; color: var(--fg); display: grid; gap: 8px; align-content: start;
  transition: transform .2s var(--ease-out), border-color .2s, box-shadow .2s;
}
.group:hover { transform: translateY(-3px); border-color: var(--teal-400); box-shadow: 0 18px 40px -26px rgba(8,32,84,.5); }
.group h3 { font-size: 19px; }
.group p { color: var(--muted); font-size: 14.5px; }
.group .group-go { margin-top: 6px; color: var(--teal-700); font-weight: 600; font-size: 14.5px; }
.group .group-go::after { content: " →"; }

/* ---- Tab nhóm (/cho-ai) ---- */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: clamp(24px, 3vw, 36px); position: sticky; top: var(--top-h); z-index: 5; background: var(--bg); padding-block: 12px; }
.tab { border: 1.5px solid var(--navy-200); background: #fff; color: var(--navy-800); border-radius: 999px; padding: 10px 16px; font: 600 14.5px/1 var(--font-sans); cursor: pointer; transition: background .18s, color .18s, border-color .18s; }
.tab:hover { border-color: var(--navy-400); }
.tab[aria-selected="true"] { background: var(--navy-800); color: #fff; border-color: var(--navy-800); }
.panel[hidden] { display: none; }
.panel { display: grid; gap: clamp(24px, 3vw, 36px); }
.panel-head { display: grid; gap: 10px; max-width: 44em; }
.panel-head .lead { max-width: none; }
.cases { display: grid; gap: 16px; }
.case { background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 22px; display: grid; gap: 18px; }
.case-n { font: 600 12.5px/1 var(--font-mono); letter-spacing: .12em; color: var(--teal-700); }
.case h3 { font-size: 21px; margin-top: 6px; }
.case-prob { color: var(--muted); font-size: 15px; margin-top: 8px; }
.case-do { margin-top: 10px; font-size: 15px; }
.case-do b { color: var(--navy-800); }
.case .chat { background: var(--navy-50); border-radius: 14px; padding: 16px; align-self: start; }
@media (min-width: 820px) { .case { grid-template-columns: 1.05fr .95fr; align-items: start; padding: 28px; } }
.panel-meta { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.meta { background: var(--gray-50); border: 1.5px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.meta-k { font: 600 11.5px/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gray-500); margin-bottom: 6px; }
.meta p:not(.meta-k) { font-size: 15px; color: var(--gray-700); }
.meta a { font-weight: 600; }
.honest { border-left: 3px solid var(--teal-500); padding: 6px 0 6px 16px; color: var(--gray-700); font-size: 15px; max-width: 44em; }

/* ---- Chat Bống (drawer + trang + nhúng) ---- */
.chatbox { background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius); display: grid; grid-template-rows: auto 1fr auto auto auto; overflow: hidden; min-height: 420px; box-shadow: 0 24px 60px -36px rgba(8,32,84,.5); }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); background: #fff; }
.chat-ava { width: 40px; height: 40px; border-radius: 12px; overflow: hidden; background: var(--navy-950); flex: none; }
.chat-ava img { width: 40px; height: 40px; object-fit: cover; }
.chat-title { font-weight: 700; font-size: 15.5px; line-height: 1.2; }
.chat-status { font-size: 12.5px; color: var(--gray-500); display: flex; align-items: center; gap: 6px; }
.chat-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; }
.chat-status[data-mode="offline"]::before { background: var(--gray-300); }
.chat-close { margin-left: auto; width: 36px; height: 36px; border-radius: 10px; border: 1.5px solid var(--navy-200); background: #fff; cursor: pointer; font-size: 20px; line-height: 1; color: var(--navy-800); display: none; }
.chat-log { padding: 16px; overflow-y: auto; display: grid; gap: 10px; align-content: start; background: var(--navy-50); max-height: 60vh; }
.chat-log .msg { max-width: 92%; white-space: pre-wrap; }
.chat-log .msg.err { background: #fff4f2; border: 1px solid #f5c2b8; color: #7a2a1a; justify-self: start; }
.chat-log .msg.err a { color: #7a2a1a; font-weight: 600; }
.typing { display: inline-flex; gap: 4px; padding: 12px 14px; background: #fff; border: 1px solid var(--gray-200); border-radius: 18px; border-bottom-left-radius: 6px; justify-self: start; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--navy-300); animation: tdot 1.2s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes tdot { 0%, 80%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-5px); opacity: 1; } }
.chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 16px; background: var(--navy-50); }
.chips:empty { display: none; }
.chip { border: 1.5px solid var(--teal-300); background: var(--teal-100); color: var(--teal-800); border-radius: 999px; padding: 8px 13px; font: 600 13.5px/1.2 var(--font-sans); cursor: pointer; text-align: left; }
.chip:hover { background: var(--teal-200); }
.chat-form { display: flex; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line); background: #fff; }
.chat-form input { flex: 1; min-width: 0; min-height: 46px; border-radius: 999px; border: 1.5px solid var(--navy-200); padding: 0 16px; font: 400 15px/1.4 var(--font-sans); color: var(--fg); }
.chat-form input:focus { border-color: var(--teal-500); outline: none; box-shadow: 0 0 0 3px var(--teal-100); }
.chat-form button { min-height: 46px; padding-inline: 18px; }
.chat-form button:disabled, .chat-form input:disabled { opacity: .55; cursor: not-allowed; }
.chat-foot { font-size: 12.5px; color: var(--gray-500); padding: 0 16px 12px; background: #fff; }
.chat-foot a { font-weight: 600; }

/* Drawer nổi */
.fab { position: fixed; right: 18px; bottom: 18px; z-index: 40; display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 18px 0 12px; border-radius: 999px; border: 0; background: var(--navy-800); color: #fff; font: 600 15px/1 var(--font-sans); cursor: pointer; box-shadow: 0 16px 36px -14px rgba(8,32,84,.75); transition: transform .18s var(--ease-out); }
.fab:hover { transform: translateY(-2px); }
.fab-bong { display: inline-grid; place-items: center; width: 38px; height: 30px; } .fab-bong .bm2 { width: 38px; height: 28px; }
@media (max-width: 767px) { .fab { bottom: calc(76px + env(safe-area-inset-bottom)); right: 14px; padding: 0 14px 0 10px; } .fab > span:last-child { display: none; } }
.drawer { position: fixed; inset: 0; z-index: 50; display: none; }
.drawer.open { display: block; }
.drawer-bg { position: absolute; inset: 0; background: rgba(4,18,47,.45); }
.drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(100%, 440px); background: var(--bg); box-shadow: -20px 0 60px -30px rgba(0,0,0,.5); display: grid; padding: 12px; }
.drawer-panel .chatbox { min-height: 0; height: 100%; border-radius: 16px; }
.drawer-panel .chat-log { max-height: none; }
.drawer-panel .chat-close { display: inline-grid; place-items: center; }
body.drawer-open { overflow: hidden; }

/* Trang /chat: 2 cột */
.chat-page { display: grid; gap: 20px; align-items: start; }
.chat-page .chatbox { min-height: 560px; }
.chat-page .chat-log { max-height: none; min-height: 320px; }
.chat-side { display: grid; gap: 14px; }
.side-card { background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius); padding: 20px; }
.side-card h3 { font-size: 16.5px; margin-bottom: 8px; }
.side-card p, .side-card li { font-size: 14.5px; color: var(--gray-700); }
.side-card ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.side-ctx { background: var(--teal-100); border-color: var(--teal-200); }
.side-ctx .meta-k { color: var(--teal-800); }
@media (min-width: 900px) { .chat-page { grid-template-columns: 1.4fr .8fr; } }
.presult.on { display: grid; }
.presult .btn { justify-self: start; margin-top: 8px; }
@media (min-width: 900px) { }

/* ---- Bảng so sánh 4 gói ---- */
.cmp4-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp4 { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14.5px; background: #fff; border: 1.5px solid var(--line); border-radius: 14px; overflow: hidden; }
.cmp4 th, .cmp4 td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; }
.cmp4 th:first-child, .cmp4 td:first-child { text-align: left; font-weight: 600; color: var(--navy-800); }
.cmp4 thead th { font: 600 12px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gray-600); background: var(--gray-50); }
.cmp4 thead th.hot { color: var(--teal-800); background: var(--teal-100); }
.cmp4 tbody td.hot { background: var(--teal-100); font-weight: 600; }
.cmp4 tbody tr:last-child td, .cmp4 tbody tr:last-child th { border-bottom: 0; }
.cmp4 .y { color: var(--teal-800); font-weight: 700; }
.cmp4 .n { color: var(--gray-300); }
@media (max-width: 640px) { .cmp4 { min-width: 640px; } }

/* ---- Quy trình bàn giao ---- */
.steps { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.step { background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius); padding: 20px; display: grid; gap: 8px; align-content: start; }
.step-k { font: 600 12.5px/1 var(--font-mono); letter-spacing: .12em; color: var(--teal-700); }
.step h3 { font-size: 17.5px; }
.step p { font-size: 14.5px; color: var(--muted); }

/* ---- Dự án ---- */
.projects { display: grid; gap: 16px; }
.project { background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius); padding: 24px; display: grid; gap: 16px; }
.project-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.project-head h3 { font-size: 22px; }
.badge { display: inline-block; padding: 5px 10px; border-radius: 999px; font: 600 12px/1 var(--font-sans); background: var(--teal-100); color: var(--teal-800); }
.badge.gray { background: var(--gray-100); color: var(--gray-600); }
.badge.navy { background: var(--navy-100); color: var(--navy-800); }
.project-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.project-grid .meta { background: var(--gray-50); }
/* ---- Hỏi đáp theo nhóm ---- */
.faq-group { margin-bottom: clamp(28px, 4vw, 44px); }
.faq-group h2 { font-size: 22px; margin-bottom: 14px; }
.faq details p + p { margin-top: 6px; }

/* ---- Form để lại số ---- */
.lead-form { background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius); padding: clamp(20px, 3vw, 28px); display: grid; gap: 14px; }
.lead-form h3 { font-size: 20px; }
.lead-form .row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.lead-form label { display: grid; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--gray-700); }
.lead-form input, .lead-form select, .lead-form textarea { min-height: 46px; border-radius: 12px; border: 1.5px solid var(--navy-200); padding: 10px 14px; font: 400 15px/1.4 var(--font-sans); color: var(--fg); background: #fff; }
.lead-form textarea { min-height: 84px; resize: vertical; }
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus { outline: none; border-color: var(--teal-500); box-shadow: 0 0 0 3px var(--teal-100); }
.lead-form .acts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.lead-msg { font-size: 14.5px; color: var(--navy-800); font-weight: 600; }
.lead-msg.err { color: #b42318; }
.lead-form button:disabled { opacity: .6; cursor: wait; }

/* ---- CTA cuối trang ---- */
.cta-band { background: var(--navy-900); color: #fff; padding-block: clamp(40px, 6vw, 72px); }
.cta-band h2 { color: #fff; }
.cta-band .lead { color: rgba(255,255,255,.8); }
.cta-band .btn-line { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.cta-band .btn-line:hover { border-color: #fff; }
.pm.hot { border-color: var(--teal-500); }
.pm .plan-k { margin-bottom: 4px; }
/* ---- Thay cho inline style (CSP style-src self) ---- */
.page-head .lead, .cta-band .lead { margin-top: 14px; }
.grid-top { align-items: start; }
.chat-embed { margin-inline: auto; padding-inline: 0; }
.page-head h1 em { font-style: normal; color: var(--teal-300); }
.nf { min-height: 100vh; display: grid; place-items: center; text-align: center; padding: 24px; }
.nf img { width: 72px; margin: 0 auto 18px; border-radius: 18px; }
.nf .lead { margin: 12px auto 0; }
.nf .cta { justify-content: center; }
/* ===== Nhân vật Bống V2 (21/09/2026) — SVG chèn bởi js/bong.js vào [data-bong]; nguồn assets/brand/bong-mascot-v2.svg ===== */
.bm2 { display: block; overflow: visible; width: 100%; height: auto; }
.bm2.on-navy .bm-body, .bm2.on-navy .bm-fin { stroke: var(--teal-500); stroke-width: 1; } /* thân navy trên nền navy: viền teal mảnh */
.bm2.flip { transform: scaleX(-1); }
[data-bong] { position: relative; }
[data-bong] .bm2 { cursor: default; }
[data-bong][data-lines] .bm2 { cursor: pointer; }
[data-bong] .bm2:focus-visible { outline: 3px solid var(--teal-300); outline-offset: 8px; border-radius: 40%; }
.bong-stage { position: absolute; z-index: 2; left: -36px; top: -116px; width: 176px; } /* bơi phía trên điện thoại (.hero padding-top chừa chỗ) */
.bong-stage .bm2 { filter: drop-shadow(0 18px 24px rgba(0,0,0,.35)); }
.bong-say { position: absolute; left: 150px; top: -6px; width: max-content; max-width: 230px; background: #fff; color: var(--navy-950); font-size: 14px; line-height: 1.4; padding: 10px 12px; border-radius: 14px; border-bottom-left-radius: 4px; box-shadow: 0 12px 28px -14px rgba(0,0,0,.5); }
.bong-say[hidden] { display: none; }
.phone[data-tilt] { transform-style: preserve-3d; will-change: transform; }
/* Bống ở đầu trang con (la-gi, cho-ai, gia, du-an, hoi-dap): góc phải, chỉ ≥ 900px; bong bóng nói mở về bên trái */
.page-head.has-bong .wrap { position: relative; }
.bong-stage-page { display: none; }
@media (min-width: 900px) {
  .page-head.has-bong .wrap { padding-right: calc(var(--gutter) + 200px); }
  .bong-stage-page { display: block; left: auto; right: var(--gutter); top: 50%; transform: translateY(-50%); width: 150px; }
  .bong-stage-page .bong-say { left: auto; right: 160px; top: 4px; border-bottom-left-radius: 14px; border-bottom-right-radius: 4px; text-align: right; }
}
@media (max-width: 767px) { .hero-grid { gap: 84px; } .bong-stage { left: -6px; top: -84px; width: 124px; } .bong-say { left: 108px; font-size: 13px; max-width: 190px; } }

/* ===== V3: 4 tầng ===== */
.layers { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
@media (min-width: 900px) {
  .layers { grid-template-columns: repeat(4, 1fr); gap: 0; }
}
.feed-sect .eyebrow { color: var(--teal-300); }
.feed-sect .lead { color: rgba(255,255,255,.75); }
.feed { display: grid; gap: 24px; align-items: start; }
.feed-bong.over { border-color: var(--teal-400); background: rgba(0,169,204,.12); }
.feed-bong .bong-feed { width: min(70%, 200px); }
.chip-src { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid rgba(255,255,255,.35); background: rgba(255,255,255,.06); color: #fff; border-radius: 999px; padding: 9px 14px 9px 9px; font: 600 14.5px/1 var(--font-sans); cursor: grab; transition: transform .18s var(--ease-out), background .18s; }
.chip-src span { width: 24px; height: 24px; border-radius: 50%; background: var(--teal-500); color: var(--navy-950); display: grid; place-items: center; font: 700 11px/1 var(--font-mono); }
.chip-src:hover { background: rgba(255,255,255,.14); transform: translateY(-1px); }
.chip-src.used { opacity: .35; cursor: default; pointer-events: none; }
.chip-src.flying { position: fixed; z-index: 60; pointer-events: none; }
.feed-phone .phone-body { min-height: 180px; color: var(--fg); }
.feed-lines { list-style: none; padding: 0; margin: 4px 0 0; }
.feed-lines li { margin-top: 2px; }
.feed-empty { color: var(--gray-500); font-size: 13.5px; margin-top: 6px; }
.feed-done { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: 16px; padding: 16px 18px; }
.feed-done .cta { margin-top: 12px; }
.feed-done .btn-line { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
@media (min-width: 820px) { .feed { grid-template-columns: 300px 1fr; } }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1.5px solid var(--navy-100); background: var(--navy-50); color: var(--navy-800); border-radius: 999px; padding: 6px 11px; font: 600 13.5px/1 var(--font-sans); cursor: pointer; transition: border-color .15s, background .15s; }
.chip:hover, .chip[aria-pressed="true"] { border-color: var(--teal-400); background: var(--teal-100); }
@media (min-width: 900px) { }
.col { background: #fff; border: 1.5px solid var(--line); border-radius: 16px; padding: 20px; }
@media (min-width: 720px) { }

/* ===== V3: nguyên tắc ===== */
.principles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.pr { background: #fff; border: 1.5px solid var(--line); border-radius: 16px; padding: 18px; }
.pr-n { font: 700 12.5px/1 var(--font-mono); letter-spacing: .12em; color: var(--teal-700); }
.pr h3 { font-size: 17px; margin-top: 8px; }
.pr p { color: var(--muted); font-size: 14.5px; margin-top: 6px; }
.nf .bong-404 { width: 200px; margin-inline: auto; }
.nf .bong-404 .bm2 { filter: drop-shadow(0 14px 22px rgba(4,18,47,.28)); }

/* ===== V3: /admin ===== */
.adm-body { background: var(--gray-100); }
.adm { min-height: 100vh; }
.adm-login { max-width: 380px; margin: 12vh auto; background: #fff; border: 1.5px solid var(--line); border-radius: 18px; padding: 28px; display: grid; gap: 12px; }
.adm-login h1 { font-size: 22px; }
.adm-login input { min-height: 46px; border-radius: 12px; border: 1.5px solid var(--navy-200); padding: 0 14px; font: 400 15px/1.4 var(--font-sans); }
.adm-app { display: grid; grid-template-columns: 200px 1fr; min-height: 100vh; }
.adm-side { background: var(--navy-900); color: #fff; padding: 20px 14px; display: grid; gap: 14px; align-content: start; }
.adm-side nav { display: grid; gap: 4px; }
.adm-side nav button, .adm-out { text-align: left; border: 0; background: transparent; color: rgba(255,255,255,.8); padding: 10px 12px; border-radius: 10px; font: 600 14.5px/1 var(--font-sans); cursor: pointer; }
.adm-side nav button[aria-current="page"] { background: rgba(255,255,255,.12); color: #fff; }
.adm-side label { font-size: 13px; color: rgba(255,255,255,.7); display: grid; gap: 6px; }
.adm-side select { min-height: 36px; border-radius: 8px; border: 0; padding: 0 8px; font: 500 14px/1 var(--font-sans); }
.adm-main { padding: 24px; display: grid; gap: 16px; align-content: start; }
.adm-main h2 { font-size: 20px; }
.adm-kpi { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.adm-kpi div { background: #fff; border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.adm-kpi b { display: block; font-size: 22px; color: var(--navy-900); }
.adm-kpi span { color: var(--muted); font-size: 13px; }
.adm-table { width: 100%; border-collapse: collapse; background: #fff; border: 1.5px solid var(--line); border-radius: 12px; overflow: hidden; font-size: 14px; }
.adm-table th, .adm-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.adm-table th { font: 600 12px/1.4 var(--font-mono); color: var(--gray-500); text-transform: uppercase; letter-spacing: .06em; }
.adm-table tr.click { cursor: pointer; }
.adm-table tr.click:hover td { background: var(--navy-50); }
.adm-log { max-height: none; border-radius: 12px; }
.adm-log .msg-user { background: var(--teal-200); justify-self: end; border-radius: 16px; padding: 10px 12px; }
.adm-log .msg-bot { background: #fff; justify-self: start; border-radius: 16px; padding: 10px 12px; }
@media (max-width: 767px) { .adm-app { grid-template-columns: 1fr; } .adm-side { grid-template-columns: 1fr 1fr; } }

/* ===================== V4 (20/09) — định vị lại trang chủ: Bống Work → Bống Hub → module ===================== */
.hero-sub + .hero-sub { margin-top: 10px; }
.hero-tag { margin-top: 18px; font: 600 14px/1.5 var(--font-mono); letter-spacing: .02em; color: var(--teal-300); }
.hero-note { margin-top: 12px; text-align: center; font-size: 12.5px; color: rgba(255,255,255,.6); }
@media (min-width: 860px) { .hero-grid { align-items: start; } .hero-copy { padding-top: 24px; } }
@media (min-width: 1000px) { .steps-5 .step { padding: 18px 16px; } .steps-5 .step h3 { font-size: 16.5px; } }
.hub .eyebrow { color: var(--teal-300); display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.hub .lead { color: rgba(255,255,255,.78); max-width: 40em; }
@media (min-width: 900px) { }
.hub-card .badge { justify-self: start; margin-bottom: 4px; }
.hub-card > a:not(.btn) { margin-top: 2px; padding: 10px 0; justify-self: start; color: var(--teal-700); font-weight: 600; font-size: 14.5px; text-decoration: none; } /* padding → vùng bấm ≥ 40px */
.hub-card > a:not(.btn):hover { text-decoration: underline; }
.hub-card > a:not(.btn)::after { content: " →"; }
.badge.line { background: #fff; color: var(--navy-800); border: 1.5px solid var(--navy-200); text-transform: none; letter-spacing: 0; }
.hub .eyebrow .badge { text-transform: none; letter-spacing: 0; }

/* Bống giúp gì: 3 nhóm + việc làm được */
@media (min-width: 900px) { }
/* Demo hội thoại: 4 thẻ, không sticky */
.demos { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.demo { background: var(--gray-50); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 20px; display: grid; gap: 6px; align-content: start; }
.demo h3 { font-size: 18px; }
.demo > p { font-size: 14.5px; color: var(--muted); }
.demo .chat { margin-top: 10px; }
@media (min-width: 900px) { .demos { grid-template-columns: repeat(2, 1fr); } }

.mt-note { margin-top: 22px; max-width: 48em; }
.mt-note a { color: var(--teal-700); font-weight: 600; }
.paths .btn { justify-self: start; }
@media (min-width: 900px) { }

/* Nút nổi Hỏi Bống: ẩn khi hero hoặc khối CTA cuối đang trong khung nhìn — không che mockup, không cạnh tranh CTA chính */
body.fab-off .fab { opacity: 0; pointer-events: none; transform: translateY(12px); }
.fab { transition: transform .18s var(--ease-out), opacity .2s; }

/* ---- Tắt mọi chuyển động khi người dùng yêu cầu ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  [data-bong] .bm2 { cursor: default; }
  .scard { position: static; margin-bottom: 18px; }
  .mbar { transition: none; }
}

/* ===================== V5 (22/09) — "Dark editorial assistant": trang chủ một canvas tối, bề mặt xếp tầng bằng tông navy, không bóng, 1 nút teal/khung nhìn (spec docs/specs/2026-09-22-website-v5-dark-editorial.md). Chỉ body.v5 (index.html); 5 trang con vẫn sáng ===================== */
:root { --ink-100: #f5f7fb; --ink-70: #b9c3d8; --ink-50: #8a97b3; } /* chữ trên navy-950: 17,3 · 10,5 · 6,3 (đo 22/09) */
.v5 { --bg: var(--navy-950); --fg: var(--ink-70); --muted: var(--ink-50); --line: rgba(255,255,255,.09); --card: var(--navy-900); }
.v5 a { color: var(--teal-300); }
.v5 h1, .v5 h2, .v5 h3 { color: var(--ink-100); }
.v5 h2 { font-size: clamp(28px, 4.2vw, 44px); }
.v5 .sect { padding-block: clamp(64px, 9vw, 112px); border-top: 1px solid var(--line); }
.v5 .sect-alt { background: var(--navy-900); border-bottom: 0; } /* tầng nâng, không đảo sáng/tối */
.v5 .eyebrow { color: var(--teal-300); }
.v5 .lead { color: var(--ink-70); }
.v5 .note { color: var(--ink-50); }
.v5 .anchor-line { color: var(--ink-100); }
.v5 .after-line { margin-top: 18px; }
.v5 .top { background: rgba(4,18,47,.86); }
.v5 .btn-teal { box-shadow: none; }
.v5 .btn-ghost { border-color: rgba(255,255,255,.35); color: var(--ink-100); }
.v5 .btn-line { background: transparent; color: var(--ink-100); border-color: rgba(255,255,255,.35); }
/* Link mũi tên: CTA phụ và điều hướng, không phải nút */
.link-arrow { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 4px; background: none; border: 0; cursor: pointer; color: var(--ink-100); font: 600 16px/1 var(--font-sans); text-decoration: none; }
.link-arrow::after { content: "→"; color: var(--teal-300); transition: transform .18s var(--ease-out); }
.link-arrow:hover::after { transform: translateX(4px); }
.link-arrow:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-color: rgba(255,255,255,.35); }

/* Hero: headline là nhân vật chính */
.v5 .hero { background: transparent; padding-block: clamp(56px, 8vw, 112px); }
.v5 h1 { font-size: clamp(36px, 6vw, 64px); line-height: 1.08; letter-spacing: -.025em; }
.v5 .hero-sub { margin-top: 20px; font-size: clamp(17px, 2vw, 19px); color: var(--ink-70); max-width: 30em; }
.v5 .hero-tag { color: var(--ink-50); font-weight: 500; }
.v5 .hero-art { width: min(100%, 380px); }
.v5 .phone { border-color: var(--navy-800); box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
.v5 .hero-note { color: var(--ink-50); }

/* Thẻ: navy-900 trên canvas, navy-800 trong tầng nâng; viền mảnh, không bóng */
.v5 .pr { background: var(--navy-900); border: 1px solid var(--line); border-radius: 16px; padding: 22px; }
.v5 .pr h3 { font-size: 18px; }
.v5 .pr p { color: var(--ink-70); }
.v5 .pr-n, .v5 .step-k { color: var(--teal-300); }
.pr-eg .msg { font-size: 14px; padding: 9px 12px; max-width: 100%; }
.pr-eg .msg.bot { justify-self: start; background: rgba(255,255,255,.05); border: 1px dashed rgba(255,255,255,.22); color: var(--ink-50); font-style: italic; border-bottom-left-radius: 6px; }
.pr-eg .msg.bot::before { content: "trợ lý chưa cấu hình"; display: block; font: 600 10.5px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; font-style: normal; margin-bottom: 6px; color: var(--ink-50); }

/* Nhãn trạng thái / nhóm: mono, trắng mờ, chỉ 2 loại trên trang chủ */
.tag { display: inline-block; font: 600 11.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-50); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 6px 10px; white-space: nowrap; }
.v5 .eyebrow .tag { margin-left: 10px; vertical-align: middle; letter-spacing: .06em; }

/* 5 bước blueprint: desktop hàng ngang có đường nối (đường nằm sau thẻ, chỉ lộ ở khe); mobile cuộn ngang snap */
.flow { list-style: none; margin: 0; padding: 0 var(--gutter) 8px; margin-inline: calc(-1 * var(--gutter)); display: grid; grid-auto-flow: column; grid-auto-columns: 84%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.flow::-webkit-scrollbar { display: none; }
.flow-step { scroll-snap-align: start; background: var(--navy-800); border: 1px solid var(--line); border-radius: 16px; padding: 20px; display: grid; gap: 8px; align-content: start; }
.flow-step h3 { font-size: 17px; }
.flow-step p:not(.step-k):not(.step-out) { font-size: 14.5px; color: var(--ink-70); }
.step-out { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line); font: 500 13px/1.5 var(--font-mono); color: var(--ink-50); }
.step-out b { color: var(--teal-300); font-weight: 600; margin-right: 6px; }
@media (min-width: 720px) { .flow { grid-auto-columns: 46%; } }
@media (min-width: 1000px) {
  .flow { position: relative; grid-auto-flow: row; grid-template-columns: repeat(5, 1fr); overflow: visible; margin-inline: 0; padding: 0; }
  .flow::before { content: ""; position: absolute; left: 20px; right: 20px; top: 27px; height: 1px; background: rgba(255,255,255,.22); }
  .flow-step { padding: 18px 16px; }
  .flow-step h3 { font-size: 16px; }
}

/* Bống Hub: 2 cột, 3 bước kết nối trong một panel */
.v5 .hub { background: var(--navy-900); }
.hub-wrap .sect-head { margin-bottom: 0; }
.hub-steps .step-k { font-size: 15px; padding-top: 3px; }
@media (min-width: 900px) { }

/* Ví dụ thực tế: thẻ sáng như màn chat trên canvas tối — điểm nhấn thị giác chính, không cần animation */
.v5 .demo { background: #fff; border: 0; border-radius: 16px; padding: 20px; gap: 8px; color: var(--gray-900); }
.v5 .demo h3 { color: var(--navy-900); font-size: 18px; }
.v5 .demo > p { color: var(--gray-600); }
.v5 .demo .tag { justify-self: start; color: var(--navy-800); border-color: var(--navy-200); background: var(--navy-50); margin-bottom: 4px; }
.v5 .demo .msg.bong { background: var(--gray-50); }
.v5 .demo .chat { margin-top: 12px; }

/* Ranh giới: danh sách 2 cột có gạch mảnh, không card */
.rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 48px; border-top: 1px solid var(--line); }
.rules li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.rules .pr-n { padding-top: 5px; }
.rules h3 { font-size: 17.5px; }
.rules p { margin-top: 4px; font-size: 15px; color: var(--ink-70); }
@media (min-width: 860px) { .rules { grid-template-columns: 1fr 1fr; } }
@media (min-width: 860px) { }

/* CTA cuối + thanh dưới + footer trên canvas tối */
.v5 .ask { background: var(--navy-950); border-block: 1px solid var(--line); }
.v5 .ask h2 { color: var(--ink-100); }
.v5 .ask .lead { color: var(--ink-70); }
.v5 .ask .eyebrow { color: var(--teal-300); }
.v5 .qr-box .qr { border-color: rgba(255,255,255,.14); }
.v5 .mbar { background: rgba(4,18,47,.94); border-top-color: var(--line); }
.v5 .foot { border-top: 1px solid var(--line); }
.v5 .mt-note a { color: var(--teal-300); }

/* Điện thoại: Bống đứng cạnh điện thoại thay vì đè từ trên (V4 top:-84px chồng chữ khi font swap) */
@media (max-width: 767px) {
  .v5 .hero-grid { gap: 40px; }
  .v5 .bong-stage { position: static; width: 88px; margin: 0 auto 10px; }
  .v5 .bong-say { left: calc(50% + 48px); top: 0; }
}
/* Nav điện thoại: nút "Trao đổi bài toán" dài hơn "Nhắn Zalo" (V4) làm tên brand gãy 4 dòng ở 375 → < 640 ẩn nút nav (thanh dưới .mbar đã có CTA; /chat không có .mbar nên giữ), < 480 ẩn tagline nhỏ */
@media (max-width: 639px) { body:not([data-no-fab]) .top-cta { display: none; } }
@media (max-width: 479px) { .brand-name small { display: none; } }
/* Drawer chat trên canvas tối: chatbox nền trắng phải giữ chữ tối (body.v5 --fg là ink-70, trên trắng chỉ 1,7:1) */
.v5 .chatbox { color: var(--gray-900); border-color: var(--navy-100); }
.v5 .chat-form input { color: var(--gray-900); }
.v5 .chat-head, .v5 .chat-form { border-color: var(--navy-100); }
html:has(body.v5) { background: var(--navy-950); } /* overscroll iOS không loé trắng */

/* ===================== V6 (22/09 chiều) — "Storytelling 2.5D": tách vai Bống Work · Bống (dẫn đường) · Hermes (lớp vận hành) · trợ lý của khách. Chỉ body.v5 (index.html). Luật: CSS = KHUNG CUỐI (đã xếp, đã nối); js/story.js chỉ animate VÀO, tắt khi reduced-motion; scrub chỉ ≥ 1024. Không gradient, không bóng đen, không màu ngoài BRAND_KIT (audit docs/specs/2026-09-22-website-v6-storytelling-audit.md) ===================== */
.v5 .hero-clar { margin-top: 20px; max-width: 34em; padding-left: 14px; border-left: 2px solid var(--teal-500); font-size: 14.5px; line-height: 1.55; color: var(--ink-50); }
.depth-scene { perspective: 1200px; }

/* Thẻ nổi dùng chung (hero + #roi-rac) */
.floating-card { display: inline-flex; align-items: center; gap: 8px; background: var(--navy-800); border: 1px solid rgba(255,255,255,.14); border-radius: 12px; padding: 10px 14px; color: var(--ink-100); font: 600 14px/1.25 var(--font-sans); white-space: nowrap; will-change: transform; }
.floating-card svg { width: 18px; height: 18px; flex: none; color: var(--teal-300); }
.floating-card.fc-dash { border-style: dashed; border-color: rgba(255,255,255,.3); color: var(--ink-70); white-space: normal; }

/* Hero: bản đồ việc — mobile xếp phẳng (chip → Bống + bản tin), desktop 380×400 có đường nối */
.work-map { position: relative; }
.map-cards { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.map-cards .fc-dash { font-size: 13.5px; }
.map-lines { display: none; }
.map-foot { display: flex; align-items: flex-end; gap: 10px; margin-top: 14px; }
.map-out { flex: 1; min-width: 0; background: #fff; color: var(--gray-900); border-radius: 14px; border-bottom-left-radius: 6px; padding: 12px 14px; display: grid; gap: 6px; }
.map-out .tag { justify-self: start; color: var(--navy-800); border-color: var(--navy-200); background: var(--navy-50); }
.map-out p { font-size: 14px; line-height: 1.45; }
.v5 .bong-guide { position: relative; left: auto; top: auto; width: 96px; flex: none; margin: 0; }
.v5 .bong-guide .bong-say { left: 88px; top: -8px; max-width: 200px; }
@media (min-width: 860px) {
  .v5 .hero-grid { align-items: center; }
  .work-map { height: 400px; }
  .map-cards { display: block; }
  .map-cards .floating-card { position: absolute; }
  .fc-1 { left: 0; top: 0; }
  .fc-2 { left: 210px; top: 0; }
  .fc-3 { left: 30px; top: 90px; }
  .fc-4 { left: 240px; top: 88px; }
  .fc-5 { left: 118px; top: 172px; width: 160px; }
  .map-lines { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
  .map-lines path { fill: none; stroke: var(--teal-300); stroke-opacity: .38; stroke-width: 1; }
  .map-lines circle { fill: var(--teal-300); }
  .map-foot { position: absolute; left: -12px; right: 0; top: 262px; margin: 0; gap: 0; }
  .v5 .bong-guide { width: 130px; }
  .v5 .bong-guide .bong-say { left: 118px; top: -14px; max-width: 230px; }
}

/* #roi-rac: 5 thẻ rời rạc — CSS đã xếp hàng; JS scrub cho trôi vào (≥ 1024) */
.scatter { display: grid; gap: 14px; justify-items: stretch; }
.scatter-cards .floating-card { display: grid; grid-template-columns: 18px 1fr; align-items: center; gap: 6px 10px; padding: 14px; white-space: normal; }
.scatter-cards .floating-card b { font-size: 15px; }
.scatter-cards .floating-card small { grid-column: 2; font: 400 13.5px/1.45 var(--font-sans); color: var(--ink-70); }
.scatter-cards .fc-dash b { color: var(--ink-100); }
.scatter-bot { justify-self: center; width: min(100%, 420px); margin-top: 6px; }
@media (min-width: 900px) { .scatter-bot { margin-top: 16px; } }

/* #cach-lam: Bống dẫn đường trên đường nối 5 bước (desktop); mốc đang đọc sáng viền */
.workflow-path { position: relative; }
.path-guide { display: none; }
@media (min-width: 1000px) {
  .workflow-path { padding-top: 60px; }
  .path-guide { display: block; position: absolute; left: 0; right: 0; top: 0; height: 60px; pointer-events: none; }
  .path-guide .bong-mini { position: absolute; right: 8px; top: 6px; width: 64px; display: block; }
  .path-guide .bong-mini .bm2 { width: 64px; height: auto; display: block; }
  .flow-step { transition: border-color .25s; }
  .flow-step.is-cur { border-color: var(--teal-500); }
  .flow-step.is-cur .step-k { color: var(--teal-300); }
}
.layers-wrap .sect-head { margin-bottom: 0; }
.layers-wrap .note { margin-top: 14px; }
.layers-wrap .note a { color: var(--teal-300); font-weight: 600; }
.layers-wrap .note a::after { content: " →"; }
.system-layer .tag { font-size: 10.5px; padding: 5px 8px; }
@media (max-width: 479px) { .system-layer .tag { display: none; } } /* điện thoại: 6 nhãn lặp → giấu, câu điều kiện ở .note đã nói đủ (tiết kiệm ~180px) */
@media (min-width: 900px) {
}

/* #trong-ngay: 3 tình huống; bubble bot trên trang chủ ghi "Trợ lý" (không "Bống" — Bống chỉ dẫn đường) */
.v5 .msg.bong::before { content: "Trợ lý"; }
.v5 .demo .msg.tw .tw-line { font-size: 15px; }
@media (min-width: 1000px) { .v5 .demos-3 { grid-template-columns: repeat(3, 1fr); } }

/* #an-toan: mốc khoá — vòng teal trước số */
.v5 .rules li { grid-template-columns: 58px 1fr; }
.v5 .rules .pr-n::before { content: ""; display: inline-block; width: 9px; height: 9px; border: 1.5px solid var(--teal-500); border-radius: 50%; margin-right: 8px; vertical-align: 1px; }

/* In / tab nền: reveal phụ thuộc IntersectionObserver → khi in luôn hiện đủ */
@media print { .reveal, .floating-card, .system-layer { opacity: 1 !important; transform: none !important; } }

/* ==========================================================================
   V7 (22/09/2026) — brief v02: bảng hỏi Bống Khám Phá, 4 hướng bắt đầu,
   hộp ghi chú ranh giới/chi phí. Màu & font đều lấy từ token có sẵn.
   ========================================================================== */

/* Chỉ đọc bằng trình đọc màn hình */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- Hộp ghi chú (trang sáng) ---- */
.note-box { background: #fff; border: 1.5px solid var(--line); border-left: 3px solid var(--teal-500); border-radius: 14px; padding: 20px 22px; display: grid; gap: 8px; align-content: start; }
.note-box h3 { font-size: 17px; }
.note-box p { font-size: 15.5px; line-height: 1.6; color: var(--muted); max-width: 46em; }
.note-box p.note { font-size: 14px; }
.note-box-lg { padding: 24px 26px; gap: 12px; }
.notes2 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: clamp(24px, 3vw, 36px); }

/* ---- 4 hướng bắt đầu (trang chủ) ---- */
.ways { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.ways-3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.way { background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius); padding: 22px 20px; display: grid; gap: 8px; align-content: start; }
.way-k { font: 600 12.5px/1.5 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--teal-700); }
.way-p { font-size: 21px; font-weight: 800; letter-spacing: -.02em; color: var(--navy-900); }
.way p:not(.way-k):not(.way-p) { font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.way ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14.5px; line-height: 1.5; }
.way ul li { padding-left: 18px; position: relative; }
.way ul li::before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--teal-500); }
.way.hot { border: 2px solid var(--teal-500); }

/* ---- Thẻ gói: thêm dòng "cho ai" + danh sách không-bao-gồm ---- */
.plans-4 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.plan-for { font-size: 14.5px; line-height: 1.55; color: var(--navy-800); font-weight: 600; }
.plan-h-no { color: var(--gray-500); }
.plan-nos { color: var(--gray-500); font-size: 13.5px !important; }
.plan-nos li::before { background: var(--gray-300) !important; width: 8px !important; height: 8px !important; }

/* ---- Bảng so sánh 4 gói: ô chứa danh sách ---- */
.cmp4 td ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; line-height: 1.45; }
.cmp4 td ul li { padding-left: 14px; position: relative; }
.cmp4 td ul li::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--teal-500); }
.cmp4 tr.hot th[scope="row"] { color: var(--teal-700); }

/* ---- Bảng hỏi Bống Khám Phá ---- */
.quiz-qs { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; counter-reset: none; }
.quiz-q fieldset { border: 1.5px solid var(--line); border-radius: var(--radius); background: #fff; padding: 22px 20px; margin: 0; display: grid; gap: 14px; }
.quiz-q legend { padding: 0; font-size: clamp(17px, 2.2vw, 19px); font-weight: 700; letter-spacing: -.01em; color: var(--navy-900); display: block; width: 100%; }
.quiz-n { font: 600 12.5px/1 var(--font-mono); letter-spacing: .12em; color: var(--teal-700); margin-right: 8px; vertical-align: 2px; }
.quiz-opts { display: grid; gap: 10px; }
.quiz-opts label { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; min-height: 48px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; font-size: 15.5px; line-height: 1.45; transition: border-color .15s var(--ease-out), background .15s var(--ease-out); }
.quiz-opts label:hover { border-color: var(--teal-400); background: var(--teal-100); }
.quiz-opts input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--teal-600); cursor: pointer; }
.quiz-opts label:has(input:checked) { border-color: var(--teal-500); background: var(--teal-100); font-weight: 600; }
.quiz-opts label:focus-within { outline: 3px solid var(--teal-400); outline-offset: 2px; }
.quiz-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.quiz-err { margin-top: 12px; color: #a3212d; font-weight: 600; font-size: 15px; }

/* Kết quả */
.quiz-out { margin-top: clamp(32px, 4vw, 48px); padding-top: clamp(28px, 3.5vw, 40px); border-top: 2px solid var(--teal-500); display: grid; gap: 18px; }
.quiz-out:focus { outline: none; }
.quiz-out:focus-visible { outline: 3px solid var(--teal-400); outline-offset: 6px; border-radius: 6px; }
.quiz-ideas { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.quiz-idea { display: grid; grid-template-columns: 40px 1fr; gap: 14px; background: #fff; border: 1.5px solid var(--line); border-radius: 14px; padding: 20px; }
.quiz-idea.is-top { border: 2px solid var(--teal-500); }
.quiz-idea-n { font: 600 13px/1 var(--font-mono); color: var(--teal-700); padding-top: 5px; }
.quiz-idea h3 { font-size: 17.5px; }
.quiz-idea p { margin-top: 6px; font-size: 15.5px; line-height: 1.6; color: var(--muted); }
.quiz-idea-tag { font: 600 12.5px/1.4 var(--font-mono) !important; letter-spacing: .06em; text-transform: uppercase; color: var(--teal-700) !important; }
.quiz-next .eyebrow { color: var(--teal-700); }
.quiz-next h3 { font-size: clamp(19px, 2.4vw, 22px); }
.quiz-next .cta { margin-top: 6px; }
/* .link-arrow mặc định là chữ sáng (nền navy); trên trang sáng dùng bản chữ đậm */
.link-arrow-dark { color: var(--navy-800); }
.link-arrow-dark::after { color: var(--teal-600); }

@media (max-width: 520px) {
  .quiz-q fieldset { padding: 18px 16px; }
  .quiz-idea { grid-template-columns: 1fr; gap: 4px; }
  .quiz-acts .btn { width: 100%; justify-content: center; }
}

/* Vùng chạm footer trên điện thoại: link chữ cao 23px là quá nhỏ để bấm bằng ngón.
   Nới đệm dọc để mỗi link đạt ~44px mà không đổi bố cục hàng ngang ở desktop. */
@media (max-width: 767px) {
  .foot a:not(.brand) { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 2px; }
}