@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root { 
    --bg-body: #0f172a; 
    --bg-card: rgba(30, 41, 59, 0.7); 
    --accent: #6366f1; 
}

body { 
    background-color: var(--bg-body); 
    color: #f1f5f9; 
    font-family: 'Plus Jakarta Sans', sans-serif; 
    background-image: radial-gradient(circle at top right, #1e1b4b, transparent), 
                      radial-gradient(circle at bottom left, #1e1b4b, transparent); 
    background-attachment: fixed; 
}

.glass { 
    background: var(--bg-card); 
    backdrop-filter: blur(12px); 
    border: 1px solid rgba(255, 255, 255, 0.1); 
}

.filter-chip { 
    background: rgba(255, 255, 255, 0.05); 
    border: 1px solid rgba(255, 255, 255, 0.1); 
    transition: all 0.2s ease; 
    cursor: pointer; 
}

.filter-chip.active { 
    background: var(--accent); 
    color: white; 
    border-color: var(--accent); 
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.4); 
}

.product-card { 
    transition: all 0.3s ease; 
    border: 1px solid rgba(255,255,255,0.05); 
}

.product-card:hover { 
    transform: translateY(-8px); 
    border-color: var(--accent); 
}

.shopee-gradient-text { 
    background: linear-gradient(to right, #818cf8, #c084fc); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
}

.hide-scroll::-webkit-scrollbar { display: none; }

.loader { 
    width: 40px; height: 40px; 
    border: 4px solid #FFF; border-bottom-color: var(--accent); 
    border-radius: 50%; display: inline-block; 
    animation: rotation 1s linear infinite; 
}

@keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

@keyframes slow-bounce { 
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 
    10% { transform: translateY(-10px); } 
}

.animate-slow-bounce { animation: slow-bounce 5s infinite; }

#wishlist-filter-btn.active-wish { color: #ec4899; }

/* Làm đẹp thanh cuộn cho Modal */
.custom-scroll::-webkit-scrollbar {
    width: 4px;
}
.custom-scroll::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}
.custom-scroll::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 10px;
}
/* Hiệu ứng đổ bóng và bo tròn cho các nút mạng xã hội */
.fixed a, .fixed button {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    text-decoration: none;
}

/* Đảm bảo icon Facebook căn giữa chuẩn */
.fa-facebook {
    line-height: 1;
}
.btn-doi-link {
    background: linear-gradient(90deg, #ee4d2d, #ff7337); /* Gradient đậm chất Shopee */
    color: white !important;
    padding: 12px 30px; /* Kéo dài nút ra hai bên */
    border-radius: 16px; /* Bo góc hiện đại hơn */
    text-decoration: none;
    font-weight: 900; /* Font dày tối đa */
    font-size: 18px; /* Chữ to hơn */
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 8px 20px rgba(238, 77, 45, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-doi-link:hover {
    transform: translateY(-3px) scale(1.05); /* Bay lên và to ra khi di chuột */
    box-shadow: 0 12px 25px rgba(238, 77, 45, 0.5);
    filter: brightness(1.1);
}

/* Hiệu ứng rung nhẹ để gây chú ý mỗi 5 giây */
@keyframes attention-shake {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(1deg); }
    75% { transform: rotate(-1deg); }
}
.btn-doi-link {
    animation: attention-shake 5s infinite;
}