/* General Styling */
body { 
    font-family: 'Inter', sans-serif; 
}

/* Toast Notifications */
#toastContainer { 
    position: fixed; 
    top: 20px; 
    right: 20px; 
    z-index: 1000; 
    display: flex; 
    flex-direction: column; 
    gap: 10px; 
}
.toast { 
    opacity: 0; 
    transform: translateX(100%); 
    transition: all 0.3s ease-in-out; 
}
.toast.show { 
    opacity: 1; 
    transform: translateX(0); 
}

/* Mobile Menu Transition */
.mobile-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
    background-color: white;
}
.mobile-menu.show {
    max-height: 500px; /* Tăng chiều cao để chứa đủ nội dung */
}

/* Product Grid */
.product-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); 
    gap: 1.5rem; 
}
.card-hover { 
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
}
.card-hover:hover { 
    transform: translateY(-5px); 
    box-shadow: 0 10px 20px rgba(0,0,0,0.1); 
}

/* Category Buttons */
.category-btn { 
    padding: 8px 16px; 
    border-radius: 9999px; 
    background-color: #f3f4f6; 
    color: #4b5563; 
    transition: all 0.2s ease-in-out; 
    font-weight: 500; 
    border: 1px solid transparent;
}
.category-btn:hover { 
    background-color: #e5e7eb; 
}
.category-btn.active { 
    background-color: #F4D03F; /* hsq-yellow */
    color: #8B4513; /* hsq-brown */
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Loading Spinner */
.loading-spinner { 
    border: 4px solid #f3f3f3; 
    border-top: 4px solid #E74C3C; /* hsq-red */
    border-radius: 50%; 
    width: 50px; 
    height: 50px; 
    animation: spin 1s linear infinite; 
}
@keyframes spin { 
    0% { transform: rotate(0deg); } 
    100% { transform: rotate(360deg); } 
}

/* Footer */
.footer-bg { 
    background-color: #1f2937; 
}
.footer-social-link { 
    transition: color 0.2s, transform 0.2s; 
}
.footer-social-link:hover { 
    color: #F4D03F; /* hsq-yellow */
    transform: scale(1.1); 
}

/* Swiper Gallery Customization */
.swiper-button-next, .swiper-button-prev { 
    color: #F4D03F !important; /* hsq-yellow */
    background-color: rgba(0,0,0,0.3); 
    border-radius: 50%; 
    width: 44px !important; 
    height: 44px !important; 
    transition: background-color 0.2s ease; 
}
.swiper-button-next:hover, .swiper-button-prev:hover { 
    background-color: rgba(0,0,0,0.5); 
}
.swiper-button-next::after, .swiper-button-prev::after { 
    font-size: 1.2rem !important; 
    font-weight: 700; 
}
.swiper-pagination-bullet-active { 
    background: #F4D03F !important; /* hsq-yellow */
}


/* *** START MODIFICATION: Hot Product Icon Badge *** */
.hot-icon-badge {
    position: absolute;
    top: 0;
    left: 0;
    width: 55px;
    height: 55px;
    z-index: 10;
    pointer-events: none; /* Để không bị che mất nút bên dưới */
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4));
    transition: transform 0.3s ease;
}

.group:hover .hot-icon-badge {
    transform: scale(1.1) rotate(-10deg);
}
/* *** END MODIFICATION *** */