/* --- 1. ĐỊNH NGHĨA BIẾN --- */
:root {
    --c-blue: var(--neon-glow-rgb, 0, 191, 255);
    --c-red: 255, 49, 49;
    --sub-bg: #ffffff;
    --sub-border: #d1d5db;
    --sub-text: #374151;
    --neon-duration: 0.5s;
}

body.dark-mode {
    --sub-bg: #1e293b;
    --sub-border: #334155;
    --sub-text: #f8fafc;
}

/* WRAPPER */
#bubble-wrapper {
    position: fixed;
    bottom: 2.5rem;
    right: 2.5rem;
    z-index: 1040;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease, visibility 0.4s ease;
    opacity: 1; visibility: visible; transform: scale(1);
}

@media (max-width: 576px) {
    #bubble-wrapper {
        bottom: 1.5rem;
        right: 1.5rem;
    }
}
#bubble-wrapper.hide-away {
    transform: scale(0.6) translateY(50px) !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
#bubble-wrapper.scroll-hidden { transform: scale(0.9); opacity: 0; visibility: hidden; pointer-events: none; }

/* =================================================================
   LOGIC BONG BÓNG CHÍNH (MAIN BUBBLE)
   ================================================================= */
#nav-bubble {
    width: 60px; height: 60px;
    background: linear-gradient(135deg, var(--accent, #3b82f6), var(--accent, #3b82f6));
    color: #fff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; cursor: pointer; position: relative; z-index: 10;
    border: 1px solid transparent;
    transform: scale(1);
    box-shadow: none;

    transition:
        transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
        background-color 0.3s ease,
        box-shadow 2.0s ease-out,
        border-color 2.0s ease-out;
}

/* Blue Glow - Chỉ chạy khi đèn NEON được phép sáng (.neon-active) */
body.neon-active #nav-bubble:not(.red-mode).hover-glow,
body.neon-mode-2 #nav-bubble:not(.red-mode),
body.neon-active.neon-mode-2 #nav-bubble:not(.red-mode) {
    box-shadow: 0 0 0.1rem rgba(var(--c-blue), 1) inset, 0 0 0.5rem rgba(var(--c-blue), 1) inset, 0 0 1rem rgba(var(--c-blue), 1), 0 0 2.5rem rgba(var(--c-blue), 1), 0 0.5rem 1rem rgba(0, 0, 0, 0.2) !important;
    border-color: #fff;
    transition: box-shadow 0.2s ease-out, border-color 0.2s ease-out;
}

/* Red Mode (Vật lý - Màu nền) */
#nav-bubble.red-mode {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    border-color: #fff !important;
}

/* Red Glow - Chỉ sáng khi đèn được phép bật */
body.neon-active #nav-bubble.red-mode,
body.neon-active #nav-bubble.red-mode.hover-glow {
    box-shadow: 0 0 0.1rem rgba(var(--c-red), 1) inset, 0 0 0.5rem rgba(var(--c-red), 1) inset, 0 0 1.5rem rgba(var(--c-red), 1), 0 0 3.5rem rgba(var(--c-red), 1), 0 0.5rem 1rem rgba(0, 0, 0, 0.2) !important;
    transition: box-shadow 0.2s ease-out;
}

/* =================================================================
   LOGIC BONG BÓNG CON (SUB BUBBLES)
   ================================================================= */
.sub-bubble {
    width: 50px; height: 50px;
    background-color: var(--sub-bg); border: 1px solid var(--sub-border); color: var(--sub-text);
    backdrop-filter: blur(10px); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; cursor: pointer; opacity: 0; transform: scale(0); position: relative;
    box-shadow: none;

    transition:
        transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
        background-color 0.3s ease,
        opacity 0.3s ease,
        color 0.3s ease,
        box-shadow 2.0s ease-out,
        border-color 2.0s ease-out;
}

/* 1. TRẠNG THÁI ACTIVE VÀ HOVER (VẬT LÝ - LUÔN GIỮ NỀN VÀ SCALE) */
.sub-bubble.active,
#bubble-wrapper.expanded .sub-bubble:hover {
    transform: scale(1.15) !important;
}

.sub-bubble.active {
    background: linear-gradient(135deg, var(--accent, #3b82f6), var(--accent, #3b82f6)) !important;
    border: 0.0625rem solid #fff !important;
    color: #fff !important;
    z-index: 10;
    opacity: 1 !important;
}

/* 2. TRẠNG THÁI ACTIVE (ÁNH SÁNG - CHỈ KHI CÓ ĐÈN) */
body.neon-active .sub-bubble.active {
    box-shadow: 0 0 0.1rem rgba(var(--c-blue), 1) inset, 0 0 0.5rem rgba(var(--c-blue), 1) inset, 0 0 1rem rgba(var(--c-blue), 1), 0 0 2.5rem rgba(var(--c-blue), 1), 0 0.5rem 1rem rgba(0,0,0,0.2) !important;
    transition: box-shadow 0.2s ease-out;
}

/* 3. TRẠNG THÁI HOVER CHƯA ACTIVE (CHỈ PHÓNG TO, KHÔNG GLOW) */
#bubble-wrapper.expanded .sub-bubble:not(.active):hover {
    background-color: var(--sub-bg) !important;
    color: var(--sub-text) !important;
    border-color: var(--sub-border) !important;
    z-index: 100;
    opacity: 1 !important;
    transform: scale(1.1) !important; /* Chỉ phóng to 1.1 */
}

/* ICON */
#bubble-icon, .sub-bubble i { transition: filter 0.5s ease-out, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); filter: none; transform: rotate(0deg); }
#nav-bubble.red-mode #bubble-icon { transform: rotate(90deg); }

/* Icon Glow - CHỈ DÀNH CHO BONG BÓNG CHÍNH HOẶC BONG BÓNG CON ĐANG ACTIVE */
body.neon-active #nav-bubble:not(.red-mode).hover-glow #bubble-icon,
body.neon-mode-2 #nav-bubble:not(.red-mode) #bubble-icon,
body.neon-active.neon-mode-2 #nav-bubble:not(.red-mode) #bubble-icon,
body.neon-active .sub-bubble.active i {
    filter: drop-shadow(0 0 0.3rem rgba(var(--c-blue), 1));
}

body.neon-active #nav-bubble.red-mode #bubble-icon,
body.neon-active #nav-bubble.red-mode.hover-glow #bubble-icon {
    filter: drop-shadow(0 0 0.5rem rgba(var(--c-red), 1));
}

/* Layout & Badge */
.main-bubble-badge { position: absolute; top: 0; right: 0; width: 16px; height: 16px; background-color: #ef4444; border: 1px solid #fff; border-radius: 50%; z-index: 11; box-shadow: 0 2px 4px rgba(0,0,0,0.2); pointer-events: none; transition: all 0.5s ease-out; }

body.neon-active #nav-bubble.hover-glow .main-bubble-badge { box-shadow: 0 0 5px #ef4444; }

.sub-bubbles-container { position: absolute; left: 0; width: 60px; display: flex; flex-direction: column; align-items: center; gap: 16px; pointer-events: none; z-index: 1; }
#bubble-wrapper.expanded .sub-bubble { opacity: 1; transform: scale(1); pointer-events: auto; }

/* Popup & Backdrop */
#nav-popup { position: fixed; z-index: 1030; background: var(--popup-bg); border: 0.0625rem solid var(--popup-border); box-shadow: var(--popup-glow); border-radius: 1.25rem !important; overflow: hidden !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; opacity: 0; visibility: hidden; transform: scale(0.95); transition: opacity 0.2s, transform 0.2s; width: fit-content; max-width: calc(100vw - 20px); display: flex; flex-direction: column; scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }
#nav-popup::-webkit-scrollbar { width: 4px; }
#nav-popup::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 4px; }
#nav-popup.active { opacity: 1; visibility: visible; transform: scale(1); }
#nav-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 1020; opacity: 0; visibility: hidden; transition: 0.3s; backdrop-filter: blur(2px); }
#nav-backdrop.active { opacity: 1; visibility: visible; }