@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(44 * var(--t)); height: calc(50 * var(--t));
  z-index: 5; font-family: 'Exo 2 Digits', var(--font); font-weight: 900; font-size: calc(44 * var(--t));
  line-height: calc(50 * var(--t)); letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  display: flex !important; align-items: center !important; justify-content: center !important;
  color: #B43C00 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.95), 0 2px 6px rgba(180, 60, 0, 0.35) !important;
  pointer-events: none;
}



.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 PING CONTRAST & LUXURY EDITORIAL MAGAZINE SECTION
   ========================================================================== */

/* 1. TILE PING VALUES - ULTRA HIGH CONTRAST & CRISP LEGIBILITY */
.tile__ms {
  position: absolute; left: 0; width: calc(264 * var(--t)); top: calc(44 * var(--t)); height: calc(50 * var(--t));
  z-index: 5; font-family: 'Exo 2 Digits', var(--font); font-weight: 900; font-size: calc(44 * var(--t));
  line-height: calc(50 * var(--t)); letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  display: flex !important; align-items: center !important; justify-content: center !important;
  color: #B43C00 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.95), 0 2px 6px rgba(180, 60, 0, 0.35) !important;
  pointer-events: none;
}

.tile .tile__val {
  color: #B43C00 !important;
  font-weight: 900 !important;
  display: inline-block;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.95), 0 2px 6px rgba(180, 60, 0, 0.35) !important;
}

.tile .tile__unit {
  font-size: calc(20 * var(--t)) !important;
  font-weight: 800 !important;
  color: #D35400 !important;
  margin-left: calc(4 * var(--t));
  display: inline-block !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

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

.tile .tile__label,
.tile .tile__country {
  color: #9C3200 !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

/* 2. GRAND LUXURY EDITORIAL HUB (#bai-viet-e39) */
#bai-viet-e39

/* ==========================================================================
   E390.WIN PING CONTRAST & LUXURY EDITORIAL MAGAZINE SECTION
   ========================================================================== */

/* 1. TILE PING VALUES - ULTRA HIGH CONTRAST & CRISP LEGIBILITY */
.tile__ms {
  position: absolute;
  left: 0;
  width: calc(264 * var(--t));
  top: calc(44 * var(--t));
  height: calc(50 * var(--t));
  z-index: 5;
  font-family: 'Exo 2 Digits', var(--font);
  font-weight: 900;
  font-size: calc(44 * var(--t));
  line-height: calc(50 * var(--t));
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #B43C00 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.95), 0 2px 6px rgba(180, 60, 0, 0.35) !important;
  pointer-events: none;
}

.tile .tile__val {
  color: #B43C00 !important;
  font-weight: 900 !important;
  display: inline-block;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.95), 0 2px 6px rgba(180, 60, 0, 0.35) !important;
}

.tile .tile__unit {
  font-size: calc(20 * var(--t)) !important;
  font-weight: 800 !important;
  color: #D35400 !important;
  margin-left: calc(4 * var(--t));
  display: inline-block !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

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

.tile .tile__label,
.tile .tile__country {
  color: #9C3200 !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

/* 2. GRAND LUXURY EDITORIAL HUB (#bai-viet-e39) */
#bai-viet-e39.seo-hub-section {
  width: 100% !important;
  max-width: 1400px !important;
  margin: calc(60 * var(--s)) auto calc(80 * var(--s)) !important;
  padding: 0 24px !important;
  box-sizing: border-box !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  color: #E2E8F0 !important;
  z-index: 10 !important;
  position: relative !important;
  background: transparent !important;
}

#bai-viet-e39 .seo-hub-container {
  background: radial-gradient(circle at 50% 0%, rgba(30, 38, 54, 0.95) 0%, rgba(13, 17, 24, 0.98) 100%) !important;
  border: 1px solid rgba(245, 130, 32, 0.35) !important;
  border-radius: 28px !important;
  padding: 48px 40px !important;
  box-shadow: 0 35px 100px rgba(0, 0, 0, 0.85), 0 0 40px rgba(245, 130, 32, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(28px) !important;
  box-sizing: border-box !important;
}

#bai-viet-e39 .seo-hub-header {
  text-align: center !important;
  margin-bottom: 40px !important;
  padding-bottom: 28px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#bai-viet-e39 .seo-hub-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(245, 130, 32, 0.15) !important;
  border: 1px solid rgba(245, 130, 32, 0.45) !important;
  color: #FFB347 !important;
  padding: 8px 22px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  margin-bottom: 16px !important;
  box-shadow: 0 4px 15px rgba(245, 130, 32, 0.2) !important;
}

#bai-viet-e39 .seo-hub-title {
  font-size: 34px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  margin: 0 0 14px 0 !important;
  background: linear-gradient(135deg, #FFFFFF 0%, #FFD180 50%, #F58220 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  letter-spacing: -0.5px !important;
  text-transform: uppercase !important;
}

#bai-viet-e39 .seo-hub-subtitle {
  font-size: 16px !important;
  color: #94A3B8 !important;
  max-width: 820px !important;
  margin: 0 auto 24px auto !important;
  line-height: 1.6 !important;
}

/* Category Filter Tabs */
#bai-viet-e39 .seo-category-tabs {
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 20px !important;
}

#bai-viet-e39 .seo-cat-tab {
  padding: 8px 18px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #CBD5E1 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

#bai-viet-e39 .seo-cat-tab.is-active,
#bai-viet-e39 .seo-cat-tab:hover {
  background: linear-gradient(135deg, #F58220 0%, #E65100 100%) !important;
  color: #FFFFFF !important;
  border-color: #F58220 !important;
  box-shadow: 0 4px 14px rgba(245, 130, 32, 0.4) !important;
}

/* 3. FEATURED HERO ARTICLE CARD */
#bai-viet-e39 .seo-featured-hero {
  margin-bottom: 40px !important;
}

#bai-viet-e39 .hero-card {
  display: grid !important;
  grid-template-columns: 1.15fr 1fr !important;
  gap: 32px !important;
  background: linear-gradient(145deg, rgba(32, 41, 58, 0.85) 0%, rgba(18, 23, 33, 0.95) 100%) !important;
  border: 1px solid rgba(245, 130, 32, 0.4) !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6) !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease !important;
}

#bai-viet-e39 .hero-card:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(245, 130, 32, 0.8) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.75), 0 0 35px rgba(245, 130, 32, 0.25) !important;
}

#bai-viet-e39 .hero-card-media {
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
  min-height: 280px !important;
  background: #0B0E14 !important;
  text-decoration: none !important;
}

#bai-viet-e39 .hero-card-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.5s ease !important;
}

#bai-viet-e39 .hero-card:hover .hero-card-media img {
  transform: scale(1.06) !important;
}

#bai-viet-e39 .hero-badge {
  position: absolute !important;
  top: 18px !important;
  left: 18px !important;
  background: linear-gradient(135deg, #FF4B2B 0%, #FF416C 100%) !important;
  color: #FFFFFF !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
  letter-spacing: 0.6px !important;
  box-shadow: 0 4px 12px rgba(255, 65, 108, 0.45) !important;
  text-transform: uppercase !important;
}

#bai-viet-e39 .hero-card-content {
  padding: 36px 36px 36px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

#bai-viet-e39 .hero-card-meta {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 14px !important;
  font-size: 13px !important;
  color: #94A3B8 !important;
}

#bai-viet-e39 .meta-tag {
  background: rgba(245, 130, 32, 0.15) !important;
  border: 1px solid rgba(245, 130, 32, 0.35) !important;
  color: #FFB347 !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  border-radius: 6px !important;
  text-transform: uppercase !important;
  font-size: 11.5px !important;
}

#bai-viet-e39 .meta-dot {
  color: rgba(255, 255, 255, 0.2) !important;
}

#bai-viet-e39 .hero-card-title {
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  margin: 0 0 16px 0 !important;
}

#bai-viet-e39 .hero-card-title a {
  color: #FFFFFF !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

#bai-viet-e39 .hero-card-title a:hover {
  color: #F58220 !important;
}

#bai-viet-e39 .hero-card-desc {
  font-size: 14.5px !important;
  color: #94A3B8 !important;
  line-height: 1.65 !important;
  margin: 0 0 24px 0 !important;
}

#bai-viet-e39 .btn-read-hero {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: linear-gradient(135deg, #F58220 0%, #D35400 100%) !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  padding: 12px 28px !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  box-shadow: 0 6px 20px rgba(245, 130, 32, 0.35) !important;
  transition: all 0.25s ease !important;
}

#bai-viet-e39 .btn-read-hero:hover {
  background: linear-gradient(135deg, #FFA040 0%, #E65100 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(245, 130, 32, 0.5) !important;
}

/* 4. 3-COLUMN LUXURY CARDS GRID */
#bai-viet-e39 .seo-cards-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 28px !important;
  box-sizing: border-box !important;
}

#bai-viet-e39 .seo-card-item {
  background: linear-gradient(145deg, rgba(28, 35, 50, 0.8) 0%, rgba(15, 19, 28, 0.95) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.45) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-sizing: border-box !important;
}

#bai-viet-e39 .seo-card-item:hover {
  transform: translateY(-6px) !important;
  background: linear-gradient(145deg, rgba(34, 43, 62, 0.95) 0%, rgba(19, 24, 36, 1) 100%) !important;
  border-color: rgba(245, 130, 32, 0.55) !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.65), 0 0 25px rgba(245, 130, 32, 0.2) !important;
}

#bai-viet-e39 .card-thumb-wrap {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  background: #0B0E14 !important;
  text-decoration: none !important;
}

#bai-viet-e39 .card-thumb {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.45s ease !important;
}

#bai-viet-e39 .seo-card-item:hover .card-thumb {
  transform: scale(1.08) !important;
}

#bai-viet-e39 .card-badge {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  background: rgba(13, 17, 24, 0.85) !important;
  border: 1px solid rgba(245, 130, 32, 0.6) !important;
  color: #FFB347 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  backdrop-filter: blur(8px) !important;
}

#bai-viet-e39 .card-body {
  padding: 22px !important;
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
}

#bai-viet-e39 .card-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 12px !important;
}

#bai-viet-e39 .card-tag {
  background: rgba(245, 130, 32, 0.12) !important;
  border: 1px solid rgba(245, 130, 32, 0.3) !important;
  color: #FFB347 !important;
  font-weight: 700 !important;
  padding: 3px 9px !important;
  border-radius: 5px !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
}

#bai-viet-e39 .card-date {
  font-size: 12px !important;
  color: #64748B !important;
  font-weight: 500 !important;
}

#bai-viet-e39 .card-title {
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  margin: 0 0 10px 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 48px !important;
}

#bai-viet-e39 .card-title a {
  color: #FFFFFF !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

#bai-viet-e39 .card-title a:hover {
  color: #F58220 !important;
}

#bai-viet-e39 .card-desc {
  font-size: 13.5px !important;
  color: #94A3B8 !important;
  line-height: 1.6 !important;
  margin: 0 0 18px 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 64px !important;
}

#bai-viet-e39 .card-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

#bai-viet-e39 .card-stats {
  font-size: 12px !important;
  color: #64748B !important;
}

#bai-viet-e39 .card-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #FFB347 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
  background: rgba(245, 130, 32, 0.12) !important;
  border: 1px solid rgba(245, 130, 32, 0.35) !important;
  transition: all 0.2s ease !important;
}

#bai-viet-e39 .card-btn:hover {
  background: #F58220 !important;
  color: #000000 !important;
  border-color: #F58220 !important;
  transform: translateX(3px) !important;
}

/* RESPONSIVE LAYOUT */
@media (max-width: 1200px) {
  #bai-viet-e39 .seo-cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 820px) {
  #bai-viet-e39 .seo-hub-container {
    padding: 30px 20px !important;
    border-radius: 20px !important;
  }
  #bai-viet-e39 .hero-card {
    grid-template-columns: 1fr !important;
  }
  #bai-viet-e39 .hero-card-content {
    padding: 24px !important;
  }
  #bai-viet-e39 .seo-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  #bai-viet-e39 .seo-hub-title {
    font-size: 24px !important;
  }
}