/* TODAYTV — CSS RIENG TRANG CHU (index-8.html)
   Boc tu <style> noi tuyen. Token nam o assets/tokens.css.
   Nap sau main.css va site-theme.css. */
/* TODAYTV — CSS RIENG TRANG CHU (boc tu <style> noi tuyen cua index-8.html)
   Token dung chung nam o assets/tokens.css. Nap sau site-theme.css. */

/* 100% Open Sans cho toan trang (de len --font-inter-tight cua main.css) */

body { font-family: 'Open Sans', system-ui, sans-serif; }

/* ============================================================
   BANG MAU THUONG HIEU TODAYTV
   FD3509 (chinh) · FC850E (phu) · 7D7C7D (xam) · FFFFFF (trang)
   De len token cua template NextSaaS trong main.css (ban Tailwind
   compile san — khong sua truc tiep duoc, nen ghi de o day).
   ============================================================ */



/* ============================================================
   TodayTV brand & header styles  (lifted from index-1)
   ============================================================ */


.anticon { display: inline-flex; align-items: center; justify-content: center; width: 1em; height: 1em; vertical-align: -0.125em; }
.anticon svg { width: 1em; height: 1em; fill: currentColor; }

/* Topbar */
.topbar {
  background: var(--bg-1);
  border-bottom: 1px solid var(--border-soft);
  color: var(--text-1);
  font-size: 14px;
}
.topbar-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 8px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.date-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-2);
  color: var(--text-1);
  font-weight: 600;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid var(--border);
  white-space: nowrap;
  flex-shrink: 0;
}
.date-pill .anticon { color: var(--brand); font-size: 14px; }
.ticker { flex: 1; white-space: nowrap; overflow: hidden; color: var(--text-2); min-width: 0; }
.ticker-track { display: inline-block; animation: tickerScroll 30s linear infinite; }
@keyframes tickerScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.topbar-meta { display: flex; gap: 16px; color: var(--text-2); align-items: center; }
.topbar-meta span { display: inline-flex; align-items: center; gap: 6px; }
.topbar-meta .anticon { font-size: 14px; color: var(--brand); }
.topbar-socials { display: flex; gap: 6px; }
.topbar-socials a {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 4px;
  color: var(--text-2);
  transition: all .2s;
}
.topbar-socials a:hover { background: var(--brand); color: #FFFFFF; }

/* Header / Nav */
.header {
  background: var(--bg-0);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--border);
  transition: all .3s;
}
.header.scrolled {
  background: rgba(14,14,14,0.95);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
}
.nav {
  max-width: var(--max);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.logo img { display:block; height:42px; width:auto; max-width:132px; object-fit:contain; }
.nav-menu {
  display: flex;
  gap: 4px;
  list-style: none;
  flex: 1;
  justify-content: center;
}
.nav-menu a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-1);
  border-radius: 6px;
  transition: all .2s;
  position: relative;
  white-space: nowrap;
}
.nav-menu a:hover { color: var(--brand); background: rgba(var(--brand-rgb),0.08); }
.nav-menu a.active { color: var(--brand); }
.nav-menu a.active::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px; height: 2px;
  background: var(--brand);
  border-radius: 2px;
}
.nav-actions { display: flex; align-items: center; gap: 8px; }
.search-toggle {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-2);
  color: var(--text-1);
  font-size: 16px;
  transition: all .2s;
  border: none;
  cursor: pointer;
}
.search-toggle:hover { background: var(--brand); color: #FFFFFF; }
.btn-contact {
  background: var(--brand);
  color: #FFFFFF;
  padding: 10px 22px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all .2s;
  box-shadow: 0 4px 16px var(--brand-glow);
}
.btn-contact:hover { background: var(--brand-hover); transform: translateY(-1px); color: #FFFFFF; }
.hamburger { display: none; }

@media (max-width: 1024px) {
  .nav-menu { gap: 0; }
  .nav-menu a { padding: 8px 10px; font-size: 14px; }
}
@media (max-width: 900px) {
  .nav-menu a { padding: 8px 6px; font-size: 12px; }
  .nav-actions .btn-contact span { display: none; }
  .nav-actions .btn-contact { padding: 8px 12px; }
  .nav-actions .search-toggle { display: none; }
}
@media (max-width: 768px) {
  .topbar-socials, .topbar-meta { display: none; }
  .ticker { font-size: 12px; }
  .nav { padding: 12px 16px; }
  .nav-menu, .nav-actions .btn-contact span { display: none; }
  .nav-actions .btn-contact { padding: 8px 14px; }
  .hamburger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    cursor: pointer; padding: 8px; width: 40px; height: 40px;
    background: transparent; border: none;
  }
  .hamburger span {
    width: 22px; height: 2px; background: var(--text-0); border-radius: 2px;
    transition: all .3s;
  }
  .nav-menu.open {
    display: flex !important;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--bg-1);
    flex-direction: column;
    padding: 8px 16px 16px;
    border-top: 1px solid var(--border);
    z-index: 10001;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    max-height: calc(100dvh - 70px);
    overflow-y: auto;
  }
  .nav-menu.open li { width: 100%; }
  .nav-menu.open a {
    display: block; width: 100%; padding: 14px 0; font-size: 16px;
    color: var(--text-0); border-bottom: 1px solid var(--border-soft);
  }
  .nav-menu.open a.active::after { display: none; }
  .header { z-index:10000 !important; isolation:isolate; }
  .nav-menu.open { isolation:isolate; }
}

/* Hero logo must not fall back to its 559px intrinsic size on small screens. */
.hero-brand-logo {
  display:block;
  width:auto;
  height:clamp(54px,7vw,88px);
  max-width:min(42vw,360px);
  object-fit:contain;
  flex:0 0 auto;
}
@media (max-width:640px) {
  .hero-brand-logo {
    width:min(68vw,260px);
    height:auto;
    max-height:78px;
  }
}

/* ============================================================
   TodayTV brand color override for next-sass utility classes
   ============================================================ */
.bg-primary-500, .group:hover .group-hover\:bg-primary-500 { background-color: var(--brand) !important; }
.text-primary-500, .group:hover .group-hover\:text-primary-500 { color: var(--brand) !important; }
.border-primary-500 { border-color: var(--brand) !important; }
.text-primary-50 { color: #F5F5F5 !important; }
.bg-primary-50 { background-color: #F5F5F5 !important; }
/* badge-cyan was decorative cyan - re-tint to TodayTV orange */
.badge.badge-cyan {
  background-color: rgba(var(--brand-rgb),0.12) !important;
  color: var(--brand-hover) !important;
}
/* progress lines in steps section */
.progress-line.bg-ns-green { background-color: var(--brand) !important; }
/* Preserve original case in badges (TH, Tết, etc. — TodayTV terminology) */
.badge { text-transform: none !important; }
.badge:first-letter { text-transform: none !important; }
.badge::first-letter { text-transform: none !important; }

/* yellow accent text on results card hover */
.group:hover .group-hover\:text-ns-yellow { color: var(--brand-2) !important; }

/* Hero: replace robot-AI bg image with TodayTV-friendly dark gradient */
section.hero-bg-todaytv {
  background-image: linear-gradient(180deg, #131313 0%, #272727 55%, #373737 100%) !important;
  background-color: #131313 !important;
}
section.hero-bg-todaytv h1,
section.hero-bg-todaytv > .main-container p,
section.hero-bg-todaytv .text-secondary { color: #FFFFFF !important; }
section.hero-bg-todaytv .text-secondary\/60 { color: rgba(255,255,255,0.65) !important; }
/* Hero shape overlay - tone down opacity since dark bg now */
section.hero-bg-todaytv > figure { opacity: 0.25 !important; }
section.hero-bg-todaytv > figure.hero-banner-full { opacity: 1 !important; }
/* Client logos: invert so white logos show on dark bg */
section.hero-bg-todaytv .lg\:min-w-36 img:not(.hidden) { filter: brightness(0) invert(1) opacity(0.6); }


/* ============================================================
   Tech / Digital Transformation 2026 layer
   ============================================================ */

/* 100% Open Sans (theo yeu cau) — ke ca nhan ky thuat */

.tech-mono {
  font-family: 'Open Sans', system-ui, sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12px;
}

/* Body-wide subtle dot-grid pattern on light sections */
body {
  background-image: radial-gradient(circle at 1px 1px, rgba(19, 19, 19, 0.04) 1px, transparent 0);
  background-size: 24px 24px;
  background-attachment: scroll;
}

/* Blueprint grid + subtle gradient for the About section */
.about-todaytv-section {
  position: relative;
  background:
    linear-gradient(135deg, rgba(var(--brand-rgb),0.025) 0%, transparent 40%, rgba(19, 19, 19, 0.03) 100%),
    #F7F7F7;
  overflow: hidden;
}
.about-todaytv-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(var(--brand-rgb),0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--brand-rgb),0.06) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 90%);
}
.about-todaytv-section > .main-container { position: relative; z-index: 1; }

/* Stat tiles inside About */
.about-stat-tile {
  position: relative;
  padding: 24px 20px;
  background: white;
  border: 1px solid #DFDFDF;
  border-radius: 16px;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
  overflow: hidden;
}
.about-stat-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(var(--brand-rgb),0.12);
  border-color: rgba(var(--brand-rgb),0.4);
}
.about-stat-tile::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-2) 50%, transparent 100%);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.4s ease-out;
}
.about-stat-tile:hover::before { transform: scaleX(1); }
.about-stat-tile .label-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px;
  color: #6B6B6B;
}
.about-stat-tile .label-row .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 0 rgba(var(--brand-rgb),0.55);
  animation: techPulseDot 2.2s ease-out infinite;
}
@keyframes techPulseDot {
  0%   { box-shadow: 0 0 0 0 rgba(var(--brand-rgb),0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(var(--brand-rgb),0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--brand-rgb),0); }
}
.about-stat-tile .stat-value {
  font-family: 'Open Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 1.1;
  color: #1A1A1A;
  margin-bottom: 6px;
}
.about-stat-tile .stat-desc {
  font-size: 14px; color: #6B6B6B; line-height: 1.5;
}

/* Decorative neural-network SVG container on the right side of About */
.about-network-deco {
  position: relative;
  aspect-ratio: 1/1;
  max-width: 480px;
  margin: 0 auto;
  overflow: hidden;
}
.about-network-deco svg { width: 100%; height: 100%; }
.about-network-deco .photo-frame {
  position: absolute;
  inset: 12%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(19, 19, 19, 0.18);
}
.about-network-deco .photo-frame img {
  width: 100%; height: 100%; object-fit: cover;
}
/* Corner brackets — accepted tech aesthetic per design system */
.about-network-deco .photo-frame::before,
.about-network-deco .photo-frame::after {
  content: '';
  position: absolute;
  width: 22px; height: 22px;
  border: 2px solid var(--brand);
  z-index: 2;
}
.about-network-deco .photo-frame::before { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.about-network-deco .photo-frame::after  { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }

/* HUD widget overlay on the photo */
.about-network-deco .hud-widget {
  position: absolute;
  bottom: 14%;
  left: 0;
  background: rgba(19, 19, 19, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: white;
  padding: 10px 14px;
  border-radius: 8px;
  border-left: 3px solid var(--brand);
  font-family: 'Open Sans', system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  z-index: 3;
}
.about-network-deco .hud-widget .hud-line {
  display: flex; align-items: center; gap: 6px;
  margin-top: 4px;
  color: rgba(255,255,255,0.7);
}
.about-network-deco .hud-widget .hud-line:first-child { margin-top: 0; }
.about-network-deco .hud-widget .hud-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand-2);
  box-shadow: 0 0 8px rgba(var(--brand-2-rgb),0.6);
}

/* ============================================================
   Floating AI Chatbot button (bottom-right)
   ============================================================ */

/* ============================================================
   Inline Ad Banner slots
   ============================================================ */
.ad-slot {
  background: linear-gradient(135deg, #131313 0%, #272727 100%);
  border-radius: 12px;
  border: 1px solid rgba(var(--brand-rgb),0.18);
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: #E9E9E9;
  position: relative;
  overflow: hidden;
}
.ad-slot::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(var(--brand-rgb),0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--brand-rgb),0.08) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
  mask-image: linear-gradient(135deg, black 0%, transparent 70%);
  -webkit-mask-image: linear-gradient(135deg, black 0%, transparent 70%);
}
.ad-slot .ad-label {
  font-family: 'Open Sans', system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  padding: 4px 10px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 4px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.ad-slot .ad-content {
  position: relative;
  z-index: 1;
  text-align: center;
  flex: 1;
}
.ad-slot .ad-title {
  font-size: 16px;
  font-weight: 600;
  color: white;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ad-slot .ad-title-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 12px rgba(var(--brand-rgb),0.7);
}
.ad-slot .ad-size {
  font-family: 'Open Sans', system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-top: 4px;
}
.ad-leaderboard-slot { min-height: 90px; max-width: 970px; margin: 0 auto; }
.ad-billboard-slot   { min-height: 220px; max-width: 970px; margin: 0 auto; flex-direction: column; }


/* Subtle network grid + pulsing dot accents inside the hero */
section.hero-bg-todaytv {
  position: relative;
  overflow: hidden;
}
section.hero-bg-todaytv::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(var(--brand-rgb),0.15) 0%, transparent 35%),
    radial-gradient(circle at 80% 70%, rgba(var(--brand-2-rgb),0.10) 0%, transparent 40%),
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: auto, auto, 60px 60px, 60px 60px;
  pointer-events: none;
  z-index: 0;
}
section.hero-bg-todaytv > .main-container { position: relative; z-index: 1; }


/* Chat-bubble icon stroke + tooltip restyle (tech mono label) */
/* Force btn-v3-primary to use TodayTV brand orange (override Tailwind default) */
.btn-v3-primary { background-color: var(--brand) !important; color: #FFFFFF !important; }
.btn-v3-primary [data-button-v3-icon] { background-color: #FFFFFF !important; fill: var(--brand) !important; }
.btn-v3-primary [data-button-v3-icon] svg { color: var(--brand); }
/* Tone btn-v3-stone closer to TodayTV warm cream */
.btn-v3-stone { background-color: #EEEEEE !important; color: #1A1A1A !important; }
.btn-v3-stone [data-button-v3-icon] { background-color: #FFFFFF !important; fill: #1A1A1A !important; }


/* ============================================================
   Tech/AI background image layer (index-6 / index-7)
   ============================================================ */

/* ----- Hero: wave + TV-icon HUD --------------------------------- */
section.hero-bg-todaytv {
  background:
    linear-gradient(135deg, rgba(19, 19, 19, 0.78) 0%, rgba(19, 19, 19, 0.55) 50%, rgba(var(--brand-rgb),0.18) 100%),
    url('../images/bg/bg-wave-tv.png') center right / cover no-repeat,
    #0E0E0E !important;
}
section.hero-bg-todaytv::after { display: none; }   /* drop the old grid overlay */

/* Hero text contrast — already white from previous CSS — confirm */
section.hero-bg-todaytv h1,
section.hero-bg-todaytv .text-secondary,
section.hero-bg-todaytv > .main-container p { color: #FFFFFF !important; }
section.hero-bg-todaytv .text-secondary\/60 { color: rgba(255, 255, 255, 0.7) !important; }

/* ----- 6 phim section: subtle circuit pattern + light tint ------ */
section[aria-label*="6 phim"],
section#phim-dang-chieu {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.92) 100%),
    url('../images/bg/bg-circuit-2.png') center / cover no-repeat,
    #F0F0F0 !important;
  position: relative;
}

/* ----- About-TodayTV section (index-7 only): data wave --------- */
.about-todaytv-section {
  background:
    linear-gradient(135deg, rgba(19, 19, 19, 0.88) 0%, rgba(19, 19, 19, 0.78) 60%, rgba(var(--brand-rgb),0.18) 100%),
    url('../images/bg/bg-data-wave.png') center / cover no-repeat,
    #0E0E0E !important;
  color: #FFFFFF;
}
.about-todaytv-section::before { display: none; }    /* drop old blueprint grid */
.about-todaytv-section h2,
.about-todaytv-section h2 .text-secondary,
.about-todaytv-section h2 .text-accent { color: #FFFFFF !important; }
.about-todaytv-section .text-secondary,
.about-todaytv-section .text-secondary\/70,
.about-todaytv-section .text-secondary\/60,
.about-todaytv-section strong { color: #FFFFFF !important; }
.about-todaytv-section .text-accent\/70,
.about-todaytv-section .text-accent\/60 { color: rgba(255, 255, 255, 0.72) !important; }
.about-todaytv-section p { color: rgba(255, 255, 255, 0.82); }
.about-todaytv-section .italic { color: rgba(255, 255, 255, 0.85) !important; }
/* Stat tiles → translucent dark glass on photo bg */
.about-todaytv-section .about-stat-tile {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.about-todaytv-section .about-stat-tile:hover {
  background: rgba(var(--brand-rgb),0.10);
  border-color: rgba(var(--brand-rgb),0.45);
}
.about-todaytv-section .about-stat-tile .stat-value { color: #FFFFFF; }
.about-todaytv-section .about-stat-tile .stat-desc,
.about-todaytv-section .about-stat-tile .label-row { color: rgba(255, 255, 255, 0.75); }

/* ----- CTA section: circuit board background ------------------- */
section[aria-label*="CTA"], section.cta-bg-tech {
  background:
    linear-gradient(135deg, rgba(19, 19, 19, 0.85) 0%, rgba(var(--brand-rgb),0.32) 100%),
    url('../images/bg/bg-circuit-1.png') center / cover no-repeat,
    #131313 !important;
  color: white;
}

/* ----- Steps / Results sections: very subtle bg pattern -------- */
.steps-bg-tech {
  background:
    linear-gradient(180deg, rgba(19, 19, 19, 0.92) 0%, rgba(39, 39, 39, 0.95) 100%),
    url('../images/bg/bg-data-wave.png') center / cover no-repeat,
    #131313 !important;
  color: white;
}
.steps-bg-tech .text-secondary,
.steps-bg-tech .text-secondary\/60,
.steps-bg-tech h2, .steps-bg-tech h3 { color: #FFFFFF !important; }
.steps-bg-tech .text-accent\/70,
.steps-bg-tech .text-accent\/60 { color: rgba(255, 255, 255, 0.75) !important; }
.steps-bg-tech p { color: rgba(255, 255, 255, 0.78); }

/* Body bg keeps the existing subtle dot-grid; no global change. */


/* CTA section text contrast on dark circuit bg */
section.cta-bg-tech h1,
section.cta-bg-tech h2,
section.cta-bg-tech h3 { color: #FFFFFF !important; }
section.cta-bg-tech p { color: rgba(255, 255, 255, 0.85) !important; }
section.cta-bg-tech .text-secondary,
section.cta-bg-tech .text-secondary\/60,
section.cta-bg-tech .text-secondary\/70 { color: rgba(255, 255, 255, 0.78) !important; }
section.cta-bg-tech .badge.badge-cyan {
  background-color: rgba(var(--brand-rgb),0.20) !important;
  color: var(--brand-accent) !important;
  border: 1px solid rgba(var(--brand-rgb),0.4);
}


/* ============================================================
   Parallax single-background layer  (index-8)
   ============================================================ */

/* The whole page sits over one fixed background image.
   Mobile drops to normal scroll-bg because iOS has fixed-bg bugs.
   Body bg is set on a dedicated wrapper so the existing body dot-grid stays. */
html { background: #0E0E0E; }   /* fallback colour when bg image loads */
body {
  background:
    linear-gradient(180deg, rgba(14, 14, 14, 0.78) 0%, rgba(14, 14, 14, 0.85) 100%),
    url('../images/bg/bg-data-wave.png') center center / cover no-repeat;
  background-attachment: scroll, scroll;
  color: #E9E9E9;
}
@media (max-width: 768px) {
  body { background-attachment: scroll, scroll; }
}

/* Wipe every per-section background override from index-7's tech-bg layer.
   The :not(.foo) trick is overkill; we just zero out the offending images. */
section.hero-bg-todaytv,
section[aria-label*="6 phim"],
section#phim-dang-chieu,
.about-todaytv-section,
section.cta-bg-tech,
section[aria-label*="CTA"] {
  background: transparent !important;
}
/* Drop their pseudo-element overlays too */
section.hero-bg-todaytv::after,
section.hero-bg-todaytv::before,
.about-todaytv-section::before,
.about-todaytv-section::after { display: none !important; }

/* Default for ALL Tailwind-coloured section backgrounds → transparent.
   These are the only ones the template uses on sections / sub-containers. */
section.bg-background-2,
section.bg-background-3,
section.bg-background-4,
section.bg-background-5,
section.bg-background-6,
section.bg-white,
section.bg-stone-50,
section.bg-stone-100,
section.bg-background-2.dark\:bg-background-5,
.about-todaytv-section { background: transparent !important; }

/* Headings → white over dark bg */
section h1,
section h2,
section h3.text-secondary,
section .text-secondary,
section .text-accent,
section .badge.badge-cyan { color: #FFFFFF !important; }
section .text-secondary\/60,
section .text-secondary\/70,
section .text-accent\/60,
section .text-accent\/70 { color: rgba(255, 255, 255, 0.72) !important; }
section .text-secondary\/40 { color: rgba(255, 255, 255, 0.5) !important; }
section p,
section li { color: rgba(255, 255, 255, 0.78); }

/* Badge tint stays orange */
section .badge.badge-cyan {
  background-color: rgba(var(--brand-rgb),0.18) !important;
  color: var(--brand-accent) !important;
  border: 1px solid rgba(var(--brand-rgb),0.35);
}

/* ============================================================
   Content cards — keep posters / images readable, contrast over bg
   ============================================================ */

/* Six-film cards (white cards over dark bg) */
section#phim-dang-chieu article.group {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}
section#phim-dang-chieu article.group h3 { color: #1A1A1A !important; }
section#phim-dang-chieu article.group p { color: rgba(26, 26, 26, 0.7) !important; }
section#phim-dang-chieu article.group .border-stroke-4,
section#phim-dang-chieu article.group .border-stroke-6 {
  border-color: rgba(0, 0, 0, 0.08) !important;
}
section#phim-dang-chieu article.group .text-secondary\/60,
section#phim-dang-chieu article.group .text-accent\/60 {
  color: rgba(26, 26, 26, 0.55) !important;
}
section#phim-dang-chieu article.group .badge.badge-cyan {
  background-color: rgba(var(--brand-rgb),0.10) !important;
  color: var(--brand-hover) !important;
  border-color: transparent;
}

/* Blog cards (white) */
section[aria-label*="Bài viết"] article,
.blog-card,
article.blog-card,
article.bg-white,
article.bg-stone-50 {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/* Services / Steps / Why-us / Results stacked tiles → glass-dark */
.stacked-card,
.stack-cards__item,
section.cta-bg-tech .stack-cards__item,
section[aria-label*="Vì sao"] [data-ns-animate],
.about-todaytv-section .about-stat-tile,
section [class*="card"] {
  /* don't blanket this — could break too much. handled per section below */
}

/* About-section stat tiles already glass-styled in index-7 CSS — keep */
.about-todaytv-section .about-stat-tile {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}
.about-todaytv-section .about-stat-tile:hover {
  background: rgba(var(--brand-rgb),0.10) !important;
  border-color: rgba(var(--brand-rgb),0.45) !important;
}
.about-todaytv-section .about-stat-tile .stat-value { color: #FFFFFF !important; }

/* Results stats cards / Testimonial cards over bg */
section .rounded-2xl.bg-white,
section .rounded-3xl.bg-white,
section .bg-background-3,
section .bg-background-4 {
  background-color: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Steps progress line */
.progress-line { background-color: rgba(255, 255, 255, 0.15) !important; }
.progress-line.bg-ns-green, .progress-line.bg-primary-500 {
  background-color: var(--brand) !important;
}

/* Ad slots already dark-themed → make slightly more transparent */
.ad-block {
  background:
    repeating-linear-gradient(135deg,
      rgba(var(--brand-rgb),0.04) 0,
      rgba(var(--brand-rgb),0.04) 8px,
      transparent 8px, transparent 18px),
    rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(var(--brand-rgb),0.32) !important;
}
.ad-block .ad-label {
  background: rgba(255, 255, 255, 0.04) !important;
  color: rgba(255, 255, 255, 0.55) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}
.ad-block .ad-title { color: #FFFFFF !important; }
.ad-block .ad-size { color: rgba(255, 255, 255, 0.55) !important; }

/* Footer — keep dark but a touch translucent so bg peeks through */
footer { background-color: rgba(19, 19, 19, 0.85) !important; }

/* Header — slightly more solid for nav clarity */
.header.scrolled {
  background: rgba(14, 14, 14, 0.92) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* CTA section — heading + text white, no card */
section.cta-bg-tech h2,
section.cta-bg-tech h1 { color: #FFFFFF !important; }
section.cta-bg-tech p { color: rgba(255, 255, 255, 0.85) !important; }

/* btn-v3-stone gets less stoney to match dark bg (Đọc tiếp) */
.btn-v3-stone {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.btn-v3-stone [data-button-v3-icon] {
  background-color: var(--brand) !important;
  fill: #FFFFFF !important;
}

/* Avatars in hero overlap group — re-tint border so they read on dark bg */
section.hero-bg-todaytv .rounded-full.border { border-color: rgba(255, 255, 255, 0.2) !important; }


/* ============================================================
   Parallax v8 — fix Services + Results card readability
   ============================================================ */

/* Services stack-cards: dark glass instead of light bg */
.stack-cards__item {
  background-color: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.stack-cards__item h3 { color: #FFFFFF !important; }
.stack-cards__item p { color: rgba(255, 255, 255, 0.78) !important; }
.stack-cards__item .text-secondary,
.stack-cards__item .text-accent { color: #FFFFFF !important; }
.stack-cards__item .text-secondary\/60,
.stack-cards__item .text-accent\/60 { color: rgba(255, 255, 255, 0.6) !important; }
/* Icon container inside stack card */
.stack-cards__item [class*="bg-background"] {
  background-color: rgba(var(--brand-rgb),0.12) !important;
}
.stack-cards__item svg { color: var(--brand-accent) !important; }
.stack-cards__item svg path[stroke] { stroke: var(--brand-accent) !important; }

/* Results marquee cards: target the actual class combo with arbitrary value */
.cards-marquee-container .bg-white,
.horizontal-marquee-inner .bg-white,
[class*="marquee"] .bg-white,
.bg-white.rounded-\[20px\] {
  background-color: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #FFFFFF;
}
.cards-marquee-container .bg-white *,
.horizontal-marquee-inner .bg-white *,
[class*="marquee"] .bg-white * {
  color: inherit;
}
.cards-marquee-container .bg-white h3,
.horizontal-marquee-inner .bg-white h3,
[class*="marquee"] .bg-white h3 { color: #FFFFFF !important; }
.cards-marquee-container .bg-white p,
.horizontal-marquee-inner .bg-white p,
[class*="marquee"] .bg-white p { color: rgba(255, 255, 255, 0.72) !important; }
.cards-marquee-container .bg-white .text-secondary,
[class*="marquee"] .bg-white .text-secondary,
[class*="marquee"] .bg-white .text-secondary\/60 { color: rgba(255, 255, 255, 0.78) !important; }


/* ============================================================
   Three.js light-particle canvas (index-8 only)
   ============================================================ */
#three-light-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.4s ease-out;
}
#three-light-bg.ready { opacity: 1; }
/* Lift everything above the canvas */
body > *:not(#three-light-bg):not(script) { position: relative; z-index: 1; }
.header { z-index: 100; }  /* keep sticky header on top */
footer { z-index: 2; }
@media (prefers-reduced-motion: reduce) {
  #three-light-bg { display: none; }
}

/* Editorial labels — thay kiểu pill nền màu bằng nhịp typography gọn, tự nhiên */
section .badge,
section .badge.badge-cyan,
section .badge.badge-green,
section#phim-dang-chieu article.group .badge.badge-cyan {
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
  width: fit-content;
  padding: 2px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--brand-accent) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.4;
  letter-spacing: .13em;
  text-transform: uppercase !important;
}
section .badge::before {
  content: "";
  flex: 0 0 auto;
  width: 16px;
  height: 2px;
  background: var(--brand);
  box-shadow: 5px 0 0 rgba(var(--brand-2-rgb),.5);
}
section#phim-dang-chieu article.group .badge.badge-cyan { color:var(--brand-hover) !important; }

/* ============================================================
   Contrast contract — lớp cuối cascade, tránh text/border/surface trùng màu
   ============================================================ */


/* Dark content surfaces */
.stack-cards__item,
.about-todaytv-section .about-stat-tile,
section .rounded-2xl.bg-white,
section .rounded-3xl.bg-white,
section .bg-background-3,
section .bg-background-4,
.cards-marquee-container .bg-white,
.horizontal-marquee-inner .bg-white,
[class*="marquee"] .bg-white,
.bg-white.rounded-\[20px\] {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  color: var(--ui-text) !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.22) !important;
}
.stack-cards__item:hover,
.about-todaytv-section .about-stat-tile:hover {
  background: var(--ui-surface-raised) !important;
  border-color: var(--ui-border-strong) !important;
}
.stack-cards__item h3,
.stack-cards__item .text-secondary { color: var(--ui-text) !important; }
.stack-cards__item p { color: var(--ui-text-muted) !important; }

/* Legacy buttons */
.btn.btn-secondary,
.btn.btn-white,
.btn.btn-transparent,
.dark .btn.btn-transparent {
  background: #FAFAFA !important;
  border: 1px solid #FAFAFA !important;
  color: #171717 !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.2) !important;
}
.btn.btn-secondary:hover,
.btn.btn-white:hover,
.btn.btn-transparent:hover,
.dark .btn.btn-transparent:hover {
  background: var(--ui-accent) !important;
  border-color: var(--ui-accent) !important;
  color: #FFFFFF !important;
}
.btn.btn-dark {
  background: var(--ui-accent) !important;
  border: 1px solid var(--ui-accent) !important;
  color: #171717 !important;
}
.btn.btn-dark:hover { background: var(--ui-accent-hover) !important; border-color: var(--ui-accent-hover) !important; color:#171717 !important; }

/* Button v3: primary / light / neutral luôn có silhouette rõ */
.btn-v3-primary {
  background: var(--ui-accent) !important;
  border: 1px solid var(--ui-accent-hover) !important;
  color: #171717 !important;
  box-shadow: 0 10px 24px rgba(var(--brand-rgb),.22) !important;
}
.btn-v3-primary [data-button-v3-text] { color:#171717 !important; }
.btn-v3-primary [data-button-v3-icon] { background:#FFFFFF !important; color:var(--ui-accent) !important; fill:var(--ui-accent) !important; }
.btn-v3-secondary,
.btn-v3-white {
  background: #FAFAFA !important;
  border: 1px solid #FFFFFF !important;
  color: #171717 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.2) !important;
}
.btn-v3-secondary [data-button-v3-icon],
.btn-v3-white [data-button-v3-icon] { background:var(--ui-accent) !important; color:#FFFFFF !important; fill:#FFFFFF !important; }
.btn-v3-stone {
  background: var(--ui-surface-raised) !important;
  border: 1px solid var(--ui-border-strong) !important;
  color: var(--ui-text) !important;
}
[data-button-v3]:hover { transform: translateY(-2px); }
[data-button-v3], .btn { transition: transform .25s ease,background-color .25s ease,border-color .25s ease,box-shadow .25s ease !important; }

/* Accessible interaction states */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[data-button-v3]:focus-within {
  outline: 3px solid #FECFA5 !important;
  outline-offset: 3px !important;
}
.nav-menu a { color: var(--ui-text-muted); }
.nav-menu a:hover,.nav-menu a.active { color:#FFFFFF; }
.btn-contact { color:#171717 !important; border:1px solid var(--brand-accent) !important; }
.btn-contact:hover { color:#171717 !important; background:var(--brand-2) !important; }
.header { border-bottom-color:var(--ui-border) !important; }
footer { border-top:1px solid var(--ui-border) !important; }

/* TodayTV branded footer — cinematic broadcast background */
.todaytv-footer{
  position:relative;
  isolation:isolate;
  border-top:1px solid rgba(var(--brand-2-rgb),.5)!important;
  background:#0D0D0D url('../images/bg/todaytv-footer-bg.jpg') center bottom/cover no-repeat!important;
}
.todaytv-footer::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg,rgba(12,12,12,.8),rgba(12,12,12,.58) 44%,rgba(12,12,12,.9));
}
.todaytv-footer::after{
  content:"ON AIR  •  TODAYTV  •  ENTERTAINMENT  •  24/7";
  position:absolute;
  left:0;right:0;top:0;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-bottom:1px solid rgba(var(--brand-2-rgb),.18);
  background:rgba(12,12,12,.64);
  color:rgba(253,163,71,.58);
  font-size:12px;
  font-weight:800;
  letter-spacing:.42em;
  white-space:nowrap;
}
.todaytv-footer>figure{display:none!important}
.todaytv-footer>.main-container{position:relative;z-index:2}
.todaytv-footer .grid.grid-cols-12{padding-top:110px!important;padding-bottom:58px!important}
.todaytv-footer figure img[src="images/logo.png"]{width:220px;height:auto;filter:drop-shadow(0 12px 30px rgba(var(--brand-rgb),.24))}
.todaytv-footer .text-accent\/60{color:#B7B7B7!important;line-height:1.7!important}
.todaytv-footer .footer-social-link{
  width:38px;height:38px;
  display:grid!important;
  place-items:center;
  border:1px solid rgba(255,255,255,.16);
  border-radius:11px;
  background:rgba(22,22,22,.72);
  transition:.25s ease!important;
}
.todaytv-footer .footer-social-link:hover{border-color:var(--brand-2);background:rgba(var(--brand-2-rgb),.16);transform:translateY(-3px)}
.todaytv-footer .footer-social-link img{width:18px!important;height:18px!important;filter:brightness(0) invert(1);opacity:.88}
.todaytv-footer .footer-social-link+div{display:none}
.todaytv-footer .sm\:text-heading-6{color:#FFFFFF!important;font-size:16px!important;font-weight:800!important;letter-spacing:.08em;text-transform:uppercase}
.todaytv-footer .footer-link{color:#C0C0C0!important;font-size:14px!important;transition:color .2s ease,transform .2s ease!important}
.todaytv-footer .footer-link:hover{color:var(--brand-accent)!important;transform:translateX(4px)}
.todaytv-footer .footer-link::before{background:var(--brand-2)!important}
.todaytv-footer .footer-divider{width:100%!important;background:linear-gradient(90deg,transparent,rgba(var(--brand-2-rgb),.5),transparent)!important}
.todaytv-footer .relative.pt-\[26px\]{padding-top:26px!important;padding-bottom:34px!important;background:rgba(11,11,11,.4)}
.todaytv-footer .relative.pt-\[26px\] p{color:#B7B7B7!important;font-size:14px!important}
@media(max-width:767px){
  .todaytv-footer::after{justify-content:flex-start;padding-left:20px}
  .todaytv-footer .grid.grid-cols-12{padding-top:78px!important;padding-bottom:38px!important;gap-y:42px!important}
  .todaytv-footer figure img[src="images/logo.png"]{width:180px}
}

/* News cards — compact editorial grid, equal height and clean metadata */
#tin-tuc .news-grid {
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  align-items:stretch;
  grid-auto-rows:1fr;
  gap:20px!important;
}
#tin-tuc .news-grid > div { display:flex; min-width:0; }
#tin-tuc .news-grid article { display:flex; flex-direction:column; width:100%; height:100%; }
#tin-tuc .news-grid article > figure { flex:0 0 auto; aspect-ratio:16/9!important; }
#tin-tuc .news-card-body { display:flex; flex:1; flex-direction:column; gap:14px; padding:20px!important; }
#tin-tuc .news-meta { display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:10px; min-height:22px; }
#tin-tuc .news-meta .badge {
  flex:1 1 auto;
  min-width:0;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  white-space:nowrap;
  font-size:12px!important;
  letter-spacing:.1em;
}
#tin-tuc .news-meta time { flex:0 0 auto; white-space:nowrap; color:var(--ui-text-muted)!important; }
#tin-tuc .news-copy { display:flex; flex:1; flex-direction:column; gap:8px; }
#tin-tuc .news-copy h3 {
  display:-webkit-box;
  min-height:2.7em;
  margin:0!important;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  font-size:clamp(19px,1.2vw,23px)!important;
  line-height:1.35!important;
}
#tin-tuc .news-copy p {
  display:-webkit-box;
  min-height:3em;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  font-size:16px!important;
  line-height:1.5!important;
}
#tin-tuc .news-action { margin-top:auto; padding-top:4px; }
#tin-tuc .news-action [data-button-v3] { border-radius:13px!important; }
#tin-tuc .news-action [data-button-v3-icon] { padding:9px!important; border-radius:10px!important; }
#tin-tuc .news-action [data-button-v3-icon] svg { width:20px!important; height:20px!important; }
#tin-tuc .news-action [data-button-v3-text] { padding-right:13px!important; font-size:14px!important; }

@media (max-width:1199px){
  #tin-tuc .news-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width:767px){
  #tin-tuc .news-grid{grid-template-columns:minmax(0,1fr)!important;gap:16px!important}
  #tin-tuc .news-card-body{padding:18px!important}
  #tin-tuc .news-copy h3{font-size:20px!important}
}

/* Editorial rails — phim và YouTube */
.film-rail{
  display:grid!important;
  grid-template-columns:none!important;
  grid-auto-flow:column;
  grid-auto-columns:clamp(300px,31vw,430px);
  gap:18px!important;
  overflow-x:auto;
  padding:4px 2px 18px;
  scroll-snap-type:x mandatory;
  scrollbar-width:thin;
  scrollbar-color:var(--brand-2) rgba(255,255,255,.08);
}
.film-rail>article{
  position:relative;
  min-height:360px;
  scroll-snap-align:start;
  background:#161616!important;
  border:1px solid rgba(179,179,179,.28)!important;
  border-radius:18px!important;
  box-shadow:0 16px 42px rgba(0,0,0,.32)!important;
  isolation:isolate;
  transform:translateZ(0);
}
.film-rail>article::before{
  content:"0" counter(film-card);
  position:absolute;
  top:18px;
  right:18px;
  z-index:7;
  color:rgba(255,255,255,.72);
  font-size:12px;
  font-weight:700;
  letter-spacing:.16em;
  text-shadow:0 2px 10px rgba(0,0,0,.75);
}
.film-rail{counter-reset:film-card}
.film-rail>article{counter-increment:film-card}
.film-rail>article>a{height:100%;aspect-ratio:auto!important}
.film-rail>article>a>img{position:absolute;inset:0}
.film-rail>article>a::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,8,.04) 20%,rgba(9,9,9,.22) 48%,rgba(9,9,9,.98) 100%)}
.film-rail>article:hover{transform:translateY(-6px)!important;border-color:rgba(var(--brand-2-rgb),.7)!important;box-shadow:0 24px 58px rgba(0,0,0,.46)!important}
.film-rail>article>a>span:last-child{
  left:auto!important;
  right:18px!important;
  bottom:18px!important;
  transform:none!important;
  z-index:8;
  padding:8px 12px!important;
  border:1px solid rgba(255,255,255,.26);
  background:rgba(21,21,21,.78)!important;
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  font-size:14px!important;
  opacity:0;
}
.film-rail>article:hover>a>span:last-child{bottom:18px!important;opacity:1}
.film-rail>article>a>span:last-child svg{width:16px;height:16px;transition:transform .25s ease}
.film-rail>article>a>span:last-child:hover svg{transform:translateX(3px)}
.film-rail>article>.p-5,.film-rail>article>.p-6,.film-rail>article>div:last-child{
  position:absolute;left:0;right:0;bottom:0;z-index:4;padding:26px!important;gap:8px!important;pointer-events:none;
}
.film-rail>article h3{color:#FFFFFF!important;font-size:clamp(21px,2vw,28px)!important}
section#phim-dang-chieu .film-rail>article h3,
section#phim-dang-chieu .film-rail>article.group h3{
  color:#FFFFFF!important;
  text-shadow:0 2px 14px rgba(0,0,0,.92);
}
section#phim-dang-chieu .film-rail>article>div:last-child{
  background:linear-gradient(180deg,transparent,rgba(9,9,9,.38) 24%,rgba(9,9,9,.94));
}
section#phim-dang-chieu .film-rail>article .badge,
section#phim-dang-chieu .film-rail>article.group .badge.badge-cyan{
  color:#FECFA5!important;
  text-shadow:0 1px 8px rgba(0,0,0,.9);
}
/* Hien thong tin phim trong lop phu (yeu cau 18/08): mo ta 2 dong + khung gio */
.film-rail>article p{display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:rgba(255,255,255,.85)!important;font-size:14px!important;line-height:1.55;text-shadow:0 1px 10px rgba(0,0,0,.85);margin:2px 0 0}
.film-rail>article>div:last-child>div:last-child{display:flex!important;flex-wrap:wrap;gap:10px 16px;border-color:rgba(255,255,255,.22)!important;text-shadow:0 1px 8px rgba(0,0,0,.85)}
.film-rail>article>div:last-child>div:last-child span{color:#FECFA5!important;font-size:12px!important}
.film-rail>article>div:last-child>div:last-child svg{fill:#FECFA5}
.film-rail>article{min-height:430px}
section#phim-dang-chieu .film-rail>article.group p,
section#phim-dang-chieu .film-rail>article.group .text-secondary\/60,
section#phim-dang-chieu .film-rail>article.group .text-accent\/60{color:rgba(255,255,255,.85)!important}
section#phim-dang-chieu .film-rail>article.group .border-t span{color:#FECFA5!important}
.film-rail>article .badge{color:var(--brand-accent)!important}

/* Homepage film directory — editorial split layout requested in feedback */
/* khoi 4 phim dang chieu hien lai theo yeu cau 18/08 */
.home-film-categories[hidden]{display:none!important}
.home-film-categories{display:grid;grid-template-columns:minmax(0,.9fr) minmax(480px,1.1fr);gap:clamp(48px,8vw,120px);align-items:center;margin-top:clamp(52px,7vw,104px)}
.home-film-intro{max-width:510px}
.home-film-intro h2{margin:0 0 18px;color:var(--title-color,#FFFFFF)!important;font-size:var(--title-size)!important;line-height:var(--title-line,1.18)!important;letter-spacing:0;text-transform:var(--title-transform,uppercase)!important}
.home-film-intro h2 span{color:var(--brand-2)}
.home-film-intro p{margin:0 0 28px;color:#C0C0C0!important;font-size:16px;line-height:1.75}
.home-film-intro a{display:inline-flex;align-items:center;gap:10px;padding:12px 17px;border-radius:12px;background:#FFFFFF;color:#171717;font-size:14px;font-weight:800;transition:.25s ease}
.home-film-intro a:hover{background:var(--brand-2);transform:translateY(-2px)}
.home-film-intro svg{width:17px;height:17px}
.home-film-list{display:grid;gap:14px}
.home-film-type{display:grid;grid-template-columns:52px minmax(0,1fr) 34px;align-items:center;gap:18px;min-height:122px;padding:20px 22px;border:1px solid #494949;border-radius:17px;background:linear-gradient(120deg,rgba(41,41,41,.9),rgba(27,27,27,.92));transition:.25s ease}
.home-film-type:hover{border-color:var(--brand-2);background:linear-gradient(120deg,rgba(var(--brand-2-rgb),.14),rgba(32,32,32,.94));transform:translateX(-7px)}
.home-film-type>.type-icon{width:52px;height:52px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.14);border-radius:14px;color:var(--brand-accent);background:rgba(12,12,12,.44)}
.home-film-type>.type-icon svg{width:25px;height:25px;fill:currentColor}
.home-film-type h3{margin:0 0 5px;color:#FFFFFF!important;font-size:18px!important;line-height:1.3!important;text-wrap:initial}
.home-film-type p{margin:0;color:#B7B7B7!important;font-size:14px;line-height:1.55}
.home-film-type>.type-arrow{color:#898989;transition:.25s}
.home-film-type>.type-arrow svg{width:18px;height:18px;fill:currentColor}
.home-film-type:hover>.type-arrow{color:var(--brand-2);transform:translateX(4px)}
.badge.badge-cyan.mb-5{display:none!important}
@media(max-width:900px){.home-film-categories{grid-template-columns:1fr;gap:38px}.home-film-intro{max-width:680px}.home-film-type:hover{transform:translateY(-3px)}}
@media(max-width:520px){.home-film-type{grid-template-columns:44px minmax(0,1fr);padding:17px}.home-film-type>.type-icon{width:44px;height:44px}.home-film-type>.type-arrow{display:none}.home-film-intro h2{font-size:39px!important}}

.youtube-editorial-grid{display:grid!important;grid-template-columns:minmax(0,1.35fr) minmax(330px,.65fr);grid-template-rows:repeat(4,minmax(0,1fr));gap:18px!important}
.youtube-editorial-grid article{min-width:0;background:#202020!important;border-color:#474747!important;box-shadow:0 16px 42px rgba(0,0,0,.24)}
.youtube-editorial-grid article:first-child{grid-row:span 4}
.youtube-editorial-grid article:first-child a{height:100%;display:flex;flex-direction:column}
.youtube-editorial-grid article:first-child a>span:first-child{flex:1;min-height:420px}
.youtube-editorial-grid article:not(:first-child) a{display:grid!important;grid-template-columns:clamp(140px,14vw,190px) minmax(0,1fr);align-items:center;height:100%}
.youtube-editorial-grid article:not(:first-child) a>span:first-child{height:116px;aspect-ratio:auto!important}
.youtube-editorial-grid article:not(:first-child) a>span:last-child{padding:16px!important}
.youtube-editorial-grid article:not(:first-child) .size-14{width:42px;height:42px}
.site-retired-section{display:none!important}

/* Lịch phát sóng nhanh trên trang chủ */
.schedule-shell{border:1px solid #474747;border-radius:24px;background:rgba(32,32,32,.86);padding:22px;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.schedule-days{display:none}
.schedule-days::-webkit-scrollbar{display:none}
.schedule-day{flex:1 0 132px;border:1px solid #535353;border-radius:13px;padding:10px 14px;background:#2A2A2A;color:#C5C5C5;text-align:left;cursor:pointer;transition:.25s ease}
.schedule-day strong{display:block;color:#FFFFFF;font-size:14px;white-space:nowrap}
.schedule-day span{font-size:12px;white-space:nowrap}
.schedule-day:hover,.schedule-day.is-active{background:var(--brand-2);border-color:var(--brand-accent);color:#171717;transform:translateY(-2px)}
.schedule-day.is-active strong{color:#171717}
.schedule-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:14px 0}
.schedule-toolbar p{font-size:14px;color:#C5C5C5!important}
.schedule-controls{display:flex;gap:8px}
.schedule-arrow{width:40px;height:40px;border:1px solid #5F5F5F;border-radius:12px;background:#2A2A2A;color:#FFFFFF;display:grid;place-items:center;cursor:pointer}
.schedule-track{
  display:flex;
  gap:12px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:6px 2px 18px;
  scroll-snap-type:x proximity;
  scrollbar-color:var(--brand-2) rgba(255,255,255,.08);
  overscroll-behavior-inline:contain;
}
.schedule-item{flex:1 0 220px;min-height:126px;padding:16px;border:1px solid #474747;border-radius:16px;background:#171717;scroll-snap-align:start;transition:.25s ease}
.schedule-item:hover,.schedule-item.is-now{border-color:var(--brand-2);background:#2A2A2A;transform:translateY(-3px)}
.schedule-item.is-now{box-shadow:inset 3px 0 var(--brand-2),0 12px 30px rgba(0,0,0,.22)}
.schedule-item.is-past{opacity:.55}
.schedule-item.is-past:hover{opacity:1}
.schedule-time{display:inline-flex;padding:5px 9px;border-radius:8px;background:var(--brand-2);color:#171717;font-size:14px;font-weight:800;white-space:nowrap}
.schedule-item h3{font-size:16px!important;line-height:1.4;margin-top:14px;color:#FFFFFF!important;text-wrap:pretty}
.schedule-empty{padding:30px;color:#C5C5C5;text-align:center}
.schedule-all{display:flex;justify-content:flex-end;margin-top:18px}
.schedule-all a{display:inline-flex;align-items:center;gap:10px;padding:11px 16px;border:1px solid #676767;border-radius:12px;color:#FFFFFF;background:#2A2A2A;font-size:14px;font-weight:700;transition:.25s ease}
.schedule-all a:hover{border-color:var(--brand-2);background:var(--brand-2);color:#171717;transform:translateY(-2px)}
.schedule-all svg{width:17px;height:17px}

@media(max-width:1023px){
  .youtube-editorial-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto}
  .youtube-editorial-grid article:first-child{grid-column:span 2;grid-row:auto}
  .youtube-editorial-grid article:first-child a>span:first-child{min-height:360px}
  .youtube-editorial-grid article:not(:first-child) a{display:block!important}
  .youtube-editorial-grid article:not(:first-child) a>span:first-child{height:auto;aspect-ratio:16/9!important}
}
@media(max-width:640px){
  .film-rail{grid-auto-columns:86vw}
  .film-rail>article{min-height:285px}
  .youtube-editorial-grid{grid-template-columns:1fr}
  .youtube-editorial-grid article:first-child{grid-column:auto}
  .youtube-editorial-grid article:first-child a>span:first-child{min-height:0;aspect-ratio:16/9!important}
  .schedule-shell{padding:14px;border-radius:18px}
  .schedule-toolbar{align-items:flex-start;flex-direction:column}
  .schedule-item{flex-basis:78vw}
  .schedule-all{justify-content:stretch}.schedule-all a{justify-content:center;width:100%}
}

/* Typography guard — giữ nguyên cụm từ và cân dòng trên mọi breakpoint */
main h1,main h2,main h3,main h4,main h5,main h6 {
  text-wrap:balance;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
}
main p,main li,footer p {
  text-wrap:pretty;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
}
[data-button-v3-text],.btn-contact,.nav-menu a,section .badge,time {
  white-space:nowrap;
}
.qform input,.qform textarea,footer a {
  overflow-wrap:anywhere;
}
@media(max-width:640px){
  #tin-tuc .news-grid{grid-auto-rows:auto}
  #tin-tuc .news-grid article > figure{aspect-ratio:16/9!important}
  #tin-tuc .news-meta{gap:10px}
  #tin-tuc .news-meta .badge{font-size:12px!important;letter-spacing:.1em}
  #tin-tuc .news-card-body{gap:16px}
}


/* ===== Banner hero full-bleed 1920 ===== */
.hero-banner-full{margin:clamp(20px,3vw,40px) auto clamp(28px,4vw,52px);width:min(calc(100% - 48px),1200px);position:relative;z-index:2;border-radius:20px;overflow:hidden;box-shadow:0 26px 70px rgba(0,0,0,.45)}
.hero-banner-full img{opacity:1!important;filter:none!important;transform:none!important}
.hero-banner-full img{display:block;width:100%;height:auto}

/* ===== Spotlight phim dang chieu (editorial 2026) ===== */
.spot-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px}
.spot-head .sec-title{margin:6px 0 0}
.spot-all{display:inline-flex;align-items:center;gap:9px;color:#C5C5C5;font-size:14px;font-weight:700;white-space:nowrap;transition:.25s}
.spot-all svg{width:16px;height:16px;fill:var(--brand-2);transition:transform .25s}
.spot-all:hover{color:#FFFFFF}
.spot-all:hover svg{transform:translateX(4px)}
.film-spotlight{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(340px,.85fr);gap:clamp(24px,3.5vw,48px);align-items:stretch}
.spot-stage{position:relative;aspect-ratio:16/9;min-height:0;border-radius:20px;overflow:hidden;border:1px solid rgba(179,179,179,.25);box-shadow:0 26px 70px rgba(0,0,0,.4);isolation:isolate}
.spot-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .7s ease,transform 6s ease}
.spot-bg.is-active{opacity:1;transform:scale(1)}
.spot-stage::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(9,9,9,0) 30%,rgba(9,9,9,.55) 62%,rgba(9,9,9,.95) 100%)}
.spot-overlay{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(20px,3vw,36px)}
.spot-tag{margin:0 0 8px;display:inline-flex;align-items:center;gap:9px;color:#FECFA5;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.spot-tag::before{content:"";width:18px;height:2px;background:var(--brand);box-shadow:6px 0 0 rgba(var(--brand-2-rgb),.5)}
.spot-overlay h3{margin:0 0 10px;color:#FFFFFF;font-size:clamp(24px,2.6vw,38px);line-height:1.12;font-weight:700;text-shadow:0 3px 20px rgba(0,0,0,.8)}
.spot-desc{margin:0 0 12px;max-width:640px;color:rgba(255,255,255,.85);font-size:16px;line-height:1.65;text-shadow:0 1px 12px rgba(0,0,0,.8);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.spot-meta{margin:0 0 18px;color:#FECFA5;font-size:14px;font-weight:600;text-shadow:0 1px 8px rgba(0,0,0,.8)}
.spot-btn{display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border-radius:12px;background:#FFFFFF;color:#171717;font-size:14px;font-weight:800;transition:.25s}
.spot-btn svg{width:16px;height:16px;transition:transform .25s}
.spot-btn:hover{background:var(--brand-2);color:#171717}
.spot-btn:hover svg{transform:translateX(4px)}
.spot-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;justify-content:stretch}
.spot-list li{flex:1;display:flex}
.spot-item{flex:1;display:flex;align-items:center;gap:18px;width:100%;padding:18px 6px;background:none;border:0;border-top:1px solid rgba(255,255,255,.12);color:inherit;text-align:left;cursor:pointer;transition:.25s}
.spot-list li:last-child .spot-item{border-bottom:1px solid rgba(255,255,255,.12)}
.spot-num{flex:0 0 auto;color:rgba(255,255,255,.55);font-size:22px;font-weight:300;font-variant-numeric:tabular-nums;transition:.25s}
.spot-item-copy b{display:block;color:#C5C5C5;font-size:17px;font-weight:700;line-height:1.35;transition:.25s}
.spot-item-copy small{display:block;margin-top:3px;color:#898989;font-size:13px}
.spot-item:hover .spot-item-copy b{color:#FFFFFF}
.spot-item.is-active{border-top-color:var(--brand-2)}
.spot-item.is-active .spot-num{color:var(--brand-2);font-weight:700}
.spot-item.is-active .spot-item-copy b{color:#FFFFFF}
.spot-item.is-active .spot-item-copy small{color:#FECFA5}
@media(max-width:1000px){
  .film-spotlight{grid-template-columns:1fr}
  .spot-stage{aspect-ratio:16/9}
  .spot-item{padding:14px 4px}
}
@media(max-width:520px){
  .spot-head{flex-direction:column;align-items:flex-start;gap:10px}
  .spot-desc{-webkit-line-clamp:3}
  .spot-item-copy b{font-size:16px}
}

/* ============================================================
   FEEDBACK LẦN 2 — WEB TODAYTV
   ============================================================ */

/* --- Mục 2.0: bỏ nhãn nhỏ "— TodayTV" phía trên tiêu đề section ---
   Các eyebrow section khác đã ẩn sẵn qua .badge.badge-cyan.mb-5;
   riêng cái trong .spot-head không có .mb-5 nên vẫn hiện.
   Nhãn nằm TRONG card (article) là thông tin thật → giữ nguyên. */
.spot-head .badge.badge-cyan { display: none !important; }

/* --- Mục 3.0: khu lịch phát sóng — nền ngả nhẹ sang cam của kênh --- */
.schedule-shell {
  border-color: rgba(var(--brand-2-rgb),0.30) !important;
  background:
    linear-gradient(180deg,
      rgba(var(--brand-2-rgb),0.13) 0%,
      rgba(var(--brand-2-rgb),0.05) 46%,
      rgba(32, 32, 32, 0.92) 100%) !important;
}
.schedule-item { background: rgba(23, 23, 23, 0.86); }
.schedule-arrow { border-color: rgba(var(--brand-2-rgb),0.34); }

/* --- Mục 4.0: khối "Giới thiệu về IMC-TodayTV" --- */
/* 4.0b — ảnh minh hoạ cao lên (trước là khung vuông 1/1) */
.about-network-deco { aspect-ratio: 4 / 5; max-width: 460px; }
.about-network-deco .photo-frame { inset: 6% 8%; }

/* 4.0c — 4 ô thống kê dàn 1 hàng ngang.
   Lý do phải viết tay: main.css là bản Tailwind compile sẵn của template,
   trong đó KHÔNG có class .md\:grid-cols-4 (chỉ có grid-cols-2), nên markup
   md:grid-cols-4 không có tác dụng và 4 ô rơi xuống 2 hàng. */
@media (min-width: 768px) {
  [class*="md:grid-cols-4"] {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}


/* ============================================================
   TIỆN ÍCH MÀU — thay cho style="" trong markup
   Để WordPress không phải đụng vào inline style khi đổi bảng màu.
   ============================================================ */
.text-brand-gradient {
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Đặt trên nền thẻ (#202020): --brand chỉ đạt 4.41:1 nên dùng tint sáng hơn (5.24:1) */
.link-brand { color: var(--brand-on-card); }
.text-brand-accent { color: var(--brand-accent); }
.border-brand { border-color: var(--brand); }
.media-placeholder { aspect-ratio: 16 / 10; background: linear-gradient(135deg, var(--surface), #363636); }
.icon-brand { color: var(--brand); }
.img-fallback { background: var(--surface); }

/* Nhan phan loai trong ticker topbar */
.tk-tag{color:#FC850E;font-weight:700;font-size:12px;letter-spacing:.1em;margin-right:8px;text-transform:uppercase}
.tk-gap{display:inline-block;width:48px}

/* Ghim thanh menu co dinh: rule "body > :not(#three-light-bg):not(script){position:relative}"
   o tren co do dac hieu ID nen de mat position:sticky cua .header */
body > header.header{position:sticky!important;top:0;z-index:100!important}