body { 
    font-family: 'Segoe UI', sans-serif; 
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #111827 100%); 
    background-attachment: fixed; 
    color: #f3f4f6; 
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nav-slider {
    overflow-x: auto;
    white-space: nowrap;
    -ms-overflow-style: none;
    scrollbar-width: none;
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}
.nav-slider::-webkit-scrollbar { display: none; }

.nav-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.2s;
    background-color: rgba(31, 41, 55, 0.5);
    color: #d1d5db;
    border: 1px solid #374151;
    cursor: pointer;
    margin-right: 0.5rem;
}
.nav-pill:hover { background-color: #374151; color: white; }
.nav-pill.active { background-color: #db2777; color: white; border-color: #db2777; box-shadow: 0 0 10px rgba(219, 39, 119, 0.5); }

#floating-dropdown {
    position: fixed;
    z-index: 100;
    background-color: #1f2937;
    border: 1px solid #374151;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
    min-width: 220px;
    max-height: 70vh;
    overflow-y: auto;
    padding: 0.5rem 0;
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.1s, transform 0.1s;
    pointer-events: none;
}
#floating-dropdown.open { opacity: 1; transform: scale(1); pointer-events: auto; }
#floating-dropdown::-webkit-scrollbar { width: 6px; }
#floating-dropdown::-webkit-scrollbar-track { background: #111827; }
#floating-dropdown::-webkit-scrollbar-thumb { background-color: #4b5563; border-radius: 10px; }
#floating-dropdown::-webkit-scrollbar-thumb:hover { background-color: #db2777; }

#mobile-menu-sidebar { transition: transform 0.3s ease-in-out; transform: translateX(-100%); }
#mobile-menu-sidebar.open { transform: translateX(0); }
#mobile-menu-overlay { transition: opacity 0.3s ease-in-out; opacity: 0; pointer-events: none; }
#mobile-menu-overlay.open { opacity: 1; pointer-events: auto; }

.sidebar-link { display: flex; align-items: center; padding: 1rem; border-bottom: 1px solid #374151; color: #e5e7eb; font-weight: 500; transition: background 0.2s; }
.sidebar-link:hover { background-color: #374151; color: #db2777; }

#mobile-menu-sidebar .overflow-y-auto::-webkit-scrollbar { width: 4px; }
#mobile-menu-sidebar .overflow-y-auto::-webkit-scrollbar-thumb { background: #4b5563; }

.opt-btn { border: 1px solid #4b5563; padding: 8px 16px; border-radius: 6px; cursor: pointer; transition: all 0.2s; font-size: 0.9rem; font-weight: 600; color: #e5e7eb; background: #1f2937; min-width: 45px; text-align: center; display: inline-block; }
.opt-btn.selected { background-color: #db2777; border-color: #db2777; color: white; }
.product-card-btn {
    min-height: 2.5rem;
    border-radius: 0.5rem;
    font-weight: 700;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
}
.product-card-btn-primary {
    background: linear-gradient(135deg, #14b8a6 0%, #2563eb 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(37, 99, 235, 0.35);
}
.product-card-btn-primary:hover {
    background: linear-gradient(135deg, #0d9488 0%, #1d4ed8 100%) !important;
    color: #ffffff !important;
}
.product-card-btn-secondary {
    background: #f0fdfa !important;
    color: #0f766e !important;
    border: 1px solid #14b8a6 !important;
}
.product-card-btn-secondary:hover {
    background: #ccfbf1 !important;
    color: #115e59 !important;
}
.product-card-media {
    width: 290px;
    height: 110px;
    max-width: 100%;
    margin: 0 auto;
}
@media (min-width: 768px) {
    .product-card-media {
        width: 100%;
        aspect-ratio: auto;
        height: 12.5rem;
        margin: 0;
    }
}
.animate-fade-in { animation: fadeIn 0.5s ease-out; }
.rotate-180 { transform: rotate(180deg); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.toast {
    visibility: hidden; min-width: 250px; background-color: #333; color: #fff; text-align: center; border-radius: 2px;
    padding: 16px; position: fixed; z-index: 100; left: 50%; bottom: 30px; transform: translateX(-50%);
}
.toast.show { visibility: visible; animation: fadein 0.5s, fadeout 0.5s 2.5s; }
@keyframes fadein { from { bottom: 0; opacity: 0; } to { bottom: 30px; opacity: 1; } }
@keyframes fadeout { from { bottom: 30px; opacity: 1; } to { bottom: 0; opacity: 0; } }

#detail-desc table { width: 100%; border-collapse: collapse; margin: 1rem 0; border: 1px solid #4b5563; }
#detail-desc th, #detail-desc td { border: 1px solid #4b5563; padding: 8px 12px; text-align: left; color: #e5e7eb; }
#detail-desc th { background-color: #374151; font-weight: bold; }
#detail-desc td span, #detail-desc td p, #detail-desc td div { background-color: transparent !important; }
.main-banner { height: 600px; }
@media (min-width: 768px) { .main-banner { height: 650px; } }