/* Custom Popup Style */
.popup-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); z-index: 10000;
    display: none; align-items: center; justify-content: center;
    backdrop-filter: blur(4px);
}
.popup-box {
    background: white; width: 85%; max-width: 320px;
    border-radius: 15px; padding: 20px; text-align: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    transform: scale(0.8); transition: 0.3s;
}
.popup-overlay.active { display: flex; }
.popup-overlay.active .popup-box { transform: scale(1); }
.popup-title { font-weight: bold; font-size: 18px; margin-bottom: 10px; color: #333; }
.popup-message { font-size: 14px; color: #666; margin-bottom: 20px; }
.popup-buttons { display: flex; gap: 10px; justify-content: center; }
.btn-popup { 
    padding: 8px 20px; border-radius: 20px; border: none; 
    font-size: 14px; font-weight: bold; flex: 1;
}
.btn-confirm { background: #dc3545; color: white; }
.btn-cancel { background: #f0f0f0; color: #333; }
/* Chữ chạy khi chờ */
.idle-msg {
    position: absolute; top: 40%; width: 100%; text-align: center;
    z-index: 5; font-size: 3rem; font-weight: bold;
    color: white; text-shadow: 2px 2px 10px rgba(0,0,0,1);
    display: none; pointer-events: none;
}
#song-info {
    position: absolute; 
    top: 20px; 
    left: 20px; 
    z-index: 10001; /* Phải cao hơn cả Overlay hình nền (5) và menu (9999) */
    background: rgba(0, 0, 0, 0.9); 
    padding: 15px 30px; 
    border-radius: 12px;
    border-left: 6px solid #00f2fe;
    box-shadow: 0 5px 20px rgba(0,0,0,0.8);
    pointer-events: none;
}
@keyframes fadeInOut { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
.idle-active .idle-msg { display: block; animation: fadeInOut 4s infinite; }
/* CSS cho Màn hình chờ Hình nền + Chạy chữ */
#idle-bg-overlay {
    position: fixed;
    inset: 0;
    z-index: 5;
    display: none;

    background-image: url('https://images.unsplash.com/photo-1470225620780-dba8ba36b745?q=80&w=2070');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;   /* full màn hình, tự crop */
}

#idle-bg-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
}

.marquee-container {
    position: absolute; bottom: 15%; width: 100%;
    background: rgba(0,0,0,0.6); padding: 20px 0;
    white-space: nowrap; overflow: hidden;
}

.marquee-content {
    display: inline-block; font-size: 5rem; font-weight: bold; color: #fff;
    padding-left: 100%; animation: marquee-anim 25s linear infinite;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.8);
}

@keyframes marquee-anim {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}