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

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