/* ==========================================================================
   SỔ CÂN TÔM — CSS dùng chung cho mọi trang.
   Màu / cỡ chữ / bo góc lấy đúng DESIGN-SYSTEM/tokens.css (đo từ trang thật).
   Không framework, không gọi mạng ngoài. Điện thoại trước, máy tính sau.
   ========================================================================== */

/* ---------- Chữ: Be Vietnam Pro (offline, 15 file trong assets/fonts) ---------- */
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/BeVietnamPro-400-vietnamese.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/BeVietnamPro-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/BeVietnamPro-400-latin.woff2') format('woff2')}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:500;font-display:swap;
  src:url('assets/fonts/BeVietnamPro-500-vietnamese.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:500;font-display:swap;
  src:url('assets/fonts/BeVietnamPro-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:500;font-display:swap;
  src:url('assets/fonts/BeVietnamPro-500-latin.woff2') format('woff2')}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;
  src:url('assets/fonts/BeVietnamPro-600-vietnamese.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/BeVietnamPro-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;
  src:url('assets/fonts/BeVietnamPro-600-latin.woff2') format('woff2')}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:700;font-display:swap;
  src:url('assets/fonts/BeVietnamPro-700-vietnamese.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/BeVietnamPro-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:700;font-display:swap;
  src:url('assets/fonts/BeVietnamPro-700-latin.woff2') format('woff2')}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:800;font-display:swap;
  src:url('assets/fonts/BeVietnamPro-800-vietnamese.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/BeVietnamPro-800-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:800;font-display:swap;
  src:url('assets/fonts/BeVietnamPro-800-latin.woff2') format('woff2')}

/* ---------- Token ---------- */
:root{
  --xanh:#1E5EFF; --xanh-dam:#003087; --xanh-nhat:#DCE7FF; --xanh-nhat-2:#AFC6F5;
  --xanh-nen:#EAF0FF; --xanh-nhan:#0B4ED8;
  --muc:#0B1526; --chu:#33405A; --chu-mo:#5A6678; --chu-mo-2:#8995AC;
  --duong:#E8ECF1; --duong-dam:#C5CEDC; --nen:#F5F7FB; --the:#FFFFFF;
  --tien:#0F7A37; --vang:#FFC53D; --vang-chu:#3A2A00; --vang-nen:#FFF4DE;
  --do-nen:#FDECEC; --do-chu:#B42318;
  --bo-nut:14px; --bo-the:18px; --bo-nhan:999px;
  --bong-the:0 1px 2px rgba(11,21,38,.04),0 8px 24px rgba(11,21,38,.06);
  --bong-nut:0 8px 22px rgba(30,94,255,.32);
}

/* ---------- Nền chung ---------- */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0;overflow-x:hidden;overscroll-behavior-y:none}
body{-webkit-tap-highlight-color:rgba(30,94,255,.15);-webkit-font-smoothing:antialiased}
body{background:var(--nen);color:var(--chu);
  font-family:'Be Vietnam Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:17px;line-height:1.65;text-wrap:pretty}
img{max-width:100%;height:auto;display:block}
a{color:var(--xanh-dam);text-decoration:none}
a:hover{color:var(--xanh)}
h1,h2,h3,h4{color:var(--muc);margin:0;letter-spacing:-.6px}
h1{font-size:36px;font-weight:800;line-height:1.06;letter-spacing:-1.2px}
h2{font-size:28px;font-weight:800;line-height:1.14;letter-spacing:-.8px}
h3{font-size:22px;font-weight:800;line-height:1.2;letter-spacing:-.4px}
p{margin:0}
ul{margin:0}
:focus-visible{outline:3px solid var(--xanh);outline-offset:2px;border-radius:6px}

.khung{max-width:1120px;margin:0 auto;padding:0 20px}
/* Khối chữ hẹp vẫn bám đúng mép trái của thanh menu, không bị thụt vô giữa */
.khung-hep{max-width:1120px;margin:0 auto;padding:0 20px}
.khung-hep>*{max-width:760px}
.giua .khung-hep>*,.cau-chuyen .khung-hep>*,.cam-on .khung-hep>*{margin-left:auto;margin-right:auto}
.giua{text-align:center}
.an{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.neo{display:block;position:relative;top:-72px;visibility:hidden}

/* ---------- Nút ---------- */
.nut{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;
  min-height:52px;padding:14px 24px;border-radius:var(--bo-nut);
  font-family:inherit;font-size:17px;font-weight:700;border:0;cursor:pointer;text-align:center}
.nut-xanh{background:var(--xanh);color:#fff;box-shadow:var(--bong-nut)}
.nut-xanh:hover{background:var(--xanh-nhan);color:#fff}
.nut-vien{background:var(--the);color:var(--xanh-dam);border:1.5px solid var(--duong-dam)}
.nut-vien:hover{border-color:var(--xanh);color:var(--xanh)}
.nut-vang{background:var(--vang);color:var(--vang-chu);box-shadow:0 10px 24px rgba(255,197,61,.34)}
.nut-vang:hover{color:var(--vang-chu);background:#F5B92C}
.nut-trang{background:#fff;color:var(--muc)}
.nut-trang:hover{color:var(--muc);background:#EEF2F9}
.nut-nho{min-height:48px;padding:11px 18px;font-size:16px}

/* Nút chợ (App Store / Google Play) */
.hang-nut{display:flex;flex-wrap:wrap;gap:12px}
.nut-cho{display:inline-flex;align-items:center;gap:10px;background:var(--muc);color:#fff;
  padding:11px 18px;border-radius:var(--bo-nut);min-height:56px}
.nut-cho:hover{background:#1a2740;color:#fff}
.nut-cho small{display:block;font-size:11px;color:var(--xanh-nhat-2);line-height:1.2}
.nut-cho b{display:block;font-size:18px;font-weight:700;line-height:1.2;white-space:nowrap}
.nut-cho-trang{background:#fff}
.nut-cho-trang:hover{background:#EEF2F9}
.nut-cho-trang small{color:var(--chu-mo)}
.nut-cho-trang b{color:var(--muc)}

/* ---------- Thẻ, nhãn ---------- */
.the{background:var(--the);border:1px solid var(--duong);border-radius:var(--bo-the)}
.nhan{display:inline-block;background:var(--xanh-nen);color:var(--xanh-dam);
  font-size:14px;font-weight:700;letter-spacing:.4px;padding:7px 14px;border-radius:var(--bo-nhan)}
.nhan-do{background:var(--do-nen);color:var(--do-chu)}
.nhan-tt{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:700;white-space:nowrap;
  padding:7px 14px;border-radius:var(--bo-nhan);border:1px solid transparent}
.nhan-tt::before{content:"";width:10px;height:10px;border-radius:50%;flex:none}
.tt-da-len-cho{background:#E4F4E4;border-color:#BFE6C2;color:#0B5B27}
.tt-da-len-cho::before{background:var(--tien)}
.tt-dang-cho-duyet{background:var(--vang-nen);border-color:#F2D79A;color:#6B4E00}
.tt-dang-cho-duyet::before{background:#E8910C}
.tt-dang-lam{background:#EFF2F7;border-color:var(--duong-dam);color:#3E4A60}
.tt-dang-lam::before{background:#8995AC;box-shadow:inset 0 0 0 2px #fff}

/* ---------- Thanh trên ---------- */
.thanh-tren{position:sticky;top:0;z-index:40;background:rgba(245,247,251,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--duong)}
.thanh-tren .khung{display:flex;align-items:center;gap:12px;min-height:64px}
.hieu{display:flex;align-items:center;gap:10px;min-height:48px;font-size:18px;font-weight:800;
  color:var(--muc);letter-spacing:-.4px;white-space:nowrap;line-height:1.15}
.hieu img{border-radius:9px;width:34px;height:34px}
.menu-may{display:none}
.gat-nn{display:flex;background:#EDF1F8;border-radius:10px;padding:3px}
.gat-nn a,.gat-nn span{padding:8px 11px;border-radius:8px;font-size:13px;font-weight:700;color:var(--chu-mo)}
.gat-nn .on{background:var(--the);color:var(--muc);box-shadow:inset 0 0 0 1px var(--duong-dam)}
.gat-nn .mo{color:var(--chu-mo-2)}
.bagach{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;background:none;border:1.5px solid var(--duong-dam);border-radius:12px;
  background:var(--the);cursor:pointer;flex:none}
.bagach span{display:block;width:22px;height:2.5px;background:var(--muc);border-radius:2px;position:relative}
.bagach span::before,.bagach span::after{content:"";position:absolute;left:0;width:22px;height:2.5px;background:var(--muc);border-radius:2px}
.bagach span::before{top:-7px}
.bagach span::after{top:7px}
.menu-dt{display:none;border-top:1px solid var(--duong);background:var(--the)}
.menu-dt.mo{display:block}
.menu-dt a{display:flex;align-items:center;min-height:56px;padding:8px 20px;
  font-size:19px;font-weight:600;color:var(--muc);border-bottom:1px solid var(--duong)}
.menu-dt a[aria-current]{color:var(--xanh)}
.menu-dt .day{padding:16px 20px;display:flex;flex-direction:column;gap:10px}
.menu-dt .nn{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--chu-mo)}

/* ---------- Trang chủ: hero ---------- */
.hero{padding:44px 0 8px}
.hero .khung{display:flex;flex-direction:column;gap:32px}
.hero p.dan{font-size:18px;color:var(--chu);margin-top:18px;max-width:460px}
.hero .ghi-chu{font-size:15px;color:var(--chu-mo);margin-top:16px}
.hero-anh{position:relative;align-self:center}
.hero-anh img{width:min(300px,74vw);border-radius:40px;border:1px solid var(--duong);
  box-shadow:0 30px 70px rgba(11,21,38,.24);position:relative}
.hero-anh::before{content:"";position:absolute;inset:-24px;border-radius:50%;
  background:radial-gradient(circle at 60% 40%,rgba(30,94,255,.16),transparent 70%)}

/* ---------- Đoạn quay ngoài bãi ---------- */
.khoi-video{padding:28px 0 8px}
.khung-video{position:relative;margin:0 auto;width:min(300px,74vw);border-radius:28px;overflow:hidden;
  background:var(--muc);box-shadow:0 30px 70px rgba(11,21,38,.26);border:1px solid var(--duong)}
.khung-video video{display:block;width:100%;height:auto;background:var(--muc)}
.khung-video figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;
  font-size:13px;line-height:1.4;color:#fff;text-align:center;
  background:linear-gradient(to top,rgba(11,21,38,.8),transparent)}
.nut-chay{position:absolute;inset:0;width:100%;border:0;background:rgba(11,21,38,.28);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  font-family:inherit;color:#fff}
.nut-chay .tam-giac{width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.92);
  display:grid;place-items:center;box-shadow:0 10px 30px rgba(11,21,38,.4)}
.nut-chay .tam-giac::before{content:"";border-left:22px solid var(--muc);border-top:14px solid transparent;
  border-bottom:14px solid transparent;margin-left:6px}
.nut-chay .chu{font-size:16px;font-weight:700;text-shadow:0 2px 10px rgba(11,21,38,.6)}
.nut-chay[hidden]{display:none!important}
.nut-tieng{position:absolute;right:10px;top:10px;min-height:44px;padding:8px 14px;border:0;
  border-radius:var(--bo-nhan);background:rgba(11,21,38,.62);color:#fff;font-family:inherit;
  font-size:14px;font-weight:700;cursor:pointer}
.nut-tieng:hover{background:rgba(11,21,38,.82)}

/* ---------- Ba bước ---------- */
.ba-buoc{padding:48px 0 8px}
.luoi-buoc{display:grid;grid-template-columns:1fr;gap:14px;margin-top:8px}
.luoi-buoc .the{padding:20px 18px;position:relative}
.luoi-buoc img{width:100%;max-width:220px;margin:0 auto 14px;border-radius:14px}
.luoi-buoc .so-buoc{width:34px;height:34px;border-radius:50%;background:var(--xanh);color:#fff;
  display:grid;place-items:center;font-size:17px;font-weight:800}
.luoi-buoc h3{font-size:20px;margin-top:10px}
.luoi-buoc .the p:last-child{font-size:16px;color:var(--chu);margin-top:8px;line-height:1.55}

/* ---------- Dành cho thương lái ---------- */
.cho-lai{padding:40px 0 8px}
.cho-lai .the{padding:26px 20px;box-shadow:var(--bong-the)}
.cho-lai h2{font-size:26px;margin-top:12px;max-width:640px}
.cho-lai .gach{margin-top:20px}

/* ---------- Gói năm ---------- */
.goi-nam{font-size:14px;line-height:1.55;color:#BBD0FF;margin-top:16px;text-align:center;z-index:1}
.goi-nam b{color:#fff}

/* ---------- 78 ≠ 79 ---------- */
.doi-chieu{padding:44px 0 8px}
.doi-chieu .khung{display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center}
.so-hang{display:flex;align-items:baseline;justify-content:center;gap:18px}
.so-hang .so{font-size:60px;font-weight:800;color:var(--muc);line-height:1;
  letter-spacing:-2px;font-variant-numeric:tabular-nums}
.so-hang .ten{font-size:14px;color:var(--chu-mo);margin-top:8px}
.so-hang .khac{font-size:40px;font-weight:800;color:var(--xanh)}
.doi-chieu .loi{max-width:420px;font-size:19px;font-weight:600;color:var(--chu);line-height:1.5}

/* ---------- Câu chuyện ---------- */
.cau-chuyen{padding:56px 0 8px}
.cau-chuyen h2{text-align:center;text-wrap:balance}
.cau-chuyen .doan{max-width:720px;margin:0 auto;padding:24px 20px 0;display:flex;flex-direction:column;gap:18px}
.cau-chuyen .doan p{font-size:17px;line-height:1.72}
.trich{text-align:center;margin:36px auto 0;max-width:680px;padding:0 20px;
  font-size:22px;line-height:1.42;font-weight:700;color:var(--muc);text-wrap:balance;letter-spacing:-.4px}

/* ---------- Tính năng ---------- */
.dau-muc{padding:56px 0 0;text-align:center}
.dau-muc p{font-size:18px;margin-top:12px}
.tu-noi-dau{display:grid;grid-template-columns:1fr;gap:12px;margin-top:28px}
.tu-noi-dau .the{padding:20px 18px}
.tu-noi-dau .than{font-size:18px;font-weight:700;color:var(--muc);line-height:1.4;letter-spacing:-.3px}
.tu-noi-dau .lam{font-size:16px;color:var(--chu);line-height:1.55;margin-top:10px;
  padding-top:12px;border-top:1px solid var(--duong)}
.tinh-nang{padding:28px 0}
.tinh-nang .khung{display:flex;flex-direction:column;gap:28px;align-items:center}
.tinh-nang img{width:min(300px,72vw);border-radius:36px;border:1px solid var(--duong);
  box-shadow:0 24px 56px rgba(11,21,38,.18)}
.tinh-nang h3{margin-top:14px}
.tinh-nang .loi{font-size:17px;line-height:1.6;margin-top:12px}
.gach{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-direction:column;gap:12px}
.gach li{display:flex;gap:10px;font-size:17px;color:var(--chu);line-height:1.55;align-items:flex-start}
.gach svg{flex:none;margin-top:4px}

/* ---------- Khối dẫn qua "Bà con nói gì" ---------- */
.dan-loi{padding:48px 0}
.dan-loi .the{padding:28px 22px;text-align:center;box-shadow:var(--bong-the)}
.dan-loi p{font-size:17px;margin:12px auto 22px;max-width:520px}
.dan-loi .anh-moi{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:22px 0 6px}
.dan-loi .anh-moi img{width:min(300px,100%);border-radius:12px;border:1px solid var(--duong);background:var(--nen)}

/* ---------- Bảng giá ---------- */
.bang-gia{background:var(--the);border-top:1px solid var(--duong);border-bottom:1px solid var(--duong);padding:56px 0}
.the-gia{display:flex;flex-direction:column;gap:24px;margin-top:36px;text-align:left}
.goi{background:var(--the);border:1px solid var(--duong);border-radius:20px;padding:24px;
  display:flex;flex-direction:column}
.goi .ten{font-size:15px;font-weight:800;color:var(--muc)}
.goi .gia{font-size:38px;font-weight:800;color:var(--muc);letter-spacing:-1px;margin-top:8px;line-height:1.1}
.goi .gia span{font-size:15px;font-weight:600;color:var(--chu-mo);letter-spacing:0}
.goi .ghi{font-size:15px;color:var(--chu-mo);margin-top:4px}
.goi .ke{height:1px;background:var(--duong);margin:18px 0}
.goi ul,.goi-pro ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px;flex:1;text-align:left}
.goi li,.goi-pro li{display:flex;gap:9px;font-size:16px;color:var(--chu);line-height:1.5;align-items:flex-start}
.goi li svg,.goi-pro li svg{flex:none;margin-top:4px}
.goi-pro .trong{text-align:left}
.goi .nut{margin-top:22px;width:100%}
.goi-pro{position:relative;border:0;padding:2px;background:linear-gradient(160deg,#5B8BFF,#003087);
  border-radius:22px;box-shadow:0 22px 50px rgba(0,48,135,.3)}
.goi-pro .trong{background:linear-gradient(165deg,#0B4ED8 0%,#003087 100%);border-radius:20px;
  padding:28px 24px;display:flex;flex-direction:column;height:100%;position:relative;overflow:hidden}
.goi-pro .ten,.goi-pro .gia{color:#fff}
.goi-pro .ghi{color:#BBD0FF;font-weight:600}
.goi-pro .them{font-size:15px;color:var(--xanh-nhat);line-height:1.5;margin-top:12px}
.goi-pro .ke{background:rgba(255,255,255,.18)}
.goi-pro li{color:#fff;font-weight:500}
.goi-pro .nhan-tiet-kiem{position:absolute;top:-14px;left:50%;transform:translateX(-50%);z-index:2;
  display:inline-flex;align-items:center;gap:5px;background:var(--vang);color:var(--vang-chu);
  font-size:13px;font-weight:800;padding:7px 14px;border-radius:var(--bo-nhan);
  box-shadow:0 6px 16px rgba(255,197,61,.4);white-space:nowrap}
.khong-qc{display:flex;align-items:center;gap:12px;margin:32px auto 0;max-width:520px;text-align:left;
  background:#E4F4E4;border:1px solid #BFE6C2;border-radius:16px;padding:14px 16px}
.khong-qc .tron{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
  border-radius:50%;background:var(--tien);flex:none}
.khong-qc b{display:block;font-size:16px;font-weight:800;color:#0B5B27}
.khong-qc small{display:block;font-size:13px;color:var(--chu);margin-top:1px}
.nhac-gioi-han{margin-top:16px;background:var(--vang-nen);border:1px solid #F2D79A;border-radius:12px;
  padding:12px 14px;font-size:15px;line-height:1.5;color:#5B4200}
.vi-sao-pro{display:grid;grid-template-columns:1fr;gap:12px;margin-top:32px;text-align:left}
.vi-sao-pro .the{padding:20px 18px}
.vi-sao-pro .so-lon{font-size:30px;font-weight:800;color:var(--muc);letter-spacing:-1px;line-height:1.1}
.vi-sao-pro p+p{margin-top:8px;font-size:16px;line-height:1.55;color:var(--chu)}
.ghi-gia{font-size:14px;color:var(--chu-mo);margin:22px auto 0;max-width:620px;line-height:1.5}

/* ---------- Bảng so sánh (cuộn ngang trong khung riêng) ---------- */
.so-sanh{max-width:860px;margin:44px auto 0}
.so-sanh h3{text-align:center;margin-bottom:16px}
.cuon-ngang{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;border:1px solid var(--duong);
  border-radius:var(--bo-the);background:var(--the)}
.bang{width:100%;min-width:560px;border-collapse:collapse;font-size:16px;text-align:left}
.bang thead th{background:var(--xanh-dam);color:#fff;font-size:14px;font-weight:700;padding:14px 16px;vertical-align:bottom}
.bang thead th small{display:block;font-size:11px;font-weight:600;color:#8FB0F5;margin-top:2px}
.bang thead th:first-child{color:var(--xanh-nhat-2);font-weight:700}
.bang th.cot,.bang td.cot{width:120px;text-align:center}
.bang .nhom th{background:var(--nen);border-top:1px solid var(--duong);border-bottom:1px solid var(--duong);
  font-size:12.5px;font-weight:800;color:var(--chu-mo);letter-spacing:.4px;padding:10px 16px}
.bang tbody td{padding:13px 16px;border-bottom:1px solid #EEF2F7;color:var(--chu);vertical-align:top}
.bang td.cot{font-weight:700;color:var(--muc);font-size:15px}
.bang td.cot.khong{color:var(--chu-mo-2);font-weight:600}
.bang td.cot .co{color:var(--tien);font-size:18px}
.ghi-cuon{font-size:14px;color:var(--chu-mo);margin-top:10px;text-align:center}

/* ---------- Hỏi đáp ---------- */
.hoi-dap{padding:56px 0}
.hoi-dap h2{margin-bottom:24px}
.hoi-dap .the{padding:20px 22px;margin-bottom:12px}
.hoi-dap .cau{font-size:18px;font-weight:700;color:var(--muc)}
.hoi-dap .tra{font-size:16px;line-height:1.6;margin-top:8px}

/* ---------- Dải góp ý lớn ---------- */
.dai-gop-y{background:linear-gradient(165deg,#0B4ED8,#003087);color:#fff;padding:52px 0}
.dai-gop-y .khung{position:relative;z-index:1}
.dai-gop-y h2{color:#fff;text-wrap:balance;max-width:640px}
.dai-gop-y p{font-size:18px;color:var(--xanh-nhat);margin-top:16px;max-width:620px;line-height:1.6}
.dai-gop-y .hang-nut{margin-top:26px;flex-direction:column;align-items:stretch}
.dai-gop-y .hang-nut .nut{width:100%}
.dai-gop-y a.nut-vien{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.dai-gop-y a.nut-vien:hover{background:rgba(255,255,255,.12);color:#fff;border-color:#fff}

/* ---------- Khối tải app + chân trang ---------- */
.tai-app{background:var(--xanh-dam);padding:56px 0;text-align:center}
.tai-app h2{color:#fff;margin-top:16px}
.tai-app p{font-size:17px;color:var(--xanh-nhat-2);margin:12px auto 0;max-width:520px;line-height:1.5}
.tai-app .hang-nut{justify-content:center;margin-top:24px}
.tai-app img.dau-app{margin:0 auto;width:66px;height:66px}

.chan{background:var(--muc);color:#fff;padding:32px 0 calc(96px + env(safe-area-inset-bottom))}
.chan .lien-ket{display:flex;flex-wrap:wrap;gap:8px 20px;margin-bottom:16px}
.chan a{color:#fff;font-size:16px;opacity:.85;min-height:44px;display:inline-flex;align-items:center}
.chan a:hover{color:#fff;opacity:1;text-decoration:underline}
.chan small{font-size:14px;color:rgba(255,255,255,.6);display:block;line-height:1.6}

/* ---------- Nút nổi Góp ý + tấm trượt ---------- */
.nut-noi{position:fixed;right:16px;bottom:calc(20px + env(safe-area-inset-bottom));z-index:50;
  display:inline-flex;align-items:center;gap:8px;min-height:56px;padding:14px 22px;
  background:var(--xanh);color:#fff;font-family:inherit;font-size:17px;font-weight:700;white-space:nowrap;
  border:0;border-radius:var(--bo-nhan);box-shadow:0 10px 28px rgba(11,21,38,.28);cursor:pointer;text-decoration:none}
.nut-noi:hover{background:var(--xanh-nhan);color:#fff}
.man{position:fixed;inset:0;z-index:60;background:rgba(11,21,38,.55);display:none}
.man.mo{display:block}
.tam{position:fixed;left:0;right:0;bottom:0;z-index:61;background:var(--the);overscroll-behavior:contain;
  border-radius:22px 22px 0 0;padding:22px 20px calc(24px + env(safe-area-inset-bottom));
  max-height:90vh;overflow-y:auto;display:none;box-shadow:0 -10px 40px rgba(11,21,38,.25)}
.tam.mo{display:block;animation:truot-len .22s ease-out}
@keyframes truot-len{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
.tam .tay{width:44px;height:5px;border-radius:3px;background:var(--duong-dam);margin:0 auto 14px}
.dong{position:absolute;top:14px;right:14px;width:44px;height:44px;border:0;background:none;
  font-size:26px;line-height:1;color:var(--chu-mo);cursor:pointer;border-radius:12px}
.dong:hover{background:var(--nen);color:var(--muc)}

/* ---------- Form góp ý ---------- */
.form-gy{max-width:560px}
.form-gy h2,.form-gy h3{margin-bottom:8px}
.form-gy .dan{font-size:17px;margin-bottom:18px}
.form-gy label{display:block;font-size:16px;font-weight:700;color:var(--muc);margin:16px 0 7px}
.form-gy label em{font-style:normal;font-weight:500;color:var(--chu-mo)}
.form-gy input,.form-gy textarea{width:100%;font-family:inherit;font-size:17px;color:var(--muc);
  background:var(--nen);border:1.5px solid var(--duong-dam);border-radius:12px;padding:14px 16px;min-height:54px}
.form-gy input:focus,.form-gy textarea:focus{outline:3px solid var(--xanh-nhat);border-color:var(--xanh)}
.form-gy textarea{min-height:132px;resize:vertical;line-height:1.5}
.form-gy button[type=submit]{width:100%;margin-top:20px;min-height:58px;font-size:18px}
.form-gy .rieng-tu{font-size:14px;color:var(--chu-mo);margin-top:14px;line-height:1.55}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.nut-phu{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.nut-phu .nut{width:100%}

/* ---------- Trang Cập nhật: dòng thời gian ---------- */
.dau-trang{padding:36px 0 8px}
.dau-trang h1{margin-top:10px}
.dau-trang .dan{font-size:18px;margin-top:14px;max-width:620px}
.ds-ban{padding:24px 0 8px}
.dau-nhom{font-size:22px;letter-spacing:-.4px;margin-top:36px;display:flex;align-items:center;gap:10px}
.dau-nhom::before{content:"";width:12px;height:12px;border-radius:50%;flex:none}
.nhom-sap-toi::before{background:var(--xanh);box-shadow:0 0 0 4px var(--xanh-nhat)}
.nhom-hien-tai::before{background:var(--tien);box-shadow:0 0 0 4px #D7EFDD}
.nhom-da-qua::before{background:var(--duong-dam)}
.phu-nhom{font-size:16px;color:var(--chu-mo);margin-top:8px;line-height:1.55}
.doc-thoi-gian{position:relative;margin-top:18px;padding-left:22px}
.doc-thoi-gian::before{content:"";position:absolute;left:5px;top:14px;bottom:14px;width:2px;background:var(--duong)}
.moc{position:relative;background:var(--the);border:1px solid var(--duong);border-radius:var(--bo-the);
  padding:20px 18px;margin-bottom:14px;box-shadow:var(--bong-the)}
.moc::before{content:"";position:absolute;left:-22px;top:26px;width:12px;height:12px;border-radius:50%;
  background:var(--duong-dam);border:3px solid var(--nen);box-sizing:content-box}
.moc-sap-toi{border:2px solid var(--xanh);box-shadow:0 10px 30px rgba(30,94,255,.14)}
.moc-sap-toi::before{background:var(--xanh)}
.moc-hien-tai{border:2px solid #BFE6C2}
.moc-hien-tai::before{background:var(--tien)}
.moc-ngay{font-size:13.5px;font-weight:700;letter-spacing:.4px;color:var(--chu-mo);text-transform:uppercase}
.moc h3{font-size:22px;margin-top:6px}
.moc .phu-de{font-size:16px;color:var(--chu-mo);margin-top:8px;line-height:1.55}
.moc ul{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-direction:column;gap:11px}
.moc li{display:flex;gap:10px;font-size:17px;color:var(--chu);line-height:1.55}
.moc li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--xanh-nhat-2);flex:none;margin-top:9px}
.moc-sap-toi li::before,.moc-hien-tai li::before{background:var(--xanh)}
.moc .ky-thuat{font-size:14px;color:var(--chu-mo-2);margin-top:16px}
.ban-noi-bat{position:relative;overflow:hidden;margin:28px 0 8px;padding:32px 22px;
  border-radius:26px;color:#fff;background:linear-gradient(165deg,#0B4ED8 0%,#003087 100%);
  box-shadow:0 26px 60px rgba(0,48,135,.34)}
.ban-noi-bat::after{content:"";position:absolute;width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.16),transparent 70%);top:-150px;right:-110px}
.ban-noi-bat>*{position:relative;z-index:1}
.ban-noi-bat .nhan-nb{font-size:13px;font-weight:800;letter-spacing:1.4px;color:var(--xanh-nhat-2)}
.ban-noi-bat .so-ban{font-size:64px;font-weight:800;line-height:1;letter-spacing:-3px;margin-top:14px;
  font-variant-numeric:tabular-nums}
.ban-noi-bat .ten-mark{display:inline-block;margin-top:12px;background:var(--vang);color:var(--vang-chu);
  font-size:14px;font-weight:800;letter-spacing:.5px;padding:6px 14px;border-radius:var(--bo-nhan)}
.ban-noi-bat h2{color:#fff;font-size:30px;margin-top:12px}
.ban-noi-bat .phu-de{font-size:17px;color:var(--xanh-nhat);margin-top:12px;line-height:1.55;max-width:560px}
.ban-noi-bat .ngay-nb{display:inline-flex;align-items:center;gap:8px;margin-top:18px;
  background:rgba(255,255,255,.14);border-radius:var(--bo-nhan);padding:8px 16px;font-size:15px;font-weight:700}
.ban-noi-bat ul{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-direction:column;gap:12px}
.ban-noi-bat li{display:flex;gap:10px;font-size:17px;line-height:1.55;color:#EAF0FF}
.ban-noi-bat li::before{content:"";width:7px;height:7px;border-radius:50%;background:#7DE0A6;flex:none;margin-top:9px}
.ban-noi-bat .hang-nut{margin-top:26px}
.con-so{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:16px}
.con-so .the{padding:16px 14px}
.con-so b{display:block;font-size:26px;font-weight:800;color:var(--muc);letter-spacing:-1px}
.con-so span{display:block;font-size:15px;color:var(--chu-mo);margin-top:4px;line-height:1.4}
.nhac{font-size:16px;color:var(--chu-mo);padding:20px 0 0}

/* ---------- Trang Bà con nói gì ---------- */
.tab{display:flex;gap:8px;background:#EDF1F8;padding:5px;border-radius:16px;margin:22px 0 0}
.tab button{flex:1;min-height:52px;border:0;background:none;border-radius:12px;
  font-family:inherit;font-size:17px;font-weight:700;color:var(--chu-mo);cursor:pointer;padding:8px 6px}
.tab button[aria-selected=true]{background:var(--the);color:var(--muc);box-shadow:var(--bong-the)}
.loc{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.loc button{min-height:48px;padding:10px 16px;border-radius:var(--bo-nhan);
  border:1.5px solid var(--duong-dam);background:var(--the);font-family:inherit;
  font-size:16px;font-weight:600;color:var(--chu);cursor:pointer}
.loc button[aria-pressed=true]{background:var(--muc);border-color:var(--muc);color:#fff}
.luoi{display:grid;grid-template-columns:1fr;gap:16px;margin-top:22px}
.the-anh{padding:0;overflow:hidden;box-shadow:var(--bong-the);text-align:left;
  border:1px solid var(--duong);background:var(--the);border-radius:var(--bo-the);cursor:zoom-in;
  font-family:inherit;width:100%;display:block}
.the-anh img{width:100%;background:var(--nen)}
.the-anh .duoi{padding:14px 16px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.the-anh .nguon,.the-gy .nguon{font-size:14px;font-weight:700;color:var(--xanh-dam);background:var(--xanh-nen);
  padding:5px 11px;border-radius:var(--bo-nhan)}
.the-anh .ngay{font-size:14px;color:var(--chu-mo)}
.the-gy{padding:16px;box-shadow:var(--bong-the)}
.the-gy img{width:100%;border-radius:12px;border:1px solid var(--duong);cursor:zoom-in;background:var(--nen)}
.the-gy .ai{font-size:18px;font-weight:800;color:var(--muc);margin-top:14px}
.the-gy .huy{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.huy-hieu{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;
  padding:6px 11px;border-radius:var(--bo-nhan);background:var(--vang-nen);color:var(--vang-chu)}
.huy-hieu.lam{background:var(--xanh-nen);color:var(--xanh-dam)}
.the-gy .da-thanh{margin-top:12px;font-size:16px;line-height:1.55}
.the-gy .da-thanh b{color:var(--muc)}
.trong{text-align:center;padding:36px 22px;box-shadow:var(--bong-the)}
.trong h3{margin-bottom:10px}
.trong p{font-size:17px;max-width:460px;margin:0 auto 20px}
.rieng-tu-khoi{margin:40px 0 0;padding:22px 20px;background:var(--vang-nen);
  border:1px solid #F2D79A;border-radius:var(--bo-the)}
.rieng-tu-khoi h3{color:#5B4200;font-size:20px}
.rieng-tu-khoi ul{margin:14px 0 0;padding-left:22px;display:flex;flex-direction:column;gap:8px}
.rieng-tu-khoi li{font-size:16px;color:#4A3A10;line-height:1.55}

/* ---------- Xem ảnh lớn ---------- */
.den{position:fixed;inset:0;z-index:70;background:rgba(11,21,38,.9);display:none;
  align-items:center;justify-content:center;padding:20px}
.den.mo{display:flex}
.den img{max-width:100%;max-height:80vh;border-radius:12px}
.den figcaption{color:#DCE7FF;font-size:15px;text-align:center;margin-top:14px}
.den .dong{top:12px;right:12px;color:#fff;font-size:32px;position:fixed;width:52px;height:52px}
.den .dong:hover{background:rgba(255,255,255,.15);color:#fff}

/* ---------- Trang cảm ơn ---------- */
.cam-on{padding:56px 0;text-align:center}
.cam-on .tron-lon{width:88px;height:88px;border-radius:50%;background:#E4F4E4;
  display:grid;place-items:center;margin:0 auto 22px}
.cam-on p{font-size:18px;margin:16px auto 0;max-width:520px}
.cam-on .hang-nut{justify-content:center;margin-top:28px}

/* ---------- Chuyển động nhẹ ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ==========================  MÁY TÍNH  ========================== */
@media (min-width:720px){
  body{font-size:18px}
  h1{font-size:56px;letter-spacing:-2px}
  h2{font-size:38px;letter-spacing:-1.2px}
  h3{font-size:28px}
  .neo{top:-80px}
  .bagach{display:none}
  .menu-dt{display:none!important}
  .menu-may{display:flex;align-items:center;gap:22px;margin-left:auto}
  .menu-may{gap:18px}
  .menu-may a.muc{font-size:15px;font-weight:600;color:var(--chu);white-space:nowrap}
  .nhan{white-space:nowrap}
  .menu-may a.muc[aria-current]{color:var(--xanh)}
  .thanh-tren .khung{min-height:68px}
  .hero{padding:72px 0 24px}
  .hero .khung{flex-direction:row;align-items:center;gap:48px}
  .hero .chu{flex:1;min-width:340px}
  .hero-anh img{width:322px;border-radius:44px}
  .so-hang .so{font-size:78px;letter-spacing:-3px}
  .so-hang .khac{font-size:50px}
  .doi-chieu .khung{flex-direction:row;justify-content:center;gap:40px;text-align:left}
  .doi-chieu .loi{font-size:21px}
  .tu-noi-dau{grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
  .tu-noi-dau .the{padding:24px 22px}
  .tinh-nang .khung{flex-direction:row;gap:56px;align-items:center}
  .tinh-nang .chu{flex:1;min-width:320px}
  .tinh-nang.dao .khung{flex-direction:row-reverse}
  .the-gia{flex-direction:row;justify-content:center;align-items:stretch;gap:20px}
  .goi{width:296px}
  .goi-pro{width:340px;transform:translateY(-14px)}
  .vi-sao-pro{grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
  .vi-sao-pro .the{padding:24px 22px}
  .vi-sao-pro .so-lon{font-size:34px}
  .dan-loi .the{padding:36px 32px}
  .luoi-buoc{grid-template-columns:repeat(3,1fr);gap:20px;margin-top:16px}
  .luoi-buoc .the{padding:26px 24px}
  .cho-lai .the{padding:40px 36px}
  .cho-lai h2{font-size:32px}
  .khoi-video{padding:40px 0 8px}
  .khung-video{width:340px}
  .dai-gop-y{padding:64px 0}
  .dai-gop-y .hang-nut{flex-direction:row;align-items:center}
  .dai-gop-y .hang-nut .nut{width:auto}
  .khong-qc{display:inline-flex;max-width:none;border-radius:var(--bo-nhan);padding:12px 20px 12px 12px}
  .chan{padding:32px 0 40px}
  .nut-phu{flex-direction:row}
  .nut-phu .nut{width:auto;flex:1}
  .luoi{grid-template-columns:repeat(3,1fr)}
  .tab{max-width:520px}
  .tab button{padding:8px 22px}
  .moc{padding:26px 26px}
  .moc h3{font-size:26px}
  .dau-nhom{font-size:26px;margin-top:48px}
  .doc-thoi-gian{padding-left:28px}
  .con-so{grid-template-columns:repeat(5,1fr);gap:14px}
  .ban-noi-bat{padding:44px 40px;margin:32px 0 8px}
  .ban-noi-bat .so-ban{font-size:88px;letter-spacing:-4px}
  .ban-noi-bat h2{font-size:38px}
  .ban-noi-bat ul{display:grid;grid-template-columns:1fr 1fr;gap:14px 28px}
  .nut-noi{right:28px;bottom:28px}
  .tam{left:auto;right:24px;bottom:24px;width:520px;border-radius:22px;max-height:84vh}
  .chan .lien-ket{gap:8px 26px}
}
@media (min-width:1000px){
  h1{font-size:68px}
  .trich{font-size:27px}
}

/* ==========================  MÁY NHỎ (dưới 380px)  ========================== */
@media (max-width:379px){
  h1{font-size:32px;letter-spacing:-1px}
  h2{font-size:25px}
  .khung,.khung-hep{padding:0 16px}
  .so-hang{gap:12px}
  .so-hang .so{font-size:52px}
  .nut-cho{padding:10px 14px}
  .nut-cho b{font-size:17px}
  .nut-noi{right:12px;padding:14px 18px;font-size:16px}
  .goi,.ban,.the-gy{padding-left:16px;padding-right:16px}
  .goi-pro .trong{padding:26px 18px}
}