/* ═══════════════════════════════════════════════════════════════════════════
   VIEWER GLASS LAYER — Professional iPhone-style overlay
   ───────────────────────────────────────────────────────────────────────────
   Áp dụng SAU style.css. Giữ NGUYÊN bố cục — chỉ thay đổi:
     • Background ảnh nền tùy chỉnh (từ Filter Link admin) qua --vg-bg-image
     • Frosted glass cho sidebar, header, cards, modals
     • Soft gradient mặc định khi không có ảnh nền
     • Subtle entry animations (fade-up, shimmer, live-pulse)
     • Hover lift cho cards
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────── Custom BG via CSS variable ───────────────────────────── */

:root {
  --vg-bg-image: none;
  /* Light overlay — chỉ 25-35% để BG ảnh hiển thị rõ, text trong card vẫn dễ đọc nhờ frosted glass riêng */
  --vg-bg-overlay: linear-gradient(135deg,
    rgba(238, 242, 255, 0.30) 0%,
    rgba(245, 243, 255, 0.25) 50%,
    rgba(255, 247, 237, 0.30) 100%);
}

[data-theme="dark"] {
  --vg-bg-overlay: linear-gradient(135deg,
    rgba(15, 23, 42, 0.40) 0%,
    rgba(30, 27, 75, 0.36) 50%,
    rgba(49, 10, 101, 0.40) 100%);
}

/* ───────────────────────────── Background layer (behind everything) ───────────────────────────── */

html { background: #eef2ff; }
[data-theme="dark"] html, body.dark-theme { background: #0a0e1a; }

body {
  position: relative;
  min-height: 100vh;
  background-color: transparent !important;
}

/* Fixed background layer — pure decoration, never overlaps content */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image: var(--vg-bg-image),
    linear-gradient(135deg, #e0e7ff 0%, #ede9fe 35%, #fce7f3 65%, #fef3c7 100%);
  background-size: cover, cover;
  background-position: center center, center center;
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
  transition: background-image 0.6s ease;
}

[data-theme="dark"] body::before,
body.dark-theme::before {
  background-image: var(--vg-bg-image),
    linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #310a65 100%);
}

/* Overlay tint nhẹ — chỉ làm dịu, KHÔNG làm mờ BG */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--vg-bg-overlay);
  pointer-events: none;
}

/* Ensure app sits above background layers */
.app { position: relative; z-index: 1; }

/* CRITICAL: main content area must be transparent so background shows through subtly */
.main-content,
.content {
  background: transparent !important;
}

/* ───────────────────────────── Sidebar — Frosted ───────────────────────────── */

.sidebar {
  background-color: rgba(255, 255, 255, 0.86) !important;
  backdrop-filter: blur(28px) saturate(140%) brightness(1.05);
  -webkit-backdrop-filter: blur(28px) saturate(140%) brightness(1.05);
  border-right: 1px solid rgba(255, 255, 255, 0.7) !important;
  box-shadow:
    1px 0 0 rgba(255, 255, 255, 0.8) inset,
    8px 0 32px rgba(99, 102, 241, 0.08);
}

body.dark-theme .sidebar,
[data-theme="dark"] .sidebar {
  background-color: rgba(15, 23, 42, 0.86) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow:
    1px 0 0 rgba(255, 255, 255, 0.08) inset,
    8px 0 32px rgba(0, 0, 0, 0.45);
}

.sidebar-header .logo span {
  background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* ───────────────────────────── Header — Frosted ───────────────────────────── */

.main-header,
.header,
header.main-header {
  background-color: rgba(255, 255, 255, 0.86) !important;
  backdrop-filter: blur(24px) saturate(140%) brightness(1.05);
  -webkit-backdrop-filter: blur(24px) saturate(140%) brightness(1.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.6) !important;
}

body.dark-theme .main-header,
[data-theme="dark"] .main-header {
  background-color: rgba(15, 23, 42, 0.86) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* ───────────────────────────── Cards & Widgets — Frosted ───────────────────────────── */

/* Card glass — tăng opacity + giảm saturate để KHÔNG bị màu BG đè vào chữ
   - Background: 88% trắng → màu BG chỉ ảnh hưởng ~12% (đủ nhẹ để giữ độ "kính")
   - saturate(140%) + brightness(1.05): làm lớp kính sáng + tươi hơn, KHÔNG kéo màu BG vào quá nhiều
   - Inner background-color riêng + isolation: cô lập hoàn toàn khỏi BG */
.widget:not(.note-widget),
.schedule-card,
.featured-section:not(.featured-note),
.featured-card,
.next-banner,
.empty-state,
.modal-content {
  background-color: rgba(255, 255, 255, 0.88) !important;
  background-image: linear-gradient(135deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0) 60%) !important;
  backdrop-filter: blur(24px) saturate(140%) brightness(1.05);
  -webkit-backdrop-filter: blur(24px) saturate(140%) brightness(1.05);
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  box-shadow:
    0 8px 32px rgba(15, 23, 42, 0.08),
    0 1px 2px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
  isolation: isolate;
  transition:
    transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    border-color 0.25s ease !important;
}

body.dark-theme .widget,
body.dark-theme .schedule-card,
body.dark-theme .featured-section,
body.dark-theme .featured-card,
body.dark-theme .next-banner,
body.dark-theme .note-section,
body.dark-theme .modal-content,
body.dark-theme .empty-state,
[data-theme="dark"] .widget,
[data-theme="dark"] .schedule-card,
[data-theme="dark"] .featured-section,
[data-theme="dark"] .featured-card,
[data-theme="dark"] .modal-content {
  background-color: rgba(15, 23, 42, 0.86) !important;
  background-image: linear-gradient(135deg,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(255, 255, 255, 0) 60%) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

/* Hover lift — only on non-touch */
@media (hover: hover) {
  .schedule-card:hover,
  .featured-card:hover {
    transform: translateY(-3px);
    border-color: rgba(99, 102, 241, 0.35) !important;
    box-shadow:
      0 16px 44px rgba(99, 102, 241, 0.16),
      inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
  }
  body.dark-theme .schedule-card:hover {
    border-color: rgba(168, 85, 247, 0.45) !important;
    box-shadow:
      0 16px 44px rgba(168, 85, 247, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  }
}

/* ───────────────────────────── Next Banner — Premium gradient + shimmer ───────────────────────────── */

.next-banner {
  background: linear-gradient(135deg,
    rgba(99, 102, 241, 0.95) 0%,
    rgba(139, 92, 246, 0.93) 50%,
    rgba(217, 70, 239, 0.92) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #fff !important;
  box-shadow:
    0 16px 44px rgba(139, 92, 246, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  position: relative;
  overflow: hidden;
}
.next-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg,
    transparent 30%, rgba(255, 255, 255, 0.18) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: vg-shimmer 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes vg-shimmer {
  0%, 100% { background-position: 200% 50%; }
  50%      { background-position: -50% 50%;  }
}

/* ───────────────────────────── Schedule card states ───────────────────────────── */

.schedule-card.live,
.schedule-card[data-status="live"] {
  border-left: 3px solid #ef4444 !important;
  animation: vg-live-pulse 2.4s ease-in-out infinite;
}
@keyframes vg-live-pulse {
  0%, 100% {
    box-shadow:
      0 8px 32px rgba(239, 68, 68, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.6);
  }
  50% {
    box-shadow:
      0 12px 40px rgba(239, 68, 68, 0.36),
      inset 0 1px 0 rgba(255, 255, 255, 0.6);
  }
}

.schedule-card.upcoming,
.schedule-card[data-status="upcoming"] {
  border-left: 3px solid #f59e0b !important;
}

.schedule-card.past,
.schedule-card[data-status="past"] {
  opacity: 0.72;
  border-left: 3px solid #94a3b8 !important;
}

/* ───────────────────────────── Stats widget ───────────────────────────── */

.stat-item {
  background-color: rgba(255, 255, 255, 0.82) !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-radius: 14px !important;
  transition: transform .25s ease, box-shadow .25s ease;
}
.stat-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.12);
}
.stat-item.live     .stat-icon { background: linear-gradient(135deg, #ef4444, #dc2626); color: #fff; }
.stat-item.upcoming .stat-icon { background: linear-gradient(135deg, #f59e0b, #ea580c); color: #fff; }
.stat-item.total    .stat-icon,
.stat-item.completed .stat-icon { background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; }

body.dark-theme .stat-item {
  background-color: rgba(30, 41, 59, 0.82) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* ───────────────────────────── Buttons primary ───────────────────────────── */

.btn-primary,
button.btn-primary,
.view-toggle button.active {
  background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35) !important;
  transition: transform .2s ease, box-shadow .25s ease, filter .2s ease !important;
}
.btn-primary:hover,
button.btn-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5) !important;
}

/* ───────────────────────────── Note section soft amber ───────────────────────────── */

/* Ghi chú: BG SOLID hoàn toàn (đè cả style.css gốc) — chữ trong note có nhiều màu nổi
   (đỏ, highlight xanh/cam) → cần nền sạch trắng/đen tuyệt đối tránh chữ chìm vào BG ảnh */
.note-section,
.notes-section,
.announcement-section,
.featured-note,
.note-widget {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(251, 191, 36, 0.45) !important;
  box-shadow:
    0 8px 32px rgba(15, 23, 42, 0.12),
    0 2px 4px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

body.dark-theme .note-section,
body.dark-theme .notes-section,
body.dark-theme .announcement-section,
body.dark-theme .featured-note,
body.dark-theme .note-widget,
[data-theme="dark"] .note-section,
[data-theme="dark"] .notes-section,
[data-theme="dark"] .announcement-section,
[data-theme="dark"] .featured-note,
[data-theme="dark"] .note-widget {
  background: #1e293b !important;
  background-color: #1e293b !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(251, 191, 36, 0.4) !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* ───────────────────────────── Entry animations ───────────────────────────── */

@keyframes vg-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.schedule-card,
.widget,
.featured-card,
.next-banner,
.note-section {
  animation: vg-fade-up 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.schedule-card:nth-child(1)  { animation-delay: 0.02s; }
.schedule-card:nth-child(2)  { animation-delay: 0.05s; }
.schedule-card:nth-child(3)  { animation-delay: 0.08s; }
.schedule-card:nth-child(4)  { animation-delay: 0.11s; }
.schedule-card:nth-child(5)  { animation-delay: 0.14s; }
.schedule-card:nth-child(6)  { animation-delay: 0.17s; }
.schedule-card:nth-child(7)  { animation-delay: 0.20s; }
.schedule-card:nth-child(8)  { animation-delay: 0.23s; }
.schedule-card:nth-child(9)  { animation-delay: 0.26s; }
.schedule-card:nth-child(10) { animation-delay: 0.29s; }

@media (prefers-reduced-motion: reduce) {
  body::before, body::after,
  .next-banner::before,
  .schedule-card.live,
  .schedule-card,
  .widget,
  .featured-card,
  .next-banner,
  .note-section {
    animation: none !important;
  }
  .schedule-card:hover,
  .featured-card:hover {
    transform: none;
  }
}

/* ───────────────────────────── Scrollbar slim glass ───────────────────────────── */

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.4), rgba(168, 85, 247, 0.4));
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.7), rgba(168, 85, 247, 0.7));
}

/* ───────────────────────────── Mobile tweaks ───────────────────────────── */

@media (max-width: 768px) {
  .sidebar,
  .main-header,
  .widget,
  .schedule-card,
  .featured-card,
  .next-banner,
  .modal-content {
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
  }
}

/* ───────────────────────────── No-backdrop-filter fallback ───────────────────────────── */

@supports not (backdrop-filter: blur(1px)) {
  .sidebar,
  .main-header,
  .widget,
  .schedule-card,
  .featured-card,
  .next-banner,
  .modal-content {
    background: rgba(255, 255, 255, 0.95) !important;
  }
  body.dark-theme .sidebar,
  body.dark-theme .main-header,
  body.dark-theme .widget,
  body.dark-theme .schedule-card,
  body.dark-theme .modal-content {
    background: rgba(15, 23, 42, 0.95) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ANNOUNCEMENT MODAL — Premium Redesign + Cat Mascots
   ═══════════════════════════════════════════════════════════════════════════ */
#announcementModal .modal-box {
  position: relative;
  border-radius: 24px !important;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(32px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow:
    0 24px 60px rgba(99, 102, 241, 0.18),
    0 8px 24px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
  animation: vg-modal-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

body.dark-theme #announcementModal .modal-box,
[data-theme="dark"] #announcementModal .modal-box {
  background: rgba(15, 23, 42, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

@keyframes vg-modal-pop {
  0%   { opacity: 0; transform: scale(0.85) translateY(20px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* Modal overlay — soft dark glass */
#announcementModal .modal-overlay {
  background: rgba(15, 23, 42, 0.45) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* Header redesign — gradient + animated icon */
#announcementModal .modal-header {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 35%, #ec4899 100%) !important;
  padding: 18px 22px !important;
  position: relative;
  overflow: hidden;
  border: none !important;
}
#announcementModal .modal-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.18) 0%, transparent 35%),
    radial-gradient(circle at 80% 60%, rgba(255, 255, 255, 0.12) 0%, transparent 35%);
  pointer-events: none;
}
#announcementModal .modal-header::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.15) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: vg-shimmer 4s ease-in-out infinite;
  pointer-events: none;
}
#announcementModal .modal-header i.fa-bullhorn {
  font-size: 1.3rem;
  background: rgba(255, 255, 255, 0.25);
  width: 38px; height: 38px;
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff !important;
  animation: vg-bullhorn-ring 1.5s ease-in-out infinite;
  position: relative; z-index: 1;
}
@keyframes vg-bullhorn-ring {
  0%, 100% { transform: rotate(0deg) scale(1); }
  10%      { transform: rotate(-12deg) scale(1.05); }
  20%      { transform: rotate(12deg) scale(1.05); }
  30%      { transform: rotate(-8deg) scale(1); }
  40%      { transform: rotate(0deg) scale(1); }
}
#announcementModal .modal-header h3 {
  color: #fff !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  position: relative; z-index: 1;
}
#announcementModal .modal-close {
  background: rgba(255, 255, 255, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #fff !important;
  border-radius: 10px !important;
  transition: all 0.2s !important;
  position: relative; z-index: 1;
}
#announcementModal .modal-close:hover {
  background: rgba(255, 255, 255, 0.35) !important;
  transform: rotate(90deg);
}

/* Modal body — compact padding, không có khoảng trống thừa trên đầu */
#announcementModal .modal-scroll-content { padding: 14px 24px 18px !important; }
#announcementModal .modal-body { font-size: 0.95rem; line-height: 1.65; padding-top: 0 !important; margin-top: 0 !important; }
#announcementModal .modal-body > *:first-child { margin-top: 0 !important; padding-top: 0 !important; }

/* OK button — gradient pill */
#announcementModal .modal-footer {
  background: linear-gradient(180deg, transparent, rgba(99, 102, 241, 0.04)) !important;
  border: none !important;
  padding: 16px 22px !important;
}
#announcementModal .btn-primary {
  background: linear-gradient(135deg, #6366f1, #8b5cf6, #ec4899) !important;
  background-size: 200% 100% !important;
  color: #fff !important;
  border: none !important;
  padding: 10px 24px !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.35) !important;
  transition: background-position 0.4s ease, transform 0.2s ease, box-shadow 0.25s ease !important;
}
#announcementModal .btn-primary:hover {
  background-position: 100% 0 !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.5) !important;
}

/* ─────────────────────── Interactive Cat Mascot ─────────────────────── */
/* Full body sitting cat — eyes follow cursor, walks along bottom edge */
.vg-cat {
  position: absolute;
  bottom: 6px; left: 14px;
  width: 78px; height: 92px;
  z-index: 5;
  pointer-events: none;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.22));
  transition: left 0.45s cubic-bezier(0.34, 1.4, 0.64, 1),
              transform 0.3s ease;
  will-change: left, transform;
  transform-origin: 50% 100%;
}
.vg-cat.vg-cat-excited {
  animation: vg-cat-bounce 0.45s ease-out 2;
}
.vg-cat.vg-cat-near .vg-cat-body {
  animation: vg-cat-wiggle 0.5s ease-in-out infinite;
  transform-origin: 50% 90%;
}
@keyframes vg-cat-bounce {
  0%, 100% { transform: translateY(0) scaleY(1); }
  20%      { transform: translateY(0) scaleY(0.85); }
  50%      { transform: translateY(-18px) scaleY(1.05); }
  80%      { transform: translateY(0) scaleY(0.95); }
}
@keyframes vg-cat-wiggle {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(4deg); }
}

/* Tail — wags behind body */
.vg-cat-tail {
  transform-origin: 22px 78px;
  animation: vg-tail-wag 1.1s ease-in-out infinite;
}
@keyframes vg-tail-wag {
  0%, 100% { transform: rotate(-18deg); }
  50%      { transform: rotate(28deg); }
}

/* Ears — twitch occasionally */
.vg-cat-ear-l { transform-origin: 30px 28px; animation: vg-ear-twitch-l 6s ease-in-out infinite; }
.vg-cat-ear-r { transform-origin: 64px 28px; animation: vg-ear-twitch-r 6s ease-in-out infinite 0.3s; }
@keyframes vg-ear-twitch-l {
  0%, 88%, 100% { transform: rotate(0deg); }
  90%, 94%      { transform: rotate(-12deg); }
}
@keyframes vg-ear-twitch-r {
  0%, 88%, 100% { transform: rotate(0deg); }
  90%, 94%      { transform: rotate(12deg); }
}

/* Eyelids blink */
.vg-cat-eyelid {
  transform-origin: center;
  animation: vg-blink 5s ease-in-out infinite;
}
@keyframes vg-blink {
  0%, 90%, 95%, 100% { transform: scaleY(0); }
  92%, 94%           { transform: scaleY(1); }
}

/* Front paws — swipe when cursor near */
.vg-cat-paw-l { transform-origin: 32px 78px; transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
.vg-cat-paw-r { transform-origin: 60px 78px; transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
.vg-cat.vg-cat-near .vg-cat-paw-r {
  animation: vg-paw-swipe 0.55s ease-in-out infinite;
}
@keyframes vg-paw-swipe {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50%      { transform: translate(6px, -10px) rotate(-35deg); }
}

/* Chest heave — gentle breathing */
.vg-cat-body { animation: vg-cat-breathe 2.8s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes vg-cat-breathe {
  0%, 100% { transform: scaleY(1) scaleX(1); }
  50%      { transform: scaleY(1.03) scaleX(0.99); }
}

/* ─────── WALKING — bobbing body + alternating legs ─────── */
.vg-cat.vg-cat-walking {
  /* Disable spring transition during walking — use animation instead */
  transition: left 0.05s linear !important;
  animation: vg-cat-bob 0.35s ease-in-out infinite;
}
@keyframes vg-cat-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* Face left when walking left */
.vg-cat.vg-cat-walking.vg-cat-face-left svg { transform: scaleX(-1); }

/* Override breathing during walk — body bobs naturally */
.vg-cat.vg-cat-walking .vg-cat-body {
  animation: none;
}

/* Front legs alternate */
.vg-cat-hindleg { transform-origin: 50% 88%; }
.vg-cat.vg-cat-walking .vg-cat-paw-l    { animation: vg-leg-step-a 0.35s ease-in-out infinite; }
.vg-cat.vg-cat-walking .vg-cat-paw-r    { animation: vg-leg-step-b 0.35s ease-in-out infinite; }
.vg-cat.vg-cat-walking .vg-cat-hindleg-l { animation: vg-leg-step-b 0.35s ease-in-out infinite; }
.vg-cat.vg-cat-walking .vg-cat-hindleg-r { animation: vg-leg-step-a 0.35s ease-in-out infinite; }

@keyframes vg-leg-step-a {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-6px) rotate(-10deg); }
}
@keyframes vg-leg-step-b {
  0%, 100% { transform: translateY(-6px) rotate(10deg); }
  50%      { transform: translateY(0) rotate(0deg); }
}

/* Tail wags faster while walking */
.vg-cat.vg-cat-walking .vg-cat-tail {
  animation: vg-tail-wag 0.5s ease-in-out infinite;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .vg-cat,
  .vg-cat-tail, .vg-cat-eyelid, .vg-cat-paw-l, .vg-cat-paw-r,
  .vg-cat-ear-l, .vg-cat-ear-r, .vg-cat-body,
  .vg-cat.vg-cat-near .vg-cat-body,
  .vg-cat.vg-cat-near .vg-cat-paw-r,
  .vg-cat.vg-cat-excited { animation: none !important; transition: none !important; }
}

/* ─────────────── (Legacy CSS-only cats — DISABLED) ─────────────── */
#announcementModal .modal-box-DISABLED::before {
  /* Cat 1: top-right peeking down */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><g><ellipse cx='32' cy='44' rx='20' ry='17' fill='%23f59e0b'/><polygon points='14,30 20,18 26,30' fill='%23f59e0b'/><polygon points='38,30 44,18 50,30' fill='%23f59e0b'/><polygon points='17,26 20,22 23,26' fill='%23ec4899'/><polygon points='41,26 44,22 47,26' fill='%23ec4899'/><ellipse cx='25' cy='42' rx='2.5' ry='3' fill='%23000'/><ellipse cx='39' cy='42' rx='2.5' ry='3' fill='%23000'/><circle cx='25.5' cy='41' r='0.8' fill='%23fff'/><circle cx='39.5' cy='41' r='0.8' fill='%23fff'/><path d='M 30 47 Q 32 49 34 47' stroke='%23000' stroke-width='1.5' fill='none' stroke-linecap='round'/><polygon points='30,46 32,48 34,46' fill='%23ec4899'/><path d='M 18 42 L 12 40 M 18 44 L 11 44 M 18 46 L 12 48' stroke='%23000' stroke-width='0.8' stroke-linecap='round'/><path d='M 46 42 L 52 40 M 46 44 L 53 44 M 46 46 L 52 48' stroke='%23000' stroke-width='0.8' stroke-linecap='round'/></g></svg>");
  top: 70px; right: -10px;
  animation: vg-cat-peek 5s ease-in-out infinite;
}
#announcementModal .modal-box::after {
  /* Cat 2: bottom-left running */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><g><ellipse cx='32' cy='40' rx='22' ry='14' fill='%23a78bfa'/><polygon points='12,32 18,18 26,30' fill='%23a78bfa'/><polygon points='38,30 46,18 52,32' fill='%23a78bfa'/><polygon points='15,28 18,23 21,28' fill='%23fbcfe8'/><polygon points='43,28 46,23 49,28' fill='%23fbcfe8'/><ellipse cx='24' cy='38' rx='2.5' ry='3' fill='%23000'/><ellipse cx='40' cy='38' rx='2.5' ry='3' fill='%23000'/><circle cx='24.5' cy='37' r='0.8' fill='%23fff'/><circle cx='40.5' cy='37' r='0.8' fill='%23fff'/><polygon points='30,42 32,44 34,42' fill='%23ec4899'/><path d='M 28 46 Q 32 49 36 46' stroke='%23000' stroke-width='1.5' fill='none' stroke-linecap='round'/><path d='M 52 38 Q 60 34 58 44' stroke='%23a78bfa' stroke-width='4' fill='none' stroke-linecap='round'/></g></svg>");
  bottom: 12px; left: 10px;
  animation: vg-cat-run 9s linear infinite;
}

@keyframes vg-cat-peek {
  0%, 90%, 100% { transform: translateY(0) rotate(0deg); }
  45%           { transform: translateY(-8px) rotate(-8deg); }
  50%           { transform: translateY(-8px) rotate(8deg); }
  55%           { transform: translateY(-8px) rotate(-4deg); }
}

@keyframes vg-cat-run {
  0%   { left: -40px; transform: rotate(-2deg) scaleX(1); }
  45%  { left: calc(100% - 30px); transform: rotate(2deg) scaleX(1); }
  50%  { left: calc(100% - 30px); transform: rotate(0deg) scaleX(-1); }
  95%  { left: -40px; transform: rotate(0deg) scaleX(-1); }
  100% { left: -40px; transform: rotate(0deg) scaleX(1); }
}

/* Reduce motion: tắt mèo chạy */
@media (prefers-reduced-motion: reduce) {
  #announcementModal .modal-box::before,
  #announcementModal .modal-box::after,
  #announcementModal .modal-header::after,
  #announcementModal .modal-header i.fa-bullhorn {
    animation: none !important;
  }
}

/* Make modal content sit above mascots */
#announcementModal .modal-header,
#announcementModal .modal-scroll-content,
#announcementModal .modal-footer,
#announcementModal .modal-links-badge { position: relative; z-index: 2; }


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION COUNT BADGES — Đảm bảo nổi bật trên mọi BG (sáng/tối/ảnh nền)
   ═══════════════════════════════════════════════════════════════════════════ */
.section-header-unified .section-count {
  min-width: 28px !important;
  text-align: center !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.02em !important;
  color: #ffffff !important;
  border: 2px solid rgba(255, 255, 255, 0.5) !important;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

/* Images — TEAL solid */
.section-header-unified.images .section-count {
  background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%) !important;
}
/* Events — AMBER solid (đã có gradient) */
.section-header-unified.events .section-count {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
}
/* Schedules — GREEN solid */
.section-header-unified.schedules .section-count {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
}
/* Note — AMBER solid */
.section-header-unified.note .section-count {
  background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%) !important;
}

/* Dark theme: viền sáng hơn để tăng tương phản */
body.dark-theme .section-header-unified .section-count,
[data-theme="dark"] .section-header-unified .section-count {
  border-color: rgba(255, 255, 255, 0.35) !important;
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HEAVY FROST MODE — phủ mờ đậm: BG chỉ là hint màu, UI cards rõ nét
   Bật khi setting bg_heavy_frost = true
   ═══════════════════════════════════════════════════════════════════════════ */
body.vg-heavy-frost {
  --vg-bg-overlay: linear-gradient(135deg,
    rgba(238, 242, 255, 0.88) 0%,
    rgba(245, 243, 255, 0.86) 50%,
    rgba(255, 247, 237, 0.88) 100%) !important;
}
body.vg-heavy-frost[data-theme="dark"],
body.vg-heavy-frost.dark-theme {
  --vg-bg-overlay: linear-gradient(135deg,
    rgba(15, 23, 42, 0.90) 0%,
    rgba(30, 27, 75, 0.88) 50%,
    rgba(49, 10, 101, 0.90) 100%) !important;
}

/* Cards solid hơn nữa khi heavy frost */
body.vg-heavy-frost .widget:not(.note-widget),
body.vg-heavy-frost .schedule-card,
body.vg-heavy-frost .featured-section:not(.featured-note),
body.vg-heavy-frost .featured-card,
body.vg-heavy-frost .empty-state,
body.vg-heavy-frost .modal-content {
  background-color: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(99, 102, 241, 0.15) !important;
}
body.vg-heavy-frost.dark-theme .widget,
body.vg-heavy-frost.dark-theme .schedule-card,
body.vg-heavy-frost.dark-theme .featured-section,
body.vg-heavy-frost.dark-theme .featured-card,
body.vg-heavy-frost.dark-theme .modal-content,
body.vg-heavy-frost[data-theme="dark"] .widget,
body.vg-heavy-frost[data-theme="dark"] .schedule-card {
  background-color: rgba(15, 23, 42, 0.94) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

body.vg-heavy-frost .sidebar,
body.vg-heavy-frost .main-header {
  background-color: rgba(255, 255, 255, 0.95) !important;
}
body.vg-heavy-frost.dark-theme .sidebar,
body.vg-heavy-frost.dark-theme .main-header,
body.vg-heavy-frost[data-theme="dark"] .sidebar,
body.vg-heavy-frost[data-theme="dark"] .main-header {
  background-color: rgba(15, 23, 42, 0.94) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TINY MCE CONTENT PRESERVATION
   Đảm bảo mọi cấu hình chữ (màu, cỡ, font, highlight, alignment) từ TinyMCE
   trong THÔNG BÁO và GHI CHÚ đều được giữ nguyên ở viewer
   ═══════════════════════════════════════════════════════════════════════════ */

/* Default color theo theme — để chữ không màu vẫn đọc được trên BG note */
.featured-note,
.featured-note-content,
.note-widget,
.note-content,
#announcementModal .modal-body,
#announcementModal .modal-scroll-content {
  color: #0f172a !important;
}

body.dark-theme .featured-note,
body.dark-theme .featured-note-content,
body.dark-theme .note-widget,
body.dark-theme .note-content,
body.dark-theme #announcementModal .modal-body,
body.dark-theme #announcementModal .modal-scroll-content,
[data-theme="dark"] .featured-note,
[data-theme="dark"] .featured-note-content,
[data-theme="dark"] .note-widget,
[data-theme="dark"] .note-content,
[data-theme="dark"] #announcementModal .modal-body,
[data-theme="dark"] #announcementModal .modal-scroll-content {
  color: #f8fafc !important;
}

/* Inline style từ TinyMCE LUÔN thắng — gỡ mọi rule có thể override */
.featured-note-content *,
.note-content *,
#modalBody *,
#announcementModal .modal-body * {
  /* Reset font-family inheritance để inline font-family hoạt động */
  font-family: revert;
}

/* Cho phép font-size & color inline override theme defaults
   Không có !important trên rule mặc định bên trên = inline luôn thắng */
.featured-note-content [style*="color"],
.note-content [style*="color"],
#announcementModal .modal-body [style*="color"],
.featured-note-content [style*="font-size"],
.note-content [style*="font-size"],
#announcementModal .modal-body [style*="font-size"],
.featured-note-content [style*="background"],
.note-content [style*="background"],
#announcementModal .modal-body [style*="background"] {
  /* Inline styles win automatically — này chỉ document intent */
}

/* Highlight (background-color span) — đảm bảo có padding đẹp */
.featured-note-content span[style*="background-color"],
.featured-note-content span[style*="background:"],
.note-content span[style*="background-color"],
.note-content span[style*="background:"],
#announcementModal .modal-body span[style*="background-color"],
#announcementModal .modal-body span[style*="background:"] {
  padding: 1px 6px;
  border-radius: 4px;
  display: inline-block;
}

/* Headings từ TinyMCE — giữ size khác biệt rõ */
.featured-note-content h1, #announcementModal .modal-body h1 { font-size: 1.5em; font-weight: 800; }
.featured-note-content h2, #announcementModal .modal-body h2 { font-size: 1.3em; font-weight: 800; }
.featured-note-content h3, #announcementModal .modal-body h3 { font-size: 1.15em; font-weight: 700; }
.featured-note-content h4, #announcementModal .modal-body h4 { font-size: 1.05em; font-weight: 700; }

/* Center / left / right alignment từ TinyMCE — đảm bảo hoạt động */
.featured-note-content [style*="text-align"],
.note-content [style*="text-align"],
#announcementModal .modal-body [style*="text-align"] {
  /* Inline text-align wins */
}

/* Strong / Bold visible rõ */
.featured-note-content strong,
.featured-note-content b,
.note-content strong,
.note-content b,
#announcementModal .modal-body strong,
#announcementModal .modal-body b {
  font-weight: 800;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE SIDEBAR — Khi mở menu mobile, không làm mờ quá đà nội dung
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* Mobile overlay HOÀN TOÀN TRONG SUỐT — chỉ để bắt click đóng sidebar */
  .mobile-overlay {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* ───── Khi sidebar mobile mở ─────
   • Sidebar (trái): SOLID, không blur, NÉT — màu trắng đặc/đen đặc theo theme
   • Mobile overlay (phải): LỚP PHỦ MỜ ĐẬM — tối + blur 8px, dim nội dung
   JS thêm class `vg-sidebar-open` lên body. */

/* Sidebar SOLID — không có frosted glass khi mobile open */
body.vg-sidebar-open .sidebar {
  background-color: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.vg-sidebar-open.dark-theme .sidebar,
body.vg-sidebar-open[data-theme="dark"] .sidebar {
  background-color: #1e293b !important;
}

/* Mobile overlay — phủ mờ vùng content bên phải */
body.vg-sidebar-open .mobile-overlay {
  background: rgba(15, 23, 42, 0.55) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  opacity: 1 !important;
}
body.vg-sidebar-open.dark-theme .mobile-overlay,
body.vg-sidebar-open[data-theme="dark"] .mobile-overlay {
  background: rgba(0, 0, 0, 0.65) !important;
}