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

.vg-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2.5px solid rgba(99, 102, 241, 0.8);
  border-top-color: transparent;
  box-shadow: 0 0 12px rgba(99, 102, 241, 0.25);
}
.vg-ring.r1 { animation: vg-spin-1 7s linear infinite; }
.vg-ring.r2 {
  inset: 13px;
  border-color: rgba(236, 72, 153, 0.7);
  border-left-color: transparent;
  box-shadow: 0 0 12px rgba(236, 72, 153, 0.22);
  animation: vg-spin-2 9s linear infinite;
}
.vg-ring.r3 {
  inset: 28px;
  border-color: rgba(245, 158, 11, 0.65);
  border-bottom-color: transparent;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.2);
  animation: vg-spin-3 11s linear infinite;
}

@keyframes vg-spin-1 {
  from { transform: rotate3d(1, 0.55, 0.2, 0deg); }
  to   { transform: rotate3d(1, 0.55, 0.2, 360deg); }
}
@keyframes vg-spin-2 {
  from { transform: rotate3d(0.4, 1, 0.3, 0deg); }
  to   { transform: rotate3d(0.4, 1, 0.3, -360deg); }
}
@keyframes vg-spin-3 {
  from { transform: rotate3d(0.25, 0.5, 1, 0deg); }
  to   { transform: rotate3d(0.25, 0.5, 1, 360deg); }
}

.vg-core {
  position: absolute;
  inset: 41%;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #ffffff, #a5b4fc 42%, #6366f1 78%);
  box-shadow: 0 0 20px 5px rgba(99, 102, 241, 0.5);
  animation: vg-core-pulse 2.4s ease-in-out infinite;
}
@keyframes vg-core-pulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 16px 4px rgba(99, 102, 241, 0.45); }
  50%      { transform: scale(1.18); box-shadow: 0 0 26px 8px rgba(99, 102, 241, 0.65); }
}

/* — 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: 262px;
  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 {
  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);
  overflow: hidden;
  white-space: nowrap;
  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; overflow: hidden; text-overflow: ellipsis }

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

.vg-gi-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 2.5px 0;
  font-size: 0.74rem;
}
.vg-gi-row span { width: 18px; text-align: center; flex-shrink: 0 }
.vg-gi-row b { font-size: 0.86rem; font-weight: 800; color: #1e293b; font-variant-numeric: tabular-nums; flex-shrink: 0; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.vg-gi-row small { color: #64748b; font-size: 0.66rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }

[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;
  left: 50%; bottom: 18px;
  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;
}
.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) {
  .vg-live-btn { bottom: 12px; 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; }
}