/* NHENPHIM — clean build */
:root {
  --void: #06080f;
  --surface: #0e121c;
  --panel: #151b28;
  --line: rgba(255,255,255,0.08);
  --text: #eef1f7;
  --muted: #8b95a8;
  --cyan: #2ee6d6;
  --gold: #f5b942;
  --rose: #ff5c7a;
  --radius: 14px;
  --header-h: 64px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Outfit', system-ui, sans-serif;
  background: var(--void);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* prevent 100vw horizontal bleed */
html, body {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
img { max-width: 100%; display: block; }
.hidden { display: none !important; }

/* Header */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center; gap: 12px;
  padding: 0 16px;
  background: transparent;
  transition: background .3s, box-shadow .3s, border-color .3s;
}
.header.scrolled {
  background: rgba(6, 10, 18, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(46,230,214,0.12);
  box-shadow: 0 4px 24px rgba(0,0,0,0.35);
}
.brand {
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0; cursor: pointer;
}
.brand-logo {
  width: 40px; height: 40px; border-radius: 10px;
  object-fit: contain; background: rgba(46,230,214,0.1);
}
.brand-text {
  font-weight: 800; font-size: 1.05rem; letter-spacing: -0.02em;
  background: linear-gradient(100deg, #fff, #2ee6d6);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.brand-sub { display: block; font-size: 0.65rem; color: var(--muted); font-weight: 500; -webkit-text-fill-color: var(--muted); }

.search-wrap {
  flex: 1; max-width: 420px; margin: 0 auto;
  position: relative;
}
.search-wrap input {
  width: 100%; height: 40px;
  padding: 0 14px 0 40px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.06);
  color: var(--text); font-size: 0.9rem;
  outline: none;
}
.search-wrap input:focus { border-color: rgba(46,230,214,0.4); }
.search-wrap .ico {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  opacity: 0.5; pointer-events: none;
}

.nav-tabs {
  display: flex; gap: 4px; flex-shrink: 0;
}
.nav-tabs button {
  padding: 8px 12px; border-radius: 999px;
  font-size: 0.82rem; font-weight: 600; color: var(--muted);
  transition: .15s;
}
.nav-tabs button.on, .nav-tabs button:hover {
  color: #fff; background: rgba(46,230,214,0.12);
}

/* Main */
.main { padding: calc(var(--header-h) + 8px) 16px 80px; max-width: 1280px; margin: 0 auto; }

/* Hero — 16:9, ảnh KHÔNG phóng (contain, không scale) */
body.mode-home .main,
body:not(.mode-detail):not(.mode-list) .main {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  overflow-x: hidden !important;
}
#hero,
.hero,
.hero-carousel {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 28px 0 !important;
  padding: 0 !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  background: #0a0e16 !important;
  box-sizing: border-box !important;
}
#heroSlides,
.hero-slides {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  transform: none !important;
}
.hero-slide {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
  z-index: 1;
  overflow: hidden !important;
  transform: none !important;
}
.hero-slide.on,
.hero-slide.active {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}
.hero-media {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  z-index: 0;
  background: #0a0e16;
  transform: none !important;
}
/*
  contain = không crop, không phóng để lấp khung.
  Ảnh 16:9 + khung 16:9 → khớp 1:1, không zoom.
  cover mới là thứ "phóng" khi tỷ lệ lệch.
*/
#hero .hero-fill-img,
.hero .hero-fill-img,
.hero-slide .hero-fill-img,
img.hero-fill-img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
  scale: none !important;
  zoom: 1 !important;
  image-rendering: auto !important;
}
.hero-blur-bg {
  position: absolute !important;
  inset: -8% !important;
  width: auto !important;
  height: auto !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  filter: blur(28px) saturate(1.05) brightness(0.55) !important;
  transform: scale(1.08) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
.hero-bg {
  display: none !important;
}
.hero-media {
  background: #0a0e16 !important;
}
#hero .hero-fill-img,
.hero .hero-fill-img,
img.hero-fill-img {
  position: relative !important;
  z-index: 1 !important;
  object-fit: contain !important;
}

.hero-shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(5, 8, 15, 0.8) 0%,
    rgba(5, 8, 15, 0.45) 24%,
    rgba(5, 8, 15, 0.12) 50%,
    transparent 72%
  );
}
.hero-vignette,
.hero-overlay,
.hero-layout,
.hero-poster-wrap {
  display: none !important;
}
.hero-content {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 680px;
  height: 100%;
  padding: 0 0 0 max(4vw, 24px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;
  pointer-events: none;
}
.hero-content button,
.hero-content a { pointer-events: auto; }
.hero-content .hero-title {
  margin: 0;
  font-size: clamp(1.65rem, 3.2vw, 2.85rem);
  font-weight: 800;
  line-height: 1.12;
  color: #fff;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}
.hero-content .hero-origin {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--cyan, #2ee6d6);
}
.hero-content .hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hero-content .hero-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 0.74rem;
  font-weight: 700;
}
.hero-content .hero-tag.plain {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #eef3fb;
}
.hero-content .hero-syn {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(230, 236, 248, 0.9);
  max-width: 38em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hero-content .hero-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}
.hero-content .btn-play,
.btn-play {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  border: 0;
  font-weight: 700;
  font-size: 0.9rem;
  background: linear-gradient(120deg, #2ee6d6, #1e90ff);
  color: #041210;
  box-shadow: 0 4px 20px rgba(46, 230, 214, 0.35);
  cursor: pointer;
}
.hero-content .btn-play:hover,
.btn-play:hover { filter: brightness(1.08); }
.hero-content .btn-hero-more {
  height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
.hero-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  font-size: 1.2rem;
  z-index: 4;
  display: grid;
  place-items: center;
  border: 0;
  cursor: pointer;
}
.hero-nav.prev { left: 12px; }
.hero-nav.next { right: 12px; }
.hero-dots {
  position: absolute;
  left: max(4vw, 24px);
  bottom: 14px;
  z-index: 4;
  display: flex;
  gap: 7px;
}
.hero-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
}
.hero-dot.on {
  width: 18px;
  border-radius: 99px;
  background: var(--cyan, #2ee6d6);
}
#homeView > .explore,
#homeView > #rails,
#homeView > .site-footer,
#homeView > #siteFooter {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}
@media (max-width: 900px) {
  #hero, .hero, .hero-carousel {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 16px 0 !important;
    aspect-ratio: 16 / 9 !important;
  }
  .hero-content {
    max-width: 100%;
    padding: 14px 14px 28px;
    justify-content: flex-end;
    gap: 6px;
  }
  .hero-content .hero-title {
    font-size: clamp(1.15rem, 5vw, 1.4rem);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .hero-content .hero-syn { display: none; }
  .hero-nav { display: none; }
  .hero-dots { left: 14px; bottom: 10px; }
}

/* Rails */
.rail { margin-bottom: 28px; }
.rail-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 12px;
}
.rail-title { font-size: 1.15rem; font-weight: 800; }
.rail-more { font-size: 0.82rem; color: var(--cyan); font-weight: 600; }
.rail-scroll {
  display: flex; gap: 12px;
  overflow-x: auto; padding-bottom: 8px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.rail-scroll::-webkit-scrollbar { height: 4px; }
.rail-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }

.card {
  flex: 0 0 auto;
  width: 148px;
  scroll-snap-align: start;
  cursor: pointer;
  transition: transform .2s var(--ease);
}
.card:hover { transform: translateY(-4px); }
.card-poster {
  position: relative;
  aspect-ratio: 2/3;
  border-radius: 12px;
  overflow: hidden;
  background: var(--panel);
}
.card-poster img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.card-badge {
  position: absolute; top: 8px; left: 8px;
  padding: 2px 7px; border-radius: 6px;
  font-size: 0.65rem; font-weight: 800;
  background: linear-gradient(120deg, #f5b942, #ff8c00);
  color: #1a1000;
}
.card-year {
  position: absolute; bottom: 8px; right: 8px;
  padding: 2px 6px; border-radius: 6px;
  font-size: 0.65rem; font-weight: 700;
  background: rgba(0,0,0,0.7); color: #fff;
}
.card-year.fire {
  background: linear-gradient(120deg, #ff3d00, #ff9100);
}
.card-name {
  margin-top: 8px;
  font-size: 0.82rem; font-weight: 650;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-meta { font-size: 0.72rem; color: var(--muted); margin-top: 2px; }

/* Explore mosaic */
.explore { margin: 20px 0 40px; }
.explore-kicker {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--cyan); margin-bottom: 4px;
}
.explore-title {
  font-size: 1.4rem; font-weight: 800; margin-bottom: 16px;
  background: linear-gradient(100deg, #fff, #2ee6d6);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.explore-label {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
  margin: 20px 0 10px;
}
.explore-feat {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.explore-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.ecard {
  position: relative; overflow: hidden;
  padding: 14px 16px; min-height: 72px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.1);
  text-align: left;
  transition: transform .15s, border-color .15s;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.ecard:hover { transform: translateY(-2px); border-color: rgba(46,230,214,0.35); }
.ecard .tag { font-size: 0.62rem; font-weight: 700; opacity: 0.8; text-transform: uppercase; letter-spacing: 0.06em; }
.ecard .name { font-size: 0.92rem; font-weight: 800; margin-top: 2px; }
.ecard.p0 { background: linear-gradient(135deg, #1a3a5c, #0d2137); }
.ecard.p1 { background: linear-gradient(135deg, #5c1a3a, #2a0d1c); }
.ecard.p2 { background: linear-gradient(135deg, #1a5c4a, #0d2a22); }
.ecard.p3 { background: linear-gradient(135deg, #3a1a5c, #1c0d2a); }
.ecard.p4 { background: linear-gradient(135deg, #5c4a1a, #2a220d); }
.ecard.p5 { background: linear-gradient(135deg, #1a4a5c, #0d222a); }
.ecard.p6 { background: linear-gradient(135deg, #5c1a1a, #2a0d0d); }
.ecard.p7 { background: linear-gradient(135deg, #1a5c1a, #0d2a0d); }
.explore-feat .ecard { min-height: 100px; border-radius: 18px; }

/* List / grid */
.sec-title { font-size: 1.2rem; font-weight: 800; margin-bottom: 14px; }
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 14px;
}
.grid .card { width: auto; }
.pager {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center; margin: 28px 0;
}
.page-btn {
  min-width: 40px; height: 40px; padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.05);
  font-weight: 600;
}
.page-btn.on, .page-btn:hover {
  border-color: rgba(46,230,214,0.4);
  color: var(--cyan);
}

/* Detail */
.detail { display: none; }
.detail.on { display: block; }
.home-view.hidden, .list-view.hidden { display: none !important; }
.back-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--line);
  font-weight: 600; margin-bottom: 16px;
}
.player-box {
  position: relative;
  aspect-ratio: 16/9;
  background: #000;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 16px;
}
.player-box iframe, .player-box video {
  width: 100%; height: 100%; border: 0;
}
.detail-title { font-size: 1.55rem; font-weight: 800; margin-bottom: 8px; }
.detail-meta { color: var(--muted); font-size: 1.02rem; margin-bottom: 12px; line-height: 1.5; }
.detail-content {
  color: #c5cddc; font-size: 1.05rem;
  margin-bottom: 18px; line-height: 1.65;
}
.ep-servers { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.ep-server {
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--line); font-weight: 600; font-size: 0.82rem;
}
.ep-server.on { background: rgba(46,230,214,0.15); border-color: var(--cyan); color: var(--cyan); }
.ep-list { display: flex; flex-wrap: wrap; gap: 8px; }
.ep-btn {
  min-width: 48px; padding: 8px 12px;
  border-radius: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  font-weight: 600; font-size: 0.82rem;
}
.ep-btn.on { background: linear-gradient(120deg, rgba(46,230,214,0.3), rgba(30,144,255,0.2)); border-color: var(--cyan); }

/* States */
.state-box {
  text-align: center; padding: 48px 16px; color: var(--muted);
}
.spinner {
  width: 36px; height: 36px; margin: 0 auto 12px;
  border: 3px solid rgba(255,255,255,0.1);
  border-top-color: var(--cyan);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Mobile bottom nav */
.bottom-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  background: #06080f;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-top: 1px solid var(--line);
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  justify-content: space-around;
}
.bottom-nav button {
  flex: 1; padding: 8px; font-size: 0.75rem; font-weight: 600; color: var(--muted);
}
.bottom-nav button.on { color: var(--cyan); }

.footer {
  text-align: center; padding: 24px 16px 90px;
  color: var(--muted); font-size: 0.8rem;
}

@media (max-width: 768px) {
  .nav-tabs { display: none; }
  .bottom-nav { display: flex; }
  .brand-sub { display: none; }
  .card { width: 120px; }
/* neutralized: /* neutralized hero height */ */
  .search-wrap { max-width: none; }
}


/* ═══ Search premium ═══ */
.search-wrap input {
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.search-wrap input:focus {
  border-color: rgba(46,230,214,0.55);
  background: rgba(14,18,28,0.95);
  box-shadow: 0 0 0 3px rgba(46,230,214,0.12), 0 8px 28px rgba(0,0,0,0.35);
}
.search-suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px);
  background: rgba(14,18,28,0.98);
  border: 1px solid rgba(46,230,214,0.15);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
  max-height: 360px; overflow-y: auto;
  z-index: 200; display: none;
}
.search-suggest.on { display: block; }
.sg-item {
  display: flex; gap: 12px; align-items: center;
  padding: 10px 14px; cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  text-align: left; width: 100%;
}
.sg-item:hover { background: rgba(46,230,214,0.08); }
.sg-item img {
  width: 40px; height: 56px; object-fit: cover; border-radius: 6px;
  background: var(--panel); flex-shrink: 0;
}
.sg-item .sg-name { font-weight: 650; font-size: 0.88rem; }
.sg-item .sg-meta { font-size: 0.72rem; color: var(--muted); }

/* ═══ Play button shimmer ═══ */
.btn-play {
  position: relative; overflow: hidden;
  background: linear-gradient(120deg, #2ee6d6 0%, #1e90ff 50%, #2ee6d6 100%);
  background-size: 200% 100%;
  animation: playShine 3s ease infinite;
  box-shadow: 0 4px 24px rgba(46,230,214,0.4), 0 0 40px rgba(30,144,255,0.2);
}
.btn-play::after {
  content: '';
  position: absolute; top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
  animation: playSweep 2.4s ease-in-out infinite;
}
@keyframes playShine {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes playSweep {
  0% { left: -80%; }
  100% { left: 130%; }
}
.btn-play:hover {
  filter: brightness(1.1);
  box-shadow: 0 6px 32px rgba(46,230,214,0.55);
}

/* Quality badges shimmer */
.card-badge, .badge-q {
  background:
    radial-gradient(80% 60% at 30% 25%, rgba(255,255,255,0.55) 0%, transparent 50%),
    linear-gradient(160deg,
      #8a6a12 0%,
      #c9a227 22%,
      #ffe9a0 45%,
      #f5b942 58%,
      #a67c00 82%,
      #6b4f0a 100%);
  color: #1a1200;
  border: 1px solid rgba(255,255,255,0.35);
  box-shadow:
    0 2px 10px rgba(245,185,66,0.4),
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -1px 3px rgba(80,50,0,0.35);
  animation: luxBreath 4s ease-in-out infinite;
}
.card-year.fire, .badge-year-fire {
  background:
    radial-gradient(70% 50% at 35% 20%, rgba(255,220,120,0.7) 0%, transparent 55%),
    linear-gradient(155deg,
      #5c0000 0%,
      #c41000 20%,
      #ff4d00 40%,
      #ffb347 52%,
      #ff2d00 68%,
      #8b0000 100%);
  border: none;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.45);
  box-shadow:
    0 2px 14px rgba(255,60,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 -2px 6px rgba(60,0,0,0.4);
  animation: luxBreath 3s ease-in-out infinite;
}

.brand-text {
  background: linear-gradient(100deg, #ffffff 0%, #2ee6d6 40%, #f5d78e 70%, #ffffff 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: luxBreath 5s ease-in-out infinite;
}

/* Search icon refined */
.search-wrap .search-ico {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--muted); display: grid; place-items: center;
  pointer-events: none; opacity: 0.7;
}
.search-wrap input {
  padding-left: 42px !important;
}
.search-wrap input:focus + .search-suggest,
.search-wrap:focus-within .search-ico { color: var(--cyan); opacity: 1; }

/* Pager modern */
.pager {
  display: flex; flex-wrap: wrap; gap: 6px;
  justify-content: center; align-items: center;
  margin: 28px 0 20px;
}
.page-btn, .page-ellipsis {
  min-width: 40px; height: 40px; padding: 0 10px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.04);
  font-weight: 650; font-size: 0.88rem;
  color: var(--text);
  transition: .15s;
}
.page-btn:hover {
  border-color: rgba(46,230,214,0.4);
  color: var(--cyan);
}
.page-btn.on {
  background: linear-gradient(120deg, rgba(46,230,214,0.28), rgba(30,144,255,0.22));
  border-color: rgba(46,230,214,0.5);
  color: #fff;
  box-shadow: 0 0 16px rgba(46,230,214,0.2);
}
.page-ellipsis {
  cursor: pointer;
  letter-spacing: 0.15em;
  color: var(--muted);
}
.page-ellipsis:hover { color: var(--cyan); border-color: rgba(46,230,214,0.35); }
.page-jump {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px;
  border-radius: 12px;
  border: 1px solid rgba(46,230,214,0.35);
  background: rgba(14,18,28,0.95);
}
.page-jump input {
  width: 64px; height: 32px;
  border-radius: 8px; border: 1px solid var(--line);
  background: rgba(255,255,255,0.06);
  color: #fff; text-align: center; font-weight: 700;
  outline: none;
}
.page-jump input:focus { border-color: var(--cyan); }
.page-jump button {
  height: 32px; padding: 0 12px; border-radius: 8px;
  background: linear-gradient(120deg, #2ee6d6, #1e90ff);
  color: #041210; font-weight: 800; font-size: 0.8rem;
}

/* Bottom nav — sliding indicator */
.bottom-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  background: #06080f;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-top: 1px solid rgba(46,230,214,0.12);
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  justify-content: stretch;
  gap: 0;
}
.bottom-nav { position: fixed; }
.bn-indicator {
  position: absolute;
  top: 6px; bottom: calc(6px + env(safe-area-inset-bottom));
  width: 33.333%;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(46,230,214,0.18), rgba(30,144,255,0.12));
  border: 1px solid rgba(46,230,214,0.25);
  transition: transform .35s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  z-index: 0;
}
.bottom-nav button {
  position: relative; z-index: 1;
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 4px;
  font-size: 0.72rem; font-weight: 650;
  color: var(--muted);
  transition: color .25s;
  background: transparent;
}
.bottom-nav button .bn-ico {
  font-size: 1.05rem; line-height: 1; opacity: 0.85;
}
.bottom-nav button.on {
  color: var(--cyan);
}
.bottom-nav button.on .bn-ico { opacity: 1; }

/* Responsive polish */
@media (max-width: 768px) {
  .nav-tabs { display: none !important; }
  .bottom-nav { display: flex; }
  .main { padding-bottom: 96px; }
/* neutralized: /* neutralized hero height */ */
  .hero-body { left: 14px; bottom: 14px; right: 14px; }
  .hero-body h2 { font-size: 1.15rem; }
  .card { width: 112px; }
  .rail-scroll { gap: 10px; }
  .search-wrap { max-width: none; flex: 1; }
  .brand-sub { display: none; }
  .detail-top { grid-template-columns: 100px 1fr; }
  .explore-feat { grid-template-columns: repeat(2, 1fr); }
  .page-btn, .page-ellipsis { min-width: 36px; height: 36px; font-size: 0.82rem; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .card { width: 132px; }
  .main { padding-left: 20px; padding-right: 20px; }
}
@media (min-width: 1025px) {
  .bottom-nav { display: none !important; }
  .card { width: 150px; }
/* neutralized: /* neutralized hero height */ */
}

#spcCtxMenu {
  position: fixed; z-index: 99999;
  min-width: 168px;
  padding: 6px;
  border-radius: 14px;
  background: rgba(10, 14, 24, 0.94);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(46,230,214,0.18);
  box-shadow: 0 12px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04);
  display: none;
  animation: ctxIn .16s ease-out;
}
#spcCtxMenu.on { display: block; }
@keyframes ctxIn {
  from { opacity: 0; transform: scale(0.96) translateY(-4px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
#spcCtxMenu button {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 650; font-size: 0.88rem;
  color: #eef1f7;
  text-align: left;
  transition: background .15s, color .15s;
}
#spcCtxMenu button:hover {
  background: linear-gradient(120deg, rgba(46,230,214,0.16), rgba(30,144,255,0.1));
  color: #2ee6d6;
}
#spcCtxMenu .ctx-ico {
  width: 18px; height: 18px; opacity: 0.9;
}


/* Soft tags — không nhựa */
.badge, .card-badge, .badge-q {
  border-radius: 6px !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  padding: 3px 8px !important;
  border: none !important;
}
.badge:not(.badge-q):not(.badge-year-fire) {
  background: rgba(255,255,255,0.08) !important;
  color: #c5cdd8 !important;
  box-shadow: none !important;
  animation: none !important;
}

/* Gold / fire — shimmer mượt trong khối màu (không vệt trắng công nghiệp) */
@keyframes softShimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.card-badge, .badge-q {
  background: linear-gradient(
    125deg,
    #7a5c10 0%,
    #d4af37 18%,
    #fff1b8 36%,
    #e8c547 52%,
    #a67c00 72%,
    #d4af37 88%,
    #7a5c10 100%
  ) !important;
  background-size: 220% 220% !important;
  animation: softShimmer 4.5s ease-in-out infinite !important;
  color: #1a1200 !important;
  box-shadow: 0 1px 6px rgba(212,175,55,0.35), inset 0 1px 0 rgba(255,255,255,0.4) !important;
}
.card-year.fire, .badge-year-fire {
  background: linear-gradient(
    130deg,
    #4a0000 0%,
    #c01800 20%,
    #ff6a00 38%,
    #ffd080 50%,
    #ff3d00 65%,
    #9a1000 85%,
    #4a0000 100%
  ) !important;
  background-size: 220% 220% !important;
  animation: softShimmer 3.8s ease-in-out infinite !important;
  color: #fff !important;
  box-shadow: 0 1px 8px rgba(255,60,0,0.4), inset 0 1px 0 rgba(255,255,255,0.3) !important;
}
.btn-play {
  background: linear-gradient(
    125deg,
    #0f766e 0%,
    #2ee6d6 22%,
    #b8fff8 40%,
    #2ee6d6 55%,
    #1e90ff 78%,
    #0e7490 100%
  ) !important;
  background-size: 220% 220% !important;
  animation: softShimmer 5s ease-in-out infinite !important;
  box-shadow: 0 4px 20px rgba(46,230,214,0.35), inset 0 1px 0 rgba(255,255,255,0.35) !important;
}
.btn-play::before, .btn-play::after { display: none !important; }

/* Detail layout — poster nhỏ gọn */
.detail-top {
  grid-template-columns: 110px 1fr !important;
  gap: 14px !important;
  margin-bottom: 14px !important;
  align-items: start;
}
.detail-poster {
  width: 110px !important;
  max-width: 110px !important;
  aspect-ratio: 2/3;
  border-radius: 10px !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.4) !important;
}
.detail-title {
  font-size: 1.35rem !important;
  line-height: 1.3;
  margin-bottom: 6px !important;
}
.detail-meta {
  font-size: 1rem !important;
  line-height: 1.5 !important;
}
.detail-content {
  font-size: 1.05rem !important;
  line-height: 1.65 !important;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #c8d0e0 !important;
}
.detail-badges { margin: 4px 0 8px !important; gap: 5px !important; }
.player-box {
  margin-bottom: 14px !important;
  border-radius: 12px !important;
}
.src-label {
  margin: 8px 0 6px !important;
  font-size: 0.72rem !important;
}

/* View isolation — không chồng home + detail */
.home-view.hidden,
.list-view.hidden { display: none !important; }
.detail { display: none !important; }
.detail.on { display: block !important; }
body.mode-detail .home-view,
body.mode-detail .list-view,
body.mode-detail #explore,
body.mode-detail #rails,
body.mode-detail #hero { display: none !important; }
body.mode-home .detail { display: none !important; }
body.mode-list .home-view { display: none !important; }
body.mode-list .detail { display: none !important; }

@media (max-width: 768px) {
  .detail-top { grid-template-columns: 88px 1fr !important; gap: 12px !important; }
  .detail-poster { width: 88px !important; max-width: 88px !important; }
  .detail-title { font-size: 1.05rem !important; }
  .detail-content { -webkit-line-clamp: 3; }
}
@media (min-width: 900px) {
  .detail-top { grid-template-columns: 128px 1fr !important; }
  .detail-poster { width: 128px !important; max-width: 128px !important; }
}


/* Boot splash */
body.booting { overflow: hidden; }
.boot-splash {
  position: fixed; inset: 0; z-index: 999999;
  display: flex; align-items: center; justify-content: center;
  background: #06080f;
  transition: opacity .45s ease, visibility .45s;
  overflow: hidden;
}
.boot-splash.hide {
  opacity: 0; visibility: hidden; pointer-events: none;
}
.boot-bg {
  position: absolute; inset: 0;
  background:
    #06080f url('/boot-bg.jpg?v=20260926') center center / cover no-repeat;
  transform: scale(1.08);
  filter: saturate(1.2) contrast(1.12) brightness(0.95);
  animation: bootKen 22s ease-in-out infinite alternate;
}
.boot-veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 65% 50% at 50% 40%, rgba(6,10,22,0.25) 0%, rgba(6,8,15,0.55) 55%, rgba(6,8,15,0.88) 100%),
    linear-gradient(180deg, rgba(6,8,15,0.35) 0%, rgba(6,8,15,0.4) 35%, rgba(6,8,15,0.82) 100%),
    linear-gradient(90deg, rgba(0,30,80,0.18) 0%, transparent 40%, transparent 60%, rgba(0,30,80,0.15) 100%);
  pointer-events: none;
}
@keyframes bootKen {
  0% { transform: scale(1.04) translateY(0); }
  100% { transform: scale(1.12) translateY(-1.5%); }
}
.boot-inner {
  position: relative; z-index: 2;
  text-align: center; width: min(340px, 86vw);
  display: flex; flex-direction: column; align-items: center;
}
.boot-logo {
  width: 76px; height: 76px; border-radius: 20px;
  object-fit: contain; margin: 0 auto 14px;
  box-shadow: 0 10px 40px rgba(0,82,255,0.28), 0 0 0 1px rgba(255,255,255,0.08);
}
.boot-name {
  font-weight: 800; font-size: 1.7rem; letter-spacing: 0.14em;
  background: linear-gradient(100deg, #fff, #7eb6ff 40%, #2ee6d6 75%, #fff);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: softShimmer 4s ease-in-out infinite;
  margin-bottom: 26px;
}
.boot-loader {
  --color-1: #FFFFFF;
  --color-2: #0052FF;
  --size: 1.5px;
  transform: rotateZ(45deg);
  perspective: calc(1000 * var(--size));
  border-radius: 50%;
  width: calc(48 * var(--size));
  height: calc(48 * var(--size));
  color: var(--color-1);
  display: block;
  position: relative;
  margin: 4px auto 0;
}
.boot-loader:before,
.boot-loader:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: inherit;
  height: inherit;
  border-radius: 50%;
  transform: rotateX(70deg);
  animation: 1s bootSpin linear infinite;
}
.boot-loader:after {
  color: var(--color-2);
  transform: rotateY(70deg);
  animation-delay: 0.4s;
}
@keyframes bootSpin {
  0%, 100% { box-shadow: 0.2em 0 0 0 currentcolor; }
  12% { box-shadow: 0.2em 0.2em 0 0 currentcolor; }
  25% { box-shadow: 0 0.2em 0 0 currentcolor; }
  37% { box-shadow: -0.2em 0.2em 0 0 currentcolor; }
  50% { box-shadow: -0.2em 0 0 0 currentcolor; }
  62% { box-shadow: -0.2em -0.2em 0 0 currentcolor; }
  75% { box-shadow: 0 -0.2em 0 0 currentcolor; }
  87% { box-shadow: 0.2em -0.2em 0 0 currentcolor; }
}
.boot-hint {
  margin-top: 18px; font-size: 0.8rem; color: #c5ccd8;
  text-shadow: 0 2px 12px rgba(0,0,0,0.65);
}

/* Heartbeat play button */
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.08); }
  28% { transform: scale(1); }
  42% { transform: scale(1.06); }
  70% { transform: scale(1); }
}
.btn-play {
  animation: softShimmer 5s ease-in-out infinite, heartbeat 1.4s ease-in-out infinite !important;
}

/* Quality tags HD FHD 4K — gold luxury shimmer */
.card-badge, .badge-q, .badge-hd, .badge-fhd, .badge-4k {
  background: linear-gradient(
    125deg,
    #6b4e0a 0%,
    #c9a227 20%,
    #fff3c0 38%,
    #e8c547 55%,
    #a67c00 75%,
    #c9a227 90%,
    #6b4e0a 100%
  ) !important;
  background-size: 240% 240% !important;
  animation: softShimmer 4s ease-in-out infinite !important;
  color: #1a1200 !important;
  border: none !important;
  border-radius: 6px !important;
  font-weight: 800 !important;
  box-shadow: 0 1px 8px rgba(212,175,55,0.4), inset 0 1px 0 rgba(255,255,255,0.45) !important;
}

/* Strict view lock */
#homeView, #listView, #detailView { min-height: 0; }
body.mode-detail #homeView,
body.mode-detail #listView { display: none !important; visibility: hidden !important; height: 0 !important; overflow: hidden !important; }
body.mode-detail #detailView { display: block !important; }
body.mode-home #detailView,
body.mode-list #detailView,
body.mode-search #detailView { display: none !important; }
body.mode-home #listView { display: none !important; }
body.mode-list #homeView,
body.mode-search #homeView { display: none !important; }


/* Hero: hiện đủ thumbnail (không crop mất đầu/chân) */
.hero {
  background: #0a0e18 !important;
}
.hero-slide {
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-color: #0a0e18;
}
/* Lớp ảnh thật phủ full khung */
.hero-slide .hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center center;
  z-index: 0;
}
.hero-overlay { z-index: 1; }
.hero-body { z-index: 2; }

/* Shimmer rõ hơn — HD/FHD/4K + 2026 + nút phát */
@keyframes softShimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  15% { transform: scale(1.07); }
  30% { transform: scale(1); }
  45% { transform: scale(1.05); }
  60% { transform: scale(1); }
}
.card-badge, .badge-q, .badge-hd, .badge-fhd, .badge-4k {
  background: linear-gradient(
    110deg,
    #5c4508 0%,
    #b8860b 15%,
    #ffd700 32%,
    #fff8dc 48%,
    #ffd700 62%,
    #b8860b 80%,
    #5c4508 100%
  ) !important;
  background-size: 280% 280% !important;
  animation: softShimmer 2.8s ease-in-out infinite !important;
  color: #1a1200 !important;
  text-shadow: 0 0 1px rgba(255,255,255,0.3);
}
.card-year.fire, .badge-year-fire {
  background: linear-gradient(
    115deg,
    #3b0000 0%,
    #a00000 18%,
    #ff4500 35%,
    #ffcc66 50%,
    #ff2d00 65%,
    #8b0000 85%,
    #3b0000 100%
  ) !important;
  background-size: 280% 280% !important;
  animation: softShimmer 2.5s ease-in-out infinite !important;
  color: #fff !important;
}
.btn-play {
  background: linear-gradient(
    115deg,
    #0a5c54 0%,
    #2ee6d6 20%,
    #e0fffa 40%,
    #2ee6d6 55%,
    #1e90ff 75%,
    #0a5c54 100%
  ) !important;
  background-size: 280% 280% !important;
  animation: softShimmer 3s ease-in-out infinite, heartbeat 1.35s ease-in-out infinite !important;
}
.btn-play::before, .btn-play::after { display: none !important; }

/* Cứng: pre-detail + mode-detail */
html.pre-detail #homeView,
html.pre-detail #listView,
body.mode-detail #homeView,
body.mode-detail #listView {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}
html.pre-detail #detailView,
body.mode-detail #detailView {
  display: block !important;
  visibility: visible !important;
}


/* ===== Hero rạp chiếu (tham khảo bản SPC — chỉ animation/layout hero) ===== */
.hero,
.hero-carousel {
  position: relative !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  margin-bottom: 36px !important;
  height: clamp(300px, 48vw, 480px) !important;
  min-height: 280px !important;
  background: #0a0e18 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.45) !important;
}
#heroSlides {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
}
.hero-slide {
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1) !important;
  z-index: 0 !important;
  background: #0a0e18 !important;
  transform: none !important;
}
.hero-slide.on,
.hero-slide.active {
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 2 !important;
}
.hero-bg,
.hero-slide .hero-img,
.hero-slide img.hero-bg-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  transform: scale(1.08);
  transition: transform 7s linear;
  z-index: 0 !important;
}
.hero-slide.on .hero-bg,
.hero-slide.on .hero-img,
.hero-slide.on img.hero-bg-img,
.hero-slide.active .hero-bg,
.hero-slide.active .hero-img {
  transform: scale(1);
}
.hero-overlay,
.hero-bg::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background:
    linear-gradient(90deg, rgba(6,8,15,0.92) 0%, rgba(6,8,15,0.7) 38%, rgba(6,8,15,0.2) 68%, transparent 100%),
    linear-gradient(to top, rgba(6,8,15,0.88) 0%, transparent 42%) !important;
  pointer-events: none !important;
}
.hero-body,
.hero-content {
  position: absolute !important;
  left: 0; right: 0; bottom: 0;
  z-index: 2 !important;
  padding: clamp(20px, 4vw, 40px) !important;
  max-width: 560px !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.hero-nav {
  z-index: 5 !important;
  width: 44px !important;
  height: 44px !important;
  background: rgba(0,0,0,0.45) !important;
  backdrop-filter: blur(8px);
}

/* Luxury shimmer — bản SPC */
@keyframes luxShimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes luxSweep {
  0% { left: -50%; }
  100% { left: 130%; }
}
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.08); }
  28% { transform: scale(1); }
  42% { transform: scale(1.05); }
  70% { transform: scale(1); }
}
.card-badge, .badge-q, .badge-hd, .badge-fhd, .badge-4k {
  position: relative;
  overflow: hidden;
  color: #1a1200 !important;
  border: 1px solid rgba(255, 215, 100, 0.55) !important;
  background: linear-gradient(120deg, #c9a227 0%, #f5e6a3 25%, #ffd700 50%, #f5e6a3 75%, #b8860b 100%) !important;
  background-size: 200% 100% !important;
  animation: luxShimmer 2.8s linear infinite !important;
  box-shadow: 0 0 12px rgba(255, 200, 60, 0.4), inset 0 1px 0 rgba(255,255,255,0.5) !important;
}
.card-badge::after, .badge-q::after {
  content: '';
  position: absolute; top: 0; left: -40%; width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
  animation: luxSweep 2.4s ease-in-out infinite;
  pointer-events: none;
}
.card-year.fire, .badge-year-fire {
  position: relative;
  overflow: hidden;
  color: #fff !important;
  border: 1px solid rgba(255,120,40,0.5) !important;
  background: linear-gradient(120deg, #8b0000 0%, #ff4500 30%, #ffcc66 50%, #ff2d00 70%, #5c0000 100%) !important;
  background-size: 200% 100% !important;
  animation: luxShimmer 2.5s linear infinite !important;
  box-shadow: 0 0 12px rgba(255,80,0,0.45), inset 0 1px 0 rgba(255,255,255,0.35) !important;
}
.card-year.fire::after, .badge-year-fire::after {
  content: '';
  position: absolute; top: 0; left: -40%; width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
  animation: luxSweep 2.2s ease-in-out infinite;
  pointer-events: none;
}
.btn-play {
  position: relative;
  overflow: hidden;
  color: #041210 !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  background: linear-gradient(120deg, #0d9488 0%, #2ee6d6 25%, #a8fff6 50%, #2ee6d6 70%, #1e90ff 100%) !important;
  background-size: 200% 100% !important;
  animation: luxShimmer 3s linear infinite, heartbeat 1.4s ease-in-out infinite !important;
  box-shadow: 0 4px 24px rgba(46,230,214,0.4), inset 0 1px 0 rgba(255,255,255,0.4) !important;
}
.btn-play::after {
  content: '' !important;
  display: block !important;
  position: absolute; top: 0; left: -40%; width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  animation: luxSweep 2.5s ease-in-out infinite;
  pointer-events: none;
}
.btn-play::before { display: none !important; }

@media (max-width: 768px) {
  .hero, .hero-carousel {
    height: clamp(220px, 58vw, 320px) !important;
    min-height: 220px !important;
    border-radius: 14px !important;
  }
}


/* ===== Shimmer gọn trong tag / nút — không tràn ===== */
.card-badge,
.badge-q,
.badge-hd,
.badge-fhd,
.badge-4k,
.card-year.fire,
.badge-year-fire,
.btn-play {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  /* clip mọi lớp con / pseudo */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  mask-image: radial-gradient(white, black);
}

/* Pseudo lấp lánh chỉ trong khung */
.card-badge::after,
.badge-q::after,
.badge-hd::after,
.badge-fhd::after,
.badge-4k::after,
.card-year.fire::after,
.badge-year-fire::after,
.btn-play::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: -60% !important;
  width: 45% !important;
  height: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: inherit !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.15) 35%,
    rgba(255,255,255,0.55) 50%,
    rgba(255,255,255,0.15) 65%,
    transparent 100%
  ) !important;
  animation: luxSweepIn 2.6s ease-in-out infinite !important;
  pointer-events: none !important;
  z-index: 1 !important;
  transform: none !important;
  box-shadow: none !important;
}

@keyframes luxSweepIn {
  0% { left: -60%; }
  100% { left: 120%; }
}

/* Gradient nền vẫn chạy trong ô */
.card-badge,
.badge-q,
.badge-hd,
.badge-fhd,
.badge-4k {
  background: linear-gradient(
    120deg,
    #c9a227 0%,
    #f5e6a3 25%,
    #ffd700 50%,
    #f5e6a3 75%,
    #b8860b 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: luxShimmer 2.8s linear infinite !important;
  /* giữ layout cũ — không đổi padding/margin/position ngoài overflow */
}

.card-year.fire,
.badge-year-fire {
  background: linear-gradient(
    120deg,
    #8b0000 0%,
    #ff4500 30%,
    #ffcc66 50%,
    #ff2d00 70%,
    #5c0000 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: luxShimmer 2.5s linear infinite !important;
}

.btn-play {
  background: linear-gradient(
    120deg,
    #0d9488 0%,
    #2ee6d6 25%,
    #a8fff6 50%,
    #2ee6d6 70%,
    #1e90ff 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: luxShimmer 3s linear infinite, heartbeat 1.4s ease-in-out infinite !important;
}

/* Text + tag không bị box-shadow ngoài làm “tràn” cảm giác */
.card-badge,
.badge-q,
.badge-hd,
.badge-fhd,
.badge-4k,
.card-year.fire,
.badge-year-fire {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4) !important;
}

.btn-play {
  box-shadow:
    0 4px 18px rgba(46,230,214,0.28),
    inset 0 1px 0 rgba(255,255,255,0.35) !important;
}

/* Nội dung chữ trên lớp shimmer */
.card-badge,
.badge-q,
.btn-play {
  z-index: 0;
}


/* ===== Tag bám đúng góc thumbnail ===== */
.card {
  position: relative;
}
.card-poster {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 12px !important;
}
.card-badge,
.badge-q,
.badge-hd,
.badge-fhd,
.badge-4k {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 3 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  max-width: calc(100% - 16px) !important;
  margin: 0 !important;
  padding: 3px 8px !important;
  font-size: 0.65rem !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  transform: none !important;
  float: none !important;
}
.card-year,
.card-year.fire {
  position: absolute !important;
  top: auto !important;
  left: auto !important;
  right: 8px !important;
  bottom: 8px !important;
  z-index: 3 !important;
  margin: 0 !important;
  padding: 2px 7px !important;
  font-size: 0.65rem !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  transform: none !important;
}

/* Detail badges: hàng ngang dưới title, không absolute lệch */
.detail-badges {
  position: static !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 6px 0 10px !important;
}
.detail-badges .badge,
.detail-badges .badge-q,
.detail-badges .badge-year-fire {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  display: inline-flex !important;
  transform: none !important;
  margin: 0 !important;
}

/* Nút Phát ngay — gọn, không full dài */
.btn-play {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  max-width: max-content !important;
  min-width: 0 !important;
  padding: 10px 18px !important;
  margin: 0 !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  border-radius: 999px !important;
  align-self: flex-start !important;
  flex: 0 0 auto !important;
}
.hero-body .btn-play,
.hero-content .btn-play {
  width: auto !important;
  max-width: max-content !important;
  align-self: flex-start !important;
}

/* Tránh animation làm lệch layout */
.card-badge,
.badge-q,
.card-year,
.btn-play {
  will-change: auto;
}
.btn-play {
  /* heartbeat chỉ scale, giữ transform-origin giữa */
  transform-origin: center center !important;
}


/* ===== Animation bật lại — không đổi vị trí tag / size nút ===== */
.card-poster { position: relative !important; overflow: hidden !important; }

.card-badge,
.badge-q,
.badge-hd,
.badge-fhd,
.badge-4k {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  z-index: 3 !important;
  overflow: hidden !important;
  isolation: isolate !important;
  padding: 3px 8px !important;
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  border-radius: 6px !important;
  border: 1px solid rgba(255, 215, 100, 0.55) !important;
  color: #1a1200 !important;
  background: linear-gradient(
    120deg,
    #c9a227 0%,
    #f5e6a3 25%,
    #ffd700 50%,
    #f5e6a3 75%,
    #b8860b 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: luxShimmer 2.8s linear infinite !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45) !important;
  transform: none !important;
}

.card-year,
.card-year.fire {
  position: absolute !important;
  right: 8px !important;
  bottom: 8px !important;
  top: auto !important;
  left: auto !important;
  z-index: 3 !important;
  overflow: hidden !important;
  isolation: isolate !important;
  padding: 2px 7px !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
  transform: none !important;
}
.card-year.fire {
  color: #fff !important;
  border: 1px solid rgba(255,120,40,0.5) !important;
  background: linear-gradient(
    120deg,
    #8b0000 0%,
    #ff4500 30%,
    #ffcc66 50%,
    #ff2d00 70%,
    #5c0000 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: luxShimmer 2.5s linear infinite !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3) !important;
}

/* Vệt sáng trong tag */
.card-badge::after,
.badge-q::after,
.badge-hd::after,
.badge-fhd::after,
.badge-4k::after,
.card-year.fire::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: -60% !important;
  width: 45% !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.55),
    transparent
  ) !important;
  animation: luxSweepIn 2.5s ease-in-out infinite !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Detail badges cũng shimmer */
.detail-badges .badge-q,
.detail-badges .badge-year-fire {
  position: static !important;
  overflow: hidden !important;
  isolation: isolate !important;
}
.detail-badges .badge-q {
  color: #1a1200 !important;
  background: linear-gradient(120deg, #c9a227, #ffd700, #f5e6a3, #b8860b) !important;
  background-size: 200% 100% !important;
  animation: luxShimmer 2.8s linear infinite !important;
}
.detail-badges .badge-year-fire {
  color: #fff !important;
  background: linear-gradient(120deg, #8b0000, #ff4500, #ffcc66, #ff2d00, #5c0000) !important;
  background-size: 200% 100% !important;
  animation: luxShimmer 2.5s linear infinite !important;
}
.detail-badges .badge-q::after,
.detail-badges .badge-year-fire::after {
  content: '' !important;
  position: absolute !important;
  top: 0; bottom: 0; left: -60%; width: 45%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  animation: luxSweepIn 2.5s ease-in-out infinite;
  pointer-events: none;
}

/* Nút Phát: gọn + shimmer + tim đập */
.btn-play {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  max-width: max-content !important;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  isolation: isolate !important;
  white-space: nowrap !important;
  align-self: flex-start !important;
  flex: 0 0 auto !important;
  color: #041210 !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  background: linear-gradient(
    120deg,
    #0d9488 0%,
    #2ee6d6 25%,
    #a8fff6 50%,
    #2ee6d6 70%,
    #1e90ff 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: luxShimmer 3s linear infinite, heartbeat 1.4s ease-in-out infinite !important;
  box-shadow: 0 4px 18px rgba(46,230,214,0.3), inset 0 1px 0 rgba(255,255,255,0.35) !important;
  transform-origin: center center !important;
}
.btn-play::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: -60% !important;
  width: 40% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent) !important;
  animation: luxSweepIn 2.5s ease-in-out infinite !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
.btn-play::before { display: none !important; content: none !important; }


/* =========================================================
   Luxury Gold · Fiery Red · Soft Shimmer (refined)
   ========================================================= */

@keyframes luxShimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Vệt sáng ngang — mượt, trong khung */
@keyframes luxSweep {
  0%   { transform: translateX(-130%) skewX(-12deg); opacity: 0; }
  12%  { opacity: 0.55; }
  45%  { opacity: 0.85; }
  70%  { opacity: 0.4; }
  100% { transform: translateX(280%) skewX(-12deg); opacity: 0; }
}

/* Đỏ lửa: dịch gradient + hơi “thở” sáng */
@keyframes fireShimmer {
  0%   { background-position: 0% 50%; filter: brightness(1); }
  40%  { background-position: 85% 50%; filter: brightness(1.08); }
  70%  { background-position: 40% 50%; filter: brightness(1.02); }
  100% { background-position: 0% 50%; filter: brightness(1); }
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.06); }
  28% { transform: scale(1); }
  42% { transform: scale(1.04); }
  70% { transform: scale(1); }
}

/* --- Gold tags: HD / FHD / 4K --- */
.card-poster {
  position: relative !important;
  overflow: hidden !important;
}
.card-badge,
.badge-q,
.badge-hd,
.badge-fhd,
.badge-4k,
.detail-badges .badge-q {
  position: relative;
  overflow: hidden !important;
  isolation: isolate !important;
  color: #1a1200 !important;
  border: 1px solid rgba(201, 162, 39, 0.55) !important;
  background: linear-gradient(
    115deg,
    #b8860b 0%,
    #c9a227 18%,
    #f5e6a3 38%,
    #ffd700 52%,
    #f5e6a3 68%,
    #c9a227 85%,
    #b8860b 100%
  ) !important;
  background-size: 220% 100% !important;
  animation: luxShimmer 3.2s ease-in-out infinite !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 2px rgba(100, 70, 0, 0.25) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}
.card-badge,
.badge-q,
.badge-hd,
.badge-fhd,
.badge-4k {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  z-index: 3 !important;
  padding: 3px 8px !important;
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
  transform: none !important;
}
.detail-badges .badge-q {
  position: static !important;
  display: inline-flex !important;
  padding: 3px 9px !important;
  border-radius: 6px !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
}

.card-badge::after,
.badge-q::after,
.badge-hd::after,
.badge-fhd::after,
.badge-4k::after,
.detail-badges .badge-q::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 42% !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.12) 30%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0.12) 70%,
    transparent 100%
  ) !important;
  animation: luxSweep 2.8s ease-in-out infinite !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* --- Fire year 2026 --- */
.card-year.fire,
.badge-year-fire,
.detail-badges .badge-year-fire {
  overflow: hidden !important;
  isolation: isolate !important;
  color: #fff !important;
  border: 1px solid rgba(255, 80, 30, 0.4) !important;
  background: linear-gradient(
    115deg,
    #5c0000 0%,
    #ff2a00 28%,
    #ff8c00 48%,
    #ff2a00 68%,
    #5c0000 100%
  ) !important;
  background-size: 240% 100% !important;
  animation: fireShimmer 2.6s ease-in-out infinite !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 180, 0.3),
    inset 0 -1px 3px rgba(40, 0, 0, 0.35) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.card-year,
.card-year.fire {
  position: absolute !important;
  right: 8px !important;
  bottom: 8px !important;
  top: auto !important;
  left: auto !important;
  z-index: 3 !important;
  padding: 2px 7px !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
  transform: none !important;
}
.detail-badges .badge-year-fire {
  position: static !important;
  display: inline-flex !important;
  padding: 3px 9px !important;
  border-radius: 6px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
}

.card-year.fire::after,
.badge-year-fire::after,
.detail-badges .badge-year-fire::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 40% !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 200, 120, 0.15) 35%,
    rgba(255, 240, 200, 0.45) 50%,
    rgba(255, 200, 120, 0.15) 65%,
    transparent 100%
  ) !important;
  animation: luxSweep 2.4s ease-in-out infinite !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* --- Nút Phát: gold-cyan luxury + sweep + heartbeat nhẹ --- */
.btn-play {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  max-width: max-content !important;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  isolation: isolate !important;
  white-space: nowrap !important;
  align-self: flex-start !important;
  flex: 0 0 auto !important;
  color: #041210 !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  background: linear-gradient(
    115deg,
    #0d9488 0%,
    #2ee6d6 22%,
    #c9fff6 42%,
    #f5e6a3 55%,
    #2ee6d6 72%,
    #1e90ff 100%
  ) !important;
  background-size: 220% 100% !important;
  animation:
    luxShimmer 3.4s ease-in-out infinite,
    heartbeat 1.5s ease-in-out infinite !important;
  box-shadow:
    0 4px 16px rgba(46, 230, 214, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  transform-origin: center center !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
}
.btn-play::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 38% !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.15) 40%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0.15) 60%,
    transparent 100%
  ) !important;
  animation: luxSweep 2.7s ease-in-out infinite !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
.btn-play::before {
  display: none !important;
  content: none !important;
}


/* Sweep chạy thật — dùng left, không bị transform heartbeat đè */
@keyframes luxSweepRun {
  0%   { left: -70%; }
  100% { left: 120%; }
}
@keyframes luxShimmerRun {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes fireShimmerRun {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.card-badge::after,
.badge-q::after,
.badge-hd::after,
.badge-fhd::after,
.badge-4k::after,
.card-year.fire::after,
.badge-year-fire::after,
.detail-badges .badge-q::after,
.detail-badges .badge-year-fire::after,
.btn-play::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: -70% !important;
  width: 50% !important;
  height: 100% !important;
  margin: 0 !important;
  border-radius: inherit !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.08) 35%,
    rgba(255,255,255,0.55) 50%,
    rgba(255,255,255,0.08) 65%,
    transparent 100%
  ) !important;
  animation: luxSweepRun 2.4s ease-in-out infinite !important;
  pointer-events: none !important;
  z-index: 2 !important;
  transform: none !important;
}

.card-badge, .badge-q, .badge-hd, .badge-fhd, .badge-4k,
.detail-badges .badge-q {
  background-size: 200% 100% !important;
  animation: luxShimmerRun 2.8s linear infinite !important;
}
.card-year.fire, .badge-year-fire, .detail-badges .badge-year-fire {
  background-size: 220% 100% !important;
  animation: fireShimmerRun 2.5s ease-in-out infinite !important;
}
.btn-play {
  background-size: 200% 100% !important;
  animation: luxShimmerRun 3s linear infinite, heartbeat 1.45s ease-in-out infinite !important;
}
.btn-play::after {
  animation: luxSweepRun 2.5s ease-in-out infinite !important;
}

/* Netflix-style hover preview */
#nfPreview {
  position: fixed;
  z-index: 9000;
  width: min(280px, 78vw);
  pointer-events: auto;
  opacity: 0;
  transform: scale(0.92);
  transition: opacity .2s ease, transform .22s cubic-bezier(0.22,1,0.36,1);
  display: none;
}
#nfPreview.on {
  display: block;
  opacity: 1;
  transform: scale(1);
}
.nf-card {
  background: #121826;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,0.55), 0 0 0 1px rgba(46,230,214,0.08);
}
.nf-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  background: #0a0e18;
  overflow: hidden;
}
.nf-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.nf-body { padding: 12px 14px 14px; }
.nf-title {
  font-size: 0.95rem; font-weight: 800;
  line-height: 1.3; margin-bottom: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.nf-desc {
  font-size: 0.78rem; color: #8b95a8; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  margin-bottom: 10px;
}
.nf-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.nf-tags span {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1.3;
}
.nf-tags .t-q {
  color: #1a1200;
  background: linear-gradient(115deg, #b8860b, #f5e6a3, #ffd700, #c9a227, #b8860b);
  background-size: 200% 100%;
  animation: luxShimmerRun 2.8s linear infinite;
}
.nf-tags .t-q::after {
  content: '';
  position: absolute; top: 0; left: -70%; width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  animation: luxSweepRun 2.4s ease-in-out infinite;
}
.nf-tags .t-year {
  color: #fff;
  background: linear-gradient(115deg, #5c0000, #ff2a00, #ff8c00, #ff2a00, #5c0000);
  background-size: 220% 100%;
  animation: fireShimmerRun 2.5s ease-in-out infinite;
}
.nf-tags .t-lang {
  color: #c5cdd8;
  background: rgba(255,255,255,0.08);
  font-weight: 650;
}


/* ===== Tham khảo SPC: chỉ màu + kiểu animation ===== */
@keyframes luxShimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes luxSweep {
  0% { left: -40%; }
  100% { left: 120%; }
}
@keyframes fireShimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 220% 50%; }
}

/* Gold quality tags */
.card-badge, .badge-q, .badge-hd, .badge-fhd, .badge-4k,
.detail-badges .badge-q,
#nfPreviewLayer .nf-tag.lux,
#nfPreviewLayer .nf-tag.quality-lux,
#nfPreviewLayer .t-q {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  color: #1a1200 !important;
  border: 1px solid rgba(255, 215, 100, 0.75) !important;
  background: linear-gradient(
    120deg,
    #8b6914 0%,
    #c9a227 18%,
    #ffe566 40%,
    #ffd700 50%,
    #ffe566 60%,
    #c9a227 82%,
    #8b6914 100%
  ) !important;
  background-size: 280% 100% !important;
  animation: luxShimmer 2.2s linear infinite !important;
  box-shadow: 0 0 12px rgba(255, 200, 60, 0.45), inset 0 1px 0 rgba(255,255,255,0.5) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}
.card-badge, .badge-q, .badge-hd, .badge-fhd, .badge-4k {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  z-index: 3 !important;
  padding: 3px 8px !important;
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
  transform: none !important;
}

.card-badge::after, .badge-q::after, .badge-hd::after, .badge-fhd::after, .badge-4k::after,
.detail-badges .badge-q::after,
#nfPreviewLayer .nf-tag.lux::after,
#nfPreviewLayer .nf-tag.quality-lux::after,
#nfPreviewLayer .t-q::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: -40% !important;
  width: 45% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.65), transparent) !important;
  animation: luxSweep 1.8s ease-in-out infinite !important;
  pointer-events: none !important;
  z-index: 2 !important;
  transform: none !important;
}

/* Fire year */
.card-year.fire, .badge-year-fire, .detail-badges .badge-year-fire,
#nfPreviewLayer .nf-tag.year-fire,
#nfPreviewLayer .t-year {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  color: #fff !important;
  border: 1px solid rgba(255, 80, 30, 0.85) !important;
  background: linear-gradient(
    120deg,
    #5c0000 0%,
    #ff2a00 28%,
    #ff8c00 50%,
    #ff2a00 72%,
    #5c0000 100%
  ) !important;
  background-size: 240% 100% !important;
  animation: fireShimmer 1.8s linear infinite !important;
  box-shadow: 0 0 12px rgba(255, 50, 0, 0.5), inset 0 1px 0 rgba(255,220,150,0.35) !important;
}
.card-year, .card-year.fire {
  position: absolute !important;
  right: 8px !important;
  bottom: 8px !important;
  top: auto !important;
  left: auto !important;
  z-index: 3 !important;
  padding: 2px 7px !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
  transform: none !important;
}
.card-year.fire::after, .badge-year-fire::after,
#nfPreviewLayer .nf-tag.year-fire::after,
#nfPreviewLayer .t-year::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: -50% !important;
  width: 45% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,200,0.55), transparent) !important;
  animation: luxSweep 1.8s ease-in-out infinite !important;
  pointer-events: none !important;
  transform: none !important;
}

/* Play button shimmer (cùng hệ) */
.btn-play {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  display: inline-flex !important;
  width: auto !important;
  max-width: max-content !important;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  align-self: flex-start !important;
  color: #041210 !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  background: linear-gradient(120deg, #0d9488 0%, #2ee6d6 25%, #a8fff6 50%, #2ee6d6 70%, #1e90ff 100%) !important;
  background-size: 200% 100% !important;
  animation: luxShimmer 2.8s linear infinite, heartbeat 1.45s ease-in-out infinite !important;
  box-shadow: 0 4px 16px rgba(46,230,214,0.3), inset 0 1px 0 rgba(255,255,255,0.4) !important;
  transform-origin: center center !important;
}
.btn-play::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: -40% !important;
  width: 40% !important; height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent) !important;
  animation: luxSweep 2.2s ease-in-out infinite !important;
  pointer-events: none !important;
  transform: none !important;
}

/* Preview layer — style như SPC, vị trí do JS web ta */
#nfPreviewLayer {
  position: fixed;
  z-index: 9000;
  width: 280px;
  max-width: min(280px, calc(100vw - 20px));
  background: #14161d;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 48px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.1);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(0.92);
  transform-origin: center center;
  transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.22,1,0.36,1), visibility 0.18s;
  display: block;
}
#nfPreviewLayer.on {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: scale(1);
}
#nfPreviewLayer .nf-poster-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  max-height: 158px;
  background: #0a0c12;
  overflow: hidden;
}
#nfPreviewLayer .nf-poster-wrap img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}
#nfPreviewLayer .nf-body { padding: 12px 14px 14px; }
#nfPreviewLayer .nf-title {
  font-size: 1rem; font-weight: 700; margin-bottom: 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
#nfPreviewLayer .nf-syn {
  font-size: 0.8rem; color: #9aa3b5; line-height: 1.4; margin-bottom: 12px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
#nfPreviewLayer .nf-tags {
  display: flex; flex-wrap: wrap; gap: 5px;
}
#nfPreviewLayer .nf-tag {
  display: inline-flex; align-items: center;
  padding: 2px 7px; border-radius: 5px;
  font-size: 0.62rem; font-weight: 700;
  background: rgba(255,255,255,0.08); color: #c5cdd8;
}


/* Preview nhỏ: thumbnail dọc */
#nfPreviewLayer .nf-poster-wrap {
  aspect-ratio: 2 / 3 !important;
  max-height: none !important;
  height: auto !important;
  width: 100% !important;
}
#nfPreviewLayer {
  width: 200px !important;
  max-width: min(200px, calc(100vw - 20px)) !important;
}
#nfPreviewLayer .nf-poster-wrap img {
  object-fit: cover !important;
  object-position: center top !important;
}

/* Tag trên thumbnail card — bắt buộc shimmer */
.card-poster {
  position: relative !important;
  overflow: hidden !important;
}
.card-poster .card-badge,
.card-poster .badge-q,
.card .card-badge,
.card .badge-q {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  z-index: 4 !important;
  display: inline-flex !important;
  overflow: hidden !important;
  isolation: isolate !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  color: #1a1200 !important;
  border: 1px solid rgba(255, 215, 100, 0.75) !important;
  background: linear-gradient(
    120deg,
    #8b6914 0%,
    #c9a227 18%,
    #ffe566 40%,
    #ffd700 50%,
    #ffe566 60%,
    #c9a227 82%,
    #8b6914 100%
  ) !important;
  background-size: 280% 100% !important;
  animation: luxShimmer 2.2s linear infinite !important;
  box-shadow: 0 0 10px rgba(255, 200, 60, 0.4), inset 0 1px 0 rgba(255,255,255,0.5) !important;
  pointer-events: none !important;
}
.card-poster .card-badge::after,
.card-poster .badge-q::after,
.card .card-badge::after,
.card .badge-q::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: -40% !important;
  width: 45% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent) !important;
  animation: luxSweep 1.8s ease-in-out infinite !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Hero tags + content */
.hero-body .hero-tags,
.hero-content .hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
}
.hero-body .hero-tag,
.hero-content .hero-tag {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.2;
}
.hero-tag.lux {
  color: #1a1200 !important;
  border: 1px solid rgba(255, 215, 100, 0.75) !important;
  background: linear-gradient(120deg, #8b6914, #c9a227, #ffe566, #ffd700, #ffe566, #c9a227, #8b6914) !important;
  background-size: 280% 100% !important;
  animation: luxShimmer 2.2s linear infinite !important;
  box-shadow: 0 0 10px rgba(255, 200, 60, 0.4), inset 0 1px 0 rgba(255,255,255,0.45) !important;
}
.hero-tag.lux::after {
  content: '';
  position: absolute; top: 0; left: -40%; width: 45%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.65), transparent);
  animation: luxSweep 1.8s ease-in-out infinite;
  pointer-events: none;
}
.hero-tag.year-fire {
  color: #fff !important;
  border: 1px solid rgba(255, 80, 30, 0.85) !important;
  background: linear-gradient(120deg, #5c0000, #ff2a00, #ff8c00, #ff2a00, #5c0000) !important;
  background-size: 240% 100% !important;
  animation: fireShimmer 1.8s linear infinite !important;
}
.hero-tag.year-fire::after {
  content: '';
  position: absolute; top: 0; left: -50%; width: 45%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,200,0.55), transparent);
  animation: luxSweep 1.8s ease-in-out infinite;
  pointer-events: none;
}
.hero-tag.plain {
  color: #c5cdd8;
  background: rgba(255,255,255,0.1);
  font-weight: 650;
}
.hero-body .hero-syn,
.hero-content .hero-syn {
  font-size: 0.84rem;
  color: #b8c0d0;
  line-height: 1.45;
  margin: 0 0 12px;
  max-width: 520px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* ===== NF Preview redesign — hiện đại ===== */
#nfPreviewLayer {
  position: fixed;
  z-index: 9000;
  width: 260px !important;
  max-width: min(260px, calc(100vw - 16px)) !important;
  background: linear-gradient(165deg, #1a2030 0%, #0e121c 55%, #0a0e16 100%) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  box-shadow:
    0 24px 56px rgba(0,0,0,0.72),
    0 0 0 1px rgba(46,230,214,0.08),
    inset 0 1px 0 rgba(255,255,255,0.06) !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(0.94) translateY(6px);
  transform-origin: center top;
  transition: opacity 0.2s ease, transform 0.24s cubic-bezier(0.22,1,0.36,1), visibility 0.2s;
}
#nfPreviewLayer.on {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: scale(1) translateY(0) !important;
}
#nfPreviewLayer .nf-poster-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3 !important;
  max-height: 300px !important;
  background: #0a0c12;
  overflow: hidden;
}
#nfPreviewLayer .nf-poster-wrap img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
}
#nfPreviewLayer .nf-poster-fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 42%;
  background: linear-gradient(to top, #0e121c 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}
#nfPreviewLayer .nf-body {
  padding: 4px 14px 14px !important;
  position: relative;
  z-index: 2;
}
#nfPreviewLayer .nf-title {
  font-size: 0.98rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em;
  margin-bottom: 6px !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#nfPreviewLayer .nf-syn {
  font-size: 0.76rem !important;
  color: #9aa3b5 !important;
  line-height: 1.45 !important;
  margin-bottom: 10px !important;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#nfPreviewLayer .nf-tags {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-bottom: 12px;
}
#nfPreviewLayer .nf-tag {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 0.62rem;
  font-weight: 700;
  background: rgba(255,255,255,0.08);
  color: #c5cdd8;
}

/* Cast row */
#nfPreviewLayer .nf-cast {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 10px;
  margin-bottom: 4px;
  scrollbar-width: none;
}
#nfPreviewLayer .nf-cast::-webkit-scrollbar { display: none; }
#nfPreviewLayer .nf-actor {
  flex: 0 0 auto;
  width: 52px;
  text-align: center;
}
#nfPreviewLayer .nf-actor-av {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: #1c2436;
  border: 1.5px solid rgba(46,230,214,0.25);
  display: block;
  margin: 0 auto 4px;
}
#nfPreviewLayer .nf-actor-ph {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(145deg, #1c2436, #2a3548);
  border: 1.5px solid rgba(255,255,255,0.1);
  display: grid;
  place-items: center;
  margin: 0 auto 4px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #8b95a8;
}
#nfPreviewLayer .nf-actor-name {
  font-size: 0.58rem;
  color: #9aa3b5;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Nút phát trong preview — cùng shimmer hero */
#nfPreviewLayer .nf-play {
  position: relative !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  max-width: none !important;
  padding: 11px 16px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  isolation: isolate !important;
  font-weight: 800 !important;
  font-size: 0.88rem !important;
  color: #041210 !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  background: linear-gradient(120deg, #0d9488 0%, #2ee6d6 25%, #a8fff6 50%, #2ee6d6 70%, #1e90ff 100%) !important;
  background-size: 200% 100% !important;
  animation: luxShimmer 2.8s linear infinite, heartbeat 1.45s ease-in-out infinite !important;
  box-shadow: 0 4px 18px rgba(46,230,214,0.35), inset 0 1px 0 rgba(255,255,255,0.4) !important;
  cursor: pointer;
}
#nfPreviewLayer .nf-play::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: -40% !important;
  width: 40% !important; height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent) !important;
  animation: luxSweep 2.2s ease-in-out infinite !important;
  pointer-events: none !important;
}

.detail-cast { margin: 12px 0 8px; }
.detail-cast-label {
  font-size: 0.72rem; font-weight: 700; color: #8b95a8;
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px;
}
.detail-cast .nf-cast { padding-bottom: 4px; }


/* ===== Danh sách phim — layout hiện đại ===== */
.rail {
  margin-bottom: 28px;
}
.rail-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.rail-title {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(90deg, #fff 0%, #c5d0e0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.rail-scroll {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 6px 2px 16px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: rgba(46,230,214,0.35) transparent;
}
.rail-scroll::-webkit-scrollbar { height: 5px; }
.rail-scroll::-webkit-scrollbar-thumb {
  background: rgba(46,230,214,0.35);
  border-radius: 99px;
}

.card {
  flex: 0 0 auto;
  width: 148px;
  scroll-snap-align: start;
  cursor: pointer;
  background: transparent !important;
  border: none !important;
  border-radius: 14px;
  transition: transform 0.25s cubic-bezier(0.22,1,0.36,1);
}
.card:hover {
  transform: translateY(-6px);
}
.card-poster {
  position: relative !important;
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: #121826;
  box-shadow:
    0 8px 28px rgba(0,0,0,0.45),
    0 0 0 1px rgba(255,255,255,0.06);
}
.card-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.45s ease;
}
.card:hover .card-poster img {
  transform: scale(1.06);
}
.card-poster::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 48%;
  background: linear-gradient(to top, rgba(6,8,15,0.95) 0%, rgba(6,8,15,0.4) 50%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}
.card-name {
  position: absolute !important;
  left: 10px; right: 10px; bottom: 10px;
  z-index: 2;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #fff !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important;
}
.card-meta {
  display: none !important;
}
/* name was outside poster — move inside via structure change */

.list-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
  gap: 16px !important;
}
.list-grid .card {
  width: 100%;
}

@media (max-width: 768px) {
  .card { width: 120px; }
  .list-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
    gap: 12px !important;
  }
}
@media (min-width: 1100px) {
  .card { width: 160px; }
}

/* Hero syn đảm bảo hiện */
.hero-body .hero-syn,
.hero-content .hero-syn {
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  font-size: 0.88rem !important;
  color: #c8d0dc !important;
  line-height: 1.5 !important;
  margin: 8px 0 14px !important;
  max-width: 540px !important;
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}


/* ===== Diễn viên — dưới danh sách tập ===== */
.cast-section {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.cast-section h3 {
  font-size: 0.95rem;
  font-weight: 800;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}
.cast-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 14px 10px;
}
.cast-item {
  text-align: center;
}
.cast-av {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 8px;
  display: block;
  background: #1c2436;
  border: 2px solid rgba(46,230,214,0.22);
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}
.cast-ph {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  margin: 0 auto 8px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #1c2436, #2a3548);
  border: 2px solid rgba(255,255,255,0.08);
  font-weight: 800;
  font-size: 1.05rem;
  color: #8b95a8;
}
.cast-name {
  font-size: 0.72rem;
  font-weight: 650;
  color: #c5cdd8;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cast-role {
  font-size: 0.62rem;
  color: #6b7588;
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Nhóm tập 1-100, 101-200... */
.ep-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.ep-group-btn {
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: #9aa3b5;
  transition: .15s;
}
.ep-group-btn:hover {
  border-color: rgba(46,230,214,0.35);
  color: #2ee6d6;
}
.ep-group-btn.on {
  background: linear-gradient(120deg, rgba(46,230,214,0.22), rgba(30,144,255,0.15));
  border-color: rgba(46,230,214,0.45);
  color: #fff;
}

@media (max-width: 600px) {
  .cast-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
  .cast-av, .cast-ph { width: 56px; height: 56px; }
}


/* Tên dài không bị năm 2026 đè */
.card-poster .card-name {
  left: 8px !important;
  right: 52px !important;
  bottom: 8px !important;
  max-width: calc(100% - 60px) !important;
  z-index: 2 !important;
}
.card-poster .card-year,
.card-poster .card-year.fire {
  z-index: 3 !important;
  max-width: 48px !important;
  overflow: hidden !important;
  text-overflow: clip !important;
}

/* Diễn viên */
.cast-section {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.cast-section h3 {
  font-size: 0.95rem;
  font-weight: 800;
  margin-bottom: 14px;
}
.cast-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 14px 10px;
}
.cast-item { text-align: center; }
.cast-av {
  width: 64px; height: 64px; border-radius: 50%;
  object-fit: cover; margin: 0 auto 8px; display: block;
  background: #1c2436;
  border: 2px solid rgba(46,230,214,0.22);
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}
.cast-ph {
  width: 64px; height: 64px; border-radius: 50%;
  margin: 0 auto 8px; display: grid; place-items: center;
  background: linear-gradient(145deg, #1c2436, #2a3548);
  border: 2px solid rgba(255,255,255,0.08);
  font-weight: 800; font-size: 1.05rem; color: #8b95a8;
}
.cast-name {
  font-size: 0.72rem; font-weight: 650; color: #c5cdd8; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cast-role {
  font-size: 0.62rem; color: #6b7588; margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}

/* Bộ lọc */
.filter-bar { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; }
.filter-open-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.05);
  color: #eef1f7; font-weight: 700; font-size: 0.88rem; cursor: pointer;
}
.filter-open-btn:hover { border-color: rgba(46,230,214,0.35); color: #2ee6d6; }
#filterModal {
  position: fixed; inset: 0; z-index: 9500; display: none;
  align-items: flex-end; justify-content: center;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(6px);
}
#filterModal.on { display: flex; }
.filter-sheet {
  width: min(560px, 100%); max-height: min(88vh, 720px); overflow: auto;
  background: #121826; border-radius: 18px 18px 0 0;
  border: 1px solid rgba(255,255,255,0.1); padding: 18px 18px 24px;
}
.filter-sheet h3 { font-size: 1.05rem; font-weight: 800; margin-bottom: 14px; }
.filter-group { margin-bottom: 16px; }
.filter-group label {
  display: block; font-size: 0.78rem; font-weight: 700; color: #8b95a8;
  margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.04em;
}
.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-chip {
  padding: 6px 11px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04); color: #c5cdd8;
  font-size: 0.78rem; font-weight: 650; cursor: pointer;
}
.filter-chip.on {
  background: linear-gradient(120deg, rgba(46,230,214,0.22), rgba(30,144,255,0.15));
  border-color: rgba(46,230,214,0.45); color: #fff;
}
.filter-actions { display: flex; gap: 10px; margin-top: 8px; }
.filter-actions button { flex: 1; padding: 12px; border-radius: 12px; font-weight: 800; }
.filter-apply { background: linear-gradient(120deg, #2ee6d6, #1e90ff); color: #041210; border: none; }
.filter-close { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: #eef1f7; }
@media (min-width: 769px) {
  #filterModal { align-items: center; }
  .filter-sheet { border-radius: 18px; }
}
@media (max-width: 600px) {
  .cast-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
  .cast-av, .cast-ph { width: 56px; height: 56px; }
}


/* Tên dài không bị năm đè */
.card-poster .card-name {
  left: 8px !important;
  right: 52px !important;
  bottom: 8px !important;
  max-width: calc(100% - 60px) !important;
  z-index: 2 !important;
}
.card-poster .card-year,
.card-poster .card-year.fire {
  z-index: 3 !important;
  max-width: 48px !important;
}

/* Cast */
.cast-section {
  margin-top: 28px; padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.cast-section h3 { font-size: 0.95rem; font-weight: 800; margin-bottom: 14px; }
.cast-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 14px 10px;
}
.cast-item { text-align: center; }
.cast-av {
  width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
  margin: 0 auto 8px; display: block; background: #1c2436;
  border: 2px solid rgba(46,230,214,0.22);
}
.cast-ph {
  width: 64px; height: 64px; border-radius: 50%;
  margin: 0 auto 8px; display: grid; place-items: center;
  background: linear-gradient(145deg, #1c2436, #2a3548);
  font-weight: 800; color: #8b95a8;
}
.cast-name {
  font-size: 0.72rem; font-weight: 650; color: #c5cdd8; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cast-role {
  font-size: 0.62rem; color: #6b7588; margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}

/* Bộ lọc mở xuống dưới */
.filter-bar {
  display: flex; flex-direction: column; align-items: stretch;
  gap: 0; margin: 0 0 16px; position: relative; z-index: 30;
}
.filter-open-btn {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  padding: 9px 14px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: #eef1f7; font-weight: 700; font-size: 0.88rem; cursor: pointer;
}
.filter-open-btn:hover, .filter-open-btn.open {
  border-color: rgba(46,230,214,0.4); color: #2ee6d6;
}
.filter-open-btn .chev { transition: transform .2s; margin-left: 2px; }
.filter-open-btn.open .chev { transform: rotate(180deg); }
.filter-panel {
  display: none; margin-top: 10px; width: 100%;
  background: #121826; border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px; padding: 14px; box-shadow: 0 12px 32px rgba(0,0,0,0.35);
}
.filter-panel.on { display: block; }
.filter-group { margin-bottom: 14px; }
.filter-group label {
  display: block; font-size: 0.72rem; font-weight: 700; color: #8b95a8;
  margin-bottom: 7px; text-transform: uppercase; letter-spacing: 0.04em;
}
.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-chip {
  padding: 6px 11px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04); color: #c5cdd8;
  font-size: 0.78rem; font-weight: 650; cursor: pointer;
  user-select: none; -webkit-tap-highlight-color: transparent;
}
.filter-chip.on {
  background: linear-gradient(120deg, rgba(46,230,214,0.22), rgba(30,144,255,0.15));
  border-color: rgba(46,230,214,0.45); color: #fff;
}
.filter-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-actions button {
  flex: 1; min-width: 120px; padding: 11px 14px; border-radius: 12px;
  font-weight: 800; font-size: 0.88rem; cursor: pointer;
}
.filter-apply { background: linear-gradient(120deg, #2ee6d6, #1e90ff); color: #041210; border: none; }
.filter-close { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: #eef1f7; }
@media (max-width: 600px) {
  .filter-open-btn { width: 100%; justify-content: center; }
  .cast-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
  .cast-av, .cast-ph { width: 56px; height: 56px; }
}
@media (min-width: 1025px) {
  .filter-panel { max-width: 720px; }
}


/* Ẩn modal đè cũ */
#filterModal { display: none !important; visibility: hidden !important; pointer-events: none !important; }

.filter-bar {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  margin: 0 0 16px !important;
  position: relative !important;
  z-index: 25 !important;
}
.filter-open-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 9px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: #eef1f7;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
}
.filter-open-btn.open {
  border-color: rgba(46,230,214,0.45);
  color: #2ee6d6;
}
.filter-panel {
  display: none;
  margin-top: 10px;
  width: 100%;
  max-width: 100%;
  background: #121826;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
  position: relative;
  z-index: 26;
}
.filter-panel.on { display: block !important; }
.filter-group { margin-bottom: 14px; }
.filter-group label {
  display: block; font-size: 0.72rem; font-weight: 700; color: #8b95a8;
  margin-bottom: 7px; text-transform: uppercase;
}
.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-chip {
  padding: 6px 11px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: #c5cdd8; font-size: 0.78rem; font-weight: 650;
  cursor: pointer; pointer-events: auto !important;
}
.filter-chip.on {
  background: linear-gradient(120deg, rgba(46,230,214,0.25), rgba(30,144,255,0.18));
  border-color: rgba(46,230,214,0.5); color: #fff;
}
.filter-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-actions button {
  flex: 1; min-width: 110px; padding: 11px 14px; border-radius: 12px;
  font-weight: 800; cursor: pointer;
}
.filter-apply { background: linear-gradient(120deg,#2ee6d6,#1e90ff); color:#041210; border:none; }
.filter-close { background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); color:#eef1f7; }

/* Chọn phần */
.parts-bar {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 12px 0 10px;
}
.part-btn {
  padding: 8px 12px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: #c5cdd8; font-size: 0.8rem; font-weight: 700; cursor: pointer;
}
.part-btn.on {
  background: linear-gradient(120deg, rgba(46,230,214,0.22), rgba(30,144,255,0.15));
  border-color: rgba(46,230,214,0.45); color: #fff;
}
.parts-label {
  width: 100%; font-size: 0.72rem; font-weight: 700; color: #8b95a8;
  text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px;
}

@media (max-width: 600px) {
  .filter-open-btn { width: 100%; justify-content: center; }
}


/* Chủ đề title */
.list-topic-title,
#listTitle.list-topic-title {
  display: flex !important;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 12px;
  margin: 0 0 14px !important;
  padding: 14px 16px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 200, 80, 0.28) !important;
  background:
    linear-gradient(120deg, rgba(201, 162, 39, 0.16), rgba(255, 215, 100, 0.08) 40%, rgba(18, 24, 38, 0.9)) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.06) !important;
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: #fff !important;
}
.list-topic-title .topic-kicker {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1a1200;
  background: linear-gradient(120deg, #8b6914, #c9a227, #ffe566, #ffd700, #c9a227, #8b6914);
  background-size: 220% 100%;
  animation: luxShimmer 2.4s linear infinite;
  box-shadow: 0 0 12px rgba(255, 200, 60, 0.35);
}
.list-topic-title .topic-name {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(90deg, #ffe566, #ffd700, #f5e6a3, #ffe566);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: luxShimmer 3s linear infinite;
}

/* Page transition sweep */
#pageTransition {
  position: fixed; inset: 0; z-index: 99999;
  pointer-events: none; opacity: 0;
}
#pageTransition.run { opacity: 1; }
#pageTransition .pt-wipe {
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 0%, rgba(6,10,18,0.2) 30%, rgba(46,230,214,0.12) 48%, rgba(6,10,18,0.85) 52%, rgba(6,10,18,0.2) 70%, transparent 100%);
  transform: translateX(-120%);
}
#pageTransition.run .pt-wipe {
  animation: ptWipe 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
#pageTransition .pt-glow {
  position: absolute; top: 0; bottom: 0; width: 30%;
  left: -40%;
  background: linear-gradient(90deg, transparent, rgba(255,215,100,0.15), rgba(46,230,214,0.2), transparent);
}
#pageTransition.run .pt-glow {
  animation: ptGlow 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes ptSweep {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}
@keyframes ptGlow {
  0% { left: -40%; opacity: 0; }
  30% { opacity: 1; }
  100% { left: 110%; opacity: 0; }
}

/* Nút Phát ngay — shimmer giống FHD/HD */
.btn-play,
#nfPreviewLayer .nf-play,
.hero-body .btn-play,
.hero-content .btn-play {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  color: #041210 !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  background: linear-gradient(120deg, #0d9488 0%, #2ee6d6 22%, #a8fff6 50%, #2ee6d6 72%, #1e90ff 100%) !important;
  background-size: 220% 100% !important;
  animation: luxShimmer 2.6s linear infinite, heartbeat 1.45s ease-in-out infinite !important;
  box-shadow: 0 4px 18px rgba(46,230,214,0.35), inset 0 1px 0 rgba(255,255,255,0.45) !important;
}
.btn-play::after,
#nfPreviewLayer .nf-play::after,
.hero-body .btn-play::after,
.hero-content .btn-play::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: -45% !important;
  width: 42% !important; height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.65), transparent) !important;
  animation: luxSweep 2s ease-in-out infinite !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

#grid.list-grid, #grid, .list-grid {
  display: grid !important;
  grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  gap: 14px !important;
}
@media (max-width: 1100px) {
  #grid.list-grid, #grid, .list-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
}
@media (max-width: 800px) {
  #grid.list-grid, #grid, .list-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media (max-width: 520px) {
  #grid.list-grid, #grid, .list-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important; }
}
.page-btn.on {
  border-color: rgba(46,230,214,0.5) !important;
  color: #2ee6d6 !important;
  background: rgba(46,230,214,0.12) !important;
}


/* Tên card: chừa chỗ năm, tự thu nhỏ khi dài */
.card-poster .card-name {
  left: 8px !important;
  right: 50px !important;
  bottom: 8px !important;
  max-width: calc(100% - 58px) !important;
  font-size: clamp(0.62rem, 1.9vw, 0.8rem) !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  z-index: 2 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  word-break: break-word !important;
  hyphens: auto;
}
.card-poster .card-name.is-long {
  font-size: 0.62rem !important;
  line-height: 1.2 !important;
}
.card-poster .card-name.is-verylong {
  font-size: 0.55rem !important;
  line-height: 1.15 !important;
  -webkit-line-clamp: 3 !important;
}
.card-poster .card-year {
  z-index: 3 !important;
  bottom: 8px !important;
  right: 6px !important;
  max-width: 42px !important;
  pointer-events: none;
}

/* Detail top layout */
.detail-top {
  display: grid !important;
  grid-template-columns: 160px 1fr !important;
  gap: 18px !important;
  align-items: start !important;
  margin: 16px 0 20px !important;
}
.detail-poster {
  width: 160px !important;
  max-width: 100% !important;
  border-radius: 14px !important;
  aspect-ratio: 2/3 !important;
  object-fit: cover !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.4) !important;
}
.detail-info { min-width: 0; }
.detail-side-cast {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.detail-side-cast .cast-section { margin: 0; padding: 0; border: none; }
.detail-side-cast .cast-grid {
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)) !important;
  gap: 10px 8px !important;
}
.detail-side-cast .cast-av,
.detail-side-cast .cast-ph {
  width: 52px !important; height: 52px !important;
}
@media (max-width: 640px) {
  .detail-top {
    grid-template-columns: 110px 1fr !important;
    gap: 12px !important;
  }
  .detail-poster { width: 110px !important; }
}

/* Parts dropdown — gọn */
.parts-wrap {
  margin: 12px 0 14px;
  position: relative;
  z-index: 5;
}
.parts-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(46,230,214,0.28);
  background: linear-gradient(135deg, rgba(46,230,214,0.1), rgba(30,144,255,0.06));
  color: #eef1f7;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
}
.parts-toggle .parts-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  color: #041210;
  background: linear-gradient(120deg, #2ee6d6, #1e90ff);
}
.parts-toggle .chev { opacity: 0.7; transition: transform .2s; }
.parts-toggle.open .chev { transform: rotate(180deg); }
.parts-menu {
  display: none;
  margin-top: 8px;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.1);
  background: #121826;
  box-shadow: 0 12px 28px rgba(0,0,0,0.4);
  max-height: 240px;
  overflow-y: auto;
}
.parts-menu.on { display: block; }
.parts-menu .part-btn {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  margin: 0 0 4px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: #c5cdd8;
  font-size: 0.86rem;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}
.parts-menu .part-btn:hover {
  background: rgba(255,255,255,0.05);
  color: #fff;
}
.parts-menu .part-btn.on {
  border-color: rgba(46,230,214,0.35);
  background: rgba(46,230,214,0.1);
  color: #fff;
}
.parts-menu .part-btn .part-ep {
  font-size: 0.72rem;
  color: #8b95a8;
  font-weight: 600;
}

/* Nguồn + tập — tối giản, hiện đại */
.src-label {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #8b95a8 !important;
  margin: 16px 0 8px !important;
}
.ep-servers {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.ep-server {
  padding: 8px 14px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  background: rgba(255,255,255,0.04) !important;
  color: #b8c0d0 !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  cursor: pointer;
  transition: .15s;
}
.ep-server:hover {
  border-color: rgba(46,230,214,0.35) !important;
  color: #2ee6d6 !important;
}
.ep-server.on {
  color: #041210 !important;
  border-color: transparent !important;
  background: linear-gradient(120deg, #2ee6d6, #1e90ff) !important;
  box-shadow: 0 4px 14px rgba(46,230,214,0.25) !important;
}
.ep-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.ep-list .ep-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}
.ep-btn {
  min-width: 48px;
  padding: 8px 12px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  background: rgba(255,255,255,0.04) !important;
  color: #c5cdd8 !important;
  font-size: 0.8rem !important;
  font-weight: 650 !important;
  cursor: pointer;
  transition: .15s;
}
.ep-btn:hover {
  border-color: rgba(46,230,214,0.3) !important;
  color: #fff !important;
}
.ep-btn.on {
  color: #041210 !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, #2ee6d6, #5eead4 40%, #38bdf8) !important;
  box-shadow: 0 4px 14px rgba(46,230,214,0.28) !important;
  font-weight: 800 !important;
}
.ep-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
  width: 100%;
}
.ep-group-btn {
  padding: 6px 11px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  background: rgba(255,255,255,0.03) !important;
  color: #9aa3b5 !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  cursor: pointer;
}
.ep-group-btn.on {
  color: #fff !important;
  border-color: rgba(245,185,66,0.4) !important;
  background: rgba(245,185,66,0.12) !important;
}


/* Năm TRÊN tên, góc phải — không đè tên */
.card-poster .card-foot {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 3 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 4px !important;
  padding: 12px 8px 8px !important;
  background: linear-gradient(to top, rgba(6,8,15,0.95) 0%, rgba(6,8,15,0.5) 70%, transparent 100%) !important;
  pointer-events: none !important;
}
.card-poster .card-year,
.card-poster .card-year.fire {
  position: static !important;
  top: auto !important;
  bottom: auto !important;
  right: auto !important;
  left: auto !important;
  align-self: flex-end !important;
  margin: 0 !important;
  max-width: none !important;
  z-index: 4 !important;
}
.card-poster .card-name {
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.8rem !important;
  z-index: 2 !important;
}
.card-poster .card-badge,
.card-poster .badge-q {
  top: 8px !important;
  left: 8px !important;
  z-index: 5 !important;
}

/* Detail: [poster | diễn viên ngang] rồi mô tả bên dưới */
.detail-top {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  margin: 16px 0 18px !important;
}
.detail-hero-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 14px !important;
}
.detail-poster {
  width: 140px !important;
  flex: 0 0 140px !important;
  border-radius: 14px !important;
  aspect-ratio: 2/3 !important;
  object-fit: cover !important;
}
.detail-side-cast {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  max-height: 210px;
  overflow: hidden;
}
.detail-side-cast h3 {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: #8b95a8 !important;
  text-transform: uppercase !important;
  margin: 0 0 10px !important;
}
.detail-side-cast .cast-grid {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
  overflow-x: auto !important;
  padding-bottom: 6px !important;
  grid-template-columns: none !important;
}
.detail-side-cast .cast-item {
  flex: 0 0 auto !important;
  width: 72px !important;
}
.detail-side-cast .cast-av,
.detail-side-cast .cast-ph {
  width: 56px !important;
  height: 56px !important;
}
.detail-info {
  width: 100% !important;
}
.detail-info .detail-content {
  margin-top: 6px;
  line-height: 1.55;
  color: #b8c0d0;
}

/* Nhóm tập: nút tách rõ, không dính chữ */
.ep-groups {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
  width: 100% !important;
}
.ep-group-btn {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  padding: 7px 12px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  background: rgba(255,255,255,0.04) !important;
  color: #9aa3b5 !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  cursor: pointer;
}
.ep-group-btn.on {
  color: #fff !important;
  border-color: rgba(245,185,66,0.45) !important;
  background: rgba(245,185,66,0.14) !important;
}
.ep-btns {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
@media (max-width: 600px) {
  .detail-poster { width: 100px !important; flex-basis: 100px !important; }
  .detail-side-cast { max-height: 160px; }
}

.ep-drop-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(46,230,214,0.28);
  background: linear-gradient(135deg, rgba(46,230,214,0.1), rgba(30,144,255,0.06));
  color: #eef1f7;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  margin-bottom: 8px;
}
.ep-drop-toggle .ep-drop-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  color: #041210;
  background: linear-gradient(120deg, #2ee6d6, #1e90ff);
}
.ep-drop-toggle .chev { opacity: 0.75; transition: transform .2s; }
.ep-drop-toggle.open .chev { transform: rotate(180deg); }
.ep-drop-panel {
  display: none;
  margin-top: 4px;
  max-height: 320px;
  overflow-y: auto;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(12,16,26,0.9);
}
.ep-drop-panel.on { display: block; }
.ep-drop-panel .ep-btns { display: flex; flex-wrap: wrap; gap: 8px; }


/* ===== Header transparent → glass + Hero rộng ===== */
:root {
  --header-h: 56px;
}
.header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: var(--header-h) !important;
  z-index: 1000 !important;
  background: transparent !important;
  border-bottom: 1px solid transparent !important;
  box-shadow: none !important;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease !important;
}
.header.scrolled {
  background: rgba(6, 10, 18, 0.88) !important;
  backdrop-filter: blur(18px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
  border-bottom: 1px solid rgba(26, 109, 255, 0.12) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35) !important;
}

/* Main content: hero sát mép, tràn dưới header */
.main, main.main, #mainView, .home-wrap, .page-home {
  padding-top: 0 !important;
}
/* Hero full-bleed rộng hơn, thumbnail rõ */
.hero {
  position: relative !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-top: 0 !important;
  margin-bottom: 24px !important;
  border-radius: 0 0 20px 20px !important;
  height: min(58vh, 520px) !important;
  min-height: 280px !important;
  max-height: 560px !important;
  overflow: hidden !important;
}
.hero-slide {
  background-position: center center !important;
  background-size: cover !important;
}
.hero-overlay {
  background:
    linear-gradient(180deg, rgba(6,10,18,0.55) 0%, rgba(6,10,18,0.15) 22%, transparent 42%),
    linear-gradient(90deg, rgba(6,8,15,0.88) 0%, rgba(6,8,15,0.45) 42%, transparent 72%),
    linear-gradient(0deg, rgba(6,8,15,0.9) 0%, transparent 48%) !important;
}
.hero-body, .hero-content {
  padding-top: calc(var(--header-h) + 12px) !important;
  padding-left: max(16px, 4vw) !important;
  padding-right: max(16px, 4vw) !important;
  padding-bottom: 28px !important;
  max-width: 720px !important;
}

/* List/detail vẫn có khoảng dưới header */
body.mode-list .main,
body.mode-detail .main,
body:not(.mode-home) .main {
  padding-top: calc(var(--header-h) + 8px) !important;
}
body.mode-home .main,
body.mode-home #homeView {
  padding-top: 0 !important;
}

@media (max-width: 900px) {
  /* neutralized hero height block */
}
@media (max-width: 600px) {
  :root { --header-h: 52px; }
  /* neutralized hero height block */
  .hero-body, .hero-content {
    padding-top: calc(var(--header-h) + 8px) !important;
    padding-bottom: 18px !important;
  }
  .header {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}
@media (min-width: 1200px) {
  /* neutralized hero height block */
}


/* Hero lớn hơn nữa */
/* neutralized hero height block */
@media (max-width: 900px) {
/* neutralized: /* neutralized hero height block */ */
}
@media (max-width: 600px) {
/* neutralized: /* neutralized hero height block */ */
}
@media (min-width: 1200px) {
/* neutralized: /* neutralized hero height block */ */
}

/* Chủ đề featured — hình học góc cạnh, không tròn */
.explore-feat {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
  margin: 12px 0 16px !important;
}
@media (max-width: 900px) {
  .explore-feat { grid-template-columns: repeat(2, 1fr) !important; }
}
.ecard {
  position: relative !important;
  border-radius: 4px 18px 4px 14px !important; /* lệch góc, kiểu thang/vuông biến tấu */
  clip-path: polygon(0 0, 100% 0, 100% 82%, 92% 100%, 0 100%) !important;
  min-height: 88px !important;
  padding: 14px 14px 16px !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  overflow: hidden !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: transform .2s, box-shadow .2s, filter .2s !important;
}
.ecard::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.12), transparent 50%) !important;
  pointer-events: none !important;
}
.ecard:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.35) !important;
  filter: brightness(1.08) !important;
}
.ecard .tag {
  display: inline-block !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  opacity: 0.85 !important;
  margin-bottom: 6px !important;
  border-radius: 3px !important;
  padding: 2px 6px !important;
  background: rgba(0,0,0,0.25) !important;
}
.ecard .name {
  display: block !important;
  font-size: 1.02rem !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  color: #fff !important;
}
/* palette theo p0-p7 */
.ecard.p0 { background: linear-gradient(145deg, #1a3a5c 0%, #2ee6d6 120%) !important; }
.ecard.p1 { background: linear-gradient(145deg, #3b1d5c 0%, #c084fc 120%) !important; }
.ecard.p2 { background: linear-gradient(145deg, #5c1a3a 0%, #fb7185 120%) !important; }
.ecard.p3 { background: linear-gradient(145deg, #1a4a3a 0%, #34d399 120%) !important; }
.ecard.p4 { background: linear-gradient(145deg, #5c3a1a 0%, #fbbf24 120%) !important; }
.ecard.p5 { background: linear-gradient(145deg, #1a2a5c 0%, #60a5fa 120%) !important; }
.ecard.p6 { background: linear-gradient(145deg, #4a1a1a 0%, #f87171 120%) !important; }
.ecard.p7 { background: linear-gradient(145deg, #2a3a1a 0%, #a3e635 120%) !important; }

.explore-more-wrap {
  display: flex;
  justify-content: center;
  margin: 8px 0 18px;
}
.explore-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 6px 16px 6px 16px;
  border: 1px solid rgba(46,230,214,0.35);
  background: linear-gradient(120deg, rgba(46,230,214,0.18), rgba(30,144,255,0.12));
  color: #eef1f7;
  font-weight: 800;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(46,230,214,0.15);
  transition: .2s;
}
.explore-more-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(46,230,214,0.25);
  border-color: rgba(46,230,214,0.55);
}
.explore-more-btn .chev { transition: transform .2s; }
.explore-more-btn.open .chev { transform: rotate(180deg); }
.explore-rest {
  display: none;
  margin-top: 8px;
}
.explore-rest.on { display: block; }

.parts-toggle span:first-child { letter-spacing: 0.01em; }


/* Chủ đề tối giản — mềm, không nhựa công nghiệp */
.explore {
  margin-top: 8px !important;
  margin-bottom: 20px !important;
}
.explore-kicker {
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  color: #fff !important;
  margin: 0 0 14px !important;
  letter-spacing: -0.02em !important;
}
.explore-title { display: none !important; } /* gọn: chỉ kicker */

.explore-feat {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
  overflow-x: auto !important;
  padding-bottom: 6px !important;
  margin: 0 0 14px !important;
  scrollbar-width: none !important;
  grid-template-columns: none !important;
}
.explore-feat::-webkit-scrollbar { display: none !important; }

.ecard {
  flex: 0 0 auto !important;
  width: min(168px, 42vw) !important;
  min-height: 108px !important;
  padding: 16px 16px 14px !important;
  border: none !important;
  border-radius: 22px 22px 22px 48px !important; /* blob mềm như ảnh */
  clip-path: none !important;
  box-shadow: none !important;
  filter: none !important;
  background: #3d5a80 !important;
  position: relative !important;
  overflow: hidden !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: transform .18s ease, opacity .18s ease !important;
}
.ecard::before {
  content: '' !important;
  position: absolute !important;
  right: -20px !important;
  bottom: -30px !important;
  width: 90px !important;
  height: 90px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.12) !important;
  pointer-events: none !important;
}
.ecard::after {
  content: '' !important;
  position: absolute !important;
  right: 20px !important;
  bottom: -40px !important;
  width: 70px !important;
  height: 70px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.08) !important;
  pointer-events: none !important;
}
.ecard:hover {
  transform: translateY(-2px) !important;
  opacity: 0.95 !important;
  box-shadow: none !important;
  filter: none !important;
}
.ecard .tag {
  display: none !important; /* tối giản: chỉ tên */
}
.ecard .name {
  position: relative !important;
  z-index: 1 !important;
  font-size: 0.98rem !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  color: #fff !important;
  margin-bottom: 10px !important;
}
.ecard .ecard-go {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.85) !important;
}

/* màu pastel dịu */
.ecard.p0 { background: #c45c9a !important; }
.ecard.p1 { background: #3daf9a !important; }
.ecard.p2 { background: #c47a4a !important; }
.ecard.p3 { background: #d16b7a !important; }
.ecard.p4 { background: #3db89a !important; }
.ecard.p5 { background: #5b7ec7 !important; }
.ecard.p6 { background: #b86b6b !important; }
.ecard.p7 { background: #6a9e6a !important; }

.explore-more-wrap {
  display: flex !important;
  justify-content: flex-start !important;
  margin: 0 0 20px !important;
}
.explore-more-btn {
  border: none !important;
  border-radius: 999px !important;
  padding: 12px 20px !important;
  background: #2a3142 !important;
  color: #e8ecf4 !important;
  font-weight: 700 !important;
  font-size: 0.92rem !important;
  box-shadow: none !important;
}
.explore-more-btn:hover {
  background: #343b4f !important;
  transform: none !important;
  box-shadow: none !important;
}

@media (max-width: 600px) {
  .ecard { width: min(148px, 70vw) !important; min-height: 96px !important; }
  .explore-kicker { font-size: 1.15rem !important; }
}


/* Chủ đề tối giản dưới hero — blob mềm */
.explore {
  margin-top: 10px !important;
  margin-bottom: 22px !important;
}
.explore-kicker {
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  color: #fff !important;
  margin: 0 0 14px !important;
  letter-spacing: -0.02em !important;
}
.explore-title { display: none !important; }

.explore-feat {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
  overflow-x: auto !important;
  padding-bottom: 4px !important;
  margin: 0 0 14px !important;
  scrollbar-width: none !important;
  grid-template-columns: none !important;
}
.explore-feat::-webkit-scrollbar { display: none !important; }

.ecard {
  flex: 0 0 auto !important;
  width: min(168px, 42vw) !important;
  min-height: 108px !important;
  padding: 16px 16px 14px !important;
  border: none !important;
  border-radius: 22px 22px 22px 48px !important;
  clip-path: none !important;
  box-shadow: none !important;
  filter: none !important;
  position: relative !important;
  overflow: hidden !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: transform .18s ease, opacity .18s ease !important;
}
.ecard::before {
  content: '' !important;
  position: absolute !important;
  right: -18px !important;
  bottom: -28px !important;
  width: 88px !important;
  height: 88px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.12) !important;
  pointer-events: none !important;
}
.ecard::after {
  content: '' !important;
  position: absolute !important;
  right: 24px !important;
  bottom: -36px !important;
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.08) !important;
  pointer-events: none !important;
}
.ecard:hover {
  transform: translateY(-2px) !important;
  opacity: 0.95 !important;
  box-shadow: none !important;
  filter: none !important;
}
.ecard .tag { display: none !important; }
.ecard .name {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  font-size: 0.98rem !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  color: #fff !important;
  margin-bottom: 10px !important;
  white-space: normal !important;
}
.ecard .ecard-go {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.85) !important;
}
.ecard.p0 { background: #c45c9a !important; }
.ecard.p1 { background: #3daf9a !important; }
.ecard.p2 { background: #c47a4a !important; }
.ecard.p3 { background: #d16b7a !important; }
.ecard.p4 { background: #3db89a !important; }
.ecard.p5 { background: #5b7ec7 !important; }
.ecard.p6 { background: #b86b6b !important; }
.ecard.p7 { background: #6a9e6a !important; }

.explore-more-wrap {
  display: flex !important;
  justify-content: flex-start !important;
  margin: 0 0 20px !important;
}
.explore-more-btn {
  border: none !important;
  border-radius: 999px !important;
  padding: 12px 20px !important;
  background: #2a3142 !important;
  color: #e8ecf4 !important;
  font-weight: 700 !important;
  font-size: 0.92rem !important;
  box-shadow: none !important;
}
.explore-more-btn:hover {
  background: #343b4f !important;
  transform: none !important;
  box-shadow: none !important;
}
@media (max-width: 600px) {
  .ecard { width: min(148px, 70vw) !important; min-height: 96px !important; }
  .explore-kicker { font-size: 1.15rem !important; }
}


/* Hover preview 1.75s — đảm bảo hiện */
#nfPreviewLayer {
  position: fixed !important;
  z-index: 9000 !important;
  width: 280px !important;
  max-width: 90vw !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transform: translateY(8px) scale(0.96) !important;
  transition: opacity .2s ease, transform .2s ease !important;
  background: #121826 !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.55) !important;
}
#nfPreviewLayer.on {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  pointer-events: auto !important;
}
#nfPreviewLayer .nf-poster-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 2/3;
  max-height: 220px;
  overflow: hidden;
  background: #0a0e16;
}
#nfPreviewLayer .nf-poster-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#nfPreviewLayer .nf-body {
  padding: 12px 12px 14px;
}
#nfPreviewLayer .nf-title {
  font-weight: 800;
  font-size: 0.95rem;
  margin-bottom: 6px;
  color: #fff;
}
#nfPreviewLayer .nf-syn {
  font-size: 0.78rem;
  line-height: 1.4;
  color: #9aa3b5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 8px;
}
#nfPreviewLayer .nf-play {
  display: inline-flex;
  margin-top: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 0.82rem;
  cursor: pointer;
  border: none;
}

/* Scrollbar tối giản dark — toàn site + search */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(46,230,214,0.35) transparent;
}
*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: rgba(46,230,214,0.28);
  border-radius: 99px;
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(46,230,214,0.45);
}
*::-webkit-scrollbar-corner {
  background: transparent;
}
/* Search dropdown */
.search-drop, .search-suggest, #searchDrop, #suggestBox, .suggest-list {
  scrollbar-width: thin;
  scrollbar-color: rgba(46,230,214,0.35) transparent;
}
.search-drop::-webkit-scrollbar,
.suggest-list::-webkit-scrollbar,
#searchDrop::-webkit-scrollbar {
  width: 6px;
}
.search-drop::-webkit-scrollbar-thumb,
.suggest-list::-webkit-scrollbar-thumb {
  background: rgba(46,230,214,0.3);
  border-radius: 99px;
}
html, body {
  scrollbar-width: thin;
  scrollbar-color: rgba(46,230,214,0.35) rgba(6,10,18,0.3);
}


/* Hover preview 1.75s — fix layer */
#nfPreviewLayer {
  position: fixed !important;
  z-index: 12000 !important;
  pointer-events: none !important;
  opacity: 0;
  transform: scale(0.94);
  transition: opacity .2s ease, transform .22s cubic-bezier(0.22,1,0.36,1);
  display: none;
  width: min(300px, 82vw);
}
#nfPreviewLayer.on {
  display: block !important;
  opacity: 1 !important;
  transform: scale(1) !important;
  pointer-events: auto !important;
}
#nfPreviewLayer .nf-card,
#nfPreviewLayer .nf-poster-wrap {
  pointer-events: auto;
  background: #121826;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,0.55);
}
#nfPreviewLayer .nf-poster-wrap img {
  width: 100%;
  display: block;
  aspect-ratio: 2/3;
  object-fit: cover;
}
#nfPreviewLayer .nf-body { padding: 12px 12px 14px; }
#nfPreviewLayer .nf-title {
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1.3;
  margin-bottom: 6px;
  color: #fff;
}
#nfPreviewLayer .nf-syn {
  font-size: 0.78rem;
  color: #9aa3b5;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 8px;
}
#nfPreviewLayer .nf-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
#nfPreviewLayer .nf-tag {
  font-size: 0.68rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(255,255,255,0.08);
  color: #e8ecf4;
}
#nfPreviewLayer .nf-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 10px;
  font-weight: 800;
  cursor: pointer;
  color: #041210;
  background: linear-gradient(120deg, #0d9488, #2ee6d6, #a8fff6, #2ee6d6, #1e90ff);
  background-size: 220% 100%;
  animation: luxShimmer 2.6s linear infinite;
}

/* Custom scrollbar — bỏ trắng mặc định */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(46,230,214,0.45) rgba(255,255,255,0.04);
}
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.03);
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(46,230,214,0.55), rgba(30,144,255,0.45));
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(46,230,214,0.8), rgba(30,144,255,0.65));
  background-clip: padding-box;
}
/* Search suggest scroll */
.suggest, #suggest, .search-suggest {
  scrollbar-width: thin;
  scrollbar-color: rgba(46,230,214,0.45) rgba(255,255,255,0.04);
}


/* Hero cinematic lớn như TOPHIM */
.hero {
  position: relative !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-top: 0 !important;
  margin-bottom: 20px !important;
  height: min(82vh, 760px) !important;
  min-height: 380px !important;
  max-height: 820px !important;
  border-radius: 0 0 24px 24px !important;
  overflow: hidden !important;
}
.hero-slide {
  background-size: cover !important;
  background-position: center center !important;
}
.hero-overlay {
  background:
    linear-gradient(180deg, rgba(6,10,18,0.5) 0%, transparent 28%),
    linear-gradient(90deg, rgba(6,8,15,0.88) 0%, rgba(6,8,15,0.35) 45%, transparent 70%),
    linear-gradient(0deg, rgba(6,8,15,0.92) 0%, transparent 50%) !important;
}
.hero-body, .hero-content {
  padding-top: calc(var(--header-h, 56px) + 28px) !important;
  padding-left: max(20px, 5vw) !important;
  max-width: 560px !important;
}
@media (max-width: 900px) {
/* neutralized: /* neutralized hero height block */ */
}
@media (max-width: 600px) {
/* neutralized: /* neutralized hero height block */ */
}
@media (min-width: 1400px) {
/* neutralized: /* neutralized hero height block */ */
}

.detail-poster.cycling {
  transition: opacity 0.55s ease !important;
}


/* Typography — phong cách streaming bold geometric (tham chiếu TOPHIM) */
:root {
  --font-brand: 'Poppins', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-ui: 'Plus Jakarta Sans', 'Poppins', system-ui, sans-serif;
}
html, body {
  font-family: var(--font-ui) !important;
  font-weight: 500;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}
.brand, .brand-text, .brand span, .logo-text, .site-title {
  font-family: var(--font-brand) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  text-transform: none;
}
.brand-text, .logo-text {
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  background: linear-gradient(90deg, #fff 0%, #e8ecf4 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.hero-title, .detail-title, .explore-kicker, .sec-title, .list-topic-title .topic-name,
.rail-title, h1, h2, h3 {
  font-family: var(--font-brand) !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
}
.nav-link, .tab-btn, .filter-chip, .ep-btn, .ep-server, .btn-play, .ecard .name {
  font-family: var(--font-ui) !important;
  font-weight: 700 !important;
}
.card-name {
  font-family: var(--font-ui) !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
}
.detail-content, .hero-desc, .nf-syn, body {
  font-family: var(--font-ui) !important;
}
input, button, select, textarea {
  font-family: var(--font-ui) !important;
}


/* ===== Mobile cố định — không lệch ngang ===== */
html, body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  overscroll-behavior-x: none !important;
  position: relative !important;
  touch-action: pan-y !important;
}
body {
  min-width: 0 !important;
}
.main, main, #homeView, #listView, #detailView, .home-view, .list-view, .detail {
  max-width: 100% !important;
  overflow-x: hidden !important;
  width: 100% !important;
}
.header, .bottom-nav {
  max-width: 100vw !important;
  left: 0 !important;
  right: 0 !important;
}
img, video, iframe {
  max-width: 100% !important;
}
.rail-track, .explore-feat, .ep-list, .suggest {
  max-width: 100% !important;
}

/* Hero lớn hơn — hiện full thumbnail đẹp */
.hero {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  height: min(90vh, 880px) !important;
  min-height: 420px !important;
  max-height: 920px !important;
  border-radius: 0 0 28px 28px !important;
}
.hero-slide {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
.hero-slide .hero-img,
.hero img.hero-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}
@media (max-width: 900px) {
  /* neutralized hero height block */
}
@media (max-width: 600px) {
  /* neutralized hero height block */
  .header { padding-left: 10px !important; padding-right: 10px !important; }
  .main, main { padding-left: 12px !important; padding-right: 12px !important; }
  /* chặn transform gây lệch */
  .card:hover { transform: none !important; }
}
@media (min-width: 1200px) {
/* neutralized: /* neutralized hero height block */ */
}


/* Logo chữ — gọn đẹp, không gradient clip */
.brand-text,
.logo-text,
.site-title {
  font-family: 'Poppins', 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.12rem !important;
  letter-spacing: -0.03em !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
  text-shadow: 0 1px 12px rgba(46, 230, 214, 0.25) !important;
}
.brand-sub {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  color: #8b95a8 !important;
  -webkit-text-fill-color: #8b95a8 !important;
  letter-spacing: 0.02em !important;
}
.brand {
  gap: 10px !important;
  align-items: center !important;
}
.brand-logo {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
}


/* Chủ đề — vàng + trắng đậm như mẫu */
.list-topic-title,
#listTitle.list-topic-title {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 10px 14px !important;
  margin: 8px 0 16px !important;
  padding: 6px 4px !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
.list-topic-title .topic-kicker,
#listTitle .topic-kicker {
  font-family: 'Poppins', 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(1.35rem, 3.2vw, 1.85rem) !important;
  color: #f0c14b !important;
  letter-spacing: -0.02em !important;
  -webkit-text-fill-color: #f0c14b !important;
  background: none !important;
}
.list-topic-title .topic-name,
#listTitle .topic-name {
  font-family: 'Poppins', 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(1.35rem, 3.2vw, 1.85rem) !important;
  color: #ffffff !important;
  letter-spacing: -0.025em !important;
  -webkit-text-fill-color: #ffffff !important;
  background: none !important;
  text-shadow: 0 2px 20px rgba(0,0,0,0.35) !important;
}

/* Badge bộ lọc */
#filterOpenBtn {
  position: relative !important;
}
#filterOpenBtn.has-filter {
  border-color: rgba(46,230,214,0.55) !important;
  box-shadow: 0 0 0 1px rgba(46,230,214,0.25), 0 6px 18px rgba(46,230,214,0.15) !important;
  color: #2ee6d6 !important;
}
.filter-badge {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  margin-left: 6px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  color: #041210;
  background: linear-gradient(120deg, #2ee6d6, #f5c542, #2ee6d6);
  background-size: 200% 100%;
  animation: luxShimmer 2.4s linear infinite;
}

/* Shimmer mạnh hơn — tag / play / logo */
@keyframes luxShimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes fireShimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.card-badge, .badge-q, .badge-hd, .badge-fhd, .badge-4k,
.nf-tag.lux, .nf-tag.quality-lux, .quality-lux,
.tag-hd, .tag-fhd, .tag-4k,
.hero-badge, .detail-badge.q,
span.lux {
  background: linear-gradient(120deg, #c9a227, #f5e6a3, #ffd700, #b8860b, #f5e6a3, #c9a227) !important;
  background-size: 220% 100% !important;
  animation: luxShimmer 2.6s linear infinite !important;
  color: #1a1200 !important;
  font-weight: 800 !important;
  border: none !important;
  -webkit-text-fill-color: #1a1200 !important;
}
.year-fire, .tag-year-fire, .nf-tag.year-fire, .badge-year.fire {
  background: linear-gradient(120deg, #5c0000, #ff2a00, #ff8c00, #ff2a00, #5c0000) !important;
  background-size: 220% 100% !important;
  animation: fireShimmer 2.2s linear infinite !important;
  color: #fff !important;
  font-weight: 800 !important;
  -webkit-text-fill-color: #fff !important;
}
.btn-play, .nf-play, .hero-play, button.btn-play {
  background: linear-gradient(120deg, #0d9488, #2ee6d6, #a8fff6, #2ee6d6, #1e90ff) !important;
  background-size: 220% 100% !important;
  animation: luxShimmer 2.4s linear infinite, heartbeat 2s ease-in-out infinite !important;
  color: #041210 !important;
  font-weight: 800 !important;
  border: none !important;
  box-shadow: 0 8px 24px rgba(46,230,214,0.35) !important;
}
/* Logo NhenPhim bắt mắt */
.brand-text {
  font-family: 'Poppins', system-ui, sans-serif !important;
  font-weight: 900 !important;
  font-size: 1.18rem !important;
  letter-spacing: -0.04em !important;
  background: linear-gradient(100deg, #ffffff 0%, #2ee6d6 40%, #f5c542 70%, #ffffff 100%) !important;
  background-size: 220% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: luxShimmer 3.5s linear infinite !important;
  filter: drop-shadow(0 0 10px rgba(46,230,214,0.35)) !important;
}
.brand-sub {
  color: #9aa6bd !important;
  -webkit-text-fill-color: #9aa6bd !important;
  font-weight: 600 !important;
}
.brand-logo {
  box-shadow: 0 0 16px rgba(46,230,214,0.35) !important;
}


/* ===== TẤT CẢ tag chất lượng / năm — shimmer ===== */
.lux-q, .card-badge, .badge-q, .badge-hd, .badge-fhd, .badge-4k,
.hero-tag.lux, .nf-tag.lux, .nf-tag.quality-lux, .quality-lux,
.detail-badge.q, .badge.badge-q,
span.q-hd, span.q-fhd, span.q-4k {
  display: inline-block !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
  font-weight: 800 !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.04em !important;
  border: none !important;
  background: linear-gradient(105deg, #9a7b1a, #f5e6a3, #ffe566, #c9a227, #f5e6a3, #9a7b1a) !important;
  background-size: 240% 100% !important;
  animation: luxShimmer 2.8s linear infinite !important;
  color: #1a1200 !important;
  -webkit-text-fill-color: #1a1200 !important;
  box-shadow: 0 2px 8px rgba(201,162,39,0.25) !important;
}
.lux-year, .card-year.fire, .badge-year-fire, .hero-tag.year-fire, .nf-tag.year-fire, .year-fire {
  display: inline-block !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
  font-weight: 800 !important;
  font-size: 0.68rem !important;
  border: none !important;
  background: linear-gradient(105deg, #4a0000, #ff2a00, #ff9a1a, #ff2a00, #4a0000) !important;
  background-size: 240% 100% !important;
  animation: fireShimmer 2.4s linear infinite !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  box-shadow: 0 2px 10px rgba(255,42,0,0.3) !important;
}
.card-year:not(.fire) {
  color: rgba(255,255,255,0.85) !important;
  font-weight: 700 !important;
  font-size: 0.72rem !important;
}
.btn-play, .nf-play, .hero-play, button.btn-play, a.btn-play {
  background: linear-gradient(105deg, #0f766e, #2ee6d6, #b8fff8, #2ee6d6, #3b82f6) !important;
  background-size: 240% 100% !important;
  animation: luxShimmer 2.6s linear infinite !important;
  color: #041210 !important;
  font-weight: 800 !important;
  border: none !important;
}
/* Nút phát — tim đập nhẹ, không nặng */
.btn-play.pulse, .nf-play {
  animation: luxShimmer 2.6s linear infinite, heartbeat 2.2s ease-in-out infinite !important;
}

/* Chủ đề — giản dị như mẫu */
.list-topic-title,
#listTitle.list-topic-title {
  display: block !important;
  margin: 12px 0 18px !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  line-height: 1.25 !important;
}
.list-topic-title .topic-kicker,
#listTitle .topic-kicker {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(1.25rem, 2.8vw, 1.65rem) !important;
  color: #e8b84a !important;
  -webkit-text-fill-color: #e8b84a !important;
  background: none !important;
  letter-spacing: -0.015em !important;
  margin-right: 0.35em !important;
}
.list-topic-title .topic-name,
#listTitle .topic-name {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(1.25rem, 2.8vw, 1.65rem) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: none !important;
  letter-spacing: -0.02em !important;
  text-shadow: none !important;
}

/* Poster card — mượt, không nháy tối */
.card-poster img, .card img {
  transition: opacity .55s ease !important;
  will-change: auto !important;
}
.card-poster {
  overflow: hidden !important;
  background: #0c1018 !important;
}

/* Giảm lag mobile */
@media (max-width: 700px) {
  .card-badge, .lux-q, .lux-year {
    animation-duration: 4s !important;
  }
  .btn-play, .nf-play {
    animation: luxShimmer 3.5s linear infinite !important; /* bỏ heartbeat mobile */
  }
}


/* ===== FORCE shimmer trên tag trong thumbnail (override mọi rule cũ) ===== */
.card-poster .card-badge,
.card-poster .badge-q,
.card .card-badge,
.card .badge-q,
.card-badge.lux-q,
.badge-q.lux-q {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  z-index: 5 !important;
  overflow: hidden !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  border: 1px solid rgba(255, 215, 100, 0.45) !important;
  color: #1a1200 !important;
  -webkit-text-fill-color: #1a1200 !important;
  background: linear-gradient(
    110deg,
    #6b4e0a 0%,
    #c9a227 18%,
    #fff3c0 36%,
    #ffd700 50%,
    #fff3c0 64%,
    #c9a227 82%,
    #6b4e0a 100%
  ) !important;
  background-size: 260% 100% !important;
  animation: luxShimmer 2.5s linear infinite !important;
}
.card-poster .card-year.fire,
.card .card-year.fire,
.card-year.fire.lux-year {
  position: absolute !important;
  bottom: 8px !important;
  right: 8px !important;
  z-index: 5 !important;
  overflow: hidden !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  font-weight: 800 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: linear-gradient(
    110deg,
    #4a0000 0%,
    #ff2a00 25%,
    #ff9a1a 50%,
    #ff2a00 75%,
    #4a0000 100%
  ) !important;
  background-size: 260% 100% !important;
  animation: fireShimmer 2.2s linear infinite !important;
}
/* Sweep light on badge */
.card-poster .card-badge::after,
.card .card-badge::after,
.card-badge.lux-q::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -60% !important;
  width: 45% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent) !important;
  animation: luxSweep 2.8s ease-in-out infinite !important;
  pointer-events: none !important;
}

/* ===== Hero vừa khung — hiện full poster ===== */
.hero {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  height: min(56vw, 480px) !important;
  min-height: 260px !important;
  max-height: 520px !important;
  border-radius: 0 0 20px 20px !important;
  overflow: hidden !important;
}
.hero-slide {
  background-size: cover !important;
  background-position: center 30% !important;
  background-repeat: no-repeat !important;
}
.hero-slide .hero-img,
.hero img.hero-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 28% !important;
}
.hero-body, .hero-content {
  padding-top: calc(var(--header-h, 56px) + 8px) !important;
  max-width: min(520px, 92%) !important;
}
@media (max-width: 700px) {
  /* neutralized hero height block */
  .hero-slide, .hero-slide .hero-img {
    background-position: center 25% !important;
    object-position: center 25% !important;
  }
}
@media (min-width: 1100px) {
  /* neutralized hero height block */
}

/* TV rails */
.tv-section { margin: 20px 0 28px; }
.tv-rail { margin-bottom: 22px; }
.tv-rail-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px; padding: 0 2px;
}
.tv-rail-title {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 800; font-size: 1.15rem; color: #fff;
}
.tv-track {
  display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.tv-card {
  flex: 0 0 auto; width: 120px; cursor: pointer;
  scroll-snap-align: start; text-align: center;
}
.tv-card img {
  width: 120px; height: 120px; object-fit: contain;
  border-radius: 14px; background: #121826;
  border: 1px solid rgba(255,255,255,0.08);
  padding: 8px;
}
.tv-card .tv-name {
  margin-top: 6px; font-size: 0.78rem; font-weight: 700;
  color: #e8ecf4; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-width: 600px) {
  .tv-card { width: 96px; }
  .tv-card img { width: 96px; height: 96px; }
}


/* ===== Năm TRÊN tên — không đè tên phim ===== */
.card-foot {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 3 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 4px !important;
  padding: 28px 10px 10px !important;
  background: linear-gradient(0deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.45) 55%, transparent 100%) !important;
  pointer-events: none !important;
}
.card-foot .card-year {
  position: static !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  align-self: flex-end !important;
  display: inline-block !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin: 0 0 2px auto !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  z-index: 4 !important;
  pointer-events: none !important;
}
.card-foot .card-name {
  position: static !important;
  display: block !important;
  width: 100% !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #fff !important;
  /* chừa chỗ, không bị tag đè */
  padding-right: 0 !important;
  margin: 0 !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
/* HD badge góc trên poster — không đụng tên */
.card-poster .card-badge,
.card .card-badge {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  bottom: auto !important;
  right: auto !important;
  z-index: 5 !important;
}

/* ===== Hero dịch xuống — hiện đủ thumbnail ===== */
.hero {
  margin-top: 8px !important;
  height: min(48vw, 420px) !important;
  min-height: 240px !important;
  max-height: 460px !important;
  border-radius: 16px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  overflow: hidden !important;
}
.hero-slide {
  background-size: cover !important;
  background-position: center center !important;
}
.hero-slide .hero-img,
.hero img.hero-img {
  object-fit: cover !important;
  object-position: center center !important;
  width: 100% !important;
  height: 100% !important;
}
.hero-overlay {
  background:
    linear-gradient(90deg, rgba(6,8,15,0.88) 0%, rgba(6,8,15,0.4) 42%, transparent 72%),
    linear-gradient(0deg, rgba(6,8,15,0.75) 0%, transparent 42%) !important;
}
.hero-body, .hero-content {
  padding-top: 16px !important;
  bottom: 16px !important;
  left: 16px !important;
  max-width: min(480px, 90%) !important;
}
@media (max-width: 700px) {
  /* neutralized hero height block */
}
@media (min-width: 1100px) {
  /* neutralized hero height block */
}

/* ===== Chi tiết phim: tag TĨNH — không lấp lánh chạy xấu ===== */
.detail-badges .badge,
#detailBadges .badge,
.detail .badge {
  animation: none !important;
  position: static !important;
  transform: none !important;
  overflow: visible !important;
}
.detail-badges .badge::after,
#detailBadges .badge::after,
.detail .badge::after {
  display: none !important;
  content: none !important;
  animation: none !important;
}
.detail-badges .badge-q,
#detailBadges .badge-q,
.detail .badge-q,
.detail .lux-q {
  background: linear-gradient(135deg, #c9a227, #f5e6a3 45%, #d4af37) !important;
  background-size: 100% 100% !important;
  color: #1a1200 !important;
  -webkit-text-fill-color: #1a1200 !important;
  animation: none !important;
}
.detail-badges .badge-year-fire,
#detailBadges .lux-year,
.detail .badge-year-fire {
  background: linear-gradient(135deg, #b91c1c, #f97316) !important;
  background-size: 100% 100% !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  animation: none !important;
}
.detail-badges, #detailBadges {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  align-items: center !important;
  position: static !important;
  transform: none !important;
}

.card-foot-top {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  min-height: 1.1em !important;
  width: 100% !important;
}


/* ===== NĂM trên dòng riêng → xuống dòng mới là TÊN PHIM (không đè) ===== */
.card-foot {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 4 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 4px !important;
  padding: 32px 10px 10px !important;
  background: linear-gradient(0deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.55) 60%, transparent 100%) !important;
  pointer-events: none !important;
  box-sizing: border-box !important;
}
.card-foot-top {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  width: 100% !important;
  flex: 0 0 auto !important;
  min-height: 1.15em !important;
  margin: 0 !important;
  padding: 0 !important;
}
.card-foot .card-year,
.card-foot-top .card-year,
.card-year {
  position: static !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  float: none !important;
  display: inline-block !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  vertical-align: middle !important;
  z-index: 5 !important;
  transform: none !important;
}
.card-foot .card-name,
.card-name {
  position: static !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.85) !important;
  clear: both !important;
}


/* ===== FIX: năm thường VÀ 2026 lửa — cùng góc TRÊN PHẢI, không đè tên ===== */
.card-poster > .card-year,
.card-poster > .card-year.fire,
.card-poster > .card-year.lux-year,
.card .card-poster .card-year,
.card .card-poster .card-year.fire {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 6 !important;
  margin: 0 !important;
  transform: none !important;
  float: none !important;
  display: inline-block !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  pointer-events: none !important;
  /* position relative từ rule shimmer làm lệch — ghi đè */
  inset: auto 8px auto auto !important;
  top: 8px !important;
  right: 8px !important;
}
/* Shimmer vẫn được, nhưng không dùng position:relative trên chính tag */
.card-poster > .card-year.fire,
.card-poster > .card-year.lux-year {
  overflow: hidden !important;
  isolation: isolate !important;
}
.card-poster > .card-badge,
.card-poster > .badge-q {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 6 !important;
}
.card-foot {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  z-index: 3 !important;
  padding: 28px 10px 10px !important;
  background: linear-gradient(0deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.45) 55%, transparent 100%) !important;
  pointer-events: none !important;
}
.card-foot .card-year,
.card-foot-top {
  display: none !important; /* không còn năm trong chân */
}
.card-foot .card-name {
  position: static !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ===== 20260915f: tên đọc được + hero full màn ===== */
.card-foot {
  padding: 22px 10px 10px !important;
}
.card-foot .card-name,
.card-poster .card-name,
.card-name {
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  max-width: 100% !important;
  width: 100% !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  line-height: 1.28 !important;
  letter-spacing: -0.01em;
  -webkit-line-clamp: 2 !important;
  color: #fff !important;
  text-shadow: 0 1px 6px rgba(0,0,0,0.9) !important;
}
.card-name.is-long,
.card-poster .card-name.is-long {
  font-size: 0.8rem !important;
  -webkit-line-clamp: 2 !important;
}
.card-name.is-verylong,
.card-poster .card-name.is-verylong {
  font-size: 0.76rem !important;
  line-height: 1.22 !important;
  -webkit-line-clamp: 3 !important;
}

.hero,
#hero.hero {
  position: relative !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-top: 0 !important;
  margin-bottom: 20px !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 100vh !important;
  max-height: none !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: #000 !important;
}
.hero-slide {
  position: absolute !important;
  inset: 0 !important;
}
.hero-slide .hero-img,
.hero img.hero-img,
.hero-slide img.hero-bg-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}
.hero-body, .hero-content {
  padding-top: calc(var(--header-h, 56px) + 18px) !important;
  max-width: min(720px, 92vw) !important;
}
.hero-title {
  font-size: clamp(1.8rem, 5.2vw, 3.4rem) !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  letter-spacing: 0.01em !important;
  color: #fff !important;
  text-shadow: 0 4px 24px rgba(0,0,0,0.75) !important;
  margin: 8px 0 10px !important;
}
@media (max-width: 700px) {
  .hero, #hero/* neutralized hero height block */
  .hero-title { font-size: clamp(1.55rem, 7.2vw, 2.35rem) !important; }
  .card-foot .card-name, .card-name { font-size: 0.9rem !important; }
}

/* ===== 20260916: TV public + title + hero full + genre fonts ===== */
.hero, #hero, #hero.hero-carousel {
  position: relative !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-top: 0 !important;
  height: 100svh !important;
  min-height: 100svh !important;
  max-height: none !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}
#heroSlides,
.hero-slide {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
.hero-slide .hero-img,
.hero-slide img.hero-bg-img,
.hero img.hero-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 22% !important;
}
.hero-title {
  font-family: var(--hero-font, "Bebas Neue"), "Oswald", sans-serif !important;
  font-size: clamp(2rem, 5.6vw, 4.2rem) !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
}
.card-foot .card-name,
.card-poster .card-name,
.card-name {
  font-size: 0.92rem !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  -webkit-line-clamp: 2 !important;
  letter-spacing: -0.015em !important;
  text-shadow: 0 1px 8px rgba(0,0,0,0.95) !important;
}
.card-name.is-long,
.card-name.is-verylong,
.card-poster .card-name.is-long,
.card-poster .card-name.is-verylong {
  font-size: 0.9rem !important;
  -webkit-line-clamp: 2 !important;
}
.tv-section { display: block !important; }




/* ===== 20260916b: hero mobile vừa, desktop full; ảnh khít khung ===== */
.hero, #hero, #hero.hero-carousel {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  overflow: hidden !important;
}
.hero-slide .hero-img,
.hero-slide img.hero-bg-img,
.hero img.hero-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 18% !important;
}
/* Desktop: cao vừa khung lớn */
@media (min-width: 901px) {
  .hero, /* neutralized tall #hero */
}
/* Mobile / tablet: KHÔNG full dọc — tỷ lệ rạp phim */
@media (max-width: 900px) {
  .hero, #hero, #hero.hero-carousel {
    height: min(48vh, 380px) !important;
    min-height: 220px !important;
    max-height: 420px !important;
    border-radius: 0 0 16px 16px !important;
  }
  .hero-body, .hero-content {
    padding-top: calc(var(--header-h, 56px) + 8px) !important;
    max-width: 94vw !important;
  }
  .hero-title {
    font-size: clamp(1.35rem, 6vw, 1.9rem) !important;
  }
  .hero-syn { display: none !important; }
}
@media (max-width: 480px) {
  .hero, #hero, #hero.hero-carousel {
    height: min(42vh, 300px) !important;
    min-height: 200px !important;
  }
}


/* ===== 20260916c: Hero hiện HẾT thumbnail từ tâm ảnh ===== */
.hero-slide {
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
  background: #06080f !important;
}
.hero-blur-bg {
  position: absolute !important;
  inset: -8% !important;
  background-size: contain !important;
  background-position: center center !important;
  filter: brightness(1.02) contrast(1.02);
  transform: scale(1.08) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
.hero-slide .hero-img,
.hero-slide img.hero-bg-img,
.hero-slide img.hero-img-fit,
.hero img.hero-img {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  z-index: 1 !important;
}
/* khung vẫn full width; ảnh nằm giữa, thấy trọn poster */
.hero-overlay {
  z-index: 2 !important;
}
.hero-body, .hero-content {
  z-index: 3 !important;
  position: relative !important;
}


/* ===== 20260916d: HERO THUMB = CONTAIN 100% ảnh, không crop ===== */
#hero,
#hero.hero,
#hero.hero-carousel,
.hero.hero-carousel {
  position: relative !important;
  overflow: hidden !important;
  background: #06080f !important;
}
#heroSlides {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
#hero .hero-slide,
.hero .hero-slide,
#heroSlides .hero-slide {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  background: #06080f !important;
  display: block !important;
}
/* Blur backdrop — full frame, cover only the background layer */
#hero .hero-blur-bg,
.hero .hero-blur-bg,
.hero-slide .hero-blur-bg {
  position: absolute !important;
  inset: -12% !important;
  z-index: 0 !important;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  filter: brightness(1.02) contrast(1.02);
  transform: none !important;
  pointer-events: none !important;
}
/* Ảnh chính: NEVER cover — contain + centered, max size in frame */
#hero .hero-slide img.hero-img,
#hero .hero-slide img.hero-bg-img,
#hero .hero-slide img.hero-img-fit,
.hero .hero-slide img.hero-img,
.hero .hero-slide img.hero-bg-img,
.hero .hero-slide img.hero-img-fit,
#heroSlides img.hero-img,
#heroSlides img.hero-bg-img,
#heroSlides img.hero-img-fit {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  /* ghi đè mọi rule cover trước đó */
  object-fit: contain !important;
  z-index: 1 !important;
  border: 0 !important;
  border-radius: 0 !important;
  pointer-events: none !important;
}
#hero .hero-overlay,
.hero .hero-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background:
    linear-gradient(180deg, rgba(6,10,18,0.55) 0%, transparent 28%),
    linear-gradient(90deg, rgba(6,8,15,0.82) 0%, rgba(6,8,15,0.25) 42%, transparent 70%),
    linear-gradient(0deg, rgba(6,8,15,0.88) 0%, transparent 48%) !important;
}
#hero .hero-body,
#hero .hero-content,
.hero .hero-body,
.hero .hero-content {
  position: relative !important;
  z-index: 3 !important;
}


/* =========================================================
   20260916e — HERO STREAMING CINEMATIC (redesign full)
   ========================================================= */
#hero,
#hero.hero,
#hero.hero-carousel,
.hero.hero-carousel {
  position: relative !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-top: 0 !important;
  margin-bottom: 28px !important;
  height: clamp(420px, 62vh, 640px) !important;
  min-height: 400px !important;
  max-height: 680px !important;
  border-radius: 0 0 28px 28px !important;
  overflow: hidden !important;
  background: #070b14 !important;
  isolation: isolate !important;
}
#heroSlides {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
#hero .hero-slide,
#heroSlides .hero-slide {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1) !important;
  display: block !important;
  background: transparent !important;
}
#hero .hero-slide.on,
#heroSlides .hero-slide.on {
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 2 !important;
}

/* Layer media: blur background only */
#hero .hero-media {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  overflow: hidden !important;
}
#hero .hero-blur-bg {
  position: absolute !important;
  inset: -18% !important;
  background-size: contain !important;
  background-position: center 30% !important;
  background-repeat: no-repeat !important;
  filter: brightness(1.02) contrast(1.02);
  transform: none !important;
  animation: heroKen 18s ease-in-out infinite alternate !important;
  pointer-events: none !important;
}
@keyframes heroKen {
  from { transform: scale(1.12) translate3d(0, 0, 0); }
  to { transform: scale(1.2) translate3d(-1.5%, -1%, 0); }
}
#hero .hero-vignette {
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(ellipse 85% 75% at 50% 45%, transparent 20%, rgba(6,8,15,0.55) 100%),
    linear-gradient(90deg, rgba(6,8,15,0.75) 0%, transparent 55%),
    linear-gradient(0deg, rgba(6,8,15,0.9) 0%, transparent 45%) !important;
  pointer-events: none !important;
}
#hero .hero-overlay {
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(180deg, rgba(6,10,18,0.5) 0%, transparent 22%),
    linear-gradient(90deg, rgba(6,8,15,0.55) 0%, transparent 50%) !important;
  pointer-events: none !important;
}

/* Layout: poster + info */
#hero .hero-layout {
  position: relative !important;
  z-index: 3 !important;
  height: 100% !important;
  width: 100% !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: calc(var(--header-h, 56px) + 28px) 40px 36px !important;
  display: grid !important;
  grid-template-columns: minmax(180px, 280px) minmax(0, 1fr) !important;
  gap: 36px !important;
  align-items: end !important;
  box-sizing: border-box !important;
}

/* Poster panel — full image, no crop */
#hero .hero-poster-wrap {
  position: relative !important;
  width: 100% !important;
  height: min(72%, 480px) !important;
  max-height: 480px !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,0.55)) !important;
}
#hero .hero-poster {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  border-radius: 14px !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08),
    0 20px 50px rgba(0,0,0,0.55) !important;
  background: rgba(0,0,0,0.25) !important;
}

/* Info */
#hero .hero-info {
  min-width: 0 !important;
  padding-bottom: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  align-items: flex-start !important;
}
#hero .hero-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 !important;
}
#hero .hero-tag {
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  padding: 5px 11px !important;
  border-radius: 999px !important;
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  backdrop-filter: blur(8px) !important;
}
#hero .hero-title {
  margin: 0 !important;
  font-size: clamp(1.85rem, 3.6vw, 3.35rem) !important;
  font-weight: 800 !important;
  line-height: 1.08 !important;
  letter-spacing: 0.01em !important;
  color: #fff !important;
  text-shadow: 0 4px 28px rgba(0,0,0,0.65) !important;
  max-width: 16ch !important;
}
#hero .hero-origin {
  margin: 0 !important;
  font-size: 0.95rem !important;
  color: rgba(255,255,255,0.72) !important;
  font-weight: 500 !important;
}
#hero .hero-syn {
  margin: 4px 0 6px !important;
  font-size: 0.95rem !important;
  line-height: 1.55 !important;
  color: rgba(230,236,248,0.88) !important;
  max-width: 42rem !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.45) !important;
}
#hero .hero-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-top: 6px !important;
}
#hero .btn-play {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 22px !important;
  border-radius: 999px !important;
  border: 0 !important;
  font-weight: 800 !important;
  font-size: 0.95rem !important;
  cursor: pointer !important;
  color: #061018 !important;
  background: linear-gradient(135deg, #5ff0e3 0%, #2ee6d6 40%, #1bb8c4 100%) !important;
  box-shadow: 0 8px 28px rgba(46,230,214,0.35) !important;
}
#hero .btn-hero-more {
  display: inline-flex !important;
  align-items: center !important;
  padding: 12px 20px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  background: rgba(255,255,255,0.08) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 0.92rem !important;
  cursor: pointer !important;
  backdrop-filter: blur(10px) !important;
}
#hero .btn-hero-more:hover {
  background: rgba(255,255,255,0.14) !important;
}

/* Dots + nav */
#hero .hero-dots {
  position: absolute !important;
  left: 50% !important;
  bottom: 14px !important;
  transform: translateX(-50%) !important;
  z-index: 6 !important;
  display: flex !important;
  gap: 8px !important;
}
#hero .hero-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  border: 0 !important;
  padding: 0 !important;
  background: rgba(255,255,255,0.28) !important;
  cursor: pointer !important;
  transition: width .25s, background .25s !important;
}
#hero .hero-dot.on {
  width: 22px !important;
  background: #2ee6d6 !important;
}
#hero .hero-nav {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 7 !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  background: rgba(8,12,22,0.45) !important;
  color: #fff !important;
  font-size: 1.4rem !important;
  cursor: pointer !important;
  backdrop-filter: blur(8px) !important;
  display: grid !important;
  place-items: center !important;
}
#hero .hero-nav.prev { left: 14px !important; }
#hero .hero-nav.next { right: 14px !important; }
#hero .hero-nav:hover { background: rgba(46,230,214,0.2) !important; }

/* Kill old centered full-frame poster rules */
#hero img.hero-img,
#hero img.hero-bg-img,
#hero img.hero-img-fit {
  display: none !important;
}

/* Tablet */
@media (max-width: 960px) {
  #hero, #hero.hero, #hero.hero-carousel {
    height: clamp(380px, 58vh, 520px) !important;
    min-height: 360px !important;
  }
  #hero .hero-layout {
    grid-template-columns: minmax(150px, 210px) minmax(0, 1fr) !important;
    gap: 22px !important;
    padding: calc(var(--header-h, 56px) + 20px) 24px 28px !important;
  }
  #hero .hero-title { max-width: 100% !important; font-size: clamp(1.55rem, 4vw, 2.2rem) !important; }
  #hero .hero-syn { -webkit-line-clamp: 2 !important; }
}

/* Mobile — stack vertical, chiều cao cố định */
@media (max-width: 700px) {
  /* neutralized tall #hero */
  #heroSlides {
    position: absolute !important;
    inset: 0 !important;
  }
  #hero .hero-slide {
    position: absolute !important;
    inset: 0 !important;
  }
  #hero .hero-layout {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-end !important;
    text-align: center !important;
    gap: 12px !important;
    padding: calc(var(--header-h, 52px) + 12px) 16px 48px !important;
    height: 100% !important;
    grid-template-columns: none !important;
  }
  #hero .hero-poster-wrap {
    width: min(52vw, 180px) !important;
    height: min(38vh, 260px) !important;
    max-height: 260px !important;
    align-items: center !important;
    flex-shrink: 0 !important;
  }
  #hero .hero-info {
    align-items: center !important;
    width: 100% !important;
  }
  #hero .hero-tags { justify-content: center !important; }
  #hero .hero-title {
    font-size: clamp(1.35rem, 6.2vw, 1.8rem) !important;
    max-width: 100% !important;
    text-align: center !important;
  }
  #hero .hero-syn { display: none !important; }
  #hero .hero-actions { justify-content: center !important; }
  #hero .hero-nav { display: none !important; }
  #hero .hero-dots { bottom: 10px !important; }
}

@media (min-width: 1200px) {
  #hero, #hero/* neutralized hero height block */
  #hero .hero-layout {
    grid-template-columns: minmax(220px, 300px) minmax(0, 1fr) !important;
    gap: 48px !important;
  }
}


/* ===== 20260916f: CĂN CHỈNH HERO — hết lệch ===== */
#hero .hero-slide {
  display: flex !important;
  flex-direction: column !important;
}
#hero .hero-layout {
  position: relative !important;
  z-index: 3 !important;
  display: grid !important;
  grid-template-columns: 240px 1fr !important;
  grid-template-rows: 1fr !important;
  align-items: center !important;
  justify-items: stretch !important;
  gap: 40px !important;
  width: 100% !important;
  max-width: 1200px !important;
  height: 100% !important;
  margin: 0 auto !important;
  padding: calc(var(--header-h, 56px) + 20px) 56px 40px !important;
  box-sizing: border-box !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
}
#hero .hero-poster-wrap {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 8px 0 8px !important;
  box-sizing: border-box !important;
}
#hero .hero-poster {
  position: static !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: calc(100% - 8px) !important;
  object-fit: contain !important;
  object-position: center center !important;
  margin: 0 auto !important;
}
#hero .hero-info {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: center !important;
  justify-self: start !important;
  width: 100% !important;
  max-width: 640px !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  align-items: flex-start !important;
  transform: none !important;
  left: auto !important;
  bottom: auto !important;
}
#hero .hero-title {
  max-width: 100% !important;
  text-align: left !important;
  margin: 0 !important;
}
#hero .hero-origin,
#hero .hero-syn {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
#hero .hero-tags,
#hero .hero-actions {
  justify-content: flex-start !important;
}

@media (max-width: 960px) {
  #hero .hero-layout {
    grid-template-columns: 180px 1fr !important;
    gap: 24px !important;
    padding: calc(var(--header-h, 56px) + 16px) 28px 32px !important;
  }
}
@media (max-width: 700px) {
  #hero .hero-layout {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    padding: calc(var(--header-h, 52px) + 16px) 18px 44px !important;
    text-align: center !important;
  }
  #hero .hero-poster-wrap {
    width: min(46vw, 170px) !important;
    height: min(36vh, 250px) !important;
    flex: 0 0 auto !important;
  }
  #hero .hero-info {
    width: 100% !important;
    max-width: 100% !important;
    align-items: center !important;
    text-align: center !important;
  }
  #hero .hero-title,
  #hero .hero-origin,
  #hero .hero-syn {
    text-align: center !important;
  }
  #hero .hero-tags,
  #hero .hero-actions {
    justify-content: center !important;
  }
}
@media (min-width: 1200px) {
  #hero .hero-layout {
    grid-template-columns: 280px 1fr !important;
    gap: 48px !important;
    padding-left: 64px !important;
    padding-right: 64px !important;
  }
}


/* ===== 20260916g: Tag FHD/2026 + nút Phát tim đập — HERO ===== */
@keyframes luxShimmerHero {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes fireShimmerHero {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes heartbeatHero {
  0%, 100% { transform: scale(1); box-shadow: 0 8px 28px rgba(46,230,214,0.35); }
  14% { transform: scale(1.06); box-shadow: 0 10px 34px rgba(46,230,214,0.5); }
  28% { transform: scale(1); box-shadow: 0 8px 28px rgba(46,230,214,0.35); }
  42% { transform: scale(1.04); box-shadow: 0 10px 30px rgba(46,230,214,0.45); }
  70% { transform: scale(1); }
}
@keyframes luxSweepHero {
  0% { left: -40%; }
  100% { left: 120%; }
}

/* HD / FHD / 4K — vàng luxury */
#hero .hero-tag.lux-q,
#hero .hero-tag.lux,
#hero .hero-tag.q-hd,
#hero .hero-tag.q-fhd,
#hero .hero-tag.q-4k,
.hero-tag.lux-q {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  color: #1a1200 !important;
  font-weight: 800 !important;
  border: 1px solid rgba(255, 215, 100, 0.55) !important;
  background: linear-gradient(
    115deg,
    #8a6a12 0%,
    #c9a227 18%,
    #f5e6a3 38%,
    #ffd700 50%,
    #f5e6a3 62%,
    #b8860b 82%,
    #8a6a12 100%
  ) !important;
  background-size: 220% 100% !important;
  animation: luxShimmerHero 2.8s linear infinite !important;
  box-shadow:
    0 0 12px rgba(255, 200, 60, 0.35),
    inset 0 1px 0 rgba(255,255,255,0.45) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.35) !important;
}
#hero .hero-tag.lux-q::after,
.hero-tag.lux-q::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -40% !important;
  width: 40% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent) !important;
  animation: luxSweepHero 2.4s ease-in-out infinite !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* 2026 đỏ lửa */
#hero .hero-tag.year-fire,
#hero .hero-tag.lux-year,
.hero-tag.year-fire {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  color: #fff !important;
  font-weight: 800 !important;
  border: 1px solid rgba(255, 120, 40, 0.55) !important;
  background: linear-gradient(
    120deg,
    #5c0000 0%,
    #c41000 18%,
    #ff4500 35%,
    #ffcc66 50%,
    #ff2d00 65%,
    #8b0000 85%,
    #5c0000 100%
  ) !important;
  background-size: 220% 100% !important;
  animation: fireShimmerHero 2.6s ease-in-out infinite !important;
  box-shadow:
    0 0 14px rgba(255, 60, 20, 0.4),
    inset 0 1px 0 rgba(255,255,255,0.3) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.45) !important;
}
#hero .hero-tag.year-fire::after,
.hero-tag.year-fire::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -40% !important;
  width: 40% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent) !important;
  animation: luxSweepHero 2.2s ease-in-out infinite !important;
  pointer-events: none !important;
}

/* Nút Phát ngay — tim đập + shimmer */
#hero .btn-play,
#hero .hero-actions .btn-play {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  color: #061018 !important;
  font-weight: 800 !important;
  border: 0 !important;
  background: linear-gradient(
    125deg,
    #1a9e94 0%,
    #2ee6d6 25%,
    #a8fff6 50%,
    #2ee6d6 75%,
    #1a9e94 100%
  ) !important;
  background-size: 220% 100% !important;
  animation:
    luxShimmerHero 3s linear infinite,
    heartbeatHero 1.45s ease-in-out infinite !important;
  box-shadow:
    0 8px 28px rgba(46,230,214,0.38),
    inset 0 1px 0 rgba(255,255,255,0.5) !important;
  transform-origin: center center !important;
}
#hero .btn-play::after,
#hero .hero-actions .btn-play::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: -45% !important;
  width: 40% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent) !important;
  animation: luxSweepHero 2.6s ease-in-out infinite !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
#hero .btn-play .play-ico,
#hero .btn-play span {
  position: relative !important;
  z-index: 2 !important;
}
#hero .btn-play:hover {
  filter: brightness(1.08) !important;
}

/* Card tags vẫn giữ màu nếu bị override */
.card-badge.badge-q,
.card-badge.lux-q,
.badge-q {
  background: linear-gradient(115deg, #8a6a12, #f5e6a3, #ffd700, #b8860b) !important;
  background-size: 200% 100% !important;
  animation: luxShimmerHero 2.8s linear infinite !important;
  color: #1a1200 !important;
  border-color: rgba(255,215,100,0.5) !important;
}
.card-year.fire,
.card-year.lux-year {
  background: linear-gradient(120deg, #5c0000, #ff4500, #ffcc66, #ff2d00, #5c0000) !important;
  background-size: 200% 100% !important;
  animation: fireShimmerHero 2.6s ease-in-out infinite !important;
  color: #fff !important;
}


/* ===== 20260916h: shimmer MỌI tag hero + card ===== */
#hero .hero-tag,
.hero-tag {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
}
#hero .hero-tag:not(.lux-q):not(.year-fire):not(.lux-year) {
  background: linear-gradient(120deg, rgba(255,255,255,0.12), rgba(255,255,255,0.22), rgba(255,255,255,0.12)) !important;
  background-size: 200% 100% !important;
  animation: luxShimmerHero 3.2s linear infinite !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
}
#hero .hero-tag::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: -45% !important;
  width: 40% !important; height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent) !important;
  animation: luxSweepHero 2.5s ease-in-out infinite !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
.card-badge,
.card-year,
.badge-q,
.card-year.fire {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
}
.card-badge::after,
.card-year::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: -45% !important;
  width: 40% !important; height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent) !important;
  animation: luxSweepHero 2.5s ease-in-out infinite !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
.card-badge.badge-q,
.card-badge.lux-q,
.badge-q {
  color: #1a1200 !important;
  background: linear-gradient(115deg, #8a6a12 0%, #c9a227 20%, #f5e6a3 40%, #ffd700 50%, #f5e6a3 60%, #b8860b 80%, #8a6a12 100%) !important;
  background-size: 220% 100% !important;
  animation: luxShimmerHero 2.8s linear infinite !important;
  border: 1px solid rgba(255,215,100,0.5) !important;
  box-shadow: 0 0 10px rgba(255,200,60,0.3) !important;
}
.card-year.fire,
.card-year.lux-year {
  color: #fff !important;
  background: linear-gradient(120deg, #5c0000, #ff4500, #ffcc66, #ff2d00, #5c0000) !important;
  background-size: 220% 100% !important;
  animation: fireShimmerHero 2.6s ease-in-out infinite !important;
  border: 1px solid rgba(255,120,40,0.5) !important;
  box-shadow: 0 0 12px rgba(255,60,20,0.35) !important;
}
.card-year:not(.fire):not(.lux-year) {
  background: linear-gradient(120deg, rgba(0,0,0,0.65), rgba(40,50,70,0.75), rgba(0,0,0,0.65)) !important;
  background-size: 200% 100% !important;
  animation: luxShimmerHero 3.5s linear infinite !important;
}


/* =========================================================
   20260916i — SHIMMER BẮT BUỘC (bản cũ SPC) — ưu tiên cuối file
   ========================================================= */
@keyframes luxShimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes luxSweep {
  0% { left: -55%; }
  100% { left: 140%; }
}
@keyframes firePulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.15); }
}
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.07); }
  28% { transform: scale(1); }
  42% { transform: scale(1.045); }
  70% { transform: scale(1); }
}

/* --- Card: HD/FHD/4K vàng metallic --- */
.card .card-badge,
.card .card-badge.badge-q,
.card .card-badge.lux-q,
.card-poster .card-badge,
.card-poster .badge-q,
span.card-badge,
span.badge-q {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 8 !important;
  overflow: hidden !important;
  isolation: isolate !important;
  display: inline-block !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  color: #1a1200 !important;
  -webkit-text-fill-color: #1a1200 !important;
  border: 1px solid rgba(255, 215, 100, 0.65) !important;
  background-image: linear-gradient(
    120deg,
    #8a6a12 0%,
    #c9a227 18%,
    #f5e6a3 36%,
    #ffd700 50%,
    #f5e6a3 64%,
    #b8860b 82%,
    #8a6a12 100%
  ) !important;
  background-size: 220% 100% !important;
  background-color: #c9a227 !important;
  animation: luxShimmer 2.6s linear infinite !important;
  box-shadow: 0 0 12px rgba(255, 200, 60, 0.45), inset 0 1px 0 rgba(255,255,255,0.45) !important;
  pointer-events: none !important;
}
.card .card-badge::after,
.card .card-badge.badge-q::after,
.card-poster .card-badge::after,
span.card-badge::after,
span.badge-q::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: -50% !important;
  width: 45% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.65), transparent) !important;
  animation: luxSweep 2.2s ease-in-out infinite !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* --- Card: 2026 đỏ lửa --- */
.card .card-year.fire,
.card .card-year.lux-year,
.card-poster .card-year.fire,
.card-poster .card-year.lux-year,
span.card-year.fire {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 8 !important;
  overflow: hidden !important;
  isolation: isolate !important;
  display: inline-block !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border: 1px solid rgba(255, 120, 40, 0.6) !important;
  background-image: linear-gradient(
    120deg,
    #5c0000 0%,
    #c41000 16%,
    #ff4500 34%,
    #ffcc66 50%,
    #ff2d00 66%,
    #8b0000 84%,
    #5c0000 100%
  ) !important;
  background-size: 220% 100% !important;
  background-color: #c41000 !important;
  animation: luxShimmer 2.4s linear infinite, firePulse 2.8s ease-in-out infinite !important;
  box-shadow: 0 0 14px rgba(255, 60, 20, 0.45), inset 0 1px 0 rgba(255,255,255,0.3) !important;
  pointer-events: none !important;
}
.card .card-year.fire::after,
.card-poster .card-year.fire::after,
span.card-year.fire::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: -50% !important;
  width: 45% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent) !important;
  animation: luxSweep 2s ease-in-out infinite !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* --- Card: năm thường (không 2026) --- */
.card .card-year:not(.fire):not(.lux-year),
.card-poster .card-year:not(.fire):not(.lux-year) {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  left: auto !important;
  z-index: 8 !important;
  overflow: hidden !important;
  color: #e8eef8 !important;
  background: rgba(0,0,0,0.72) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  font-size: 0.65rem !important;
  font-weight: 800 !important;
}

/* --- HERO tags --- */
#hero .hero-tag.lux-q,
#hero .hero-tag.lux,
#hero .hero-tag.q-hd,
#hero .hero-tag.q-fhd,
#hero .hero-tag.q-4k {
  overflow: hidden !important;
  isolation: isolate !important;
  color: #1a1200 !important;
  -webkit-text-fill-color: #1a1200 !important;
  border: 1px solid rgba(255, 215, 100, 0.65) !important;
  background-image: linear-gradient(
    120deg,
    #8a6a12 0%, #c9a227 18%, #f5e6a3 36%, #ffd700 50%,
    #f5e6a3 64%, #b8860b 82%, #8a6a12 100%
  ) !important;
  background-size: 220% 100% !important;
  animation: luxShimmer 2.6s linear infinite !important;
  box-shadow: 0 0 14px rgba(255, 200, 60, 0.4) !important;
}
#hero .hero-tag.year-fire,
#hero .hero-tag.lux-year {
  overflow: hidden !important;
  isolation: isolate !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border: 1px solid rgba(255, 120, 40, 0.6) !important;
  background-image: linear-gradient(
    120deg,
    #5c0000 0%, #c41000 16%, #ff4500 34%, #ffcc66 50%,
    #ff2d00 66%, #8b0000 84%, #5c0000 100%
  ) !important;
  background-size: 220% 100% !important;
  animation: luxShimmer 2.4s linear infinite, firePulse 2.8s ease-in-out infinite !important;
  box-shadow: 0 0 14px rgba(255, 60, 20, 0.45) !important;
}
#hero .hero-tag.plain {
  color: #e8eef8 !important;
  background: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
}
#hero .hero-tag.lux-q::after,
#hero .hero-tag.year-fire::after,
#hero .hero-tag.lux-year::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: -50% !important;
  width: 45% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent) !important;
  animation: luxSweep 2.2s ease-in-out infinite !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* --- Nút Phát ngay HERO + card hover --- */
#hero .btn-play,
.nf-play.btn-play,
button.btn-play {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  color: #041210 !important;
  -webkit-text-fill-color: #041210 !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  background-image: linear-gradient(
    120deg,
    #0d9488 0%, #2ee6d6 25%, #a8fff6 50%, #2ee6d6 70%, #1e90ff 100%
  ) !important;
  background-size: 220% 100% !important;
  animation: luxShimmer 2.8s linear infinite, heartbeat 1.4s ease-in-out infinite !important;
  box-shadow: 0 6px 26px rgba(46,230,214,0.42), inset 0 1px 0 rgba(255,255,255,0.45) !important;
}
#hero .btn-play::after,
.nf-play.btn-play::after,
button.btn-play::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: -50% !important;
  width: 45% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent) !important;
  animation: luxSweep 2.4s ease-in-out infinite !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
#hero .btn-play .play-ico,
#hero .btn-play span {
  position: relative !important;
  z-index: 2 !important;
}

/* Chi tiết phim: vẫn tĩnh (không shimmer) */
.detail-badges .badge,
#detailBadges .badge,
.detail .badge {
  animation: none !important;
}
.detail-badges .badge::after,
#detailBadges .badge::after {
  display: none !important;
  content: none !important;
}


/* ===== 20260917a: logo vừa vặn + LIVE đỏ + shimmer chắc + poster detail ===== */
.brand-logo,
img.brand-logo,
.boot-logo {
  width: 42px !important;
  height: 42px !important;
  max-width: 42px !important;
  max-height: 42px !important;
  object-fit: contain !important;
  object-position: center center !important;
  border-radius: 10px !important;
  background: transparent !important;
  display: block !important;
  flex-shrink: 0 !important;
}
@media (max-width: 640px) {
  .brand-logo, img.brand-logo {
    width: 36px !important;
    height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
  }
}

/* LIVE đỏ trực tuyến */
@keyframes livePulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255, 45, 45, 0.55); }
  50% { opacity: 0.75; box-shadow: 0 0 0 6px rgba(255, 45, 45, 0); }
}
.badge-live,
#detailBadges .badge-live,
.detail-badges .badge-live {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 4px 11px 4px 9px !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.06em !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: linear-gradient(135deg, #b91c1c 0%, #ef4444 45%, #dc2626 100%) !important;
  border: 1px solid rgba(255, 120, 120, 0.55) !important;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.35) !important;
  animation: none !important;
}
.badge-live .live-dot,
.live-dot {
  display: inline-block !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: 0 0 0 0 rgba(255,255,255,0.6) !important;
  animation: livePulse 1.2s ease-in-out infinite !important;
  flex-shrink: 0 !important;
}

/* Detail poster luôn hiện */
.detail-poster,
#detailPoster {
  display: block !important;
  width: 160px !important;
  max-width: 42vw !important;
  min-height: 0 !important;
  height: auto !important;
  aspect-ratio: 2 / 3 !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,0.06) !important;
  opacity: 1 !important;
  flex-shrink: 0 !important;
}
@media (max-width: 600px) {
  .detail-poster, #detailPoster {
    width: 110px !important;
    max-width: 110px !important;
  }
}
/* Poster dọc (portrait) vẫn đẹp; poster ngang 16:9 không bị ép 2:3 */
.detail-poster.is-portrait,
#detailPoster.is-portrait {
  width: 160px !important;
  aspect-ratio: 2/3 !important;
  object-fit: cover !important;
}
.detail-hero-row {
  display: flex !important;
  gap: 14px !important;
  align-items: flex-start !important;
}
@media (max-width: 640px) {
  .detail-poster, #detailPoster { width: 110px !important; }
}

/* Shimmer chắc chắn — background-position only */
@keyframes nhShimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes nhSweep {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(220%); }
}
.card .card-badge,
.card-poster .card-badge,
.card .card-badge.badge-q {
  background-image: linear-gradient(110deg, #8a6a12 0%, #e8c547 28%, #fff3b0 48%, #ffd700 52%, #e8c547 72%, #8a6a12 100%) !important;
  background-size: 250% 100% !important;
  animation: nhShimmer 2.4s linear infinite !important;
  color: #1a1200 !important;
  -webkit-text-fill-color: #1a1200 !important;
  overflow: hidden !important;
  position: absolute !important;
  top: 8px !important; left: 8px !important;
  z-index: 8 !important;
}
.card .card-badge::before,
.card-poster .card-badge::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%) !important;
  width: 40% !important;
  animation: nhSweep 2.2s ease-in-out infinite !important;
  pointer-events: none !important;
}
.card .card-year.fire,
.card-poster .card-year.fire {
  background-image: linear-gradient(110deg, #5c0000 0%, #ff2a00 30%, #ffcc66 50%, #ff2a00 70%, #5c0000 100%) !important;
  background-size: 250% 100% !important;
  animation: nhShimmer 2.2s linear infinite !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  overflow: hidden !important;
  position: absolute !important;
  top: 8px !important; right: 8px !important; left: auto !important;
  z-index: 8 !important;
}
.card .card-year.fire::before,
.card-poster .card-year.fire::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  width: 40% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent) !important;
  animation: nhSweep 2s ease-in-out infinite !important;
  pointer-events: none !important;
}
#hero .hero-tag.lux-q,
#hero .hero-tag.q-hd,
#hero .hero-tag.q-fhd,
#hero .hero-tag.q-4k {
  background-image: linear-gradient(110deg, #8a6a12 0%, #e8c547 28%, #fff3b0 48%, #ffd700 52%, #e8c547 72%, #8a6a12 100%) !important;
  background-size: 250% 100% !important;
  animation: nhShimmer 2.4s linear infinite !important;
  color: #1a1200 !important;
  -webkit-text-fill-color: #1a1200 !important;
  overflow: hidden !important;
}
#hero .hero-tag.year-fire,
#hero .hero-tag.lux-year {
  background-image: linear-gradient(110deg, #5c0000 0%, #ff2a00 30%, #ffcc66 50%, #ff2a00 70%, #5c0000 100%) !important;
  background-size: 250% 100% !important;
  animation: nhShimmer 2.2s linear infinite !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  overflow: hidden !important;
}
#hero .btn-play {
  background-image: linear-gradient(110deg, #0d9488 0%, #2ee6d6 30%, #c5fffa 50%, #2ee6d6 70%, #1e90ff 100%) !important;
  background-size: 250% 100% !important;
  animation: nhShimmer 2.6s linear infinite, heartbeat 1.4s ease-in-out infinite !important;
  overflow: hidden !important;
}


/* ===== 20260917b: HERO tag shimmer bắt buộc + dots sync visual ===== */
#hero .hero-tags { gap: 8px !important; }
#hero .hero-tag {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  font-weight: 800 !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
}
#hero .hero-tag.lux-q,
#hero .hero-tag.lux,
#hero .hero-tag.q-hd,
#hero .hero-tag.q-fhd,
#hero .hero-tag.q-4k {
  color: #1a1200 !important;
  -webkit-text-fill-color: #1a1200 !important;
  border: 1px solid rgba(255, 215, 100, 0.7) !important;
  background-image: linear-gradient(110deg, #8a6a12 0%, #e8c547 28%, #fff3b0 48%, #ffd700 52%, #e8c547 72%, #8a6a12 100%) !important;
  background-size: 250% 100% !important;
  background-color: #c9a227 !important;
  animation: nhShimmer 2.4s linear infinite !important;
  box-shadow: 0 0 14px rgba(255, 200, 60, 0.4) !important;
}
#hero .hero-tag.year-fire,
#hero .hero-tag.lux-year {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border: 1px solid rgba(255, 120, 40, 0.65) !important;
  background-image: linear-gradient(110deg, #5c0000 0%, #ff2a00 30%, #ffcc66 50%, #ff2a00 70%, #5c0000 100%) !important;
  background-size: 250% 100% !important;
  background-color: #c41000 !important;
  animation: nhShimmer 2.2s linear infinite !important;
  box-shadow: 0 0 14px rgba(255, 60, 20, 0.45) !important;
}
#hero .hero-tag.lux-q::before,
#hero .hero-tag.year-fire::before,
#hero .hero-tag.lux-year::before,
#hero .hero-tag.q-hd::before,
#hero .hero-tag.q-fhd::before,
#hero .hero-tag.q-4k::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 40% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent) !important;
  animation: nhSweep 2.2s ease-in-out infinite !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
#hero .hero-tag.plain {
  color: #eef2fa !important;
  background: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
}
#hero .btn-play {
  background-image: linear-gradient(110deg, #0d9488 0%, #2ee6d6 30%, #c5fffa 50%, #2ee6d6 70%, #1e90ff 100%) !important;
  background-size: 250% 100% !important;
  animation: nhShimmer 2.6s linear infinite, heartbeat 1.4s ease-in-out infinite !important;
  overflow: hidden !important;
}
#hero .hero-dot {
  transition: width .25s ease, background .25s ease !important;
}
#hero .hero-dot.on {
  width: 22px !important;
  background: #2ee6d6 !important;
}


/* =========================================================
   18FILM — Pornhub-inspired, tách biệt phim thường
   ========================================================= */
body.x18-mode {
  background: #0b0b0b !important;
  overflow-x: hidden !important;
}
body.x18-mode .main { padding-bottom: 24px !important; }

.x18-view {
  min-height: 100vh;
  background: #0b0b0b;
  color: #f2f2f2;
  padding: 0 0 40px;
}
.x18-top {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(12,12,12,0.94);
  border-bottom: 1px solid rgba(255,144,0,0.25);
  backdrop-filter: blur(12px);
}
.x18-exit {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.15);
  color: #ccc;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 0.85rem;
}
.x18-exit:hover { border-color: #ff9000; color: #ff9000; }
.x18-brand {
  font-weight: 900;
  letter-spacing: 0.04em;
  font-size: 1.15rem;
  color: #fff;
}
.x18-plus {
  display: inline-block;
  background: #ff9000;
  color: #111;
  padding: 2px 7px;
  border-radius: 4px;
  margin-right: 4px;
  font-size: 0.85rem;
}
.x18-search-wrap { flex: 1; max-width: 360px; margin-left: auto; }
.x18-search-wrap input {
  width: 100%;
  height: 38px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: #1a1a1a;
  color: #fff;
  padding: 0 12px;
  outline: none;
}
.x18-search-wrap input:focus { border-color: #ff9000; }

.x18-hero {
  position: relative;
  height: min(42vw, 360px);
  min-height: 200px;
  overflow: hidden;
  margin-bottom: 12px;
  background: #111;
}
.x18-hero-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.45);
  transform: scale(1.05);
}
.x18-hero-body {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px 20px;
  background: linear-gradient(0deg, rgba(0,0,0,0.92) 0%, transparent 55%);
}
.x18-hero-badge {
  display: inline-block;
  width: fit-content;
  background: #ff9000;
  color: #111;
  font-weight: 800;
  font-size: 0.72rem;
  padding: 3px 8px;
  border-radius: 4px;
  margin-bottom: 8px;
}
.x18-hero-body h1 {
  margin: 0 0 6px;
  font-size: clamp(1.2rem, 3.5vw, 2rem);
  font-weight: 800;
  max-width: 28ch;
}
.x18-hero-body p { margin: 0 0 12px; color: #bbb; font-size: 0.9rem; }
.x18-hero-play {
  width: fit-content;
  background: #ff9000;
  color: #111;
  border: 0;
  font-weight: 800;
  padding: 12px 22px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.95rem;
}
.x18-hero-play:hover { filter: brightness(1.08); }

.x18-tabs {
  display: flex;
  gap: 8px;
  padding: 8px 16px 12px;
}
.x18-tab {
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,0.1);
  color: #aaa;
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.85rem;
}
.x18-tab.on {
  background: #ff9000;
  color: #111;
  border-color: #ff9000;
}

.x18-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  padding: 0 16px 20px;
}
@media (min-width: 900px) {
  .x18-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}
.x18-card {
  cursor: pointer;
  border-radius: 10px;
  overflow: hidden;
  background: #141414;
  transition: transform .2s, box-shadow .2s;
}
.x18-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(255,144,0,0.18);
}
.x18-thumb {
  position: relative;
  aspect-ratio: 16/9;
  background: #1c1c1c;
  overflow: hidden;
}
.x18-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.x18-q {
  position: absolute;
  top: 8px; left: 8px;
  background: #ff9000;
  color: #111;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
}
.x18-dur {
  position: absolute;
  bottom: 8px; right: 8px;
  background: rgba(0,0,0,0.75);
  color: #fff;
  font-size: 0.68rem;
  padding: 2px 6px;
  border-radius: 4px;
}
.x18-play-ico {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,0.35);
  color: #fff;
  font-size: 1.6rem;
  opacity: 0;
  transition: opacity .2s;
}
.x18-card:hover .x18-play-ico { opacity: 1; }
.x18-title {
  padding: 8px 10px 12px;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.x18-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 8px 16px 24px;
}
.x18-pager button {
  background: #1a1a1a;
  border: 1px solid rgba(255,144,0,0.35);
  color: #ff9000;
  width: 40px; height: 40px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.1rem;
}
.x18-loading {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px 16px;
  color: #888;
}

.x18-player-wrap {
  padding: 12px 16px 32px;
  max-width: 1100px;
  margin: 0 auto;
}
.x18-back-list {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.15);
  color: #ccc;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  margin-bottom: 12px;
}
.x18-play-title {
  margin: 0 0 12px;
  font-size: 1.15rem;
  font-weight: 800;
}
.x18-player {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,144,0,0.2);
}
.x18-player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Gate popup */
.x18-gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  backdrop-filter: blur(8px);
}
.x18-gate[hidden] { display: none !important; }
.x18-gate-card {
  width: min(520px, 100%);
  background: linear-gradient(180deg, #1a1208 0%, #0f0f0f 100%);
  border: 1px solid rgba(255,144,0,0.35);
  border-radius: 16px;
  padding: 28px 24px 22px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
}
.x18-gate-logo {
  text-align: center;
  margin-bottom: 12px;
}
.x18-gate-logo span {
  display: inline-block;
  background: #ff9000;
  color: #111;
  font-weight: 900;
  font-size: 1.4rem;
  padding: 6px 14px;
  border-radius: 8px;
}
.x18-gate-card h2 {
  text-align: center;
  margin: 0 0 14px;
  font-size: 1.25rem;
  color: #fff;
}
.x18-gate-body {
  font-size: 0.88rem;
  line-height: 1.55;
  color: #c8c8c8;
  max-height: min(42vh, 320px);
  overflow-y: auto;
  margin-bottom: 18px;
}
.x18-gate-body ul {
  margin: 10px 0;
  padding-left: 18px;
}
.x18-gate-body li { margin-bottom: 6px; }
.x18-gate-note { color: #999; font-size: 0.82rem; }
.x18-gate-actions {
  display: flex;
  gap: 10px;
}
.x18-btn-deny,
.x18-btn-agree {
  flex: 1;
  height: 46px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 0.92rem;
  cursor: pointer;
  border: 0;
}
.x18-btn-deny {
  background: #222;
  color: #ddd;
  border: 1px solid rgba(255,255,255,0.12);
}
.x18-btn-agree {
  background: #ff9000;
  color: #111;
}
.x18-btn-agree:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.x18-btn-agree:not(:disabled):hover { filter: brightness(1.08); }

@media (max-width: 640px) {
  .x18-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 0 10px; }
  .x18-hero { min-height: 180px; height: 48vw; }
  .x18-brand { font-size: 1rem; }
  .x18-search-wrap { max-width: none; flex: 1; }
}

/* 18 load boot + thumb optimize */
.x18-boot {
  position: fixed; inset: 0; z-index: 10000;
  display: none; align-items: center; justify-content: center;
  background: rgba(8,8,8,0.92); backdrop-filter: blur(6px);
}
.x18-boot.on { display: flex; }
.x18-boot-inner { text-align: center; color: #ff9000; }
.x18-boot-spin {
  width: 42px; height: 42px; margin: 0 auto 12px;
  border: 3px solid rgba(255,144,0,0.25);
  border-top-color: #ff9000; border-radius: 50%;
  animation: x18spin .7s linear infinite;
}
@keyframes x18spin { to { transform: rotate(360deg); } }
.x18-boot-txt { font-weight: 700; letter-spacing: .02em; }
.x18-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  background: #1a1a1a;
  content-visibility: auto;
}
.x18-thumb img.x18-img-fail { opacity: 0.25; }
.x18-thumb-ph {
  width: 100%; height: 100%;
  background: linear-gradient(110deg, #1a1a1a 30%, #2a2a2a 50%, #1a1a1a 70%);
  background-size: 200% 100%;
  animation: nhShimmer 1.2s linear infinite;
}
.x18-hero-bg {
  transition: background-image .35s ease;
  background-color: #151515;
}

/* 18 genres chips */
.x18-genres {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  padding: 4px 16px 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.x18-genres::-webkit-scrollbar { height: 4px; }
.x18-genres::-webkit-scrollbar-thumb { background: rgba(255,144,0,0.35); border-radius: 4px; }
.x18-genre {
  flex: 0 0 auto;
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,0.1);
  color: #bbb;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.x18-genre:hover { border-color: rgba(255,144,0,0.45); color: #ff9000; }
.x18-genre.on {
  background: #ff9000;
  color: #111;
  border-color: #ff9000;
}


/* =========================================================
   20260917: 18+ pink theme + page numbers + hero clearer
   ========================================================= */

/* --- Hero web thường: nhìn rõ poster hơn --- */
.hero-overlay,
.hero-bg::after,
.hero-slide .hero-overlay {
  background:
    linear-gradient(90deg, rgba(6,8,15,0.72) 0%, rgba(6,8,15,0.42) 32%, rgba(6,8,15,0.12) 58%, transparent 78%),
    linear-gradient(to top, rgba(6,8,15,0.78) 0%, rgba(6,8,15,0.25) 38%, transparent 62%) !important;
  opacity: 1 !important;
}
.hero-bg,
.hero-slide .hero-img,
.hero-slide img.hero-bg-img,
.hero img.hero-img {
  filter: brightness(1.12) contrast(1.05) saturate(1.08) !important;
  transform: none !important;
}
.hero-slide.on .hero-bg,
.hero-slide.on .hero-img,
.hero-slide.on img.hero-bg-img,
.hero-slide.active .hero-bg,
.hero-slide.active .hero-img {
  transform: none !important;
  transition: transform 8s linear, filter .4s ease !important;
}
.hero-body,
.hero-content {
  text-shadow: 0 2px 18px rgba(0,0,0,0.65) !important;
}
.hero-title {
  text-shadow: 0 3px 22px rgba(0,0,0,0.8), 0 1px 2px rgba(0,0,0,0.5) !important;
}

/* --- 18+ chủ đạo hồng quyến rũ --- */
:root {
  --x18: #ff4d8d;
  --x18-soft: #ff7eb3;
  --x18-deep: #c2185b;
}
.x18-top {
  border-bottom-color: rgba(255,77,141,0.35) !important;
}
.x18-exit:hover { border-color: var(--x18) !important; color: var(--x18) !important; }
.x18-plus {
  background: linear-gradient(135deg, #ff4d8d, #ff2d6f) !important;
  color: #fff !important;
}
.x18-search-wrap input:focus { border-color: var(--x18) !important; box-shadow: 0 0 0 2px rgba(255,77,141,0.2); }
.x18-hero-badge,
.x18-q {
  background: linear-gradient(135deg, #ff4d8d, #ff2d6f) !important;
  color: #fff !important;
}
.x18-hero-play,
.x18-tab.on,
.x18-genre.on,
.x18-btn-agree {
  background: linear-gradient(135deg, #ff4d8d 0%, #ff2d6f 55%, #e91e63 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 6px 20px rgba(255,45,111,0.35);
}
.x18-tab:hover,
.x18-genre:hover {
  border-color: rgba(255,77,141,0.5) !important;
  color: var(--x18-soft) !important;
}
.x18-card:hover {
  box-shadow: 0 12px 28px rgba(255,45,111,0.22) !important;
}
.x18-gate-card {
  border-color: rgba(255,77,141,0.4) !important;
  background: linear-gradient(180deg, #1a0a12 0%, #0f0a0c 100%) !important;
}
.x18-gate-logo span {
  background: linear-gradient(135deg, #ff4d8d, #ff2d6f) !important;
  color: #fff !important;
}
.x18-boot-inner { color: var(--x18) !important; }
.x18-boot-spin {
  border-color: rgba(255,77,141,0.25) !important;
  border-top-color: var(--x18) !important;
}
.x18-player {
  border-color: rgba(255,77,141,0.28) !important;
}

/* --- Pager số trang --- */
.x18-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 10px 16px 28px;
}
.x18-pager .x18-pg {
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 9px;
  border: 1px solid rgba(255,77,141,0.28);
  background: #1a1216;
  color: #ffb3d0;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.x18-pager .x18-pg:hover {
  border-color: var(--x18);
  color: #fff;
}
.x18-pager .x18-pg.on {
  background: linear-gradient(135deg, #ff4d8d, #ff2d6f);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(255,45,111,0.35);
}
.x18-pager .x18-pg.nav {
  font-size: 1.05rem;
  color: #ff4d8d;
}
.x18-pager .x18-pg.dots {
  border-style: dashed;
  color: #c77;
}


/* =========================================================
   20260917g — hero sáng hơn + màu chữ theo thể loại + ẩn x18 hero
   ========================================================= */
#hero .hero-blur-bg,
.hero .hero-blur-bg,
.hero-slide .hero-blur-bg {
  filter: brightness(1.02) contrast(1.02);
  opacity: 1 !important;
}
#hero .hero-vignette {
  background:
    radial-gradient(ellipse 90% 80% at 55% 40%, transparent 30%, rgba(6,8,15,0.35) 100%),
    linear-gradient(90deg, rgba(6,8,15,0.45) 0%, transparent 58%),
    linear-gradient(0deg, rgba(6,8,15,0.65) 0%, transparent 50%) !important;
}
#hero .hero-overlay,
.hero .hero-overlay {
  background:
    linear-gradient(180deg, rgba(6,10,18,0.28) 0%, transparent 24%),
    linear-gradient(90deg, rgba(6,8,15,0.38) 0%, transparent 55%),
    linear-gradient(0deg, rgba(6,8,15,0.55) 0%, transparent 48%) !important;
}
#hero .hero-poster,
.hero-poster-wrap img.hero-poster {
  filter: brightness(1.05) contrast(1.04) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,0.45) !important;
}

/* Tên phim — màu theo mood */
#hero .hero-title {
  text-shadow:
    0 0 28px var(--hero-glow, rgba(46,230,214,0.25)),
    0 3px 18px rgba(0,0,0,0.75),
    0 1px 2px rgba(0,0,0,0.5) !important;
}
#hero .hero-title.mood-action {
  color: #ffc46b !important;
  background: linear-gradient(90deg, #ff9a3c, #ffd08a, #ff6b3d);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(255,100,30,0.35));
}
#hero .hero-title.mood-romance {
  color: #ffc2d4 !important;
  background: linear-gradient(90deg, #ffd0dc, #ffb3c9, #f8a0b8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 12px rgba(255,150,180,0.3));
}
#hero .hero-title.mood-horror {
  color: #d4b8ff !important;
  background: linear-gradient(90deg, #c9a8ff, #e8d5ff, #a88cff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 12px rgba(120,60,200,0.35));
}
#hero .hero-title.mood-comedy {
  color: #ffe29a !important;
  background: linear-gradient(90deg, #ffe29a, #ffd060, #fff0c0);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
#hero .hero-title.mood-scifi {
  color: #7eecff !important;
  background: linear-gradient(90deg, #5ad8ff, #b8f4ff, #3ecfff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 14px rgba(40,200,255,0.35));
}
#hero .hero-title.mood-anime {
  color: #a8f0c8 !important;
  background: linear-gradient(90deg, #9aefc4, #c8ffe0, #7eddb0);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
#hero .hero-title.mood-epic {
  color: #e8d4a2 !important;
  background: linear-gradient(90deg, #e8d4a2, #f5e6c4, #c9a86c);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
#hero .hero-title.mood-crime {
  color: #9ec5ff !important;
  background: linear-gradient(90deg, #8ab4ff, #c5dbff, #6a9ef0);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

#x18Hero, .x18-hero {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* =========================================================
   20260917h — title cinematic palette + tag collision
   ========================================================= */
#hero .hero-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  min-width: 0 !important;
  max-width: min(640px, 100%) !important;
}
#hero .hero-tags {
  position: relative !important;
  z-index: 4 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  max-width: 100% !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
  line-height: 1.2 !important;
  transition: transform .2s ease !important;
}
#hero .hero-tags .hero-tag {
  flex: 0 0 auto !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
#hero .hero-title {
  position: relative !important;
  z-index: 3 !important;
  margin: 2px 0 6px !important;
  max-width: 100% !important;
  word-break: break-word !important;
  /* cinematic stroke + glow via CSS vars from JS */
  color: var(--ht, #FFD76A) !important;
  -webkit-text-fill-color: var(--ht, #FFD76A) !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  filter: none !important;
  text-shadow:
    0 0 1px var(--ho, #8A5A00),
    0 0 2px var(--ho, #8A5A00),
    1px 0 0 var(--ho, #8A5A00),
    -1px 0 0 var(--ho, #8A5A00),
    0 1px 0 var(--ho, #8A5A00),
    0 -1px 0 var(--ho, #8A5A00),
    2px 2px 0 var(--hs, #241500),
    0 4px 18px var(--hs, #241500),
    0 0 22px var(--hg, #FFD54F),
    0 0 40px color-mix(in srgb, var(--hg, #FFD54F) 45%, transparent) !important;
}
/* mood accents — highlight soft via layered shadow */
#hero .hero-title.mood-action {
  color: #FF3B30 !important;
  -webkit-text-fill-color: #FF3B30 !important;
  --ht: #FF3B30; --ho: #5A0000; --hs: #120000; --hg: #FF4D00;
}
#hero .hero-title.mood-scifi {
  color: #E8F7FF !important;
  -webkit-text-fill-color: #E8F7FF !important;
  --ht: #E8F7FF; --ho: #087EA4; --hs: #00151F; --hg: #00CFFF;
}
#hero .hero-title.mood-anime {
  color: #FFB7E1 !important;
  -webkit-text-fill-color: #FFB7E1 !important;
  --ht: #FFB7E1; --ho: #9C2C77; --hs: #2A0A1C; --hg: #FF80AB;
}
#hero .hero-title.mood-epic {
  color: #E1B7FF !important;
  -webkit-text-fill-color: #E1B7FF !important;
  --ht: #E1B7FF; --ho: #54208A; --hs: #160020; --hg: #B026FF;
}
#hero .hero-title.mood-horror {
  color: #F1F1F1 !important;
  -webkit-text-fill-color: #F1F1F1 !important;
  --ht: #F1F1F1; --ho: #151515; --hs: #000; --hg: #9E0000;
}
#hero .hero-title.mood-crime {
  color: #DDE3EA !important;
  -webkit-text-fill-color: #DDE3EA !important;
  --ht: #DDE3EA; --ho: #58616D; --hs: #0A0C10; --hg: #8AB4FF;
}
#hero .hero-title.mood-comedy {
  color: #FFE08A !important;
  -webkit-text-fill-color: #FFE08A !important;
  --ht: #FFE08A; --ho: #8C5B00; --hs: #241500; --hg: #FFD54F;
}
#hero .hero-title.mood-romance {
  color: #FFE4B5 !important;
  -webkit-text-fill-color: #FFE4B5 !important;
  --ht: #FFE4B5; --ho: #9C6B30; --hs: #2A1A08; --hg: #FFB7E1;
}
#hero .hero-title.mood-cinema {
  color: #FFD76A !important;
  -webkit-text-fill-color: #FFD76A !important;
  --ht: #FFD76A; --ho: #8A5A00; --hs: #241500; --hg: #FFD54F;
}

/* ===== Admin site notice popup (TOPHIM-style) ===== */

.nh-notice {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(4, 10, 22, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.nh-notice.out { opacity: 0; transition: opacity .25s; }
.nh-notice-card {
  position: relative;
  width: min(560px, 96vw);
  max-height: min(88vh, 720px);
  overflow: auto;
  border-radius: 22px;
  padding: 22px 24px 20px;
  background:
    linear-gradient(165deg, rgba(20, 40, 78, 0.98) 0%, rgba(8, 14, 28, 0.98) 55%, rgba(6, 10, 20, 0.99) 100%);
  border: 1px solid rgba(46, 160, 255, 0.35);
  box-shadow:
    0 0 0 1px rgba(46, 160, 255, 0.08),
    0 24px 64px rgba(0, 40, 120, 0.45),
    0 0 40px rgba(30, 120, 255, 0.12);
  color: #eef4ff;
  font-family: 'Outfit', system-ui, sans-serif;
}
.nh-notice-x {
  position: absolute;
  top: 12px; right: 14px;
  width: 36px; height: 36px;
  border: 0; border-radius: 10px;
  background: rgba(255,255,255,0.06);
  color: #9eb0cc;
  font-size: 1.35rem;
  cursor: pointer;
  line-height: 1;
}
.nh-notice-x:hover { color: #fff; background: rgba(46,160,255,0.2); }
.nh-notice-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  padding-right: 36px;
}
.nh-notice-gif {
  width: 72px; height: 72px;
  object-fit: contain;
  border-radius: 12px;
  flex-shrink: 0;
}
.nh-notice-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: 0.02em;
  color: #f0f6ff;
}
.nh-notice-logo-img {
  width: 40px; height: 40px;
  border-radius: 10px;
  object-fit: contain;
  background: rgba(46,160,255,0.12);
  border: 1px solid rgba(46,160,255,0.25);
}
.nh-notice-name {
  font-weight: 800;
  background: linear-gradient(90deg, #7ec8ff, #2e90ff 50%, #5eb0ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 12px rgba(46,160,255,0.35));
}
.nh-notice-body {
  font-size: 0.98rem;
  line-height: 1.65;
  font-weight: 600;
  color: #d7e4f7;
  margin-bottom: 18px;
}
.nh-notice-body p { margin: 0 0 12px; font-weight: 600; }
.nh-notice-link {
  color: #5eb8ff;
  font-weight: 800;
  text-decoration: none;
}
.nh-notice-link:hover { text-decoration: underline; color: #9ad4ff; }
.nh-notice-foot { display: flex; justify-content: center; }
.nh-notice-ok {
  min-width: 160px;
  height: 46px;
  padding: 0 22px;
  border: 0;
  border-radius: 14px;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, #3aa0ff 0%, #1a6dff 50%, #0d5ae6 100%);
  box-shadow: 0 8px 28px rgba(26, 109, 255, 0.45);
  transition: filter .15s, transform .15s;
}
.nh-notice-ok:disabled {
  opacity: 0.55; cursor: not-allowed;
  filter: grayscale(0.2);
}
.nh-notice-ok:not(:disabled):hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
@media (max-width: 480px) {
  .nh-notice-card { width: 94vw; padding: 18px 16px 16px; border-radius: 18px; }
  .nh-notice-body { font-size: 0.92rem; }
  .nh-notice-brand { font-size: 1.05rem; }
}

/* =========================================================
   20260917 — 18+ UI modern responsive + fix exit
   ========================================================= */
html.x18-mode, body.x18-mode {
  background: #0a0a0c !important;
  overflow-x: hidden !important;
}
html.x18-mode #header,
html.x18-mode #bottomNav,
html.x18-mode #homeView,
html.x18-mode #listView,
html.x18-mode #detailView,
html.x18-mode #hero,
body.x18-mode #header,
body.x18-mode #bottomNav,
body.x18-mode #homeView,
body.x18-mode #listView,
body.x18-mode #detailView,
body.x18-mode #hero {
  display: none !important;
}

.x18-view {
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(255,45,111,0.18), transparent 55%),
    radial-gradient(ellipse 60% 40% at 100% 50%, rgba(180,40,120,0.08), transparent 50%),
    #0a0a0c;
  color: #f2f2f5;
  padding: 0 0 calc(28px + env(safe-area-inset-bottom, 0px));
}
.x18-top {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  padding-top: max(10px, env(safe-area-inset-top, 0px));
  background: rgba(12,10,14,0.88);
  border-bottom: 1px solid rgba(255,77,141,0.22);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}
.x18-exit {
  flex: 0 0 auto;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: #ddd;
  border-radius: 10px;
  padding: 9px 12px;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  transition: border-color .15s, color .15s, background .15s;
}
.x18-exit:hover, .x18-exit:active {
  border-color: #ff4d8d;
  color: #ff7eb3;
  background: rgba(255,77,141,0.1);
}
.x18-brand {
  font-weight: 900;
  letter-spacing: 0.04em;
  font-size: clamp(0.95rem, 2.8vw, 1.15rem);
  color: #fff;
  white-space: nowrap;
}
.x18-plus {
  display: inline-block;
  background: linear-gradient(135deg, #ff4d8d, #ff2d6f);
  color: #fff;
  padding: 2px 7px;
  border-radius: 6px;
  margin-right: 4px;
  font-size: 0.78rem;
  box-shadow: 0 4px 12px rgba(255,45,111,0.35);
}
.x18-search-wrap {
  flex: 1;
  min-width: 0;
  max-width: 420px;
  margin-left: auto;
}
.x18-search-wrap input {
  width: 100%;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.06);
  color: #fff;
  padding: 0 14px;
  outline: none;
  font-size: 0.9rem;
  transition: border-color .15s, box-shadow .15s;
}
.x18-search-wrap input:focus {
  border-color: #ff4d8d;
  box-shadow: 0 0 0 3px rgba(255,77,141,0.18);
}
.x18-search-wrap input::placeholder { color: #777; }

.x18-tabs {
  display: flex;
  gap: 8px;
  padding: 12px 14px 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.x18-tabs::-webkit-scrollbar { display: none; }
.x18-tab {
  flex: 0 0 auto;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: #aaa;
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.82rem;
  transition: all .15s;
}
.x18-tab.on {
  background: linear-gradient(135deg, #ff4d8d, #ff2d6f);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 18px rgba(255,45,111,0.3);
}

.x18-genres {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  padding: 8px 14px 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.x18-genre {
  flex: 0 0 auto;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: #bbb;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
}
.x18-genre.on {
  background: rgba(255,77,141,0.18);
  color: #ffb3d0;
  border-color: rgba(255,77,141,0.45);
}

.x18-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 0 12px 16px;
}
@media (min-width: 560px) {
  .x18-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 0 16px 20px; }
}
@media (min-width: 900px) {
  .x18-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; max-width: 1200px; margin: 0 auto; }
}
@media (min-width: 1200px) {
  .x18-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.x18-card {
  cursor: pointer;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s, border-color .2s;
  -webkit-tap-highlight-color: transparent;
}
.x18-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,77,141,0.35);
  box-shadow: 0 16px 36px rgba(255,45,111,0.2);
}
.x18-card:active { transform: scale(0.98); }
.x18-thumb {
  position: relative;
  aspect-ratio: 16/9;
  background: #16161a;
  overflow: hidden;
}
.x18-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.x18-card:hover .x18-thumb img { transform: scale(1.05); }
.x18-q {
  position: absolute; top: 8px; left: 8px;
  background: linear-gradient(135deg, #ff4d8d, #ff2d6f);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 3px 7px;
  border-radius: 6px;
  letter-spacing: 0.02em;
}
.x18-dur {
  position: absolute; bottom: 8px; right: 8px;
  background: rgba(0,0,0,0.72);
  color: #fff;
  font-size: 0.65rem;
  padding: 3px 7px;
  border-radius: 6px;
  backdrop-filter: blur(4px);
}
.x18-play-ico {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(0,0,0,0.35);
  color: #fff;
  font-size: 1.5rem;
  opacity: 0;
  transition: opacity .2s;
}
.x18-card:hover .x18-play-ico { opacity: 1; }
@media (hover: none) {
  .x18-play-ico { opacity: 0; }
  .x18-card:hover { transform: none; }
}
.x18-title {
  padding: 9px 10px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #e8e8ec;
}

.x18-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 8px 12px 28px;
}
.x18-pager .x18-pg {
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,77,141,0.25);
  background: rgba(255,255,255,0.04);
  color: #ffb3d0;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
}
.x18-pager .x18-pg.on {
  background: linear-gradient(135deg, #ff4d8d, #ff2d6f);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(255,45,111,0.35);
}

.x18-player-wrap {
  padding: 12px 14px 32px;
  max-width: 1100px;
  margin: 0 auto;
}
.x18-player {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,77,141,0.22);
  box-shadow: 0 20px 50px rgba(0,0,0,0.45);
}
.x18-player iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%; border: 0;
}
.x18-back-list {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: #ccc;
  border-radius: 10px;
  padding: 9px 14px;
  cursor: pointer;
  margin-bottom: 12px;
  font-weight: 600;
}
.x18-play-title {
  margin: 0 0 12px;
  font-size: clamp(1rem, 3vw, 1.2rem);
  font-weight: 800;
  line-height: 1.3;
}

.x18-gate-card {
  border-radius: 20px !important;
  border-color: rgba(255,77,141,0.4) !important;
  background: linear-gradient(180deg, #1c1016 0%, #0e0a0c 100%) !important;
  box-shadow: 0 28px 70px rgba(0,0,0,0.6) !important;
}
.x18-btn-agree {
  background: linear-gradient(135deg, #ff4d8d, #ff2d6f) !important;
  color: #fff !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(255,45,111,0.35);
}

@media (max-width: 480px) {
  .x18-top { gap: 8px; padding: 8px 10px; }
  .x18-brand { font-size: 0.9rem; }
  .x18-search-wrap input { height: 36px; font-size: 0.85rem; }
  .x18-title { font-size: 0.74rem; padding: 7px 8px 10px; }
  .x18-grid { gap: 8px; padding: 0 8px 14px; }
}


/* ===== Member area (header, independent of hero glass) ===== */
.member-area {
  position: relative;
  flex: 0 0 auto;
  margin-left: 8px;
  z-index: 40;
}
.member-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.92);
  color: #0e1726;
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background .18s, transform .18s, box-shadow .18s, border-color .18s;
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
  -webkit-tap-highlight-color: transparent;
}
.member-btn:hover {
  background: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(26,109,255,0.18);
  border-color: rgba(46,144,255,0.45);
}
.member-btn.is-user {
  background: rgba(255,255,255,0.95);
  border-color: rgba(46,144,255,0.4);
}
.member-ico {
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(26,109,255,0.12);
  color: #1a6dff;
}
.member-label {
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.member-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 180px;
  padding: 8px;
  border-radius: 14px;
  background: rgba(12, 18, 32, 0.96);
  border: 1px solid rgba(46,160,255,0.25);
  box-shadow: 0 16px 40px rgba(0,0,0,0.4);
  backdrop-filter: blur(12px);
  z-index: 80;
  animation: memberMenuIn .18s ease;
}
@keyframes memberMenuIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
.member-menu-name {
  padding: 8px 10px 6px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #8b9bb8;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 4px;
  display: none;
}
.member-menu-name.on { display: block; }
.member-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #e8eef8;
  font-weight: 600;
  font-size: 0.88rem;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
}
.member-menu-item:hover {
  background: rgba(46,144,255,0.15);
  color: #fff;
}
/* Header layout: keep member outside hero transparency quirks */
.header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.header .nav-tabs { flex: 1 1 auto; min-width: 0; }
@media (max-width: 720px) {
  .member-label { max-width: 72px; font-size: 0.78rem; }
  .member-btn { height: 34px; padding: 0 10px 0 8px; }
}
@media (max-width: 420px) {
  .member-label { display: none; }
  .member-btn { padding: 0 8px; width: 36px; justify-content: center; }
}


/* Member always visible — not tied to .nav-tabs mobile hide */
.header .member-area {
  display: flex !important;
  align-items: center;
  flex: 0 0 auto;
  margin-left: auto;
  order: 5;
  z-index: 60;
  position: relative;
}
.header .member-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px 0 10px;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,0.5) !important;
  background: rgba(255,255,255,0.95) !important;
  color: #0e1726 !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
  white-space: nowrap;
}
.header.scrolled .member-btn,
.header .member-btn {
  background: rgba(255,255,255,0.95) !important;
  color: #0e1726 !important;
}
.header .member-ico {
  display: grid !important;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(26,109,255,0.14);
  color: #1a6dff !important;
}
@media (max-width: 720px) {
  .header .member-area { margin-left: 6px; }
  .header .member-label { font-size: 0.75rem; max-width: 64px; }
}
@media (max-width: 380px) {
  .header .member-label { display: none; }
  .header .member-btn { width: 36px; padding: 0; justify-content: center; }
}


/* ===== Member pill — giống ảnh mẫu ===== */
.header .member-btn,
.member-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 40px !important;
  padding: 0 18px 0 14px !important;
  border-radius: 999px !important;
  border: none !important;
  background: #eef1f6 !important;
  color: #1a1f2c !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, 0 4px 14px rgba(0,20,60,0.12) !important;
  cursor: pointer;
}
.header .member-btn:hover {
  background: #f5f7fb !important;
  transform: translateY(-1px);
}
.header .member-ico {
  background: transparent !important;
  color: #1a1f2c !important;
  width: 20px !important;
  height: 20px !important;
}
.header .member-label {
  color: #1a1f2c !important;
  font-weight: 600 !important;
}

/* Desktop: ẩn bottom nav */
@media (min-width: 901px) {
  #bottomNav.bottom-nav { display: none !important; }
}

/* =========================================================
   MOBILE BOTTOM NAV — pill bo tròn, khuyết mềm, USER lơ lửng
   Guest: trắng. Login: xanh + glow. Ẩn khi xem phim.
   ========================================================= */
@media (max-width: 900px) {
  .header .member-area { display: none !important; }

  #bottomNav.bottom-nav,
  .bottom-nav {
    display: block !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    z-index: 90;
    height: calc(100px + env(safe-area-inset-bottom, 0px));
    margin: 0 !important;
    padding: 0 12px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    opacity: 1;
    transform: translateY(0);
    transition: transform 0.48s cubic-bezier(0.33, 1, 0.32, 1), opacity 0.42s ease;
    pointer-events: none;
    border-radius: 0 !important;
  }

  #bottomNav.bottom-nav.bn-hidden {
    transform: translate3d(0, calc(100% + 28px), 0) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  body.mode-detail #bottomNav.bottom-nav {
    display: none !important;
    pointer-events: none !important;
  }

  #bottomNav .bn-shape { display: none !important; }

  /* Thanh pill bo tròn + khuyết cung giữa */
  #bottomNav .bn-bar {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    height: 58px;
    display: grid;
    grid-template-columns: 1fr 1fr 64px 1fr 1fr;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 6px 8px 8px;
    background: #0e121c !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 28px !important;
    box-shadow:
      0 10px 32px rgba(0,0,0,0.45),
      0 0 0 1px rgba(255,255,255,0.03) inset !important;
    /* khuyết mềm — lỗ lớn hơn vòng USER để có khoảng hở */
    /* Khoét vừa hơn vòng tròn (~56px) — chỉ rộng hơn một chút */
    -webkit-mask-image: radial-gradient(circle 30px at 50% 0, transparent 28.5px, #000 30px);
    mask-image: radial-gradient(circle 30px at 50% 0, transparent 28.5px, #000 30px);
    pointer-events: auto;
    opacity: 1 !important;
  }
  #bottomNav .bn-bar::before,
  #bottomNav .bn-bar::after,
  #bottomNav::before,
  #bottomNav::after {
    content: none !important;
    display: none !important;
  }

  #bottomNav .bn-center-space {
    width: 64px;
    height: 1px;
    pointer-events: none;
  }

  #bottomNav .bn-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: 0;
    background: transparent;
    color: rgba(238, 241, 247, 0.55);
    font-family: inherit;
    font-size: 0.62rem;
    font-weight: 650;
    padding: 6px 2px;
    min-height: 46px;
    border-radius: 14px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    pointer-events: auto;
    transition: color 0.2s ease, background 0.2s ease;
  }
  #bottomNav .bn-item:active {
    background: rgba(255,255,255,0.04);
  }
  #bottomNav .bn-item .bn-ico {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
  }
  #bottomNav .bn-item .bn-txt {
    line-height: 1.1;
    white-space: nowrap;
  }
  #bottomNav .bn-item.on {
    color: #8ec5ff;
  }

  /* USER / HOME — lơ lửng trong khuyết, không dính thanh */
  #bottomNav .bn-user {
    position: absolute;
    left: 50%;
    /* Lơ lửng: đáy vòng cao hơn mép thanh + khuyết */
    bottom: calc(40px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 0;
    background: #ffffff;
    color: #111827;
    display: grid;
    place-items: center;
    padding: 0;
    cursor: pointer;
    z-index: 95;
    pointer-events: auto !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.4);
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.18s ease, background 0.25s ease, box-shadow 0.25s ease;
  }
  #bottomNav .bn-user:active {
    transform: translateX(-50%) scale(0.94);
  }
  /* Đã login trên trang chủ: vẫn icon user, vòng trắng/xanh nhẹ — không phải nút nhà */
  #bottomNav .bn-user.is-auth:not(.is-home-btn) {
    background: #ffffff;
    color: #1a5fd4;
    box-shadow: 0 6px 18px rgba(0,0,0,0.35), 0 0 0 2px rgba(59, 142, 255, 0.35);
    animation: none;
  }
  /* Ngoài trang chủ: nút nhà xanh + glow */
  #bottomNav .bn-user.is-home-btn {
    background: linear-gradient(155deg, #6eb6ff 0%, #3b8eff 42%, #1a6dff 100%);
    color: #fff;
    box-shadow:
      0 0 18px 4px rgba(59, 142, 255, 0.55),
      0 0 36px 10px rgba(26, 109, 255, 0.28),
      0 8px 22px rgba(26, 95, 212, 0.45);
    animation: bnHomeGlow 2.8s ease-in-out infinite;
  }
  @keyframes bnHomeGlow {
    0%, 100% {
      box-shadow:
        0 0 16px 3px rgba(59, 142, 255, 0.45),
        0 0 28px 8px rgba(26, 109, 255, 0.2),
        0 8px 20px rgba(26, 95, 212, 0.4);
    }
    50% {
      box-shadow:
        0 0 24px 6px rgba(94, 168, 255, 0.65),
        0 0 42px 14px rgba(59, 142, 255, 0.32),
        0 10px 26px rgba(26, 95, 212, 0.5);
    }
  }
  #bottomNav .bn-user-face {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
  }
  #bottomNav .bn-user-face svg {
    width: 22px;
    height: 22px;
  }

  body:not(.x18-mode):not(.mode-detail) .main {
    padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body.mode-detail .main {
    padding-bottom: 12px !important;
  }
}

/* Desktop member pill — icon đen đặc như mẫu */
.header .member-btn {
  background: #eef1f6 !important;
  color: #111827 !important;
}
.header .member-ico {
  background: transparent !important;
  color: #111827 !important;
}
.header .member-ico svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}



/* Tiếp tục xem */
.rail-continue { margin: 8px 0 18px; }
.rail-continue .rail-head h2 { color: #9ec9ff; }
.wh-card {
  position: relative;
  width: 128px;
  flex: 0 0 auto;
  cursor: pointer;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  padding: 0;
}
.wh-card .wh-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 2/3;
  border-radius: 12px;
  overflow: hidden;
  background: #121826;
}
.wh-card .wh-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.wh-card .wh-prog {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; background: rgba(255,255,255,0.15);
}
.wh-card .wh-prog > i {
  display: block; height: 100%;
  background: linear-gradient(90deg, #3b8eff, #6eb6ff);
  border-radius: 0 2px 2px 0;
}
.wh-card .wh-title {
  margin-top: 6px;
  font-size: 0.78rem; font-weight: 650;
  line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.wh-card .wh-ep {
  font-size: 0.7rem; color: var(--muted);
  margin-top: 2px;
}
@media (max-width: 900px) {
  .wh-card { width: 112px; }
}


/* BN center icon slide */
#bottomNav .bn-user-face {
  transition: transform 0.18s ease, opacity 0.18s ease;
}
#bottomNav .bn-user-face.bn-slide-out {
  transform: translateX(12px);
  opacity: 0;
}
#bottomNav .bn-user-face.bn-slide-in {
  animation: bnSlideIn 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes bnSlideIn {
  from { transform: translateX(-14px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
#bottomNav .bn-user.is-home-btn {
  background: linear-gradient(155deg, #6eb6ff 0%, #3b8eff 42%, #1a6dff 100%);
  color: #fff;
  box-shadow:
    0 0 18px 4px rgba(59, 142, 255, 0.45),
    0 8px 20px rgba(26, 95, 212, 0.35);
}

/* Continue watch — dùng card chuẩn */
.rail-continue .rail-scroll.cards-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
}
.rail-continue .card {
  width: 132px;
  flex: 0 0 auto;
}
.rail-continue .card .card-poster {
  position: relative;
}
.rail-continue .wh-prog {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: rgba(255,255,255,0.18);
  z-index: 4;
}
.rail-continue .wh-prog > i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #3b8eff, #8ec5ff);
}


@media (max-width: 900px) {
  .rail-continue .card { width: 118px; }
}

/* Tiếp tục xem: chip tập mẫu gốc, dưới thumbnail */
.rail-continue .card-foot {
  padding-top: 6px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.rail-continue .wh-ep-chip {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.65);
  color: #eef1f7;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  line-height: 1.2;
  letter-spacing: 0.02em;
  margin: 0;
  position: static !important;
  left: auto !important;
  bottom: auto !important;
  z-index: auto !important;
}

/* Desktop member menu — gọn, chỉ @user + Đăng xuất khi đã login */
.member-menu {
  min-width: 160px;
  padding: 8px;
  border-radius: 14px;
  background: #121826;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 12px 40px rgba(0,0,0,0.45);
}
.member-menu-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: #8ec5ff;
  padding: 8px 10px 6px;
}
.member-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 600;
  font-size: 0.88rem;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
}
.member-menu-item:hover {
  background: rgba(255,255,255,0.06);
}
#memberLogout {
  color: #ff8a9a;
}

/* Mobile user sheet — @user + Đăng xuất */
.bn-user-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 120;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 16px calc(110px + env(safe-area-inset-bottom, 0px));
  background: rgba(0,0,0,0.35);
  pointer-events: auto;
}
.bn-user-sheet[hidden] {
  display: none !important;
}
.bn-user-sheet-card {
  width: 100%;
  max-width: 320px;
  background: #121826;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.5);
  animation: bnSheetIn 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes bnSheetIn {
  from { transform: translateY(12px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.bn-user-sheet-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: #8ec5ff;
  padding: 6px 8px 12px;
  text-align: center;
}
.bn-user-sheet-logout {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 12px;
  padding: 12px 14px;
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  background: rgba(244, 63, 94, 0.12);
  color: #ff8a9a;
  -webkit-tap-highlight-color: transparent;
}
.bn-user-sheet-logout:active {
  background: rgba(244, 63, 94, 0.2);
}

#bottomNav .bn-user,
#bottomNav .bn-user-face {
  pointer-events: auto !important;
  cursor: pointer !important;
  z-index: 95 !important;
}
#bottomNav.bottom-nav {
  pointer-events: none;
}
#bottomNav .bn-bar,
#bottomNav .bn-item,
#bottomNav .bn-user {
  pointer-events: auto !important;
}

/* Player error — blur nền + gif trái + chữ phải */
.player-err {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  height: 100%;
  width: 100%;
  padding: 20px 18px;
  border-radius: 14px;
  overflow: hidden;
  background: #070b12;
  box-sizing: border-box;
}
.player-err-bg {
  position: absolute;
  inset: -12%;
  background-size: cover;
  background-position: center;
  filter: blur(28px) saturate(1.1) brightness(0.35);
  transform: scale(1.08);
  z-index: 0;
  pointer-events: none;
}
.player-err-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(6,10,18,0.55) 0%, rgba(6,10,18,0.35) 50%, rgba(6,10,18,0.55) 100%);
}
.player-err-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  width: 100%;
  max-width: 720px;
  padding: 8px;
  box-sizing: border-box;
}
.player-err-left {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.player-err-gif {
  width: min(200px, 36vw);
  max-width: 220px;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.45);
  background: rgba(0,0,0,0.25);
}
.player-err-right {
  flex: 1 1 auto;
  min-width: 0;
  color: #fff;
}
.player-err-title {
  font-size: clamp(1.15rem, 2.4vw, 1.55rem);
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 12px;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 14px rgba(0,0,0,0.4);
}
.player-err-steps {
  margin: 0;
  padding-left: 1.2em;
  color: rgba(238,241,247,0.92);
  font-size: 0.92rem;
  line-height: 1.65;
}
.player-err-steps li {
  margin-bottom: 6px;
}
.player-err-contact {
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  color: #2ee6d6;
  font-weight: 700;
  font-size: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.player-err-contact:hover {
  color: #7af0e6;
}
@media (max-width: 640px) {
  .player-err-inner {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }
  .player-err-steps {
    text-align: left;
    padding-left: 1.15em;
  }
  .player-err-gif {
    width: min(160px, 48vw);
  }
}

/* Overlay loading khi vào xem phim */
.detail-load-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(5, 8, 15, 0.55);
  pointer-events: all;
}
.detail-load-overlay.on {
  display: flex !important;
}
.detail-load-overlay .spinner,
.detail-load-spin {
  width: 42px;
  height: 42px;
  border: 3px solid rgba(255,255,255,0.15);
  border-top-color: #5b9dff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.detail-load-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.detail-load-card { display: none !important; }
.detail-load-txt {
  display: block !important;
  color: rgba(255,255,255,0.72);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: center;
  margin: 0;
  user-select: none;
}

/* 404 — căn giữa viewport, không lệch */
.nf-view {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 80;
  align-items: center;
  justify-content: center;
  padding: calc(var(--header-h, 72px) + 16px) 16px 32px;
  background: var(--void, #06080f);
  box-sizing: border-box;
}
.nf-view:not([hidden]) {
  display: flex !important;
}
.nf-inner {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nf-card {
  width: 100%;
  text-align: center;
  background: rgba(22, 28, 42, 0.92);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 28px 22px 24px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.45);
}
.nf-gif {
  width: 160px;
  height: auto;
  max-width: 72vw;
  border-radius: 14px;
  margin: 0 auto 16px;
  display: block;
  object-fit: contain;
  background: #0b1020;
}
.nf-card h2 {
  font-size: 1.2rem;
  font-weight: 800;
  margin: 0 0 8px;
  color: var(--text, #eef1f7);
}
.nf-card p {
  color: var(--muted, #8b95a8);
  margin: 0 0 18px;
  font-size: 0.92rem;
  line-height: 1.45;
}
.nf-home {
  border: 0;
  border-radius: 12px;
  padding: 12px 22px;
  font-weight: 700;
  cursor: pointer;
  background: linear-gradient(120deg, #3b8eff, #2ee6d6);
  color: #041210;
  font-size: 0.95rem;
}
.nf-home:hover { filter: brightness(1.06); }

/* Poster gallery — ngang cinematic, ngay dưới cast */
.poster-gallery {
  margin: 12px 0 8px;
  width: 100%;
  grid-column: 1 / -1;
}
.poster-gallery[hidden] { display: none !important; }
.pg-wrap {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: transparent;
}
.pg-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 2px 4px 6px;
  scrollbar-width: none;
}
.pg-track::-webkit-scrollbar { display: none; }
.pg-item {
  flex: 0 0 auto;
  scroll-snap-align: start;
  border: 0;
  padding: 0;
  background: #0b0f18;
  border-radius: 14px;
  overflow: hidden;
  cursor: zoom-in;
  width: min(88vw, 720px);
  max-width: 760px;
  height: auto;
  aspect-ratio: auto;
  display: block;
  box-shadow: 0 10px 28px rgba(0,0,0,0.4);
}
.pg-item.is-portrait {
  width: min(28vw, 160px);
  aspect-ratio: 2 / 3;
}
.pg-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.4);
}
.pg-item img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center center;
  vertical-align: top;
}
.pg-item.is-landscape img {
  object-fit: cover; /* ảnh ngang phủ khung 16:9 đẹp như mẫu */
}
.pg-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: rgba(20, 24, 34, 0.82);
  color: #fff;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 2;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background .2s, transform .2s;
}
.pg-arrow:hover {
  background: rgba(46, 230, 214, 0.85);
  color: #041210;
}
.pg-prev { left: 8px; }
.pg-next { right: 8px; }
.pg-arrow:disabled {
  opacity: 0.25;
  pointer-events: none;
}
@media (max-width: 640px) {
  .pg-item { width: min(78vw, 280px); border-radius: 14px; }
  .pg-item.is-portrait { width: min(42vw, 140px); }
  .pg-arrow { width: 34px; height: 34px; font-size: 1.15rem; }
}

@media (max-width: 640px) {
  .pg-item { width: 96px; }
  .pg-item img { height: 140px; }
  .nf-view { padding-top: calc(var(--header-h, 64px) + 12px); }
}


/* Site footer */
.site-footer {
  margin-top: 48px;
  padding: 28px 20px 120px;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: #070b12;
}
.sf-top {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}
.sf-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 650;
}
.sf-pill-vn {
  background: linear-gradient(90deg, #c8102e, #a00d24);
  color: #fff;
}
.sf-pill-count {
  background: rgba(255,255,255,0.06);
  color: #c8d0dc;
  border: 1px solid rgba(255,255,255,0.08);
}
.sf-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
}
.sf-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.sf-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sf-logo {
  height: 36px;
  width: auto;
}
.sf-name {
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: 0.02em;
}
.sf-social {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sf-ico {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 0;
  background: rgba(255,255,255,0.08);
  color: #eef1f7;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.sf-ico:hover { background: rgba(59,142,255,0.25); }
.sf-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
  margin-bottom: 14px;
}
.sf-links a {
  color: #c8d0dc;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
}
.sf-links a:hover { color: #8ec5ff; }
.sf-about {
  color: #7a8499;
  font-size: 0.85rem;
  line-height: 1.55;
  max-width: 820px;
  margin-bottom: 18px;
}
.sf-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.06);
  color: #6b7385;
  font-size: 0.82rem;
}
.sf-bottom b { color: #f5b942; }
.sf-maint {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.55);
  padding: 16px;
}
.sf-maint[hidden] { display: none !important; }
.sf-maint-card {
  background: #121826;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 22px 20px;
  max-width: 340px;
  width: 100%;
  text-align: center;
}
.sf-maint-title { font-weight: 800; font-size: 1.1rem; margin-bottom: 8px; }
.sf-maint-card p { color: var(--muted); font-size: 0.9rem; margin-bottom: 16px; }
.sf-maint-ok {
  border: 0; border-radius: 12px; padding: 11px 18px;
  font-weight: 700; cursor: pointer;
  background: linear-gradient(120deg, #3b8eff, #2ee6d6);
  color: #041210;
}
body.mode-detail .site-footer { display: none; }
@media (max-width: 900px) {
  .site-footer { padding-bottom: 130px; }
  .sf-main { flex-direction: column; align-items: flex-start; }
}

/* Footer luôn hiện ở cuối trang chủ */
body.mode-home #siteFooter.site-footer,
#homeView #siteFooter.site-footer,
.site-footer#siteFooter {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 4 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 40px !important;
  margin-bottom: 0 !important;
  padding: 32px 16px 140px !important;
  background: #080c14 !important;
  border-top: 1px solid rgba(255,255,255,0.12) !important;
  clear: both !important;
}
body.mode-detail #siteFooter,
body.mode-404 #siteFooter {
  display: none !important;
}
/* List / search: vẫn hiện footer — chuyển ra main nếu home ẩn */
body.mode-list #siteFooter,
body.mode-search #siteFooter {
  display: block !important;
}

footer.footer,
.footer:not(.site-footer) {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 0 !important;
}
#siteFooter,
footer.site-footer {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 6 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin-top: 48px !important;
  padding: 32px 16px 160px !important;
  background: #070b12 !important;
  border-top: 1px solid rgba(255,255,255,0.14) !important;
  color: #eef1f7 !important;
}
#siteFooter .sf-name {
  font-size: 1.5rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
  color: #fff !important;
}
#siteFooter .sf-links a {
  display: inline-block !important;
  color: #c8d0dc !important;
}
#siteFooter .sf-ico {
  display: grid !important;
}

.sf-pill-vn {
  background: linear-gradient(90deg, #5c0000 0%, #8b0000 40%, #6b0000 100%) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 80, 80, 0.35);
  gap: 10px !important;
}
.sf-heart {
  color: #ff1744 !important;
  font-size: 1em;
  filter: drop-shadow(0 0 4px rgba(255, 23, 68, 0.5));
}
.sf-vn-flag {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #da251d;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2), 0 0 0 1px rgba(255,255,255,0.15);
}
.sf-vn-star {
  color: #ff0 !important;
  font-size: 11px;
  line-height: 1;
  transform: translateY(-0.5px);
}
.sf-ico svg {
  display: block;
  width: 18px;
  height: 18px;
}
.sf-ico {
  font-size: 0 !important;
}

body.mode-404 #homeView,
body.mode-404 #listView,
body.mode-404 #detailView,
body.mode-404 #x18View { display: none !important; visibility: hidden !important; }
body.mode-404 .site-footer,
body.mode-404 #siteFooter { display: none !important; }
body.mode-404 #bottomNav { display: none !important; }
body.mode-404 #header,
html.pre-404 #header {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
body.mode-404 #memberArea,
body.mode-404 .member-area { display: none !important; }
body.mode-404 #spcCtxMenu { display: none !important; }


.pg-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(0,0,0,0.88);
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.pg-lightbox.on { display: flex; }
.pg-lightbox img {
  max-width: min(92vw, 720px);
  max-height: 86vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.5);
}
.pg-lb-close {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
}

.detail-top {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.detail-hero-row + .poster-gallery {
  order: 0;
}

.detail-badges .badge,
.detail-info .badge {
  font-size: 0.82rem !important;
  padding: 5px 10px !important;
}
.detail-meta {
  font-size: 1.02rem !important;
}
@media (max-width: 640px) {
  .detail-content { font-size: 0.98rem !important; }
  .detail-meta { font-size: 0.95rem !important; }
}

/* ===== VIP custom player — UI tối giản hiện đại ===== */
.player-box video::-webkit-media-controls,
.player-box video::-webkit-media-controls-enclosure,
.player-box video::-webkit-media-controls-panel,
.player-box video::-webkit-media-controls-start-playback-button,
.vp-shell video::-webkit-media-controls,
.vp-shell video::-webkit-media-controls-enclosure,
.vp-shell video::-webkit-media-controls-panel {
  display: none !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}
.vp-shell {
  position: absolute;
  inset: 0;
  background: #000;
  user-select: none;
  -webkit-user-select: none;
}
.vp-shell video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  display: block;
  pointer-events: none;
}
.vp-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.25) 0%,
    transparent 20%,
    transparent 55%,
    rgba(0,0,0,.55) 82%,
    rgba(0,0,0,.82) 100%
  );
  opacity: 0;
  transition: opacity .22s ease;
  pointer-events: none;
  z-index: 6;
}
.vp-shell:hover .vp-overlay,
.vp-shell.show-ui .vp-overlay,
.vp-shell.paused .vp-overlay {
  opacity: 1;
  pointer-events: auto;
}

/* Nút phát giữa — hình tròn */
.vp-center {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 68px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 82, 255, 0.92);
  color: #fff;
  box-shadow: 0 8px 28px rgba(0, 40, 120, 0.45);
  cursor: pointer;
  display: grid;
  place-items: center;
  pointer-events: auto;
  transition: transform .18s ease, background .18s ease, opacity .2s ease;
}
.vp-center svg {
  width: 26px;
  height: 26px;
  fill: currentColor;
  margin-left: 2px;
}
.vp-center:hover {
  background: #1a66ff;
  transform: translate(-50%, -50%) scale(1.05);
}
.vp-shell:not(.paused) .vp-center {
  opacity: 0;
  pointer-events: none;
}
.vp-shell.paused .vp-center {
  opacity: 1;
  pointer-events: auto;
}

.vp-dock {
  padding: 0 14px 12px;
  pointer-events: auto;
}

/* Thanh tua: xanh = đã xem, trắng = chưa xem */
.vp-seek {
  position: relative;
  height: 18px;
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-bottom: 6px;
  touch-action: none;
}
.vp-seek-track {
  position: relative;
  width: 100%;
  height: 4px;
  border-radius: 99px;
  background: rgba(255,255,255,0.85);
  overflow: hidden;
  transition: height .12s ease;
}
.vp-seek:hover .vp-seek-track,
.vp-seek.drag .vp-seek-track { height: 6px; }
.vp-seek-buf {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: rgba(180, 205, 255, 0.5);
  z-index: 1;
}
.vp-seek-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: #0052FF;
  z-index: 2;
}
.vp-seek-knob {
  position: absolute;
  top: 50%;
  left: 0;
  width: 13px;
  height: 13px;
  margin-left: -6.5px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #0052FF;
  transform: translateY(-50%) scale(0);
  transition: transform .12s ease;
  box-shadow: 0 1px 6px rgba(0,0,0,.35);
  pointer-events: none;
  z-index: 3;
}
.vp-seek:hover .vp-seek-knob,
.vp-seek.drag .vp-seek-knob {
  transform: translateY(-50%) scale(1);
}

.vp-row {
  display: flex;
  align-items: center;
  gap: 1px;
  color: #fff;
  min-height: 40px;
}

/* Nút điều khiển — đồng bộ kích thước, tối giản */
.vp-btn {
  width: 38px;
  height: 38px;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,0.95);
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0;
  transition: background .15s ease, color .15s ease, transform .12s ease;
}
.vp-btn:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
}
.vp-btn:active { transform: scale(0.92); }
.vp-btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  display: block;
}
.vp-btn.sm {
  width: 36px;
  height: 36px;
}
.vp-btn.sm svg {
  width: 18px;
  height: 18px;
}

/* Nút phát dưới dock — hình tròn xanh */
.vp-btn.vp-play-circle,
.vp-btn#vpPlay {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #0052FF;
  color: #fff;
  border: 0;
  box-shadow: 0 4px 14px rgba(0, 82, 255, 0.35);
}
.vp-btn.vp-play-circle:hover,
.vp-btn#vpPlay:hover {
  background: #1a66ff;
  color: #fff;
}
.vp-btn.vp-play-circle svg,
.vp-btn#vpPlay svg {
  width: 18px;
  height: 18px;
  margin-left: 1px;
}

.vp-time {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,0.88);
  min-width: 88px;
  padding: 0 6px;
  letter-spacing: 0.01em;
  font-weight: 500;
  white-space: nowrap;
}
.vp-vol {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 2px;
}
.vp-vol-range {
  -webkit-appearance: none;
  appearance: none;
  width: 70px;
  height: 3px;
  border-radius: 99px;
  background: rgba(255,255,255,0.28);
  outline: none;
  cursor: pointer;
}
.vp-vol-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  border: 0;
  box-shadow: 0 0 0 2px rgba(0,82,255,0.35);
  cursor: pointer;
}
.vp-vol-range::-moz-range-thumb {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  border: 0;
  cursor: pointer;
}
.vp-spacer { flex: 1; min-width: 8px; }
.vp-tip {
  position: absolute;
  bottom: 22px;
  transform: translateX(-50%);
  background: rgba(12,16,28,0.94);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  white-space: nowrap;
  z-index: 4;
}
.vp-seek:hover .vp-tip { opacity: 1; }
.vp-rate { position: relative; }
.vp-rate #vpRateBtn {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  width: auto;
  min-width: 40px;
  padding: 0 8px;
  border-radius: 999px;
}
.vp-rate-menu {
  display: none;
  position: absolute;
  bottom: 44px;
  right: 0;
  background: rgba(12,16,28,0.96);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 4px;
  min-width: 96px;
  z-index: 8;
  box-shadow: 0 10px 28px rgba(0,0,0,0.4);
}
.vp-rate.open .vp-rate-menu { display: block; }
.vp-rate-menu button {
  display: block;
  width: 100%;
  background: none;
  border: 0;
  color: #e8eef8;
  text-align: left;
  padding: 7px 10px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}
.vp-rate-menu button.on,
.vp-rate-menu button:hover {
  background: rgba(0,82,255,0.28);
  color: #fff;
}

@media (max-width: 640px) {
  .vp-vol-range { width: 40px; }
  .vp-time { min-width: 70px; font-size: 11px; }
  .vp-btn { width: 34px; height: 34px; }
  .vp-btn.sm { width: 32px; height: 32px; }
  .vp-btn.vp-play-circle,
  .vp-btn#vpPlay { width: 36px; height: 36px; }
  .vp-center { width: 60px; height: 60px; }
  .vp-dock { padding: 0 10px 10px; }
  .vp-btn svg { width: 18px; height: 18px; }
  .vp-btn.sm svg { width: 16px; height: 16px; }
}



/* Player button animations + skip + gold volume */
.vp-btn {
  transition: background .18s ease, color .18s ease, transform .16s cubic-bezier(.22,1,.36,1), box-shadow .2s ease;
}
.vp-btn:hover {
  transform: translateY(-1px) scale(1.06);
}
.vp-btn:active {
  transform: scale(0.9);
}
.vp-center {
  animation: vpPulse 2.4s ease-in-out infinite;
}
@keyframes vpPulse {
  0%, 100% { box-shadow: 0 8px 28px rgba(0,40,120,.45), 0 0 0 0 rgba(0,82,255,.35); }
  50% { box-shadow: 0 10px 32px rgba(0,82,255,.55), 0 0 0 10px rgba(0,82,255,0); }
}
.vp-btn.vp-play-circle,
.vp-btn#vpPlay {
  background: linear-gradient(145deg, #5eb0ff 0%, #0052FF 42%, #0037c7 100%);
  box-shadow: 0 4px 16px rgba(0,82,255,.4), inset 0 1px 0 rgba(255,255,255,.25);
  position: relative;
  overflow: hidden;
}
.vp-btn.vp-play-circle::after,
.vp-btn#vpPlay::after {
  content: '';
  position: absolute;
  inset: -40%;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.28) 48%, transparent 62%);
  transform: translateX(-120%);
  animation: vpShine 3.2s ease-in-out infinite;
}
@keyframes vpShine {
  0%, 55% { transform: translateX(-120%); }
  75%, 100% { transform: translateX(120%); }
}
.vp-btn.vp-play-circle:hover,
.vp-btn#vpPlay:hover {
  background: linear-gradient(145deg, #7ec0ff 0%, #1a66ff 45%, #0040d8 100%);
  transform: translateY(-1px) scale(1.08);
}
.vp-btn.vp-skip {
  width: 44px;
  height: 44px;
  border-radius: 12px;
}
.vp-skip-ico {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
}
.vp-skip-ico svg {
  width: 26px !important;
  height: 26px !important;
  opacity: 0.95;
}
.vp-skip-n {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 9px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.vp-btn#vpMute {
  width: 40px;
  height: 40px;
}
.vp-btn#vpMute svg {
  width: 22px;
  height: 22px;
}
.vp-vol-range {
  width: 84px;
  height: 4px;
  background: linear-gradient(90deg, #c9a227, #ffd700 50%, #b8860b);
  background-size: 100% 100%;
  border-radius: 99px;
}
.vp-vol-range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 99px;
  background: linear-gradient(90deg, #8a6a12, #ffd700 40%, #f5e6a3 70%, #b8860b);
}
.vp-vol-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: linear-gradient(145deg, #fff8d0, #ffd700);
  border: 2px solid #b8860b;
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.22);
  margin-top: -4.5px;
  cursor: pointer;
}
.vp-vol-range::-moz-range-track {
  height: 4px;
  border-radius: 99px;
  background: linear-gradient(90deg, #8a6a12, #ffd700 40%, #f5e6a3 70%, #b8860b);
}
.vp-vol-range::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: linear-gradient(145deg, #fff8d0, #ffd700);
  border: 2px solid #b8860b;
  cursor: pointer;
}
@media (max-width: 640px) {
  .vp-btn.vp-skip { width: 40px; height: 40px; }
  .vp-vol-range { width: 56px; }
}


/* Skip ±10 — mũi tên cung tròn + số 10 giữa */
.vp-btn.vp-skip {
  width: 46px;
  height: 46px;
  border-radius: 50%;
}
.vp-skip-ico {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
}
.vp-skip-ico svg {
  width: 30px !important;
  height: 30px !important;
  display: block;
}
.vp-skip-n {
  position: absolute;
  left: 50%;
  top: 54%;
  transform: translate(-50%, -50%);
  font-size: 9px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  pointer-events: none;
  letter-spacing: -0.02em;
}
/* Volume: nền trắng, phần đã kéo do JS tô vàng */
.vp-vol-range {
  width: 88px;
  height: 4px;
  border-radius: 99px;
  background: rgba(255,255,255,0.88);
  -webkit-appearance: none;
  appearance: none;
}
.vp-vol-range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 99px;
  background: transparent;
}
.vp-vol-range::-moz-range-track {
  height: 4px;
  border-radius: 99px;
  background: transparent;
}
.vp-vol-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: linear-gradient(145deg, #fff8d0, #ffd700);
  border: 2px solid #b8860b;
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.2);
  margin-top: -4.5px;
  cursor: pointer;
}
.vp-vol-range::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: linear-gradient(145deg, #fff8d0, #ffd700);
  border: 2px solid #b8860b;
  cursor: pointer;
}


/* Luxury blue play — chuyển sáng sang trọng */
.vp-center {
  background: linear-gradient(145deg, #7ec8ff 0%, #3d9bff 28%, #0052FF 58%, #0036c4 100%) !important;
  box-shadow:
    0 10px 32px rgba(0, 70, 200, 0.5),
    0 0 0 5px rgba(0, 82, 255, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.35) !important;
  animation: vpLuxPulse 2.6s ease-in-out infinite !important;
}
.vp-center::before {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: linear-gradient(160deg, rgba(255,255,255,0.28) 0%, transparent 42%, transparent 100%);
  pointer-events: none;
}
.vp-center:hover {
  background: linear-gradient(145deg, #9ad4ff 0%, #5aadff 30%, #1a66ff 60%, #0040d0 100%) !important;
  filter: brightness(1.05);
}
@keyframes vpLuxPulse {
  0%, 100% {
    box-shadow: 0 10px 32px rgba(0,70,200,.5), 0 0 0 5px rgba(0,82,255,.16), inset 0 1px 0 rgba(255,255,255,.35);
  }
  50% {
    box-shadow: 0 12px 40px rgba(0,100,255,.6), 0 0 0 10px rgba(0,82,255,0), inset 0 1px 0 rgba(255,255,255,.4);
  }
}
.vp-btn.vp-play-circle,
.vp-btn#vpPlay {
  background: linear-gradient(145deg, #6ab4ff 0%, #0052FF 48%, #0039c4 100%) !important;
  box-shadow: 0 4px 18px rgba(0,82,255,.45), inset 0 1px 0 rgba(255,255,255,.3) !important;
  border: 0 !important;
  position: relative;
  overflow: hidden;
}
.vp-btn.vp-play-circle::after,
.vp-btn#vpPlay::after {
  content: '';
  position: absolute;
  inset: -50%;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%);
  animation: vpLuxShine 2.8s ease-in-out infinite;
}
@keyframes vpLuxShine {
  0%, 50% { transform: translateX(-130%) rotate(12deg); }
  80%, 100% { transform: translateX(130%) rotate(12deg); }
}
.vp-btn.vp-play-circle:hover,
.vp-btn#vpPlay:hover {
  background: linear-gradient(145deg, #8ec8ff 0%, #1a66ff 50%, #0046d8 100%) !important;
}


/* ===== Player bar kiểu streaming (ảnh tham chiếu) ===== */
.vp-dock {
  padding: 0 10px 10px !important;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.75) 30%, rgba(0,0,0,0.92));
}
.vp-row {
  gap: 2px !important;
  min-height: 44px !important;
}
.vp-btn {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: none !important;
}
.vp-btn:hover {
  background: rgba(255,255,255,0.12) !important;
  transform: none !important;
}
.vp-btn svg {
  width: 22px !important;
  height: 22px !important;
  fill: currentColor;
}
.vp-btn#vpPlay,
.vp-btn.vp-play-circle {
  background: transparent !important;
  box-shadow: none !important;
  width: 42px !important;
  height: 42px !important;
}
.vp-btn#vpPlay::after,
.vp-btn.vp-play-circle::after { display: none !important; }
.vp-btn#vpPlay svg { width: 24px !important; height: 24px !important; }

/* Nút phát giữa — luxury xanh */
.vp-center {
  width: 70px !important;
  height: 70px !important;
  border-radius: 50% !important;
  background: linear-gradient(145deg, #8ed0ff 0%, #4dabff 30%, #0052FF 60%, #0036c4 100%) !important;
  color: #fff !important;
  box-shadow:
    0 10px 34px rgba(0, 82, 255, 0.5),
    0 0 0 6px rgba(0, 82, 255, 0.16),
    inset 0 1px 0 rgba(255,255,255,0.35) !important;
  animation: vpLuxPulse 2.6s ease-in-out infinite !important;
}
.vp-center svg { width: 28px !important; height: 28px !important; margin-left: 2px; }

.vp-time {
  color: rgba(255,255,255,0.92) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}
.vp-vol-range {
  width: 80px !important;
}
.vp-rate #vpRateBtn {
  min-width: 40px !important;
  width: 40px !important;
  padding: 0 !important;
  font-size: 0 !important; /* ẩn text 1x, dùng icon gear */
}
.vp-rate #vpRateBtn svg { width: 22px !important; height: 22px !important; }

.vp-rate #vpRateBtn {
  position: relative;
}
.vp-rate #vpRateBtn[data-rate]::after {
  content: attr(data-rate);
  position: absolute;
  right: -2px;
  bottom: 2px;
  font-size: 8px;
  font-weight: 800;
  color: #7ec8ff;
  line-height: 1;
  pointer-events: none;
}


/* ===== Player UI auto-hide + transparent + lock + title ===== */
.vp-overlay {
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.45) 0%,
    transparent 18%,
    transparent 58%,
    rgba(0,0,0,0.55) 100%
  ) !important;
  transition: opacity .28s ease, transform .28s ease !important;
}
.vp-shell.ui-hidden .vp-overlay,
.vp-shell:not(.show-ui):not(.paused) .vp-overlay {
  opacity: 0 !important;
  pointer-events: none !important;
}
.vp-shell.ui-hidden .vp-dock {
  transform: translateY(110%);
}
.vp-shell.ui-hidden .vp-top {
  transform: translateY(-110%);
}
.vp-dock {
  transition: transform .28s cubic-bezier(.22,1,.36,1) !important;
  background: transparent !important;
  padding-bottom: 10px !important;
}
.vp-top {
  position: absolute;
  left: 0; right: 0; top: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px 8px;
  pointer-events: none;
  transition: transform .28s cubic-bezier(.22,1,.36,1);
  z-index: 7;
}
.vp-title {
  max-width: min(70%, 520px);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
  text-shadow: 0 2px 12px rgba(0,0,0,.75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.vp-lock-btn {
  pointer-events: auto !important;
  margin-left: auto;
}
/* Nút trong suốt — không che phụ đề */
.vp-btn {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  color: #fff !important;
}
.vp-btn:hover {
  background: rgba(255,255,255,0.1) !important;
}
.vp-btn#vpPlay,
.vp-btn.vp-play-circle {
  background: transparent !important;
  box-shadow: none !important;
}
.vp-btn#vpPlay::after,
.vp-btn.vp-play-circle::after { display: none !important; }

.vp-center {
  /* giữ luxury nhưng không chặn phụ đề khi ẩn */
  z-index: 6;
}
.vp-shell:not(.paused) .vp-center {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Tap zones */
.vp-tap-left, .vp-tap-right {
  position: absolute;
  top: 0; bottom: 56px;
  width: 34%;
  z-index: 4;
  background: transparent;
}
.vp-tap-left { left: 0; }
.vp-tap-right { right: 0; }

/* Seek flash ±10s */
.vp-seek-flash {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) scale(0.9);
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(0,0,0,0.45);
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 8;
}
.vp-seek-flash.left { left: 12%; }
.vp-seek-flash.right { right: 12%; }
.vp-seek-flash.on {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

/* Locked mode */
.vp-shell.locked .vp-overlay {
  opacity: 0 !important;
  pointer-events: none !important;
}
.vp-shell.locked .vp-dock,
.vp-shell.locked .vp-top,
.vp-shell.locked .vp-center {
  display: none !important;
}
.vp-unlock-fab {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: rgba(0,0,0,0.35);
  color: #fff;
  display: grid;
  place-items: center;
  z-index: 9;
  cursor: pointer;
  backdrop-filter: blur(4px);
}
.vp-unlock-fab svg { width: 22px; height: 22px; fill: currentColor; }
.vp-unlock-fab:hover { background: rgba(0,0,0,0.5); }
.vp-unlock-fab[hidden] { display: none !important; }

@media (max-width: 640px) {
  .vp-title { font-size: 0.88rem; max-width: 62%; }
  .vp-top { padding: 10px 10px 6px; }
}


/* ===== Player controls v2: larger, white volume, settings, lock-peek ===== */
.vp-btn {
  width: 48px !important;
  height: 48px !important;
  background: transparent !important;
  box-shadow: none !important;
}
.vp-btn svg {
  width: 26px !important;
  height: 26px !important;
}
.vp-btn#vpPlay {
  width: 50px !important;
  height: 50px !important;
}
.vp-btn#vpPlay svg {
  width: 28px !important;
  height: 28px !important;
}
.vp-center {
  width: 76px !important;
  height: 76px !important;
}
.vp-center svg {
  width: 32px !important;
  height: 32px !important;
}
.vp-time {
  font-size: 13px !important;
  min-width: 96px !important;
}
.vp-vol-range {
  width: 96px !important;
  height: 4px !important;
  background: rgba(255,255,255,0.28) !important;
  accent-color: #fff !important;
}
.vp-vol-range::-webkit-slider-thumb {
  background: #fff !important;
  border: 0 !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.2) !important;
  width: 14px !important;
  height: 14px !important;
  margin-top: -5px !important;
}
.vp-vol-range::-moz-range-thumb {
  background: #fff !important;
  border: 0 !important;
  width: 14px !important;
  height: 14px !important;
}
.vp-vol-range::-webkit-slider-runnable-track {
  background: transparent !important;
}
.vp-vol-range::-moz-range-track {
  background: transparent !important;
}

/* Settings panel */
.vp-settings { position: relative; }
.vp-settings-menu {
  display: none;
  position: absolute;
  bottom: 52px;
  right: 0;
  min-width: 240px;
  max-width: min(92vw, 300px);
  background: rgba(10, 14, 24, 0.96);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  padding: 10px;
  z-index: 12;
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
}
.vp-settings.open .vp-settings-menu { display: block; }
.vp-set-sec { margin-bottom: 10px; }
.vp-set-sec:last-child { margin-bottom: 0; }
.vp-set-label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
  padding: 0 4px;
}
.vp-set-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.vp-set-row button {
  border: 0;
  background: rgba(255,255,255,0.08);
  color: #e8eef8;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 10px;
  border-radius: 9px;
  cursor: pointer;
}
.vp-set-row button.on,
.vp-set-row button:hover {
  background: rgba(0, 82, 255, 0.35);
  color: #fff;
}
.vp-sub-empty {
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  padding: 6px 4px;
}

/* Lock peek: hiện fab khi di chuột lúc khóa */
.vp-shell.locked .vp-unlock-fab {
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}
.vp-shell.locked.lock-peek .vp-unlock-fab {
  opacity: 1;
  pointer-events: auto;
}
.vp-unlock-fab {
  width: 52px !important;
  height: 52px !important;
  background: rgba(0,0,0,0.4) !important;
}
.vp-unlock-fab svg { width: 26px !important; height: 26px !important; }

@media (max-width: 640px) {
  .vp-btn { width: 44px !important; height: 44px !important; }
  .vp-btn svg { width: 24px !important; height: 24px !important; }
  .vp-vol-range { width: 64px !important; }
  .vp-settings-menu { right: -8px; min-width: 220px; }
}


/* ===== Volume control — minimal white like system UI ===== */
.vp-vol {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 4px !important;
  background: transparent !important;
}
.vp-vol .vp-btn,
.vp-vol #vpMute {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  color: #fff !important;
  padding: 0 !important;
}
.vp-vol .vp-btn svg,
.vp-vol #vpMute svg {
  width: 22px !important;
  height: 22px !important;
  fill: #fff !important;
}
.vp-vol-range {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 110px !important;
  height: 3px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.35) !important;
  outline: none !important;
  cursor: pointer !important;
  border: 0 !important;
  box-shadow: none !important;
  accent-color: #fff !important;
}
/* filled part set via JS gradient — base track light gray/white */
.vp-vol-range::-webkit-slider-runnable-track {
  height: 3px !important;
  border-radius: 999px !important;
  background: transparent !important;
  border: 0 !important;
}
.vp-vol-range::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 14px !important;
  height: 14px !important;
  margin-top: -5.5px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 0 !important;
  box-shadow: none !important;
  cursor: pointer !important;
}
.vp-vol-range::-moz-range-track {
  height: 3px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.35) !important;
  border: 0 !important;
}
.vp-vol-range::-moz-range-progress {
  height: 3px !important;
  border-radius: 999px !important;
  background: #ffffff !important;
}
.vp-vol-range::-moz-range-thumb {
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 0 !important;
  box-shadow: none !important;
  cursor: pointer !important;
}
@media (max-width: 640px) {
  .vp-vol-range { width: 72px !important; }
}


/* Hero background: landscape poster, cinematic (ít nhòe hơn) */
.hero-blur-bg {
  position: absolute !important;
  inset: -4% !important;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  filter: brightness(1.02) contrast(1.02);
  transform: scale(1.02) !important;
  z-index: 0 !important;
}
.hero-blur-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(6,10,18,0.82) 0%, rgba(6,10,18,0.35) 42%, rgba(6,10,18,0.55) 100%),
    linear-gradient(180deg, rgba(6,10,18,0.25) 0%, transparent 30%, rgba(6,10,18,0.75) 100%);
  pointer-events: none;
}
.hero-media {
  overflow: hidden !important;
}


/* Volume slider — filled white / empty gray */
.vp-vol {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: transparent !important;
}
.vp-vol #vpMute {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #fff !important;
}
.vp-vol #vpMute svg {
  width: 22px !important;
  height: 22px !important;
  fill: #fff !important;
}
.vp-vol-range {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 120px !important;
  height: 4px !important;
  border-radius: 999px !important;
  background: #5a5a5a !important;
  outline: none !important;
  border: 0 !important;
  box-shadow: none !important;
  cursor: pointer !important;
}
.vp-vol-range::-webkit-slider-runnable-track {
  height: 4px !important;
  border-radius: 999px !important;
  background: transparent !important;
}
.vp-vol-range::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  width: 14px !important;
  height: 14px !important;
  margin-top: -5px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 0 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.45) !important;
  cursor: pointer !important;
}
.vp-vol-range::-moz-range-track {
  height: 4px !important;
  border-radius: 999px !important;
  background: #5a5a5a !important;
}
.vp-vol-range::-moz-range-progress {
  height: 4px !important;
  border-radius: 999px !important;
  background: #ffffff !important;
}
.vp-vol-range::-moz-range-thumb {
  width: 14px !important;
  height: 14px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.45) !important;
  cursor: pointer !important;
}


/* FINAL: hero bg = poster ngang, không blur nặng */
.hero-blur-bg,
.hero .hero-blur-bg,
.hero-slide .hero-blur-bg,
#hero .hero-blur-bg {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  filter: brightness(1.02) contrast(1.02);
  transform: none !important;
  opacity: 1 !important;
  pointer-events: none !important;
}
.hero-blur-bg::after,
.hero .hero-blur-bg::after,
.hero-slide .hero-blur-bg::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(90deg, rgba(6,10,18,0.88) 0%, rgba(6,10,18,0.4) 45%, rgba(6,10,18,0.55) 100%),
    linear-gradient(180deg, rgba(6,10,18,0.3) 0%, transparent 28%, rgba(6,10,18,0.8) 100%) !important;
  pointer-events: none !important;
}


/* ===== Volume rail: fill trắng / nền xám — chắc chắn hiển thị ===== */
.vp-vol {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.vp-vol-rail {
  position: relative !important;
  width: 120px !important;
  height: 16px !important;
  display: flex !important;
  align-items: center !important;
}
.vp-vol-rail::before {
  content: '' !important;
  position: absolute !important;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 4px !important;
  border-radius: 999px !important;
  background: #5a5a5a !important;
  z-index: 0 !important;
}
.vp-vol-fill {
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  height: 4px !important;
  width: 100%;
  border-radius: 999px !important;
  background: #ffffff !important;
  z-index: 1 !important;
  pointer-events: none !important;
  max-width: 100% !important;
}
.vp-vol-range {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  height: 16px !important;
  margin: 0 !important;
  background: transparent !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  outline: none !important;
  border: 0 !important;
  cursor: pointer !important;
}
.vp-vol-range::-webkit-slider-runnable-track {
  height: 4px !important;
  background: transparent !important;
  border: 0 !important;
}
.vp-vol-range::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  width: 14px !important;
  height: 14px !important;
  margin-top: -5px !important;
  border-radius: 50% !important;
  background: #fff !important;
  border: 0 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.5) !important;
  cursor: pointer !important;
  position: relative !important;
  z-index: 3 !important;
}
.vp-vol-range::-moz-range-track {
  height: 4px !important;
  background: transparent !important;
  border: 0 !important;
}
.vp-vol-range::-moz-range-progress {
  background: transparent !important;
}
.vp-vol-range::-moz-range-thumb {
  width: 14px !important;
  height: 14px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.5) !important;
  cursor: pointer !important;
}
@media (max-width: 640px) {
  .vp-vol-rail { width: 80px !important; }
}

/* ===== Aspect ratio thật ===== */
.vp-shell video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
.vp-shell.aspect-auto video {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  aspect-ratio: auto !important;
}
.vp-shell.aspect-16-9 {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #000 !important;
}
.vp-shell.aspect-16-9 video {
  width: 100% !important;
  height: auto !important;
  max-height: 100% !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: contain !important;
}
.vp-shell.aspect-4-3 {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #000 !important;
}
.vp-shell.aspect-4-3 video {
  width: auto !important;
  height: 100% !important;
  max-width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: contain !important;
}

/* ===== Boot splash cinematic commercial ===== */
.boot-splash {
  background: #05070e !important;
}
.boot-bg {
  background:
    linear-gradient(180deg, rgba(5,7,14,0.2) 0%, rgba(5,7,14,0.55) 50%, rgba(5,7,14,0.92) 100%),
    radial-gradient(ellipse 80% 60% at 50% 20%, rgba(0,82,255,0.18) 0%, transparent 60%),
    url('/boot-bg.jpg?v=20260926m') center center / cover no-repeat,
    #05070e !important;
  filter: saturate(1.15) contrast(1.08) brightness(0.75) !important;
  transform: scale(1.06) !important;
  animation: bootKen 28s ease-in-out infinite alternate !important;
}
.boot-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: 0.25;
  pointer-events: none;
}
.boot-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5,7,14,0.85) 0%, transparent 18%, transparent 82%, rgba(5,7,14,0.85) 100%),
    linear-gradient(180deg, rgba(5,7,14,0.5) 0%, transparent 30%, rgba(5,7,14,0.9) 100%);
  pointer-events: none;
}
.boot-veil {
  background:
    radial-gradient(ellipse 55% 45% at 50% 42%, rgba(0,40,120,0.12) 0%, transparent 70%),
    linear-gradient(180deg, rgba(5,7,14,0.15) 0%, rgba(5,7,14,0.75) 100%) !important;
}
.boot-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
}
.boot-name {
  font-family: 'Bebas Neue', 'Oswald', 'Outfit', system-ui, sans-serif !important;
  font-size: clamp(2.4rem, 6vw, 3.6rem) !important;
  letter-spacing: 0.14em !important;
  font-weight: 700 !important;
  background: linear-gradient(180deg, #ffffff 0%, #9ec1ff 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
  filter: drop-shadow(0 4px 24px rgba(0,82,255,0.35));
}
.boot-logo {
  width: 72px !important;
  height: 72px !important;
  object-fit: contain !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 40px rgba(0,82,255,0.35) !important;
}
.boot-loader {
  width: 48px !important;
  height: 48px !important;
  margin-top: 6px !important;
}
.boot-hint {
  color: rgba(230,238,255,0.72) !important;
  font-size: 0.92rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
}
@keyframes bootKen {
  0% { transform: scale(1.04) translate3d(0,0,0); }
  100% { transform: scale(1.1) translate3d(-1.2%, -0.8%, 0); }
}


/* ===== Volume fill RED ===== */
.vp-vol-fill {
  background: #e53935 !important;
}
.vp-vol-rail::before {
  background: #4a4a4a !important;
}

/* ===== Mobile player: 2 hàng nút, không tràn ===== */
@media (max-width: 700px) {
  .vp-dock {
    padding: 6px 8px 10px !important;
  }
  .vp-row {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 4px 2px !important;
    align-items: center !important;
    width: 100% !important;
  }
  .vp-row .vp-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    margin: 0 auto !important;
  }
  .vp-row .vp-btn svg {
    width: 22px !important;
    height: 22px !important;
  }
  .vp-row .vp-vol {
    grid-column: 1 / -1 !important;
    justify-content: center !important;
    padding: 2px 0 0 !important;
    order: 20 !important;
  }
  .vp-row .vp-time {
    grid-column: 1 / -1 !important;
    text-align: center !important;
    font-size: 11px !important;
    min-width: 0 !important;
    order: 19 !important;
    opacity: 0.9 !important;
  }
  .vp-row .vp-spacer { display: none !important; }
  .vp-vol-rail { width: 55vw !important; max-width: 220px !important; }
  .vp-seek { margin: 0 4px 6px !important; }
  .vp-title {
    font-size: 0.8rem !important;
    max-width: 70% !important;
  }
  .vp-settings-menu {
    right: 0 !important;
    left: auto !important;
    min-width: 200px !important;
    max-width: 92vw !important;
    bottom: 48px !important;
  }
  .vp-shell.hold-boost::after {
    content: '2x';
    position: absolute;
    top: 14%;
    right: 12%;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(229,57,53,0.85);
    color: #fff;
    font-weight: 800;
    font-size: 0.85rem;
    z-index: 10;
    pointer-events: none;
  }
}

/* ===== Mobile layout: thoáng hơn ===== */
@media (max-width: 700px) {
  :root {
    --header-h: 56px;
  }
  .header {
    padding: 8px 10px !important;
    gap: 8px !important;
  }
  .brand-sub { display: none !important; }
  .brand-text { font-size: 0.95rem !important; }
  .search-wrap { min-width: 0 !important; flex: 1 !important; }
  main.main, .main {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .rail {
    margin-bottom: 18px !important;
  }
  .rail-title {
    font-size: 1.05rem !important;
    padding: 0 2px 8px !important;
  }
  .rail-track, .row-track {
    gap: 10px !important;
    padding-bottom: 6px !important;
  }
  /* Card mobile: rộng hơn một chút, bớt bí */
  .card {
    width: 132px !important;
    min-width: 132px !important;
  }
  .card-poster {
    aspect-ratio: 2 / 3 !important;
    border-radius: 12px !important;
  }
  .topics-grid, .topic-grid {
    gap: 10px !important;
  }
  .topic-chip, .topic-card {
    padding: 10px 12px !important;
    font-size: 0.86rem !important;
  }
  /* Poster gallery: GIỮ ngang, không ép dọc */
  .poster-gallery .pg-item,
  .pg-item {
    width: min(78vw, 300px) !important;
    max-width: 92vw !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    border-radius: 12px !important;
  }
  .pg-item.is-portrait {
    width: min(42vw, 150px) !important;
    aspect-ratio: 2 / 3 !important;
  }
  .pg-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    max-height: none !important;
  }
  .pg-item.is-landscape,
  .pg-item:not(.is-portrait) {
    width: min(78vw, 300px) !important;
    aspect-ratio: 16 / 9 !important;
  }
  /* Detail page spacing */
  .detail-info, .detail-meta, .movie-meta {
    gap: 8px !important;
  }
  .detail-title, .movie-title {
    font-size: 1.2rem !important;
    line-height: 1.3 !important;
  }
  .ep-btn, .server-btn {
    min-height: 40px !important;
    padding: 8px 12px !important;
  }
  /* Bottom nav breathing room */
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* Ghi đè rule cũ ép poster 96x140 */
@media (max-width: 700px) {
  .pg-item { width: min(78vw, 300px) !important; }
  .pg-item img { height: auto !important; min-height: 0 !important; }
}

/* ===== Boot splash — pure CSS cinematic wall (không phụ thuộc ảnh xấu) ===== */
.boot-splash {
  background: #03050c !important;
}
.boot-bg {
  background:
    radial-gradient(ellipse 70% 55% at 50% 35%, rgba(26,109,255,0.22) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 80% 70%, rgba(229,57,53,0.12) 0%, transparent 55%),
    radial-gradient(ellipse 40% 35% at 15% 60%, rgba(0,200,255,0.1) 0%, transparent 50%),
    linear-gradient(160deg, #070b16 0%, #0a1224 40%, #050810 100%) !important;
  filter: none !important;
  transform: none !important;
  animation: none !important;
}
.boot-bg::before {
  content: '' !important;
  position: absolute !important;
  inset: -5% !important;
  background-image:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.04) 0px,
      rgba(255,255,255,0.04) 1px,
      transparent 1px,
      transparent 72px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,0.03) 0px,
      rgba(255,255,255,0.03) 1px,
      transparent 1px,
      transparent 100px
    ) !important;
  background-size: 72px 100px !important;
  opacity: 0.55 !important;
  animation: bootGrid 20s linear infinite !important;
  pointer-events: none !important;
}
.boot-bg::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(90deg, rgba(3,5,12,0.92) 0%, transparent 20%, transparent 80%, rgba(3,5,12,0.92) 100%),
    linear-gradient(180deg, rgba(3,5,12,0.55) 0%, transparent 35%, rgba(3,5,12,0.88) 100%) !important;
  pointer-events: none !important;
}
@keyframes bootGrid {
  0% { transform: translate3d(0,0,0); }
  100% { transform: translate3d(-72px, -20px, 0); }
}
.boot-veil {
  background:
    radial-gradient(ellipse 50% 40% at 50% 45%, rgba(26,109,255,0.15) 0%, transparent 70%),
    linear-gradient(180deg, transparent 0%, rgba(3,5,12,0.4) 100%) !important;
}
.boot-name {
  background: linear-gradient(180deg, #ffffff 10%, #7eb6ff 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  letter-spacing: 0.16em !important;
}
.boot-logo {
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08),
    0 16px 48px rgba(26,109,255,0.4) !important;
}

@media (max-width: 700px) {
  .poster-gallery .pg-item.is-landscape,
  .poster-gallery .pg-item:not(.is-portrait) {
    width: min(82vw, 320px) !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
  }
  .poster-gallery .pg-item.is-landscape img,
  .poster-gallery .pg-item:not(.is-portrait) img {
    height: 100% !important;
    object-fit: cover !important;
  }
}


/* ===== Mobile player — layout sạch như app stream ===== */
@media (max-width: 700px) {
  .vp-overlay {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 0 !important;
  }
  .vp-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 12px 0 !important;
    transform: none !important;
  }
  .vp-title {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    max-width: 75% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.85) !important;
  }
  .vp-dock {
    margin: 0 !important;
    padding: 4px 10px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,0.72) 35%) !important;
    transform: none !important;
  }
  .vp-seek {
    margin: 0 0 8px !important;
    height: 18px !important;
  }
  .vp-seek-track {
    height: 3px !important;
  }
  /* Một hàng nút căn giữa, đều nhau */
  .vp-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0 !important;
    width: 100% !important;
  }
  .vp-row .vp-btn {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    flex: 0 0 42px !important;
    margin: 0 !important;
    background: transparent !important;
  }
  .vp-row .vp-btn svg {
    width: 22px !important;
    height: 22px !important;
  }
  .vp-row .vp-vol {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 42% !important;
    justify-content: flex-start !important;
    order: 0 !important;
    grid-column: auto !important;
    padding: 0 !important;
  }
  .vp-vol-rail {
    width: 100% !important;
    max-width: 120px !important;
    flex: 1 1 auto !important;
  }
  .vp-row .vp-time {
    display: none !important; /* thời gian nằm trên seek tip / tránh chật */
  }
  .vp-row .vp-spacer { display: none !important; }
  .vp-row .vp-settings,
  .vp-row #vpPip,
  .vp-row #vpNext,
  .vp-row #vpFs {
    flex: 0 0 42px !important;
  }
  /* Ẩn bớt nút phụ nếu quá chật — vẫn đủ điều khiển chính */
  .vp-row #vpBack,
  .vp-row #vpFwd {
    flex: 0 0 40px !important;
  }
  .vp-center {
    width: 64px !important;
    height: 64px !important;
  }
  /* Transition mượt, không giật */
  .vp-overlay,
  .vp-dock,
  .vp-top {
    transition: opacity 0.28s ease !important;
  }
  .vp-shell.ui-hidden .vp-dock {
    transform: translateY(8px) !important;
    opacity: 0 !important;
  }
  .vp-shell.ui-hidden .vp-top {
    transform: translateY(-8px) !important;
    opacity: 0 !important;
  }
}

/* ===== Hero lớn 16:9 + sáng rõ ===== */
#hero,
.hero,
.hero-carousel {
  height: min(56vw, 560px) !important;
  min-height: 340px !important;
  max-height: 620px !important;
  border-radius: 18px !important;
  overflow: hidden !important;
}
@media (max-width: 700px) {
  #hero,
  .hero,
  .hero-carousel {
    height: min(62vw, 280px) !important;
    min-height: 200px !important;
    max-height: 320px !important;
    border-radius: 0 0 14px 14px !important;
  }
}
.hero-blur-bg,
.hero .hero-blur-bg,
.hero-slide .hero-blur-bg,
#hero .hero-blur-bg {
  filter: brightness(1.02) contrast(1.02);
  opacity: 1 !important;
}
.hero-blur-bg::after,
.hero .hero-blur-bg::after,
.hero-slide .hero-blur-bg::after {
  background:
    linear-gradient(90deg, rgba(6,10,18,0.55) 0%, rgba(6,10,18,0.18) 48%, rgba(6,10,18,0.4) 100%),
    linear-gradient(180deg, rgba(6,10,18,0.15) 0%, transparent 40%, rgba(6,10,18,0.55) 100%) !important;
}
.hero-poster {
  filter: brightness(1.08) contrast(1.05) !important;
  image-rendering: auto !important;
}
.hero-poster-wrap {
  box-shadow: 0 12px 40px rgba(0,0,0,0.45) !important;
}

/* ===== Brand font nghệ thuật ===== */
.brand-text,
.brand .brand-text {
  font-family: "Bebas Neue", "Oswald", "Outfit", system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.35rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  background: linear-gradient(100deg, #ffffff 0%, #8ec5ff 45%, #2ee6d6 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 2px 12px rgba(46,230,214,0.25));
}
.brand-sub {
  font-family: "Outfit", system-ui, sans-serif !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.06em !important;
  opacity: 0.75 !important;
}
@media (max-width: 700px) {
  .brand-text { font-size: 1.15rem !important; letter-spacing: 0.1em !important; }
}


/* =========================================================
   PLAYER MOBILE — điều khiển DƯỚI đáy khung phim (không giữa)
   ========================================================= */
@media (max-width: 700px) {
  .player-box,
  #player.player-box,
  #player {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    min-height: 200px !important;
    max-height: none !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    background: #000 !important;
  }

  .vp-shell {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    background: #000 !important;
  }

  .vp-shell video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  .vp-overlay {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    background: transparent !important;
    opacity: 1 !important;
    pointer-events: none !important;
    z-index: 5 !important;
  }

  /* Top: tên phim + khóa */
  .vp-top {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 7 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    margin: 0 !important;
    transform: none !important;
    pointer-events: none !important;
    background: linear-gradient(180deg, rgba(0,0,0,0.65) 0%, transparent 100%) !important;
  }
  .vp-title {
    pointer-events: none !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    max-width: 78% !important;
    line-height: 1.25 !important;
  }
  .vp-lock-btn {
    pointer-events: auto !important;
  }

  /* Nút play giữa — chỉ khi pause */
  .vp-center {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 6 !important;
    width: 56px !important;
    height: 56px !important;
    pointer-events: auto !important;
  }

  /* DOCK dưới cùng */
  .vp-dock {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    z-index: 8 !important;
    margin: 0 !important;
    padding: 8px 10px 12px !important;
    transform: none !important;
    pointer-events: auto !important;
    background: linear-gradient(0deg, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.45) 55%, transparent 100%) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }

  .vp-seek {
    position: relative !important;
    width: 100% !important;
    height: 16px !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
  }

  .vp-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 2px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .vp-row > .vp-btn,
  .vp-row > .vp-settings,
  .vp-row > .vp-vol {
    order: unset !important;
    grid-column: unset !important;
  }

  .vp-row .vp-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    flex: 0 0 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
  }
  .vp-row .vp-btn svg {
    width: 22px !important;
    height: 22px !important;
  }

  .vp-row .vp-vol {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex: 1 1 auto !important;
    min-width: 72px !important;
    max-width: 130px !important;
    margin: 0 4px !important;
    padding: 0 !important;
  }
  .vp-vol #vpMute {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    flex: 0 0 36px !important;
  }
  .vp-vol-rail {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: 90px !important;
  }

  .vp-row .vp-time,
  .vp-row .vp-spacer {
    display: none !important;
  }

  /* Ẩn nút phụ cho gọn: next + pip */
  .vp-row #vpNext,
  .vp-row #vpPip {
    display: none !important;
  }

  .vp-settings {
    position: relative !important;
    flex: 0 0 40px !important;
  }
  .vp-settings-menu {
    bottom: 44px !important;
    right: 0 !important;
  }

  /* Ẩn UI: chỉ trượt dock/top, không làm lệch layout */
  .vp-shell.ui-hidden .vp-dock {
    transform: translateY(110%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  .vp-shell.ui-hidden .vp-top {
    transform: translateY(-100%) !important;
    opacity: 0 !important;
  }
  .vp-shell.show-ui .vp-dock,
  .vp-shell.paused .vp-dock {
    transform: translateY(0) !important;
    opacity: 1 !important;
  }
  .vp-shell.show-ui .vp-top,
  .vp-shell.paused .vp-top {
    transform: translateY(0) !important;
    opacity: 1 !important;
  }
}

/* Desktop dock vẫn dưới đáy */
@media (min-width: 701px) {
  .vp-overlay {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
  }
  .vp-dock {
    position: absolute !important;
    left: 0; right: 0; bottom: 0;
    top: auto !important;
  }
  .vp-top {
    position: absolute !important;
    top: 0; left: 0; right: 0;
  }
  .vp-center {
    position: absolute !important;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
  }
}

/* =========================================================
   HERO — đẩy xuống dưới header, đủ chỗ poster ngang
   ========================================================= */
#hero,
.hero,
.hero-carousel {
  margin-top: 12px !important;
  height: min(52vw, 540px) !important;
  min-height: 320px !important;
  max-height: 580px !important;
}
@media (max-width: 700px) {
  #hero,
  .hero,
  .hero-carousel {
    margin-top: 8px !important;
    height: min(58vw, 260px) !important;
    min-height: 190px !important;
    max-height: 280px !important;
    border-radius: 0 0 14px 14px !important;
  }
  /* Tránh header che hero */
  .home-view,
  #homeView {
    padding-top: 8px !important;
  }
}
/* Giảm filter tối trên nền poster */
.hero-blur-bg::after,
.hero .hero-blur-bg::after,
.hero-slide .hero-blur-bg::after {
  background:
    linear-gradient(90deg, rgba(6,10,18,0.42) 0%, rgba(6,10,18,0.12) 50%, rgba(6,10,18,0.35) 100%),
    linear-gradient(180deg, rgba(6,10,18,0.12) 0%, transparent 42%, rgba(6,10,18,0.5) 100%) !important;
}


/* Khi kéo: ảnh cover trong khung cố định */
@media (max-width: 900px) {
}



/* Detail watch: thumbnail gọn, không quay */
.detail-poster,
#detailPoster {
  display: block !important;
  width: 120px !important;
  max-width: 32vw !important;
  height: auto !important;
  aspect-ratio: 2 / 3 !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 12px !important;
  animation: none !important;
  transform: none !important;
}
.detail-poster.cycling,
#detailPoster.cycling,
.detail-poster.is-cycling,
#detailPoster.is-cycling {
  animation: none !important;
  transform: none !important;
}
.detail-hero-row {
  display: flex !important;
  gap: 12px !important;
  align-items: flex-start !important;
}
.detail-hero-row .detail-poster,
.detail-hero-row #detailPoster {
  width: 120px !important;
  flex: 0 0 120px !important;
}
/* Poster gallery trong trang xem: nhỏ gọn hơn */
.pg-item.is-landscape {
  width: min(56vw, 360px) !important;
  max-width: 380px !important;
}
.pg-item.is-portrait {
  width: min(28vw, 140px) !important;
}
.pg-item {
  width: min(56vw, 360px) !important;
  max-width: 380px !important;
}
.pg-item img {
  animation: none !important;
  transform: none !important;
}
@media (max-width: 600px) {
  .detail-poster, #detailPoster {
    width: 96px !important;
    max-width: 96px !important;
    flex-basis: 96px !important;
  }
}


/* Hero: contain = không phóng ảnh */
#hero .hero-fill-img,
img.hero-fill-img {
  object-fit: contain !important;
  object-position: center center !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  transform: none !important;
  filter: none !important;
}
.main #hero,
main.main #hero {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  overflow: hidden !important;
  transform: none !important;
}
#hero .hero-blur-bg {
  display: block !important;
  position: absolute !important;
  inset: -8% !important;
  background-size: cover !important;
  background-position: center center !important;
  filter: blur(28px) saturate(1.05) brightness(0.55) !important;
  transform: scale(1.08) !important;
  z-index: 0 !important;
}
#hero .hero-fill-img {
  position: relative !important;
  z-index: 1 !important;
  object-fit: contain !important;
}


/* blur-bg chỉ phụ; tắt nếu không dùng */
#hero .hero-blur-bg {
  display: block !important;
  position: absolute !important;
  inset: -8% !important;
  background-size: cover !important;
  background-position: center center !important;
  filter: blur(28px) saturate(1.05) brightness(0.55) !important;
  transform: scale(1.08) !important;
  z-index: 0 !important;
}
#hero .hero-fill-img {
  position: relative !important;
  z-index: 1 !important;
  object-fit: contain !important;
}

/* =========================================================
   FINAL 20260928h — blur 2 bên + chữ hero vừa + poster không khung + player vừa
   ========================================================= */

/* 1) Nền nhòe phủ CẢ khung (trái + phải), ảnh chính contain ở giữa */
.hero-media {
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
  background: #070b12 !important;
}
.hero-blur-bg,
.hero .hero-blur-bg,
.hero-slide .hero-blur-bg,
#hero .hero-blur-bg {
  display: block !important;
  position: absolute !important;
  inset: -18% !important;
  width: auto !important;
  height: auto !important;
  min-width: 136% !important;
  min-height: 136% !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  filter: blur(36px) saturate(1.2) brightness(0.58) !important;
  transform: none !important;
  opacity: 1 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
.hero-blur-bg::after,
.hero .hero-blur-bg::after,
.hero-slide .hero-blur-bg::after,
#hero .hero-blur-bg::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(90deg, rgba(6,10,18,0.38) 0%, rgba(6,10,18,0.12) 38%, rgba(6,10,18,0.12) 62%, rgba(6,10,18,0.38) 100%),
    linear-gradient(180deg, rgba(6,10,18,0.22) 0%, transparent 36%, rgba(6,10,18,0.42) 100%) !important;
  pointer-events: none !important;
}
#hero .hero-fill-img,
.hero .hero-fill-img,
.hero-slide .hero-fill-img,
img.hero-fill-img {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
  filter: none !important;
  transform: none !important;
  opacity: 1 !important;
}

/* 2) Chữ hero nhỏ hơn, không đè mặt poster */
.hero-content {
  position: relative !important;
  z-index: 3 !important;
  width: min(38vw, 460px) !important;
  max-width: 460px !important;
  padding: 0 0 48px max(3vw, 22px) !important;
  gap: 8px !important;
  justify-content: flex-end !important;
}
#hero .hero-title,
.hero-content .hero-title,
.hero-title {
  font-size: clamp(1.05rem, 2vw, 1.7rem) !important;
  line-height: 1.18 !important;
  max-width: 100% !important;
}
.hero-content .hero-origin {
  font-size: 0.78rem !important;
}
.hero-content .hero-syn {
  font-size: 0.78rem !important;
  -webkit-line-clamp: 2 !important;
  max-width: 36em !important;
}
.hero-content .hero-tag {
  font-size: 0.65rem !important;
  padding: 3px 8px !important;
}
.hero-content .btn-play,
.hero-content .btn-hero-more {
  padding: 8px 16px !important;
  height: auto !important;
  font-size: 0.82rem !important;
}
@media (max-width: 900px) {
  .hero-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 14px 36px !important;
    justify-content: flex-end !important;
  }
  #hero .hero-title,
  .hero-content .hero-title {
    font-size: clamp(1rem, 4.4vw, 1.35rem) !important;
  }
}

/* 3) Hiện lại ảnh poster — chỉ bỏ khung/viền xấu */
#detailPosters,
.poster-gallery,
#detailView .poster-gallery,
#detailView #detailPosters {
  display: block !important;
  visibility: visible !important;
  height: auto !important;
  overflow: visible !important;
  margin: 10px 0 8px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.pg-wrap {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  box-shadow: none !important;
}
.pg-item,
.pg-item.is-landscape,
.pg-item.is-portrait {
  background: transparent !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  outline: none !important;
}
.pg-item img {
  border-radius: 10px !important;
  box-shadow: none !important;
  border: 0 !important;
  background: transparent !important;
}

/* 4) Player full chiều ngang khung xem, đúng 16:9 — không thụt hai bên */
#detailView .player-box,
#detailView #player,
.detail .player-box,
.player-box#player,
#player.player-box {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: #000 !important;
}
#detailView #player video,
#detailView #player iframe,
.player-box video,
.player-box iframe,
.player-box .vp-shell,
#player .vp-shell {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  background: #000 !important;
  border: 0 !important;
}
.vp-shell video {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
}
.vp-shell.aspect-16-9,
.vp-shell.aspect-4-3,
.vp-shell.aspect-auto {
  display: block !important;
}
.vp-shell.aspect-16-9 video,
.vp-shell.aspect-4-3 video,
.vp-shell.aspect-auto video {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  aspect-ratio: auto !important;
}
@media (max-width: 700px) {
  #detailView .player-box,
  #detailView #player,
  .player-box#player {
    max-width: 100% !important;
    max-height: none !important;
    border-radius: 12px !important;
  }
}


/* ===== Chủ đề thể loại — chỉ tô chữ, không nền; hào quang quanh tên ===== */
.list-topic-title,
#listTitle.list-topic-title {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 8px 12px !important;
  margin: 12px 0 16px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  line-height: 1.15 !important;
}
/* Chữ «Chủ đề» — trắng, không nền */
.list-topic-title .topic-kicker,
#listTitle .topic-kicker {
  font-family: 'Bebas Neue', 'Oswald', 'Outfit', system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(1.15rem, 2.6vw, 1.45rem) !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  animation: none !important;
}
/* Tên thể loại (vd Hoạt hình) — giữ font, vàng + hào quang nhẹ */
.list-topic-title .topic-name,
#listTitle .topic-name {
  font-family: 'Bebas Neue', 'Oswald', 'Outfit', system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(1.55rem, 3.6vw, 2.15rem) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #ffd700 !important;
  -webkit-text-fill-color: #ffd700 !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  filter: none !important;
  animation: none !important;
  text-shadow:
    0 0 6px rgba(255, 215, 0, 0.55),
    0 0 14px rgba(255, 200, 60, 0.4),
    0 0 28px rgba(255, 180, 40, 0.22) !important;
}


/* ===== Trang Liên hệ /lienhe — xanh dương ===== */
.contact-view {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 8px 0 48px;
}
.contact-view.hidden { display: none !important; }
.ct-wrap { padding: 0 4px; }
.ct-title {
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  font-weight: 800;
  color: #fff;
  margin: 0 0 12px;
  letter-spacing: -0.02em;
}
.ct-lead {
  color: #9aa3b5;
  font-size: 1rem;
  line-height: 1.65;
  margin: 0 0 28px;
  max-width: 640px;
}
.ct-sec {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  margin: 28px 0 16px;
}
.ct-bar {
  display: inline-block;
  width: 4px;
  height: 1.1em;
  border-radius: 4px;
  background: linear-gradient(180deg, #5b9dff, #3b82f6);
  flex-shrink: 0;
}
.ct-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 700px) {
  .ct-grid { grid-template-columns: 1fr; }
}
.ct-card {
  text-align: left;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  padding: 18px 18px 16px;
  cursor: pointer;
  transition: border-color .2s, background .2s, transform .15s;
  color: inherit;
  font: inherit;
  width: 100%;
}
.ct-card:hover {
  border-color: rgba(59,130,246,0.45);
  background: rgba(59,130,246,0.06);
  transform: translateY(-1px);
}
.ct-ico {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  margin-bottom: 12px;
  color: #5b9dff;
  background: rgba(59,130,246,0.12);
}
.ct-card-title {
  font-weight: 800;
  font-size: 1.05rem;
  color: #eef2f8;
  margin-bottom: 6px;
}
.ct-card-desc {
  color: #8b95a8;
  font-size: 0.88rem;
  line-height: 1.5;
  margin: 0 0 12px;
}
.ct-card-link {
  color: #5b9dff;
  font-weight: 700;
  font-size: 0.92rem;
  margin-bottom: 4px;
}
.ct-card-hint {
  color: #6b7385;
  font-size: 0.78rem;
}
.ct-form {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ct-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 600px) {
  .ct-form-row { grid-template-columns: 1fr; }
}
.ct-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #8b95a8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ct-form input,
.ct-form textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.35);
  color: #eef2f8;
  font: inherit;
  font-size: 0.95rem;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 500;
}
.ct-form input:focus,
.ct-form textarea:focus {
  outline: none;
  border-color: rgba(59,130,246,0.55);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}
.ct-form textarea { resize: vertical; min-height: 120px; }
.ct-submit {
  margin-top: 4px;
  width: 100%;
  padding: 14px 18px;
  border: none;
  border-radius: 999px;
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(120deg, #3b82f6, #2563eb 50%, #1d4ed8);
  box-shadow: 0 8px 24px rgba(37,99,235,0.35);
  transition: filter .15s, transform .15s;
}
.ct-submit:hover { filter: brightness(1.08); transform: translateY(-1px); }
.ct-help {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ct-help-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}
.ct-help-ico {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 1rem;
  color: #5b9dff;
  background: rgba(59,130,246,0.12);
}
.ct-help-item strong {
  display: block;
  color: #eef2f8;
  font-size: 0.98rem;
  margin-bottom: 4px;
}
.ct-help-item p {
  margin: 0;
  color: #8b95a8;
  font-size: 0.88rem;
  line-height: 1.5;
}
.ct-time {
  margin-top: 22px;
  padding: 18px 20px;
  border-radius: 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
}
.ct-time h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 12px;
}
.ct-time ul {
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
}
.ct-time li {
  color: #c5cddc;
  font-size: 0.92rem;
  padding: 5px 0;
}
.ct-time li span { color: #8b95a8; margin-right: 6px; }
.ct-note {
  color: #6b7385;
  font-size: 0.8rem;
  margin: 0;
  line-height: 1.45;
}
body.mode-contact .site-footer { display: none; }

.ct-help-ico svg { display: block; }
.ct-ico svg { display: block; }

/* ============================================================
   Hero poster FILL — lớp ảnh trong khung (từ hero-fixed)
   ============================================================ */
#hero .hero-media,
.hero-slide .hero-media {
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
}
#hero .hero-fill-img,
.hero .hero-fill-img,
.hero-slide .hero-fill-img,
img.hero-fill-img {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  animation: none !important;
  filter: none !important;
  opacity: 1 !important;
  aspect-ratio: auto !important;
}
#hero .hero-blur-bg,
.hero-slide .hero-blur-bg {
  display: none !important;
}

/* ============================================================
   FIX poster full — thắng #hero.hero 62vh / 100vh
   Khung đúng 16:9 + contain = hiện hết ảnh, không cắt đáy
   ============================================================ */
#hero,
#hero.hero,
#hero.hero-carousel,
.hero.hero-carousel,
.hero.hero {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
}
@media (max-width: 700px) {
  #hero,
  #hero.hero,
  #hero.hero-carousel,
  .hero.hero-carousel,
  .hero.hero {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 16 / 9 !important;
  }
}
#hero .hero-fill-img,
#hero.hero .hero-fill-img,
#hero .hero-media .hero-fill-img,
img.hero-fill-img {
  object-fit: contain !important;
  object-position: center center !important;
  min-width: 0 !important;
  min-height: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  animation: none !important;
}
/* Gradient đáy nhẹ hơn — không che mất nửa poster */
#hero .hero-shade,
#hero .hero-overlay,
#hero .hero-vignette {
  background:
    linear-gradient(90deg, rgba(5, 8, 15, 0.72) 0%, rgba(5, 8, 15, 0.28) 30%, transparent 58%) !important;
}