/* Roboto variable, self-hosted (Google Fonts build, OFL) — the live face of the page; stands in for SF Pro inside the access tiles */
@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 – Trung tâm hỗ trợ khách hàng. Geometry = Figma px × --s.
   PC: page = Figma frame 1080 minus the 87px fake browser bar = 1920×993, header (78) included; one screen, scaled to fit width AND height.
   Mobile: page = frame 1062 minus the 50px status bar = 440×1012, header (60) included; fits one phone screen (see the mobile block).
   Page y of every box = Figma frame y − 87 (PC) / − 50 (mobile); the header sits at page y 0, the stage below it is 915 / 952 tall.
   Mobile takes over where the PC frame would drop below 0.65× (narrower than 1248px or lower than 646px): below that the
   10px text floor no longer fits the pills and tiles.
   Keep that query in sync with the <source media> in index.html, docs/fsp.json and the finish review. */

:root {
  --brand: #F58220;
  --orange: #FF5500;
  --s: min(calc(100vw / 1920), calc(100vh / 993));
  --font: "Roboto", "Segoe UI", system-ui, sans-serif;
  --grad: linear-gradient(114deg, #FF6B00 0%, #FF8F3C 96%);
  scrollbar-color: var(--brand) #FCEFD1;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--font); font-weight: 800; color: #fff; background: #FDE5C5; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2 { margin: 0; }
a { color: inherit; text-decoration: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
::selection { background: var(--brand); color: #fff; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }

/* site header (PC: logo + login/register; mobile: two icons + logo) */
.hdr { background: #fff; height: calc(78 * var(--s)); }
.hdr__in { position: relative; width: calc(1920 * var(--s)); height: 100%; margin: 0 auto; }
.hdr__in > * { position: absolute; }
.hdr__logo { left: calc(210 * var(--s)); top: calc(18.36 * var(--s)); border-radius: calc(6 * var(--s)); }
.hdr__logo img { width: calc(114 * var(--s)); height: auto; }
.hdr__icon { display: none; }
.hdr__auth { left: calc(1329 * var(--s)); top: calc(16 * var(--s)); display: flex; gap: calc(18.49 * var(--s)); }
.btn { display: flex; align-items: center; justify-content: center; width: calc(181.21 * var(--s)); height: calc(44.38 * var(--s)); border-radius: calc(8.63 * var(--s)); font-size: calc(19.72 * var(--s)); font-weight: 600; line-height: 1; white-space: nowrap; box-shadow: 0 calc(1.23 * var(--s)) 0 #FF5900; transition: transform .25s cubic-bezier(.16,1,.3,1), filter .25s ease-out; }
.btn--login { color: #fff; background: var(--grad); border: calc(1.23 * var(--s)) solid #FFD7C3; }
.btn--register { color: #FF6B00; background: #fff; border: calc(1.23 * var(--s)) solid #FF7D3D; }

/* stage */
.page { height: calc(100vh - 78 * var(--s)); overflow: hidden; display: grid; place-items: center; background: url('assets/bg-pc.jpg') center / cover no-repeat; } /* at the Figma ratio the stage fills the page exactly (top = header bottom); a taller viewport splits the spare height above and below the stage instead of stacking it all under the mascot */
.stage { position: relative; width: calc(1920 * var(--s)); height: calc(915 * var(--s)); } /* page 993 minus the 78 header above it */
.mascot { position: absolute; left: calc(98 * var(--s)); top: calc(170 * var(--s)); } /* page y 248 */
.mascot img { width: calc(899 * var(--s)); height: calc(687 * var(--s)); }
.col { position: absolute; left: calc(1019 * var(--s)); top: calc(31.43 * var(--s)); /* page y 109.43 */ width: calc(678 * var(--s)); display: flex; flex-direction: column; align-items: center; gap: calc(32 * var(--s)); }
.title { line-height: 0; }
.title img { width: calc(678 * var(--s)); height: calc(209 * var(--s)); }
.col > .panel { margin-top: calc(-8 * var(--s)); } /* panels sit 24 apart inside a 32 column gap */
.col > .panel--support { margin-top: 0; }

/* cream panels: gold hairline, gold glow under the top edge, soft drop */
.panel {
  width: calc(639.62 * var(--s)); padding: calc(12.79 * var(--s)); border-radius: calc(24 * var(--s));
  background: linear-gradient(180deg, #FFFEFA, #FFF5DC);
  /* the gold hairline is an inset ring, not a border: sub-pixel borders snap to whole device pixels and shift every box below */
  box-shadow: inset 0 0 0 calc(.79 * var(--s)) #FFBF2B, 0 calc(4.29 * var(--s)) calc(4.29 * var(--s)) rgba(0,0,0,.2), 0 calc(3.16 * var(--s)) 0 #FFCE5D, inset 0 calc(-1.58 * var(--s)) calc(3.16 * var(--s)) #FFD65B;
}
.panel--support { height: calc(127.27 * var(--s)); }
.panel--cards { height: calc(249.26 * var(--s)); }
.panel--links { height: calc(159.64 * var(--s)); }

/* six support pills: raster capsule, pictogram, heavy uppercase label */
.pills { display: grid; grid-template-columns: repeat(3, calc(198.37 * var(--s))); column-gap: calc(9.47 * var(--s)); row-gap: calc(12 * var(--s)); }
.pill { position: relative; display: flex; align-items: center; height: calc(44.85 * var(--s)); padding-left: calc(18.49 * var(--s)); gap: calc(6.9 * var(--s)); background: url('assets/pill.png') 0 0 / 100% 100% no-repeat; border-radius: calc(22 * var(--s)); text-transform: uppercase; font-size: max(10px, calc(15.52 * var(--s))); line-height: 1; white-space: nowrap; text-shadow: 0 calc(.79 * var(--s)) calc(1.58 * var(--s)) rgba(0,0,0,.55); transition: transform .25s cubic-bezier(.16,1,.3,1), filter .25s ease-out; }
.pill__ic { height: auto; filter: drop-shadow(0 calc(1.72 * var(--s)) calc(1.72 * var(--s)) #FDF338); }
.pill__ic--live { width: calc(23.05 * var(--s)); }
.pill__ic--tg { width: calc(25.44 * var(--s)); }
.pill__ic--promo { width: calc(21.65 * var(--s)); }
.pill__ic--complaint { width: calc(24.15 * var(--s)); }
.pill__ic--code { width: calc(18.95 * var(--s)); }

/* seven info cards: gold gradient, gradient hairline, pictogram, label */
.cards { display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; column-gap: calc(15.79 * var(--s)); row-gap: calc(13.84 * var(--s)); width: calc(614.04 * var(--s)); height: calc(219.69 * var(--s)); }
.cards li:nth-child(n+5) .card { width: calc(141 * var(--s)); } /* Figma draws the second row 0.67 narrower */
.card {
  display: flex; flex-direction: column; align-items: center; width: calc(141.67 * var(--s)); height: calc(103.9 * var(--s)); padding-top: calc(8 * var(--s)); gap: calc(6.32 * var(--s));
  border: calc(.79 * var(--s)) solid transparent; border-radius: calc(12.63 * var(--s));
  background: linear-gradient(180deg, #FEF3D8 44.3%, #FEDC97 67.7%, #FFC75C 88.8%, #FFBC3D 100%) padding-box, linear-gradient(116deg, #F8610F, #FFE9DD 50%, #F8610F) border-box;
  box-shadow: 0 calc(1.58 * var(--s)) calc(4.74 * var(--s)) calc(1.58 * var(--s)) rgba(0,0,0,.15), 0 calc(.79 * var(--s)) calc(1.58 * var(--s)) rgba(0,0,0,.3), inset 0 calc(-1 * var(--s)) calc(7 * var(--s)) calc(1 * var(--s)) rgba(255,252,207,.7);
  text-transform: uppercase; font-size: max(10px, calc(14 * var(--s))); line-height: max(12px, calc(16 * var(--s))); text-align: center; text-shadow: 0 calc(1 * var(--s)) calc(1.5 * var(--s)) rgba(0,0,0,.65);
  transition: transform .25s cubic-bezier(.16,1,.3,1), filter .25s ease-out;
}
.card img { width: calc(64 * var(--s)); height: calc(64 * var(--s)); }
.card span { display: block; width: 100%; margin-top: calc(.8 * var(--s)); white-space: nowrap; }

/* six access tiles: white capsule with a gradient inner pill and the measured figure */
.links__title { width: max-content; margin: 0 auto; text-align: center; text-transform: uppercase; color: var(--orange); font-size: max(10px, calc(14 * var(--s))); font-weight: 700; line-height: calc(16 * var(--s)); }
.tiles { display: grid; grid-template-columns: repeat(3, calc(196.08 * var(--s))); column-gap: calc(12.9 * var(--s)); row-gap: calc(12.89 * var(--s)); margin-top: calc(12 * var(--s)); }
.tile { position: relative; display: flex; align-items: center; height: calc(46.58 * var(--s)); padding: 0 calc(15.54 * var(--s)) 0 calc(3.88 * var(--s)); border-radius: calc(24 * var(--s)); background: #fff; box-shadow: 0 0 0 calc(1.29 * var(--s)) #FFC194; transition: transform .25s cubic-bezier(.16,1,.3,1), filter .25s ease-out; }
.tile__btn { display: flex; align-items: center; width: calc(123.3 * var(--s)); height: calc(42.36 * var(--s)); padding: calc(5.18 * var(--s)) calc(15.54 * var(--s)); border-radius: calc(22 * var(--s)); background: var(--grad); box-shadow: 0 calc(1.29 * var(--s)) calc(5.18 * var(--s)) rgba(128,43,0,.41), inset 0 calc(1.29 * var(--s)) calc(2.59 * var(--s)) #FFCD94; transition: filter .25s ease-out; }
.tile__btn img { width: calc(32 * var(--s)); height: calc(32 * var(--s)); }
.tile__txt { display: flex; flex-direction: column; width: calc(60.86 * var(--s)); text-align: center; text-transform: uppercase; letter-spacing: -.02em; }
.tile__txt b { font-size: max(10px, calc(12 * var(--s))); font-weight: 900; line-height: max(11px, calc(12.95 * var(--s))); }
.tile__txt small { font-size: max(10px, calc(10.36 * var(--s))); font-weight: 500; line-height: max(11px, calc(11 * var(--s))); margin-top: calc(2.6 * var(--s)); text-transform: none; }
.tile__ms { position: absolute; right: calc(15.54 * var(--s)); min-width: calc(43 * var(--s)); text-align: right; font-size: max(10px, calc(14 * var(--s))); font-weight: 700; line-height: calc(16 * var(--s)); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tile.is-empty .tile__unit { display: none; }
.tile.is-busy .tile__val { animation: probe 1s ease-in-out infinite alternate; }
@keyframes probe { from { opacity: 1; } to { opacity: .3; } }

@media (hover: hover) {
  .pill:hover, .card:hover, .tile:hover, .btn:hover { transform: translateY(calc(-3 * var(--s))); }
  .pill:hover, .card:hover, .btn:hover, .tile:hover .tile__btn { filter: brightness(1.06) saturate(1.08); }
}
.pill:active, .card:active, .tile:active, .btn:active { transform: translateY(calc(-1 * var(--s))); transition-duration: .08s; }

@media (prefers-reduced-motion: reduce) {
  .pill, .card, .tile, .btn, .tile__btn { transition: none; }
  .tile.is-busy .tile__val { animation: none; opacity: .5; }
}

/* mobile: page 440 × 1012 (frame 1062 minus the 50px status bar, header 60 included); icons + centred logo; mascot at the bottom.
   One screen, no scrolling (client, 2026-10-27): header + title + 3 panels keep Figma px × --s (738 of the 1012 Figma px),
   scaled to fit the width or, on a short phone, the height. The mascot (274) only takes the height left over and disappears
   when that is under 80px (a crumb-sized tiger reads as a glitch). --vh = small viewport (browser bars shown), vh fallback. */
:root { --vh: 1vh; }
@supports (height: 1svh) { :root { --vh: 1svh; } }
@media (max-width: 1247px), (max-height: 645px) {
  :root {
    --s: clamp(0.7px, min(calc(100vw / 440), calc(100 * var(--vh) / 738)), 1.3px);
    --mh: clamp(0px, calc(100 * var(--vh) - 738 * var(--s)), calc(274 * var(--s)));
  }
  .hdr { height: calc(60 * var(--s)); }
  .hdr__in { width: calc(440 * var(--s)); }
  .hdr__logo { left: calc(172.48 * var(--s)); top: calc(14.23 * var(--s)); }
  .hdr__logo img { width: calc(91.2 * var(--s)); }
  .hdr__icon { display: block; overflow: hidden; }
  .hdr__icon--games { left: calc(14.21 * var(--s)); top: calc(11.6 * var(--s)); }
  .hdr__icon--games img { width: calc(39.16 * var(--s)); height: auto; }
  .hdr__icon--vip { left: calc(378.4 * var(--s)); top: calc(14.08 * var(--s)); width: calc(47.52 * var(--s)); height: calc(32.85 * var(--s)); }
  .hdr__icon--vip img { width: calc(47.86 * var(--s)); height: auto; margin: calc(-2.48 * var(--s)) 0 0 calc(-.22 * var(--s)); }
  .hdr__auth { display: none; }

  .page { height: auto; min-height: calc(100 * var(--vh) - 60 * var(--s)); overflow: visible; background-image: url('assets/bg-mb.jpg'); background-position: top center; }
  .stage { width: calc(440 * var(--s)); height: calc(678 * var(--s) + var(--mh)); } /* page 1012 minus the 60 header, minus the mascot's give */
  .mascot { left: calc(220 * var(--s) - var(--mh) * 181 / 274); top: calc(672 * var(--s)); width: calc(var(--mh) * 362 / 274); height: var(--mh); container-type: size; } /* page y 732 */
  .mascot img { width: 100%; height: 100%; }
  @container (max-height: 79px) { .mascot img { visibility: hidden; } }
  .col { left: calc(10 * var(--s)); top: calc(13.1 * var(--s)); width: calc(420 * var(--s)); gap: calc(16 * var(--s)); } /* page y 73.1 */
  .title img { width: calc(420 * var(--s)); height: calc(129.5 * var(--s)); }
  .col > .panel { margin-top: calc(4 * var(--s)); } /* panels 20 apart inside a 16 column gap */
  .col > .panel--support { margin-top: 0; }

  .panel { width: calc(420 * var(--s)); border-radius: calc(15.51 * var(--s)); box-shadow: inset 0 0 0 calc(.51 * var(--s)) #FFBF2B, 0 calc(3 * var(--s)) calc(5 * var(--s)) rgba(0,0,0,.15), 0 calc(2.05 * var(--s)) 0 #FFCE5D, inset 0 calc(-1.03 * var(--s)) calc(2.05 * var(--s)) #FFD65B; }
  .panel--support { height: calc(181.56 * var(--s)); padding: calc(12.52 * var(--s)) calc(11.6 * var(--s)); }
  .pills { grid-template-columns: repeat(2, calc(195.4 * var(--s))); column-gap: calc(6 * var(--s)); row-gap: calc(12 * var(--s)); grid-auto-flow: column; grid-template-rows: repeat(3, auto); }
  .pill { height: calc(44.18 * var(--s)); padding-left: calc(18.16 * var(--s)); gap: calc(4.11 * var(--s)); font-size: calc(15.29 * var(--s)); }
  .pill__ic--live { width: calc(25.55 * var(--s)); }
  .pill__ic--tg { width: calc(25.06 * var(--s)); }
  .pill__ic--promo { width: calc(21.32 * var(--s)); }
  .pill__ic--complaint { width: calc(23.79 * var(--s)); }
  .pill__ic--code { width: calc(18.66 * var(--s)); }

  .panel--cards { height: calc(162.19 * var(--s)); padding: calc(12.51 * var(--s)); }
  .cards { width: calc(394.97 * var(--s)); height: calc(137.17 * var(--s)); column-gap: calc(12 * var(--s)); row-gap: calc(10.58 * var(--s)); }
  .card, .cards li:nth-child(n+5) .card { width: calc(89.74 * var(--s)); height: calc(63.29 * var(--s)); padding-top: calc(4.53 * var(--s)); gap: calc(4.23 * var(--s)); border-width: calc(.53 * var(--s)); border-radius: calc(8.47 * var(--s)); font-size: max(10px, calc(10 * var(--s))); line-height: max(12px, calc(12 * var(--s))); box-shadow: 0 calc(1.06 * var(--s)) calc(3.17 * var(--s)) calc(1.06 * var(--s)) rgba(0,0,0,.15), 0 calc(.53 * var(--s)) calc(1.06 * var(--s)) rgba(0,0,0,.3), inset 0 calc(-1 * var(--s)) calc(7 * var(--s)) calc(1 * var(--s)) rgba(255,252,207,.7); }
  .card img { width: calc(38 * var(--s)); height: calc(38 * var(--s)); }
  .card span { width: 100%; margin-top: 0; letter-spacing: -.01em; }
  /* s under ~0.78 (a phone this short, or this narrow): the 10px floor makes "Thiện nguyện" 3px wider than its card → tighter tracking */
  @media (max-height: 575px), (max-width: 343px) { .card span { letter-spacing: -.07em; } }

  .panel--links { height: calc(118.76 * var(--s)); padding: calc(12.52 * var(--s)) calc(12.63 * var(--s)); }
  .links__title { font-size: calc(12 * var(--s)); line-height: calc(14 * var(--s)); }
  .tiles { grid-template-columns: repeat(3, calc(125.82 * var(--s))); column-gap: calc(8.64 * var(--s)); row-gap: calc(8.64 * var(--s)); margin-top: calc(12 * var(--s)); }
  .tile { height: calc(29.54 * var(--s)); padding: 0 max(4px, calc(10.41 * var(--s))) 0 calc(2.6 * var(--s)); border-radius: calc(15 * var(--s)); box-shadow: 0 0 0 calc(.87 * var(--s)) #FFC194; }
  .tile__btn { width: auto; min-width: calc(78.85 * var(--s)); height: calc(24.94 * var(--s)); padding: 0 calc(4 * var(--s)) 0 calc(10.41 * var(--s)); border-radius: calc(13 * var(--s)); box-shadow: 0 calc(.83 * var(--s)) calc(3.3 * var(--s)) rgba(128,43,0,.41), inset 0 calc(.83 * var(--s)) calc(1.66 * var(--s)) #FFCD94; }
  .tile__btn img { width: calc(18 * var(--s)); height: calc(18 * var(--s)); }
  .tile__txt { width: auto; min-width: calc(40.79 * var(--s)); letter-spacing: -.03em; }
  /* Figma sets 7.8 / 6.9 / 8.7 px here; 10 px is the floor the page keeps readable (deliberate deviation) */
  .tile__txt b { font-size: max(10px, calc(10 * var(--s))); line-height: max(10px, calc(10 * var(--s))); }
  .tile__txt small { font-size: max(10px, calc(10 * var(--s))); line-height: max(10px, calc(10 * var(--s))); margin-top: calc(1 * var(--s)); }
  .tile__ms { right: max(4px, calc(10.41 * var(--s))); min-width: 0; font-size: max(10px, calc(10 * var(--s))); line-height: calc(11 * var(--s)); }
}