/* style.css - Phiên bản thiết kế lại (Redesign + Chủ đề đặc biệt) */

/* :root (Biến màu) - Giữ nguyên như file cũ của bạn */
:root {
    /* Màu chủ đề mặc định (xanh dương) */
    --theme-primary: #007AFF;
    --theme-secondary: #5AC8FA;
    --theme-bg: linear-gradient(135deg, #F2F2F7 0%, #E5E5EA 100%);
    --theme-accent: #007AFF;
    --theme-card: rgba(255, 255, 255, 0.72);
    --theme-glass: rgba(255, 255, 255, 0.72);
    --theme-border: rgba(255, 255, 255, 0.36);
    
    --theme-primary-rgb: 0, 122, 255;
    --theme-secondary-rgb: 90, 200, 250;
    
    --bg: #F2F2F7;
    --card: var(--theme-card);
    --text: #000000;
    --text-secondary: #3C3C43;
    --text-tertiary: #3C3C4399;
    --accent: var(--theme-accent);
    --note-bg: rgba(255, 243, 205, 0.5);
    --note-border: #FFCC00;
    --glass-bg: var(--theme-glass);
    --glass-border: var(--theme-border);
    
    --normal-card: #FFFFFF;
    --normal-border: #C6C6C8;
    
    --button-bg: var(--glass-bg);
    --button-border: var(--glass-border);
    --button-text: var(--text);
    --button-hover-bg: var(--accent);
    --button-hover-text: #FFFFFF;
    --card-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.06);
    --loading-color: var(--accent);
    --table-bg: var(--glass-bg);
    --table-border: var(--glass-border);
    --table-header-bg: rgba(0, 0, 0, 0.03);
    --table-header-text: var(--text-secondary);
    --table-row-even-bg: rgba(0, 0, 0, 0.01);
    --heading-text: var(--text);
    --strong-text: var(--accent);
    --popup-bg: var(--popup-bg);
    --popup-border: var(--popup-border);
    --menu-bg: var(--menu-bg);
    --menu-border: var(--menu-border);
    --link-color: var(--accent);
    --bullet-color: var(--accent);
    
    --transition-speed: 0.3s;
    --animation-curve: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --apple-blur: 20px;
}

/* Các chủ đề (theme-pink, theme-blue, dark, ...) - Giữ nguyên như file cũ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--theme-bg);
    color: var(--text);
    transition: background var(--transition-speed), color var(--transition-speed);
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
    line-height: 1.47;
    -webkit-font-smoothing: antialiased;
    opacity: 0;
    transition: opacity 0.8s ease;
    /* Thêm padding-top để không bị header che */
    padding-top: 70px; 
}
body.loaded { opacity: 1; }
body.popup-open { overflow: hidden; position: fixed; width: 100%; height: 100%; }

/* Chủ đề màu hồng */
body.theme-pink {
    --theme-primary: #FF2D55; --theme-secondary: #FF9500;
    --theme-bg: linear-gradient(135deg, #FFF0F5 0%, #FFE5EC 100%);
    --theme-accent: #FF2D55; --normal-card: #FFF0F5; --normal-border: #FFB6C1;
    --heading-text: var(--theme-primary); --strong-text: var(--theme-primary);
    --bullet-color: var(--theme-primary); --theme-primary-rgb: 255, 45, 85;
}
/* Chủ đề màu xanh dương */
body.theme-blue {
    --theme-primary: #007AFF; --theme-secondary: #5AC8FA;
    --theme-bg: linear-gradient(135deg, #F2F2F7 0%, #E5E5EA 100%);
    --theme-accent: #007AFF; --normal-card: #F2F2F7; --normal-border: #C6C6C8;
    --heading-text: var(--theme-primary); --strong-text: var(--theme-primary);
    --bullet-color: var(--theme-primary); --theme-primary-rgb: 0, 122, 255;
}
/* (Các theme khác giữ nguyên...) */
body.theme-green { --theme-primary: #34C759; --theme-secondary: #30D158; --theme-bg: linear-gradient(135deg, #F0FFF4 0%, #E6F7ED 100%); --theme-accent: #34C759; --normal-card: #F0FFF4; --normal-border: #A7F3D0; --heading-text: var(--theme-primary); --strong-text: var(--theme-primary); --bullet-color: var(--theme-primary); --theme-primary-rgb: 52, 199, 89; }
body.theme-fresh { --theme-primary: #FF9500; --theme-secondary: #FF5A3D; --theme-bg: linear-gradient(135deg, #FFF8E1 0%, #FFE0B2 100%); --theme-accent: #FF9500; --normal-card: #FFF8E1; --normal-border: #FFE0B2; --heading-text: var(--theme-primary); --strong-text: var(--theme-primary); --bullet-color: var(--theme-primary); --theme-primary-rgb: 255, 149, 0; }
body.theme-popular { --theme-primary: #AF52DE; --theme-secondary: #BF5AF2; --theme-bg: linear-gradient(135deg, #F5F0FF 0%, #EBE5FC 100%); --theme-accent: #AF52DE; --normal-card: #F5F0FF; --normal-border: #E1BEE7; --heading-text: var(--theme-primary); --strong-text: var(--theme-primary); --bullet-color: var(--theme-primary); --theme-primary-rgb: 175, 82, 222; }
body.theme-white { --theme-primary: #8E8E93; --theme-secondary: #C7C7CC; --theme-bg: linear-gradient(135deg, #FFFFFF 0%, #F2F2F7 100%); --theme-accent: #8E8E93; --theme-card: rgba(255, 255, 255, 0.8); --theme-glass: rgba(255, 255, 255, 0.8); --theme-border: rgba(0, 0, 0, 0.1); --normal-card: #FFFFFF; --normal-border: #C6C6C8; --heading-text: var(--theme-primary); --strong-text: var(--theme-primary); --bullet-color: var(--theme-primary); --theme-primary-rgb: 142, 142, 147; }
body.theme-aquaviolet { --theme-primary: #00C7BE; --theme-secondary: #AF52DE; --theme-bg: linear-gradient(135deg, #F0FDFF 0%, #F5F0FF 100%); --theme-accent: #00C7BE; --normal-card: #F0FDFF; --normal-border: #C5E4FF; --heading-text: var(--theme-primary); --strong-text: var(--theme-primary); --bullet-color: var(--theme-primary); --theme-primary-rgb: 0, 199, 190; }
body.theme-mint { --theme-primary: #32D74B; --theme-secondary: #30D158; --theme-bg: linear-gradient(135deg, #F0FFF4 0%, #E6F7ED 100%); --theme-accent: #32D74B; --normal-card: #F0FFF4; --normal-border: #A7F3D0; --heading-text: var(--theme-primary); --strong-text: var(--theme-primary); --bullet-color: var(--theme-primary); --theme-primary-rgb: 50, 215, 75; }

/* Dark mode */
body.dark {
    --bg: #000000; --card: rgba(30, 30, 30, 0.9); --text: #F0F0F0;
    --text-secondary: #D0D0D0; --text-tertiary: #A0A0A0; --accent: #0A84FF;
    --note-bg: rgba(58, 46, 0, 0.7); --note-border: #FFCC00;
    --glass-bg: rgba(30, 30, 30, 0.9); --glass-border: rgba(255, 255, 255, 0.1);
    --button-bg: rgba(50, 50, 50, 0.9); --button-border: rgba(255, 255, 255, 0.1);
    --button-text: #F0F0F0; --card-shadow: 0px 4px 8px rgba(0, 0, 0, 0.4);
    --table-bg: rgba(40, 40, 40, 0.9); --table-border: rgba(255, 255, 255, 0.1);
    --table-header-bg: rgba(60, 60, 60, 0.8); --table-header-text: #F0F0F0;
    --table-row-even-bg: rgba(50, 50, 50, 0.5); --heading-text: #F0F0F0;
    --strong-text: var(--accent); --popup-bg: rgba(30, 30, 30, 0.95);
    --popup-border: rgba(255, 255, 255, 0.1); --menu-bg: rgba(30, 30, 30, 0.95);
    --menu-border: rgba(255, 255, 255, 0.1); --link-color: var(--accent);
    --bullet-color: var(--accent);
    --theme-bg: #121212; --theme-primary: #0A84FF; --theme-secondary: #64D2FF;
    --theme-accent: #0A84FF; --normal-card: #1E1E1E;
    --normal-border: rgba(255, 255, 255, 0.1);
    --theme-primary-rgb: 10, 132, 255;
}

/* Giao diện thường (Normal mode) */
body.normal-mode:not(.dark) {
    --card: var(--normal-card); --glass-bg: var(--normal-card);
    background: var(--theme-bg); --button-bg: var(--normal-card);
    --button-border: var(--normal-border); --table-bg: var(--normal-card);
    --table-border: var(--normal-border); --popup-bg: var(--normal-card);
    --popup-border: var(--normal-border); --menu-bg: var(--normal-card);
    --menu-border: var(--normal-border);
}
body.normal-mode:not(.dark) .main-header,
body.normal-mode:not(.dark) .menu-panel,
body.normal-mode:not(.dark) .popup-card,
body.normal-mode:not(.dark) .content-wrapper,
body.normal-mode:not(.dark) table {
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background: var(--normal-card);
    border: 1px solid var(--normal-border);
}

body.dark .color-theme-options { display: none; }

/* Canvas (Giữ nguyên) */
#sky { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; display: none; }
body.dark #sky { display: block; }

/* Pháo hoa */
#fireworks-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.firework {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.firework-particle {
    position: absolute;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

@keyframes firework-explode {
    0% {
        transform: translate(-50%, -50%);
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* Particles (Giữ nguyên) */
.particles { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.particle { position: absolute; background-color: var(--theme-primary); border-radius: 50%; opacity: 0.2; animation: float 15s infinite linear; }
@keyframes float {
    0% { transform: translateY(100vh); opacity: 0; }
    10% { opacity: 0.2; }
    90% { opacity: 0.2; }
    100% { transform: translateY(-100vh); opacity: 0; }
}
body.dark .particle { display: none; }

/* --- GIAO DIỆN MỚI --- */

/* Header mới */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--apple-blur));
    -webkit-backdrop-filter: blur(var(--apple-blur));
    border-bottom: 1px solid var(--glass-border);
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    padding: 0 16px;
    transition: background var(--transition-speed), border-color var(--transition-speed);
}
.header-content {
    max-width: 1200px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.header-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--heading-text);
    display: none; /* Ẩn trên mobile */
}
@media (min-width: 768px) {
    .header-title { display: block; }
}

/* Nav (Tab) mới trong Header */
.header-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    flex-grow: 1; /* Chiếm không gian ở giữa trên mobile */
}
@media (min-width: 768px) {
    .header-nav { flex-grow: 0; position: absolute; left: 50%; transform: translateX(-50%); }
}

.header-nav button[role="tab"] {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 15px;
    font-weight: 500;
    padding: 0 12px;
    height: 100%;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    transition: color var(--transition-speed);
}
.header-nav button[role="tab"]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 12px;
    right: 12px;
    height: 3px;
    background: var(--theme-primary);
    transform: scaleX(0);
    transition: transform var(--transition-speed) var(--animation-curve);
}
.header-nav button[role="tab"]:hover {
    color: var(--text);
}
.header-nav button[role="tab"].active {
    color: var(--theme-primary);
    font-weight: 600;
}
.header-nav button[role="tab"].active::after {
    transform: scaleX(1);
}
@media (max-width: 480px) {
    .header-nav button[role="tab"] span { display: none; } /* Chỉ hiện icon trên mobile nhỏ */
    .header-nav button[role="tab"] { padding: 0 16px; }
}

/* Nút Menu (Actions) */
.header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.menu-btn {
    background: transparent;
    border: none;
    color: var(--button-text);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-speed), color var(--transition-speed);
}
.menu-btn:hover {
    background: rgba(0,0,0,0.05);
}
body.dark .menu-btn:hover {
    background: rgba(255,255,255,0.1);
}

/* Nút Refresh */
#refreshBtn {
    position: static; /* Không còn fixed */
    width: 40px;
    height: 40px;
}
#refreshBtn.spinning i {
    animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Menu Panel (Panel cài đặt) */
.menu-panel {
    display: none;
    position: fixed; /* Vẫn là fixed */
    top: 65px; /* Dưới header */
    right: 16px;
    width: 280px;
    background: var(--menu-bg);
    backdrop-filter: blur(var(--apple-blur));
    -webkit-backdrop-filter: blur(var(--apple-blur));
    border-radius: 16px;
    box-shadow: var(--card-shadow);
    overflow: hidden;
    border: 1px solid var(--menu-border);
    transform-origin: top right;
    animation: menuFadeIn 0.3s var(--animation-curve);
    z-index: 1200;
}
@keyframes menuFadeIn {
    from { opacity: 0; transform: scale(0.95) translateY(-10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.menu-panel button, .menu-panel a {
    display: flex; align-items: center; width: 100%;
    padding: 14px 16px; border: none; background: transparent;
    text-align: left; cursor: pointer; color: var(--button-text);
    transition: all var(--transition-speed) var(--animation-curve);
    gap: 12px; text-decoration: none; font-size: 15px;
}
.menu-panel button:hover, .menu-panel a:hover {
    background: rgba(0, 0, 0, 0.05);
}
body.dark .menu-panel button:hover, body.dark .menu-panel a:hover {
    background: rgba(255, 255, 255, 0.1);
}
.report-link {
    background: var(--report-bg, #FF3B30); color: #FFF;
    margin: 8px 16px; width: auto; border-radius: 10px;
}
.report-link:hover { background: var(--report-hover-bg, #FF453A); }

/* Tùy chọn màu (Giữ nguyên) */
.color-theme-options { padding: 16px; border-top: 1px solid var(--glass-border); margin-top: 8px; }
.color-theme-title { font-size: 13px; font-weight: 600; margin-bottom: 12px; color: var(--text-secondary); text-transform: uppercase; }
.color-themes { display: flex; gap: 12px; flex-wrap: wrap; }
.color-theme { width: 32px; height: 32px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: all var(--transition-speed); }
.color-theme.active { border-color: var(--text); }
.color-theme.pink { background: #FF2D55; }
.color-theme.blue { background: #007AFF; }
.color-theme.green { background: #34C759; }
.color-theme.fresh { background: #FF9500; }
.color-theme.popular { background: #AF52DE; }
.color-theme.white { background: #FFFFFF; border: 1px solid #C6C6C8; }
.color-theme.aquaviolet { background: linear-gradient(135deg, #00C7BE, #AF52DE); }
.color-theme.mint { background: #32D74B; }

/* Main Content Layout */
.main-content {
    max-width: 900px;
    margin: 16px auto;
    padding: 0 16px;
    position: relative;
}
.tab-panel {
    display: none;
    opacity: 0;
    animation: fadeIn 0.4s var(--animation-curve) forwards;
}
.tab-panel.active {
    display: block;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Content Wrapper (Card) */
.content-wrapper {
    background: var(--card);
    backdrop-filter: blur(var(--apple-blur));
    -webkit-backdrop-filter: blur(var(--apple-blur));
    color: var(--text);
    padding: 24px;
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--glass-border);
    transition: all var(--transition-speed) var(--animation-curve);
    margin-bottom: 24px;
}
@media (max-width: 768px) {
    .content-wrapper { padding: 16px; }
}

/* Nút chính (Show Full TKB) */
.button-primary {
    background: var(--button-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--button-text);
    border: 1px solid var(--button-border);
    padding: 12px 16px;
    border-radius: 12px;
    cursor: pointer;
    margin-top: 16px;
    font-weight: 500;
    font-size: 15px;
    transition: all var(--transition-speed) var(--animation-curve);
    box-shadow: var(--card-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.button-primary:hover {
    transform: translateY(-1px);
    background: var(--button-hover-bg);
    color: var(--button-hover-text);
}
body.normal-mode:not(.dark) .button-primary {
    border: 1px solid var(--normal-border);
}
body.normal-mode:not(.dark) .button-primary:hover {
     background: var(--button-hover-bg);
     color: var(--button-hover-text);
}

/* --- Nội dung BTVN (Giao diện mới) --- */
/* Đây là các class được tạo bởi renderBTVN */
.subject-card {
    margin-bottom: 24px;
    border-left: 3px solid transparent; /* Chuẩn bị cho highlight */
    padding-left: 12px;
    transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
}
.subject-title {
    margin: 0 0 12px;
    color: var(--heading-text);
    font-weight: 700;
    font-size: 24px;
    letter-spacing: normal;
    position: relative;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--glass-border);
}
.subject-title::after {
    content: "";
    position: absolute;
    bottom: -2px; /* Nằm trên border */
    left: 0;
    width: 60px;
    height: 2px;
    background: var(--theme-primary);
    transition: width 0.3s ease;
}
.subject-card:hover .subject-title::after {
    width: 100px;
}

.subject-list {
    list-style: none;
    padding-left: 0;
}
.btvn-item {
    padding: 8px 0 8px 24px;
    position: relative;
    font-size: 17px;
    line-height: 1.5;
    border-bottom: 1px dashed var(--glass-border);
}
.btvn-item:last-child {
    border-bottom: none;
}
.btvn-item::before {
    content: "•";
    color: var(--bullet-color);
    font-weight: bold;
    position: absolute;
    left: 8px;
    top: 8px;
    font-size: 20px;
}
.btvn-content {
    color: var(--text);
}
.btvn-meta {
    /* Đã ẩn theo yêu cầu, nhưng giữ lại CSS nếu bạn muốn bật lại */
    font-size: 13px;
    color: var(--text-tertiary);
    margin-top: 4px;
}
body.dark .btvn-item {
    border-bottom-color: var(--glass-border);
}

/* --- Nội dung TKB (Giữ nguyên) --- */
.day-container {
    margin-top: 16px;
    margin-bottom: 24px;
    border-radius: 16px;
    overflow: hidden;
    background: var(--table-bg);
    border: 1px solid var(--table-border);
    box-shadow: var(--card-shadow);
}
.day-header {
    background: var(--table-header-bg);
    color: var(--table-header-text);
    padding: 16px;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    border-bottom: 1px solid var(--table-border);
}
.session-container { padding: 16px; }
.session-header {
    font-size: 16px; font-weight: 600; color: var(--heading-text);
    margin: 16px 0 8px; padding-left: 8px; display: flex; align-items: center;
}
.session-header::before { margin-right: 8px; font-size: 18px; }
.morning-header::before { content: "🌅"; }
.afternoon-header::before { content: "🌆"; }
.session-table {
    width: 100%; border-collapse: separate; border-spacing: 0;
    border-radius: 12px; overflow: hidden; margin-bottom: 16px;
    background: var(--table-bg); border: 1px solid var(--table-border);
}
.session-table th, .session-table td { padding: 12px 16px; text-align: left; }
.session-table th {
    background: var(--table-header-bg); color: var(--table-header-text);
    font-weight: 600; font-size: 14px; text-transform: uppercase;
}
.session-table tr:nth-child(even) td { background: var(--table-row-even-bg); }
.session-table tr:hover td { background-color: rgba(var(--theme-primary-rgb), 0.1); }
.note {
    background: var(--note-bg);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-left: 4px solid var(--note-border);
    padding: 16px; border-radius: 16px; color: inherit;
    margin-bottom: 24px; box-shadow: var(--card-shadow);
}

/* --- Nội dung Changelog (Giao diện mới) --- */
/* Các class được tạo bởi renderChangelog */
.changelog-section h3 {
    margin: 0 0 20px;
    color: var(--heading-text);
    font-weight: 700;
    font-size: 24px;
    border-bottom: 2px solid var(--glass-border);
    padding-bottom: 8px;
}
.changelog-card {
    background: rgba(0,0,0,0.02);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}
body.dark .changelog-card {
    background: rgba(255,255,255,0.03);
}
.changelog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--glass-border);
}
.changelog-version {
    font-size: 18px;
    font-weight: 600;
    color: var(--theme-primary);
}
.changelog-date {
    font-size: 14px;
    color: var(--text-secondary);
}
.changelog-list {
    list-style: none;
    padding-left: 0;
}
.changelog-list li {
    padding-left: 20px;
    position: relative;
    margin-bottom: 8px;
    color: var(--text-secondary);
}
.changelog-list li::before {
    content: "🔹";
    position: absolute;
    left: 0;
    top: 2px;
}

/* Popups (Giữ nguyên CSS) */
.popup {
    display: none; position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    z-index: 1100; align-items: center; justify-content: center;
    padding: 20px; overflow-y: auto;
}
.popup.open { display: flex; animation: popupFadeIn 0.3s var(--animation-curve); }
@keyframes popupFadeIn { from { opacity: 0; } to { opacity: 1; } }
.popup-card {
    width: 90%; max-width: 540px;
    background: var(--popup-bg);
    backdrop-filter: blur(var(--apple-blur)); -webkit-backdrop-filter: blur(var(--apple-blur));
    color: var(--text); padding: 28px; border-radius: 20px;
    box-shadow: 0px 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 1px solid var(--popup-border);
    animation: popupIn 0.4s var(--animation-curve);
    max-height: 90vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
    margin: auto; position: relative;
}
@keyframes popupIn {
    from { transform: scale(0.9) translateY(20px); opacity: 0; }
    to { transform: scale(1) translateY(0); opacity: 1; }
}
.popup-card .close {
    position: absolute; right: 16px; top: 16px; cursor: pointer;
    font-size: 22px; color: var(--text-secondary); width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; transition: all var(--transition-speed);
}
.popup-card .close:hover { background: rgba(0, 0, 0, 0.05); transform: rotate(90deg); }
.popup-card h3 {
    margin: 0 0 20px; font-size: 22px; font-weight: 600;
    color: var(--heading-text); padding-right: 30px;
}
.popup-changelog { margin-top: 20px; border-top: 1px solid var(--glass-border); padding-top: 20px; }
/* (Giữ nguyên các style .changelog-header, .change-category, .dev-info, ... bên trong popup) */
.popup-card ul { margin: 0; padding-left: 20px; }
.popup-card li { margin: 10px 0; line-height: 1.5; }
.popup-card li strong { color: var(--strong-text); }
.dev-info { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--glass-border); font-size: 14px; color: var(--text-secondary); }
.donate-cta { margin-top: 12px; font-weight: 500; color: var(--theme-primary); display: flex; align-items: center; }

/* Popup cho dịp đặc biệt */
.event-popup {
    display: none; position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    z-index: 1100; align-items: center; justify-content: center;
    padding: 20px; overflow-y: auto;
}
.event-popup.open { display: flex; animation: popupFadeIn 0.3s var(--animation-curve); }
.event-popup-card {
    width: 90%; max-width: 540px;
    background: var(--popup-bg);
    backdrop-filter: blur(var(--apple-blur)); -webkit-backdrop-filter: blur(var(--apple-blur));
    color: var(--text); padding: 28px; border-radius: 20px;
    box-shadow: 0px 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 1px solid var(--popup-border);
    animation: popupIn 0.4s var(--animation-curve);
    max-height: 90vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
    margin: auto; position: relative;
}
.event-popup-card .close {
    position: absolute; right: 16px; top: 16px; cursor: pointer;
    font-size: 22px; color: var(--text-secondary); width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; transition: all var(--transition-speed);
}
.event-popup-card .close:hover { background: rgba(0, 0, 0, 0.05); transform: rotate(90deg); }
.event-popup-card h3 {
    margin: 0 0 20px; font-size: 22px; font-weight: 600;
    color: var(--heading-text); padding-right: 30px;
}

/* Modal TKB Full (Giữ nguyên) */
#tkbFullPopup .tkb-full-card {
    max-width: 1200px;
}
#tkbFullPopup .close {
    left: 16px; right: auto;
}
#tkbFullPopup h3 {
    padding-left: 50px; text-align: center;
}
.tkb-full-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}
.tkb-full-content .day-container { margin-bottom: 0; height: 100%; display: flex; flex-direction: column; }
.tkb-full-content .session-container { padding: 12px; flex: 1; }
.tkb-full-content .truc-container { margin-top: 8px; padding: 8px; background: var(--table-header-bg); border-radius: 6px; font-size: 14px; }

/* Loading & Notifications (Giữ nguyên) */
.loading-screen {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: var(--theme-bg); display: flex; flex-direction: column;
    justify-content: center; align-items: center; z-index: 9999;
    transition: opacity 0.5s var(--animation-curve);
}
.loading-spinner {
    width: 48px; height: 48px; border: 4px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%; border-top-color: var(--loading-color);
    animation: spin 1s ease-in-out infinite; margin-bottom: 20px;
}
.loading-text { font-size: 20px; font-weight: 500; color: var(--loading-color); }
body.dark .loading-spinner { border-color: rgba(255,255,255,0.1); border-top-color: var(--loading-color); }

.theme-loading {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: var(--theme-bg); display: flex; flex-direction: column;
    justify-content: center; align-items: center; z-index: 10000;
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s var(--animation-curve);
}
.theme-loading.active { opacity: 1; pointer-events: all; }
.theme-loading-spinner { width: 36px; height: 36px; border: 3px solid rgba(0, 0, 0, 0.1); border-top-color: var(--loading-color); border-radius: 50%; animation: spin 1s linear infinite; }
body.dark .theme-loading-spinner { border-color: rgba(255,255,255,0.1); border-top-color: var(--loading-color); }

.notification {
    position: fixed; bottom: 24px; left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--glass-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    color: var(--text); padding: 14px 24px; border-radius: 20px;
    box-shadow: var(--card-shadow); border: 1px solid var(--glass-border);
    z-index: 1000; opacity: 0;
    transition: all 0.3s var(--animation-curve);
    font-weight: 500; max-width: 80%; text-align: center;
}
.notification.show { transform: translateX(-50%) translateY(0); opacity: 1; }

/* Scroll fade (Giữ nguyên) */
.scroll-fade {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s ease;
}
.scroll-fade.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Lớp tắt animation khi chuyển theme */
.changing-theme * {
    transition: none !important;
    animation: none !important;
}

/* Ghi đè Dark mode (Giữ nguyên) */
body.dark { color: var(--text) !important; background: var(--theme-bg) !important; }
body.dark .main-header { background: var(--card) !important; border-bottom: 1px solid var(--glass-border) !important; }
body.dark .content-wrapper { background: var(--card) !important; color: var(--text) !important; border: 1px solid var(--glass-border) !important; }
body.dark .menu-btn { color: var(--button-text) !important; }
body.dark .menu-panel { background: var(--menu-bg) !important; color: var(--button-text) !important; border: 1px solid var(--menu-border) !important; }
body.dark .menu-panel button, body.dark .menu-panel a { color: var(--text) !important; }
body.dark .popup-card { background: var(--popup-bg) !important; color: var(--text) !important; border: 1px solid var(--popup-border) !important; }
body.dark .event-popup-card { background: var(--popup-bg) !important; color: var(--text) !important; border: 1px solid var(--popup-border) !important; }
body.dark .button-primary { background: var(--button-bg) !important; color: var(--button-text) !important; border: 1px solid var(--button-border) !important; }
body.dark table { background: var(--table-bg) !important; border: 1px solid var(--table-border) !important; }
body.dark th { background: var(--table-header-bg) !important; color: var(--table-header-text) !important; }
body.dark td { color: var(--text) !important; }
body.dark tr:nth-child(even) td { background: var(--table-row-even-bg) !important; }
body.dark h1, body.dark h2, body.dark h3, body.dark .subject-title { color: var(--heading-text) !important; }
body.dark strong { color: var(--strong-text) !important; }
body.dark .note { background: var(--note-bg) !important; border-left: 4px solid var(--note-border) !important; }
body.dark .notification { background: var(--glass-bg) !important; color: var(--text) !important; border: 1px solid var(--glass-border) !important; }
body.dark .day-container { background: var(--table-bg) !important; border: 1px solid var(--table-border) !important; }
body.dark .session-table { background: var(--table-bg) !important; border: 1px solid var(--table-border) !important; }
body.dark ul li { color: var(--text-secondary) !important; }
body.dark .btvn-item::before, body.dark .changelog-list li::before { color: var(--bullet-color) !important; }

/* --- CSS MỚI: Đánh dấu môn ngày mai --- */
.subject-card.is-tomorrow {
    border-left: 3px solid var(--theme-primary);
    box-shadow: 0 4px 15px rgba(var(--theme-primary-rgb), 0.1);
    /* Thêm một chút padding để bù cho border */
    padding-left: 12px; 
}

.subject-card.is-tomorrow .subject-title {
    position: relative;
}

.subject-card.is-tomorrow .subject-title::after {
    /* Đây là huy hiệu "Ngày mai" */
    content: "Ngày mai";
    font-size: 11px;
    font-weight: 600;
    color: var(--theme-primary);
    background-color: rgba(var(--theme-primary-rgb), 0.1);
    padding: 3px 8px;
    border-radius: 12px;
    margin-left: 10px;
    vertical-align: middle;
    text-transform: uppercase;
    /* Ghi đè animation của gạch chân */
    width: auto;
    height: auto;
    background-image: none;
    position: static;
    bottom: auto;
    left: auto;
}

/* Tương thích Dark Mode cho huy hiệu */
body.dark .subject-card.is-tomorrow {
    border-left-color: var(--accent);
    box-shadow: 0 4px 20px rgba(var(--theme-primary-rgb), 0.15);
}

body.dark .subject-card.is-tomorrow .subject-title::after {
    color: var(--accent);
    background-color: rgba(var(--theme-primary-rgb), 0.2);
}

/* --- CSS MỚI: Chủ đề đặc biệt --- */
/* Container cho họa tiết trang trí */
.event-patterns {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}

.event-pattern {
    position: absolute;
    opacity: 0.1;
    animation: float-pattern 20s infinite linear;
}

@keyframes float-pattern {
    0% { transform: translateY(100vh) rotate(0deg); }
    100% { transform: translateY(-100vh) rotate(360deg); }
}

/* Chủ đề Tết */
body.event-tet {
    --theme-primary: #ff0000;
    --theme-secondary: #ffcc00;
    --theme-primary-rgb: 255, 0, 0;
}

body.event-tet .event-popup-card {
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.9) 0%, rgba(255, 204, 0, 0.9) 100%);
    color: #ffffff;
    border: 2px solid #ffcc00;
}

body.event-tet .event-popup-card h3 {
    color: #ffffff;
}

body.event-tet .event-popup-card .close {
    color: #ffffff;
}

body.event-tet .pattern-hoa-mai::before {
    content: "🌸";
    font-size: 40px;
}

body.event-tet .pattern-hoa-dao::before {
    content: "🌺";
    font-size: 40px;
}

body.event-tet .pattern-dong-tien::before {
    content: "💰";
    font-size: 40px;
}

/* Chủ đề Sinh nhật */
body.event-birthday {
    --theme-primary: #ff99cc;
    --theme-secondary: #cc99ff;
    --theme-primary-rgb: 255, 153, 204;
}

body.event-birthday .event-popup-card {
    background: linear-gradient(135deg, rgba(255, 153, 204, 0.9) 0%, rgba(204, 153, 255, 0.9) 100%);
    color: #ffffff;
    border: 2px solid #ffffff;
}

body.event-birthday .event-popup-card h3 {
    color: #ffffff;
}

body.event-birthday .event-popup-card .close {
    color: #ffffff;
}

body.event-birthday .pattern-balloon::before {
    content: "🎈";
    font-size: 40px;
}

body.event-birthday .pattern-cake::before {
    content: "🎂";
    font-size: 40px;
}

body.event-birthday .pattern-gift::before {
    content: "🎁";
    font-size: 40px;
}

/* Chủ đề Cá tháng Tư */
body.event-april-fools {
    --theme-primary: #ff3366;
    --theme-secondary: #ffcc33;
    --theme-primary-rgb: 255, 51, 102;
}

body.event-april-fools .event-popup-card {
    background: linear-gradient(135deg, rgba(255, 51, 102, 0.9) 0%, rgba(255, 204, 51, 0.9) 100%);
    color: #ffffff;
    border: 2px solid #ffffff;
}

body.event-april-fools .event-popup-card h3 {
    color: #ffffff;
}

body.event-april-fools .event-popup-card .close {
    color: #ffffff;
}

body.event-april-fools .pattern-joke::before {
    content: "😂";
    font-size: 40px;
}

body.event-april-fools .pattern-fish::before {
    content: "🐟";
    font-size: 40px;
}

/* Chủ đề Halloween */
body.event-halloween {
    --theme-primary: #ff6600;
    --theme-secondary: #993300;
    --theme-primary-rgb: 255, 102, 0;
}

body.event-halloween .event-popup-card {
    background: linear-gradient(135deg, rgba(255, 102, 0, 0.9) 0%, rgba(153, 51, 0, 0.9) 100%);
    color: #ffffff;
    border: 2px solid #ff6600;
}

body.event-halloween .event-popup-card h3 {
    color: #ffffff;
}

body.event-halloween .event-popup-card .close {
    color: #ffffff;
}

body.event-halloween .pattern-pumpkin::before {
    content: "🎃";
    font-size: 40px;
}

body.event-halloween .pattern-ghost::before {
    content: "👻";
    font-size: 40px;
}

body.event-halloween .pattern-witch::before {
    content: "🧙‍♀️";
    font-size: 40px;
}

/* Chủ đề Giáng Sinh */
body.event-christmas {
    --theme-primary: #009900;
    --theme-secondary: #cc0000;
    --theme-primary-rgb: 0, 153, 0;
}

body.event-christmas .event-popup-card {
    background: linear-gradient(135deg, rgba(0, 153, 0, 0.9) 0%, rgba(204, 0, 0, 0.9) 100%);
    color: #ffffff;
    border: 2px solid #ffffff;
}

body.event-christmas .event-popup-card h3 {
    color: #ffffff;
}

body.event-christmas .event-popup-card .close {
    color: #ffffff;
}

body.event-christmas .pattern-snow::before {
    content: "❄️";
    font-size: 40px;
}

body.event-christmas .pattern-tree::before {
    content: "🎄";
    font-size: 40px;
}

body.event-christmas .pattern-santa::before {
    content: "🎅";
    font-size: 40px;
}
/* --- CSS MỚI: Chủ đề đặc biệt --- */
/* Container cho họa tiết trang trí */
.event-patterns {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}

.event-pattern {
    position: absolute;
    opacity: 0.1;
    animation: float-pattern 20s infinite linear;
}

@keyframes float-pattern {
    0% { transform: translateY(100vh) rotate(0deg); }
    100% { transform: translateY(-100vh) rotate(360deg); }
}

/* Chủ đề Tết */
body.event-tet {
    --theme-primary: rgba(204, 0, 0, 0.7);
    --theme-secondary: rgba(255, 215, 0, 0.8);
    --theme-primary-rgb: 204, 0, 0;
}

/* Toàn bộ UI có nền đỏ nhạt và viền vàng óng cho Tết */
body.event-tet .main-header {
    background: rgba(204, 0, 0, 0.7) !important;
    border-bottom: 3px solid rgba(255, 215, 0, 0.8) !important;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3), 0 0 10px rgba(255, 215, 0, 0.2) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
}

body.event-tet .content-wrapper {
    background: rgba(204, 0, 0, 0.7) !important;
    border: 3px solid rgba(255, 215, 0, 0.8) !important;
    color: #ffffff !important;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3), 0 0 10px rgba(255, 215, 0, 0.2) !important;
    position: relative;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
}

/* Hiệu ứng viền vàng óng ánh */
body.event-tet .content-wrapper::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: linear-gradient(45deg, rgba(255, 215, 0, 0.8), rgba(255, 237, 78, 0.8), rgba(255, 215, 0, 0.8), rgba(255, 237, 78, 0.8));
    z-index: -1;
    border-radius: inherit;
    opacity: 0.7;
    animation: gold-shimmer 3s infinite linear;
}

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

body.event-tet .menu-panel {
    background: rgba(204, 0, 0, 0.7) !important;
    border: 3px solid rgba(255, 215, 0, 0.8) !important;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3), 0 0 10px rgba(255, 215, 0, 0.2) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
}

body.event-tet .popup-card {
    background: rgba(204, 0, 0, 0.7) !important;
    border: 3px solid rgba(255, 215, 0, 0.8) !important;
    color: #ffffff !important;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3), 0 0 10px rgba(255, 215, 0, 0.2) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
}

body.event-tet .event-popup-card {
    background: rgba(204, 0, 0, 0.7) !important;
    border: 3px solid rgba(255, 215, 0, 0.8) !important;
    color: #ffffff !important;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3), 0 0 10px rgba(255, 215, 0, 0.2) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
}

body.event-tet .subject-title {
    color: #ffffff !important;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5) !important;
}

body.event-tet .subject-title::after {
    background: rgba(255, 215, 0, 0.8) !important;
}

body.event-tet .btvn-item::before {
    color: rgba(255, 215, 0, 0.8) !important;
}

body.event-tet .btvn-content {
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.5) !important;
}

body.event-tet .changelog-version {
    color: rgba(255, 215, 0, 0.8) !important;
}

body.event-tet .changelog-list li::before {
    color: rgba(255, 215, 0, 0.8) !important;
}

body.event-tet .changelog-list li {
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.5) !important;
}

body.event-tet .button-primary {
    background: rgba(204, 0, 0, 0.7) !important;
    border: 3px solid rgba(255, 215, 0, 0.8) !important;
    color: #ffffff !important;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3), 0 0 10px rgba(255, 215, 0, 0.2) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.5) !important;
}

body.event-tet .button-primary:hover {
    background: rgba(153, 0, 0, 0.7) !important;
}

body.event-tet .day-container {
    background: rgba(204, 0, 0, 0.7) !important;
    border: 3px solid rgba(255, 215, 0, 0.8) !important;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3), 0 0 10px rgba(255, 215, 0, 0.2) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
}

body.event-tet .day-header {
    background: rgba(153, 0, 0, 0.7) !important;
    color: #ffffff !important;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5) !important;
}

body.event-tet .session-table {
    background: rgba(204, 0, 0, 0.7) !important;
    border: 3px solid rgba(255, 215, 0, 0.8) !important;
}

body.event-tet .session-table th {
    background: rgba(153, 0, 0, 0.7) !important;
    color: #ffffff !important;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.5) !important;
}

body.event-tet .session-table td {
    color: #ffffff !important;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.5) !important;
}

body.event-tet .session-header {
    color: #ffffff !important;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5) !important;
}

body.event-tet .tkb-full-card {
    background: rgba(204, 0, 0, 0.7) !important;
    border: 3px solid rgba(255, 215, 0, 0.8) !important;
    color: #ffffff !important;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3), 0 0 10px rgba(255, 215, 0, 0.2) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
}

body.event-tet .event-popup-card h3 {
    color: #ffffff;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5) !important;
}

body.event-tet .event-popup-card .close {
    color: #ffffff;
}

body.event-tet .pattern-hoa-mai::before {
    content: "🌸";
    font-size: 40px;
}

body.event-tet .pattern-hoa-dao::before {
    content: "🌺";
    font-size: 40px;
}

body.event-tet .pattern-dong-tien::before {
    content: "💰";
    font-size: 40px;
}

/* Chủ đề Sinh nhật */
body.event-birthday {
    --theme-primary: rgba(255, 153, 204, 0.7);
    --theme-secondary: rgba(204, 153, 255, 0.8);
    --theme-primary-rgb: 255, 153, 204;
}

body.event-birthday .event-popup-card {
    background: linear-gradient(135deg, rgba(255, 153, 204, 0.7) 0%, rgba(204, 153, 255, 0.7) 100%);
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
}

body.event-birthday .event-popup-card h3 {
    color: #ffffff;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5) !important;
}

body.event-birthday .event-popup-card .close {
    color: #ffffff;
}

body.event-birthday .pattern-balloon::before {
    content: "🎈";
    font-size: 40px;
}

body.event-birthday .pattern-cake::before {
    content: "🎂";
    font-size: 40px;
}

body.event-birthday .pattern-gift::before {
    content: "🎁";
    font-size: 40px;
}

/* Chủ đề Cá tháng Tư */
body.event-april-fools {
    --theme-primary: rgba(255, 51, 102, 0.7);
    --theme-secondary: rgba(255, 204, 51, 0.8);
    --theme-primary-rgb: 255, 51, 102;
}

body.event-april-fools .event-popup-card {
    background: linear-gradient(135deg, rgba(255, 51, 102, 0.7) 0%, rgba(255, 204, 51, 0.7) 100%);
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
}

body.event-april-fools .event-popup-card h3 {
    color: #ffffff;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5) !important;
}

/* Ẩn nút X cho popup Cá tháng Tư */
body.event-april-fools .event-popup-card .close {
    display: none !important;
}

body.event-april-fools .pattern-joke::before {
    content: "😂";
    font-size: 40px;
}

body.event-april-fools .pattern-fish::before {
    content: "🐟";
    font-size: 40px;
}

/* Chủ đề Halloween */
body.event-halloween {
    --theme-primary: rgba(255, 102, 0, 0.7);
    --theme-secondary: rgba(153, 51, 0, 0.8);
    --theme-primary-rgb: 255, 102, 0;
}

body.event-halloween .event-popup-card {
    background: linear-gradient(135deg, rgba(255, 102, 0, 0.7) 0%, rgba(153, 51, 0, 0.7) 100%);
    color: #ffffff;
    border: 2px solid rgba(255, 102, 0, 0.8);
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
}

body.event-halloween .event-popup-card h3 {
    color: #ffffff;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5) !important;
}

body.event-halloween .event-popup-card .close {
    color: #ffffff;
}

body.event-halloween .pattern-pumpkin::before {
    content: "🎃";
    font-size: 40px;
}

body.event-halloween .pattern-ghost::before {
    content: "👻";
    font-size: 40px;
}

body.event-halloween .pattern-witch::before {
    content: "🧙‍♀️";
    font-size: 40px;
}

/* Chủ đề Giáng Sinh */
body.event-christmas {
    --theme-primary: rgba(0, 153, 0, 0.7);
    --theme-secondary: rgba(204, 0, 0, 0.8);
    --theme-primary-rgb: 0, 153, 0;
}

body.event-christmas .event-popup-card {
    background: linear-gradient(135deg, rgba(0, 153, 0, 0.7) 0%, rgba(204, 0, 0, 0.7) 100%);
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
}

body.event-christmas .event-popup-card h3 {
    color: #ffffff;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5) !important;
}

body.event-christmas .event-popup-card .close {
    color: #ffffff;
}

body.event-christmas .pattern-snow::before {
    content: "❄️";
    font-size: 40px;
}

body.event-christmas .pattern-tree::before {
    content: "🎄";
    font-size: 40px;
}

body.event-christmas .pattern-santa::before {
    content: "🎅";
    font-size: 40px;
}