/* Roboto variable, self-hosted (Google Fonts build, vietnamese + latin subsets, OFL) */
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('assets/fonts/roboto-var-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; }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('assets/fonts/roboto-var-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; }

/* E39 – Cẩm nang. Geometry = Figma px × scale.
   --s  header · menu · footer (same scale as Đại lý: 1:1 from 1536 up)
   --hs home banner, full-bleed 1920 frame
   --ds article area, the 1491-wide "Display main" frame, sized to whatever the menu leaves free */

:root {
  --orange: #F58220;
  --orange-dk: #E3690B;
  --ink: #2B2B2B;
  --ink-title: #2F323A;
  --menu-ink: #0E0E0E;
  --muted: #7C7D99;
  --s: clamp(0.58px, calc(100vw / 1536), 1px);
  --m: var(--s);
  --font: "Roboto", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-read: "Inter", var(--font);
  --font-title: "Be Vietnam Pro", var(--font);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: #fff; overflow-x: hidden; -webkit-font-smoothing: antialiased; container-type: inline-size; } /* cqw = width without the scrollbar */
img, svg { display: block; max-width: none; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
b { font-weight: 700; }
.o { color: var(--orange); }
.r { color: #DE2B30; } /* Figma #FF383C is 3.9:1 on white; this keeps the red at 4.6:1 */
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
::selection { background: var(--orange); color: #fff; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 60; padding: 10px 16px; border-radius: 8px; background: var(--orange); color: #fff; font-weight: 700; }
.skip:focus { top: 12px; }
html { scrollbar-color: #F5A462 #FDF1E6; }

/* ---------- header (Figma "Header" 1920×90, content 240 → 1680) ---------- */
.hdr { position: relative; z-index: 30; height: calc(90 * var(--s)); background: #fff; box-shadow: 0 calc(2 * var(--s)) calc(4 * var(--s)) rgba(0,0,0,.25); }
.hdr__in { position: relative; width: calc(1440 * var(--s)); height: 100%; margin: 0 auto; }
.hdr__burger { position: absolute; left: 0; top: calc(29 * var(--s)); width: calc(48 * var(--s)); height: calc(32 * var(--s)); border-radius: calc(4 * var(--s)); transition: transform .2s; }
.hdr__burger img { width: 100%; height: 100%; }
.hdr__burger:hover { transform: scale(1.06); }
.hdr__logo { position: absolute; left: calc(98 * var(--s)); top: calc(11 * var(--s)); }
.hdr__logo img { width: calc(196 * var(--s)); height: auto; }
.hdr__cskh { position: absolute; left: calc(1127 * var(--s)); top: calc(8 * var(--s)); transition: transform .2s; }
.hdr__cskh img { width: calc(74 * var(--s)); height: auto; }
.hdr__cskh:hover { transform: translateY(calc(-2 * var(--s))); }
.hdr__home { position: absolute; left: calc(1232 * var(--s)); top: calc(21 * var(--s)); display: flex; align-items: center; gap: calc(10 * var(--s)); width: calc(208 * var(--s)); height: calc(48 * var(--s)); padding-left: calc(19 * var(--s)); border: 1px solid #E76824; border-radius: calc(8 * var(--s));
  background: linear-gradient(180deg, #FFDDC0 0%, #E4A36B 15.4%, #F58220 50%, #E4A36B 84.6%, #FFDDC0 100%);
  box-shadow: 0 calc(3 * var(--s)) 0 #FF7A33, inset 0 calc(-1 * var(--s)) calc(4 * var(--s)) rgba(0,0,0,.25);
  color: #fff; font-size: calc(23 * var(--s)); font-weight: 600; white-space: nowrap; transition: filter .2s, transform .2s; }
.hdr__home:hover { filter: brightness(1.06); }
.hdr__home:active { transform: translateY(calc(2 * var(--s))); box-shadow: 0 calc(1 * var(--s)) 0 #FF7A33, inset 0 calc(-1 * var(--s)) calc(4 * var(--s)) rgba(0,0,0,.25); }
.hdr__home-ico { display: grid; place-items: center; flex: 0 0 auto; width: calc(30 * var(--s)); height: calc(30 * var(--s)); border-radius: 50%; background: #fff; box-shadow: 0 calc(1 * var(--s)) 0 rgba(0,0,0,.25); }
.hdr__home-ico img { width: calc(18 * var(--s)); height: auto; }

/* ---------- shell: menu + page ---------- */
.shell { position: relative; --fw: calc(min(100cqw, 1920px) / 1920); } /* the 1920 frame, scaled to the page width */
.page { position: relative; min-width: 0; container-type: inline-size; }
.art, .home { --ds: calc(min(100cqw, 1491px) / 1491); --hs: calc(min(100cqw, 1920px) / 1920); }

/* ---------- menu (Figma "Main" sidebar 430 / "mENU FORMAT") ---------- */
.menu { --m: max(var(--s), 0.78px); position: absolute; left: 0; top: 0; z-index: 20; width: calc(430 * var(--m)); min-height: 100%; padding-bottom: calc(28 * var(--m)); background: #fff;
  transform: translateX(-100%); visibility: hidden; transition: transform .45s cubic-bezier(.16,1,.3,1), visibility 0s .45s; }
.menu-open .menu { transform: none; visibility: visible; transition: transform .45s cubic-bezier(.16,1,.3,1); }
.scrim { position: absolute; inset: 0; z-index: 19; background: rgba(25,25,25,.79); opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s; }
.menu-open .scrim { opacity: 1; visibility: visible; transition: opacity .35s; }
.menu-open .shell { min-height: calc(1044 * max(var(--s), 0.78px)); }

.menu__top { display: flex; justify-content: space-between; height: calc(129 * var(--m)); padding: calc(42 * var(--m)) calc(24 * var(--m)) 0 calc(25 * var(--m)); }
.menu__btn { display: grid; place-items: center; width: calc(45 * var(--m)); height: calc(45 * var(--m)); border-radius: calc(13.4 * var(--m)); background: #353534; transition: background-color .2s; }
.menu__btn:hover { background: #1f1f1e; }
.menu__btn img { width: calc(20 * var(--m)); height: auto; }
.menu__btn + .menu__btn img { width: calc(14 * var(--m)); }
.menu__search { position: relative; display: block; height: calc(57 * var(--m)); margin: calc(28 * var(--m)) calc(24 * var(--m)) 0 calc(25 * var(--m)); }
.menu__search img { position: absolute; left: calc(21 * var(--m)); top: calc(19 * var(--m)); width: calc(18 * var(--m)); height: auto; pointer-events: none; }
.menu__search input { width: 100%; height: 100%; padding: 0 calc(16 * var(--m)) 0 calc(53 * var(--m)); border: 1px solid transparent; border-radius: calc(17.8 * var(--m)); background: #fff; font-size: calc(15.6 * var(--m)); color: #2F323A;
  box-shadow: 0 calc(4 * var(--m)) calc(6.7 * var(--m)) rgba(0,0,0,.1), 0 calc(11 * var(--m)) calc(16.7 * var(--m)) rgba(0,0,0,.1); -webkit-appearance: none; appearance: none; transition: border-color .2s; }
.menu__search input::placeholder { color: #5C5F68; opacity: 1; }
.menu__search input:focus { outline: none; border-color: #F5A462; }
.menu__search input::-webkit-search-cancel-button { -webkit-appearance: none; }

.menu__list { display: flex; flex-direction: column; gap: calc(17.7 * var(--m)); margin-top: calc(28 * var(--m)); padding: 0 calc(15 * var(--m)) 0 calc(16 * var(--m)); }
.mi, .si { position: relative; display: flex; align-items: center; width: 100%; border: calc(1.1 * var(--m)) solid #EFEFEF; border-radius: calc(17.8 * var(--m)); background: #fff; text-align: left;
  box-shadow: 0 calc(2 * var(--m)) calc(4 * var(--m)) rgba(0,0,0,.15), 0 calc(4 * var(--m)) calc(4.5 * var(--m)) rgba(0,0,0,.12), inset 0 calc(-2 * var(--m)) calc(3 * var(--m)) rgba(0,0,0,.13);
  transition: background-color .2s, box-shadow .2s, transform .2s; }
.mi { height: calc(70 * var(--m)); padding: 0 calc(19 * var(--m)); }
.mi:hover, .si:hover { background: #FFF7F0; }
.mi:active, .si:active { transform: translateY(calc(1 * var(--m))); }
.mi__n { width: calc(42 * var(--m)); flex: 0 0 auto; font-size: calc(20 * var(--m)); line-height: calc(31.2 * var(--m)); font-weight: 700; color: rgba(124,125,153,.4); }
.mi__t { flex: 1; font-size: calc(17.8 * var(--m)); line-height: calc(26.7 * var(--m)); font-weight: 700; color: var(--menu-ink); }
.mi__chev { width: calc(13 * var(--m)); height: calc(8 * var(--m)); flex: 0 0 auto; color: rgba(124,125,153,.6); }
.mi.is-on .mi__n, .mi.is-on .mi__chev { color: var(--orange); }
.menu__support { display: flex; align-items: center; justify-content: center; gap: calc(13 * var(--m)); width: calc(271 * var(--m)); height: calc(62 * var(--m)); margin: calc(27 * var(--m)) auto 0; border-radius: calc(17.8 * var(--m)); background: var(--orange); color: #F9FAFE; font-size: calc(17.8 * var(--m)); font-weight: 700;
  box-shadow: 0 calc(4 * var(--m)) calc(6.7 * var(--m)) rgba(242,202,80,.2), 0 calc(11 * var(--m)) calc(16.7 * var(--m)) rgba(242,202,80,.2); transition: background-color .2s; }
.menu__support:hover { background: var(--orange-dk); }
.menu__support img { width: calc(20 * var(--m)); height: auto; }

.menu__h { display: grid; place-items: center; min-height: calc(80 * var(--m)); margin-top: calc(10 * var(--m)); padding: 0 calc(16 * var(--m)); text-align: center; text-transform: capitalize; font-size: calc(32 * var(--m)); line-height: calc(40 * var(--m)); font-weight: 800; letter-spacing: calc(-0.9 * var(--m)); color: var(--ink-title); text-wrap: balance; }
.menu__h + .menu__list { margin-top: calc(10 * var(--m)); }
.si { height: calc(86 * var(--m)); gap: calc(18 * var(--m)); padding: 0 calc(19 * var(--m)); background: #FCFCFE; }
.si.is-on { border-color: #F5A462; background: #FFF7F0; }
.si__ico { display: grid; place-items: center; flex: 0 0 auto; width: calc(48 * var(--m)); height: calc(48 * var(--m)); border-radius: 50%; color: var(--orange); background: linear-gradient(#fff, #fff) padding-box, linear-gradient(180deg, #FFBC83, #F58220) border-box; border: calc(4 * var(--m)) solid transparent;
  box-shadow: 0 calc(4 * var(--m)) calc(6.7 * var(--m)) rgba(254,183,123,.2), 0 calc(11 * var(--m)) calc(16.7 * var(--m)) rgba(251,163,88,.2); }
.si__ico img { width: calc(var(--w, 40) * var(--m)); height: auto; }
.si__ico svg { width: calc(24 * var(--m)); height: calc(24 * var(--m)); }
.si__ico--fill { border: 0; background: linear-gradient(180deg, #FFBC83, #F58220); }
.si__t { font-size: calc(17.8 * var(--m)); line-height: calc(26.7 * var(--m)); font-weight: 700; color: var(--menu-ink); text-transform: capitalize; }
.menu__empty { margin: calc(24 * var(--m)) calc(28 * var(--m)) 0; font-size: calc(16 * var(--m)); line-height: 1.5; color: #5C5F68; text-align: center; }
[data-panel-id="search"] .menu__list { margin-top: calc(28 * var(--m)); }
.menu { scrollbar-width: thin; scrollbar-color: var(--orange) transparent; }
.menu__panel { position: relative; }
.menu__panel::after { content: ""; position: absolute; right: calc(2.7 * var(--m)); top: calc(104 * var(--m)); width: calc(6.7 * var(--m)); height: calc(464 * var(--m)); border-radius: 99px; background: var(--orange); pointer-events: none; } /* Figma "Vector 63": the orange rail beside every list */
.menu__panel[data-panel-id="search"]::after { display: none; }
.menu__panel[data-panel-id="main"]::after { top: calc(30 * var(--m)); } /* article frames: rail starts at the first item */

/* home drawer (Figma "HOME SCREEN PC KHI MỞ MENU"): no ↩/✕ row, search 68 under the header, list 44 below it;
   the scrim, Esc and ☰ close it. Submenus bring the row back (↩ is how you leave them). */
@media (min-width: 900px) {
  body[data-view="home"] .menu[data-panel="main"] .menu__top { display: none; }
  body[data-view="home"] .menu[data-panel="main"] .menu__search { margin-top: calc(68 * var(--m)); }
  body[data-view="home"] .menu[data-panel="main"] [data-panel-id="main"] .menu__list { margin-top: calc(44 * var(--m)); }
  body[data-view="home"] .menu[data-panel="main"] [data-panel-id="main"]::after { top: calc(119 * var(--m)); }
}

/* ---------- home: "Các đường truyền tốc độ cao" (Figma 1920×919 below the header) ---------- */
.home { position: relative; height: calc(919 * var(--hs)); background: #FDF7F2 url('assets/home-bg-pc.jpg') center top / cover no-repeat; overflow: hidden; }
.menu-open .home { min-height: calc(1044 * max(var(--s), 0.78px)); }
.home__title { position: absolute; left: calc(50% - 475 * var(--hs)); top: calc(50 * var(--hs)); width: calc(949 * var(--hs)); height: auto; }
.home__woman { position: absolute; left: calc(50% - 355 * var(--hs)); top: calc(201 * var(--hs)); width: calc(709 * var(--hs)); height: auto; }
.home__links ul { position: absolute; left: 50%; top: calc(296 * var(--hs)); display: grid; grid-auto-flow: column; grid-template-rows: repeat(3, auto); grid-template-columns: repeat(2, calc(342 * var(--hs))); column-gap: calc(756 * var(--hs)); row-gap: calc(48 * var(--hs)); transform: translateX(-50%); }
.lk { position: relative; display: flex; align-items: center; width: calc(342 * var(--hs)); height: calc(92 * var(--hs)); }
.lk__t { display: flex; align-items: center; justify-content: center; width: calc(300 * var(--hs)); height: calc(70 * var(--hs)); margin-left: calc(38 * var(--hs)); padding-left: calc(4 * var(--hs)); border: calc(2 * var(--hs)) solid #E1FAFF; border-radius: 999px; background: var(--orange);
  box-shadow: 0 0 calc(4 * var(--hs)) #BA6300; color: #fff; font-size: calc(28 * var(--hs)); line-height: calc(32.7 * var(--hs)); font-weight: 800; letter-spacing: calc(-0.74 * var(--hs)); white-space: nowrap; transition: background-color .2s, box-shadow .2s; }
.lk__ico { position: absolute; left: calc(1 * var(--hs)); top: 0; z-index: 1; display: grid; place-items: center; width: calc(90 * var(--hs)); height: calc(90 * var(--hs)); border-radius: 50%;
  background: linear-gradient(180deg, #FFA15F 0%, #F57418 26.9%, #FFB077 56.7%, #DC8503 100%); box-shadow: inset 0 calc(-1 * var(--hs)) calc(3.6 * var(--hs)) rgba(90,2,2,.25), 0 0 0 calc(.76 * var(--hs)) #FF6A00; transition: transform .35s cubic-bezier(.16,1,.3,1); }
.lk__ico::before { content: ""; position: absolute; inset: calc(4.5 * var(--hs)); border-radius: 50%; background: #fff; box-shadow: inset 0 calc(-1 * var(--hs)) calc(3.6 * var(--hs)) rgba(90,2,2,.25), 0 0 0 calc(.76 * var(--hs)) #FF6A00; }
.lk__ico img { position: relative; width: calc(36 * var(--hs)); height: auto; margin-left: calc(6 * var(--hs)); }
.lk:hover .lk__t { background: var(--orange-dk); box-shadow: 0 0 calc(10 * var(--hs)) #BA6300; }
.lk:hover .lk__ico { transform: scale(1.06); }

/* ---------- article (Figma "Display main" 1491 × 1044) ---------- */
.art { position: relative; min-height: calc(1044 * var(--ds)); padding: calc(15 * var(--ds)) 0 calc(108 * var(--ds));
  background: #fff url('assets/display-bg.jpg') no-repeat 0 0 / calc(1491 * var(--ds)) auto; } /* the export is already the visible 1491×1044 crop */
/* text articles run longer than the 1044 frame: the photo fades into its own bottom tone so the ground reaches the divider */
.art--text { background: linear-gradient(rgba(252,246,241,0) calc(884 * var(--ds)), #FCF6F1 calc(1044 * var(--ds))) no-repeat, url('assets/display-bg.jpg') no-repeat 0 0 / calc(1491 * var(--ds)) auto, #FCF6F1; }
.art::after { content: ""; position: absolute; left: calc(44 * var(--ds)); bottom: calc(30 * var(--ds)); width: calc(1402 * var(--ds)); height: calc(47 * var(--ds)); background: url('assets/decor.svg') center / 100% 100% no-repeat; pointer-events: none; }
.art__back { display: none; }
.art__t { display: flex; align-items: center; justify-content: center; width: calc(975 * var(--ds)); height: calc(157 * var(--ds)); margin: 0 auto; padding: calc(15 * var(--ds)) calc(110 * var(--ds)) 0; background: url('assets/title-frame.webp') center / 100% 100% no-repeat;
  font-size: calc(39 * var(--ds)); line-height: calc(48 * var(--ds)); font-weight: 700; color: #363636; text-transform: uppercase; text-align: center; text-wrap: balance; }
.art__t b { font-weight: inherit; }
.art--long .art__t { width: calc(1328 * var(--ds)); height: calc(136 * var(--ds)); margin-top: calc(18 * var(--ds)); padding: calc(14.5 * var(--ds)) calc(52 * var(--ds)) 0; background-image: url('assets/title-frame-long.webp'); font-size: calc(var(--tsz, 37) * var(--ds)); white-space: nowrap; }
.art .t-mb { display: none; }

.steps { display: flex; justify-content: center; align-items: flex-start; gap: calc(80 * var(--ds)); margin-top: calc(44 * var(--ds)); }
.art--long .steps { margin-top: calc(47 * var(--ds)); }
.step { width: calc(274 * var(--ds)); }
.step__img { width: 100%; height: auto; }
.step__tag { display: flex; align-items: center; justify-content: center; width: calc(116 * var(--ds)); height: calc(34 * var(--ds)); margin-top: calc(29 * var(--ds)); border-radius: 0 calc(34 * var(--ds)) 0 0; background: var(--orange); color: #fff; font-size: calc(16.8 * var(--ds)); font-weight: 900; text-transform: uppercase; }
.step__txt { margin-top: calc(12 * var(--ds)); font-size: calc(24 * var(--ds)); line-height: 1.17; font-weight: 500; letter-spacing: -0.05em; color: #000; }
.step__txt b { font-weight: 700; }
.dots { display: none; }

/* text article (no desktop frame in Figma: the mobile card, widened to the 3-phone row) */
.art__body { width: calc(982 * var(--ds)); margin: calc(44 * var(--ds)) auto 0; padding: calc(40 * var(--ds)) calc(56 * var(--ds)) calc(48 * var(--ds)); border-radius: calc(24 * var(--ds)); background: #fff;
  box-shadow: 0 calc(4 * var(--ds)) calc(18.4 * var(--ds)) rgba(0,0,0,.16), 0 calc(4 * var(--ds)) calc(3.3 * var(--ds)) rgba(0,0,0,.08); }
.art__img { width: 100%; height: auto; margin-bottom: calc(32 * var(--ds)); border-radius: calc(12 * var(--ds)); }
.art__img--poster { width: min(100%, 460px); margin-inline: auto; }
.prose { font-family: var(--font-read); font-size: max(15px, calc(17 * var(--s))); line-height: 1.6; color: var(--ink-title); }
.prose p + p { margin-top: .9em; }
.prose ol { margin-top: .9em; padding-left: 1.5em; list-style: decimal; }
.prose ol + p { margin-top: .9em; }
.prose b { font-weight: 700; }

/* desktop ≥ 1400: on an article the menu docks beside it, as in the Figma frames; menu 430 + article 1491 both scale with the
   1920 frame (--fw), so the two columns keep Figma's proportions and equal height at every width. Narrower: the menu is a drawer. */
@media (min-width: 1400px) {
  body[data-view="art"].menu-open .shell { display: grid; grid-template-columns: calc(430 * var(--fw)) minmax(0, 1fr); min-height: 0; }
  body[data-view="art"].menu-open .menu { --m: var(--fw); position: sticky; top: 0; align-self: start; min-height: 0; max-height: 100vh; overflow-y: auto; transform: none; transition: none; }
  body[data-view="art"] .scrim { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .home__woman { animation: rise .9s cubic-bezier(.16,1,.3,1) both; }
  .home__links li { animation: rise .7s cubic-bezier(.16,1,.3,1) both; }
  .home__links li:nth-child(2), .home__links li:nth-child(5) { animation-delay: .06s; }
  .home__links li:nth-child(3), .home__links li:nth-child(6) { animation-delay: .12s; }
  .art:not([hidden]) .art__bar, .art:not([hidden]) .steps, .art:not([hidden]) .art__body { animation: rise .55s cubic-bezier(.16,1,.3,1) both; }
  .art:not([hidden]) .steps, .art:not([hidden]) .art__body { animation-delay: .05s; }
  @keyframes rise { from { opacity: .001; translate: 0 calc(16 * var(--s)); } }
}
@media (prefers-reduced-motion: reduce) { .menu, .scrim { transition: none !important; } }

/* ---------- footer: Đại lý footer, unchanged ---------- */
.ft { position: relative; z-index: 1; background: #F8F0EB; font-family: "SF Pro Display", var(--font); color: #222; } /* no Inter here: Đại lý does not load it, so its footer falls back to Roboto — same widths, same wrap */
.ft__in { position: relative; display: flex; align-items: flex-start; width: min(calc(1494 * var(--s)), calc(100% - 96 * var(--s))); height: calc(355 * var(--s)); margin-left: max(calc(50% - 817 * var(--s)), calc(48 * var(--s))); padding-top: calc(27 * var(--s)); }
.ft__about { width: calc(335 * var(--s)); }
.ft__about img { width: calc(102 * var(--s)); height: auto; }
.ft__about p { margin-top: calc(14 * var(--s)); font-size: calc(13 * var(--s)); line-height: calc(17 * var(--s)); color: #333; text-align: justify; }
.ft__col { display: flex; flex-direction: column; gap: calc(16 * var(--s)); margin-top: calc(1 * var(--s)); }
.ft__col h4 { font-size: calc(17 * var(--s)); font-weight: 400; margin-bottom: calc(7 * var(--s)); }
.ft__col a { font-size: calc(14 * var(--s)); line-height: 1; color: #333; }
.ft__col a:hover { color: var(--orange); }
.ft__col--games { width: calc(173 * var(--s)); margin-left: auto; }
.ft__side { width: calc(275 * var(--s)); margin: calc(2 * var(--s)) 0 0 auto; }
.ft__side h4 { font-size: calc(14 * var(--s)); font-weight: 400; color: #333; margin: calc(8 * var(--s)) 0 calc(8 * var(--s)); }
.ft__lang + h4 { margin-top: calc(20 * var(--s)); }
.ft__lang { display: flex; align-items: center; gap: calc(5 * var(--s)); width: calc(177 * var(--s)); height: calc(37 * var(--s)); padding-left: calc(5 * var(--s)); background: #000; color: #fff; border-radius: calc(8 * var(--s)); box-shadow: 0 calc(2 * var(--s)) calc(4 * var(--s)) rgba(0,0,0,.18); font-size: calc(14 * var(--s)); }
.ft__lang img { width: calc(30 * var(--s)); height: auto; }
.ft__apps { display: flex; gap: calc(8 * var(--s)); }
.ft .btn { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; transition: background-color .2s, color .2s; }
.ft__apps .btn + .btn { width: calc(137 * var(--s)); }
.btn--app { width: calc(125 * var(--s)); height: calc(35 * var(--s)); gap: calc(9 * var(--s)); border-radius: calc(6 * var(--s)); background: linear-gradient(100deg, #FF6B00, #FF8C36); color: #fff; font-size: calc(16 * var(--s)); font-weight: 700; }
.btn--app:hover { background: var(--orange-dk); }
.btn--app svg { width: calc(11 * var(--s)); height: auto; }
.btn--ghost { width: calc(125 * var(--s)); height: calc(34 * var(--s)); gap: calc(6 * var(--s)); border: 1px solid #DCE6F1; border-radius: calc(8 * var(--s)); color: #757575; font-size: calc(16 * var(--s)); font-weight: 700; }
.btn--ghost:hover { background: #fff; color: #555; }
.btn--ghost svg { width: calc(11 * var(--s)); height: auto; }
.btn--ghost + .btn--ghost svg { width: calc(20 * var(--s)); }
.ft__pay { display: flex; gap: calc(6.5 * var(--s)); }
.ft__pay span, .ft__lic { display: inline-flex; align-items: center; justify-content: center; border: 1px solid #DCE6F1; border-radius: calc(4 * var(--s)); background: #EFEFF7; color: #6B6B78; }
.ft__pay span { width: calc(86 * var(--s)); height: calc(24 * var(--s)); font-size: calc(9.5 * var(--s)); }
.ft__resp { display: flex; align-items: center; gap: calc(11.5 * var(--s)); margin-top: calc(23 * var(--s)); font-size: calc(11.5 * var(--s)); color: #111; }
.ft__resp img { width: calc(45 * var(--s)); height: auto; margin: 0 calc(-2 * var(--s)) 0 calc(-2 * var(--s)); }
.ft__lic { width: calc(109 * var(--s)); height: calc(24 * var(--s)); font-size: calc(9 * var(--s)); }
.ft__bar { width: min(calc(1731 * var(--s)), calc(100% - 96 * var(--s))); margin: 0 auto; border-top: 1px solid #000; padding: calc(37 * var(--s)) 0 calc(39 * var(--s)); text-align: center; }
.ft__links { display: flex; flex-wrap: wrap; justify-content: center; column-gap: calc(43 * var(--s)); row-gap: calc(33.5 * var(--s)); font-size: calc(15.2 * var(--s)); color: #343434; }
.ft__links a { position: relative; line-height: 1; }
.ft__links a:not(:last-child)::after { content: ""; position: absolute; top: 0; right: calc(-22 * var(--s)); width: 1px; height: 100%; background: #A2B5BD; }
.ft__links a:hover { color: var(--orange); }
.ft__thantai, .ft__thantai-link, .ft__pay .ft__pay-usdt, .ft__pay-18, .ft__links--mb { display: none; }
.ft__logos { width: calc(910 * var(--s)); height: auto; margin: calc(8 * var(--s)) auto 0; }
.ft__copy { margin-top: calc(22 * var(--s)); font-size: calc(15 * var(--s)); font-family: var(--font); color: #303030; }