/* --- CẤU HÌNH CƠ BẢN (SỬA LẠI Z-INDEX) --- */
#light-container, #equalizer-container {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    pointer-events: none; /* QUAN TRỌNG: Để click xuyên qua đèn vào nút bấm */
    z-index: 9999; /* [SỬA] Đưa lên lớp cao nhất */
    overflow: hidden;
    mix-blend-mode: screen; /* [SỬA] Hòa trộn màu để sáng rực rỡ */
}

#equalizer-container {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    padding-bottom: 0;
    opacity: 0.8; /* [SỬA] Tăng độ rõ của sóng nhạc */
}

/* --- 1. HIỆU ỨNG ĐÈN BEAM (ĐÈN XOAY) --- */
.light-beam {
    position: absolute;
    top: -50%; left: 50%;
    width: 30px; /* [SỬA] To hơn chút */
    height: 200vh;
    background: linear-gradient(to bottom, currentColor, transparent 80%);
    transform-origin: top center;
    opacity: 0;
    filter: blur(20px); /* [SỬA] Blur nhiều hơn cho ảo */
    transition: opacity 0.1s;
}

/* --- 2. HIỆU ỨNG LASER (QUÉT NGANG) --- */
.laser-thread {
    position: absolute;
    top: 50%; left: 0;
    width: 100vw; height: 3px; /* [SỬA] Dày hơn */
    background: currentColor;
    box-shadow: 0 0 15px currentColor, 0 0 30px currentColor; /* [SỬA] Glow mạnh hơn */
    opacity: 0;
    transform-origin: center;
}

/* --- 3. HIỆU ỨNG CỘT SÓNG NHẠC (EQ) --- */
.eq-bar {
    width: 2.5%;
    background: linear-gradient(to top, currentColor, transparent);
    border-radius: 5px 5px 0 0;
    transition: height 0.08s ease-out; /* [SỬA] Mượt hơn */
    box-shadow: 0 0 20px currentColor; /* [SỬA] Sáng hơn */
}

/* --- 4. CÁC HIỆU ỨNG KHÁC GIỮ NGUYÊN HOẶC TĂNG CƯỜNG --- */
.shake-screen {
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

.invert-flash {
    animation: flashInvert 0.1s steps(2, start) infinite;
    z-index: 10000; /* Flash phải trùm lên tất cả */
}

.glitch-screen {
    animation: glitch-anim 0.3s infinite;
}

.confetti {
    position: absolute;
    top: 50%; left: 50%;
    width: 12px; height: 12px;
    background: currentColor;
    animation: explode 1s ease-out forwards;
    z-index: 10000;
}

.neon-bubble {
    position: absolute;
    border-radius: 50%;
    border: 3px solid currentColor;
    box-shadow: 0 0 15px currentColor, inset 0 0 15px currentColor;
    animation: floatUp 4s linear forwards;
    opacity: 0.9;
    z-index: 10000;
}

.hype-text {
    position: absolute;
    top: 50%; left: 50%;
    font-size: 6rem; /* [SỬA] Chữ to hơn */
    font-weight: 900;
    font-family: 'Arial Black', sans-serif;
    text-transform: uppercase;
    text-shadow: 0 0 30px currentColor;
    animation: zoomOutFade 0.8s ease-out forwards;
    white-space: nowrap;
    z-index: 10001;
    pointer-events: none;
}

.bass-effect {
    transform: scale(1.2) !important; /* [SỬA] Giật mạnh hơn */
    filter: brightness(1.8) drop-shadow(0 0 20px rgba(255,255,255,0.9));
    transition: transform 0.05s ease-out;
}

/* ... (Giữ nguyên các keyframes @keyframes shake, floatUp, v.v...) ... */
@keyframes shake {
    10%, 90% { transform: translate3d(-2px, -2px, 0) rotate(-1deg); }
    20%, 80% { transform: translate3d(4px, 4px, 0) rotate(2deg); }
    30%, 50%, 70% { transform: translate3d(-8px, -6px, 0) rotate(-3deg); }
    40%, 60% { transform: translate3d(8px, 6px, 0) rotate(3deg); }
}

@keyframes flashInvert {
    0% { filter: invert(0); }
    50% { filter: invert(1); }
    100% { filter: invert(0); }
}

@keyframes explode {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(var(--tx), var(--ty)) rotate(720deg) scale(0); opacity: 0; }
}

@keyframes zoomOutFade {
    0% { transform: translate(-50%, -50%) scale(0.5) rotate(-10deg); opacity: 0; }
    50% { transform: translate(-50%, -50%) scale(1.5) rotate(0deg); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(2) rotate(10deg); opacity: 0; }
}

@keyframes floatUp {
    0% { transform: translateY(0) scale(1); opacity: 0; }
    10% { opacity: 1; }
    100% { transform: translateY(-100vh) scale(1.5); opacity: 0; }
}

@keyframes glitch-anim {
    0% { clip-path: inset(20% 0 80% 0); transform: translate(-2px, 2px); }
    20% { clip-path: inset(60% 0 10% 0); transform: translate(2px, -2px); }
    40% { clip-path: inset(40% 0 50% 0); transform: translate(-2px, 2px); }
    60% { clip-path: inset(80% 0 5% 0); transform: translate(2px, -2px); }
    80% { clip-path: inset(10% 0 60% 0); transform: translate(-2px, 2px); }
    100% { clip-path: inset(30% 0 30% 0); transform: translate(2px, -2px); }
}

/* --- [MỚI] 1. HIỆU ỨNG KHÓI MỜ ẢO --- */
.smoke-layer {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.1) 0%, transparent 60%);
    filter: blur(40px);
    opacity: 0.3;
    animation: smokeMove 10s infinite alternate ease-in-out;
    pointer-events: none;
    z-index: 10; /* Nằm dưới đèn laser nhưng trên nền đen */
}

@keyframes smokeMove {
    0% { transform: translate(-5%, -5%) scale(1); }
    100% { transform: translate(5%, 5%) scale(1.1); }
}

/* --- [MỚI] 2. SÓNG ÂM (SHOCKWAVE) TỪ TÂM --- */
.shockwave {
    position: absolute;
    top: 50%; left: 50%;
    width: 100px; height: 100px;
    border-radius: 50%;
    border: 5px solid rgba(255, 255, 255, 0.8);
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 1;
    box-shadow: 0 0 20px currentColor, inset 0 0 20px currentColor;
    animation: ripple 0.8s ease-out forwards;
    z-index: 50;
    pointer-events: none;
}

@keyframes ripple {
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 1; border-width: 5px; }
    100% { transform: translate(-50%, -50%) scale(4); opacity: 0; border-width: 0px; }
}

/* --- [MỚI] 3. ĐÈN SPOTLIGHT (RỌI SÂN KHẤU) --- */
.spotlight-left, .spotlight-right {
    position: absolute;
    top: -20%; 
    width: 200px; height: 150vh;
    background: linear-gradient(to bottom, rgba(255,255,255,0.4), transparent);
    filter: blur(30px);
    transform-origin: top center;
    pointer-events: none;
    z-index: 9998;
    mix-blend-mode: overlay;
}
.spotlight-left { left: 20%; animation: spotSwing 8s infinite ease-in-out; }
.spotlight-right { right: 20%; animation: spotSwing 8s infinite ease-in-out reverse; }

@keyframes spotSwing {
    0% { transform: rotate(15deg); opacity: 0.3; }
    50% { transform: rotate(-15deg); opacity: 0.6; }
    100% { transform: rotate(15deg); opacity: 0.3; }
}

/* [MỚI 1] BẢNG LED CHẠY CHỮ (MARQUEE) */
.led-banner-container {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 50px; /* Tăng chiều cao xíu cho chữ thoáng */
    background: rgba(0, 0, 0, 0.9); /* Nền đen đặc hơn */
    border-bottom: 2px solid #00ff00; /* Viền xanh lá neon */
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.2);
    z-index: 20000;
    
    display: flex;
    align-items: center;
    pointer-events: none;
    
    /* TRẠNG THÁI MẶC ĐỊNH: ẨN LÊN TRÊN */
    transform: translateY(-100%); 
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); /* Trượt mượt mà */
}

/* KHI KÍCH HOẠT: TRƯỢT XUỐNG */
.led-banner-container.active {
    transform: translateY(0);
}

.led-msg-item {
    position: absolute;
    left: 100%; /* Bắt đầu từ mép phải */
    top: 0;
    height: 100%; /* Chiếm full chiều cao banner */
    
    /* CĂN GIỮA TUYỆT ĐỐI */
    display: flex;
    align-items: center; 
    
    font-family: 'Courier New', monospace;
    font-size: 26px;
    font-weight: bold;
    white-space: nowrap;
    
    /* Animation chạy chữ */
    animation: slideAcross linear forwards;
    padding-right: 20px;
    z-index: 20001; /* Đảm bảo nổi trên nền banner */
}

@keyframes slideAcross {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(calc(-100vw - 100%), 0, 0); } 
}

.led-color-1 { color: #39ff14; text-shadow: 0 0 10px #39ff14; } /* Neon Green */
.led-color-2 { color: #ff00ff; text-shadow: 0 0 10px #ff00ff; } /* Neon Magenta */
.led-color-3 { color: #00ffff; text-shadow: 0 0 10px #00ffff; } /* Neon Cyan */
.led-color-4 { color: #ffff00; text-shadow: 0 0 10px #ffff00; } /* Neon Yellow */

.led-text {
    font-family: 'Courier New', monospace;
    font-size: 20px;
    font-weight: bold;
    color: #00ff00; /* Màu xanh LED cổ điển */
    text-shadow: 0 0 5px #00ff00;
    white-space: nowrap;
    padding-left: 100%; /* Bắt đầu từ ngoài màn hình */
    animation: marqueeRun 15s linear infinite;
}

@keyframes marqueeRun {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); } /* Chạy hết chiều dài */
}

/* [MỚI 2] CỘT KHÓI CO2 (PHUN TỪ DƯỚI LÊN) */
.co2-jet {
    position: absolute;
    bottom: 0;
    width: 100px; height: 80vh;
    background: linear-gradient(to top, rgba(255,255,255,0.8), transparent 70%);
    filter: blur(20px);
    opacity: 0;
    transform-origin: bottom center;
    animation: co2Blast 0.5s ease-out forwards;
    z-index: 9990;
    pointer-events: none;
}

@keyframes co2Blast {
    0% { transform: scaleY(0); opacity: 0.8; }
    50% { opacity: 0.6; }
    100% { transform: scaleY(1.2); opacity: 0; }
}

/* [MỚI 3] TIA SÉT (LIGHTNING) */
.lightning-bolt {
    position: absolute;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M500 0 L400 300 L600 300 L450 600 L800 200 L550 200 Z' fill='white'/%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: drop-shadow(0 0 20px cyan);
    opacity: 0;
    z-index: 10001;
    animation: flashBolt 0.2s steps(2, start);
    pointer-events: none;
}

@keyframes flashBolt {
    0% { opacity: 0; }
    10% { opacity: 1; filter: invert(1); }
    30% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}