/* ========================================
   SEASONAL EFFECTS - CSS Styles
   Hiệu ứng theo dịp lễ, sự kiện
======================================== */

/* Container for all effects */
.seasonal-effects-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 100;
    overflow: hidden;
}

/* ========== OCCASION BANNER ========== */
.occasion-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 12px 20px;
    text-align: center;
    font-weight: 600;
    font-size: 0.95rem;
    color: white;
    animation: bannerSlide 0.5s ease-out;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.occasion-banner .banner-text {
    flex: 1;
    text-align: center;
}

.occasion-banner .banner-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    pointer-events: auto;
}

.occasion-banner .banner-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

@keyframes bannerSlide {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Adjust body when banner is shown */
body.has-occasion-banner {
    padding-top: 48px;
}

body.has-occasion-banner .sidebar {
    top: 48px;
    height: calc(100vh - 48px);
}

body.has-occasion-banner .top-header {
    top: 48px;
}

/* ========== FALLING PARTICLES BASE ========== */
.particle {
    position: absolute;
    pointer-events: none;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

/* ========== SNOW EFFECT ========== */
.snow-particle {
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    animation-name: snowfall;
}

@keyframes snowfall {
    0% {
        transform: translateY(-10px) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(360deg);
        opacity: 0.3;
    }
}

/* ========== SAKURA (CHERRY BLOSSOM) EFFECT ========== */
.sakura-particle {
    width: 15px;
    height: 15px;
    background: linear-gradient(135deg, #ffb7c5 0%, #ff8fa3 100%);
    border-radius: 150% 0% 150% 0%;
    transform-origin: center;
    animation-name: sakuraFall;
}

@keyframes sakuraFall {
    0% {
        transform: translateY(-20px) rotate(0deg) translateX(0);
        opacity: 1;
    }
    25% {
        transform: translateY(25vh) rotate(90deg) translateX(30px);
    }
    50% {
        transform: translateY(50vh) rotate(180deg) translateX(-20px);
    }
    75% {
        transform: translateY(75vh) rotate(270deg) translateX(25px);
    }
    100% {
        transform: translateY(100vh) rotate(360deg) translateX(0);
        opacity: 0.3;
    }
}

/* ========== HEARTS EFFECT ========== */
.heart-particle {
    color: #ff4d6d;
    font-size: 20px;
    animation-name: heartFloat;
}

.heart-particle::before {
    content: '❤';
}

@keyframes heartFloat {
    0% {
        transform: translateY(-20px) scale(1);
        opacity: 1;
    }
    50% {
        transform: translateY(50vh) scale(1.2);
        opacity: 0.8;
    }
    100% {
        transform: translateY(100vh) scale(0.8);
        opacity: 0;
    }
}

/* ========== CONFETTI EFFECT ========== */
.confetti-particle {
    width: 10px;
    height: 10px;
    animation-name: confettiFall;
}

.confetti-particle.square {
    border-radius: 0;
}

.confetti-particle.circle {
    border-radius: 50%;
}

.confetti-particle.triangle {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 10px solid currentColor;
    background: none;
}

@keyframes confettiFall {
    0% {
        transform: translateY(-10px) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0.5;
    }
}

/* ========== STARS EFFECT ========== */
.star-particle {
    color: #ffd700;
    font-size: 18px;
    animation-name: starTwinkle;
}

.star-particle::before {
    content: '★';
}

@keyframes starTwinkle {
    0% {
        transform: translateY(-10px) scale(1) rotate(0deg);
        opacity: 1;
    }
    25% {
        transform: translateY(25vh) scale(1.3) rotate(90deg);
        opacity: 0.7;
    }
    50% {
        transform: translateY(50vh) scale(0.8) rotate(180deg);
        opacity: 1;
    }
    75% {
        transform: translateY(75vh) scale(1.2) rotate(270deg);
        opacity: 0.6;
    }
    100% {
        transform: translateY(100vh) scale(1) rotate(360deg);
        opacity: 0;
    }
}

/* ========== LEAVES EFFECT ========== */
.leaf-particle {
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, #cd853f 0%, #8b4513 50%, #d2691e 100%);
    border-radius: 0 50% 50% 50%;
    transform-origin: center;
    animation-name: leafFall;
}

@keyframes leafFall {
    0% {
        transform: translateY(-20px) rotate(0deg) translateX(0);
        opacity: 1;
    }
    25% {
        transform: translateY(25vh) rotate(45deg) translateX(50px);
    }
    50% {
        transform: translateY(50vh) rotate(90deg) translateX(-30px);
    }
    75% {
        transform: translateY(75vh) rotate(135deg) translateX(40px);
    }
    100% {
        transform: translateY(100vh) rotate(180deg) translateX(0);
        opacity: 0.3;
    }
}

/* ========== TET (LUNAR NEW YEAR) EFFECT ========== */
.tet-particle {
    font-size: 22px;
    animation-name: tetFall;
}

.tet-particle.mai::before { content: '🌸'; }
.tet-particle.dao::before { content: '🌺'; }
.tet-particle.phao::before { content: '🧧'; }
.tet-particle.tien::before { content: '💰'; }
.tet-particle.lantern::before { content: '🏮'; }

@keyframes tetFall {
    0% {
        transform: translateY(-20px) rotate(0deg);
        opacity: 1;
    }
    50% {
        transform: translateY(50vh) rotate(180deg);
        opacity: 0.9;
    }
    100% {
        transform: translateY(100vh) rotate(360deg);
        opacity: 0.3;
    }
}

/* ========== RAIN EFFECT ========== */
.rain-particle {
    width: 2px;
    height: 20px;
    background: linear-gradient(to bottom, transparent, rgba(174, 194, 224, 0.8));
    border-radius: 0 0 5px 5px;
    animation-name: rainFall;
}

@keyframes rainFall {
    0% {
        transform: translateY(-20px);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    100% {
        transform: translateY(100vh);
        opacity: 0.3;
    }
}

/* ========== BUBBLES EFFECT ========== */
.bubble-particle {
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8), rgba(200, 230, 255, 0.4));
    border: 1px solid rgba(255, 255, 255, 0.3);
    animation-name: bubbleFloat;
}

@keyframes bubbleFloat {
    0% {
        transform: translateY(100vh) scale(0.5);
        opacity: 0;
    }
    20% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(-20px) scale(1);
        opacity: 0;
    }
}

/* ========== MONEY EFFECT ========== */
.money-particle {
    font-size: 24px;
    animation-name: moneyFall;
}

.money-particle::before { content: '💵'; }
.money-particle.vnd::before { content: '💴'; }
.money-particle.coin::before { content: '🪙'; }

@keyframes moneyFall {
    0% {
        transform: translateY(-20px) rotate(0deg) rotateY(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(360deg) rotateY(720deg);
        opacity: 0.5;
    }
}

/* ========== FIREWORKS EFFECT (Canvas-based) ========== */
#fireworks-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 100;
    background: transparent !important;
    background-color: transparent !important;
}

/* Legacy support - kept for backwards compatibility */
.fireworks-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 100;
    display: none; /* Hidden - using canvas instead */
}

/* ========== SITE DECORATION THEMES ========== */

/* TET Theme - Tết Nguyên Đán */
body[data-decoration="tet"] {
    --primary-color: #dc2626;
    --accent-color: #fbbf24;
    --tet-red: #dc2626;
    --tet-gold: #fbbf24;
}

body[data-decoration="tet"] .sidebar {
    background: linear-gradient(180deg, #1a0505 0%, #2d0a0a 100%);
    border-right-color: rgba(220, 38, 38, 0.2);
}

/* Dark theme - Tet sidebar text visibility */
body[data-decoration="tet"] .sidebar a,
body[data-decoration="tet"] .sidebar .nav-link,
body[data-decoration="tet"] .sidebar span,
body[data-decoration="tet"] .sidebar .nav-text,
body[data-decoration="tet"] .sidebar-link,
body[data-decoration="tet"] .sidebar-header {
    color: #fef2f2 !important;
}

body[data-decoration="tet"] .sidebar a:hover,
body[data-decoration="tet"] .sidebar .nav-link:hover,
body[data-decoration="tet"] .sidebar .nav-link.active {
    color: #fbbf24 !important;
    background: rgba(220, 38, 38, 0.2);
}

body[data-decoration="tet"] .sidebar i,
body[data-decoration="tet"] .sidebar .fa,
body[data-decoration="tet"] .sidebar .fas,
body[data-decoration="tet"] .sidebar .far,
body[data-decoration="tet"] .sidebar .fab {
    color: #fbbf24 !important;
}

body[data-decoration="tet"] .sidebar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #dc2626, #fbbf24, #dc2626);
}

body[data-decoration="tet"] .btn-primary {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
}

/* Tet + Light Theme Support */
:root[data-theme="light"] body[data-decoration="tet"],
html[data-theme="light"] body[data-decoration="tet"] {
    --primary-color: #dc2626;
    --accent-color: #b91c1c;
}

:root[data-theme="light"] body[data-decoration="tet"] .sidebar,
html[data-theme="light"] body[data-decoration="tet"] .sidebar {
    background: linear-gradient(180deg, #fff5f5 0%, #fee2e2 100%);
    border-right-color: rgba(220, 38, 38, 0.3);
}

:root[data-theme="light"] body[data-decoration="tet"] .sidebar a,
:root[data-theme="light"] body[data-decoration="tet"] .sidebar .nav-link,
:root[data-theme="light"] body[data-decoration="tet"] .sidebar .menu-item,
:root[data-theme="light"] body[data-decoration="tet"] .sidebar span,
:root[data-theme="light"] body[data-decoration="tet"] .sidebar-link,
:root[data-theme="light"] body[data-decoration="tet"] .sidebar-header,
:root[data-theme="light"] body[data-decoration="tet"] .sidebar .nav-text,
html[data-theme="light"] body[data-decoration="tet"] .sidebar a,
html[data-theme="light"] body[data-decoration="tet"] .sidebar .nav-link,
html[data-theme="light"] body[data-decoration="tet"] .sidebar .menu-item,
html[data-theme="light"] body[data-decoration="tet"] .sidebar span,
html[data-theme="light"] body[data-decoration="tet"] .sidebar-link,
html[data-theme="light"] body[data-decoration="tet"] .sidebar-header,
html[data-theme="light"] body[data-decoration="tet"] .sidebar .nav-text {
    color: #7f1d1d !important;
}

:root[data-theme="light"] body[data-decoration="tet"] .sidebar a:hover,
:root[data-theme="light"] body[data-decoration="tet"] .sidebar .nav-link:hover,
:root[data-theme="light"] body[data-decoration="tet"] .sidebar .nav-link.active,
html[data-theme="light"] body[data-decoration="tet"] .sidebar a:hover,
html[data-theme="light"] body[data-decoration="tet"] .sidebar .nav-link:hover,
html[data-theme="light"] body[data-decoration="tet"] .sidebar .nav-link.active {
    color: #dc2626 !important;
    background: rgba(220, 38, 38, 0.1);
}

:root[data-theme="light"] body[data-decoration="tet"] .sidebar i,
:root[data-theme="light"] body[data-decoration="tet"] .sidebar .fa,
:root[data-theme="light"] body[data-decoration="tet"] .sidebar .fas,
:root[data-theme="light"] body[data-decoration="tet"] .sidebar .far,
:root[data-theme="light"] body[data-decoration="tet"] .sidebar .fab,
html[data-theme="light"] body[data-decoration="tet"] .sidebar i,
html[data-theme="light"] body[data-decoration="tet"] .sidebar .fa,
html[data-theme="light"] body[data-decoration="tet"] .sidebar .fas,
html[data-theme="light"] body[data-decoration="tet"] .sidebar .far,
html[data-theme="light"] body[data-decoration="tet"] .sidebar .fab {
    color: #dc2626 !important;
}

:root[data-theme="light"] body[data-decoration="tet"] .sidebar::before,
html[data-theme="light"] body[data-decoration="tet"] .sidebar::before {
    background: linear-gradient(90deg, #dc2626, #fbbf24, #dc2626);
}

/* Christmas + Light Theme Support */
:root[data-theme="light"] body[data-decoration="christmas"] .sidebar,
html[data-theme="light"] body[data-decoration="christmas"] .sidebar {
    background: linear-gradient(180deg, #f0fdf4 0%, #dcfce7 100%);
    border-right-color: rgba(22, 163, 74, 0.3);
}

:root[data-theme="light"] body[data-decoration="christmas"] .sidebar a,
:root[data-theme="light"] body[data-decoration="christmas"] .sidebar .nav-link,
:root[data-theme="light"] body[data-decoration="christmas"] .sidebar span,
:root[data-theme="light"] body[data-decoration="christmas"] .sidebar .nav-text,
html[data-theme="light"] body[data-decoration="christmas"] .sidebar a,
html[data-theme="light"] body[data-decoration="christmas"] .sidebar .nav-link,
html[data-theme="light"] body[data-decoration="christmas"] .sidebar span,
html[data-theme="light"] body[data-decoration="christmas"] .sidebar .nav-text {
    color: #14532d !important;
}

:root[data-theme="light"] body[data-decoration="christmas"] .sidebar i,
html[data-theme="light"] body[data-decoration="christmas"] .sidebar i {
    color: #16a34a !important;
}

/* Valentine + Light Theme Support */
:root[data-theme="light"] body[data-decoration="valentine"] .sidebar,
html[data-theme="light"] body[data-decoration="valentine"] .sidebar {
    background: linear-gradient(180deg, #fdf2f8 0%, #fce7f3 100%);
    border-right-color: rgba(236, 72, 153, 0.3);
}

:root[data-theme="light"] body[data-decoration="valentine"] .sidebar a,
:root[data-theme="light"] body[data-decoration="valentine"] .sidebar .nav-link,
:root[data-theme="light"] body[data-decoration="valentine"] .sidebar span,
:root[data-theme="light"] body[data-decoration="valentine"] .sidebar .nav-text,
html[data-theme="light"] body[data-decoration="valentine"] .sidebar a,
html[data-theme="light"] body[data-decoration="valentine"] .sidebar .nav-link,
html[data-theme="light"] body[data-decoration="valentine"] .sidebar span,
html[data-theme="light"] body[data-decoration="valentine"] .sidebar .nav-text {
    color: #831843 !important;
}

:root[data-theme="light"] body[data-decoration="valentine"] .sidebar i,
html[data-theme="light"] body[data-decoration="valentine"] .sidebar i {
    color: #ec4899 !important;
}

/* Halloween + Light Theme Support */
:root[data-theme="light"] body[data-decoration="halloween"] .sidebar,
html[data-theme="light"] body[data-decoration="halloween"] .sidebar {
    background: linear-gradient(180deg, #fff7ed 0%, #ffedd5 100%);
    border-right-color: rgba(249, 115, 22, 0.3);
}

:root[data-theme="light"] body[data-decoration="halloween"] .sidebar a,
:root[data-theme="light"] body[data-decoration="halloween"] .sidebar .nav-link,
:root[data-theme="light"] body[data-decoration="halloween"] .sidebar span,
:root[data-theme="light"] body[data-decoration="halloween"] .sidebar .nav-text,
html[data-theme="light"] body[data-decoration="halloween"] .sidebar a,
html[data-theme="light"] body[data-decoration="halloween"] .sidebar .nav-link,
html[data-theme="light"] body[data-decoration="halloween"] .sidebar span,
html[data-theme="light"] body[data-decoration="halloween"] .sidebar .nav-text {
    color: #7c2d12 !important;
}

:root[data-theme="light"] body[data-decoration="halloween"] .sidebar i,
html[data-theme="light"] body[data-decoration="halloween"] .sidebar i {
    color: #f97316 !important;
}

/* Tet Decorations Container */
.tet-decorations {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9990;
    overflow: hidden;
}

/* Hoa Mai - Top Left Corner */
.tet-mai-topleft {
    position: fixed;
    top: -10px;
    left: -10px;
    width: 150px;
    height: 150px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='%23fbbf24'%3E%3Ccircle cx='30' cy='30' r='8'/%3E%3Ccircle cx='50' cy='50' r='10'/%3E%3Ccircle cx='80' cy='40' r='7'/%3E%3Ccircle cx='60' cy='80' r='9'/%3E%3Ccircle cx='100' cy='60' r='8'/%3E%3Ccircle cx='40' cy='100' r='6'/%3E%3Ccircle cx='120' cy='90' r='7'/%3E%3Ccircle cx='90' cy='110' r='8'/%3E%3Ccircle cx='140' cy='70' r='6'/%3E%3Ccircle cx='70' cy='130' r='7'/%3E%3C/g%3E%3Cg stroke='%238b4513' stroke-width='2' fill='none'%3E%3Cpath d='M0,0 Q40,60 80,40 T160,80'/%3E%3Cpath d='M20,0 Q50,40 40,100'/%3E%3Cpath d='M0,30 Q60,50 100,60'/%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.8;
    animation: swayBranch 4s ease-in-out infinite;
}

/* Hoa Đào - Top Right Corner */
.tet-dao-topright {
    position: fixed;
    top: -10px;
    right: -10px;
    width: 150px;
    height: 150px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='%23ff69b4'%3E%3Ccircle cx='170' cy='30' r='8'/%3E%3Ccircle cx='150' cy='50' r='10'/%3E%3Ccircle cx='120' cy='40' r='7'/%3E%3Ccircle cx='140' cy='80' r='9'/%3E%3Ccircle cx='100' cy='60' r='8'/%3E%3Ccircle cx='160' cy='100' r='6'/%3E%3Ccircle cx='80' cy='90' r='7'/%3E%3Ccircle cx='110' cy='110' r='8'/%3E%3Ccircle cx='60' cy='70' r='6'/%3E%3Ccircle cx='130' cy='130' r='7'/%3E%3C/g%3E%3Cg stroke='%238b4513' stroke-width='2' fill='none'%3E%3Cpath d='M200,0 Q160,60 120,40 T40,80'/%3E%3Cpath d='M180,0 Q150,40 160,100'/%3E%3Cpath d='M200,30 Q140,50 100,60'/%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.8;
    animation: swayBranch 4s ease-in-out infinite reverse;
}

@keyframes swayBranch {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(2deg); }
}

/* Câu Đối - Left Side */
.tet-caudoi-left {
    position: fixed;
    top: 50%;
    left: 5px;
    transform: translateY(-50%);
    width: 30px;
    height: 180px;
    background: linear-gradient(180deg, #8b0000 0%, #dc2626 15%, #dc2626 85%, #8b0000 100%);
    border: 2px solid #fbbf24;
    border-radius: 4px 4px 6px 6px;
    box-shadow: 0 3px 15px rgba(0,0,0,0.3), inset 0 0 15px rgba(251, 191, 36, 0.15);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 3px;
}

.tet-caudoi-left::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 12px;
    background: linear-gradient(180deg, #fbbf24, #d4a017);
    border-radius: 4px 4px 0 0;
    box-shadow: 0 -2px 4px rgba(0,0,0,0.2);
}

.tet-caudoi-left::after {
    content: '';
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 18px solid #fbbf24;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.2));
}

.tet-caudoi-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    color: #fbbf24;
    font-size: 14px;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8), 0 0 10px rgba(251, 191, 36, 0.5);
    font-family: 'Times New Roman', Georgia, serif;
    text-align: center;
}

.tet-caudoi-text span {
    display: block;
    line-height: 1;
    text-transform: uppercase;
}

/* Câu Đối - Right Side */
.tet-caudoi-right {
    position: fixed;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    width: 30px;
    height: 180px;
    background: linear-gradient(180deg, #8b0000 0%, #dc2626 15%, #dc2626 85%, #8b0000 100%);
    border: 2px solid #fbbf24;
    border-radius: 4px 4px 6px 6px;
    box-shadow: 0 3px 15px rgba(0,0,0,0.3), inset 0 0 15px rgba(251, 191, 36, 0.15);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 3px;
}

.tet-caudoi-right::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 12px;
    background: linear-gradient(180deg, #fbbf24, #d4a017);
    border-radius: 4px 4px 0 0;
    box-shadow: 0 -2px 4px rgba(0,0,0,0.2);
}

.tet-caudoi-right::after {
    content: '';
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 18px solid #fbbf24;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.2));
}

/* Đèn Lồng - Custom CSS */
.tet-lantern {
    position: fixed;
    top: 50px;
    width: 35px;
    height: 45px;
    animation: swingLantern 3s ease-in-out infinite;
    transform-origin: top center;
}

.tet-lantern-1 { left: 10%; animation-delay: 0s; }
.tet-lantern-2 { right: 10%; animation-delay: 0.5s; }

/* Dây treo */
.tet-lantern-string {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 25px;
    background: linear-gradient(180deg, #fbbf24, #d4a017);
}

/* Núm trên */
.tet-lantern-top {
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 8px;
    background: linear-gradient(180deg, #fbbf24, #d4a017);
    border-radius: 3px 3px 0 0;
}

/* Thân đèn */
.tet-lantern-body {
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at 30% 30%, #ff6b6b 0%, #dc2626 40%, #991b1b 100%);
    border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
    position: relative;
    box-shadow: 
        0 0 15px rgba(255, 68, 68, 0.5),
        0 0 30px rgba(255, 68, 68, 0.3),
        inset 0 5px 15px rgba(255, 200, 100, 0.3),
        inset 0 -5px 10px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(251, 191, 36, 0.3);
}

/* Các vạch ngang trên đèn */
.tet-lantern-body::before {
    content: '';
    position: absolute;
    top: 20%;
    left: 5%;
    right: 5%;
    height: 60%;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 8px,
        rgba(251, 191, 36, 0.4) 8px,
        rgba(251, 191, 36, 0.4) 10px
    );
    border-radius: 50%;
}

/* Chữ Phúc tiếng Việt */
.tet-lantern-body::after {
    content: 'Phúc';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 9px;
    color: #fbbf24;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(251, 191, 36, 0.8);
    font-family: 'Times New Roman', Georgia, serif;
}

/* Tua đèn */
.tet-lantern-tassel {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tet-lantern-tassel::before {
    content: '';
    width: 10px;
    height: 6px;
    background: linear-gradient(180deg, #fbbf24, #d4a017);
    border-radius: 0 0 3px 3px;
}

.tet-lantern-tassel::after {
    content: '';
    width: 8px;
    height: 15px;
    background: repeating-linear-gradient(
        180deg,
        #dc2626 0px,
        #dc2626 2px,
        transparent 2px,
        transparent 3px
    );
    margin-top: 2px;
}

@keyframes swingLantern {
    0%, 100% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
}

/* Lì Xì / Bao Đỏ - Custom CSS */
.tet-lixi {
    position: fixed;
    bottom: 15px;
    width: 28px;
    height: 45px;
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    border-radius: 3px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.3);
    animation: floatLixi 3s ease-in-out infinite;
    border: 1px solid rgba(251, 191, 36, 0.3);
}

.tet-lixi-1 { left: 15px; animation-delay: 0s; }
.tet-lixi-2 { right: 15px; animation-delay: 1s; }

/* Nắp lì xì */
.tet-lixi::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 10px;
    background: #fbbf24;
    border-radius: 50%;
}

/* Chữ Lộc tiếng Việt */
.tet-lixi::after {
    content: 'Lộc';
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 10px;
    color: #fbbf24;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(251, 191, 36, 0.5);
    font-family: 'Times New Roman', Georgia, serif;
}

@keyframes floatLixi {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50% { transform: translateY(-8px) rotate(3deg); }
}

/* Hide Tet decorations on small screens */
@media (max-width: 768px) {
    .tet-caudoi-left,
    .tet-caudoi-right { display: none; }
    
    .tet-mai-topleft,
    .tet-dao-topright {
        width: 100px;
        height: 100px;
    }
    
    .tet-lantern {
        width: 28px;
        height: 38px;
        top: 50px;
    }
    
    .tet-lantern-body::after {
        font-size: 7px;
    }
    
    .tet-lixi {
        width: 22px;
        height: 35px;
    }
    
    .tet-lixi::after {
        font-size: 8px;
    }
}

/* Christmas Theme - Giáng Sinh */
body[data-decoration="christmas"] {
    --primary-color: #16a34a;
    --accent-color: #dc2626;
}

body[data-decoration="christmas"] .sidebar {
    background: linear-gradient(180deg, #052e16 0%, #0a3d1f 100%);
    border-right-color: rgba(22, 163, 74, 0.2);
}

body[data-decoration="christmas"] .sidebar a,
body[data-decoration="christmas"] .sidebar .nav-link,
body[data-decoration="christmas"] .sidebar span,
body[data-decoration="christmas"] .sidebar .nav-text {
    color: #dcfce7 !important;
}

body[data-decoration="christmas"] .sidebar a:hover,
body[data-decoration="christmas"] .sidebar .nav-link:hover,
body[data-decoration="christmas"] .sidebar .nav-link.active {
    color: #fbbf24 !important;
    background: rgba(22, 163, 74, 0.2);
}

body[data-decoration="christmas"] .sidebar i {
    color: #dc2626 !important;
}

body[data-decoration="christmas"] .sidebar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: repeating-linear-gradient(90deg, #dc2626 0px, #dc2626 20px, #16a34a 20px, #16a34a 40px);
}

/* Christmas Decorations */
.christmas-decorations {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9990;
}

/* Christmas Lights Garland */
.christmas-lights {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    padding: 0 20px;
}

.christmas-light {
    width: 15px;
    height: 20px;
    border-radius: 50% 50% 50% 50%;
    animation: twinkleLights 1s ease-in-out infinite;
}

.christmas-light:nth-child(5n+1) { background: #ff0000; animation-delay: 0s; }
.christmas-light:nth-child(5n+2) { background: #00ff00; animation-delay: 0.2s; }
.christmas-light:nth-child(5n+3) { background: #ffff00; animation-delay: 0.4s; }
.christmas-light:nth-child(5n+4) { background: #0000ff; animation-delay: 0.6s; }
.christmas-light:nth-child(5n+5) { background: #ff00ff; animation-delay: 0.8s; }

@keyframes twinkleLights {
    0%, 100% { opacity: 1; box-shadow: 0 0 10px currentColor; }
    50% { opacity: 0.5; box-shadow: 0 0 5px currentColor; }
}

/* Christmas Tree Corner */
.christmas-tree {
    position: fixed;
    bottom: 15px;
    left: 15px;
    font-size: 45px;
    animation: treeGlow 2s ease-in-out infinite;
}

.christmas-tree::before {
    content: '🎄';
}

@keyframes treeGlow {
    0%, 100% { filter: drop-shadow(0 0 5px #16a34a); }
    50% { filter: drop-shadow(0 0 10px #16a34a) drop-shadow(0 0 15px #fbbf24); }
}

/* Christmas Star */
.christmas-star {
    position: fixed;
    top: 55px;
    right: 20px;
    font-size: 30px;
    animation: starSpin 4s linear infinite;
}

.christmas-star::before {
    content: '⭐';
}

@keyframes starSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Christmas Gifts */
.christmas-gift {
    position: fixed;
    bottom: 15px;
    font-size: 30px;
    animation: giftBounce 2s ease-in-out infinite;
}

.christmas-gift-1 { right: 15px; }
.christmas-gift-1::before { content: '🎁'; }

.christmas-gift-2 { right: 55px; animation-delay: 0.3s; }
.christmas-gift-2::before { content: '🎀'; font-size: 25px; }

@keyframes giftBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* Holly Corners */
.christmas-holly-left,
.christmas-holly-right {
    position: fixed;
    top: 50px;
    width: 60px;
    height: 60px;
    font-size: 35px;
}

.christmas-holly-left { left: 10px; }
.christmas-holly-left::before { content: '🎅'; }

.christmas-holly-right { right: 60px; top: 55px; }
.christmas-holly-right::before { content: '🦌'; }

@media (max-width: 768px) {
    .christmas-tree { font-size: 35px; }
    .christmas-star { font-size: 22px; }
    .christmas-gift { font-size: 22px; }
    .christmas-holly-left, .christmas-holly-right { font-size: 25px; }
}

/* Valentine Theme */
body[data-decoration="valentine"] {
    --primary-color: #ec4899;
    --accent-color: #f472b6;
}

body[data-decoration="valentine"] .sidebar {
    background: linear-gradient(180deg, #1f0514 0%, #2d0a1f 100%);
    border-right-color: rgba(236, 72, 153, 0.2);
}

body[data-decoration="valentine"] .sidebar a,
body[data-decoration="valentine"] .sidebar .nav-link,
body[data-decoration="valentine"] .sidebar span,
body[data-decoration="valentine"] .sidebar .nav-text {
    color: #fce7f3 !important;
}

body[data-decoration="valentine"] .sidebar a:hover,
body[data-decoration="valentine"] .sidebar .nav-link:hover,
body[data-decoration="valentine"] .sidebar .nav-link.active {
    color: #f472b6 !important;
    background: rgba(236, 72, 153, 0.2);
}

body[data-decoration="valentine"] .sidebar i {
    color: #ec4899 !important;
}

body[data-decoration="valentine"] .nav-item:hover,
body[data-decoration="valentine"] .nav-item.active {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.1), rgba(244, 114, 182, 0.1));
}

/* Valentine Decorations */
.valentine-decorations {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9990;
}

/* Floating Hearts Corners */
.valentine-heart-corner {
    position: fixed;
    font-size: 35px;
    animation: heartPulse 1.5s ease-in-out infinite;
}

.valentine-heart-tl { top: 55px; left: 15px; }
.valentine-heart-tl::before { content: '💕'; }

.valentine-heart-tr { top: 55px; right: 15px; animation-delay: 0.3s; }
.valentine-heart-tr::before { content: '💖'; }

.valentine-heart-bl { bottom: 15px; left: 15px; animation-delay: 0.6s; }
.valentine-heart-bl::before { content: '💗'; }

.valentine-heart-br { bottom: 15px; right: 15px; animation-delay: 0.9s; }
.valentine-heart-br::before { content: '💝'; }

@keyframes heartPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

/* Cupid */
.valentine-cupid {
    position: fixed;
    top: 100px;
    right: 20px;
    font-size: 35px;
    animation: cupidFloat 4s ease-in-out infinite;
}

.valentine-cupid::before { content: '💘'; }

@keyframes cupidFloat {
    0%, 100% { transform: translate(0, 0) rotate(-3deg); }
    25% { transform: translate(5px, -8px) rotate(3deg); }
    50% { transform: translate(0, -12px) rotate(-3deg); }
    75% { transform: translate(-5px, -8px) rotate(3deg); }
}

/* Rose */
.valentine-rose {
    position: fixed;
    bottom: 60px;
    font-size: 28px;
}

.valentine-rose-1 { left: 20px; }
.valentine-rose-1::before { content: '🌹'; }

.valentine-rose-2 { right: 20px; }
.valentine-rose-2::before { content: '🌹'; transform: scaleX(-1); display: inline-block; }

@media (max-width: 768px) {
    .valentine-heart-corner { font-size: 25px; }
    .valentine-cupid { font-size: 25px; }
    .valentine-rose { font-size: 22px; }
}

/* Halloween Theme */
body[data-decoration="halloween"] {
    --primary-color: #f97316;
    --accent-color: #7c3aed;
}

body[data-decoration="halloween"] .sidebar {
    background: linear-gradient(180deg, #1a0f00 0%, #2d1a05 100%);
    border-right-color: rgba(249, 115, 22, 0.2);
}

body[data-decoration="halloween"] .sidebar a,
body[data-decoration="halloween"] .sidebar .nav-link,
body[data-decoration="halloween"] .sidebar span,
body[data-decoration="halloween"] .sidebar .nav-text {
    color: #ffedd5 !important;
}

body[data-decoration="halloween"] .sidebar a:hover,
body[data-decoration="halloween"] .sidebar .nav-link:hover,
body[data-decoration="halloween"] .sidebar .nav-link.active {
    color: #fbbf24 !important;
    background: rgba(249, 115, 22, 0.2);
}

body[data-decoration="halloween"] .sidebar i {
    color: #f97316 !important;
}

/* Halloween Decorations */
.halloween-decorations {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9990;
}

/* Pumpkins */
.halloween-pumpkin {
    position: fixed;
    font-size: 35px;
    animation: pumpkinFloat 3s ease-in-out infinite;
}

.halloween-pumpkin-1 { bottom: 15px; left: 15px; }
.halloween-pumpkin-1::before { content: '🎃'; }

.halloween-pumpkin-2 { bottom: 20px; right: 15px; animation-delay: 0.5s; }
.halloween-pumpkin-2::before { content: '🎃'; }

.halloween-pumpkin-3 { top: 60px; left: 20px; font-size: 25px; animation-delay: 1s; }
.halloween-pumpkin-3::before { content: '🎃'; }

@keyframes pumpkinFloat {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50% { transform: translateY(-8px) rotate(3deg); }
}

/* Ghosts */
.halloween-ghost {
    position: fixed;
    font-size: 30px;
    animation: ghostFloat 4s ease-in-out infinite;
}

.halloween-ghost-1 { top: 80px; right: 20px; }
.halloween-ghost-1::before { content: '👻'; }

.halloween-ghost-2 { top: 150px; left: 25px; animation-delay: 1s; font-size: 25px; }
.halloween-ghost-2::before { content: '👻'; }

@keyframes ghostFloat {
    0%, 100% { transform: translate(0, 0); opacity: 1; }
    25% { transform: translate(10px, -10px); opacity: 0.7; }
    50% { transform: translate(0, -15px); opacity: 1; }
    75% { transform: translate(-10px, -10px); opacity: 0.7; }
}

/* Bats */
.halloween-bat {
    position: fixed;
    font-size: 22px;
    animation: batFly 5s ease-in-out infinite;
}

.halloween-bat-1 { top: 55px; left: 15%; }
.halloween-bat-1::before { content: '🦇'; }

.halloween-bat-2 { top: 65px; right: 20%; animation-delay: 1s; }
.halloween-bat-2::before { content: '🦇'; }

.halloween-bat-3 { top: 90px; left: 50%; animation-delay: 2s; font-size: 18px; }
.halloween-bat-3::before { content: '🦇'; }

@keyframes batFly {
    0%, 100% { transform: translate(0, 0) scaleX(1); }
    25% { transform: translate(15px, -10px) scaleX(1); }
    50% { transform: translate(30px, 0) scaleX(-1); }
    75% { transform: translate(15px, 10px) scaleX(-1); }
}

/* Spider Web */
.halloween-web {
    position: fixed;
    top: 45px;
    font-size: 55px;
    opacity: 0.5;
}

.halloween-web-left { left: 0; transform: rotate(0deg); }
.halloween-web-left::before { content: '🕸️'; }

.halloween-web-right { right: 0; transform: scaleX(-1); }
.halloween-web-right::before { content: '🕸️'; }

/* Spider */
.halloween-spider {
    position: fixed;
    top: 85px;
    left: 50px;
    font-size: 18px;
    animation: spiderDangle 3s ease-in-out infinite;
}

.halloween-spider::before { content: '🕷️'; }

@keyframes spiderDangle {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(10px) rotate(5deg); }
}

/* Skull */
.halloween-skull {
    position: fixed;
    bottom: 60px;
    right: 50px;
    font-size: 28px;
    animation: skullShake 2s ease-in-out infinite;
}

.halloween-skull::before { content: '💀'; }

@keyframes skullShake {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-5deg); }
    75% { transform: rotate(5deg); }
}

@media (max-width: 768px) {
    .halloween-pumpkin { font-size: 28px; }
    .halloween-ghost { font-size: 22px; }
    .halloween-bat { font-size: 18px; }
    .halloween-web { font-size: 40px; }
    .halloween-spider, .halloween-skull { display: none; }
}

/* Summer Theme */
body[data-decoration="summer"] {
    --primary-color: #eab308;
    --accent-color: #f97316;
}

body[data-decoration="summer"] .sidebar {
    background: linear-gradient(180deg, #1a1500 0%, #2d2305 100%);
}

/* Autumn Theme */
body[data-decoration="autumn"] {
    --primary-color: #d97706;
    --accent-color: #92400e;
}

body[data-decoration="autumn"] .sidebar {
    background: linear-gradient(180deg, #1a0f00 0%, #2d1a05 100%);
}

/* Spring Theme */
body[data-decoration="spring"] {
    --primary-color: #22c55e;
    --accent-color: #86efac;
}

body[data-decoration="spring"] .sidebar {
    background: linear-gradient(180deg, #052e16 0%, #0a3d1f 100%);
}

/* Sale Theme */
body[data-decoration="sale"] {
    --primary-color: #ef4444;
    --accent-color: #fbbf24;
}

body[data-decoration="sale"] .sidebar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #ef4444, #fbbf24, #ef4444);
    animation: saleGlow 2s ease-in-out infinite;
}

@keyframes saleGlow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Sale Ribbon Corners */
body[data-decoration="sale"]::before {
    content: 'SALE';
    position: fixed;
    top: 80px;
    left: -35px;
    width: 150px;
    text-align: center;
    padding: 8px 0;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    font-weight: bold;
    font-size: 14px;
    transform: rotate(-45deg);
    box-shadow: 0 3px 10px rgba(0,0,0,0.3);
    z-index: 60;
    letter-spacing: 2px;
    animation: salePulse 1s ease-in-out infinite;
}

@keyframes salePulse {
    0%, 100% { transform: rotate(-45deg) scale(1); }
    50% { transform: rotate(-45deg) scale(1.05); }
}

/* National Theme */
body[data-decoration="national"] {
    --primary-color: #dc2626;
    --accent-color: #fbbf24;
}

body[data-decoration="national"] .sidebar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #dc2626, #fbbf24);
}

/* Birthday Theme */
body[data-decoration="birthday"] {
    --primary-color: #d946ef;
    --accent-color: #f472b6;
}

body[data-decoration="birthday"] .sidebar {
    background: linear-gradient(180deg, #1a0520 0%, #2d0a35 100%);
}

/* New Year Theme */
body[data-decoration="newyear"] {
    --primary-color: #6366f1;
    --accent-color: #fbbf24;
}

body[data-decoration="newyear"] .sidebar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #6366f1, #fbbf24, #6366f1);
    animation: newYearGlow 3s ease-in-out infinite;
}

@keyframes newYearGlow {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.5); }
}

/* ========== COLOR VARIATIONS ========== */

/* Red */
.effect-color-red .snow-particle,
.effect-color-red .sakura-particle { background: #ff4d4d; }
.effect-color-red .heart-particle { color: #ff0000; }
.effect-color-red .star-particle { color: #ff4d4d; }

/* Gold */
.effect-color-gold .snow-particle,
.effect-color-gold .sakura-particle { background: #ffd700; }
.effect-color-gold .heart-particle,
.effect-color-gold .star-particle { color: #ffd700; }

/* Pink */
.effect-color-pink .snow-particle { background: #ff69b4; }
.effect-color-pink .heart-particle { color: #ff69b4; }
.effect-color-pink .star-particle { color: #ff69b4; }

/* Blue */
.effect-color-blue .snow-particle { background: #4da6ff; }
.effect-color-blue .heart-particle,
.effect-color-blue .star-particle { color: #4da6ff; }

/* Green */
.effect-color-green .snow-particle,
.effect-color-green .leaf-particle { background: #4dff4d; }
.effect-color-green .heart-particle,
.effect-color-green .star-particle { color: #4dff4d; }

/* Purple */
.effect-color-purple .snow-particle,
.effect-color-purple .sakura-particle { background: #a855f7; }
.effect-color-purple .heart-particle,
.effect-color-purple .star-particle { color: #a855f7; }

/* White */
.effect-color-white .snow-particle { background: #ffffff; box-shadow: 0 0 10px rgba(255, 255, 255, 0.9); }
.effect-color-white .heart-particle,
.effect-color-white .star-particle { color: #ffffff; }

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
    .occasion-banner {
        padding: 10px 15px;
        font-size: 0.85rem;
    }
    
    body.has-occasion-banner {
        padding-top: 44px;
    }
    
    body.has-occasion-banner .sidebar {
        top: 44px;
    }
    
    body.has-occasion-banner .top-header {
        top: 44px;
    }
    
    /* Reduce particles on mobile for performance */
    .seasonal-effects-container {
        opacity: 0.7;
    }
}

/* ========== REDUCED MOTION ========== */
@media (prefers-reduced-motion: reduce) {
    .particle,
    .firework,
    .firework-trail,
    .firework-burst {
        animation: none !important;
    }
    
    .occasion-banner {
        animation: none;
    }
}