/* Be Vietnam Pro Black, self-hosted (Google Fonts build, OFL) — closest free face to Figma's SVN-Gilroy Heavy */
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 900; font-display: swap; src: url('assets/fonts/be-vietnam-pro-900-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: 'Be Vietnam Pro'; font-style: normal; font-weight: 900; font-display: swap; src: url('assets/fonts/be-vietnam-pro-900-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 chuyển đổi "Link truy cập tốc độ cao". Geometry = Figma px × --s.
   PC: frame 1920×1080 = one screen, scaled to fit width AND height (6 links + app buttons never below the fold).
   Mobile frame 430 wide (iOS status bar dropped, page starts at Figma y=60), scales with the width up to 1.3×. It takes over
   wherever the PC frame would drop below 0.55× (narrower than 1056px or lower than 594px): there the tile lettering and the
   "TRUY CẬP NGAY" pill become unreadable. Keep this query in sync with the <source media> in index.html.
   --t = tile unit: the mobile tile is the PC tile × 0.4957 in Figma, so tiles are drawn once in PC px × --t. */

:root {
  --brand: #F58220;
  --speed: #FF8D28;
  --s: min(calc(100vw / 1920), calc(100vh / 1080));
  --t: var(--s);
  --font: "Be Vietnam Pro", "Segoe UI", system-ui, sans-serif;
  scrollbar-color: var(--brand) #FCEFD1;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--font); font-weight: 900; color: var(--speed); 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 { 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; }

.page { height: 100vh; overflow: hidden; display: grid; place-items: center; background: url('assets/bg-pc.jpg') center / cover no-repeat; }
.stage { position: relative; width: calc(1920 * var(--s)); height: calc(1080 * var(--s)); }
.stage > * { position: absolute; }

.logo { left: calc(815 * var(--s)); top: calc(93 * var(--s)); }
.logo img { width: calc(290 * var(--s)); height: auto; }
.title { left: calc(589.7 * var(--s)); top: calc(205.1 * var(--s)); line-height: 0; }
.title img { width: calc(742 * var(--s)); height: auto; }
.girl { left: calc(187 * var(--s)); top: calc(324 * var(--s)); }
.girl img { width: calc(661 * var(--s)); height: calc(688 * var(--s)); }

/* six link tiles */
.links { left: calc(891 * var(--s)); top: calc(391 * var(--s)); display: grid; grid-template-columns: repeat(3, auto); gap: calc(20 * var(--t)); }
.tile {
  position: relative; display: block; width: calc(264 * var(--t)); height: calc(151 * var(--t)); border-radius: calc(14 * var(--t));
  background: url('assets/tile.png') 0 0 / calc(264 * var(--t)) calc(129.5 * var(--t)) no-repeat; /* the export is already clipped to the tile frame */
  text-align: center; white-space: nowrap; line-height: 1;
  transition: transform .25s cubic-bezier(.16,1,.3,1), filter .25s ease-out;
}
.tile__label, .tile__ms { position: absolute; left: 0; width: calc(268.4 * var(--t)); }
/* sizes/tracking/tops measured against the Figma ink (docs/ink.py): Be Vietnam Pro runs wider than SVN-Gilroy at the same cap height */
.tile__label { text-transform: uppercase; top: calc(25.47 * var(--t)); height: calc(23 * var(--t)); font-size: calc(21 * var(--t)); line-height: calc(23 * var(--t)); letter-spacing: -.04em; word-spacing: .06em; }
.tile__ms { top: calc(46.97 * var(--t)); height: calc(49 * var(--t)); font-size: calc(44 * var(--t)); line-height: calc(49 * var(--t)); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.tile__btn { position: absolute; left: calc(38 * var(--t)); top: calc(102 * var(--t)); width: calc(188 * var(--t)); height: auto; transition: filter .25s ease-out; }
.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; } }

/* app downloads */
.apps { left: calc(922.7 * var(--s)); top: calc(773 * var(--s)); display: flex; gap: calc(48 * var(--s)); }
.app { --g: 16; display: flex; gap: calc(var(--g) * var(--s)); border-radius: calc(12 * var(--s)); transition: transform .25s cubic-bezier(.16,1,.3,1); }
.app--android { --g: 17.61; }
.app__icon { width: calc(120 * var(--s)); height: auto; }
.app__col { display: flex; flex-direction: column; align-items: flex-start; gap: calc(8.82 * var(--s)); }
.app__badge { width: auto; height: calc(60.1 * var(--s)); }
.app__btn { width: calc(223.47 * var(--s)); height: auto; transition: filter .25s ease-out; }

@media (hover: hover) {
  .tile:hover, .app:hover { transform: translateY(calc(-4 * var(--t))); }
  .tile:hover .tile__btn, .app:hover .app__btn { filter: brightness(1.08) saturate(1.1); }
}
.tile:active, .app:active { transform: translateY(calc(-1 * var(--t))); transition-duration: .08s; }

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

/* mobile: frame 430 × 896 (956 minus the 60px status bar); logo + title centred (Figma has them 6.5px right of centre) */
@media (max-width: 1055px), (max-height: 593px) {
  :root { --s: clamp(0.7px, calc(100vw / 430), 1.3px); --t: calc(var(--s) * 0.4957); }
  .page { display: block; height: auto; min-height: 100vh; min-height: 100dvh; overflow: visible; background-image: url('assets/bg-mb.jpg'); background-position: top center; }
  .stage { width: calc(430 * var(--s)); height: calc(896 * var(--s)); margin: 0 auto; }
  .logo { left: calc(144.78 * var(--s)); top: calc(13 * var(--s)); }
  .logo img { width: calc(140.44 * var(--s)); }
  .title { left: calc(52.5 * var(--s)); top: calc(72.4 * var(--s)); }
  .title img { width: calc(325 * var(--s)); }
  .links { left: calc(11 * var(--s)); top: calc(128 * var(--s)); column-gap: calc(7.695 * var(--s)); row-gap: calc(12 * var(--s)); }
  .girl { left: calc(27 * var(--s)); top: calc(305.71 * var(--s)); }
  .girl img { width: calc(376 * var(--s)); height: calc(371 * var(--s)); }
  .apps { left: calc(11 * var(--s)); top: calc(692.71 * var(--s)); width: calc(408 * var(--s)); justify-content: center; gap: calc(40 * var(--s)); }
  .app { flex-direction: column; align-items: center; gap: calc(6 * var(--s)); border-radius: calc(8 * var(--s)); }
  .app__icon { width: calc(80 * var(--s)); }
  .app__col { align-items: center; gap: calc(6 * var(--s)); }
  .app__badge { height: calc(40.9 * var(--s)); }
  .app__btn { width: calc(152 * var(--s)); }
}