/* =============================================
   In Ấn Minh Đạt – Custom CSS
   Loaded after Tailwind CDN (in _Layout.cshtml)
   ============================================= */

/* Custom light scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #FAFAFC; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 4px; border: 2px solid #FAFAFC; }
::-webkit-scrollbar-thumb:hover { background: #111111; }

/* Blur backdrop utility */
.blur-backdrop {
    backdrop-filter: blur(12px);
    background-color: rgba(255, 255, 255, 0.75);
}

/* Bento card glow */
.bento-glow {
    box-shadow: 0 4px 20px -2px rgba(0,0,0,.04), 0 2px 8px -1px rgba(0,0,0,.02);
}
.bento-glow-hover:hover {
    box-shadow: 0 10px 30px -4px rgba(0,0,0,.08), 0 4px 12px -2px rgba(0,0,0,.04);
    border-color: #111111 !important;
}

/* Hide scrollbar utility */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Ripple animation */
@keyframes ripple { to { transform: scale(4); opacity: 0; } }

/* Promo ticker marquee */
@keyframes ticker {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.ticker-track {
    display: flex;
    white-space: nowrap;
    animation: ticker 28s linear infinite;
    width: max-content;
}
.ticker-track:hover { animation-play-state: paused; }

/* Ensure body uses Be Vietnam Pro */
body {
    font-family: "Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif;
    background-color: #FAFAFC;
    color: #0F172A;
    overflow-x: hidden;
}

/* Mobile menu slide-down animation */
#mobile-menu:not(.hidden) {
    animation: slideDown .18s ease;
}
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Responsive: tighten product card padding on mobile */
@media (max-width: 639px) {
    .bento-glow-hover { border-radius: 1.25rem; }
}

/* Responsive: illustration popup grid on mobile */
@media (max-width: 479px) {
    #illus-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important; }
}

/* Product card category badge */
.category-badge { font-size: 12px !important; }

/* Promo popup ad */
.promo-popup { opacity: 0; transition: opacity .25s ease; }
.promo-popup.show { opacity: 1; }
.promo-popup .promo-popup-card { transform: scale(.92); transition: transform .25s ease; }
.promo-popup.show .promo-popup-card { transform: scale(1); }