/* 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 – Trang đại lý. Geometry = Figma px × --s.
   Desktop frame 1920 (content 1440) scales with the viewport; mobile frame 375 scales up to 1.3×. */

:root {
  --orange: #F58220;
  --orange-dk: #E3690B;
  --peach: #FFE7D5;
  --card: #F9F5F2;
  --ink: #2B2B2B;
  --ink-2: #4A4A4A;
  --s: clamp(0.58px, calc(100vw / 1536), 1px);
  --hs: calc(min(100vw, 1920px) / 1920); /* hero scale: the 1920 banner always fits the viewport (1920·--s overflows it) */
  --font: "Roboto", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-2: "Montserrat", "Roboto", "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: #fefefe; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: none; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol, table { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
b { font-weight: 700; }
.o { color: var(--orange); }
.mb-br { display: none; }
.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; }
main { position: relative; }
.wrap { position: relative; width: calc(1440 * var(--s)); margin: 0 auto; z-index: 1; }

@media (prefers-reduced-motion: no-preference) {
  .hero__img, .marquee, .intro { animation: rise .8s cubic-bezier(.16,1,.3,1) both; }
  .marquee { animation-delay: .1s; } .intro { animation-delay: .18s; }
  @keyframes rise { from { opacity: .001; transform: translateY(calc(20 * var(--s))); } to { opacity: 1; transform: none; } }
}

/* ---------- header ---------- */
.hdr { position: relative; z-index: 3; background: #fff; height: calc(106 * var(--s)); }
.hdr__in { height: 100%; }
.hdr__logo { position: absolute; left: calc(91 * var(--s)); top: calc(19 * var(--s)); }
.hdr__logo img { width: calc(198 * var(--s)); height: auto; }
.hdr__nav { position: absolute; right: calc(50 * var(--s)); top: calc(19 * var(--s)); display: flex; gap: calc(16 * var(--s)); }
.hdr__nav .btn--home { width: calc(200 * var(--s)); margin-right: calc(12 * var(--s)); }
.hdr__nav .btn--line:not(.btn--home) { width: calc(226 * var(--s)); }
.hdr__nav .btn--fill { width: calc(193 * var(--s)); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: calc(10 * var(--s)); font-weight: 500; white-space: nowrap; transition: background-color .2s, color .2s, box-shadow .2s, transform .2s; }
.btn--line, .btn--fill { height: calc(68 * var(--s)); padding: 0 calc(32 * var(--s)); border-radius: calc(16 * var(--s)); font-size: calc(27 * var(--s)); border: calc(2.5 * var(--s)) solid var(--orange); color: var(--orange); }
.btn--line:hover { background: #fff3e8; }
.btn--fill { background: var(--orange); color: #fff; padding: 0 calc(42 * var(--s)); }
.btn--fill:hover { background: var(--orange-dk); border-color: var(--orange-dk); }
.btn--home img { width: calc(26 * var(--s)); height: auto; }

/* ---------- hero (raster from Figma layer "banner") ---------- */
.hero { position: relative; height: calc(864 * var(--hs)); }
.hero__img { position: absolute; left: 50%; top: 0; width: calc(1920 * var(--hs)); height: auto; margin-left: calc(-960 * var(--hs)); } /* margin, not transform: the rise animation ends on transform:none */

/* ---------- marquee ---------- */
.marquee { position: relative; display: flex; align-items: center; width: calc(1194 * var(--s)); height: calc(56 * var(--s)); margin: calc(36 * var(--s)) auto 0; padding: 0 calc(22 * var(--s)) 0 calc(18 * var(--s)); border: calc(1.5 * var(--s)) solid #F7B27A; border-radius: calc(14 * var(--s)); background: #FEF4EA; overflow: hidden; }
.marquee__icon { width: calc(44 * var(--s)); height: auto; flex: 0 0 auto; margin-right: calc(18 * var(--s)); }
.marquee__track { flex: 1; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 2%, #000 98%, transparent); }
.marquee__text { display: inline-block; white-space: nowrap; font-size: calc(20 * var(--s)); font-weight: 500; color: #F08A2E; animation: slide 28s linear infinite; padding-left: 100%; }
@keyframes slide { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .marquee__text { animation: none; padding-left: 0; } .marquee__track { mask-image: none; } }

/* ---------- intro ---------- */
.intro { text-align: center; margin-top: calc(50 * var(--s)); }
.intro__h { font-size: calc(32 * var(--s)); line-height: calc(40.8 * var(--s)); font-weight: 800; color: var(--orange); }
.intro__p { width: calc(1195 * var(--s)); margin: calc(12 * var(--s)) auto 0; font-family: var(--font-2); font-size: calc(24 * var(--s)); line-height: calc(26 * var(--s)); font-weight: 500; color: #363636; }

/* ---------- perks (4 cards around the podium raster) ---------- */
.perks { position: relative; height: calc(780 * var(--s)); margin-top: calc(57 * var(--s)); }
.perks__bg { position: absolute; left: 50%; top: 0; width: calc(1920 * var(--s)); height: auto; transform: translateX(-50%); }
.perks__bg--mb { display: none; }
.perks__in { height: 100%; }
.perk { position: absolute; width: calc(492 * var(--s)); padding: calc(26 * var(--s)) calc(20 * var(--s)) calc(16 * var(--s)) calc(96 * var(--s)); border: calc(1.5 * var(--s)) solid var(--orange); border-radius: calc(20 * var(--s)); background: linear-gradient(135deg, #FBEADB 0%, #F7F3EF 45%, #F4F1EE 100%); box-shadow: 0 calc(6 * var(--s)) calc(18 * var(--s)) rgba(245,130,32,.10); }
.perk--1 { left: calc(-6 * var(--s)); top: calc(43 * var(--s)); min-height: calc(230 * var(--s)); }
.perk--2 { right: calc(-8 * var(--s)); top: calc(43 * var(--s)); min-height: calc(200 * var(--s)); }
.perk--3 { left: calc(-6 * var(--s)); top: calc(343 * var(--s)); min-height: calc(259 * var(--s)); }
.perk--4 { right: calc(-8 * var(--s)); top: calc(343 * var(--s)); min-height: calc(209 * var(--s)); }
.perk--r { padding: calc(26 * var(--s)) calc(96 * var(--s)) calc(16 * var(--s)) calc(20 * var(--s)); }
.perk__icon { position: absolute; left: calc(-34 * var(--s)); top: calc(-14 * var(--s)); width: calc(132 * var(--s)); height: auto; filter: drop-shadow(0 calc(6 * var(--s)) calc(8 * var(--s)) rgba(140,70,0,.18)); }
.perk--r .perk__icon { left: auto; right: calc(-30 * var(--s)); }
.perk__h { display: flex; align-items: center; justify-content: space-between; font-size: calc(29 * var(--s)); line-height: calc(32 * var(--s)); font-weight: 700; color: var(--orange); padding-bottom: calc(12 * var(--s)); border-bottom: calc(1.5 * var(--s)) solid #F3C9A6; }
.perk--r .perk__h { justify-content: flex-end; gap: calc(14 * var(--s)); }
.perk--r .perk__h .bars { margin-right: auto; }
.perk p { margin-top: calc(12 * var(--s)); font-size: calc(18 * var(--s)); line-height: calc(19.5 * var(--s)); font-weight: 400; color: #333; text-align: justify; }
.bars { display: inline-flex; align-items: flex-end; gap: calc(3 * var(--s)); height: calc(18 * var(--s)); }
.bars i { display: block; width: calc(7 * var(--s)); background: var(--orange); transform: skewX(-18deg); border-radius: 1px; }
.bars i:nth-child(1) { height: 40%; } .bars i:nth-child(2) { height: 70%; } .bars i:nth-child(3) { height: 100%; }
.bars--l i { transform: skewX(18deg); } .bars--l i:nth-child(1) { height: 100%; } .bars--l i:nth-child(3) { height: 40%; }

/* ---------- video ---------- */
.video { position: relative; display: block; width: calc(1269 * var(--s)); aspect-ratio: 16 / 9; margin: calc(-2 * var(--s)) auto 0; border-radius: calc(28 * var(--s)); overflow: hidden; background: #000; box-shadow: 0 calc(10 * var(--s)) calc(30 * var(--s)) rgba(60,30,0,.12); }
.video__el { display: block; width: 100%; height: 100%; object-fit: cover; } /* box = the mp4's 16:9 (Figma 1269/645 letterboxed it, cover would crop on-screen text); the poster gives up ~5% per side */
.video__play { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.video__play::after { content: ""; position: absolute; inset: 0; background: transparent; transition: background .25s; }
.video__play:hover::after { background: rgba(245,130,32,.08); }
.video--playing .video__play { display: none; }

/* ---------- section titles with diamond ornaments ---------- */
.st { position: relative; display: flex; align-items: flex-start; justify-content: center; text-align: center; font-size: calc(56 * var(--s)); line-height: calc(60 * var(--s)); font-weight: 700; font-style: italic; color: #2C2C2C; letter-spacing: 0; margin-top: calc(76 * var(--s)); padding-bottom: 0; }
.st > span { position: relative; z-index: 1; padding: 0 calc(12 * var(--s)); flex: 0 1 auto; min-width: 0; }
.st::before, .st::after { content: ""; flex: 1 1 0; min-width: 0; margin-top: calc(36 * var(--s)); height: calc(30 * var(--s)); background: url("assets/orn-left.svg") left top / calc(600 * var(--s)) calc(30 * var(--s)) no-repeat; }
.st::before { margin-left: calc(60 * var(--s)); }
.st::after { margin-right: calc(60 * var(--s)); background-image: url("assets/orn-right.svg"); background-position: right top; }

/* ---------- steps ---------- */
.steps { display: flex; gap: calc(25 * var(--s)); margin-top: calc(67 * var(--s)); }
.step { position: relative; flex: 1; height: calc(558 * var(--s)); padding: calc(60 * var(--s)) calc(24 * var(--s)) 0; border: calc(1.5 * var(--s)) solid var(--orange); border-radius: calc(24 * var(--s)); background: var(--card); text-align: center; }
.tag { position: absolute; left: calc(-1.5 * var(--s)); top: calc(-1.5 * var(--s)); display: inline-flex; align-items: center; height: calc(53 * var(--s)); padding: 0 calc(42 * var(--s)) 0 calc(32 * var(--s)); background: linear-gradient(90deg, #F58220, #FB9A46); color: #fff; font-size: calc(21 * var(--s)); font-weight: 700; border-radius: calc(24 * var(--s)) 0 calc(16 * var(--s)) 0; }
.step__num, .step__mtag { display: none; }
.step__pic { width: calc(240 * var(--s)); height: auto; margin: 0 auto; }
.step__h { margin-top: calc(4 * var(--s)); font-size: calc(27 * var(--s)); line-height: calc(31 * var(--s)); font-weight: 700; color: var(--orange); min-height: calc(60 * var(--s)); display: flex; align-items: center; justify-content: center; }
.step p { margin-top: calc(26 * var(--s)); font-size: calc(20 * var(--s)); line-height: calc(24 * var(--s)); color: #333; text-align: justify; }

/* ---------- letter (chế độ đãi ngộ) ---------- */
.st--benefit { margin-top: calc(71 * var(--s)); }
.letter { position: relative; margin-top: calc(68 * var(--s)); padding: calc(96 * var(--s)) calc(28 * var(--s)) calc(20 * var(--s)) calc(33 * var(--s)); border: calc(1.5 * var(--s)) solid var(--orange); border-radius: calc(24 * var(--s)); background: var(--card); min-height: calc(292 * var(--s)); }
.tag--lg { height: calc(66 * var(--s)); padding: 0 calc(50 * var(--s)) 0 calc(34 * var(--s)); font-size: calc(24 * var(--s)); border-radius: calc(24 * var(--s)) 0 0 0; clip-path: polygon(0 0, 100% 0, calc(100% - 22 * var(--s)) 100%, 0 100%); }
.letter p { font-size: calc(20 * var(--s)); line-height: calc(28 * var(--s)); color: #2B2B2B; }
.letter p b:not(.o) { font-weight: 700; }

/* ---------- tables ---------- */
.st--comm { margin-top: calc(42 * var(--s)); }
.comm { display: flex; justify-content: space-between; align-items: flex-start; margin-top: calc(68 * var(--s)); }
.tbl { border-collapse: separate; border-spacing: calc(3 * var(--s)) calc(3 * var(--s)); margin: calc(-3 * var(--s)); }
.tbl th { height: calc(50 * var(--s)); padding: 0 calc(10 * var(--s)); background: linear-gradient(180deg, #F89A48, #F58220); color: #fff; font-size: calc(16.3 * var(--s)); font-weight: 700; border-radius: calc(12 * var(--s)); }
.tbl td { height: calc(53 * var(--s)); padding: 0 calc(10 * var(--s)); background: #fff; border: calc(1.5 * var(--s)) solid var(--orange); border-radius: calc(12 * var(--s)); text-align: center; font-size: calc(15 * var(--s)); font-weight: 700; color: #1F1F1F; font-variant-numeric: tabular-nums; }
.tbl--comm { width: calc(1077 * var(--s)); }
.tbl--comm th:nth-child(1), .tbl--comm td:nth-child(1) { width: calc(340 * var(--s)); }
.tbl--comm th:nth-child(2), .tbl--comm td:nth-child(2) { width: calc(393 * var(--s)); }
.tbl--bonus { width: calc(1446 * var(--s)); margin-top: calc(46 * var(--s)); border-spacing: calc(9 * var(--s)) calc(4 * var(--s)); margin-left: calc(-9 * var(--s)); }
.tbl--bonus th { height: calc(61 * var(--s)); font-size: calc(20 * var(--s)); border-radius: calc(14 * var(--s)); }
.tbl--bonus td { height: calc(60 * var(--s)); font-size: calc(20 * var(--s)); border-radius: calc(14 * var(--s)); }
.tbl--bonus th:nth-child(1), .tbl--bonus td:nth-child(1) { width: calc(354 * var(--s)); }
.tbl--bonus th:nth-child(2), .tbl--bonus td:nth-child(2) { width: calc(415 * var(--s)); }
.tbl--bonus th:nth-child(3), .tbl--bonus td:nth-child(3) { width: calc(300 * var(--s)); }

/* ---------- calculator card ---------- */
.calc-card { width: calc(342 * var(--s)); height: calc(590 * var(--s)); padding: calc(18 * var(--s)) calc(26 * var(--s)); border: calc(1.5 * var(--s)) solid var(--orange); border-radius: calc(24 * var(--s)); background: linear-gradient(180deg, #FDF2E8, #FEF9F4 40%, #fff); text-align: center; }
.calc-card__pic { width: calc(315 * var(--s)); height: auto; margin: calc(-4 * var(--s)) auto 0; }
.calc-card__h { margin-top: calc(26 * var(--s)); font-size: calc(32 * var(--s)); line-height: calc(40 * var(--s)); font-weight: 700; color: var(--orange); }
.calc-card__p { margin-top: calc(46 * var(--s)); font-size: calc(19 * var(--s)); color: #3A3A3A; }
.btn--calc { width: calc(287 * var(--s)); height: calc(60 * var(--s)); margin-top: calc(28 * var(--s)); border-radius: calc(10 * var(--s)); background: linear-gradient(180deg, #FFA04A, #F58220); color: #fff; font-size: calc(20.5 * var(--s)); line-height: calc(24.5 * var(--s)); font-weight: 700; box-shadow: 0 calc(6 * var(--s)) calc(12 * var(--s)) rgba(245,130,32,.35); position: relative; padding-right: calc(30 * var(--s)); }
.btn--calc svg { position: absolute; right: calc(16 * var(--s)); width: calc(12 * var(--s)); height: auto; }
.btn--calc:hover { transform: translateY(calc(-2 * var(--s))); box-shadow: 0 calc(10 * var(--s)) calc(18 * var(--s)) rgba(245,130,32,.4); }

/* ---------- notes ---------- */
.notes { width: calc(1080 * var(--s)); margin-top: calc(22 * var(--s)); font-size: calc(18.5 * var(--s)); line-height: calc(23.4 * var(--s)); letter-spacing: calc(-0.15 * var(--s)); color: #2B2B2B; }
.notes > li { position: relative; padding-left: calc(22 * var(--s)); }
.notes > li::before, .notes__note ul li::before { content: "✦"; position: absolute; left: 0; color: var(--orange); }
.notes__note ul { padding-left: 0; }
.notes__note ul li { position: relative; padding-left: calc(14 * var(--s)); font-weight: 700; }
.notes__note ul li::before { content: "–"; color: inherit; }
.notes__note { margin-top: calc(47 * var(--s)); }
.notes--2 { width: calc(1200 * var(--s)); margin: calc(36 * var(--s)) 0 0 calc(120 * var(--s)); }
.st--bonus { margin-top: calc(20 * var(--s)); font-size: calc(46 * var(--s)); }
.notes--2 .notes__note { margin-top: calc(24 * var(--s)); }

/* ---------- terms (two columns) ---------- */
.terms { display: flex; gap: calc(25 * var(--s)); margin-top: calc(23 * var(--s)); }
.term { position: relative; flex: 1; padding: calc(80 * var(--s)) calc(22 * var(--s)) calc(20 * var(--s)); border: calc(1.5 * var(--s)) solid var(--orange); border-radius: calc(24 * var(--s)); background: var(--card); min-height: calc(437 * var(--s)); }
.term__h { position: absolute; left: calc(-2 * var(--s)); top: calc(6 * var(--s)); display: flex; align-items: center; height: calc(83 * var(--s)); width: calc(600 * var(--s)); }
.hex { position: relative; z-index: 1; width: calc(74 * var(--s)); height: calc(83 * var(--s)); flex: 0 0 auto; }
.hex svg { width: 100%; height: 100%; display: block; }
.hex__glyph { fill: var(--orange); }
.term__t { flex: 1; margin-left: calc(-36 * var(--s)); padding: 0 calc(30 * var(--s)) 0 calc(50 * var(--s)); height: calc(48 * var(--s)); line-height: calc(48 * var(--s)); background: var(--peach); border-radius: 0 calc(20 * var(--s)) calc(20 * var(--s)) 0; font-size: calc(24 * var(--s)); font-weight: 800; color: var(--orange); white-space: nowrap; position: relative; }
.term__t::after { content: ""; position: absolute; right: calc(-10 * var(--s)); top: 0; width: calc(28 * var(--s)); height: 100%; background: var(--orange); border-radius: 0 calc(20 * var(--s)) calc(20 * var(--s)) 0; z-index: -1; }
.notes--term { width: auto; margin-top: 0; font-size: calc(17 * var(--s)); line-height: calc(33 * var(--s)); letter-spacing: calc(-0.16 * var(--s)); }

/* ---------- side swooshes (crops of the page background) ---------- */
/* top = (Figma y − 91 − 864)·--s + the hero's own height; lb/rb carry +69 for the 16:9 video box */
.sw { position: absolute; z-index: 0; pointer-events: none; height: auto; }
.sw--la { left: calc(50% - 960 * var(--s)); top: calc(95 * var(--s) + 864 * var(--hs)); width: calc(320 * var(--s)); mask-image: linear-gradient(90deg, #000 70%, transparent); }
.sw--ra { left: calc(50% + 600 * var(--s)); top: calc(1195 * var(--s) + 864 * var(--hs)); width: calc(360 * var(--s)); mask-image: linear-gradient(90deg, transparent, #000 30%); }
.sw--lb { left: calc(50% - 960 * var(--s)); top: calc(4464 * var(--s) + 864 * var(--hs)); width: calc(420 * var(--s)); mask-image: linear-gradient(90deg, #000 60%, transparent); }
.sw--rb { left: calc(50% + 240 * var(--s)); top: calc(4464 * var(--s) + 864 * var(--hs)); width: calc(720 * var(--s)); mask-image: linear-gradient(90deg, transparent, #000 40%); }

/* ---------- footer ---------- */
.ft { position: relative; z-index: 1; margin-top: calc(58 * var(--s)); background: #F8F0EB; font-family: "SF Pro Display", "Inter", var(--font); color: #222; } /* = the ground baked into the footer crops */
/* about · games+info · side, Figma 143 → 1637 at 1920 with two equal 287 gaps; narrower, the gaps shrink and a 48 gutter holds */
.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__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; } /* 8 links fit row 1 at 1920; narrower screens wrap */
.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; } /* Figma leaves one hanging at the end of row 1 too */
.ft__links a:hover { color: var(--orange); }
/* mobile-only bits; after .ft__links / .ft__pay span so they win */
.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; } /* centred: Figma's x 355 (150px left of centre) read as a slip */
.ft__copy { margin-top: calc(22 * var(--s)); font-size: calc(15 * var(--s)); font-family: var(--font); color: #303030; }

/* ---------- calculator modal ---------- */
.calc { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-start; justify-content: center; overflow: auto; padding: 4vh 16px; }
.calc[hidden] { display: none; }
.calc__backdrop { position: fixed; inset: 0; background: rgba(20,10,0,.55); backdrop-filter: blur(2px); }
.calc__win { position: relative; width: min(1022px, 100%); background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.35); animation: pop .35s cubic-bezier(.16,1,.3,1) both; }
@keyframes pop { from { opacity: .001; transform: translateY(16px) scale(.985); } }
.calc__head { display: flex; align-items: center; justify-content: space-between; height: 52px; padding: 0 20px; background: var(--orange); color: #fff; }
.calc__head h2 { font-size: 18px; font-weight: 700; }
.calc__x { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 50%; }
.calc__x:hover { background: rgba(255,255,255,.18); }
.calc__body { padding: 16px 20px 24px; font-size: 14px; color: #1a1a1a; }
.calc__sec { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--orange); margin: 10px 0 14px; }
.dot { width: 14px; height: 14px; border-radius: 50%; background: var(--orange); }
.dot--check { background: var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 7.2l2.3 2.3L10.6 4.6' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.calc__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
.fld { display: block; }
.fld span { display: block; font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.fld input[type=number] { width: 100%; height: 42px; padding: 0 12px; border: 1px solid #D8D8D8; border-radius: 6px; background: #F5F7F9; font: inherit; font-size: 15px; color: #111; }
.fld input[type=number]:focus { outline: 2px solid var(--orange); outline-offset: 1px; border-color: var(--orange); }
.fld input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; margin: 8px 0 0; background: transparent; cursor: pointer; }
.fld input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: #E5E7EB; }
.fld input[type=range]::-moz-range-track { height: 4px; border-radius: 2px; background: #E5E7EB; }
.fld input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%; background: var(--orange); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.fld input[type=range]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--orange); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.fld input[type=range]:focus-visible { outline: none; } .fld input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(245,130,32,.35); }
.calc__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.stat { position: relative; text-align: center; padding: 14px 8px 10px; border: 1px solid; border-radius: 8px; font-size: 12px; font-weight: 700; }
.stat i { display: block; width: 7px; height: 7px; border-radius: 50%; margin: 0 auto 6px; }
.stat span { display: block; }
.stat b { display: block; font-size: 13px; margin-top: 2px; }
.stat--fee { background: #EFF5FF; border-color: #B9CFF5; } .stat--fee i { background: #4A7BE2; }
.stat--net { background: #EFFBF0; border-color: #B7E3BB; } .stat--net i { background: #27A33C; }
.stat--rate { background: #F8F0FF; border-color: #D9C2F2; } .stat--rate i { background: #9A5CE6; }
.calc__status { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; padding: 12px 16px; background: #F5F6F8; border-radius: 8px; font-size: 13px; }
.calc__status > div > b { display: block; margin-bottom: 4px; }
.calc__status p { color: #333; }
.pill { white-space: nowrap; padding: 6px 10px; border-radius: 999px; background: var(--orange); color: #fff; font-size: 12px; font-weight: 700; }
.pill--ok { background: #27A33C; }
.calc__total { margin-top: 14px; padding: 14px; text-align: center; background: var(--orange); color: #fff; border-radius: 8px; }
.calc__total i { display: block; width: 8px; height: 8px; border-radius: 50%; background: #fff; margin: 0 auto 10px; }
.calc__total span { display: block; font-size: 14px; font-weight: 700; }
.calc__total b { display: block; font-size: 32px; font-weight: 700; margin-top: 4px; }
.calc__toggle { display: flex; align-items: center; gap: 8px; margin: 14px auto 0; padding: 8px 14px; border-radius: 6px; background: #ECECEC; color: #555; font-size: 14px; font-weight: 500; }
.calc__toggle[aria-expanded=true] svg { transform: rotate(180deg); }
.calc__toggle svg { transition: transform .25s; }
.dbox { margin-top: 12px; padding: 14px 10px; border: 1px solid #DCDCDC; border-radius: 10px; }
.dbox h4 { font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.dbox p { font-size: 13px; font-weight: 700; }
.dsub { margin: 0 10px; padding: 10px 14px; background: #F5F5F5; border-radius: 8px; }
.dsub p { margin-top: 4px; } .dsub hr { border: 0; border-top: 1px solid #E2E2E2; margin: 8px 0; }
.red { color: #E11B1B; } .green { color: #1E9B3A; }
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
.tiers div { padding: 8px 10px; border: 1px solid #DCDCDC; border-radius: 8px; font-size: 12px; }
.tiers b { display: block; font-size: 13px; margin-bottom: 2px; } .tiers span { color: #444; }
.dpair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.dpair div, .dlevel { padding: 14px 18px; background: #FDF1E6; border-radius: 8px; }
.dpair span, .dlevel span { display: block; font-size: 14px; font-weight: 700; }
.dpair b, .dlevel b { display: block; font-size: 22px; font-weight: 700; color: var(--orange); margin-top: 2px; }
.dlevel { margin-top: 10px; }
.dwhy { margin-top: 10px; padding: 12px 18px; background: #FDEAEA; border: 1px solid #F3B8B8; border-radius: 8px; color: #C21919; font-size: 13px; font-weight: 700; }
.dwhy p { margin-top: 4px; }
.dwhy[hidden] { display: none; }
.dformula { margin: 0 10px; padding: 18px; text-align: center; background: var(--orange); color: #fff; border-radius: 8px; }
.dformula span:first-child { display: block; font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.dformula b { display: block; font-size: 16px; }
body.calc-open { overflow: hidden; }