/* ============================================================
   GIAO DIỆN MỚI "C" CHO WEB KHÁCH (07/10/2026) — chạy SONG SONG với bản cũ.
   File này CHỈ được nạp khi máy khách đã mở ?giao-dien=moi (App.razor, cookie go365-giao-dien),
   và mọi luật đều nằm dưới html[data-giao-dien="moi"] nên bản cũ không bao giờ bị ảnh hưởng.
   Nguyên tắc (mẫu C anh duyệt 06/10): 4 màu lấy thẳng từ logo (xanh rêu #0e544e, xanh ngọc #26b3b4,
   vàng #f8c11c, cam #f16225), chữ Montserrat, nút bo tròn, thẻ phẳng viền mảnh, ảnh lớn.
   Thứ tự: (1) font  (2) đổi biến màu cũ  (3) khung chung mọi trang  (4) trang chủ C (.hc-*).
   Lớp riêng từng nhóm trang nằm ở các file giao-dien-c-*.css (nạp sau file này).
   ============================================================ */

/* ── 1. Font Montserrat (chỉ latin + tiếng Việt, như fonts.css đã bỏ latin-ext 03/09) ── */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('/fonts/montserrat-400-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:'Montserrat';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('/fonts/montserrat-400-800-latin.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}

/* ── 2. Đổi biến màu cũ sang 4 màu logo ──
   html[data-giao-dien] (0,1,1) thắng :root (0,1,0) của brand-tokens.css / legacy-home-inline.css
   bất kể thứ tự nạp. Tên biến giữ nguyên để mọi trang cũ tự đổi màu theo. */
html[data-giao-dien="moi"]{
  --c-xanh:#0e544e; --c-xanh-dam:#0a3f3b; --c-dem:#072b28; --c-ngoc:#26b3b4; --c-vang:#f8c11c; --c-cam:#f16225;
  --c-cam-dam:#d9531b; --c-gia:#b9481a; --c-muc:#14211f; --c-nen:#f3f7f6; --c-ke:#e3e8e7;
  --c-vang-nhat:#fef5d9; --c-ngoc-nhat:#e2f4f4; --c-chu-2:#4f5e5c; --c-chu-3:#5f6d6a;

  --t:#0e544e; --t2:#0a3f3b; --t3:#26b3b4; --t4:#e2f4f4; --t-deep:#0e544e; --bl:#26b3b4; --bll:#e2f4f4;
  --or:#f16225; --or2:#f58a5b; --or-text:#b9481a; --gd:#f8c11c; --pu:#f8c11c; --pll:#fef5d9;
  --cr:#ffffff; --w:#ffffff; --g1:#f3f7f6; --g2:#e3e8e7; --line:#e3e8e7; --bd:#e3e8e7; --g3:#e3e8e7; --bgw:#f3f7f6;
  --sand:#fef5d9; --terra-bg:#fdeee7; --gt:#4f5e5c; --dk:#14211f; --tx:#14211f; --ink:#14211f; --cb:#0a3f3b; --p:#0e544e;

  --go-teal-900:#0a3f3b; --go-teal-800:#0a3f3b; --go-teal-700:#0e544e; --go-teal-600:#0e544e;
  --go-teal-400:#26b3b4; --go-teal-100:#e2f4f4; --go-teal-050:#f3f7f6;
  --go-orange-600:#d9531b; --go-orange-500:#f16225; --go-orange-400:#f58a5b; --go-terra-100:#fdeee7;
  --go-gold-500:#f8c11c; --go-gold-100:#fef5d9;
  --go-cream:#ffffff; --go-paper:#f3f7f6; --go-sand:#fef5d9; --go-ink:#14211f; --go-text:#14211f; --go-muted:#5f6d6a;
  --go-line:#e3e8e7; --go-line-soft:#e3e8e7;
  --surface-page:#ffffff; --surface-alt:#f3f7f6; --text-muted:#4f5e5c;
  --font-display:'Montserrat',system-ui,sans-serif; --font-body:'Montserrat',system-ui,sans-serif; --font-mono:'Montserrat',system-ui,sans-serif;
  --radius-sm:10px; --radius-md:14px; --radius-lg:20px; --radius-xl:24px;
  --shadow-xs:none; --shadow-sm:none; --shadow-card:none; --shadow-ticket:none;
  --shadow-cta:none; --shadow-cta-lg:none;
  --focus-ring:rgba(38,179,180,.25);
  background:#fff;
}

/* ── 3. Khung chung mọi trang ── */
/* Chữ: Montserrat cho TẤT CẢ (kể cả chỗ ghi thẳng font-family trong style="" của từng trang — Fraunces,
   IBM Plex Mono, Be Vietnam Pro). Số dùng tabular-nums để cột giá thẳng hàng như IBM Plex Mono cũ. */
html[data-giao-dien="moi"] body,
html[data-giao-dien="moi"] body :where(*:not(svg):not(svg *):not(pre):not(pre *):not(code):not(kbd)){
  font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif!important;
}
html[data-giao-dien="moi"] body{background:#fff;color:var(--c-muc);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
/* Tiêu đề cũ hay in nghiêng một nửa (Fraunces italic) — giao diện C không nghiêng. */
html[data-giao-dien="moi"] :is(h1,h2,h3,.stl,.hero-h) :is(em,i,span){font-style:normal}
html[data-giao-dien="moi"] :is(h1,h2,h3){letter-spacing:-.01em}
html[data-giao-dien="moi"] .stl{font-weight:800;color:var(--c-muc);letter-spacing:-.02em}

/* Nút: bo tròn, phẳng, không bóng */
html[data-giao-dien="moi"] .btn{border-radius:999px;font-weight:700;box-shadow:none}
html[data-giao-dien="moi"] .btn:hover{box-shadow:none}

/* Thẻ: phẳng, viền mảnh, bo 20 */
html[data-giao-dien="moi"] .card{border-radius:20px;border:1px solid var(--c-ke);box-shadow:none}
html[data-giao-dien="moi"] a:hover > .card,html[data-giao-dien="moi"] .card:hover{border-color:var(--c-ngoc)}

/* Ô nhập: viền mảnh, viền ngọc khi gõ */
html[data-giao-dien="moi"] :is(.inp,.ds-input,input[type="text"],input[type="email"],input[type="tel"],input[type="search"],input[type="password"],input[type="number"],input[type="date"],select,textarea):focus{
  border-color:var(--c-ngoc)!important;box-shadow:0 0 0 3px var(--c-ngoc-nhat)!important;outline:none}

/* Đầu trang */
html[data-giao-dien="moi"] .site-nav{background:var(--c-xanh);box-shadow:none;transition:background .3s}
html[data-giao-dien="moi"] .ni{max-width:1280px;height:72px}
html[data-giao-dien="moi"] .nl a{color:#fff;font-weight:600;font-size:14px;border-radius:999px}
html[data-giao-dien="moi"] .nl a:hover,html[data-giao-dien="moi"] .nl a.ac{background:rgba(255,255,255,.14);color:var(--c-vang)}
html[data-giao-dien="moi"] .hdr-pill{font-weight:700}
html[data-giao-dien="moi"] .hdr-pill-ghost{background:rgba(255,255,255,.1)}
html[data-giao-dien="moi"] .hdr-pill-primary{background:#fff;border-color:#fff;color:var(--c-xanh);box-shadow:none}
html[data-giao-dien="moi"] .hdr-pill-primary:hover{background:var(--c-vang-nhat);border-color:var(--c-vang-nhat);color:var(--c-xanh)}
html[data-giao-dien="moi"] .hdr-pill-outline{border-color:rgba(255,255,255,.55)}
html[data-giao-dien="moi"] .mob-menu{background:var(--c-xanh);top:72px;max-height:calc(100vh - 72px)}
@media (max-width:640px){html[data-giao-dien="moi"] .ni{height:64px}html[data-giao-dien="moi"] .mob-menu{top:64px}}

/* Trang chủ C: đầu trang trong suốt đè lên ảnh lớn, cuộn xuống (hoặc mở menu) thì nền xanh rêu.
   margin-bottom âm kéo ảnh lên dưới thanh sticky; JS (giao-dien-c.js) gắn .hc-dac khi cuộn. */
html[data-giao-dien="moi"] body:has(.hc-hero) .site-nav{background:transparent;margin-bottom:-72px}
html[data-giao-dien="moi"] body:has(.hc-hero) .site-nav.hc-dac,
html[data-giao-dien="moi"] body:has(.hc-hero) .site-nav:has(#mobMenu[style*="block"]){background:var(--c-xanh)}
@media (max-width:640px){html[data-giao-dien="moi"] body:has(.hc-hero) .site-nav{margin-bottom:-64px}}

/* Chân trang */
html[data-giao-dien="moi"] footer{background:var(--c-dem);color:rgba(255,255,255,.8)}
html[data-giao-dien="moi"] .fi{max-width:1280px}
html[data-giao-dien="moi"] .fc .fch{color:var(--c-vang);font-weight:700;font-size:14px}
html[data-giao-dien="moi"] .fc a{color:rgba(255,255,255,.72);font-size:13px}
html[data-giao-dien="moi"] .fc a:hover{color:#fff}
html[data-giao-dien="moi"] .fco{color:rgba(255,255,255,.75);font-size:13px}
html[data-giao-dien="moi"] .fco strong{color:#fff}
html[data-giao-dien="moi"] .fb{border-top:1px solid rgba(255,255,255,.14)}
html[data-giao-dien="moi"] .fcp{color:rgba(255,255,255,.55);font-size:12px}
html[data-giao-dien="moi"] .gd-doi{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 12px;border-radius:999px;
  border:1px solid rgba(255,255,255,.35);color:#fff;font-size:12px;font-weight:600;text-decoration:none}
html[data-giao-dien="moi"] .gd-doi:hover{background:rgba(255,255,255,.1)}

/* Chữ nội dung ≥12px (luật web khách 02/10): chân trang + banner cookie cũ còn 10–11.5px. */
html[data-giao-dien="moi"] footer .cert{font-size:12px;color:rgba(255,255,255,.75);border-color:rgba(255,255,255,.2)}
html[data-giao-dien="moi"] body footer .fc a{font-size:13px!important}
html[data-giao-dien="moi"] .cookie-banner-text,html[data-giao-dien="moi"] .cookie-banner-text strong,
html[data-giao-dien="moi"] .cookie-banner-more,html[data-giao-dien="moi"] :is(.cookie-btn-ess,.cookie-btn-all){font-size:12px!important}
html[data-giao-dien="moi"] .cookie-btn-all{background:var(--c-cam)!important;border-color:var(--c-cam)!important}
/* Blazor FocusOnNavigate đặt focus vào h1 sau mỗi lần chuyển trang → khung viền thừa quanh tiêu đề. */
html[data-giao-dien="moi"] h1:focus{outline:none}

/* Menu đổi ngôn ngữ (LanguageSwitcher.razor ghi thẳng #015959 / #29b3b6 trong style=""). */
html[data-giao-dien="moi"] .lang-menu{border:1px solid var(--c-ke)!important;border-radius:14px!important;box-shadow:none!important}
html[data-giao-dien="moi"] .lang-menu a[style*="#015959"]{color:var(--c-xanh)!important;background:var(--c-nen)!important}
html[data-giao-dien="moi"] .lang-menu [style*="#29b3b6"]{color:var(--c-ngoc)!important}
/* Nhãn nhỏ trên mục menu (vd "Tuyển") 9px → 12px theo luật chữ ≥12. */
html[data-giao-dien="moi"] .nl a > span[style*="font-size:9px"]{font-size:12px!important;background:var(--c-cam)!important}

/* Nút chat nổi: đổi gradient teal cũ sang màu logo (nút gom + nhãn "AI" trên từng bong bóng). */
html[data-giao-dien="moi"] #go365-contact-mini{background:var(--c-xanh)!important;color:var(--c-vang)!important;box-shadow:none!important}
html[data-giao-dien="moi"] #go365-contact-mini > span,
html[data-giao-dien="moi"] #go365-contact-stack > a > span[style*="#015959"]{background:var(--c-xanh)!important;color:var(--c-vang)!important;font-size:10px!important}
html[data-giao-dien="moi"] #go365-contact-stack > button{color:var(--c-xanh)!important}
/* Biểu tượng Zalo ở chân trang: chữ 11px → 12px. */
html[data-giao-dien="moi"] .fsocial a[aria-label="Zalo"]{font-size:12px!important}

/* ── 4. Trang chủ C (.hc-*) ── */
.hc{--hc-bo:20px;--hc-rong:1280px;color:var(--c-muc)}
.hc a{color:inherit;text-decoration:none}
.hc img{display:block;max-width:100%}
.hc-khung{max-width:var(--hc-rong);margin:0 auto;padding:0 24px}
.hc-i{width:20px;height:20px;fill:currentColor;flex:none}
.hc-tron{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--c-ngoc);color:#fff;flex:none}
.hc-tron .hc-i{width:22px;height:22px}
.hc-nut{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border-radius:999px;
  border:2px solid transparent;font-weight:700;font-size:14px;white-space:nowrap;transition:background .15s,transform .15s;cursor:pointer}
.hc-nut:hover{transform:translateY(-2px)}
.hc-nut-cam{background:var(--c-cam);color:#fff!important}.hc-nut-cam:hover{background:var(--c-cam-dam)}
.hc-nut-kinh{border-color:rgba(255,255,255,.7);color:#fff!important}.hc-nut-kinh:hover{background:rgba(255,255,255,.12)}
.hc-mat{display:block;font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--c-vang);margin:0}
.hc-mat-cam{color:var(--c-cam-dam)}
.hc-xem{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--c-xanh);white-space:nowrap}
.hc-xem:hover{text-decoration:underline;text-underline-offset:3px}

/* Hero */
.hc-hero{position:relative;height:min(100svh,860px);min-height:620px;color:#fff;overflow:hidden;background:var(--c-dem)}
.hc-canh{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.2s ease}
.hc-canh.dang{opacity:1}
.hc-canh img{width:100%;height:100%;object-fit:cover;transform:scale(1.02)}
.hc-canh.dang img{animation:hcTroi 9s ease-out forwards}
@keyframes hcTroi{from{transform:scale(1.02)}to{transform:scale(1.12)}}
.hc-man{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,43,40,.6) 0,rgba(7,43,40,.25) 45%,rgba(7,43,40,0) 70%),
  linear-gradient(180deg,rgba(7,43,40,.55) 0,rgba(7,43,40,0) 26%,rgba(7,43,40,.1) 45%,rgba(7,43,40,.88) 100%)}
.hc-hero-noi{position:absolute;left:0;right:0;bottom:120px;display:flex;align-items:flex-end;justify-content:space-between;gap:32px}
.hc-hero-chu{max-width:680px}
.hc-hero h1.hc-mat{font-size:12px;line-height:1.5}
.hc-so{margin-left:10px;color:#fff;opacity:.85}
.hc-ten{font-size:88px;line-height:1;font-weight:800;letter-spacing:-.03em;margin:12px 0 16px}
.hc-hero-chu p{font-size:16px;margin:0 0 24px;color:rgba(255,255,255,.92)}
.hc-chon{display:flex;gap:12px}
.hc-chon button{width:132px;text-align:left;color:#fff;opacity:.72;transition:opacity .2s;background:none;border:0;padding:0;cursor:pointer;font:inherit}
.hc-chon button:hover,.hc-chon button.dang{opacity:1}
.hc-chon img{width:132px;height:80px;object-fit:cover;border-radius:12px;border:2px solid transparent}
.hc-chon button.dang img{border-color:var(--c-vang)}
.hc-chon b{display:block;font-size:14px;font-weight:700;margin-top:8px}
.hc-vach{display:block;height:3px;border-radius:2px;background:rgba(255,255,255,.3);margin-top:6px;overflow:hidden}
.hc-vach i{display:block;height:100%;width:0;background:var(--c-vang)}
.hc-chon button.dang .hc-vach i{animation:hcChay 7s linear forwards}
.hc-hero.tam-dung .hc-chon button.dang .hc-vach i{animation:none;width:100%}
@keyframes hcChay{to{width:100%}}

/* Hộp tìm kiếm nổi trên mép ảnh — giữ #hpSearch/.tab-btn/.tab-content để home-tabs.js dùng chung */
.hc-tim-boc{position:relative;z-index:5;margin-top:-72px}
.hc .hc-tim{background:#fff;border:1px solid var(--c-ke);border-radius:var(--hc-bo);padding:20px 24px}
.hc .hc-tim-tab{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.hc .hc-tim .tab-btn{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border-radius:999px;
  border:1px solid var(--c-ke);background:#fff;color:var(--c-chu-2);font-weight:600;font-size:14px;cursor:pointer;margin:0}
.hc .hc-tim .tab-btn .hc-i{width:18px;height:18px;color:var(--c-ngoc)}
.hc .hc-tim .tab-btn.active{background:var(--c-xanh);border-color:var(--c-xanh);color:#fff}
.hc .hc-tim .tab-btn.active .hc-i{color:var(--c-vang)}
.hc .hc-tim .tab-content{padding:0;animation:none}
.hc-tim-hang{display:flex;gap:12px;margin:0}
.hc-o{position:relative;flex:1;display:flex;align-items:center;gap:10px;height:56px;padding:0 16px;border:1px solid var(--c-ke);
  border-radius:14px;color:var(--c-ngoc);min-width:0;background:#fff;margin:0}
.hc-o:focus-within{border-color:var(--c-ngoc);box-shadow:0 0 0 3px var(--c-ngoc-nhat)}
.hc-o input{flex:1;min-width:0;border:0!important;outline:0;background:none;height:100%;font-size:16px;color:var(--c-muc);padding:0;box-shadow:none!important}
.hc-o input::placeholder{color:var(--c-chu-3)}
.hc-o-ngay{flex:.7}
.hc-o .autocomplete-list{top:calc(100% + 6px)!important;left:0!important;right:0;width:100%!important;max-width:none}
.hc-doi{flex:none;width:48px;height:56px;border-radius:14px;border:1px solid var(--c-ke);background:#fff;color:var(--c-xanh);
  display:grid;place-items:center;cursor:pointer}
.hc-tim-hang .hc-nut{min-height:56px;padding:0 32px;border-radius:14px}
.hc-goi-y{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.hc-chip{min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--c-ke);background:#fff;color:var(--c-chu-2);font-weight:600;font-size:13px;cursor:pointer}
.hc-chip:hover{border-color:var(--c-ngoc);color:var(--c-xanh)}
/* Ô ưu đãi (owner chọn ở /admin/home-deals) dưới hộp tìm */
.hc .hp-deals{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.hc .hp-deal{position:relative;display:block;border-radius:14px;overflow:hidden;aspect-ratio:16/7;background:var(--c-nen)}
.hc .hp-deal img{width:100%;height:100%;object-fit:cover;object-position:left center;transition:transform .35s}
.hc .hp-deal:hover img{transform:scale(1.04)}
.hc .hp-deal .sh{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,43,40,0) 40%,rgba(7,43,40,.85))}
.hc .hp-deal .tag{position:absolute;top:10px;left:10px;background:var(--c-cam);color:#fff;font-size:12px;font-weight:800;padding:4px 10px;border-radius:999px}
.hc .hp-deal .tx{position:absolute;left:14px;right:14px;bottom:10px;display:flex;justify-content:space-between;align-items:flex-end;gap:8px}
.hc .hp-deal .nm{color:#fff;font-weight:700;font-size:14px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.hc .hp-deal .pr{color:var(--c-vang);font-weight:800;font-size:14px;white-space:nowrap}

/* Khối chung */
.hc-khoi{padding:88px 0}
.hc-khoi-sat{padding-top:0}
.hc-nen{background:var(--c-nen)}
.hc-tieu{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:32px}
.hc-tieu h2,.hc-h2-lon{font-size:48px;line-height:1.1;font-weight:800;letter-spacing:-.02em;margin:8px 0 0;color:var(--c-muc)}
.hc-tieu p{font-size:16px;color:var(--c-chu-2);margin:8px 0 0;max-width:600px}

/* Chọn theo cảm hứng */
.hc-cam-tab{display:flex;gap:12px;margin-bottom:24px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.hc-cam-tab::-webkit-scrollbar{display:none}
.hc-cam-tab button{flex:none;display:flex;align-items:center;gap:12px;min-height:56px;padding:0 20px 0 8px;border-radius:999px;
  border:1px solid var(--c-ke);background:#fff;font-weight:700;font-size:14px;color:var(--c-muc);cursor:pointer;transition:background .2s,border-color .2s}
.hc-cam-tab button:hover{border-color:var(--c-ngoc)}
.hc-cam-tab button.dang{background:var(--c-xanh);border-color:var(--c-xanh);color:#fff}
.hc-cam-tab button.dang .hc-tron{background:var(--c-vang);color:var(--c-xanh)}
.hc-cam-o{display:none;grid-template-columns:5fr 7fr;gap:24px}
.hc-cam-o.dang{display:grid;animation:hcHien .45s ease}
@keyframes hcHien{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.hc-cam-anh{position:relative;border-radius:var(--hc-bo);overflow:hidden;min-height:440px;background:var(--c-nen);color:#fff}
.hc-cam-anh img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hc-cam-anh::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,43,40,0) 45%,rgba(7,43,40,.85))}
.hc-cam-anh div{position:absolute;left:28px;right:28px;bottom:28px;z-index:1}
.hc-cam-anh b{display:block;font-size:40px;line-height:1.1;font-weight:800;letter-spacing:-.02em}
.hc-cam-anh span{font-size:14px;color:rgba(255,255,255,.9)}
.hc-cam-ds{display:flex;flex-direction:column;gap:12px}
.hc-cam-ds a{display:flex;align-items:center;gap:16px;padding:12px;border:1px solid var(--c-ke);border-radius:16px;transition:border-color .15s,transform .2s;flex:1;background:#fff}
.hc-cam-ds a:hover{border-color:var(--c-ngoc);transform:translateX(4px)}
.hc-cam-ds img{width:120px;height:88px;object-fit:cover;border-radius:12px;flex:none;background:var(--c-nen)}
.hc-giua{flex:1;min-width:0}
.hc-noi{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--c-chu-3)}
.hc-noi .hc-i{width:14px;height:14px;color:var(--c-ngoc)}
.hc-cam-ds h3{font-size:16px;font-weight:700;line-height:1.4;margin:2px 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hc-gia{text-align:right;flex:none}
.hc-gia small{display:block;font-size:12px;color:var(--c-chu-3)}
.hc-gia b{font-size:16px;font-weight:800;color:var(--c-gia)}
.hc-gia s{display:block;font-size:12px;color:var(--c-chu-3)}
.hc-gia-trai{text-align:left}
.hc-diem{display:inline-flex;align-items:center;gap:2px;font-size:12px;font-weight:700;color:var(--c-chu-2)}
.hc-diem .hc-i{width:14px;height:14px;color:var(--c-vang)}

/* Con số */
.hc-con-so{background:var(--c-dem);color:#fff}
.hc-con-so h2{font-size:32px;font-weight:800;margin:12px 0 40px;max-width:760px;line-height:1.25;color:#fff}
.hc-con-so h2 em{font-style:normal;color:var(--c-ngoc)}
.hc-so-luoi{display:grid;grid-template-columns:repeat(5,1fr);gap:24px}
.hc-so-luoi div{border-left:2px solid var(--c-ngoc);padding-left:20px}
.hc-so-luoi b{display:block;font-size:56px;line-height:1;font-weight:800;color:var(--c-vang);letter-spacing:-.02em}
.hc-so-luoi span{display:block;margin-top:10px;font-size:14px;color:rgba(255,255,255,.8)}

/* Lên đường */
.hc-truot{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
.hc-truot::-webkit-scrollbar{display:none}
.hc-ve{flex:none;width:380px;scroll-snap-align:start;border:1px solid var(--c-ke);border-radius:var(--hc-bo);padding:24px;display:flex;flex-direction:column;gap:16px;background:#fff;transition:border-color .15s}
.hc-ve:hover{border-color:var(--c-ngoc)}
.hc-duong{display:flex;align-items:center;gap:12px}
.hc-duong b{font-size:24px;font-weight:800;line-height:1.15}
.hc-duong-giua{flex:1;display:flex;align-items:center;gap:6px;color:var(--c-ngoc);min-width:40px}
.hc-duong-giua::before,.hc-duong-giua::after{content:"";flex:1;border-top:2px dashed var(--c-ke)}
.hc-duong-giua .hc-tron{width:36px;height:36px}.hc-duong-giua .hc-tron .hc-i{width:20px;height:20px}
.hc-meta{font-size:12px;color:var(--c-chu-3)}
.hc-ve-cuoi{display:flex;align-items:center;justify-content:space-between;padding-top:16px;border-top:1px solid var(--c-ke);margin-top:auto}
.hc-mui{display:flex;gap:8px}
.hc-mui button{width:48px;height:48px;border-radius:50%;border:1px solid var(--c-ke);display:grid;place-items:center;color:var(--c-xanh);background:#fff;cursor:pointer}
.hc-mui button:hover{border-color:var(--c-xanh);background:var(--c-nen)}

/* Dải ảnh điểm đến xoè ra */
.hc-xoe{display:flex;gap:12px;height:520px}
.hc-xoe a{position:relative;flex:1;min-width:0;border-radius:var(--hc-bo);overflow:hidden;color:#fff;transition:flex .6s cubic-bezier(.2,.8,.2,1);background:var(--c-nen)}
.hc-xoe a.mo{flex:4}
.hc-xoe img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hc-xoe a::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,43,40,0) 40%,rgba(7,43,40,.8))}
.hc-doc{position:absolute;left:50%;bottom:24px;transform:translateX(-50%) rotate(180deg);writing-mode:vertical-rl;font-size:24px;font-weight:800;z-index:1;white-space:nowrap;transition:opacity .3s}
.hc-ngang{position:absolute;left:28px;right:28px;bottom:28px;z-index:1;opacity:0;transition:opacity .3s .15s}
.hc-xoe a.mo .hc-doc{opacity:0}
.hc-xoe a.mo .hc-ngang{opacity:1}
.hc-ngang b{display:block;font-size:40px;font-weight:800;line-height:1.1;letter-spacing:-.02em}
.hc-ngang > span:not(.hc-nut){display:block;font-size:14px;color:rgba(255,255,255,.9)}
.hc-ngang .hc-nut{margin-top:16px;min-height:44px}
.hc-tem{position:absolute;top:20px;left:20px;z-index:1;font-size:12px;font-weight:800;padding:6px 12px;border-radius:999px;background:var(--c-cam);color:#fff}

/* eSIM */
.hc-esim{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:center}
.hc-buoc{display:grid;gap:16px;margin-top:24px}
.hc-buoc > div{display:flex;gap:16px;align-items:center}
.hc-so-tron{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:800;background:var(--c-vang);color:var(--c-xanh);flex:none}
.hc-buoc b{display:block;font-size:16px}
.hc-buoc span span{color:var(--c-chu-2)}
.hc-esim-ds{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.hc-esim-ds a{border-radius:var(--hc-bo);padding:24px;background:var(--c-nen);display:flex;flex-direction:column;gap:20px;transition:background .2s}
.hc-esim-ds a:hover{background:var(--c-ngoc-nhat)}
.hc-esim-tren{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.hc-esim-tren b{display:block;font-size:24px;font-weight:800;line-height:1.2}
.hc-esim-tren div span{display:block;font-size:12px;color:var(--c-chu-3);margin-top:4px}

/* Đánh giá chạy ngang */
.hc-chay-ngang{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.hc-bang-chuyen{display:flex;gap:16px;width:max-content;animation:hcTruotNgang 60s linear infinite}
.hc-chay-ngang:hover .hc-bang-chuyen{animation-play-state:paused}
.hc-bang-chuyen:not(.hc-nhan-doi){animation:none}
@keyframes hcTruotNgang{to{transform:translateX(calc(-50% - 8px))}}
.hc-dg{width:380px;flex:none;border:1px solid var(--c-ke);border-radius:var(--hc-bo);padding:24px;display:flex;flex-direction:column;gap:12px;background:#fff;margin:0}
.hc-sao5{color:var(--c-vang);letter-spacing:2px;font-size:16px}
.hc-dg blockquote{font-size:14px;line-height:1.7;flex:1;margin:0}
.hc-dg figcaption{display:flex;align-items:center;gap:12px;padding-top:12px;border-top:1px solid var(--c-ke)}
.hc-chu-cai{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:800;background:var(--c-ngoc-nhat);color:var(--c-xanh);flex:none}
.hc-dg figcaption b{display:block}
.hc-dg figcaption span{font-size:12px;color:var(--c-chu-3)}
.hc-tong{display:flex;align-items:center;gap:12px}
.hc-tong b{font-size:48px;font-weight:800;color:var(--c-xanh);line-height:1}
.hc-tong div span{display:block;font-size:12px;color:var(--c-chu-3)}

/* Kêu gọi cuối: ảnh tràn */
.hc-cuoi{position:relative;color:#fff;overflow:hidden;background:var(--c-dem)}
.hc-cuoi > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hc-cuoi::after{content:"";position:absolute;inset:0;background:rgba(7,43,40,.55)}
.hc-cuoi .hc-khung{position:relative;z-index:1;padding-top:120px;padding-bottom:120px;text-align:center}
.hc-cuoi h2{font-size:64px;line-height:1.05;font-weight:800;letter-spacing:-.03em;max-width:900px;margin:12px auto 20px;color:#fff}
.hc-cuoi h2 span{color:var(--c-vang)}
.hc-cuoi p{font-size:16px;color:rgba(255,255,255,.92);margin:0}
.hc-nhom{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:32px}
.hc-faq{padding:24px 0 8px}

/* ── Màn vừa ── */
@media (max-width:1100px){
  .hc-ten{font-size:72px}
  .hc-chon button{width:104px}.hc-chon img{width:104px;height:64px}
  .hc-so-luoi{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .hc-hero-noi{flex-direction:column;align-items:flex-start;bottom:104px}
  .hc-cam-o.dang{grid-template-columns:1fr}
  .hc-cam-anh{min-height:260px}
  .hc-xoe{height:auto;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .hc-xoe::-webkit-scrollbar{display:none}
  .hc-xoe a,.hc-xoe a.mo{flex:none;width:72%;height:380px;scroll-snap-align:start}
  .hc-doc{display:none}.hc-ngang{opacity:1}
  .hc-esim{grid-template-columns:1fr;gap:32px}
  .hc .hp-deals{grid-template-columns:1fr 1fr}
}
/* ── Điện thoại ── */
@media (max-width:600px){
  .hc-khung{padding:0 16px}
  .hc-hero{height:640px;min-height:0}
  .hc-ten{font-size:48px;margin:8px 0 12px}
  .hc-hero-chu p{font-size:14px;margin-bottom:16px}
  .hc-man{background:linear-gradient(180deg,rgba(7,43,40,.55) 0,rgba(7,43,40,.1) 22%,rgba(7,43,40,.35) 40%,rgba(7,43,40,.9) 100%)}
  .hc-hero-noi{bottom:88px;gap:20px}
  .hc-chon{gap:8px;width:100%}
  .hc-chon button{width:auto;flex:1;min-height:44px;min-width:0}
  .hc-chon img{display:none}
  .hc-chon b{font-size:12px;margin-top:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hc-tim-boc{margin-top:-56px}
  .hc .hc-tim{padding:16px}
  .hc .hc-tim-tab{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:-16px}
  .hc .hc-tim-tab::-webkit-scrollbar{display:none}
  .hc .hc-tim .tab-btn{flex:none;min-height:44px}
  .hc-tim-hang{flex-direction:column}
  .hc-o,.hc-o-ngay{flex:none;width:100%}
  .hc-doi{align-self:flex-end;height:44px;margin:-6px 0;transform:rotate(90deg)}
  .hc-tim-hang .hc-nut{width:100%}
  .hc .hp-deals{gap:8px}
  .hc-chip{min-height:44px}
  .hc-khoi{padding:56px 0}
  .hc-khoi-sat{padding-top:0}
  .hc-tieu{margin-bottom:20px;flex-direction:column;align-items:flex-start;gap:12px}
  .hc-tieu h2,.hc-h2-lon{font-size:32px}
  .hc-tieu p{font-size:14px}
  .hc-tieu .hc-mui{display:none}
  .hc-cam-tab button{min-height:48px;padding:0 16px 0 6px;gap:8px}
  .hc-cam-tab .hc-tron{width:32px;height:32px}.hc-cam-tab .hc-tron .hc-i{width:18px;height:18px}
  .hc-cam-anh{min-height:200px}.hc-cam-anh b{font-size:24px}.hc-cam-anh div{left:16px;right:16px;bottom:16px}
  .hc-cam-ds a{gap:12px;padding:10px;align-items:flex-start}
  .hc-cam-ds img{width:88px;height:72px}
  .hc-cam-ds h3{font-size:14px}
  .hc-cam-ds .hc-gia s{display:none}
  .hc-con-so h2{font-size:24px;margin-bottom:28px}
  .hc-so-luoi{grid-template-columns:1fr 1fr;gap:24px 16px}
  .hc-so-luoi b{font-size:36px}
  .hc-ve{width:86%;padding:20px}
  .hc-duong b{font-size:16px}
  .hc-xoe a,.hc-xoe a.mo{width:82%;height:340px}
  .hc-ngang b{font-size:32px}
  .hc-esim-ds{gap:12px}.hc-esim-ds a{padding:16px}.hc-esim-tren b{font-size:16px}.hc-esim-tren .hc-tron{display:none}
  .hc-dg{width:300px}
  .hc-tong b{font-size:36px}
  .hc-cuoi .hc-khung{padding-top:80px;padding-bottom:80px}
  .hc-cuoi h2{font-size:36px}
}
@media (prefers-reduced-motion:reduce){
  .hc *{transition:none!important}
  .hc-canh.dang img,.hc-cam-o.dang{animation:none}
  .hc-bang-chuyen{animation:none}
  .hc-chay-ngang{overflow-x:auto}
}