@property --border-angle {

  syntax: '<angle>';

  inherits: false;

  initial-value: 0deg;

}

/* 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; }







/* Exo 2 ExtraBold (OFL, Google Fonts), subset to 0-9 m s space — only: the speed figures, matched to the reference board the user sent (2026-10-28) */



@font-face { font-family: 'Exo 2 Digits'; font-style: normal; font-weight: 800; font-display: swap; src: url('assets/fonts/exo2-800-digits.woff2') format('woff2'); }



/* 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 {
  min-height: 100vh;
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background: url('assets/bg-pc.jpg') center top / cover no-repeat;
}



.stage { position: relative; width: calc(1920 * var(--s)); height: calc(1080 * var(--s)); }



.stage > * { position: absolute; }







.logo { left: 50%; top: calc(93 * var(--s)); transform: translateX(-50%); }

.logo img { width: calc(520 * 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(170 * var(--s)); top: calc(310 * var(--s));

  width: calc(690 * var(--s)); height: calc(700 * var(--s));

  position: absolute; overflow: hidden; user-select: none;

}

.promo-track { position: relative; width: 100%; height: 100%; }

.promo-slide {

  position: absolute; inset: 0; width: 100%; height: 100%;

  display: flex; align-items: center; justify-content: center;

  opacity: 0; pointer-events: none;

  transform: translate3d(100%, 0, 0);

}

.promo-slide.is-active {

  opacity: 1; pointer-events: auto;

  transform: translate3d(0, 0, 0); z-index: 2;

}

.promo-slide picture { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }

.promo-slide img {

  max-width: 100%; max-height: 100%; width: auto; height: auto;

  object-fit: contain;

  filter: drop-shadow(0 calc(12 * var(--s)) calc(22 * var(--s)) rgba(0, 0, 0, 0.42));

  transition: transform .35s cubic-bezier(.16, 1, .3, 1);

}

.promo-carousel:hover .promo-slide.is-active img { transform: scale(1.02); }

.promo-dots {

  position: absolute; bottom: calc(14 * var(--s)); left: 50%;

  transform: translateX(-50%); display: flex; align-items: center;

  gap: calc(9 * var(--s)); z-index: 10;

}

.promo-dot {

  width: calc(10 * var(--s)); height: calc(10 * var(--s)); border-radius: calc(5 * var(--s));

  background: rgba(255, 255, 255, 0.45); border: calc(1 * var(--s)) solid rgba(245, 130, 32, 0.65);

  cursor: pointer; padding: 0; outline: none;

  transition: all .35s cubic-bezier(.16, 1, .3, 1);

}

.promo-dot.is-active {

  width: calc(28 * var(--s));

  background: linear-gradient(90deg, #F58220, #FFB300);

  border-color: #FFFFFF;

  box-shadow: 0 0 calc(8 * var(--s)) rgba(245, 130, 32, 0.85);

}

.promo-dot:hover:not(.is-active) {

  background: rgba(255, 255, 255, 0.85);

  transform: scale(1.2);

}







/* 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;

  text-align: center; white-space: nowrap; line-height: 1;

  transition: transform .25s cubic-bezier(.16,1,.3,1), filter .25s ease-out;

}



/* Running Orange Neon Border Beam quanh 6 Card Server */

.tile::before {

  content: '';

  position: absolute;

  left: calc(-2 * var(--t));

  top: calc(-2 * var(--t));

  width: calc(268 * var(--t));

  height: calc(133.5 * var(--t));

  border-radius: calc(16 * var(--t));

  padding: calc(2.2 * var(--t));

  background: conic-gradient(

    from var(--border-angle),

    transparent 55%,

    rgba(245, 130, 32, 0.2) 72%,

    #F58220 85%,

    #FFB74D 95%,

    #FFFFFF 100%

  );

  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

  -webkit-mask-composite: xor;

  mask-composite: exclude;

  pointer-events: none;

  animation: spinNeonBorder 3.6s linear infinite;

  filter: drop-shadow(0 0 calc(6 * var(--t)) rgba(245, 130, 32, 0.95)) drop-shadow(0 0 calc(14 * var(--t)) rgba(255, 153, 0, 0.5));

  z-index: 1;

}



/* Stagger lệch pha cho 6 server chạy đuổi nhau đẹp mắt */

.links li:nth-child(1) .tile::before { animation-delay: 0s; }

.links li:nth-child(2) .tile::before { animation-delay: -0.6s; }

.links li:nth-child(3) .tile::before { animation-delay: -1.2s; }

.links li:nth-child(4) .tile::before { animation-delay: -1.8s; }

.links li:nth-child(5) .tile::before { animation-delay: -2.4s; }

.links li:nth-child(6) .tile::before { animation-delay: -3.0s; }



@keyframes spinNeonBorder {

  to {

    --border-angle: 360deg;

  }

}



.tile__ms { position: absolute; left: 0; width: calc(264 * var(--t)); top: calc(46.97 * var(--t)); height: calc(49 * var(--t)); z-index: 3; font-family: 'Exo 2 Digits', var(--font); font-weight: 800; font-size: calc(44 * var(--t)); line-height: calc(49 * var(--t)); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }



.tile__label {



  position: absolute; left: 0; width: calc(264 * var(--t)); top: calc(20 * var(--t)); height: calc(25 * var(--t));



  display: flex; align-items: center; justify-content: center; gap: calc(7 * var(--t));



  text-transform: uppercase; font-size: calc(17.5 * var(--t)); line-height: 1; letter-spacing: -.02em;



  color: var(--speed); font-weight: 900;



}



.tile__flag-box {



  display: inline-flex; align-items: center; justify-content: center;



  width: calc(28 * var(--t)); height: calc(19 * var(--t)); border-radius: calc(3.5 * var(--t));



  overflow: hidden; box-shadow: 0 calc(1.5 * var(--t)) calc(4 * var(--t)) rgba(0, 0, 0, 0.28);



  border: calc(0.8 * var(--t)) solid rgba(255, 255, 255, 0.85); flex-shrink: 0;



  transition: transform .25s cubic-bezier(.16, 1, .3, 1), box-shadow .25s ease-out;



}



.tile__flag { width: 100%; height: 100%; object-fit: cover; display: block; }



.tile__country { display: inline-block; white-space: nowrap; }



.tile__live-dot {



  width: calc(6.5 * var(--t)); height: calc(6.5 * var(--t)); background: #00E676; border-radius: 50%;



  flex-shrink: 0; box-shadow: 0 0 calc(5 * var(--t)) #00E676;



  animation: tilePulse 2s infinite ease-in-out;



}



@keyframes tilePulse {



  0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 calc(4 * var(--t)) #00E676; }



  50% { transform: scale(1.2); opacity: 0.75; box-shadow: 0 0 calc(8 * var(--t)) #00E676; }



}



.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; z-index: 4; }



.tile.is-empty .tile__unit { display: none; }







/* 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 { filter: drop-shadow(0 calc(8 * var(--t)) calc(18 * var(--t)) rgba(245, 130, 32, 0.45)); }

.tile:hover::before {

  animation-duration: 2s;

  filter: drop-shadow(0 0 calc(10 * var(--t)) rgba(245, 130, 32, 1)) drop-shadow(0 0 calc(22 * var(--t)) rgba(255, 160, 0, 0.8));

}



.tile:hover .tile__flag-box { transform: scale(1.1); box-shadow: 0 calc(2.5 * var(--t)) calc(6 * var(--t)) rgba(0, 0, 0, 0.35); }



  .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, .tile__flag-box { transition: none; }



  .tile__live-dot { animation: none; }



}







/* mobile: frame 430 × 896 (956 minus the 60px status bar); logo + title centred (Figma has them 6.5px right of centre).



   One screen, no scrolling (client, 2026-10-27): logo, title, tiles and apps keep Figma px × --s (525 of the 896 Figma px);



   the girl art (371) gives up the height the phone lacks, down to 150. Shorter than that, the whole frame scales down.



   --vh = the small viewport (browser bars shown), so nothing sits under Safari's toolbar. Landscape phones (s < 0.7) scroll. */



:root { --vh: 1vh; }



@supports (height: 1svh) { :root { --vh: 1svh; } }



@media (max-width: 1055px), (max-height: 593px) {



  :root {



    --s: clamp(0.7px, min(calc(100vw / 430), calc(100 * var(--vh) / 675)), 1.3px);



    --t: calc(var(--s) * 0.4957);



    --gh: clamp(calc(150 * var(--s)), calc(100 * var(--vh) - 525 * var(--s)), calc(371 * var(--s)));



  }



  .page { height: auto; min-height: calc(100 * var(--vh)); overflow: visible; background-image: url('assets/bg-mb.jpg'); background-position: top center; }



  .stage { width: calc(430 * var(--s)); height: calc(525 * var(--s) + var(--gh)); }



  .logo { left: 50%; top: calc(15 * var(--s)); transform: translateX(-50%); }

  .logo img { width: calc(240 * var(--s)); height: auto; }



  .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(215 * var(--s) - var(--gh) * 188 / 371);

    top: calc(305.71 * var(--s));

    width: calc(var(--gh) * 376 / 371);

    height: var(--gh);

    overflow: hidden;

  }

  .promo-dots { bottom: calc(5 * var(--s)); gap: calc(6 * var(--s)); }

  .promo-dot { width: calc(7 * var(--s)); height: calc(7 * var(--s)); border-radius: calc(3.5 * var(--s)); }

  .promo-dot.is-active { width: calc(18 * var(--s)); }



  .apps { left: calc(11 * var(--s)); top: calc(321.71 * var(--s) + var(--gh)); 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)); }



}

/* ==========================================================================
   E390.WIN ENTERPRISE SEO ARTICLES HUB & LUXURY CARDS GRID
   ========================================================================== */
.seo-hub-section {
  width: 100%;
  max-width: 1240px;
  margin: calc(45 * var(--s)) auto calc(70 * var(--s));
  padding: 0 20px;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #E2E8F0;
  z-index: 10;
  position: relative;
}

.seo-hub-container {
  background: linear-gradient(180deg, rgba(20, 25, 36, 0.96) 0%, rgba(13, 16, 23, 0.98) 100%);
  border: 1px solid rgba(245, 130, 32, 0.25);
  border-radius: 24px;
  padding: 36px 36px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(245, 130, 32, 0.15);
  backdrop-filter: blur(24px);
}

.seo-hub-header {
  text-align: center;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.seo-hub-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(245, 130, 32, 0.12);
  border: 1px solid rgba(245, 130, 32, 0.35);
  color: #F58220;
  padding: 6px 18px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.seo-hub-title {
  font-size: clamp(20px, 2.3vw, 28px);
  font-weight: 900;
  color: #FFFFFF;
  margin: 0 0 10px;
  line-height: 1.35;
  letter-spacing: -0.3px;
}

.seo-hub-subtitle {
  font-size: 14.5px;
  color: #94A3B8;
  margin: 0 auto;
  max-width: 820px;
  line-height: 1.6;
}

.seo-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 20px;
}

.seo-card-item {
  background: rgba(26, 32, 46, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.seo-card-item:hover {
  transform: translateY(-4px);
  background: rgba(32, 40, 58, 0.9);
  border-color: rgba(245, 130, 32, 0.6);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(245, 130, 32, 0.2);
}

.seo-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.seo-card-tag {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(245, 130, 32, 0.15);
  border: 1px solid rgba(245, 130, 32, 0.35);
  color: #FFB347;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.seo-card-date {
  font-size: 12px;
  color: #64748B;
  font-weight: 500;
}

.seo-card-title {
  font-size: 16px;
  line-height: 1.45;
  font-weight: 700;
  margin: 0 0 10px;
}

.seo-card-title a {
  color: #FFFFFF;
  text-decoration: none;
  transition: color 0.2s ease;
}

.seo-card-title a:hover {
  color: #F58220;
}

.seo-card-desc {
  font-size: 13.5px;
  color: #94A3B8;
  line-height: 1.6;
  margin: 0 0 18px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.seo-card-footer {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.seo-card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #F58220 !important;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: gap 0.2s ease, color 0.2s ease;
}

.seo-card-link:hover {
  color: #FFB347 !important;
  gap: 12px;
}

.seo-hub-footer {
  text-align: center;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 12.5px;
  color: #64748B;
  line-height: 1.65;
}

.seo-hub-footer strong {
  color: #94A3B8;
}

@media (max-width: 768px) {
  .seo-hub-container {
    padding: 24px 16px;
    border-radius: 18px;
  }
  .seo-cards-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .seo-card-item {
    padding: 16px 18px;
  }
  .seo-card-title {
    font-size: 15px;
  }
}