/* --- 1. HỆ THỐNG CON TRỎ CHUỘT --- */
.custom-cursor-layout {
    cursor: var(--main-cursor), auto !important;
}
.custom-cursor-layout a, 
.custom-cursor-layout button, 
.custom-cursor-layout .card,
.custom-cursor-layout .site {
    cursor: var(--pointer-cursor), pointer !important;
}

/* --- 2. GIAO DIỆN CHUNG --- */
/* Tab Label */
.tab {
    display: flex;
    justify-content: center;
    margin-bottom: 25px;
}

.tab button {
    padding: 10px 30px;
    border: none;
    background: #f7d4f3; /* Màu hồng nhạt tab */
    border-radius: 12px;
    color: #a347ff;
    font-weight: 500; }

    body {
    font-family: 'Inter', sans-serif;
    background: #f9f7ff;
    margin: 0;
    color: #333;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 40px;
    background: white;
    border-bottom: 1px solid #eee;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    position: sticky;
    top: 0;
    z-index: 1000;
}


.menu a { margin: 0 15px; text-decoration: none; color: #555; font-weight: 500; transition: 0.3s; }
.menu a:hover { color: #7c3aed; }
.site { background: #8b5cf6; color: white; padding: 6px 16px; border-radius: 20px; font-size: 14px; font-weight: 600; }

/* --- 3. DROP DOWN MENU --- */
.user-dropdown-container { position: relative; display: flex; align-items: center; }
#user-name-display {
    color: #8b5cf6; font-weight: bold; padding: 6px 18px;
    background: #f3f0ff; border-radius: 20px; font-size: 13px;
}
.dropdown-menu {
    display: none; position: absolute; top: 120%; right: 0;
    background: white; min-width: 200px; border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); border: 1px solid #f0f0f0;
    padding: 8px 0; z-index: 9999; animation: slideIn 0.2s ease;
}
.user-dropdown-container:hover .dropdown-menu, .user-dropdown-container.active .dropdown-menu { display: block; }
.dropdown-menu a, .logout-item {
    display: block; padding: 12px 20px; color: #444 !important;
    text-decoration: none; font-size: 14px; transition: 0.2s;
}
.dropdown-menu a:hover { background: #f8f6ff; color: #8b5cf6 !important; }
.logout-item { color: #ef4444 !important; border-top: 1px solid #f5f5f5; cursor: pointer; }

/* --- 4. TRẢI BÀI & THẺ (GRID) --- */



h1 { font-size: 42px; font-weight: 800; margin-bottom: 10px; color: #1a1a1a; }
.subtitle { color: #777; margin-bottom: 50px; font-size: 1.1rem; }

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
}
.card {
    background: rgb(255, 255, 255); padding: 35px; border-radius: 20px;
    border: 1px solid #eee; position: relative; transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(139, 92, 246, 0.1); }
.icon { font-size: 50px; margin-bottom: 20px; }
.tag {
    position: absolute; top: 15px; right: 15px;
    background: #ede9fe; color: #6d28d9; font-size: 11px;
    padding: 4px 10px; border-radius: 8px; font-weight: 700;
}

/* --- 5. MODAL HẾT LƯỢT (POPUP) --- */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.65); display: flex; justify-content: center;
    align-items: center; z-index: 10000; backdrop-filter: blur(5px);
}
.modal-box {
    background: white; padding: 40px; border-radius: 28px;
    text-align: center; max-width: 420px; width: 92%;
    box-shadow: 0 25px 50px rgba(0,0,0,0.2); animation: popIn 0.3s ease;
}
.modal-icon { font-size: 55px; margin-bottom: 15px; }
.modal-buttons { display: flex; gap: 15px; margin-top: 25px; }
.btn-buy { flex: 1; background: #8b5cf6; color: white; padding: 14px; border-radius: 12px; font-weight: 700; }
.btn-code { flex: 1; background: #26c2bc; color: white; padding: 14px; border-radius: 12px; font-weight: 700; }
.modal-close { margin-top: 25px; color: #999; text-decoration: underline; background: none; border: none; }

/* --- ANIMATIONS --- */
@keyframes slideIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes popIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }

/* Mobile optimization */
@media (max-width: 768px) {
    .navbar { padding: 15px 20px; }
    h1 { font-size: 32px; }
}