/* ═══════════════════════════════════════════════════════════════════════════
   VIEWER POLISH LAYER — v20260702b
   ───────────────────────────────────────────────────────────────────────────
   Áp dụng SAU style.css + viewer-glass.css. Không đổi bố cục — chỉ:
     • Ambient 3D orbs (thuần CSS, GPU, tự tắt trên mobile & reduced-motion)
     • 3D: tilt theo con trỏ (JS đặt inline transform) + banner float
     • FIX: chữ đè nhau trong banner ĐANG LIVE / TIẾP THEO (flex-wrap)
     • Host stats bar (giờ live theo host trong ngày)
     • Polish: shadow nhiều lớp, focus ring, press state, scrollbar
     • Responsive tinh chỉnh: 1024 / 767 / 480, touch target ≥ 36px
     • Perf: content-visibility cho danh sách card dài
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────── 1. AMBIENT 3D ORBS ─────────────────────────────
   3 quả cầu gradient mờ trôi chậm phía sau nội dung — tạo chiều sâu "3D" mà không
   cần thư viện (three.js ~600KB). transform/opacity → chạy hoàn toàn trên GPU. */

.vg-orbs {
  position: fixed;
  inset: 0;
  z-index: 0;              /* trên lớp nền (-2/-1), dưới .app (1) */
  pointer-events: none;
  overflow: hidden;
}

.vg-orbs i {
  position: absolute;
  display: block;
  border-radius: 50%;
  /* Highlight lệch tâm → nhìn như khối cầu có nguồn sáng */
  background:
    radial-gradient(circle at 32% 28%,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0.0) 38%),
    radial-gradient(circle at 50% 50%,
      var(--orb-c1, rgba(129, 140, 248, 0.38)) 0%,
      var(--orb-c2, rgba(168, 85, 247, 0.18)) 60%,
      transparent 75%);
  filter: blur(16px);
  opacity: 0.8;
  will-change: transform;
}

.vg-orbs i:nth-child(1) {
  --orb-c1: rgba(129, 140, 248, 0.55);
  --orb-c2: rgba(99, 102, 241, 0.22);
  width: 520px; height: 520px;
  top: -140px; right: -110px;
  animation: vg-orb-drift-1 26s ease-in-out infinite;
}

.vg-orbs i:nth-child(2) {
  --orb-c1: rgba(244, 114, 182, 0.48);
  --orb-c2: rgba(236, 72, 153, 0.18);
  width: 400px; height: 400px;
  bottom: -130px; left: 6%;
  animation: vg-orb-drift-2 32s ease-in-out infinite;
}

.vg-orbs i:nth-child(3) {
  --orb-c1: rgba(251, 191, 36, 0.45);
  --orb-c2: rgba(245, 158, 11, 0.16);
  width: 280px; height: 280px;
  top: 36%; left: 44%;
  animation: vg-orb-drift-3 38s ease-in-out infinite;
}

[data-theme="dark"] .vg-orbs i,
body.dark-theme .vg-orbs i { opacity: 0.55; }

@keyframes vg-orb-drift-1 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-60px, 50px, 0) scale(1.12); }
}
@keyframes vg-orb-drift-2 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(70px, -45px, 0) scale(0.92); }
}
@keyframes vg-orb-drift-3 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33%      { transform: translate3d(-45px, -55px, 0) scale(1.08); }
  66%      { transform: translate3d(40px, 30px, 0) scale(0.95); }
}

/* Mobile: tắt orbs — tiết kiệm pin/GPU máy yếu, màn nhỏ cũng không thấy rõ */
@media (max-width: 768px) {
  .vg-orbs { display: none; }
}

/* ───────────────────────────── 1A-2. VẬT THỂ 3D NỔI BẬT ─────────────────────────────
   Con quay hồi chuyển (gyroscope) + khối lập phương kính — CSS 3D transform thật
   (preserve-3d, rotate3d), LUÔN nhìn thấy được, không cần hover. GPU-only. */

/* — Gyroscope: 3 vòng quay 3 trục khác nhau quanh lõi cầu phát sáng — */
.vg-3d-gyro {
  position: fixed;
  right: clamp(10px, 2.2vw, 44px);
  top: 17vh;
  width: 150px;
  height: 150px;
  z-index: 2;                /* nổi trên nền, pointer-events none nên không cản click */
  pointer-events: none;
  opacity: 0.85;
}

/* ───────── ROBOT trợ lý (thuần CSS) — rê chuột vào để robot "nói" thông tin lịch ───────── */
.vg-bot-figure {
  position: absolute;
  left: 50%; bottom: 6px; transform: translateX(-50%);
  width: 96px; height: 116px;
  animation: vg-bot-float 3.6s ease-in-out infinite;
  filter: drop-shadow(0 12px 22px rgba(99, 102, 241, 0.42));
}
@keyframes vg-bot-float { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-7px); } }

/* Ăng-ten + đèn nhấp nháy */
.vg-bot-antenna {
  position: absolute; left: 50%; top: 2px; transform: translateX(-50%);
  width: 3px; height: 14px; border-radius: 2px;
  background: linear-gradient(#a5b4fc, #6366f1);
}
.vg-bot-antenna::after {
  content: ''; position: absolute; left: 50%; top: -7px;
  width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #fff, #f472b6 55%, #ec4899);
  box-shadow: 0 0 10px 3px rgba(236, 72, 153, 0.75);
  animation: vg-bot-blip 1.8s ease-in-out infinite;
}
@keyframes vg-bot-blip {
  0%, 100% { transform: translateX(-50%) scale(1); opacity: 1; }
  50%      { transform: translateX(-50%) scale(1.28); opacity: .6; }
}

/* Đầu + tai */
.vg-bot-head {
  position: absolute; left: 50%; top: 14px; transform: translateX(-50%);
  width: 84px; height: 62px; border-radius: 20px;
  background: linear-gradient(150deg, #ffffff, #e0e7ff 55%, #c7d2fe);
  border: 1.5px solid rgba(99, 102, 241, 0.5);
  box-shadow: inset 0 -6px 12px rgba(99, 102, 241, 0.16), 0 6px 14px -6px rgba(99, 102, 241, 0.5);
}
.vg-bot-head::before, .vg-bot-head::after {
  content: ''; position: absolute; top: 20px;
  width: 6px; height: 16px; border-radius: 3px;
  background: linear-gradient(#a5b4fc, #6366f1);
}
.vg-bot-head::before { left: -7px; }
.vg-bot-head::after { right: -7px; }

/* Mặt kính + 2 mắt (chớp) */
.vg-bot-face {
  position: absolute; left: 50%; top: 13px; transform: translateX(-50%);
  width: 60px; height: 28px; border-radius: 14px;
  background: linear-gradient(160deg, #1e293b, #0f172a);
  display: flex; align-items: center; justify-content: center; gap: 12px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5);
}
.vg-bot-eye {
  width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #fff, #67e8f9 45%, #06b6d4);
  box-shadow: 0 0 8px 2px rgba(34, 211, 238, 0.85);
  animation: vg-bot-blink 4.2s ease-in-out infinite;
}
@keyframes vg-bot-blink { 0%, 92%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.12); } }

/* Miệng — mấp máy như đang nói khi hover */
.vg-bot-mouth {
  position: absolute; left: 50%; bottom: 9px; transform: translateX(-50%);
  width: 22px; height: 4px; border-radius: 999px;
  background: rgba(99, 102, 241, 0.55);
  transition: height .15s ease;
}
.vg-3d-gyro:hover .vg-bot-mouth { animation: vg-bot-talk .38s ease-in-out infinite; }
@keyframes vg-bot-talk {
  0%, 100% { height: 4px; border-radius: 999px; }
  50%      { height: 10px; border-radius: 8px; }
}

/* Thân + tay + đèn ngực */
.vg-bot-torso {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 66px; height: 40px; border-radius: 14px 14px 16px 16px;
  background: linear-gradient(160deg, #eef2ff, #c7d2fe);
  border: 1.5px solid rgba(99, 102, 241, 0.45);
  box-shadow: inset 0 -5px 10px rgba(99, 102, 241, 0.18);
}
.vg-bot-torso::before, .vg-bot-torso::after {
  content: ''; position: absolute; top: 5px;
  width: 7px; height: 22px; border-radius: 4px;
  background: linear-gradient(#c7d2fe, #818cf8);
}
.vg-bot-torso::before { left: -9px; transform-origin: top center; animation: vg-bot-wave 3.6s ease-in-out infinite; }
.vg-bot-torso::after { right: -9px; }
@keyframes vg-bot-wave { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-18deg); } }

.vg-bot-chest {
  position: absolute; left: 50%; top: 11px;
  width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 34% 32%, #fff, #a5b4fc 45%, #6366f1);
  animation: vg-bot-chest-pulse 2.4s ease-in-out infinite;
}
@keyframes vg-bot-chest-pulse {
  0%, 100% { transform: translateX(-50%) scale(1);    box-shadow: 0 0 10px 2px rgba(99, 102, 241, 0.5); }
  50%      { transform: translateX(-50%) scale(1.14); box-shadow: 0 0 18px 5px rgba(99, 102, 241, 0.75); }
}

/* Bong bóng GỢI Ý — mời người dùng rê chuột; tự ẩn khi đã hover */
.vg-bot-hint {
  /* Neo sát THÂN robot, không theo khung bọc 150px: robot rộng 96px nằm giữa → mép trái
     (kể cả tai) ở ~26px. Đặt mép phải bong bóng ở 18px → cách tai ~8px, đuôi chạm robot. */
  position: absolute; right: calc(100% - 18px); top: 30px;
  display: flex; flex-direction: column; gap: 1px;
  white-space: nowrap;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff; padding: 8px 12px; border-radius: 12px;
  box-shadow: 0 10px 24px -8px rgba(99, 102, 241, 0.85);
  pointer-events: none;
  animation: vg-bot-hint-bob 2.4s ease-in-out infinite;
  transition: opacity .2s ease;
}
.vg-bot-hint b { font-size: .74rem; font-weight: 800; }
.vg-bot-hint i { font-style: normal; font-size: .63rem; opacity: .88; }
.vg-bot-hint::after { /* đuôi bong bóng chỉ về robot */
  content: ''; position: absolute; right: -4px; top: 15px;
  width: 10px; height: 10px; transform: rotate(45deg);
  background: #8b5cf6;
}
@keyframes vg-bot-hint-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.vg-3d-gyro:hover .vg-bot-hint { opacity: 0; }

/* ── Bong bóng tự ĐỔI HƯỚNG theo góc robot (JS gán data-hx / data-vy) ──
   Robot ở góc trái → bong bóng lật sang phải; ở nửa dưới → neo lên trên. Tránh tràn khung. */
.vg-bot[data-hx="r"] .vg-bot-hint { right: auto; left: calc(100% - 18px); }
.vg-bot[data-hx="r"] .vg-bot-hint::after { right: auto; left: -4px; }
.vg-bot[data-vy="b"] .vg-bot-hint { top: auto; bottom: 30px; }
.vg-bot[data-vy="b"] .vg-bot-hint::after { top: auto; bottom: 15px; }

/* — Khối lập phương kính 6 mặt xoay liên tục — */
.vg-3d-cube {
  position: fixed;
  left: 56%;
  bottom: 8vh;
  width: 72px;
  height: 72px;
  z-index: 0;                /* sau content — lấp ló ở vùng nền trống */
  pointer-events: none;
  transform-style: preserve-3d;
  animation: vg-cube-spin 16s linear infinite;
  opacity: 0.9;
}
.vg-3d-cube i {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(129, 140, 248, 0.32), rgba(236, 72, 153, 0.2));
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.22);
}
.vg-3d-cube i:nth-child(1) { transform: translateZ(36px); }
.vg-3d-cube i:nth-child(2) { transform: rotateY(180deg) translateZ(36px); }
.vg-3d-cube i:nth-child(3) { transform: rotateY(90deg)  translateZ(36px); }
.vg-3d-cube i:nth-child(4) { transform: rotateY(-90deg) translateZ(36px); }
.vg-3d-cube i:nth-child(5) { transform: rotateX(90deg)  translateZ(36px); }
.vg-3d-cube i:nth-child(6) { transform: rotateX(-90deg) translateZ(36px); }

@keyframes vg-cube-spin {
  from { transform: rotateX(-20deg) rotateY(0deg); }
  to   { transform: rotateX(-20deg) rotateY(360deg); }
}

[data-theme="dark"] .vg-3d-cube i,
body.dark-theme .vg-3d-cube i { border-color: rgba(255, 255, 255, 0.3); }

/* — PANEL THÔNG TIN khi hover con quay: 3 THẺ SỔ XUỐNG LẦN LƯỢT,
     mỗi thẻ ăn màu đúng 1 vòng con quay (indigo → hồng → cam) — */
.vg-gyro-info {
  position: fixed;
  right: calc(clamp(10px, 2.2vw, 44px) + 162px); /* sát bên trái con quay */
  top: 15vh;
  width: 288px;   /* khớp pw trong placePanel() — rộng hơn để nhãn không bị cắt */
  z-index: 3;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  visibility: hidden;
}
.vg-gyro-info.show { visibility: visible; }

/* Header tên trang — lật ra trước tiên */
.vg-gi-head {
  position: relative;   /* mốc cho đuôi bong bóng ::after */
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 0.8rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.01em;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 12px;
  padding: 9px 13px;
  box-shadow: 0 10px 26px -12px rgba(99, 102, 241, 0.35);
  flex-wrap: wrap;              /* tên dài → xuống dòng, không cắt chữ */
  opacity: 0;
  transform: perspective(700px) rotateX(-40deg) translateY(-10px);
  transform-origin: top center;
  transition: transform 0.3s cubic-bezier(0.22, 0.9, 0.3, 1.15), opacity 0.2s ease;
}
.vg-gi-head small { font-weight: 600; font-size: 0.64rem; color: #94a3b8 }

/* Đuôi bong bóng thoại — chỉ về phía robot (đổi bên khi panel lật sang phải) */
.vg-gi-head::after {
  content: ''; position: absolute; top: 14px; right: -6px;
  width: 12px; height: 12px; transform: rotate(45deg);
  background: rgba(255, 255, 255, 0.9);
  border-right: 1px solid rgba(255, 255, 255, 0.75);
  border-top: 1px solid rgba(255, 255, 255, 0.75);
}
.vg-gyro-info.flip .vg-gi-head::after { right: auto; left: -6px; transform: rotate(225deg); }
[data-theme="dark"] .vg-gi-head::after, body.dark-theme .vg-gi-head::after { background: rgba(15, 23, 42, 0.9); border-color: rgba(255, 255, 255, 0.12); }

/* 3 thẻ — sổ xuống so le như 3 vòng quay tách ra */
.vg-gi-card {
  --gi-accent: #6366f1;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-left: 3px solid var(--gi-accent);
  border-radius: 12px;
  padding: 9px 13px 10px;
  box-shadow: 0 12px 30px -14px var(--gi-accent);
  opacity: 0;
  transform: perspective(700px) rotateX(-40deg) translateY(-12px);
  transform-origin: top center;
  transition: transform 0.32s cubic-bezier(0.22, 0.9, 0.3, 1.18), opacity 0.22s ease;
}
.vg-gi-c1 { --gi-accent: #6366f1 } /* vòng 1 — indigo */
.vg-gi-c2 { --gi-accent: #ec4899 } /* vòng 2 — hồng */
.vg-gi-c3 { --gi-accent: #f59e0b } /* vòng 3 — cam */

/* Sổ xuống LẦN LƯỢT: header → thẻ 1 → thẻ 2 → thẻ 3 */
.vg-gyro-info.show .vg-gi-head { opacity: 1; transform: none; transition-delay: 0s }
.vg-gyro-info.show .vg-gi-c1 { opacity: 1; transform: none; transition-delay: 0.08s }
.vg-gyro-info.show .vg-gi-c2 { opacity: 1; transform: none; transition-delay: 0.17s }
.vg-gyro-info.show .vg-gi-c3 { opacity: 1; transform: none; transition-delay: 0.26s }

.vg-gi-card-head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gi-accent);
  margin-bottom: 6px;
}
.vg-gi-card-head span { flex: 1 }
.vg-gi-card-head em {
  font-style: normal;
  background: var(--gi-accent);
  color: #fff;
  border-radius: 999px;
  min-width: 20px;
  text-align: center;
  padding: 1px 7px;
  font-size: 0.64rem;
  font-variant-numeric: tabular-nums;
}
/* Chấm vòng — echo lại vòng quay của con quay */
.vg-gi-ring {
  width: 11px; height: 11px;
  border-radius: 50%;
  border: 2px solid var(--gi-accent);
  border-top-color: transparent;
  flex-shrink: 0;
  animation: vg-gi-spin 2.4s linear infinite;
}
@keyframes vg-gi-spin { to { transform: rotate(360deg) } }

/* Mỗi dòng: icon bên trái, giá trị ĐẬM ở trên, nhãn mô tả xuống dòng dưới.
   Xếp dọc + cho xuống dòng tự do → KHÔNG còn cắt chữ (trước đây ellipsis 1 hàng). */
.vg-gi-row {
  display: grid;
  grid-template-columns: 18px 1fr;
  grid-template-areas: "icon main" "icon sub";
  gap: 0 8px;
  padding: 3px 0;
  font-size: 0.74rem;
}
.vg-gi-row span { grid-area: icon; text-align: center; align-self: start; line-height: 1.5 }
.vg-gi-row b {
  grid-area: main;
  font-size: 0.86rem; font-weight: 800; color: #1e293b;
  font-variant-numeric: tabular-nums;
  line-height: 1.35; overflow-wrap: anywhere;
}
.vg-gi-row small {
  grid-area: sub;
  color: #64748b; font-size: 0.66rem; line-height: 1.35;
  overflow-wrap: anywhere;
}

[data-theme="dark"] .vg-gi-head, body.dark-theme .vg-gi-head,
[data-theme="dark"] .vg-gi-card, body.dark-theme .vg-gi-card { background: rgba(15, 23, 42, 0.9); border-color: rgba(255, 255, 255, 0.12); color: #f1f5f9 }
[data-theme="dark"] .vg-gi-card, body.dark-theme .vg-gi-card { border-left-color: var(--gi-accent) }
[data-theme="dark"] .vg-gi-row b, body.dark-theme .vg-gi-row b { color: #e2e8f0 }
@media (prefers-reduced-motion: reduce) {
  .vg-gi-head, .vg-gi-card { transition: none } .vg-gi-ring { animation: none }
}

/* — TẮT HIỆU ỨNG 3D theo filter link (settings.show_3d = false → body.vg-no-3d) — */
.vg-no-3d .vg-orbs,
.vg-no-3d .vg-3d-gyro,
.vg-no-3d .vg-3d-cube,
.vg-no-3d .vg-gyro-info { display: none !important; }
.vg-no-3d .highlight-card { animation: none !important; }
.vg-no-3d .schedule-card,
.vg-no-3d .schedule-row { animation: none !important; }

/* Màn hẹp: ẩn vật thể 3D — tránh đè nội dung + tiết kiệm pin */
@media (max-width: 1100px) {
  .vg-3d-gyro, .vg-gyro-info { display: none; }
}
@media (max-width: 768px) {
  .vg-3d-cube { display: none; }
}

/* — 3D ENTRANCE: card lật dựng lên khi trang load lần đầu —
   Chỉ chạy 1 lần (JS thêm class vg-intro-done sau vài giây) → soft refresh không replay. */
body:not(.vg-intro-done) .schedule-grid .schedule-card,
body:not(.vg-intro-done) .schedule-list .schedule-row,
body:not(.vg-intro-done) .highlight-card {
  animation: vg-card-in 0.55s cubic-bezier(0.22, 0.9, 0.3, 1.15) backwards;
}
body:not(.vg-intro-done) .schedule-grid .schedule-card:nth-child(2) { animation-delay: 0.06s; }
body:not(.vg-intro-done) .schedule-grid .schedule-card:nth-child(3) { animation-delay: 0.12s; }
body:not(.vg-intro-done) .schedule-grid .schedule-card:nth-child(4) { animation-delay: 0.18s; }
body:not(.vg-intro-done) .schedule-grid .schedule-card:nth-child(5) { animation-delay: 0.24s; }
body:not(.vg-intro-done) .schedule-grid .schedule-card:nth-child(6) { animation-delay: 0.30s; }
body:not(.vg-intro-done) .schedule-grid .schedule-card:nth-child(n+7) { animation-delay: 0.36s; }
body:not(.vg-intro-done) .next-card { animation-delay: 0.1s; }

@keyframes vg-card-in {
  from { opacity: 0; transform: perspective(900px) rotateX(12deg) translateY(28px); }
  to   { opacity: 1; transform: perspective(900px) rotateX(0deg) translateY(0); }
}

/* ───────────────────────────── 1B. FIX BANNER ĐANG LIVE / TIẾP THEO ─────────────────────────────
   Bug: ở bề rộng trung bình (2 banner cạnh nhau), badge "Đang phát · Còn Xp" và ô countdown
   "BẮT ĐẦU SAU" chiếm chỗ → chips/giờ tràn khỏi vùng content, chữ ĐÈ LÊN NHAU.
   Fix: cho card wrap — khi thiếu chỗ, badge/countdown tự xuống hàng riêng thay vì đè. */

.highlight-card {
  flex-wrap: wrap;
  row-gap: 10px;
}

/* Content phải giữ tối thiểu ~240px; hẹp hơn → đẩy badge xuống hàng mới */
.highlight-card .highlight-content {
  min-width: min(240px, 100%);
  flex-basis: 240px;
}

/* Badge/countdown: căn phải hàng của nó (kể cả khi đã wrap xuống hàng riêng) */
.highlight-card .live-badge,
.highlight-card .highlight-countdown {
  margin-left: auto;
}

/* Chip meta không được rộng hơn vùng chứa — cắt bớt thay vì tràn */
.highlight-meta .meta-chip {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Giờ to (08:00 → 10:00) co chữ theo chỗ trống thay vì tràn */
.highlight-time {
  font-size: clamp(1.15rem, 5.2vw, 1.9rem);
  white-space: nowrap;
}
@media (min-width: 1024px) {
  .highlight-time { font-size: clamp(1.25rem, 2vw, 1.9rem); }
}

/* ───────────────────────────── 1C. HOST STATS BAR ─────────────────────────────
   Tổng giờ live theo host trong ngày — dải chip gọn phía trên "Lịch phát sóng",
   thu gọn được, không chiếm chỗ của lịch. */

.host-stats {
  margin: 0 0 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 4px 16px -6px rgba(99, 102, 241, 0.14);
  overflow: hidden;
}

[data-theme="dark"] .host-stats,
body.dark-theme .host-stats {
  background: rgba(15, 23, 42, 0.82);
  border-color: rgba(255, 255, 255, 0.1);
}

.host-stats-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  color: #6366f1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.host-stats-head:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px rgba(99, 102, 241, 0.3);
}

.host-stats-title { flex: 1; text-align: left; }

.host-stats-chevron {
  transition: transform 0.22s ease;
  font-size: 0.72rem;
  opacity: 0.7;
}
.host-stats.collapsed .host-stats-chevron { transform: rotate(-90deg); }

.host-stats-body {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 14px 12px;
}
.host-stats.collapsed .host-stats-body { display: none; }

.host-stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px 5px 6px;
  border-radius: 999px;
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.16);
  max-width: 100%;
}

[data-theme="dark"] .host-stat-chip,
body.dark-theme .host-stat-chip {
  background: rgba(129, 140, 248, 0.12);
  border-color: rgba(129, 140, 248, 0.22);
}

.hs-avatar {
  width: 22px; height: 22px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.hs-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
}

.hs-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary, #1e293b);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 130px;
}
[data-theme="dark"] .hs-name, body.dark-theme .hs-name { color: #e2e8f0; }

.hs-time {
  font-size: 0.8rem;
  font-weight: 800;
  color: #6366f1;
  font-variant-numeric: tabular-nums;
}
.hs-count {
  font-size: 0.66rem;
  font-weight: 700;
  color: #94a3b8;
  background: rgba(148, 163, 184, 0.14);
  padding: 1px 7px;
  border-radius: 999px;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .host-stats-body { gap: 6px; padding: 0 10px 10px; }
  .host-stat-chip { padding: 4px 8px 4px 5px; gap: 5px; }
  .hs-name { max-width: 92px; font-size: 0.74rem; }
  .hs-time { font-size: 0.74rem; }
}

/* ───────────────────────────── 2. 3D TILT HOVER (desktop) ─────────────────────────────
   Tilt CHÍNH chạy bằng JS (setup3DTilt — nghiêng theo con trỏ). CSS dưới đây là fallback
   + shadow khi hover. Banner có thêm hiệu ứng FLOAT 3D nhẹ khi không hover. */

@media (hover: hover) and (pointer: fine) {
  /* Banner ĐANG LIVE / TIẾP THEO lơ lửng — chỉ khi KHÔNG hover (hover → JS tilt tiếp quản) */
  .highlight-card:not(:hover) {
    animation: vg-float 6s ease-in-out infinite;
  }
  .next-card:not(:hover) { animation-delay: 1.4s; }
}

@keyframes vg-float {
  0%, 100% { transform: perspective(900px) rotateX(0deg) translateY(0); }
  50%      { transform: perspective(900px) rotateX(0.8deg) translateY(-5px); }
}

@media (hover: hover) and (pointer: fine) {
  .schedule-card {
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.22s ease;
    transform-style: preserve-3d;
  }
  .schedule-card:hover {
    transform: perspective(900px) rotateX(1.4deg) translateY(-5px) scale(1.006);
    box-shadow:
      0 18px 40px -12px rgba(99, 102, 241, 0.22),
      0 8px 16px -8px rgba(15, 23, 42, 0.12),
      0 1px 0 rgba(255, 255, 255, 0.85) inset;
  }
  [data-theme="dark"] .schedule-card:hover,
  body.dark-theme .schedule-card:hover {
    box-shadow:
      0 18px 40px -12px rgba(0, 0, 0, 0.55),
      0 8px 16px -8px rgba(99, 102, 241, 0.25);
  }

  .flx-card { transition: transform 0.18s ease, box-shadow 0.18s ease; }
  .flx-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px -8px rgba(99, 102, 241, 0.2);
  }

  /* Banner ĐANG LIVE / TIẾP THEO nổi nhẹ khi hover */
  .highlight-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
  .highlight-card:hover { transform: translateY(-3px); }
}

/* ───────────────────────────── 3. POLISH CHUNG ───────────────────────────── */

/* Press state — mọi nút bấm có phản hồi vật lý */
.filter-tab:active,
.view-btn:active,
.btn:active,
.btn-copy-title:active,
.flxlb-btn:active,
.keep-live-merged-toggle:active {
  transform: scale(0.96);
}

/* Focus ring rõ ràng cho keyboard navigation (không phá outline mặc định của touch) */
.filter-tab:focus-visible,
.view-btn:focus-visible,
.btn:focus-visible,
.btn-copy-title:focus-visible,
.modal-close:focus-visible,
.lightbox-close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.35);
  border-radius: 8px;
}

/* Copy button rõ hơn khi hover */
.btn-copy-title { transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease; }
.btn-copy-title:hover {
  background: rgba(99, 102, 241, 0.12);
  color: #6366f1;
}

/* Scrollbar mảnh, đồng bộ palette */
.content::-webkit-scrollbar,
.sidebar-content::-webkit-scrollbar,
.events-modal-body::-webkit-scrollbar,
.modal-scroll-content::-webkit-scrollbar,
.kl-modal-body::-webkit-scrollbar {
  width: 8px; height: 8px;
}
.content::-webkit-scrollbar-thumb,
.sidebar-content::-webkit-scrollbar-thumb,
.events-modal-body::-webkit-scrollbar-thumb,
.modal-scroll-content::-webkit-scrollbar-thumb,
.kl-modal-body::-webkit-scrollbar-thumb {
  background: rgba(99, 102, 241, 0.28);
  border-radius: 8px;
}
.content::-webkit-scrollbar-thumb:hover,
.sidebar-content::-webkit-scrollbar-thumb:hover {
  background: rgba(99, 102, 241, 0.45);
}
.content::-webkit-scrollbar-track,
.sidebar-content::-webkit-scrollbar-track { background: transparent; }

/* Badge LIVE: glow động rõ hơn */
.kl-live-badge .kl-live-dot,
.status-badge.live::before {
  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6);
  animation: vg-live-glow 1.6s ease-out infinite;
}
@keyframes vg-live-glow {
  0%   { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); }
  100% { box-shadow: 0 0 0 7px rgba(239, 68, 68, 0); }
}

/* Toast: bo + shadow mềm hơn */
.toast {
  border-radius: 12px !important;
  box-shadow: 0 10px 28px -8px rgba(15, 23, 42, 0.28) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Empty state thân thiện hơn */
.state.empty i { opacity: 0.5; }
.state.empty h3 { letter-spacing: -0.01em; }

/* ───────────────────────────── 4. PERF RENDER ─────────────────────────────
   content-visibility: trình duyệt bỏ qua layout/paint card ngoài viewport
   → render lần đầu nhanh hơn hẳn khi danh sách dài (50+ ca). */

.schedule-grid .schedule-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 340px;
}
.schedule-list .schedule-row {
  content-visibility: auto;
  contain-intrinsic-size: auto 96px;
}
.flx-grid .flx-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 190px;
}

/* ───────────────────────────── 5. RESPONSIVE TINH CHỈNH ───────────────────────────── */

/* Tablet (768–1023): giảm khoảng trống, giữ label */
@media (max-width: 1023px) {
  .content { padding-left: 14px; padding-right: 14px; }
  .schedule-grid { gap: 12px; }
}

/* Mobile L (481–767): touch target chuẩn, tab cuộn ngang không tràn */
@media (max-width: 767px) {
  .filter-tab,
  .view-btn {
    min-height: 38px;
    min-width: 38px;
  }
  .btn-copy-title { min-width: 34px; min-height: 34px; }

  .filter-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .filter-tabs::-webkit-scrollbar { display: none; }

  /* Card 1 cột trên điện thoại — tránh chữ bị bóp */
  .schedule-grid { grid-template-columns: 1fr !important; }

  .highlight-banners { grid-template-columns: 1fr !important; }

  /* Modal chiếm gần trọn màn hình nhưng vẫn có mép thở */
  .modal-box,
  .events-modal-box,
  .kl-modal-box {
    max-width: calc(100vw - 16px) !important;
    max-height: 92vh !important;
  }
}

/* Mobile S (≤480): nén padding + font, header gọn */
@media (max-width: 480px) {
  .content { padding-left: 10px; padding-right: 10px; }
  .header { padding-left: 10px; padding-right: 10px; }
  .page-title h1 { font-size: 1.05rem; }
  .page-subtitle { font-size: 0.7rem; }

  .schedule-card .card-body { padding: 12px; }
  .section-header-unified { padding: 10px 12px; }

  .flx-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important; }

  /* Lightbox file: dọc thay vì ngang */
  .flxlb-box { flex-direction: column; max-height: 94vh; }
  .flxlb-preview { min-height: 240px; }
}

/* ───────────────────────────── QR ỨNG DỤNG — popup đè lên thông báo ─────────────────────────────
   z-index 30000 > announcement modal → luôn nổi trên cùng. Hết giờ tự gỡ (JS timer). */

.qra-overlay {
  position: fixed;
  inset: 0;
  z-index: 30000;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  animation: qra-fade 0.25s ease;
}
@keyframes qra-fade { from { opacity: 0 } to { opacity: 1 } }

.qra-box {
  position: relative;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 20px;
  width: 380px;
  max-width: 94vw;
  max-height: 88vh;
  overflow-y: auto;
  padding: 20px;
  box-shadow: 0 30px 80px -20px rgba(15, 23, 42, 0.5);
  animation: qra-pop 0.32s cubic-bezier(0.22, 0.9, 0.3, 1.18);
}
@keyframes qra-pop { from { opacity: 0; transform: translateY(22px) scale(0.96) } to { opacity: 1; transform: none } }

.qra-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 32px; height: 32px;
  border-radius: 10px;
  border: none;
  background: #f1f5f9;
  color: #64748b;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.15s ease;
  z-index: 1;
}
.qra-close:hover { background: #e2e8f0; color: #0f172a }
.qra-close:active { transform: scale(0.92) }

.qra-app + .qra-app { margin-top: 18px; padding-top: 18px; border-top: 1px dashed rgba(148, 163, 184, 0.4) }
.qra-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; padding-right: 36px }
.qra-logo { width: 46px; height: 46px; border-radius: 13px; object-fit: cover; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15); flex-shrink: 0 }
.qra-name { font-size: 1rem; font-weight: 800; color: #0f172a; letter-spacing: -0.01em; display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.qra-name small { font-size: 0.66rem; font-weight: 600; color: #94a3b8 }
.qra-content { font-size: 0.8rem; color: #475569; line-height: 1.55; margin-bottom: 12px; white-space: pre-wrap; word-break: break-word }
.qra-qr { display: flex; justify-content: center; padding: 12px; background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; margin-bottom: 12px }
/* Đếm ngược từng giây — 3 ô số giờ/phút/giây */
.qra-cd {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px;
  padding: 11px 12px;
  background: linear-gradient(135deg, #f8fafc, #eef2ff);
  border: 1px solid #e2e8f0;
  border-radius: 14px;
}
.qra-cd-label { font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b }
.qra-cd-label i { color: #6366f1; margin-right: 4px }
.qra-cd-clock { display: flex; align-items: flex-start; gap: 7px }
.qra-cd-clock > i { font-style: normal; font-weight: 900; font-size: 1.15rem; color: #94a3b8; line-height: 1.9 }
.qra-cd-seg { display: flex; flex-direction: column; align-items: center; gap: 3px }
.qra-cd-seg b {
  min-width: 46px;
  text-align: center;
  background: #0f172a;
  color: #fff;
  border-radius: 10px;
  padding: 7px 8px;
  font-size: 1.25rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
  box-shadow: 0 4px 10px -4px rgba(15, 23, 42, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.qra-cd-seg small { font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #94a3b8 }
.qra-cd-sec b { background: linear-gradient(135deg, #6366f1, #8b5cf6) }
/* Phút cuối: chuyển đỏ + nhấp nháy nhẹ */
.qra-cd-urgent { border-color: #fca5a5; background: linear-gradient(135deg, #fef2f2, #fff1f2) }
.qra-cd-urgent .qra-cd-label { color: #dc2626 }
.qra-cd-urgent .qra-cd-seg b { background: linear-gradient(135deg, #dc2626, #ef4444); animation: qra-blink 1s ease-in-out infinite }
@keyframes qra-blink { 50% { opacity: 0.75 } }

[data-theme="dark"] .qra-cd, body.dark-theme .qra-cd { background: #1e293b; border-color: #334155 }

.qra-open {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px; border-radius: 12px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff; font-size: 0.82rem; font-weight: 700; text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 6px 16px -6px rgba(99, 102, 241, 0.5);
}
/* color/text-decoration PHẢI khai báo lại ở :hover — rule toàn cục `a:hover` (style.css)
   specificity cao hơn `.qra-open` base → nếu thiếu, hover chữ đổi màu primary + gạch chân
   chìm vào nền gradient tím ("mờ mất"). */
.qra-open:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -6px rgba(99, 102, 241, 0.55);
  color: #fff; text-decoration: none;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
}
.qra-open:focus, .qra-open:focus-visible { color: #fff; text-decoration: none }
.qra-open:active { transform: scale(0.98); color: #fff }

[data-theme="dark"] .qra-box, body.dark-theme .qra-box { background: rgba(15, 23, 42, 0.96); border-color: rgba(255, 255, 255, 0.12) }
[data-theme="dark"] .qra-name, body.dark-theme .qra-name { color: #f1f5f9 }
[data-theme="dark"] .qra-close, body.dark-theme .qra-close { background: #334155; color: #cbd5e1 }
[data-theme="dark"] .qra-qr, body.dark-theme .qra-qr { border-color: #334155 }

/* ───────────────────────────── BỘ CÔNG CỤ NGƯỜI XEM (5 tính năng) ─────────────────────────────
   F1 Nhảy tới ca LIVE · F2 Dòng thời gian · F3 Theo dõi host · F4 Sao chép · F5 Lọc chip */

/* F1 — nút nổi Nhảy tới ca ĐANG LIVE (GIỮA chân trang, pulse) */
.vg-live-btn {
  position: fixed;
  /* Màn hẹp: credit ở đáy → nút nằm TRÊN credit. (≥1200px credit lên topbar → nút xuống sát đáy). */
  left: 50%; bottom: calc(var(--vc-h, 52px) + 22px);
  transform: translateX(-50%);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 14px 34px -10px rgba(239, 68, 68, 0.65);
  animation: vg-live-btn-pulse 1.8s ease-out infinite;
}
/* Đủ rộng → credit lên topbar → nút "đang live" xuống sát đáy */
@media (min-width: 1200px) { .vg-live-btn { bottom: 18px; } }
.vg-live-btn:hover { transform: translateX(-50%) translateY(-2px); }
.vg-live-btn:active { transform: translateX(-50%) scale(0.96); }
.vg-live-dot { width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); animation: vg-livedot 1.4s ease-out infinite; }
@keyframes vg-livedot { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); } 100% { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); } }
@keyframes vg-live-btn-pulse { 0%, 100% { box-shadow: 0 14px 34px -10px rgba(239, 68, 68, 0.6); } 50% { box-shadow: 0 14px 40px -8px rgba(239, 68, 68, 0.85); } }

/* Toolbar #vgBar (chèn trong khu lịch, trên grid) */
.vg-bar {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 16px;
  padding: 12px 14px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
[data-theme="dark"] .vg-bar, body.dark-theme .vg-bar { background: rgba(15, 23, 42, 0.6); border-color: rgba(255, 255, 255, 0.1); }

/* F2 — dòng thời gian */
.vg-tl-label { font-size: 0.72rem; font-weight: 800; color: #6366f1; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
.vg-tl-label i { margin-right: 5px; }
.vg-tl-track { overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; }
.vg-tl-track::-webkit-scrollbar { height: 7px; }
.vg-tl-track::-webkit-scrollbar-thumb { background: rgba(99, 102, 241, 0.3); border-radius: 8px; }
.vg-tl-inner { position: relative; min-height: 56px; }
.vg-tl-tick { position: absolute; top: 0; font-size: 0.6rem; font-weight: 700; color: #94a3b8; border-left: 1px dashed rgba(148, 163, 184, 0.4); padding-left: 3px; height: 100%; white-space: nowrap; }
.vg-tl-tick-next { color: #a855f7; border-left-color: rgba(168, 85, 247, 0.5); } /* giờ SANG NGÀY HÔM SAU (ca qua đêm) */
.vg-tl-now { position: absolute; top: 16px; bottom: 0; width: 2px; background: #ef4444; z-index: 3; box-shadow: 0 0 8px rgba(239, 68, 68, 0.6); }
.vg-tl-now::before { content: ''; position: absolute; top: -4px; left: -3px; width: 8px; height: 8px; border-radius: 50%; background: #ef4444; }
.vg-tl-block {
  position: absolute;
  height: 24px;
  border-radius: 7px;
  padding: 0 7px;
  font-size: 0.64rem;
  line-height: 24px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  color: #fff;
  box-shadow: 0 2px 6px -2px rgba(15, 23, 42, 0.3);
  transition: transform 0.12s ease, filter 0.12s ease;
}
.vg-tl-block:hover { transform: translateY(-1px); filter: brightness(1.08); z-index: 4; }
.vg-tl-block b { font-weight: 800; }
.vg-tl-live { background: linear-gradient(135deg, #ef4444, #dc2626); }
.vg-tl-upcoming { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.vg-tl-past { background: linear-gradient(135deg, #94a3b8, #64748b); opacity: 0.7; }

/* F5 — chip lọc Phòng / Platform */
.vg-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.vg-chips-lbl { font-size: 0.68rem; font-weight: 700; color: #94a3b8; margin-right: 2px; }
.vg-chip {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1.5px solid #e2e8f0;
  background: #fff;
  color: #475569;
  cursor: pointer;
  transition: all 0.13s ease;
}
.vg-chip:hover { border-color: #c7d2fe; }
.vg-chip.on { background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; border-color: transparent; }
.vg-chip-clear { border-color: #fca5a5; color: #dc2626; }
[data-theme="dark"] .vg-chip, body.dark-theme .vg-chip { background: #1e293b; border-color: #334155; color: #cbd5e1; }

/* F3/F4 — nút hành động */
.vg-bar-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.vg-act {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.74rem; font-weight: 700;
  padding: 7px 14px;
  border-radius: 10px;
  border: 1.5px solid #e2e8f0;
  background: #fff;
  color: #475569;
  cursor: pointer;
  transition: all 0.14s ease;
}
.vg-act:hover { border-color: #818cf8; color: #4f46e5; background: #eef2ff; transform: translateY(-1px); }
.vg-act:active { transform: scale(0.97); }
.vg-act.on { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; border-color: transparent; }
[data-theme="dark"] .vg-act, body.dark-theme .vg-act { background: #1e293b; border-color: #334155; color: #cbd5e1; }

/* F3 — card được theo dõi: viền sao vàng */
.schedule-card.vg-followed, .schedule-row.vg-followed {
  outline: 2px solid #f59e0b;
  outline-offset: 1px;
  border-radius: 16px;
  position: relative;
}
.schedule-card.vg-followed::before, .schedule-row.vg-followed::before {
  content: '⭐'; position: absolute; top: -9px; left: -9px; font-size: 0.9rem; z-index: 5;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
}

/* F3 — picker theo dõi host */
.vg-follow-ov {
  position: fixed; inset: 0; z-index: 96;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(4px);
  display: none; align-items: center; justify-content: center; padding: 16px;
}
.vg-follow-ov.show { display: flex; animation: qra-fade 0.2s ease; }
.vg-follow-box {
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(20px);
  border-radius: 18px;
  width: 380px; max-width: 94vw; max-height: 80vh;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 64px -12px rgba(15, 23, 42, 0.4);
  animation: qra-pop 0.28s cubic-bezier(0.22, 0.9, 0.3, 1.15);
}
.vg-follow-head { display: flex; align-items: center; justify-content: space-between; font-size: 0.95rem; font-weight: 800; color: #0f172a; padding: 15px 18px; border-bottom: 1px solid #f1f5f9; }
.vg-follow-x { border: none; background: #f1f5f9; width: 30px; height: 30px; border-radius: 9px; color: #64748b; cursor: pointer; }
.vg-follow-desc { font-size: 0.76rem; color: #64748b; padding: 12px 18px 8px; line-height: 1.5; }
.vg-follow-list { overflow-y: auto; padding: 4px 12px 14px; }
.vg-follow-item { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 10px; cursor: pointer; font-size: 0.84rem; transition: background 0.12s ease; }
.vg-follow-item:hover { background: #f8fafc; }
.vg-follow-item input { width: 17px; height: 17px; accent-color: #f59e0b; }
.vg-follow-empty { padding: 18px; text-align: center; color: #94a3b8; font-size: 0.8rem; }
[data-theme="dark"] .vg-follow-box, body.dark-theme .vg-follow-box { background: rgba(15, 23, 42, 0.97); }
[data-theme="dark"] .vg-follow-head, body.dark-theme .vg-follow-head { color: #f1f5f9; }
[data-theme="dark"] .vg-follow-item:hover, body.dark-theme .vg-follow-item:hover { background: #1e293b; }

/* Nháy sáng card khi nhảy tới (từ live btn / timeline / thông báo) */
.vg-flash { animation: vg-flash 1.6s cubic-bezier(.36, .07, .19, .97); border-radius: 14px; position: relative; z-index: 5; transform-origin: center center; }
@keyframes vg-flash {
  0%   { transform: scale(1) rotate(0);           box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
  16%  { transform: scale(1.06) rotate(0);        box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.62), 0 0 24px 5px rgba(245, 158, 11, 0.4); }
  30%  { transform: scale(1.05) rotate(-2.4deg); }
  42%  { transform: scale(1.05) rotate(2deg); }
  54%  { transform: scale(1.04) rotate(-1.5deg); box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.4), 0 0 18px 4px rgba(245, 158, 11, 0.24); }
  66%  { transform: scale(1.03) rotate(1deg); }
  78%  { transform: scale(1.02) rotate(-0.5deg); }
  100% { transform: scale(1) rotate(0);           box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}

/* Nút sửa ghi chú trên card (chỉ hiện cho người có quyền) */
.vg-note-btn {
  display: inline-flex; align-items: center; gap: 5px;
  margin: 8px 12px 10px;
  padding: 5px 11px;
  border-radius: 9px;
  border: 1.5px dashed #cbd5e1;
  background: transparent;
  color: #64748b;
  font-size: 0.68rem; font-weight: 700;
  cursor: pointer;
  transition: all 0.14s ease;
}
.vg-note-btn:hover { border-color: #f59e0b; color: #b45309; background: #fffbeb; }
.vg-note-btn.has { border-style: solid; border-color: #fde68a; color: #b45309; background: #fffbeb; }
.schedule-row .vg-note-btn { margin: 6px 0 6px 8px; }

/* Keep Live child: nút ghi chú nằm THEO HÀNG dưới nội dung (không còn góc phải) */
.kl-child-content .vg-note-btn {
  margin: 10px 0 0;
  align-self: flex-start;
}

/* Popup sửa ghi chú */
/* z-index 31000: trên modal Keep Live (10000) + popup QR (30000) — luôn nổi khi mở từ trong modal */
.vg-note-ov { position: fixed; inset: 0; z-index: 31000; background: rgba(15, 23, 42, 0.5); backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; padding: 16px; }
.vg-note-ov.show { display: flex; animation: qra-fade 0.2s ease; }
.vg-note-box { background: rgba(255, 255, 255, 0.98); border-radius: 18px; width: 440px; max-width: 94vw; box-shadow: 0 24px 64px -12px rgba(15, 23, 42, 0.4); animation: qra-pop 0.28s cubic-bezier(0.22, 0.9, 0.3, 1.15); overflow: hidden; }
.vg-note-head { display: flex; align-items: center; justify-content: space-between; font-size: 0.9rem; font-weight: 800; color: #0f172a; padding: 14px 18px; border-bottom: 1px solid #f1f5f9; }
.vg-note-x { border: none; background: #f1f5f9; width: 30px; height: 30px; border-radius: 9px; color: #64748b; cursor: pointer; }
.vg-note-ta { width: calc(100% - 36px); margin: 16px 18px 0; min-height: 110px; resize: vertical; border: 1.5px solid #e2e8f0; border-radius: 12px; padding: 11px 13px; font-size: 0.88rem; font-family: inherit; color: #0f172a; outline: none; box-sizing: border-box; }
.vg-note-ta:focus { border-color: #818cf8; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12); }
.vg-note-actions { display: flex; align-items: center; gap: 8px; padding: 14px 18px; }
.vg-note-actions button { font-size: 0.8rem; font-weight: 700; padding: 8px 15px; border-radius: 10px; cursor: pointer; border: 1.5px solid #e2e8f0; background: #fff; color: #475569; }
.vg-note-save { background: linear-gradient(135deg, #6366f1, #8b5cf6) !important; color: #fff !important; border-color: transparent !important; }
.vg-note-del { border-color: #fca5a5 !important; color: #dc2626 !important; }
[data-theme="dark"] .vg-note-box, body.dark-theme .vg-note-box { background: rgba(15, 23, 42, 0.98); }
[data-theme="dark"] .vg-note-head, body.dark-theme .vg-note-head { color: #f1f5f9; }
[data-theme="dark"] .vg-note-ta, body.dark-theme .vg-note-ta { background: #0f172a; border-color: #334155; color: #e2e8f0; }

/* Keep Live child — tag phòng/platform + giỏ hàng (đầy đủ thông tin) */
.kl-child-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.kl-child-tags .kl-child-tag { font-size: 0.62rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #f1f5f9; color: #475569; display: inline-flex; align-items: center; gap: 3px; }
.kl-child-cart { font-size: 0.72rem; color: #0f766e; margin-top: 5px; padding: 4px 8px; background: rgba(20, 184, 166, 0.08); border-radius: 6px; line-height: 1.4; word-break: break-word; }
.kl-child-cart i { color: #14b8a6; margin-right: 3px; }
[data-theme="dark"] .kl-child-tags .kl-child-tag, body.dark-theme .kl-child-tags .kl-child-tag { background: #334155; color: #cbd5e1; }

@media (max-width: 767px) {
  /* Màn hẹp: credit ở đáy → nút nằm TRÊN nó (theo --vc-h) */
  .vg-live-btn { bottom: calc(var(--vc-h, 52px) + 16px); font-size: 0.74rem; padding: 9px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .vg-live-btn, .vg-live-dot, .vg-tl-block, .vg-follow-ov.show, .vg-follow-box { animation: none; }
  .vg-flash { animation: none; }
}

/* ───────────────────────────── 6. REDUCED MOTION ─────────────────────────────
   Tôn trọng cài đặt hệ điều hành — tắt mọi chuyển động trang trí. */

@media (prefers-reduced-motion: reduce) {
  .vg-orbs,
  .vg-3d-gyro,
  .vg-3d-cube { display: none; }
  .schedule-card,
  .schedule-row,
  .flx-card,
  .highlight-card { transition: none !important; animation: none !important; }
  .schedule-card:hover { transform: none !important; }
  .kl-live-badge .kl-live-dot,
  .status-badge.live::before { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. CHỐNG TRÀN THÔNG BÁO / FEATURED NOTE + CO THEO KHUNG HÌNH
   Nội dung TinyMCE có thể chứa chuỗi dài không dấu cách ("======"), chữ HOA lớn,
   ảnh/bảng rộng → tràn ngang, cắt chữ. Ép mọi thứ bẻ dòng và không vượt khung;
   khung modal luôn ≤ viewport để không tràn ra ngoài màn hình ở mọi thiết bị.
   ═══════════════════════════════════════════════════════════════════════════ */

/* GỐC RỄ TRÀN NGANG: .main là flex item (flex:1) với min-width:auto mặc định →
   nội dung không bẻ được (chuỗi "======") đẩy cột main rộng hơn viewport. Cho phép
   co lại để overflow-wrap bên dưới có tác dụng. */
.main { min-width: 0; }
.content { min-width: 0; }
.featured-note,
.featured-note-content { min-width: 0; max-width: 100%; }

/* Khung thông báo co theo màn hình — không bao giờ rộng hơn viewport */
#announcementModal .modal-box {
  max-width: min(94vw, 680px) !important;
}
#announcementModal .modal-scroll-content { overflow-x: hidden; }

/* Nội dung + MỌI phần tử con: bẻ dòng, không vượt khung (kể cả "=====" / từ HOA dài) */
#announcementModal .modal-body,
.featured-note-content,
.note-content {
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}
#announcementModal .modal-body *,
.featured-note-content *,
.note-content * {
  max-width: 100% !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Ảnh trong thông báo: vừa khung, giữ tỉ lệ */
#announcementModal .modal-body img,
.featured-note-content img,
.note-content img {
  max-width: 100% !important;
  height: auto !important;
}

/* Bảng rộng: cuộn ngang TRONG khung riêng, không đẩy cả modal tràn ra */
#announcementModal .modal-body table,
.featured-note-content table,
.note-content table {
  display: block;
  width: max-content;
  max-width: 100% !important;
  overflow-x: auto;
}

/* ─── Avatar: dấu hiệu bấm phóng to được (mọi avatar/ảnh host/PIC/chip logo) ─── */
.card-host-avatar,
.row-host-avatar,
.highlight-avatar,
img.hs-avatar,
.host-avatar-sm img,
.keep-live-child-avatar,
.kl-child-avatar,
.pic-card-avatar img,
.pic-modal-avatar,
.filter-chip-logo {
  cursor: zoom-in;
  transition: transform .15s ease, box-shadow .15s ease;
}
.card-host-avatar:hover,
.row-host-avatar:hover,
.highlight-avatar:hover,
img.hs-avatar:hover,
.host-avatar-sm img:hover,
.keep-live-child-avatar:hover,
.kl-child-avatar:hover,
.pic-card-avatar img:hover,
.pic-modal-avatar:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 14px rgba(99, 102, 241, .35);
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. LIGHTBOX SLIDE: nút prev/next + counter + đóng + ẢNH luôn TRONG khung hình
   Bug cũ: nút đặt NGOÀI khung ảnh (.lightbox-prev{left:-70px}, next{right:-70px},
   counter{bottom:-40px}) → ảnh to (~95vw/95vh) đẩy nút/counter ra ngoài viewport.
   Fix: neo nút/counter/đóng theo VIEWPORT (fixed) + ảnh chừa lề cho nút, không tràn.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Ảnh: chừa 70px mỗi bên cho nút prev/next, chừa trên/dưới cho nút đóng + counter */
.lightbox-img {
  max-width: calc(100vw - 140px) !important;
  max-height: calc(100vh - 120px) !important;
  object-fit: contain;
  -webkit-user-drag: none; user-select: none;
  transition: transform .24s cubic-bezier(.22, .9, .3, 1), opacity .24s ease;
  will-change: transform;
}
.lightbox-img.lb-dragging { transition: none !important; } /* đang kéo: bám tay 1:1, không trễ */
/* Cho phép vuốt NGANG chuyển ảnh (JS xử lý) + giữ pinch-zoom; chặn trình duyệt cướp cử chỉ ngang */
.lightbox { touch-action: pan-y pinch-zoom; }

/* Nút prev/next: neo mép viewport, luôn nằm trong màn hình */
.lightbox-nav {
  position: fixed !important;
  top: 50% !important;
}
.lightbox-prev { left: 12px !important; right: auto !important; }
.lightbox-next { right: 12px !important; left: auto !important; }

/* Counter: neo đáy viewport, giữa */
.lightbox-counter {
  position: fixed !important;
  bottom: 16px !important;
  top: auto !important;
}

/* Nút đóng / tải: neo góc trên phải viewport */
.lightbox-top-controls {
  position: fixed !important;
  top: 12px !important;
  right: 12px !important;
}

/* Điện thoại: nút nhỏ hơn, ảnh dùng nhiều bề ngang hơn */
@media (max-width: 640px) {
  .lightbox-nav { width: 40px !important; height: 40px !important; font-size: 1rem !important; }
  .lightbox-prev { left: 6px !important; }
  .lightbox-next { right: 6px !important; }
  .lightbox-img { max-width: calc(100vw - 96px) !important; max-height: calc(100vh - 108px) !important; }
}

/* ── Ca đã xác nhận HỦY (schedule flags) ── */
.schedule-card.cancelled, .schedule-row.cancelled { opacity: .58; filter: grayscale(.25); }
.schedule-card.cancelled .card-title, .schedule-row.cancelled .row-title { text-decoration: line-through; }
.status-badge.cancelled { background: #fee2e2 !important; color: #b91c1c !important; }
.schedule-card.cancelled .card-status { color: #dc2626 !important; font-weight: 800; }

/* ── Nút chuyển chế độ tối/sáng cho người xem ── */
.theme-toggle-btn {
  width: 42px; height: 42px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0.5px solid var(--border-color);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: var(--transition);
}
.theme-toggle-btn:hover { background: var(--bg-hover); color: var(--text-primary); transform: translateY(-1px); }
.theme-toggle-btn:active { transform: translateY(0); }
.theme-toggle-btn:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(99, 102, 241, .28); }
.theme-toggle-btn i { font-size: 1rem; transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.theme-toggle-btn:hover i { transform: rotate(-18deg); }
[data-theme="dark"] .theme-toggle-btn i.fa-sun { color: #fbbf24; }
@media (max-width: 480px) {
  .theme-toggle-btn { width: 38px; height: 38px; }
}

/* ── Toggle "Nhận thông báo đẩy" trong popup Theo dõi host ── */
.vg-follow-push {
  display: flex; align-items: center; gap: 9px;
  margin: 4px 0 10px; padding: 9px 11px;
  background: var(--bg-tertiary, #f1f5f9);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 10px; cursor: pointer;
  font-size: 0.82rem; color: var(--text-primary, #0f172a);
}
.vg-follow-push input { width: 16px; height: 16px; accent-color: #6366f1; cursor: pointer; flex: 0 0 auto; }
.vg-follow-push i { color: #6366f1; }
.vg-follow-push small { color: var(--text-secondary, #64748b); font-weight: 500; }

/* ── Bản quyền viewer — thẻ kính nổi bật, CỐ ĐỊNH đáy màn hình ──
   Thẻ ép 1 dòng (nowrap) → chiều cao TẤT ĐỊNH = --vc-h. Nội dung (.content) và nút
   "đang live" (.vg-live-btn) đều chừa chỗ theo --vc-h → không bao giờ đè lên footer.
   Dùng CSS thuần (không đo bằng JS) để khỏi phụ thuộc timing font/ResizeObserver. */
:root { --vc-h: 52px; }
/* ── Thẻ "Phát triển bởi" ──────────────────────────────────────────────────
   MẶC ĐỊNH (màn hẹp): dời XUỐNG ĐÁY như cũ (fixed bottom, không đè topbar).
   Màn ĐỦ RỘNG (≥1200px): căn GIỮA topbar. Dùng CSS media query → chỉ cần load lại
   là nhận đúng, không phụ thuộc JS đo đạc (JS đo thiếu tin cậy trên một số máy). */
.viewer-credit {
  position: fixed;
  left: 50%; bottom: 10px;
  transform: translateX(-50%);
  z-index: 92;
  display: flex; justify-content: center; align-items: center;
  margin: 0; padding: 0;
  max-width: calc(100vw - 20px);
  pointer-events: none; /* chỉ thẻ bên trong nhận click, không chặn nội dung 2 bên */
}
.viewer-credit-card { pointer-events: auto; }
/* Màn hẹp → thẻ ở đáy → chừa chỗ để không che ca cuối */
.content { padding-bottom: calc(var(--vc-h, 52px) + 34px); }

/* Đủ rộng → thẻ lên GIỮA topbar. Thẻ là con của .main (không bị header bẫy fixed) → dùng fixed,
   canh theo tâm vùng nội dung (bên phải sidebar) + giữa chiều cao header. */
@media (min-width: 1200px) {
  .viewer-credit {
    bottom: auto;
    top: calc(var(--header-height, 64px) / 2);
    left: calc((100vw + var(--sidebar-width, 280px)) / 2);
    transform: translate(-50%, -50%);
    z-index: 51;   /* trên nền header (z=50); wrapper pointer-events:none nên không chặn nút */
  }
  /* Sidebar thu gọn / ẩn → tâm vùng nội dung đổi theo */
  .sidebar.collapsed ~ .main .viewer-credit,
  .main.expanded .viewer-credit { left: calc((100vw + var(--sidebar-collapsed, 84px)) / 2); }
  .sidebar.sidebar-hidden ~ .main .viewer-credit { left: 50%; }
  .content { padding-bottom: 24px; }
}
/* ══════════════ DYNAMIC ISLAND (kiểu iPhone) ══════════════
   Pill ĐEN bo tròn, thu gọn mặc định (chỉ icon + "Đạt Phạm"); hover/focus/chạm → BUNG RA
   theo spring, lộ "Phát triển bởi" (trái) và "© 2026" (phải). Có ánh sáng quét + nhịp thở. */
.viewer-credit-card.di {
  --di-spring: cubic-bezier(.34, 1.28, .5, 1);   /* nảy nhẹ hơn cho mượt */
  --di-smooth: cubic-bezier(.16, 1, .3, 1);       /* ease-out expo — bung/thu êm */
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 7px; flex-wrap: nowrap; white-space: nowrap;
  height: 38px; padding: 0 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, #16181d, #050506);
  border: 1px solid rgba(255, 255, 255, .10);
  color: #fff;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .07);
  cursor: pointer; outline: none;
  will-change: transform;
  transition: gap .55s var(--di-smooth), padding .55s var(--di-smooth),
              box-shadow .4s ease, transform .5s var(--di-spring);
  animation: diPop .6s var(--di-spring) both, diBreath 4s ease-in-out 1s infinite;
}
/* Xuất hiện: rơi từ trên xuống + nảy nhẹ (giống DI hiện ra) */
@keyframes diPop { 0% { opacity: 0; transform: translateY(-16px) scale(.82); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes diBreath { 0%, 100% { box-shadow: 0 10px 30px -8px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.07); } 50% { box-shadow: 0 14px 40px -8px rgba(99,102,241,.45), inset 0 1px 0 rgba(255,255,255,.12); } }

/* Ánh sáng quét ngang trên mặt island */
.viewer-credit-card.di::before {
  content: ''; position: absolute; top: 0; left: -70%; width: 45%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .16), transparent);
  transform: skewX(-18deg); pointer-events: none;
  animation: diShine 4.2s ease-in-out infinite;
}
@keyframes diShine { 0%, 55% { left: -70%; } 100% { left: 140%; } }

/* Icon </> luôn hiện — chấm live nhấp nháy nhẹ */
.di-lead { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.di-lead i { font-size: .82rem; color: #a5b4fc; filter: drop-shadow(0 0 6px rgba(129,140,248,.6)); animation: diGlow 2.4s ease-in-out infinite; }
@keyframes diGlow { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }

/* Chip "đang live" trong island — thay cho nút nổi cũ; bấm → nhảy tới ca live */
.di-live {
  display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto;
  padding: 4px 10px; border-radius: 999px; border: none; cursor: pointer;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff; font-weight: 800; font-size: .72rem; font-family: inherit;
  box-shadow: 0 4px 14px -4px rgba(239, 68, 68, .85);
  transition: transform .22s var(--di-spring), box-shadow .22s ease;
  animation: diLivePulse 1.6s ease-in-out infinite;
}
.di-live:hover { transform: translateY(-1px) scale(1.05); }
.di-live:active { transform: scale(.96); }
.di-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(255,255,255,.7); animation: diLiveDot 1.4s ease-out infinite; }
.di-live-n { font-variant-numeric: tabular-nums; }
.di-live-tx { font-weight: 700; opacity: .95; }
@keyframes diLivePulse { 0%, 100% { box-shadow: 0 4px 14px -4px rgba(239,68,68,.85); } 50% { box-shadow: 0 6px 20px -3px rgba(239,68,68,1); } }
@keyframes diLiveDot { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.7); } 100% { box-shadow: 0 0 0 6px rgba(255,255,255,0); } }
/* Island có live → viền đỏ nhẹ để hút mắt */
.viewer-credit-card.di.di-has-live { border-color: rgba(239, 68, 68, .45); }

/* Nút "đang live" nổi CŨ → ẩn hẳn (đã chuyển vào Dynamic Island) */
.vg-live-btn { display: none !important; }

/* Tên Facebook — luôn hiện (viên xanh nhỏ) */
.di-name {
  display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto;
  padding: 5px 11px; border-radius: 999px;
  background: linear-gradient(135deg, #1877f2, #0866ff);
  color: #fff !important; font-weight: 800; font-size: .76rem; text-decoration: none;
  box-shadow: 0 4px 14px -4px rgba(24, 119, 242, .8);
  transition: transform .25s var(--di-spring), box-shadow .25s ease;
}
.di-name i { font-size: .9em; }
.di-name img.di-avatar { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; margin: -1px 0; border: 1px solid rgba(255,255,255,.6); flex: 0 0 auto; }
.di-name:hover { transform: translateY(-1px) scale(1.04); box-shadow: 0 8px 20px -4px rgba(24, 119, 242, .95); }
.di-name:active { transform: scale(.97); }

/* Phần MỞ RỘNG — thu gọn mặc định (rộng 0), bung ra khi hover/focus */
.di-pre, .di-post {
  display: inline-flex; align-items: center;
  max-width: 0; opacity: 0; overflow: hidden;
  font-weight: 700; font-size: .74rem; color: #e5e7eb;
  transition: max-width .55s var(--di-smooth), opacity .4s ease, margin .55s var(--di-smooth);
}
.di-post { color: #94a3b8; font-weight: 600; font-size: .68rem; }
.viewer-credit-card.di:hover .di-pre,
.viewer-credit-card.di:focus-visible .di-pre,
.viewer-credit-card.di.di-open .di-pre { max-width: 130px; opacity: 1; }
.viewer-credit-card.di:hover .di-post,
.viewer-credit-card.di:focus-visible .di-post,
.viewer-credit-card.di.di-open .di-post { max-width: 80px; opacity: 1; }
.viewer-credit-card.di:hover, .viewer-credit-card.di:focus-visible, .viewer-credit-card.di.di-open {
  gap: 9px; padding: 0 16px; transform: scale(1.03);
  box-shadow: 0 16px 44px -8px rgba(99, 102, 241, .5), inset 0 1px 0 rgba(255, 255, 255, .12);
  animation-play-state: paused, paused;
}
.viewer-credit-card.di:focus-visible { box-shadow: 0 16px 44px -8px rgba(99,102,241,.5), 0 0 0 3px rgba(129, 140, 248, .45); }

/* Mobile: đảo nhỏ gọn hơn nhưng vẫn bung được */
@media (max-width: 480px) {
  :root { --vc-h: 52px; }
  .viewer-credit { bottom: 8px; }
  .viewer-credit-card.di { height: 36px; padding: 0 12px; gap: 6px; }
  .di-name { font-size: .74rem; padding: 5px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .viewer-credit-card.di, .viewer-credit-card.di::before, .di-lead i { animation: none; }
  .di-name:hover { transform: none; }
}

/* ==========================================================================
   WIDGET "PHÒNG LIVE" — logo/ảnh của mọi phòng đang có trên trang viewer
   Nhiều phòng cùng 1 link → mỗi phòng 1 dòng, hiện đủ ảnh. Bấm ảnh = phóng to.
   ========================================================================== */
.vg-room-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vg-room-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  background: var(--bg-secondary);
  border: 0.5px solid var(--border-color);
  border-radius: 12px;
  transition: var(--transition);
  min-width: 0;
}

.vg-room-item:hover {
  background: var(--bg-tertiary);
  border-color: var(--primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* Khung logo: KÍCH THƯỚC CỐ ĐỊNH 64x44 để mọi dòng thẳng hàng dù logo ngang hay vuông.
   Viền/nền nằm trên <img> (không trên khung) → logo ngang không bị đóng khung thừa hai bên. */
.vg-room-thumb {
  flex: 0 0 auto;
  width: 64px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vg-room-thumb .vg-room-logo {
  display: block;
  max-width: 100%;
  max-height: 100%;
  border-radius: 9px;
  border: 0.5px solid var(--border-color);
  background: var(--bg-tertiary);
  cursor: zoom-in;
  transition: transform .25s ease;
}

.vg-room-thumb .vg-room-logo:hover { transform: scale(1.06); }

/* Logo VUÔNG (mặc định + is-square): lấp đầy ô vuông 44x44, bo góc kiểu avatar */
.vg-room-thumb .vg-room-logo.is-square {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 11px;
}

/* Logo NGANG (wordmark): trải hết chiều ngang khung, contain nên không cắt mất chữ */
.vg-room-thumb .vg-room-logo.is-wide {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 7px;
  padding: 2px;
}

/* Logo DỌC: canh theo chiều cao, contain */
.vg-room-thumb .vg-room-logo.is-tall {
  height: 100%;
  width: auto;
  object-fit: contain;
  border-radius: 9px;
  padding: 2px;
}

.vg-room-thumb.is-empty {
  color: var(--text-secondary);
  font-size: 1rem;
  border: 0.5px dashed var(--border-color);
  border-radius: 10px;
  background: var(--bg-tertiary);
}

.vg-room-meta {
  flex: 1;
  min-width: 0;
}

.vg-room-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vg-room-plat {
  display: inline-block;
  margin-top: 3px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 1px 7px;
  border-radius: 999px;
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  border: 0.5px solid var(--border-color);
}

.vg-room-open {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 0.75rem;
  text-decoration: none;
  transition: var(--transition);
}

.vg-room-open:hover {
  color: #fff;
  background: var(--primary);
}

.vg-room-open:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .28);
}

/* Chip "Bộ lọc đang dùng": logo vuông giữ hình tròn, logo ngang chuyển sang thẻ chữ nhật
   (tròn + cover sẽ cắt mất chữ trong wordmark). */
.filter-chip-logo.is-square { object-fit: cover; }

.filter-chip-logo.is-wide {
  width: 46px;
  height: 26px;
  border-radius: 7px;
  object-fit: contain;
  padding: 2px;
  background: rgba(255, 255, 255, .72);
}

.filter-chip-logo.is-tall {
  object-fit: contain;
  border-radius: 8px;
  padding: 2px;
  background: rgba(255, 255, 255, .72);
}

:root[data-theme="dark"] .filter-chip-logo.is-wide,
:root[data-theme="dark"] .filter-chip-logo.is-tall {
  background: rgba(255, 255, 255, .14);
}

@media (max-width: 480px) {
  .vg-room-thumb { width: 56px; height: 40px; }
  .vg-room-thumb .vg-room-logo.is-square { width: 40px; height: 40px; }
  .vg-room-item { gap: 10px; padding: 7px 9px; }
  .vg-room-name { font-size: 0.8rem; }
}

/* ==========================================================================
   MOBILE — BANNER "ĐANG LIVE" / "TIẾP THEO" GỌN LẠI
   Root cause card bị cao vống: ở ≤767px card đổi sang flex-direction:column,
   nên `flex-basis: 240px` của .highlight-content (đặt cho layout ngang ở mục 1B)
   biến thành CHIỀU CAO tối thiểu 240px → thừa cả mảng trống trên/dưới.
   Bỏ hẳn flex ở mobile, chuyển sang grid 2 hàng:  [nhãn | badge] / [nội dung].
   ========================================================================== */
@media (max-width: 767px) {
  .highlight-banners {
    gap: 10px;
    margin-bottom: 16px;
  }

  .highlight-card {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "head badge"
      "body body";
    align-items: center;
    gap: 9px 10px;
    padding: 12px 14px;
    border-radius: 14px;
  }

  /* Nhãn trạng thái: từ khối dọc canh giữa → 1 dòng ngang bên trái */
  .highlight-card .highlight-header {
    grid-area: head;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border-right: 0;
  }

  .highlight-card .highlight-header i { font-size: 0.9rem; }

  .highlight-card .highlight-label {
    font-size: 0.68rem;
    letter-spacing: 1px;
    text-align: left;
  }

  /* HUỶ flex-basis 240px (nguyên nhân card cao vống) */
  .highlight-card .highlight-content {
    grid-area: body;
    min-width: 0;
    flex-basis: auto;
    gap: 4px;
  }

  .highlight-card .live-badge,
  .highlight-card .highlight-countdown {
    grid-area: badge;
    justify-self: end;
    align-self: center;
    margin: 0;
  }

  .highlight-card .highlight-time {
    font-size: 1.18rem;
    gap: 6px;
  }

  .highlight-card .live-badge {
    padding: 5px 10px;
    font-size: 0.7rem;
    border-radius: 9px;
    gap: 5px;
  }

  .highlight-card .live-badge i { font-size: 0.72rem; }
  .highlight-card .live-badge-countdown { font-size: 0.66rem; }

  /* Ô đếm ngược: từ khối 2 dòng → 1 dòng nằm ngang cho đỡ tốn chiều cao */
  .highlight-card .highlight-countdown {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    padding: 5px 10px;
    border-radius: 9px;
    text-align: left;
  }

  /* margin-bottom:14px rò rỉ từ rule .countdown-label của countdown modal → phồng chiều cao khi xếp ngang */
  .highlight-card .countdown-label {
    font-size: 0.58rem;
    letter-spacing: .5px;
    margin: 0;
    line-height: 1.2;
  }

  .highlight-card .countdown-value { font-size: 1rem; line-height: 1.2; }

  /* Nội dung: chip / note / avatar thu nhỏ đồng bộ */
  .highlight-card .highlight-meta { gap: 4px; font-size: 0.8rem; }
  .highlight-card .highlight-meta .meta-chip { font-size: 0.7rem; padding: 2px 7px; }
  .highlight-card .highlight-avatar { width: 24px; height: 24px; border-width: 1.5px; }
  .highlight-card .highlight-note-row { padding: 4px 8px; font-size: 0.74rem; }
  .highlight-card .note-live-hosts { margin-top: 5px; }
  .highlight-card .note-live-host { padding: 2px 8px 2px 2px; font-size: 0.72rem; }
}

/* Màn rất hẹp: badge/countdown xuống hàng riêng cho khỏi chèn ép nhãn */
@media (max-width: 380px) {
  .highlight-card {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "body"
      "badge";
    gap: 8px;
  }

  .highlight-card .live-badge,
  .highlight-card .highlight-countdown { justify-self: start; }
}

/* ==========================================================================
   TOPBAR CHẾ ĐỘ TỐI — nâng độ đọc
   Nền topbar đã được sửa ở viewer-glass.css (rule dark trước đây thiếu .header
   nên nền vẫn trắng). Phần còn lại: --text-secondary (#98989d) trên nền topbar
   tối chỉ đạt 4.2:1 — dưới chuẩn WCAG AA 4.5:1 → chỉnh riêng trong header.
   ========================================================================== */
[data-theme="dark"] .header .page-subtitle,
[data-theme="dark"] .header .sidebar-menu-btn,
[data-theme="dark"] .header .mobile-menu-btn,
[data-theme="dark"] .header .filter-tab:not(.active),
[data-theme="dark"] .header .view-btn:not(.active),
body.dark-theme .header .page-subtitle,
body.dark-theme .header .sidebar-menu-btn,
body.dark-theme .header .mobile-menu-btn,
body.dark-theme .header .filter-tab:not(.active),
body.dark-theme .header .view-btn:not(.active) {
  color: #b0b6c2;
}

/* Tên brand: đậm + rõ hẳn để không chìm vào nền topbar */
[data-theme="dark"] .header .page-title h1,
body.dark-theme .header .page-title h1 {
  color: #f8fafc;
}

/* Viền ngăn topbar với nội dung — sáng hơn chút cho thấy rõ mép */
[data-theme="dark"] .header,
body.dark-theme .header {
  border-bottom-color: rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

/* Hover các nút trong topbar tối */
[data-theme="dark"] .header .sidebar-menu-btn:hover,
[data-theme="dark"] .header .mobile-menu-btn:hover,
[data-theme="dark"] .header .view-btn:not(.active):hover,
[data-theme="dark"] .header .filter-tab:not(.active):hover,
body.dark-theme .header .sidebar-menu-btn:hover,
body.dark-theme .header .mobile-menu-btn:hover,
body.dark-theme .header .view-btn:not(.active):hover,
body.dark-theme .header .filter-tab:not(.active):hover {
  color: #f1f5f9;
}

/* Tab lọc đang chọn: nền #0a84ff + chữ trắng chỉ đạt 3.65:1 → đậm lại cho đạt AA */
[data-theme="dark"] .header .filter-tab.active,
body.dark-theme .header .filter-tab.active {
  background: #2563eb;
  color: #fff;
}

/* ==========================================================================
   NÚT "CHI TIẾT" GHI CHÚ + POPUP TOÀN VĂN
   Note dài tự rút gọn (…) → nút Chi tiết mở popup đầy đủ kèm ngữ cảnh ca.
   ========================================================================== */
.btn-note-detail {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  padding: 3px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #b45309;
  background: rgba(234, 179, 8, 0.14);
  border: 1px solid rgba(234, 179, 8, 0.35);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.btn-note-detail:hover {
  background: rgba(234, 179, 8, 0.24);
  transform: translateY(-1px);
}

.btn-note-detail i { font-size: 0.68rem; }

/* Trong list view nút nằm cùng dòng note → không đẩy xuống */
.row-note .btn-note-detail {
  margin-top: 0;
  margin-left: 4px;
  flex-shrink: 0;
  align-self: flex-start;
}

:root[data-theme="dark"] .btn-note-detail,
body.dark-theme .btn-note-detail {
  color: #fbbf24;
  background: rgba(234, 179, 8, 0.16);
  border-color: rgba(234, 179, 8, 0.32);
}

/* ---- Popup ---- */
.note-modal {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: klModalFadeIn 0.22s ease;
}

.note-modal.hidden { display: none; }

.note-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

.note-modal-box {
  position: relative;
  width: 90%;
  max-width: 540px;
  max-height: 85vh;
  background: var(--bg-secondary);
  border-radius: 16px;
  border: 1px solid var(--border-color);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: klModalSlideUp 0.28s ease;
}

.note-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: linear-gradient(135deg, #b45309 0%, #d97706 55%, #f59e0b 100%);
  color: #fff;
  flex-shrink: 0;
}

.note-modal-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.note-modal-header-left i { font-size: 1.1rem; opacity: 0.95; }

.note-modal-header h3 { margin: 0; font-size: 1.05rem; font-weight: 700; }

.note-modal-close {
  background: rgba(255, 255, 255, 0.18);
  border: none;
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  transition: background 0.15s ease;
  flex-shrink: 0;
}

.note-modal-close:hover { background: rgba(255, 255, 255, 0.32); }

/* Ngữ cảnh ca: chip ngày/giờ/host/phòng... để biết note của ca nào */
.note-modal-context {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-tertiary);
  flex-shrink: 0;
}

.note-modal-ctx-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-primary);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  padding: 3px 10px;
}

.note-modal-ctx-item i { font-size: 0.72rem; color: var(--text-secondary); }

/* Avatar host trong chip ngữ cảnh (bấm phóng to) */
.note-modal-ctx-ava {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border-color);
  cursor: zoom-in;
  flex-shrink: 0;
}

/* Không có ảnh → avatar CHỮ CÁI (nền màu theo tên) */
.note-modal-ctx-ava.is-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
  border: none;
  cursor: default;
}

.note-modal-status {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #fff;
  border-radius: 999px;
  padding: 3px 11px;
}

.note-modal-status.live { background: #dc2626; }
.note-modal-status.upcoming { background: #2563eb; }
.note-modal-status.ended { background: #64748b; }
.note-modal-status.cancelled { background: #b91c1c; }

.note-modal-body {
  padding: 18px 20px;
  overflow-y: auto;
}

.note-modal-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
}

@media (max-width: 480px) {
  .note-modal-box { width: 94%; }
  .note-modal-header { padding: 14px 16px; }
  .note-modal-context, .note-modal-body { padding: 12px 16px; }
  .note-modal-text { font-size: 0.9rem; }
}

/* ==========================================================================
   GIỚI HẠN SỐ DÒNG GHI CHÚ TRONG CARD/ROW
   Note dài luôn kẹp còn tối đa 2 dòng + "…"; JS (refreshNoteClamps) đo overflow
   thực tế để bật nút "Chi tiết". Trước đây kẹp theo SỐ KÝ TỰ (120) nên note ~117
   ký tự vẫn lọt, hiện tràn 4 dòng — nay kẹp theo DÒNG nên luôn gọn.
   ========================================================================== */
.card-note-content.note-clamp,
.row-note-text.note-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  white-space: normal;        /* ghi đè pre-wrap để clamp hoạt động chuẩn */
}

/* Nút Chi tiết ẩn khi ghi chú không bị cắt */
.btn-note-detail.note-detail-off { display: none !important; }

/* Trong list view: ô note phải co giãn để clamp có bề rộng wrap đúng */
.row-note { flex-wrap: wrap; }
.row-note .row-note-text.note-clamp { flex: 1 1 100%; min-width: 0; }

/* ── Ghi chú khi GÁN HOST tay (vd "Tiếu Linh miss ca") — chip hổ phách ── */
.host-assign-note {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  padding: 2px 9px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #b45309;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 20px;
  line-height: 1.5;
  max-width: 100%;
  word-break: break-word;
}
.host-assign-note i { font-size: 0.68rem; opacity: 0.85; }
.highlight-note-row .host-assign-note { margin-top: 0; }
[data-theme="dark"] .host-assign-note {
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.35);
}

/* Ảnh host trong chip ca gán tay → gợi ý bấm phóng to */
.host-pill-ava img { cursor: zoom-in; transition: transform 0.15s ease; }
.host-pill:hover .host-pill-ava img { transform: scale(1.06); }
.highlight-avatar { cursor: zoom-in; }


/* ══════════ LỊCH SỬ LÊN LIVE & ẢNH PHIÊN — port y đúc Studio Live (read-only) ══════════ */
.livehist-section {
  margin-top: 18px;
  background: linear-gradient(135deg, var(--card-bg, #fff) 0%, rgba(99,102,241,.05) 100%);
  border: 1px solid rgba(99,102,241,.15);
  border-radius: var(--border-radius-lg, 18px);
  padding: 24px;
}
[data-theme="dark"] .livehist-section { background: linear-gradient(135deg, #161b22 0%, rgba(99,102,241,.08) 100%); border-color: rgba(99,102,241,.22); }
@media (max-width: 767px) { .livehist-section { padding: 16px; } }
.lhs-grid   { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px,1fr)); gap:12px; }
.lhs-card   { background:#fff; border:1.5px solid #e2e8f0; border-radius:14px; padding:11px 12px; display:flex; flex-direction:column; gap:9px; box-shadow:0 4px 16px -8px rgba(15,23,42,.15); }
.lhs-card.on{ border-color:#a7f3d0; background:linear-gradient(180deg,#f0fdf9 0%,#fff 42%); }
.lhs-ctop   { display:flex; align-items:center; gap:9px; }
.lhs-av     { width:36px; height:36px; min-width:36px; border-radius:50%; object-fit:cover; background:#e2e8f0; display:inline-flex; align-items:center; justify-content:center; }
.lhs-av.ph  { background:linear-gradient(135deg,#6366f1,#8b5cf6); color:#fff; font-weight:800; font-size:.95rem; }
.lhs-av.lg  { width:46px; height:46px; min-width:46px; font-size:1.15rem; }
.lhs-cid    { flex:1; min-width:0; }
.lhs-nick   { font-weight:700; font-size:.85rem; color:#1e293b; display:flex; align-items:center; gap:5px; min-width:0; }
.lhs-nick .nm { flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lhs-uid    { font-size:.66rem; color:#94a3b8; margin-top:3px; display:flex; align-items:center; gap:4px; overflow:hidden; flex-wrap:wrap; }
.lhs-uid .tx{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lhs-plat   { display:inline-flex; align-items:center; gap:3px; font-size:.54rem; font-weight:800; padding:2px 5px; border-radius:5px; flex-shrink:0; }
.lhs-plat.tiktok { background:#0f172a; color:#fff; }
.lhs-plat.shopee { background:#fff1ec; color:#ee4d2d; }
.lhs-vf     { display:inline-flex; align-items:center; gap:3px; font-size:.54rem; font-weight:800; padding:2px 5px; border-radius:5px; flex-shrink:0; }
.lhs-vf i   { font-size:.9em; }
.lhs-vft    { font-size:.82em; margin-left:4px; width:.93em; height:.93em; vertical-align:-.17em; }
.lhs-vf.tick{ background:#e0f2fe; color:#0369a1; } .lhs-vf.biz{ background:#dbeafe; color:#1d4ed8; }
.lhs-vf.mall{ background:#fee2e2; color:#b91c1c; } .lhs-vf.pref{ background:#fef3c7; color:#b45309; } .lhs-vf.vrf{ background:#ffedd5; color:#c2410c; }
.lhs-stu    { display:inline-flex; align-items:center; gap:3px; font-size:.54rem; font-weight:700; padding:2px 5px; border-radius:5px; background:#eef2ff; color:#4338ca; flex-shrink:0; max-width:92px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lhs-live   { display:inline-flex; align-items:center; gap:4px; font-size:.54rem; font-weight:800; color:#fff; background:#ef4444; border-radius:5px; padding:2px 6px; flex-shrink:0; }
.lhs-live .dot { width:5px; height:5px; border-radius:50%; background:#fff; animation:lhsPulse 1.4s infinite; }
@keyframes lhsPulse { 0%,100%{opacity:1} 50%{opacity:.25} }
.lhs-cbody  { display:flex; gap:10px; }
.lhs-thumb  { width:64px; min-width:64px; height:84px; border-radius:9px; overflow:hidden; background:#f1f5f9; border:1px solid #e2e8f0; position:relative; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.lhs-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.lhs-thumb .ph { display:flex; flex-direction:column; align-items:center; gap:4px; color:#94a3b8; font-size:.55rem; text-align:center; padding:4px; line-height:1.25; cursor:default; }
.lhs-thumb .ph i { font-size:1rem; color:#cbd5e1; }
.lhs-thumb.stack { box-shadow:2px 3px 0 -1px #fff, 3px 5px 0 -1px #cbd5e1; }
.lhs-thumbimg { cursor:zoom-in; }
.lhs-stackbadge { position:absolute; top:3px; right:3px; display:inline-flex; align-items:center; gap:3px; background:rgba(15,23,42,.74); color:#fff; font-size:.55rem; font-weight:800; padding:1px 5px; border-radius:20px; pointer-events:none; }
.lhs-thumbnav { position:absolute; left:0; right:0; bottom:0; height:20px; display:flex; align-items:center; justify-content:space-between; gap:2px; padding:0 2px; background:linear-gradient(0deg,rgba(15,23,42,.82),rgba(15,23,42,0)); }
.lhs-thumbnav button { width:16px; height:16px; border:none; border-radius:5px; background:rgba(255,255,255,.92); color:#0f172a; font-size:.55rem; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; flex-shrink:0; }
.lhs-thumbnav button:hover { background:#fff; color:#4338ca; }
.lhs-thumbnav .cnt { font-size:.53rem; font-weight:800; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.6); white-space:nowrap; overflow:hidden; }
.lhs-thumbam { position:absolute; top:5px; left:5px; right:5px; display:flex; pointer-events:none; z-index:3; }
.lhs-last   { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; justify-content:center; }
.lhs-title  { font-size:.72rem; color:#475569; line-height:1.32; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.lhs-time   { display:flex; align-items:center; gap:5px; flex-wrap:wrap; font-size:.7rem; color:#334155; font-weight:600; }
.lhs-time i { color:#94a3b8; font-size:.9em; }
.lhs-time .len { background:#eef2ff; color:#4338ca; border-radius:6px; padding:1px 6px; font-size:.64rem; }
.lhs-nostat { font-size:.68rem; color:#94a3b8; font-style:italic; line-height:1.4; }
.lhs-cfoot  { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.lhs-a      { display:inline-flex; align-items:center; gap:5px; border:1.5px solid #e2e8f0; background:#f8fafc; color:#475569; border-radius:8px; padding:5px 11px; font-size:.7rem; font-weight:600; cursor:pointer; text-decoration:none; min-height:30px; transition:.15s; }
.lhs-a:hover{ background:#eef2ff; border-color:#a5b4fc; color:#4338ca; }
.lhs-a .n   { background:#e0e7ff; color:#4338ca; border-radius:20px; padding:0 6px; font-size:.62rem; }
.lhs-empty  { grid-column:1/-1; text-align:center; padding:26px 12px; color:#94a3b8; font-size:.8rem; }
.lhs-empty i{ font-size:1.7rem; color:#cbd5e1; display:block; margin-bottom:9px; }
.lhs-ov     { position:fixed; inset:0; z-index:999000; background:rgba(15,23,42,.55); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; padding:16px; }
.lhs-modal  { width:min(96vw,940px); max-height:90vh; display:flex; flex-direction:column; background:#fff; border-radius:16px; box-shadow:0 24px 60px rgba(2,6,23,.35); overflow:hidden; }
.lhs-mh     { display:flex; align-items:center; gap:10px; padding:13px 16px; border-bottom:1px solid #eef2f7; flex-wrap:wrap; }
.lhs-mx     { background:none; border:none; color:#94a3b8; cursor:pointer; font-size:1rem; padding:4px 8px; border-radius:8px; margin-left:auto; }
.lhs-mx:hover { background:#f1f5f9; color:#475569; }
.lhs-mb     { padding:14px 16px; overflow-y:auto; }
.lhs-phead  { display:flex; align-items:center; gap:10px; width:100%; flex-wrap:wrap; }
.lhs-pname  { flex:1; min-width:120px; }
.lhs-pnick  { font-size:.94rem; font-weight:700; color:#0f172a; display:flex; align-items:center; gap:7px; min-width:0; flex-wrap:wrap; }
.lhs-pnick .nm { flex:0 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lhs-puid   { font-size:.7rem; color:#94a3b8; margin-top:2px; }
.lhs-sum    { display:flex; gap:8px; flex-wrap:wrap; padding:11px 16px; background:#f8fafc; border-bottom:1px solid #eef2f7; }
.lhs-sumc   { background:#fff; border:1px solid #e2e8f0; border-radius:9px; padding:6px 11px; min-width:76px; }
.lhs-sumc .v{ font-size:.94rem; font-weight:800; color:#0f172a; line-height:1.15; }
.lhs-sumc .k{ font-size:.61rem; color:#94a3b8; margin-top:2px; }
.lhs-srow   { display:flex; gap:11px; padding:12px 0; border-bottom:1px solid #f1f5f9; }
.lhs-srow:last-child { border-bottom:none; }
.lhs-sinfo  { flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
.lhs-sdate  { display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:.78rem; font-weight:700; color:#0f172a; }
.lhs-sdate .d { background:#eef2ff; color:#4338ca; border-radius:6px; padding:1px 7px; font-size:.68rem; }
.lhs-sdate .len { background:#f1f5f9; color:#475569; border-radius:6px; padding:1px 7px; font-size:.68rem; font-weight:600; }
.lhs-stitle { font-size:.74rem; color:#475569; line-height:1.35; }
.lhs-chips  { display:flex; gap:5px; flex-wrap:wrap; }
.lhs-chip   { display:inline-flex; align-items:center; gap:4px; background:#f8fafc; border:1px solid #eef2f7; border-radius:7px; padding:2px 7px; font-size:.66rem; color:#475569; }
.lhs-chip i { color:#94a3b8; font-size:.9em; } .lhs-chip b { color:#0f172a; }
.lhs-slotstrip { display:flex; gap:8px; flex-shrink:0; flex-wrap:wrap; }
.lhs-slot   { display:flex; flex-direction:column; gap:4px; width:78px; }
.lhs-sthumb { width:78px; min-width:78px; height:102px; border-radius:9px; overflow:hidden; background:#f1f5f9; border:1px solid #e2e8f0; display:flex; align-items:center; justify-content:center; cursor:zoom-in; }
.lhs-sthumb img { width:100%; height:100%; object-fit:cover; }
.lhs-slotlbl{ font-size:.6rem; font-weight:700; color:#64748b; text-align:center; text-transform:uppercase; letter-spacing:.02em; }
.lhs-slot.has .lhs-slotlbl { color:#059669; }
.lhs-am     { display:inline-flex; align-items:center; justify-content:center; gap:4px; border-radius:7px; padding:2px 6px; font-size:.58rem; font-weight:800; line-height:1.35; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lhs-am i   { font-size:.92em; }
.lhs-am.do  { background:#fee2e2; color:#991b1b; border:1px solid #fecaca; }
.lhs-am.vang{ background:#fef3c7; color:#92400e; border:1px solid #fde68a; }
.lhs-am.xanh{ background:#d1fae5; color:#065f46; border:1px solid #a7f3d0; }
.lhs-am.cho { background:#f1f5f9; color:#64748b; border:1px solid #e2e8f0; }
.lhs-slot .lhs-am { width:100%; }
.lhs-thumbam .lhs-am { pointer-events:auto; box-shadow:0 1px 4px rgba(2,6,23,.28); }
.lhs-am.chi { padding:2px 4px; gap:0; font-size:.62rem; line-height:1; }
.lhs-ploading { text-align:center; padding:30px; color:#94a3b8; font-size:.8rem; }
@media(max-width:767px){ .lhs-grid { grid-template-columns:1fr; } }
[data-theme="dark"] .lhs-card { background:#161b22; border-color:#30363d; }
[data-theme="dark"] .lhs-card.on { background:#14342c; border-color:#065f46; }
[data-theme="dark"] .lhs-nick, [data-theme="dark"] .lhs-pnick, [data-theme="dark"] .lhs-sdate, [data-theme="dark"] .lhs-sumc .v { color:#e2e8f0; }
[data-theme="dark"] .lhs-title, [data-theme="dark"] .lhs-time, [data-theme="dark"] .lhs-stitle { color:#cbd5e1; }
[data-theme="dark"] .lhs-a, [data-theme="dark"] .lhs-chip { background:#0f172a; border-color:#334155; color:#cbd5e1; }
[data-theme="dark"] .lhs-modal { background:#161b22; }
[data-theme="dark"] .lhs-mh { border-color:#30363d; }
[data-theme="dark"] .lhs-sum { background:#0f172a; border-color:#30363d; }
[data-theme="dark"] .lhs-sumc { background:#161b22; border-color:#30363d; }
[data-theme="dark"] .lhs-plat.tiktok { background:#334155; color:#e2e8f0; }
[data-theme="dark"] .lhs-stu { background:#312e81; color:#c7d2fe; }
[data-theme="dark"] .lhs-srow { border-color:#30363d; }
[data-theme="dark"] .lhs-am.cho { background:#1e293b; color:#94a3b8; border-color:#334155; }
[data-theme="dark"] .lhs-am.do { background:#450a0a; color:#fca5a5; border-color:#7f1d1d; }
[data-theme="dark"] .lhs-am.vang { background:#451a03; color:#fcd34d; border-color:#78350f; }
[data-theme="dark"] .lhs-am.xanh { background:#052e2b; color:#6ee7b7; border-color:#065f46; }

/* ==========================================================================
   THÔNG BÁO ĐẨY "PHIÊN LIVE ĐÃ KẾT THÚC" (.nfx-*)
   z-index 999500: trên thông báo chính (10000) + modal lịch sử kênh (999000),
   nhưng DƯỚI lightbox (999999) để bấm ảnh trong thông báo vẫn xem lớn được.
   ========================================================================== */
.nfx-ov {
  position:fixed; inset:0; z-index:999500;
  background:rgba(15,23,42,.62); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
  display:flex; align-items:center; justify-content:center; padding:16px;
  opacity:0; transition:opacity .2s ease;
}
.nfx-ov.in { opacity:1; }
.nfx-card {
  width:min(96vw,880px); max-height:90vh; display:flex; flex-direction:column;
  background:#fff; border-radius:18px; overflow:hidden; position:relative;
  box-shadow:0 32px 80px -18px rgba(2,6,23,.6), 0 0 0 1px rgba(255,255,255,.07);
}
.nfx-card.pop { animation:nfxPop .34s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes nfxPop { from { opacity:0; transform:translateY(22px) scale(.94); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { .nfx-card.pop { animation:none; } .nfx-ov { transition:none; } }

/* ── Đầu thẻ ── */
.nfx-head {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:11px 14px;
  background:linear-gradient(135deg,#dc2626 0%,#f43f5e 52%,#f97316 100%); color:#fff;
}
.nfx-tag { display:inline-flex; align-items:center; gap:7px; font-size:.82rem; font-weight:800; letter-spacing:.01em; }
.nfx-tag i { font-size:1em; animation:nfxBeat 1.8s ease-in-out infinite; }
@keyframes nfxBeat { 0%,100%{ transform:scale(1); opacity:1 } 50%{ transform:scale(1.16); opacity:.72 } }
@media (prefers-reduced-motion: reduce) { .nfx-tag i { animation:none; } }
.nfx-chip { display:inline-flex; align-items:center; gap:4px; font-size:.58rem; font-weight:800; padding:3px 8px; border-radius:20px; background:rgba(255,255,255,.22); color:#fff; white-space:nowrap; }
/* Chip đếm ngược trên đầu thẻ — chỉ hiện khi filter link bật tự đóng */
.nfx-chip.cd { background:rgba(15,23,42,.3); font-variant-numeric:tabular-nums; min-width:104px; justify-content:center; }
.nfx-x {
  margin-left:auto; width:30px; height:30px; min-width:30px; border:none; border-radius:9px; cursor:pointer;
  background:rgba(255,255,255,.16); color:#fff; font-size:.95rem; display:flex; align-items:center; justify-content:center; transition:.15s;
}
.nfx-x:hover { background:rgba(255,255,255,.32); }
.nfx-x:focus-visible { outline:0; box-shadow:0 0 0 3px rgba(255,255,255,.5); }

/* ── Thân: ảnh trái · thông tin phải ── */
.nfx-body { display:flex; gap:0; min-height:0; flex:1; overflow:hidden; }
.nfx-left { width:266px; min-width:266px; background:#0f172a; display:flex; }
.nfx-shot { position:relative; width:100%; min-height:300px; display:flex; align-items:center; justify-content:center; overflow:hidden; background:#0f172a; }
/* Ảnh đặt TUYỆT ĐỐI: không để tỉ lệ ảnh dọc 9:16 kéo cao cả thẻ — chiều cao do cột thông tin quyết định */
.nfx-shotimg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; cursor:zoom-in; }
.nfx-shot .ph { display:flex; flex-direction:column; align-items:center; gap:8px; color:#64748b; font-size:.68rem; text-align:center; padding:16px; line-height:1.4; }
.nfx-shot .ph i { font-size:1.8rem; color:#334155; }
.nfx-shotlbl {
  position:absolute; left:8px; bottom:8px; display:inline-flex; align-items:center; gap:5px;
  background:rgba(15,23,42,.82); color:#fff; font-size:.6rem; font-weight:800; padding:4px 9px; border-radius:20px;
  backdrop-filter:blur(4px); pointer-events:none; max-width:calc(100% - 16px); overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.nfx-shotam { position:absolute; top:8px; left:8px; display:flex; pointer-events:none; z-index:2; }
.nfx-shotam .lhs-am { pointer-events:auto; box-shadow:0 2px 6px rgba(2,6,23,.4); }
.nfx-shotnav { position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; padding:0 6px; pointer-events:none; }
.nfx-shotnav button {
  pointer-events:auto; width:28px; height:28px; border:none; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.9); color:#0f172a; font-size:.7rem; display:flex; align-items:center; justify-content:center; transition:.15s;
  box-shadow:0 2px 8px rgba(2,6,23,.3);
}
.nfx-shotnav button:hover { background:#fff; color:#4338ca; transform:scale(1.08); }
.nfx-shotnav button:focus-visible { outline:0; box-shadow:0 0 0 3px rgba(99,102,241,.45); }

.nfx-right { flex:1; min-width:0; padding:14px 16px; overflow-y:auto; display:flex; flex-direction:column; gap:9px; }
.nfx-ch { display:flex; align-items:center; gap:10px; min-width:0; }
.nfx-chtx { min-width:0; flex:1; }
.nfx-nick { display:flex; align-items:center; gap:2px; font-size:1rem; font-weight:800; color:#0f172a; min-width:0; }
.nfx-nick .nm { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nfx-uid { font-size:.7rem; color:#94a3b8; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nfx-badges { display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.nfx-room { display:inline-flex; align-items:center; gap:4px; font-size:.54rem; font-weight:800; padding:2px 6px; border-radius:5px; background:#f1f5f9; color:#475569; max-width:140px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nfx-title { font-size:.8rem; line-height:1.42; color:#334155; font-weight:600; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.nfx-when { display:flex; align-items:center; gap:7px; flex-wrap:wrap; padding:9px 11px; border-radius:11px; background:#f8fafc; border:1px solid #eef2f7; }
.nfx-wt { display:inline-flex; align-items:center; gap:5px; font-size:.92rem; font-weight:800; color:#0f172a; }
.nfx-wt i { font-size:.62em; color:#10b981; }
.nfx-wt.end i { color:#ef4444; }
.nfx-when .ar { color:#cbd5e1; font-size:.8rem; }
.nfx-len { display:inline-flex; align-items:center; gap:5px; margin-left:auto; background:#eef2ff; color:#4338ca; border-radius:7px; padding:3px 9px; font-size:.7rem; font-weight:800; }
.nfx-len i { font-size:.88em; opacity:.8; }
.nfx-date { display:flex; align-items:center; gap:6px; font-size:.72rem; color:#64748b; font-weight:600; }
.nfx-date i { color:#94a3b8; }
.nfx-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); gap:7px; }
.nfx-st { display:flex; align-items:center; gap:8px; padding:7px 9px; border-radius:10px; background:#f8fafc; border:1px solid #eef2f7; min-width:0; }
.nfx-st > i { width:22px; height:22px; min-width:22px; border-radius:7px; background:#eef2ff; color:#4f46e5; font-size:.68rem; display:flex; align-items:center; justify-content:center; }
.nfx-st .tx { min-width:0; }
.nfx-st .v { font-size:.88rem; font-weight:800; color:#0f172a; line-height:1.15; }
.nfx-st .k { font-size:.58rem; color:#94a3b8; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nfx-nostat { display:flex; align-items:center; gap:7px; font-size:.7rem; color:#94a3b8; font-style:italic; padding:8px 10px; background:#f8fafc; border:1px dashed #e2e8f0; border-radius:10px; }


/* Sticker nhận xét — đặt ở KHOẢNG TRỐNG bên phải cột thông tin, KHÔNG đè lên ảnh live.
   Ba dòng trên cùng (tên kênh / huy hiệu / tiêu đề) được chừa lề phải để không chui xuống dưới sticker. */
.nfx-right { position:relative; }
.nfx-stk {
  position:absolute; top:10px; right:12px; width:112px; height:auto;
  object-fit:contain; pointer-events:none; z-index:4;
  filter:drop-shadow(0 3px 9px rgba(2,6,23,.2));
  transform-origin:50% 72%;   /* xoay quanh điểm hơi thấp → lắc như sticker dán hờ */
  will-change:transform;
  /* bật vào rồi LẮC LƯ liên tục: lắc ~1,4s rồi nghỉ ~2,2s, lặp lại */
  animation:nfxStk .45s cubic-bezier(.34,1.56,.64,1) both .12s,
            nfxLac 3.6s ease-in-out .62s infinite;
}
@keyframes nfxLac {
  0%, 40%, 100% { transform:rotate(0deg)    translateY(0); }
  6%            { transform:rotate(-5.5deg) translateY(-3px); }
  13%           { transform:rotate(4.5deg)  translateY(-1px); }
  20%           { transform:rotate(-3.2deg) translateY(-2px); }
  27%           { transform:rotate(2.2deg)  translateY(0); }
  34%           { transform:rotate(-1deg)   translateY(0); }
}
.nfx-ch, .nfx-badges, .nfx-title { padding-right:130px; }
@keyframes nfxStk { from { opacity:0; transform:scale(.5) rotate(-14deg); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { .nfx-stk { animation:none; } }


/* ── Dạng 2: thẻ "kênh đang LIVE" — đầu thẻ xanh ngọc + chấm đỏ nhấp nháy ── */
.nfx-card.live .nfx-head { background:linear-gradient(135deg,#059669 0%,#10b981 52%,#22d3ee 100%); }
.nfx-dot {
  width:9px; height:9px; min-width:9px; border-radius:50%; background:#ef4444; display:inline-block;
  box-shadow:0 0 0 3px rgba(239,68,68,.28); animation:nfxDot 1.3s ease-in-out infinite;
}
.nfx-head .nfx-dot { background:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.36); }
@keyframes nfxDot { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.35; transform:scale(.82); } }
.nfx-wt.onair { color:#dc2626; gap:6px; }
[data-theme="dark"] .nfx-wt.onair { color:#f87171; }
@media (prefers-reduced-motion: reduce) { .nfx-dot { animation:none; } }

/* Đang live mà chưa kịp chụp ảnh — nói rõ là đang chờ, ảnh sẽ tự hiện */
.nfx-shot.cho-anh .ph i { animation:nfxDot 1.6s ease-in-out infinite; color:#10b981; }
.nfx-shot.cho-anh .ph small { font-size:.56rem; color:#475569; opacity:.75; line-height:1.35; }
[data-theme="dark"] .nfx-shot.cho-anh .ph small { color:#94a3b8; }

/* ── Chân thẻ ── */
.nfx-foot { display:flex; align-items:center; gap:7px; flex-wrap:wrap; padding:11px 14px; border-top:1px solid #eef2f7; background:#fff; }
.nfx-sp { flex:1 1 auto; }
.nfx-b {
  display:inline-flex; align-items:center; justify-content:center; gap:6px; cursor:pointer;
  border:1.5px solid #e2e8f0; background:#f8fafc; color:#475569; border-radius:10px;
  padding:7px 14px; font-size:.74rem; font-weight:700; min-height:36px; transition:.15s; font-family:inherit;
}
.nfx-b:hover { background:#eef2ff; border-color:#a5b4fc; color:#4338ca; }
.nfx-b:focus-visible { outline:0; box-shadow:0 0 0 3px rgba(99,102,241,.18); }
.nfx-b.primary { background:linear-gradient(135deg,#6366f1,#8b5cf6); border-color:transparent; color:#fff; box-shadow:0 6px 16px -8px rgba(99,102,241,.9); }
.nfx-b.primary:hover { filter:brightness(1.07); transform:translateY(-1px); color:#fff; }
.nfx-bar { height:3px; background:#f1f5f9; flex-shrink:0; }
.nfx-bar > i { display:block; height:100%; width:100%; background:linear-gradient(90deg,#6366f1,#f43f5e); transition:width .25s linear; }


/* Logo THẬT của sàn trong huy hiệu .lhs-plat (SVG nội tuyến, không phải icon) */
.lhs-plogo { width:1.35em; height:1.35em; flex-shrink:0; display:block; }
.lhs-plat.big { font-size:.66rem; padding:3px 9px 3px 5px; border-radius:8px; gap:5px; }
.lhs-plat.big .lhs-plogo { width:1.6em; height:1.6em; }
/* Nốt TikTok tô currentColor: nền chip tối → logo bản chữ trắng (đúng chuẩn nền tối của hãng) */
.lhs-plat.tiktok { color:#fff; }
[data-theme="dark"] .lhs-plat.tiktok { background:#000; color:#fff; }

/* ── Nút mở lại thông báo ── */
.lhs-a.nf { border-color:#fed7aa; background:#fff7ed; color:#c2410c; }
.lhs-a.nf:hover { background:#ffedd5; border-color:#fdba74; color:#9a3412; }
/* Kênh ĐANG live → nút chuông chuyển xanh cho khớp với thẻ thông báo sẽ mở ra */
.lhs-a.nf.on { border-color:#a7f3d0; background:#ecfdf5; color:#047857; }
.lhs-a.nf.on:hover { background:#d1fae5; border-color:#6ee7b7; color:#065f46; }
[data-theme="dark"] .lhs-a.nf.on { background:#052e2b; border-color:#065f46; color:#6ee7b7; }
.lhs-sact { margin-top:2px; }
.lhs-mini {
  display:inline-flex; align-items:center; gap:5px; cursor:pointer; font-family:inherit;
  border:1.5px solid #fed7aa; background:#fff7ed; color:#c2410c; border-radius:8px;
  padding:4px 10px; font-size:.66rem; font-weight:700; min-height:28px; transition:.15s;
}
.lhs-mini:hover { background:#ffedd5; border-color:#fdba74; color:#9a3412; }
.lhs-mini:focus-visible { outline:0; box-shadow:0 0 0 3px rgba(249,115,22,.18); }

/* ── Responsive ── */
@media (max-width:1023px) {
  .nfx-left { width:212px; min-width:212px; }
  .nfx-stats { grid-template-columns:repeat(auto-fit,minmax(104px,1fr)); }
}
@media (max-width:767px) {
  .nfx-ov { padding:10px; align-items:flex-start; padding-top:max(10px, env(safe-area-inset-top)); }
  .nfx-card { width:100%; max-height:94vh; border-radius:16px; }
  .nfx-body { flex-direction:column; overflow-y:auto; }
  .nfx-left { width:100%; min-width:0; }
  .nfx-shot { min-height:0; height:200px; }
  .nfx-shotimg { object-position:center 22%; }
  /* Màn hẹp: hạ sticker xuống DƯỚI dòng tên kênh để tên không bị cắt cụt */
  .nfx-stk { width:84px; top:58px; right:8px; }
  .nfx-ch { padding-right:0; }
  .nfx-badges, .nfx-title { padding-right:96px; }
  .nfx-right { overflow:visible; padding:12px 13px; }
  .nfx-nick { font-size:.92rem; }
  .nfx-wt { font-size:.86rem; }
  .nfx-len { margin-left:0; }
  /* Vùng chạm cảm ứng: nút biểu tượng tối thiểu 34px */
  .nfx-x { width:34px; height:34px; min-width:34px; }
  .nfx-shotnav button { width:34px; height:34px; }
}
@media (max-width:480px) {
  .nfx-head { padding:9px 11px; }
  .nfx-tag { font-size:.72rem; }
  .nfx-shot { height:168px; }
  .nfx-title { font-size:.74rem; -webkit-line-clamp:2; }
  .nfx-stk { width:72px; top:56px; }
  .nfx-badges, .nfx-title { padding-right:82px; }
  .nfx-stats { grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); gap:6px; }
  .nfx-st { padding:6px 7px; gap:6px; }
  .nfx-st .v { font-size:.8rem; }
  /* Màn hẹp: cho nhãn xuống dòng thay vì cắt cụt ("Đỉnh người x…") */
  .nfx-st .k { white-space:normal; line-height:1.25; }
  .nfx-foot { padding:9px 11px; gap:6px; }
  .nfx-b { padding:7px 10px; font-size:.68rem; flex:1 1 auto; }
  .nfx-sp { display:none; }
}

/* ── Nền tối ── */
[data-theme="dark"] .nfx-card { background:#161b22; box-shadow:0 32px 80px -18px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.06); }
[data-theme="dark"] .nfx-nick, [data-theme="dark"] .nfx-wt, [data-theme="dark"] .nfx-st .v { color:#e2e8f0; }
[data-theme="dark"] .nfx-title { color:#cbd5e1; }
[data-theme="dark"] .nfx-when, [data-theme="dark"] .nfx-st, [data-theme="dark"] .nfx-nostat { background:#0f172a; border-color:#30363d; }
[data-theme="dark"] .nfx-st > i { background:#312e81; color:#c7d2fe; }
[data-theme="dark"] .nfx-room { background:#1e293b; color:#cbd5e1; }
[data-theme="dark"] .nfx-foot { background:#161b22; border-color:#30363d; }
[data-theme="dark"] .nfx-b { background:#0f172a; border-color:#334155; color:#cbd5e1; }
/* Phải dựng LẠI gradient: quy tắc .nfx-b nền tối ở trên cùng độ ưu tiên đã đè mất nút chính */
[data-theme="dark"] .nfx-b.primary { background:linear-gradient(135deg,#6366f1,#8b5cf6); border-color:transparent; color:#fff; }
[data-theme="dark"] .nfx-bar { background:#0f172a; }
[data-theme="dark"] .lhs-a.nf, [data-theme="dark"] .lhs-mini { background:#431407; border-color:#7c2d12; color:#fdba74; }
[data-theme="dark"] .lhs-a.nf:hover, [data-theme="dark"] .lhs-mini:hover { background:#7c2d12; color:#fed7aa; }