/* ĐÃ ĐỔI: Sử dụng font Nunito (bo cong) thay vì Quicksand */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800&display=swap');

/* --- ẨN THANH CUỘN (SCROLL BAR) - MỚI THÊM --- */
/* Ẩn cho Chrome, Safari và Opera */
::-webkit-scrollbar {
    display: none;
}
/* Ẩn cho Firefox, IE và Edge */
html, body {
    -ms-overflow-style: none;  /* IE và Edge */
    scrollbar-width: none;  /* Firefox */
}

/* --- CẤU HÌNH CHUNG --- */
body {
    background-color: #000000; /* Nền đen tuyệt đối */
    color: #e2e8f0;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale;
    overscroll-behavior-y: none;
    /* ĐÃ ĐỔI: Áp dụng Nunito làm font chính */
    font-family: 'Nunito', sans-serif;
}

#canvas-container {
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: -1;
    background: #000000;
}

/* --- GLASS PANEL (Khung kính) --- */
.glass-panel {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

/* --- BUTTON GƯƠNG "NGHỆ" (SHEEN SWEEP EFFECT) --- */
.glass-btn {
    position: relative;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: white;
    transition: all 0.3s ease;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    overflow: hidden; /* Để giấu vệt sáng khi chưa hover */
    z-index: 1;
}

/* Tạo luồng sáng ảo */
.glass-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%; /* Bắt đầu từ bên ngoài bên trái */
    width: 100%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255, 255, 255, 0.3), /* Vệt sáng trắng mờ */
        transparent
    );
    transition: none; /* Mặc định không chạy */
}

/* --- HIỆU ỨNG KHI HOVER --- */
.glass-btn:hover {
    background-color: rgba(37, 99, 235, 0.2); /* Nền xanh trong suốt tinh tế */
    border-color: #60a5fa; /* Viền sáng lên màu xanh băng */
    box-shadow: 
        0 0 15px rgba(37, 99, 235, 0.4), /* Glow nhẹ bên trong */
        0 0 30px rgba(37, 99, 235, 0.2); /* Glow lan tỏa bên ngoài */
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.8); /* Chữ phát sáng */
    cursor: pointer;
}

/* Kích hoạt vệt sáng chạy qua khi hover */
.glass-btn:hover::before {
    left: 100%; /* Chạy sang phải */
    transition: all 0.5s ease; /* Tốc độ quét */
}

/* Hiệu ứng click (Nhấn xuống nhẹ nhưng không đổi kích thước) */
.glass-btn:active {
    background-color: rgba(37, 99, 235, 0.4);
    box-shadow: 0 0 5px rgba(37, 99, 235, 0.5);
}

/* --- TYPOGRAPHY --- */
.text-gradient {
    background: linear-gradient(to right, #60a5fa, #c084fc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.reveal {
    opacity: 0; transform: translateY(30px); transition: all 1s cubic-bezier(0.5, 0, 0, 1);
}
.reveal.active { opacity: 1; transform: translateY(0); }

html { scroll-behavior: smooth; }

/* --- MOBILE MENU --- */
#mobile-menu {
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    transform: translateY(-20px); opacity: 0; pointer-events: none;
}
#mobile-menu.open {
    transform: translateY(0); opacity: 1; pointer-events: auto;
}

/* --- BANKING MODAL (ĐÃ CHỈNH SỬA: TRONG SUỐT) --- */
.banking-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    /* Giảm độ tối nền từ 0.9 xuống 0.6 để thấy xuyên thấu phía sau */
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    display: none; justify-content: center; align-items: center;
    backdrop-filter: blur(8px); /* Blur nhẹ cả màn hình phía sau */
    -webkit-backdrop-filter: blur(8px);
    animation: fadeIn 0.2s; padding: 20px;
}

.banking-content {
    /* Nền kính trong suốt (Glassmorphism) */
    background: rgba(255, 255, 255, 0.03);
    
    /* Hiệu ứng làm mờ vật thể phía sau kính */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    
    /* Viền kính mỏng */
    border: 1px solid rgba(255, 255, 255, 0.1);
    
    /* Bóng đổ mềm để nổi bật khối kính */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    
    color: #fff; padding: 25px; border-radius: 24px; 
    width: 100%; max-width: 340px; text-align: center; position: relative;
    animation: slideUp 0.3s;
}

.acc-number {
    font-family: monospace; font-size: 20px; font-weight: bold;
    color: #fff; background: rgba(255,255,255,0.05); 
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px; padding: 12px 0; cursor: pointer; 
    display: flex; justify-content: center; align-items: center; gap: 8px;
    transition: 0.2s;
}
/* Hiệu ứng hover cho số tài khoản */
.acc-number:hover { 
    background: rgba(37, 99, 235, 0.2); 
    border-color: #2563eb;
    box-shadow: 0 0 15px rgba(37, 99, 235, 0.2);
}
.copy-alert { color: #4ade80; font-size: 12px; font-weight: bold; margin-top: 5px; opacity: 0; transition: opacity 0.3s; }

/* Keyframes */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

@keyframes heart-beat {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}
.heart-beat {
    animation: heart-beat 1.2s infinite ease-in-out;
    color: #ffffff; /* Màu đỏ trái tim */
    display: inline-flex;
}

/* --- MUSIC PLAYER ANIMATION --- */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.disk-spin {
    animation: spin 8s linear infinite; /* Quay đều */
    animation-play-state: paused; /* Mặc định đứng im */
}

.disk-spin.playing {
    animation-play-state: running; /* Khi có class playing thì quay */
}