/* ==========================================================================
   PHARMAMARKET MODERN THEME (Dribbble UI Style - Single-Bar Unified Header)
   ========================================================================== */

:root {
    --color-lime-50: #f0fdf4;
    --color-lime-100: #dcfce7;
    --color-lime-200: #bbf7d0;
    --color-lime-300: #86efac;
    --color-lime-400: #4ade80;
    --color-lime-primary: #16a34a;
    --color-lime-dark: #15803d;
    --color-lime-900: #14532d;
    
    --color-mint-light: #86efac;
    --color-mint-primary: #16a34a;
    --color-mint-dark: #15803d;
    
    --color-accent-amber: #f59e0b;
    --color-accent-red: #ef4444;
    
    --gradient-lime-mint: linear-gradient(135deg, #15803d 0%, #16a34a 100%);
    --gradient-lime-glow: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
    --gradient-flash-sale: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    
    --shadow-sm: 0 2px 8px rgba(22, 163, 74, 0.08);
    --shadow-md: 0 8px 20px -4px rgba(22, 163, 74, 0.15);
    --shadow-lg: 0 15px 30px -5px rgba(22, 163, 74, 0.22);
    --shadow-pill: 0 4px 15px rgba(0, 0, 0, 0.06);
    
    --radius-pill: 9999px;
    --radius-lg: 14px;
    --radius-xl: 20px;
}

/* ==========================================================================
   RESET & OVERRIDE ALL LEGACY GREEN RECTANGLES & EMPTY SECONDARY BAR
   ========================================================================== */
.header__fsearch,
.header__action__fsearch,
.header__action__fsearch__container,
.header__fsearch > .row {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    overflow: visible !important;
}

.header__nav__container {
    display: none !important;
}

/* ==========================================================================
   TOP HEADER (V2 SMART PILL COMPATIBILITY)
   ========================================================================== */
#header.v2-header {
    background: rgba(255, 255, 255, 0.96) !important;
    border-radius: 50px !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 12px 30px var(--primary-shadow, rgba(0, 166, 81, 0.12)), 0 2px 8px rgba(0,0,0,0.04) !important;
    margin: 10px auto 20px auto !important;
    left: 0 !important;
    right: 0 !important;
    float: none !important;
    clear: both !important;
}

.hlogo__container {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.header-main-flex-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    width: 100% !important;
}

/* LEFT GROUP (Logo & Mega Menu) */
.header-left-group {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex-shrink: 0 !important;
}

.header__logo {
    display: flex !important;
    align-items: center !important;
    max-width: 180px !important;
}

.header__logo a {
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
}

.header__logo img {
    max-height: 40px !important;
    width: auto !important;
    object-fit: contain !important;
}

/* Mega Menu Button */
.category-mega-dropdown {
    position: relative !important;
}

.modern-category-trigger-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #f0fdf4 !important;
    color: var(--color-lime-dark) !important;
    border: 1.5px solid var(--color-lime-200) !important;
    padding: 0 16px !important;
    height: 40px !important;
    border-radius: var(--radius-pill) !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 2px 6px rgba(34, 197, 94, 0.1) !important;
    white-space: nowrap !important;
}

.modern-category-trigger-btn:hover,
.category-mega-dropdown:hover .modern-category-trigger-btn {
    background: var(--color-lime-primary) !important;
    color: #ffffff !important;
    border-color: var(--color-lime-primary) !important;
}

.modern-category-trigger-btn:hover i,
.category-mega-dropdown:hover .modern-category-trigger-btn i {
    color: #ffffff !important;
}

.nav-chevron-sm {
    font-size: 0.65rem !important;
    transition: transform 0.25s ease !important;
}

.category-mega-dropdown:hover .nav-chevron-sm {
    transform: rotate(180deg) !important;
}

/* ==========================================================================
   MEGA DROPDOWN PANEL (DRIBBLE BENTO-STYLE WITH GRADIENTS & ICONS)
   ========================================================================== */
.modern-mega-dropdown-panel {
    position: absolute !important;
    top: 100% !important;
    left: auto !important; right: 0 !important;
    width: 800px !important;
    max-width: 92vw !important;
    max-height: 82vh !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    background: #ffffff !important;
    border-radius: 20px !important;
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.08) !important;
    padding: 18px 20px !important;
    margin-top: 10px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(10px) scale(0.98) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 1100 !important;
    scrollbar-width: thin !important;
    scrollbar-color: #cbd5e1 transparent !important;
    -webkit-overflow-scrolling: touch !important;
}

.modern-mega-dropdown-panel::-webkit-scrollbar {
    width: 6px !important;
}

.modern-mega-dropdown-panel::-webkit-scrollbar-track {
    background: transparent !important;
}

.modern-mega-dropdown-panel::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
    border-radius: 10px !important;
}

.modern-mega-dropdown-panel::-webkit-scrollbar-thumb:hover {
    background: #94a3b8 !important;
}

.category-mega-dropdown:hover .modern-mega-dropdown-panel {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) scale(1) !important;
}

.mega-panel-header {
    position: sticky !important;
    top: -18px !important;
    background: #ffffff !important;
    z-index: 10 !important;
    padding-top: 2px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-bottom: 12px !important;
    margin-bottom: 14px !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.mega-header-icon {
    width: 26px !important;
    height: 26px !important;
    border-radius: 8px !important;
    background: var(--color-lime-100) !important;
    color: var(--color-lime-dark) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.8rem !important;
}

.mega-view-all-btn {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: var(--color-lime-dark) !important;
    text-decoration: none !important;
    background: #f0fdf4 !important;
    border: 1px solid var(--color-lime-200) !important;
    padding: 4px 12px !important;
    border-radius: var(--radius-pill) !important;
    transition: all 0.2s ease !important;
}

.mega-view-all-btn:hover {
    background: var(--color-lime-primary) !important;
    color: #ffffff !important;
    border-color: var(--color-lime-primary) !important;
}

.mega-categories-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px 14px !important;
}

/* Category Bento Card */
.mega-cat-card {
    background: #ffffff !important;
    border: 1px solid #eef2f6 !important;
    border-radius: 14px !important;
    padding: 10px 12px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
}

.mega-cat-card:hover {
    background: #f0fdf4 !important;
    border-color: var(--color-lime-300) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(34, 197, 94, 0.12) !important;
}

.mega-cat-head {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-decoration: none !important;
    margin-bottom: 8px !important;
}

.mega-cat-icon-circle {
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    font-size: 0.95rem !important;
    flex-shrink: 0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}

.mega-cat-info {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

.mega-cat-title {
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    line-height: 1.2 !important;
    transition: color 0.15s ease !important;
}

.mega-cat-card:hover .mega-cat-title {
    color: var(--color-lime-dark) !important;
}

.mega-cat-sub {
    font-size: 0.68rem !important;
    color: #94a3b8 !important;
    font-weight: 500 !important;
    margin-top: 1px !important;
}

.mega-cat-chips-wrap {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px 8px !important;
    padding-left: 44px !important;
}

.mega-modern-chip {
    font-size: 0.74rem !important;
    color: #475569 !important;
    background: #f1f5f9 !important;
    padding: 3px 10px !important;
    border-radius: var(--radius-pill) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border: 1px solid transparent !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1.3 !important;
}

.mega-modern-chip:hover {
    background: #dcfce7 !important;
    color: #15803d !important;
    border-color: #86efac !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.18) !important;
}

.mega-chip-explore {
    background: #f0fdf4 !important;
    color: var(--color-lime-dark) !important;
    border-color: var(--color-lime-200) !important;
    font-weight: 600 !important;
}

.mega-chip-explore:hover {
    background: var(--color-lime-primary) !important;
    color: #ffffff !important;
    border-color: var(--color-lime-primary) !important;
}

/* Mega Panel Bottom Promo Footer */
.mega-panel-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #f8fafc !important;
    border: 1px solid #edf2f7 !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
    margin-top: 14px !important;
}

.mega-footer-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 0.78rem !important;
    color: #334155 !important;
}

.mega-footer-link {
    color: var(--color-lime-dark) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    margin-left: 4px !important;
    transition: transform 0.15s ease !important;
    display: inline-flex !important;
    align-items: center !important;
}

.mega-footer-link:hover {
    color: var(--color-lime-primary) !important;
    transform: translateX(2px) !important;
}

.mega-footer-divider {
    width: 1px !important;
    height: 20px !important;
    background: #cbd5e1 !important;
}

/* ==========================================================================
   DRIBBLE ASYMMETRIC HERO BENTO SHOWCASE (NO WHITE GAP + FULL 3 BANNERS)
   ========================================================================== */
.hero-bento-section {
    padding-top: 18px !important;
    padding-bottom: 12px !important;
}

.hero-bento-grid {
    display: grid !important;
    grid-template-columns: 2.1fr 1fr !important;
    gap: 16px !important;
    align-items: stretch !important;
}

.hero-bento-main {
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 12px 30px -6px rgba(0, 0, 0, 0.1) !important;
    background: transparent !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

#owl_home_img,
.homeslide_lg {
    border-radius: 20px !important;
    overflow: hidden !important;
    height: 100% !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

#owl_home_img .owl-stage-outer,
#owl_home_img .owl-stage,
#owl_home_img .owl-item {
    height: 100% !important;
}

.hero-slide-item {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 20px !important;
    height: 100% !important;
    display: block !important;
}

.hero-slide-img {
    border-radius: 20px !important;
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.hero-slide-item:hover .hero-slide-img {
    transform: scale(1.02) !important;
}

/* Dots positioned over image (No extra bottom margin) */
#owl_home_img .owl-dots {
    position: absolute !important;
    bottom: 12px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 10 !important;
    display: flex !important;
    gap: 6px !important;
}

#owl_home_img .owl-dots .owl-dot span {
    width: 8px !important;
    height: 8px !important;
    margin: 0 !important;
    background: rgba(255, 255, 255, 0.6) !important;
    transition: all 0.25s ease !important;
    border-radius: 9999px !important;
}

#owl_home_img .owl-dots .owl-dot.active span {
    width: 24px !important;
    background: #ffffff !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

/* Bento Sidebar Stack (All 3 Banners) */
.hero-bento-sidebar {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    height: 100% !important;
}

.bento-card-featured {
    flex: 1.15 !important;
    min-height: 165px !important;
}

.bento-sub-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    flex: 1 !important;
    min-height: 135px !important;
}

.bento-side-card {
    position: relative !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.bento-side-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 16px 32px -6px rgba(34, 197, 94, 0.24) !important;
    border-color: var(--color-lime-300) !important;
}

.bento-side-link {
    display: block !important;
    height: 100% !important;
    width: 100% !important;
    position: relative !important;
    text-decoration: none !important;
}

.bento-side-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 18px !important;
    display: block !important;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.bento-side-card:hover .bento-side-img {
    transform: scale(1.06) !important;
}

.bento-card-badge {
    position: absolute !important;
    bottom: 12px !important;
    right: 12px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    padding: 4px 12px !important;
    border-radius: var(--radius-pill) !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    color: var(--color-lime-dark) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
    transition: all 0.2s ease !important;
}

.bento-side-card:hover .bento-card-badge {
    background: var(--color-lime-primary) !important;
    color: #ffffff !important;
    transform: scale(1.04) !important;
}

.bento-card-badge-mini {
    position: absolute !important;
    bottom: 8px !important;
    right: 8px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    padding: 2px 8px !important;
    border-radius: var(--radius-pill) !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    color: var(--color-lime-dark) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}

.bento-card-shimmer {
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 60% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent) !important;
    transform: skewX(-25deg) !important;
    pointer-events: none !important;
}

.bento-side-card:hover .bento-card-shimmer {
    left: 140% !important;
    transition: left 0.75s ease-in-out !important;
}

/* Integrated Hero Trust Strip (Glassmorphism 4 Commitments) */
.hero-trust-strip {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
    margin-top: 18px !important;
}

.trust-strip-card {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: rgba(255, 255, 255, 0.22) !important;
    backdrop-filter: blur(3px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(3px) saturate(140%) !important;
    padding: 12px 16px !important;
    border-radius: 18px !important;
    border: 1.5px solid rgba(255, 255, 255, 0.75) !important;
    box-shadow: 0 4px 16px -2px rgba(0, 168, 89, 0.05), inset 0 1px 2px rgba(255, 255, 255, 0.9) !important;
    transition: all 0.25s ease !important;
}

.trust-strip-card:hover {
    transform: translateY(-3px) !important;
    background: rgba(255, 255, 255, 0.65) !important;
    box-shadow: 0 10px 24px rgba(16, 185, 129, 0.15), inset 0 1.5px 2px #ffffff !important;
    border-color: rgba(16, 185, 129, 0.5) !important;
}

.trust-strip-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    background: var(--gradient-lime-mint) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.15rem !important;
    flex-shrink: 0 !important;
    box-shadow: 0 3px 10px rgba(34, 197, 94, 0.22) !important;
}

.trust-strip-info {
    display: flex !important;
    flex-direction: column !important;
    line-height: 1.2 !important;
}

.trust-strip-info b {
    font-size: 0.86rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
}

.trust-strip-info span {
    font-size: 0.72rem !important;
    color: #64748b !important;
    margin-top: 2px !important;
}

/* ==========================================================================
   DRIBBBLE FEATURED CATEGORIES SECTION (7-CARD SYMMETRIC BENTO GRID)
   ========================================================================== */
.home-featured-categories-section {
    padding-top: 14px !important;
    padding-bottom: 20px !important;
}

.featured-categories-card-wrap {
    background: #FFFFFF !important;
    border-radius: 26px !important;
    border: none !important;
    padding: 24px 28px !important;
    box-shadow: 0 15px 40px -10px rgba(0, 166, 81, 0.08) !important;
}

.featured-categories-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 20px !important;
}

.categories-header-left {
    display: flex !important;
    flex-direction: column !important;
}

.categories-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    color: #00A651 !important;
    background: #E6F6ED !important;
    border: none !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 6px !important;
    width: fit-content !important;
}

.categories-main-title {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
}

.categories-view-all-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: #16a34a !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    padding: 6px 14px !important;
    border-radius: var(--radius-pill) !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.categories-view-all-btn:hover {
    background: #16a34a !important;
    color: #ffffff !important;
    border-color: #16a34a !important;
    transform: translateX(2px) !important;
}

.featured-categories-grid {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 14px !important;
}

.featured-cat-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    text-decoration: none !important;
    background: rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.75) !important;
    border-radius: 20px !important;
    padding: 18px 10px 14px 10px !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03), inset 0 1px 1px rgba(255, 255, 255, 0.9) !important;
}

.featured-cat-item:hover {
    transform: translateY(-6px) !important;
    background: rgba(240, 253, 244, 0.75) !important;
    border-color: var(--color-lime-300) !important;
    box-shadow: 0 16px 28px -6px rgba(34, 197, 94, 0.2), inset 0 1px 1px #ffffff !important;
}

.cat-icon-stage {
    width: 76px !important;
    height: 76px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    margin-bottom: 12px !important;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    background: rgba(255, 255, 255, 0.55) !important;
    backdrop-filter: blur(3px) !important;
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04) !important;
}

.featured-cat-item:hover .cat-icon-stage {
    transform: scale(1.1) rotate(4deg) !important;
}

.cat-thumb-img {
    width: 66px !important;
    height: 66px !important;
    object-fit: contain !important;
    border-radius: 50% !important;
    position: relative !important;
    z-index: 2 !important;
}

.cat-title-text {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin: 0 !important;
    line-height: 1.25 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    height: 2.5em !important;
    transition: color 0.2s ease !important;
}

.featured-cat-item:hover .cat-title-text {
    color: var(--color-lime-dark) !important;
}

.cat-hover-pill {
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    color: var(--color-lime-dark) !important;
    opacity: 0 !important;
    transform: translateY(6px) !important;
    transition: all 0.25s ease !important;
    margin-top: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 2px !important;
}

.featured-cat-item:hover .cat-hover-pill {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Category Aura Colors */
.cat-aura-duoc-pham:hover { border-color: #38bdf8 !important; box-shadow: 0 16px 28px -6px rgba(56, 189, 248, 0.25) !important; }
.cat-aura-suc-khoe:hover { border-color: #4ade80 !important; box-shadow: 0 16px 28px -6px rgba(74, 222, 128, 0.25) !important; }
.cat-aura-me-be:hover { border-color: #fb7185 !important; box-shadow: 0 16px 28px -6px rgba(251, 113, 133, 0.25) !important; }
.cat-aura-sac-dep:hover { border-color: #c084fc !important; box-shadow: 0 16px 28px -6px rgba(192, 132, 252, 0.25) !important; }
.cat-aura-ca-nhan:hover { border-color: #f59e0b !important; box-shadow: 0 16px 28px -6px rgba(245, 158, 11, 0.25) !important; }
.cat-aura-dong-duoc:hover { border-color: #10b981 !important; box-shadow: 0 16px 28px -6px rgba(16, 185, 129, 0.25) !important; }
.cat-aura-thiet-bi:hover { border-color: #06b6d4 !important; box-shadow: 0 16px 28px -6px rgba(6, 182, 212, 0.25) !important; }

/* ==========================================================================
   DRIBBBLE HIGH-ENERGY FLASHSALE ARENA (ULTRA VIBRANT HERO STAGE & DEAL CARDS)
   ========================================================================== */
.flashsale-modern-section {
    padding-top: 10px !important;
    padding-bottom: 26px !important;
}

.flashsale-card-container {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.08) 100%) !important;
    backdrop-filter: blur(3px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(3px) saturate(140%) !important;
    border-radius: 26px !important;
    overflow: hidden !important;
    box-shadow: 0 16px 40px -8px rgba(225, 29, 72, 0.15), 0 0 0 1.5px rgba(225, 29, 72, 0.2), inset 0 1.5px 2px rgba(255, 255, 255, 0.9) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.8) !important;
}

/* Fiery Lava Header */
.flash-arena-header {
    background: linear-gradient(135deg, #e11d48 0%, #ea580c 50%, #f59e0b 100%) !important;
    padding: 16px 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
    position: relative !important;
}

.flash-arena-left {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
}

.flash-arena-badge {
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    padding: 5px 12px !important;
    border-radius: var(--radius-pill) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.flash-fire-icon {
    font-size: 1.05rem !important;
    animation: fireShake 1.2s infinite ease-in-out !important;
    display: inline-block !important;
}

@keyframes fireShake {
    0%, 100% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(-8deg) scale(1.1); }
    75% { transform: rotate(8deg) scale(1.1); }
}

.flash-badge-text {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
}

.flash-live-ping {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #fef08a !important;
    box-shadow: 0 0 0 2px rgba(254, 240, 138, 0.4) !important;
    animation: livePulse 1.8s infinite !important;
}

.flash-title-wrap {
    display: flex !important;
    flex-direction: column !important;
}

.flash-arena-title {
    font-size: 1.28rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
}

.flash-arena-sub {
    font-size: 0.74rem !important;
    color: #ffedd5 !important;
    font-weight: 500 !important;
    margin-top: 2px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* Elegant White Glassmorphism Countdown Timer */
.flash-arena-center {
    display: flex !important;
    align-items: center !important;
}

.flash-timer-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(255, 255, 255, 0.22) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
    padding: 4px 12px !important;
    border-radius: var(--radius-pill) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

.timer-lead-text {
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
}

.flash-glass-timer {
    display: inline-flex !important;
    align-items: flex-start !important;
    gap: 5px !important;
}

.glass-timer-block {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.timer-box {
    background: #ffffff !important;
    color: #e11d48 !important;
    width: 32px !important;
    height: 28px !important;
    border-radius: 7px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-variant-numeric: tabular-nums !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.95) !important;
    line-height: 1 !important;
}

.timer-lbl {
    font-size: 0.58rem !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    text-transform: lowercase !important;
    margin-top: 3px !important;
    text-align: center !important;
    line-height: 1 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
    letter-spacing: 0.2px !important;
}

.timer-colon {
    font-weight: 700 !important;
    color: #ffffff !important;
    font-size: 1rem !important;
    margin: 0 1px !important;
    line-height: 28px !important;
    height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

.flash-arena-right {
    display: flex !important;
    align-items: center !important;
    margin-left: auto !important;
}

.flash-arena-cta-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    color: #e11d48 !important;
    background: #ffffff !important;
    border: 1.5px solid #ffffff !important;
    padding: 7px 18px !important;
    border-radius: var(--radius-pill) !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.flash-arena-cta-btn:hover {
    transform: translateX(3px) scale(1.02) !important;
    background: #fff1f2 !important;
    color: #be123c !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2) !important;
}

/* Product Stage Body */
.flash-arena-body {
    background: linear-gradient(180deg, #fff5f5 0%, #ffffff 140px, #ffffff 100%) !important;
    padding: 20px 20px 22px 20px !important;
}

.flashsale-carousel {
    padding: 4px 2px !important;
}

.flashsale-product-item {
    padding: 4px !important;
    height: 100% !important;
    display: flex !important;
}

/* High-Impact Deal Cards */
.modern-deal-card {
    background: #ffffff !important;
    border-radius: 18px !important;
    border: 1.5px solid #ffe4e6 !important;
    padding: 12px !important;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    height: 100% !important;
    width: 100% !important;
    box-shadow: 0 4px 15px rgba(225, 29, 72, 0.06) !important;
}

.modern-deal-card:hover {
    transform: translateY(-8px) !important;
    border-color: #f43f5e !important;
    box-shadow: 0 20px 36px -6px rgba(225, 29, 72, 0.26) !important;
}

.deal-card-link {
    text-decoration: none !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

.deal-img-wrapper {
    background: #f8fafc !important;
    border-radius: 14px !important;
    padding: 8px !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    margin-bottom: 10px !important;
    height: 165px !important;
    min-height: 165px !important;
    max-height: 165px !important;
    flex-shrink: 0 !important;
}

.deal-badge-pill {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    background: linear-gradient(135deg, #ff2a5f 0%, #ff5e36 100%) !important;
    color: #ffffff !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    padding: 3.5px 10px 3.5px 9px !important;
    border-radius: 6px 14px 14px 6px !important;
    z-index: 5 !important;
    box-shadow: 0 4px 12px rgba(255, 42, 95, 0.38), inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
    letter-spacing: -0.01em !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    text-transform: none !important;
}

.deal-thumb-img {
    max-height: 145px !important;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    display: block !important;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.modern-deal-card:hover .deal-thumb-img {
    transform: scale(1.08) !important;
}

.deal-content-body {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

/* Save Money Chip (Instant Urgency Trigger) */
.deal-save-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    color: #be123c !important;
    background: #ffe4e6 !important;
    border: 1px solid #fecdd3 !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
    width: fit-content !important;
    margin-bottom: 6px !important;
}

.deal-unit-tag {
    font-size: 0.68rem !important;
    color: #64748b !important;
    background: #f1f5f9 !important;
    padding: 2px 7px !important;
    border-radius: 4px !important;
    display: inline-block !important;
    width: fit-content !important;
    margin-bottom: 4px !important;
    font-weight: 500 !important;
}

.deal-product-title {
    font-size: 0.86rem !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    line-height: 1.35 !important;
    height: 2.7em !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin: 0 0 6px 0 !important;
    transition: color 0.2s ease !important;
}

.modern-deal-card:hover .deal-product-title {
    color: #e11d48 !important;
}

.deal-price-row {
    display: flex !important;
    align-items: baseline !important;
    gap: 6px !important;
    margin-bottom: 8px !important;
}

.deal-price-current {
    font-size: 1.22rem !important;
    font-weight: 700 !important;
    color: #e11d48 !important;
    letter-spacing: -0.02em !important;
}

.deal-price-old {
    font-size: 0.76rem !important;
    color: #94a3b8 !important;
    text-decoration: line-through !important;
}

/* Sleek Embedded Pill Stock Progress Bar */
.deal-stock-progress {
    height: 17px !important;
    background: #ffe4e6 !important;
    border-radius: var(--radius-pill) !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 6px 0 10px 0 !important;
    border: 1px solid #fecdd3 !important;
}

.deal-progress-fill {
    position: absolute !important;
    top: 0 !important;
    left: auto !important; right: 0 !important;
    height: 100% !important;
    background: linear-gradient(90deg, #f97316 0%, #e11d48 100%) !important;
    border-radius: var(--radius-pill) !important;
    transition: width 0.4s ease !important;
}

.deal-progress-caption {
    position: relative !important;
    z-index: 2 !important;
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    display: flex !important;
    align-items: center !important;
    line-height: 1 !important;
    letter-spacing: 0.2px !important;
}

/* High-Conversion Action Bar */
.deal-actions-row {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: auto !important;
    padding-top: 6px !important;
}

.deal-btn-cart {
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
    background: #fff1f2 !important;
    color: #e11d48 !important;
    border: 1.5px solid #fecdd3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
    font-size: 0.95rem !important;
    padding: 0 !important;
}

.deal-btn-cart:hover {
    background: #e11d48 !important;
    color: #ffffff !important;
    border-color: #e11d48 !important;
    transform: scale(1.06) !important;
}

.deal-btn-buy {
    flex: 1 !important;
    height: 38px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #e11d48 0%, #ea580c 100%) !important;
    color: #ffffff !important;
    border: none !important;
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 4px 12px rgba(225, 29, 72, 0.35) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

.deal-btn-buy:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(225, 29, 72, 0.5) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   DRIBBBLE CATEGORY SHOWCASE (UNIFIED BENTO STAGE & MODERN PRODUCT CARDS)
   ========================================================================== */
.home-boxproduct-container {
    margin-bottom: 28px !important;
}

/* Wide Responsive Banners */
.home-boxproduct-img {
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06) !important;
    margin-bottom: 20px !important;
}

.home-boxproduct-img img {
    border-radius: 20px !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    transition: transform 0.4s ease !important;
}

.home-boxproduct-img:hover img {
    transform: scale(1.015) !important;
}

/* Ambient Category Stage Wrapper */
.home-boxproduct.pagehome-productbox-wrapper {
    background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 180px, #ffffff 100%) !important;
    border-radius: 24px !important;
    border: 1.5px solid #e2e8f0 !important;
    padding: 24px 22px 26px 22px !important;
    box-shadow: 0 12px 36px -8px rgba(15, 23, 42, 0.05) !important;
    margin-bottom: 16px !important;
    overflow: hidden !important;
}

/* Subcategory Icon Pills Nav */
.hboxproduct-navbox {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 16px !important;
    margin: 0 0 18px 0 !important;
    padding: 0 0 18px 0 !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.75) !important;
    flex-wrap: wrap !important;
}

.hboxproduct-navbox-item {
    width: auto !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
}

.hboxproduct-navbox-item a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    padding: 4px 8px !important;
    border-radius: 16px !important;
}

.hboxproduct-navbox-item a:hover {
    transform: translateY(-4px) !important;
}

.hboxproduct-navbox-item-img {
    width: 66px !important;
    height: 66px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    padding: 6px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07) !important;
    border: 2.5px solid #ffffff !important;
    object-fit: contain !important;
    transition: all 0.3s ease !important;
}

.hboxproduct-navbox-item a:hover .hboxproduct-navbox-item-img {
    border-color: #22c55e !important;
    box-shadow: 0 8px 22px rgba(34, 197, 94, 0.28) !important;
    transform: scale(1.08) !important;
}

.hboxproduct-navbox-item-title {
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: #334155 !important;
    margin: 8px 0 0 0 !important;
    text-align: center !important;
    max-width: 105px !important;
    line-height: 1.3 !important;
    transition: color 0.2s ease !important;
}

.hboxproduct-navbox-item a:hover .hboxproduct-navbox-item-title {
    color: #16a34a !important;
}

/* Category Title with Decorative Gradient Accents */
.hboxproduct__title {
    font-size: 1.32rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    text-align: center !important;
    margin: 6px 0 20px 0 !important;
    padding: 0 !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    letter-spacing: -0.01em !important;
}

.hboxproduct__title::before,
.hboxproduct__title::after {
    content: "" !important;
    display: inline-block !important;
    width: 42px !important;
    height: 2.5px !important;
    border-radius: var(--radius-pill) !important;
}

.hboxproduct__title::before {
    background: linear-gradient(90deg, transparent, #22c55e) !important;
}

.hboxproduct__title::after {
    background: linear-gradient(90deg, #22c55e, transparent) !important;
}

.hboxproduct__title:empty,
.hboxproduct__title:not(:has(span:not(:empty))) {
    display: none !important;
}

.hboxproduct__title span {
    color: #0f172a !important;
}

/* Unified Modern Product Card in Category Carousels & Bento Stages */
.probox,
.bento-master-card .probox,
.home-boxproduct .probox {
    background: #F8FAFC !important;
    border-radius: 18px !important;
    border: none !important;
    padding: 12px !important;
    box-shadow: none !important;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    height: 100% !important;
    box-sizing: border-box !important;
}

.probox:hover,
.bento-master-card .probox:hover,
.home-boxproduct .probox:hover {
    transform: translateY(-6px) !important;
    background: #FFFFFF !important;
    box-shadow: 0 16px 32px -6px rgba(0, 166, 81, 0.18) !important;
}

.probox .box,
.bento-master-card .probox .box,
.home-boxproduct .probox .box {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    text-decoration: none !important;
}

.probox__img,
.bento-master-card .probox__img,
.home-boxproduct .probox__img {
    background: #f8fafc !important;
    border-radius: 14px !important;
    padding: 8px !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    margin-bottom: 10px !important;
    height: 165px !important;
    min-height: 165px !important;
    max-height: 165px !important;
}

.probox__img > figure,
.bento-master-card .probox__img > figure,
.home-boxproduct .probox__img > figure {
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
}

.probox__img img,
.bento-master-card .probox__img img,
.home-boxproduct .probox__img img {
    max-height: 145px !important;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    margin: 0 auto !important;
    display: block !important;
    mix-blend-mode: multiply !important;
}

.probox:hover .probox__img img,
.bento-master-card .probox:hover .probox__img img,
.home-boxproduct .probox:hover .probox__img img {
    transform: scale(1.08) !important;
}

.percent_tag,
.bento-master-card .percent_tag,
.home-boxproduct .percent_tag {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    background: linear-gradient(135deg, #ff2a5f 0%, #ff5e36 100%) !important;
    color: #ffffff !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    padding: 3.5px 10px 3.5px 9px !important;
    border-radius: 6px 14px 14px 6px !important;
    z-index: 5 !important;
    box-shadow: 0 4px 12px rgba(255, 42, 95, 0.38), inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
    letter-spacing: -0.01em !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    text-transform: none !important;
}

.percent_tag i,
.bento-master-card .percent_tag i,
.home-boxproduct .percent_tag i {
    font-size: 0.68rem !important;
    color: #fffb00 !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2)) !important;
}

.probox__des,
.bento-master-card .probox__des,
.home-boxproduct .probox__des {
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

.probox__unit,
.bento-master-card .probox__unit,
.home-boxproduct .probox__unit {
    font-size: 0.72rem !important;
    color: #64748b !important;
    background: #f1f5f9 !important;
    border: none !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
    display: inline-block !important;
    width: fit-content !important;
    margin: 2px 0 6px 0 !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
}

.probox__title,
.bento-master-card .probox__title,
.home-boxproduct .probox__title {
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    line-height: 1.35 !important;
    height: 2.7em !important;
    min-height: 2.7em !important;
    max-height: 2.7em !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin: 0 0 6px 0 !important;
    transition: color 0.2s ease !important;
}

.probox:hover .probox__title,
.bento-master-card .probox:hover .probox__title,
.home-boxproduct .probox:hover .probox__title {
    color: #16a34a !important;
}

.probox__pricebox,
.bento-master-card .probox__pricebox,
.home-boxproduct .probox__pricebox {
    margin-bottom: 6px !important;
}

.probox__price,
.bento-master-card .probox__price,
.home-boxproduct .probox__price {
    display: flex !important;
    align-items: baseline !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.probox__price b.price,
.probox__price span.price,
.probox__price .price,
.probox .price,
.bento-master-card .probox__price b.price,
.home-boxproduct .probox__price b.price {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: #16a34a !important;
    letter-spacing: -0.02em !important;
}

.probox__price s,
.probox__price span.old-price,
.probox__price .old-price,
.probox s,
.probox .old-price,
.bento-master-card .probox__price s,
.home-boxproduct .probox__price s {
    font-size: 0.82rem !important;
    color: #94a3b8 !important;
    text-decoration: line-through !important;
    font-weight: 400 !important;
    margin-left: 4px !important;
}

.probox__rating,
.bento-master-card .probox__rating,
.home-boxproduct .probox__rating {
    display: flex !important;
    align-items: center !important;
    font-size: 0.72rem !important;
    color: #f59e0b !important;
    margin: 2px 0 10px 0 !important;
    line-height: 1 !important;
    flex-wrap: wrap !important;
    gap: 2px !important;
}

.probox__rating .sold-count,
.bento-master-card .probox__rating .sold-count,
.home-boxproduct .probox__rating .sold-count {
    font-size: 0.72rem !important;
    color: #64748b !important;
    font-weight: 500 !important;
    margin-left: 6px !important;
}

/* Horizontal Split Action Buttons */
.probox__actions,
.bento-master-card .probox__actions,
.home-boxproduct .probox__actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: auto !important;
    padding-top: 6px !important;
}

.probox__actions .action-addtocart,
.probox__actions .btn-pro-cart,
.bento-master-card .probox__actions .action-addtocart,
.bento-master-card .probox__actions .btn-pro-cart,
.home-boxproduct .probox__actions .action-addtocart,
.home-boxproduct .probox__actions .btn-pro-cart {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 12px !important;
    background: #f0fdf4 !important;
    color: #16a34a !important;
    border: 1.5px solid #86efac !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    flex-shrink: 0 !important;
    font-size: 0.95rem !important;
    padding: 0 !important;
    box-shadow: 0 2px 6px rgba(34, 197, 94, 0.08) !important;
}

.probox__actions .action-addtocart:hover,
.probox__actions .btn-pro-cart:hover,
.bento-master-card .probox__actions .action-addtocart:hover,
.bento-master-card .probox__actions .btn-pro-cart:hover,
.home-boxproduct .probox__actions .action-addtocart:hover,
.home-boxproduct .probox__actions .btn-pro-cart:hover {
    background: #00A651 !important;
    color: #ffffff !important;
    border-color: #00A651 !important;
    transform: scale(1.08) !important;
    box-shadow: 0 4px 12px rgba(0, 166, 81, 0.3) !important;
}

.probox__actions .js-buy-now,
.probox__actions .btn-pro-buy,
.bento-master-card .probox__actions .js-buy-now,
.bento-master-card .probox__actions .btn-pro-buy,
.home-boxproduct .probox__actions .js-buy-now,
.home-boxproduct .probox__actions .btn-pro-buy {
    flex: 1 !important;
    height: 38px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #00A651 0%, #00823F 100%) !important;
    color: #ffffff !important;
    border: none !important;
    font-size: 0.84rem !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 12px rgba(0, 166, 81, 0.25) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    white-space: nowrap !important;
}

.probox__actions .js-buy-now:hover,
.probox__actions .btn-pro-buy:hover,
.bento-master-card .probox__actions .js-buy-now:hover,
.bento-master-card .probox__actions .btn-pro-buy:hover,
.home-boxproduct .probox__actions .js-buy-now:hover,
.home-boxproduct .probox__actions .btn-pro-buy:hover {
    transform: translateY(-2px) !important;
    background: linear-gradient(135deg, #00D06C 0%, #00A651 100%) !important;
    box-shadow: 0 6px 16px rgba(0, 166, 81, 0.35) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   BENTO FAMILY WELLNESS HUB (TỦ THUỐC SỨC KHỎE GIA ĐÌNH TINH TẾ)
   ========================================================================== */
.family-hub-section {
    margin-bottom: 36px !important;
}

.family-hub-card {
    background: #FFFFFF !important;
    border-radius: 26px !important;
    border: none !important;
    padding: 28px 24px !important;
    box-shadow: 0 15px 40px -10px rgba(0, 166, 81, 0.08) !important;
}

.family-hub-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
}

.family-hub-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    color: #00A651 !important;
    background: #E6F6ED !important;
    border: none !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    margin-bottom: 6px !important;
}

.family-hub-tag i {
    color: #00A651 !important;
    font-size: 0.8rem !important;
}

.family-hub-title {
    font-size: 1.45rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    letter-spacing: -0.01em !important;
    margin: 4px 0 0 0 !important;
}

.family-hub-sub {
    font-size: 0.82rem !important;
    color: #64748b !important;
    margin: 4px 0 0 0 !important;
}

/* Crystal Pill Tabs */
.family-hub-tabs {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    margin-bottom: 24px !important;
    padding-bottom: 6px !important;
}

.family-tab-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(255, 255, 255, 0.45) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
    color: #334155 !important;
    border: 1.5px solid rgba(255, 255, 255, 0.85) !important;
    border-radius: var(--radius-pill) !important;
    padding: 9px 18px !important;
    font-size: 0.84rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02), inset 0 1px 1px rgba(255, 255, 255, 0.9) !important;
}

.family-tab-btn:hover {
    background: #f0fdf4 !important;
    color: #00A651 !important;
    border-color: #86efac !important;
    transform: translateY(-2px) !important;
}

.family-tab-btn.active {
    background: linear-gradient(135deg, #00A651 0%, #00823F 100%) !important;
    color: #ffffff !important;
    border-color: #00A651 !important;
    box-shadow: 0 6px 18px rgba(0, 166, 81, 0.3) !important;
    transform: translateY(-2px) !important;
}

.family-tab-btn.active span.tab-sub {
    color: #d1fae5 !important;
}

/* Product Stage Grid */
.family-hub-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
    align-items: stretch !important;
}

.family-hub-panel {
    display: contents !important;
}

.family-hub-panel.d-none {
    display: none !important;
}

.family-hub-grid .probox {
    background: #F8FAFC !important;
    border: none !important;
    border-radius: 20px !important;
    padding: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 100% !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: none !important;
}

.family-hub-grid .probox:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 24px rgba(0, 166, 81, 0.12) !important;
    background: #FFFFFF !important;
}

.family-hub-grid .probox__img {
    height: 150px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 10px !important;
    position: relative !important;
}

.family-hub-grid .probox__img img {
    max-height: 140px !important;
    max-width: 100% !important;
    object-fit: contain !important;
    transition: transform 0.3s ease !important;
    mix-blend-mode: multiply !important;
}

.family-hub-grid .probox:hover .probox__img img {
    transform: scale(1.05) !important;
}

/* Consultation Footbar */
.family-hub-footbar {
    margin-top: 22px !important;
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%) !important;
    border: 1px solid #bbf7d0 !important;
    border-radius: 16px !important;
    padding: 12px 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

.footbar-text {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: #166534 !important;
}

.footbar-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #16a34a !important;
    color: #ffffff !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    padding: 6px 16px !important;
    border-radius: var(--radius-pill) !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.footbar-btn:hover {
    background: #15803d !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

@media (max-width: 991px) {
    .family-hub-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .family-hub-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        gap: 6px !important;
        padding-bottom: 4px !important;
        margin-bottom: 16px !important;
        width: 100% !important;
    }
    .family-hub-tabs::-webkit-scrollbar {
        display: none !important;
    }
    .family-tab-btn {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        justify-content: center !important;
        white-space: nowrap !important;
        padding: 8px 6px !important;
        font-size: 0.78rem !important;
        gap: 5px !important;
    }
}

@media (max-width: 576px) {
    .family-hub-grid {
        grid-template-columns: 1fr !important;
    }
    .family-hub-card {
        padding: 16px 12px !important;
        border-radius: 20px !important;
    }
    .family-tab-btn {
        padding: 7px 4px !important;
        font-size: 0.75rem !important;
    }
}

@media (max-width: 375px) {
    .family-tab-btn {
        padding: 6px 3px !important;
        font-size: 0.72rem !important;
        gap: 3px !important;
    }
}

/* ==========================================================================
   SYMPTOM-TO-COMBO SOLUTION MATRIX (PHÁC ĐỒ PHỐI HỢP TOÀN DIỆN - CAO CẤP)
   ========================================================================== */
.symptom-combo-section {
    margin-bottom: 36px !important;
}

.symptom-combo-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.08) 100%) !important;
    backdrop-filter: blur(3px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(3px) saturate(140%) !important;
    border-radius: 26px !important;
    border: 1.5px solid rgba(255, 255, 255, 0.8) !important;
    padding: 28px 24px !important;
    box-shadow: 0 10px 30px -4px rgba(0, 168, 89, 0.06), 0 0 0 1px rgba(16, 185, 129, 0.15), inset 0 1.5px 2px rgba(255, 255, 255, 0.9), inset 0 -1px 2px rgba(16, 185, 129, 0.1) !important;
}

.combo-header-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-bottom: 24px !important;
}

.combo-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    color: #15803d !important;
    background: #f0fdf4 !important;
    border: 1px solid #bbf7d0 !important;
    padding: 3px 10px !important;
    border-radius: 8px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    margin-bottom: 6px !important;
    box-shadow: 0 1px 3px rgba(22, 163, 74, 0.08) !important;
}

.combo-tag i {
    color: #16a34a !important;
    font-size: 0.8rem !important;
}

.combo-title {
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    letter-spacing: -0.01em !important;
    margin: 4px 0 0 0 !important;
}

.combo-flow-wrapper {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr auto 1fr 280px !important;
    align-items: stretch !important;
    gap: 14px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.combo-flow-card {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 18px !important;
    padding: 16px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
}

.combo-flow-card:hover {
    transform: translateY(-4px) !important;
    border-color: #86efac !important;
    box-shadow: 0 10px 24px rgba(34, 197, 94, 0.12) !important;
}

.combo-step-badge {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    color: #15803d !important;
    background: #f0fdf4 !important;
    border: 1px solid #bbf7d0 !important;
    padding: 3px 10px !important;
    border-radius: 8px !important;
    margin-bottom: 12px !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    box-shadow: 0 1px 2px rgba(22, 163, 74, 0.06) !important;
}

.combo-med-image-box {
    width: 100% !important;
    height: 120px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 12px !important;
    background: #f1f5f9 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    padding: 0 !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
    position: relative !important;
}

.combo-med-image-box img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center !important;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.combo-flow-card:hover .combo-med-image-box img {
    transform: scale(1.08) !important;
}

.combo-med-name {
    font-size: 0.86rem !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    line-height: 1.3 !important;
    margin-bottom: 4px !important;
}

.combo-med-desc {
    font-size: 0.72rem !important;
    color: #64748b !important;
    line-height: 1.35 !important;
    margin: 0 !important;
}

/* Connector Plus Icon */
.combo-flow-plus {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.combo-plus-circle {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    border: 1.5px solid #86efac !important;
    color: #16a34a !important;
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.18), inset 0 1px 1px #ffffff !important;
    transition: transform 0.2s ease !important;
}

/* Right Summary Package Card */
.combo-summary-card {
    background: linear-gradient(145deg, rgba(240, 253, 244, 0.9) 0%, rgba(220, 252, 231, 0.75) 100%) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    border: 1.5px solid #86efac !important;
    border-radius: 18px !important;
    padding: 18px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-align: center !important;
    box-shadow: 0 8px 24px rgba(22, 163, 74, 0.12), inset 0 1px 2px #ffffff !important;
}

.combo-package-tag {
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    color: #047857 !important;
    background: #ecfdf5 !important;
    padding: 3px 10px !important;
    border-radius: 9999px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    margin-bottom: 6px !important;
}

.combo-price-group {
    margin: 6px 0 12px 0 !important;
}

.combo-price-old {
    font-size: 0.82rem !important;
    color: #94a3b8 !important;
    text-decoration: line-through !important;
    display: block !important;
}

.combo-price-deal {
    font-size: 1.45rem !important;
    font-weight: 700 !important;
    color: #15803d !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    line-height: 1.1 !important;
    margin-top: 2px !important;
}

.combo-save-pill {
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    background: #ef4444 !important;
    padding: 2px 7px !important;
    border-radius: var(--radius-pill) !important;
}

.combo-btn-buy {
    width: 100% !important;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    color: #ffffff !important;
    font-size: 0.84rem !important;
    font-weight: 600 !important;
    padding: 10px 16px !important;
    border-radius: var(--radius-pill) !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.3) !important;
    text-decoration: none !important;
}

.combo-btn-buy:hover {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(34, 197, 94, 0.4) !important;
}

.combo-perk-note {
    font-size: 0.68rem !important;
    color: #166534 !important;
    font-weight: 500 !important;
    margin-top: 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

@media (max-width: 991px) {
    .combo-flow-wrapper {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .combo-flow-plus {
        display: none !important;
    }
}

@media (max-width: 576px) {
    .symptom-combo-card {
        padding: 16px 12px !important;
        border-radius: 18px !important;
    }
    .combo-title {
        font-size: 1.15rem !important;
    }
    .combo-flow-card {
        padding: 12px 10px !important;
        border-radius: 14px !important;
    }
    .combo-summary-card {
        padding: 14px 12px !important;
        border-radius: 14px !important;
    }
    .combo-price-deal {
        font-size: 1.25rem !important;
    }
    .combo-btn-buy {
        padding: 9px 14px !important;
        font-size: 0.82rem !important;
    }
}

/* ==========================================================================
   DRIBBBLE MODERN MAGAZINE: NEWS & HEALTH INSIGHTS SECTION
   ========================================================================== */
.home-news-section {
    margin-bottom: 2.5rem !important;
}

.home-news-wrapper {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.08) 100%) !important;
    backdrop-filter: blur(3px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(3px) saturate(140%) !important;
    border-radius: 26px !important;
    border: 1.5px solid rgba(255, 255, 255, 0.8) !important;
    padding: 28px 24px !important;
    box-shadow: 0 10px 30px -4px rgba(0, 168, 89, 0.06), 0 0 0 1px rgba(16, 185, 129, 0.15), inset 0 1.5px 2px rgba(255, 255, 255, 0.9), inset 0 -1px 2px rgba(16, 185, 129, 0.1) !important;
}

.news-head-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    color: #15803d !important;
    background: #f0fdf4 !important;
    border: 1px solid #bbf7d0 !important;
    padding: 3px 10px !important;
    border-radius: 8px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    margin-bottom: 6px !important;
    box-shadow: 0 1px 3px rgba(22, 163, 74, 0.08) !important;
}

.news-head-tag i {
    color: #16a34a !important;
    font-size: 0.8rem !important;
}

.home-news-title {
    font-size: 1.32rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    letter-spacing: -0.02em !important;
}

.btn-news-all {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: #16a34a !important;
    background: #f0fdf4 !important;
    border: 1.5px solid #bbf7d0 !important;
    padding: 7px 16px !important;
    border-radius: var(--radius-pill) !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
}

.btn-news-all:hover {
    background: #22c55e !important;
    color: #ffffff !important;
    border-color: #22c55e !important;
    transform: translateX(3px) !important;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.25) !important;
}

.modern-news-card {
    background: #ffffff !important;
    border-radius: 18px !important;
    border: 1.5px solid #f1f5f9 !important;
    padding: 12px !important;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03) !important;
    display: flex !important;
    flex-direction: column !important;
}

.modern-news-card:hover {
    transform: translateY(-6px) !important;
    border-color: #86efac !important;
    box-shadow: 0 16px 32px -6px rgba(34, 197, 94, 0.2) !important;
}

.news-card-link {
    text-decoration: none !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.news-card-thumb {
    position: relative !important;
    height: 175px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background: #f8fafc !important;
    margin-bottom: 12px !important;
}

.news-thumb-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.modern-news-card:hover .news-thumb-img {
    transform: scale(1.08) !important;
}

.news-cat-badge {
    position: absolute !important;
    bottom: 10px !important;
    left: 10px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    color: #15803d !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    padding: 3px 10px !important;
    border-radius: var(--radius-pill) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
    z-index: 2 !important;
}

.news-card-body {
    padding: 2px 4px 6px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

.news-meta-row {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 6px !important;
}

.news-date {
    font-size: 0.72rem !important;
    color: #94a3b8 !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.news-title {
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    line-height: 1.4 !important;
    height: 2.8em !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin: 0 0 6px 0 !important;
    transition: color 0.2s ease !important;
}

.modern-news-card:hover .news-title {
    color: #16a34a !important;
}

.news-excerpt {
    font-size: 0.78rem !important;
    color: #64748b !important;
    line-height: 1.4 !important;
    height: 2.8em !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin: 0 0 12px 0 !important;
}

.news-read-more {
    margin-top: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: #16a34a !important;
    transition: gap 0.2s ease, color 0.2s ease !important;
}

.modern-news-card:hover .news-read-more {
    gap: 8px !important;
    color: #22c55e !important;
}

/* ==========================================================================
   DRIBBBLE GLASS STAGE: HEALTHCARE ECOSYSTEM & PARTNER SECTION
   ========================================================================== */
.partner-ecosystem-container {
    margin-bottom: 3.5rem !important;
}

.partner-ecosystem-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.08) 100%) !important;
    backdrop-filter: blur(3px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(3px) saturate(140%) !important;
    border-radius: 26px !important;
    border: 1.5px solid rgba(255, 255, 255, 0.8) !important;
    padding: 32px 28px !important;
    box-shadow: 0 10px 30px -4px rgba(0, 168, 89, 0.06), 0 0 0 1px rgba(16, 185, 129, 0.15), inset 0 1.5px 2px rgba(255, 255, 255, 0.9), inset 0 -1px 2px rgba(16, 185, 129, 0.1) !important;
}

.partner-head-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    color: #15803d !important;
    background: #f0fdf4 !important;
    border: 1px solid #bbf7d0 !important;
    padding: 3px 10px !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(22, 163, 74, 0.08) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    margin-bottom: 6px !important;
}

.partner-head-pill i {
    color: #16a34a !important;
    font-size: 0.8rem !important;
}

.partner-head-title {
    font-size: 1.45rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    letter-spacing: -0.01em !important;
}

.partner-head-sub {
    font-size: 0.88rem !important;
    color: #64748b !important;
    font-weight: 400 !important;
}

.partner-brand-item {
    padding: 6px 4px !important;
}

.partner-brand-box {
    background: #f8fafc !important;
    border-radius: 16px !important;
    border: 1px solid #e2e8f0 !important;
    padding: 16px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    height: 110px !important;
    text-decoration: none !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
}

.partner-brand-box:hover {
    transform: translateY(-4px) !important;
    background: #ffffff !important;
    border-color: #16a34a !important;
    box-shadow: 0 10px 24px rgba(22, 163, 74, 0.12) !important;
}

.partner-logo-wrap {
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}

.partner-logo-img {
    max-height: 42px !important;
    max-width: 125px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.04)) !important;
    transition: transform 0.25s ease !important;
}

.partner-brand-box:hover .partner-logo-img {
    transform: scale(1.05) !important;
}


.partner-brand-label {
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    color: #334155 !important;
    margin-top: 8px !important;
    text-align: center !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1.25 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    max-width: 100% !important;
    transition: color 0.2s ease !important;
}

.partner-brand-box:hover .partner-brand-label {
    color: #16a34a !important;
}

/* ==========================================================================
   DRIBBBLE MODERN FOOTER DESIGN SYSTEM
   ========================================================================== */
.modern-footer {
    background: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
    position: relative !important;
}

.footer-top-accent {
    height: 4px !important;
    background: linear-gradient(90deg, #00A651 0%, #00823F 50%, #00D06C 100%) !important;
    width: 100% !important;
}

.footer-widget-title {
    font-size: 1.02rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin-bottom: 16px !important;
    display: flex !important;
    align-items: center !important;
    letter-spacing: -0.01em !important;
}

.footer-sub-title {
    font-size: 0.84rem !important;
    font-weight: 600 !important;
    color: #334155 !important;
}

.footer-action-pills {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
}

.footer-action-pill {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 14px !important;
    padding: 10px 12px !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
}

.footer-action-pill:hover {
    background: #f0fdf4 !important;
    border-color: #86efac !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.15) !important;
}

.footer-action-pill .pill-icon {
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
    background: #dcfce7 !important;
    color: #00A651 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    flex-shrink: 0 !important;
    transition: transform 0.25s ease !important;
}

.footer-action-pill:hover .pill-icon {
    transform: scale(1.1) !important;
}

.footer-action-pill .pill-text {
    display: flex !important;
    flex-direction: column !important;
    line-height: 1.2 !important;
}

.footer-action-pill .pill-sub {
    font-size: 0.7rem !important;
    color: #64748b !important;
    font-weight: 500 !important;
}

.footer-action-pill b {
    font-size: 0.82rem !important;
    color: #1e293b !important;
    font-weight: 700 !important;
}

.footer-map-card {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03) !important;
}

.map-card-header {
    background: #f8fafc !important;
    padding: 8px 12px !important;
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    color: #475569 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    display: flex !important;
    align-items: center !important;
}

.map-frame-wrapper iframe {
    width: 100% !important;
    border: none !important;
    display: block !important;
}

.footer_ul, .footer-links-ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.footer_ul li a, .footer-links-ul li a {
    color: #475569 !important;
    font-size: 0.84rem !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.2s ease !important;
    line-height: 1.4 !important;
}

.footer_ul li a:hover, .footer-links-ul li a:hover {
    color: #16a34a !important;
    transform: translateX(4px) !important;
}

.footer-links-ul li a i {
    font-size: 0.62rem !important;
    color: #22c55e !important;
    opacity: 0.8 !important;
    transition: transform 0.2s ease !important;
}

.footer-links-ul li a:hover i {
    transform: translateX(2px) !important;
    opacity: 1 !important;
}

.app-download-btn {
    display: inline-block !important;
    transition: transform 0.25s ease !important;
}

.app-download-btn:hover {
    transform: translateY(-2px) !important;
}

.app-badge-img {
    height: 32px !important;
    width: auto !important;
    border-radius: 6px !important;
}

.footer-payment-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
}

.payment-badge-box {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 4px 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 36px !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
}

.payment-badge-box:hover {
    border-color: #86efac !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 10px rgba(34, 197, 94, 0.15) !important;
}

.payment-badge-img {
    max-height: 22px !important;
    max-width: 58px !important;
    object-fit: contain !important;
}

.footer-social-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

.social-circle-btn {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 15px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.social-circle-btn:hover {
    transform: translateY(-3px) scale(1.1) !important;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2) !important;
    color: #ffffff !important;
}

.social-zalo {
    background: #0068ff !important;
}

.social-zalo img {
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
}

.social-fb {
    background: #1877f2 !important;
}

.social-yt {
    background: #ff0000 !important;
}

.social-ig {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
}

.social-tt {
    background: #000000 !important;
}

.cert-badge-link {
    display: inline-block !important;
    transition: transform 0.25s ease !important;
}

.cert-badge-link:hover {
    transform: scale(1.05) !important;
}

.cert-img {
    height: 38px !important;
    width: auto !important;
    max-width: 120px !important;
    object-fit: contain !important;
}

.footer-corporate-card {
    background: #f8fafc !important;
    border-radius: 20px !important;
    border: 1.5px solid #e2e8f0 !important;
    padding: 24px 20px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02) !important;
}

.company-brand-heading {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #16a34a !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
    margin-bottom: 8px !important;
}

.company-detail-item {
    font-size: 0.84rem !important;
    color: #475569 !important;
    line-height: 1.5 !important;
}

.footer-hotline-capsule {
    display: inline-flex !important;
    align-items: center !important;
    background: #ffffff !important;
    border: 1.5px solid #86efac !important;
    padding: 6px 16px !important;
    border-radius: var(--radius-pill) !important;
    font-size: 0.86rem !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.15) !important;
}

.hotline-phone-number {
    color: #16a34a !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    margin-left: 6px !important;
    font-size: 0.95rem !important;
    transition: color 0.2s ease !important;
}

.hotline-phone-number:hover {
    color: #15803d !important;
    text-decoration: underline !important;
}

.footer-copyright-divider {
    border-top: 1px solid #e2e8f0 !important;
}

.copyright-text {
    font-size: 0.78rem !important;
    color: #64748b !important;
    line-height: 1.4 !important;
}

/* Elegant View All Button */
.btn-outline-viewall {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 0.86rem !important;
    font-weight: 600 !important;
    color: #16a34a !important;
    background: #ffffff !important;
    border: 1.5px solid #86efac !important;
    padding: 9px 26px !important;
    border-radius: var(--radius-pill) !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 3px 10px rgba(34, 197, 94, 0.08) !important;
    margin-top: 4px !important;
}

.btn-outline-viewall:hover {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3) !important;
}

/* ==========================================================================
   CENTER GROUP: SEARCH BAR
   ========================================================================== */
.header-center-search {
    flex: 1 1 300px !important;
    max-width: 440px !important;
    margin: 0 !important;
}

.modern-search-wrapper {
    width: 100% !important;
    position: relative !important;
}

.modern-search-form {
    display: flex !important;
    align-items: center !important;
    background: #f8fafc !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: var(--radius-pill) !important;
    padding: 2px 5px 2px 14px !important;
    transition: all 0.25s ease !important;
    height: 40px !important;
    width: 100% !important;
}

.modern-search-form:focus-within {
    background: #ffffff !important;
    border-color: var(--color-lime-primary) !important;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18) !important;
}

.modern-search-prefix-icon {
    color: var(--color-lime-dark) !important;
    font-size: 0.95rem !important;
    margin-right: 8px !important;
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

.modern-search-input {
    flex: 1 !important;
    border: none !important;
    background: transparent !important;
    outline: none !important;
    font-size: 0.86rem !important;
    color: #1e293b !important;
    font-weight: 500 !important;
    padding: 0 4px !important;
    height: 100% !important;
    min-width: 0 !important;
}

.modern-search-input::placeholder {
    color: #94a3b8 !important;
    font-weight: 400 !important;
}

.modern-search-actions {
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    flex-shrink: 0 !important;
}

.search-tool-btn {
    border: none !important;
    background: #ffffff !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #64748b !important;
    cursor: pointer !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.2s ease !important;
    padding: 0 !important;
}

.search-tool-btn:hover {
    background: var(--color-lime-50) !important;
    color: var(--color-lime-dark) !important;
}

.search-submit-btn {
    background: var(--gradient-lime-glow) !important;
    color: #ffffff !important;
    border: none !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: 0 2px 6px rgba(34, 197, 94, 0.35) !important;
    transition: all 0.2s ease !important;
    padding: 0 !important;
}

.search-submit-btn:hover {
    transform: scale(1.05) !important;
}

/* ==========================================================================
   RIGHT GROUP: ACTIONS (FLASH SALE, HOTLINE, ORDER, CART, ACCOUNT)
   ========================================================================== */
.header-right-actions {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
    flex-wrap: nowrap !important;
}

/* Flash Sale Pill */
.header-flash-sale-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: var(--gradient-flash-sale) !important;
    color: #ffffff !important;
    padding: 0 10px !important;
    height: 36px !important;
    border-radius: var(--radius-pill) !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 0.78rem !important;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35) !important;
    white-space: nowrap !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.header-flash-sale-pill:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.45) !important;
    color: #ffffff !important;
}

.header-action-card {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    text-decoration: none !important;
    color: #334155 !important;
    padding: 0 6px !important;
    height: 38px !important;
    border-radius: 10px !important;
    transition: all 0.2s ease !important;
    position: relative !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* Tự động co gọn dưới 1400px: Chuyển các thẻ Tư vấn, Tra cứu, Cửa hàng thành nút icon tròn tinh tế */
@media (max-width: 1399.98px) {
    .header-action-card:not(.header-cart-card) .action-card-text {
        display: none !important;
    }
    .header-action-card:not(.header-cart-card) {
        padding: 0 !important;
        width: 36px !important;
        height: 36px !important;
        justify-content: center !important;
        border-radius: 50% !important;
    }
    .header-action-card:not(.header-cart-card) .action-icon-circle {
        border-radius: 50% !important;
        width: 36px !important;
        height: 36px !important;
    }
}

@media (max-width: 1199.98px) {
    .header-cart-card .action-card-text {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .header-flash-sale-pill,
    .header-action-card:not(.header-cart-card) {
        display: none !important;
    }
}

.header-action-card:hover {
    background: var(--color-lime-50) !important;
    color: var(--color-lime-dark) !important;
}

.action-icon-circle {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    background: #f0fdf4 !important;
    border: 1px solid #dcfce7 !important;
    color: #16a34a !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.88rem !important;
    flex-shrink: 0 !important;
    position: relative !important;
}

.action-icon-circle i {
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    font-style: normal !important;
    color: #16a34a !important;
    display: inline-block !important;
    line-height: 1 !important;
}

.action-card-text {
    display: flex !important;
    flex-direction: column !important;
    line-height: 1.15 !important;
}

.action-card-text span {
    font-size: 0.65rem !important;
    color: #64748b !important;
    font-weight: 500 !important;
}

.action-card-text b {
    font-size: 0.8rem !important;
    color: #0f172a !important;
    font-weight: 700 !important;
}

/* Cart Badge */
.cart-badge-pill {
    position: absolute !important;
    top: -4px !important;
    right: -6px !important;
    background: #ef4444 !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    max-width: 24px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 2px 5px rgba(239, 68, 68, 0.4) !important;
    line-height: 1 !important;
    z-index: 10 !important;
    overflow: hidden !important;
}

/* Header Account Pill Button */
.header-account-pill {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: var(--gradient-lime-mint) !important;
    color: #ffffff !important;
    padding: 0 16px !important;
    height: 40px !important;
    border-radius: var(--radius-pill) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 0.82rem !important;
    box-shadow: 0 3px 10px rgba(34, 197, 94, 0.28) !important;
    white-space: nowrap !important;
}

.header-account-pill:hover {
    color: #ffffff !important;
    opacity: 0.95 !important;
}

/* ==========================================================================
   FLOATING SUPPORT WIDGET (DRIBBBLE GLASSMORPHISM FLOATING PILLS)
   ========================================================================== */
.modern-floating-support,
.fixedpage-action {
    position: fixed !important;
    right: 14px !important;
    bottom: 30px !important;
    z-index: 2147483647 !important;
    width: auto !important;
    pointer-events: none !important;
}

.modern-floating-support *,
.fixedpage-action * {
    pointer-events: auto !important;
}

.floating-support-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    position: relative !important;
}

.modern-floating-menu,
.fixedpage-action .dropdown-menu {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 8px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 0 10px 0 !important;
    position: relative !important;
    width: auto !important;
    min-width: unset !important;
    overflow: visible !important;
    list-style: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

.floating-item {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: fit-content !important;
}

.floating-action-pill {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.9) !important;
    border-radius: var(--radius-pill) !important;
    padding: 4px 12px 4px 4px !important;
    text-decoration: none !important;
    box-shadow: 0 6px 18px -2px rgba(0, 0, 0, 0.1) !important;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
    width: fit-content !important;
    white-space: nowrap !important;
    touch-action: manipulation !important;
    will-change: transform;
}

/* Jitter-Free Hover: Only vertical micro-lift on fine-pointer devices */
@media (hover: hover) and (pointer: fine) {
    .floating-action-pill:hover {
        transform: translateY(-2px) !important;
        background: #ffffff !important;
        border-color: #86efac !important;
        box-shadow: 0 10px 24px -2px rgba(34, 197, 94, 0.22) !important;
    }

    .floating-icon-zalo:hover {
        border-color: #0088ff !important;
        box-shadow: 0 10px 24px -2px rgba(0, 136, 255, 0.22) !important;
    }

    .floating-icon-mess:hover {
        border-color: #0099ff !important;
        box-shadow: 0 10px 24px -2px rgba(0, 153, 255, 0.22) !important;
    }

    .floating-icon-hotline:hover {
        border-color: #22c55e !important;
        box-shadow: 0 10px 24px -2px rgba(34, 197, 94, 0.25) !important;
    }
}

/* Touch screen safety: No transforms on touch/drag */
@media (hover: none) or (pointer: coarse) {
    .floating-action-pill:hover,
    .floating-action-pill:active {
        transform: none !important;
    }
}

.floating-pill-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: #f8fafc !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
    flex-shrink: 0 !important;
    padding: 2px !important;
}

.floating-pill-icon img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    border-radius: 50% !important;
}

.floating-pill-info {
    display: flex !important;
    flex-direction: column !important;
    line-height: 1.2 !important;
}

.floating-pill-title {
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    letter-spacing: -0.01em !important;
}

.floating-pill-time {
    font-size: 0.64rem !important;
    color: #64748b !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-weight: 500 !important;
}

.floating-live-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #22c55e !important;
    display: inline-block !important;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25) !important;
    animation: livePulse 2s infinite !important;
}

@keyframes livePulse {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 5px rgba(34, 197, 94, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* Chat Button (Robot Bubble) Glow */
.chat-button {
    box-shadow: 0 10px 25px rgba(16, 185, 129, 0.35) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.chat-button:hover {
    transform: scale(1.08) translateY(-3px) !important;
    box-shadow: 0 15px 35px rgba(16, 185, 129, 0.5) !important;
}

/* Chat button positioning inside support wrapper */
.modern-floating-support .chat-button {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    margin-top: 8px !important;
}

/* ==========================================================================
   COLLAPSIBLE SUPPORT CHANNELS (FAB) FOR MOBILE (< 768px)
   ========================================================================== */
.floating-channels-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.floating-channels-toggle {
    display: none !important;
}

@media (max-width: 768px) {
    .floating-channels-wrapper {
        margin-bottom: 6px;
    }

    .floating-channels-toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #ffffff;
        color: #059669;
        border: 1.5px solid rgba(5, 150, 105, 0.25);
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
        font-size: 17px;
        cursor: pointer;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        touch-action: manipulation;
        position: relative;
        z-index: 25 !important;
        padding: 0;
        outline: none;
    }

    .floating-channels-toggle:active {
        transform: scale(0.92);
    }

    .floating-channels-toggle .icon-toggle-close {
        display: none;
    }

    .floating-channels-wrapper.is-active .floating-channels-toggle {
        background: #064e3b;
        color: #ffffff;
        border-color: #047857;
        box-shadow: 0 4px 16px rgba(6, 78, 59, 0.25);
    }

    .floating-channels-wrapper.is-active .floating-channels-toggle .icon-toggle-open {
        display: none;
    }

    .floating-channels-wrapper.is-active .floating-channels-toggle .icon-toggle-close {
        display: inline-block;
        font-size: 16px;
    }

    /* Modern floating menu collapsed by default on mobile */
    .modern-floating-menu {
        max-height: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(10px) scale(0.95) !important;
        pointer-events: none !important;
        overflow: hidden !important;
        margin: 0 !important;
        gap: 8px !important;
        transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 0.22s ease,
                    transform 0.22s ease,
                    visibility 0.22s ease !important;
    }

    .floating-channels-wrapper.is-active .modern-floating-menu {
        max-height: 250px !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) scale(1) !important;
        pointer-events: auto !important;
        margin-bottom: 8px !important;
    }

    .modern-floating-support .chat-button {
        position: relative !important;
        right: auto !important;
        bottom: auto !important;
        margin-top: 8px !important;
        z-index: 20 !important;
    }
}

/* ==========================================================================
   INTERACTIVE SYMPTOM FAST-FINDER STRIP (QUICK HEALTHCARE DISCOVERY)
   ========================================================================== */
.hero-symptom-strip {
    margin-top: 16px !important;
    background: rgba(255, 255, 255, 0.45) !important;
    backdrop-filter: blur(10px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(140%) !important;
    border-radius: 20px !important;
    border: 1.5px solid rgba(255, 255, 255, 0.8) !important;
    padding: 12px 18px !important;
    box-shadow: 0 6px 20px rgba(0, 168, 89, 0.05), inset 0 1.5px 2px rgba(255, 255, 255, 0.95) !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
}

.symptom-strip-label {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    white-space: nowrap !important;
    padding-right: 14px !important;
    border-right: 2px solid rgba(16, 185, 129, 0.18) !important;
}

.symptom-pills-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    flex: 1 1 auto !important;
}

.symptom-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    color: #334155 !important;
    background: rgba(255, 255, 255, 0.55) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    border: 1px solid rgba(255, 255, 255, 0.85) !important;
    padding: 6px 14px !important;
    border-radius: var(--radius-pill) !important;
    text-decoration: none !important;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
}

.symptom-pill:hover,
.symptom-pill.active {
    background: #f0fdf4 !important;
    color: #15803d !important;
    border-color: #86efac !important;
    box-shadow: 0 3px 10px rgba(22, 163, 74, 0.14) !important;
    transform: translateY(-2px) !important;
    font-weight: 700 !important;
}

@media (max-width: 991px) {
    .hero-symptom-strip {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 12px 14px !important;
    }
    
    .symptom-strip-label {
        border-right: none !important;
        padding-right: 0 !important;
        margin-bottom: 4px !important;
    }
    
    .symptom-pills-wrap {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        width: 100% !important;
        padding-bottom: 4px !important;
        padding-right: 40px !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .symptom-pills-wrap::-webkit-scrollbar {
        display: none !important;
    }
}

/* ==========================================================================
   BENTO SPLIT MASTER SHOWCASE (1 HERO SPOTLIGHT + GRID/CAROUSEL STAGE)
   ========================================================================== */
.bento-master-section {
    margin-bottom: 28px !important;
}

.bento-master-card {
    background: #ffffff !important;
    border-radius: 26px !important;
    border: 1.5px solid #f1f5f9 !important;
    box-shadow: 0 14px 40px -8px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.03) !important;
    padding: 24px !important;
    overflow: hidden !important;
}

.bento-master-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 20px !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

.bento-master-layout {
    display: grid !important;
    grid-template-columns: 270px 1fr !important;
    gap: 16px !important;
    align-items: stretch !important;
}

/* Left Spotlight Hero Card - Balanced Proportions & Elegant Typography */
.bento-spotlight-card {
    background: linear-gradient(145deg, #ffffff 0%, #f0fdf4 100%) !important;
    border-radius: 20px !important;
    border: 1.5px solid #bbf7d0 !important;
    padding: 22px 20px !important;
    color: #0f172a !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.06) !important;
    height: 100% !important;
}

.spotlight-top-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 12px !important;
}

.spotlight-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    color: #15803d !important;
    background: #f0fdf4 !important;
    border: 1px solid #86efac !important;
    padding: 4px 12px !important;
    border-radius: var(--radius-pill) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    width: fit-content !important;
    box-shadow: none !important;
}

.spotlight-3d-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    background: #f0fdf4 !important;
    border: 1.5px solid #bbf7d0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.15rem !important;
    color: #16a34a !important;
    box-shadow: 0 4px 10px rgba(22, 163, 74, 0.1) !important;
}

.spotlight-title {
    font-size: 1.28rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    line-height: 1.25 !important;
    margin: 0 0 6px 0 !important;
    letter-spacing: -0.01em !important;
}

.spotlight-desc {
    font-size: 0.82rem !important;
    color: #475569 !important;
    line-height: 1.45 !important;
    margin-bottom: 14px !important;
}

/* Spotlight Features Vertical Stack - Elegant & No Awkward Line Breaks */
.spotlight-features-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
    margin-bottom: 16px !important;
}

.spotlight-feature-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    padding: 7px 11px !important;
    border-radius: 12px !important;
    transition: all 0.2s ease !important;
}

.spotlight-feature-row:hover {
    background: #ffffff !important;
    transform: translateX(2px) !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.03) !important;
}

.spotlight-feature-icon {
    width: 26px !important;
    height: 26px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.85rem !important;
    flex-shrink: 0 !important;
}

.spotlight-feature-text {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
}

.spotlight-feature-text strong {
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    line-height: 1.2 !important;
}

.spotlight-feature-text span {
    font-size: 0.72rem !important;
    color: #64748b !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Spotlight Color Themes */
.spotlight-tpcn {
    background: linear-gradient(145deg, #ffffff 0%, #fffbeb 100%) !important;
    border-color: #fde68a !important;
    box-shadow: 0 8px 24px rgba(217, 119, 6, 0.06) !important;
}
.badge-amber {
    color: #b45309 !important;
    background: #fffbeb !important;
    border-color: #fcd34d !important;
}
.icon-amber {
    background: #fffbeb !important;
    border-color: #fde68a !important;
    color: #d97706 !important;
    box-shadow: 0 4px 10px rgba(217, 119, 6, 0.1) !important;
}
.btn-amber {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
    box-shadow: 0 4px 14px rgba(217, 119, 6, 0.25) !important;
}
.btn-amber:hover {
    background: linear-gradient(135deg, #b45309 0%, #92400e 100%) !important;
}

.spotlight-emerald {
    background: linear-gradient(145deg, #ffffff 0%, #ecfdf5 100%) !important;
    border-color: #a7f3d0 !important;
    box-shadow: 0 8px 24px rgba(5, 150, 105, 0.06) !important;
}
.badge-emerald {
    color: #047857 !important;
    background: #ecfdf5 !important;
    border-color: #6ee7b7 !important;
}
.icon-emerald {
    background: #ecfdf5 !important;
    border-color: #a7f3d0 !important;
    color: #059669 !important;
    box-shadow: 0 4px 10px rgba(5, 150, 105, 0.1) !important;
}
.btn-emerald {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    box-shadow: 0 4px 14px rgba(5, 150, 105, 0.25) !important;
}
.btn-emerald:hover {
    background: linear-gradient(135deg, #047857 0%, #065f46 100%) !important;
}

.spotlight-blue {
    background: linear-gradient(145deg, #ffffff 0%, #f0f9ff 100%) !important;
    border-color: #bae6fd !important;
    box-shadow: 0 8px 24px rgba(2, 132, 199, 0.06) !important;
}
.badge-blue {
    color: #0369a1 !important;
    background: #f0f9ff !important;
    border-color: #7dd3fc !important;
}
.icon-blue {
    background: #f0f9ff !important;
    border-color: #bae6fd !important;
    color: #0284c7 !important;
    box-shadow: 0 4px 10px rgba(2, 132, 199, 0.1) !important;
}
.btn-blue {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.25) !important;
}
.btn-blue:hover {
    background: linear-gradient(135deg, #0369a1 0%, #075985 100%) !important;
}

.spotlight-rose {
    background: linear-gradient(145deg, #ffffff 0%, #fff1f2 100%) !important;
    border-color: #fecdd3 !important;
    box-shadow: 0 8px 24px rgba(225, 29, 72, 0.06) !important;
}
.badge-rose {
    color: #be123c !important;
    background: #fff1f2 !important;
    border-color: #fda4af !important;
}
.icon-rose {
    background: #fff1f2 !important;
    border-color: #fecdd3 !important;
    color: #e11d48 !important;
    box-shadow: 0 4px 10px rgba(225, 29, 72, 0.1) !important;
}
.btn-rose {
    background: linear-gradient(135deg, #e11d48 0%, #be123c 100%) !important;
    box-shadow: 0 4px 14px rgba(225, 29, 72, 0.25) !important;
}
.btn-rose:hover {
    background: linear-gradient(135deg, #be123c 0%, #9f1239 100%) !important;
}

.spotlight-cta-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    color: #ffffff !important;
    font-size: 0.84rem !important;
    font-weight: 600 !important;
    padding: 11px 18px !important;
    border-radius: var(--radius-pill) !important;
    text-decoration: none !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.3) !important;
    margin-top: auto !important;
}

.spotlight-cta-btn:hover {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(34, 197, 94, 0.4) !important;
}

/* Right Stage Carousel Container & Equal Height Probox */
.bento-stage-carousel {
    min-width: 0 !important;
    height: 100% !important;
}

.bento-stage-carousel .owl-stage-outer,
.bento-stage-carousel .owl-stage,
.bento-stage-carousel .owl-item,
.bento-stage-carousel .flashsale-proitem-group,
.bento-stage-carousel .proitem {
    height: 100% !important;
}

.bento-stage-carousel .probox {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 20px !important;
    padding: 14px !important;
    transition: all 0.25s ease !important;
}

.bento-stage-carousel .probox:hover {
    transform: translateY(-4px) !important;
    border-color: #86efac !important;
    box-shadow: 0 10px 24px rgba(34, 197, 94, 0.1) !important;
}

.bento-stage-carousel .probox .box {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    justify-content: space-between !important;
    text-decoration: none !important;
}

.bento-stage-carousel .probox__img {
    height: 145px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 8px !important;
}

.bento-stage-carousel .probox__img img {
    max-height: 135px !important;
    max-width: 100% !important;
    object-fit: contain !important;
}

.bento-stage-carousel .probox__title {
    font-size: 0.84rem !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    line-height: 1.35 !important;
    min-height: 2.7em !important;
    max-height: 2.7em !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    margin-bottom: 4px !important;
}

/* ==========================================================================
   PHARMACIST CONSULTATION CARD (INTERACTIVE EXPERT ADVICE)
   ========================================================================== */
.pharmacist-consult-banner {
    background: linear-gradient(135deg, #00A859 0%, #059669 50%, #047857 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 22px !important;
    padding: 20px 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
    margin-bottom: 24px !important;
    box-shadow: 0 14px 35px -6px rgba(0, 168, 89, 0.38), inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
    flex-wrap: wrap !important;
    position: relative !important;
    overflow: hidden !important;
}

.pharmacist-avatar-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}

.pharmacist-avatar {
    width: 62px !important;
    height: 62px !important;
    border-radius: 50% !important;
    border: 3px solid #ffffff !important;
    position: relative !important;
    background: #ffffff !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22) !important;
    flex-shrink: 0 !important;
}

.pharmacist-avatar img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}

.pharmacist-live-indicator {
    position: absolute !important;
    bottom: 2px !important;
    right: 2px !important;
    width: 15px !important;
    height: 15px !important;
    border-radius: 50% !important;
    background: #4ade80 !important;
    border: 2.5px solid #ffffff !important;
    box-shadow: 0 0 10px #4ade80 !important;
    animation: liveDotPulse 2s infinite !important;
}

.pharmacist-info h4 {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin: 0 0 4px 0 !important;
    letter-spacing: -0.01em !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
}

.pharmacist-info p {
    font-size: 0.85rem !important;
    color: rgba(255, 255, 255, 0.94) !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

.pharmacist-actions {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

.btn-consult-hotline {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #ffffff !important;
    color: #008744 !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    padding: 11px 22px !important;
    border-radius: var(--radius-pill) !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16) !important;
}

.btn-consult-hotline:hover {
    background: #f0fdf4 !important;
    color: #047857 !important;
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22) !important;
}

.btn-consult-zalo {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(255, 255, 255, 0.18) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    color: #ffffff !important;
    border: 1.5px solid rgba(255, 255, 255, 0.85) !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    padding: 10px 20px !important;
    border-radius: var(--radius-pill) !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
}

.btn-consult-zalo:hover {
    background: #ffffff !important;
    color: #0068ff !important;
    border-color: #ffffff !important;
    transform: translateY(-2px) scale(1.02) !important;
}

/* ==========================================================================
   SPECIAL 2026 EYE-CATCHING KEYFRAME ANIMATIONS
   ========================================================================== */
@keyframes auraPulse {
    0%, 100% { transform: scale(1); opacity: 0.45; }
    50% { transform: scale(1.15); opacity: 0.8; }
}

@keyframes badgeFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes liveDotPulse {
    0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
    70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

@keyframes luxuryShimmer {
    0% { transform: translateX(-150%) skewX(-20deg); }
    100% { transform: translateX(250%) skewX(-20deg); }
}

/* Shimmer effect on cards */
.probox, .modern-deal-card {
    position: relative !important;
    overflow: hidden !important;
}

.probox::after, .modern-deal-card::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: auto !important; right: 0 !important;
    width: 40% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent) !important;
    transform: translateX(-150%) skewX(-20deg) !important;
    pointer-events: none !important;
    transition: none !important;
}

.probox:hover::after, .modern-deal-card:hover::after {
    animation: luxuryShimmer 0.85s ease-in-out !important;
}

/* ==========================================================================
   RESPONSIVENESS (DESKTOP, TABLET & MOBILE)
   ========================================================================== */
@media (max-width: 1200px) {
    .modern-mega-dropdown-panel {
        width: 620px !important;
    }
    
    .hero-bento-grid {
        grid-template-columns: 1.8fr 1fr !important;
    }
    
    .featured-categories-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    
    .hero-trust-strip {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Tablet & Mobile (<= 991px) */
@media (max-width: 991px) {
    /* Hide desktop mega dropdown on mobile & tablet to prevent overflowing the screen */
    .modern-mega-dropdown-panel,
    .category-mega-dropdown:hover .modern-mega-dropdown-panel {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .header-main-flex-row {
        flex-wrap: wrap !important;
        gap: 8px 0 !important;
    }
    
    .header-left-group {
        order: 1 !important;
        max-width: 150px !important;
    }
    
    .header__category__menu {
        display: none !important;
    }
    
    .header-right-actions {
        order: 2 !important;
        margin-left: auto !important;
        gap: 8px !important;
    }
    
    .header-center-search {
        order: 3 !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 4px 0 0 0 !important;
    }
    
    .header-action-card .action-card-text {
        display: none !important;
    }
    
    .header-account-pill {
        padding: 0 10px !important;
        font-size: 0.78rem !important;
    }
    
    .header-account-pill span {
        display: none !important;
    }
    
    .header-account-pill i {
        margin: 0 !important;
        font-size: 1.1rem !important;
    }
    
    .hero-bento-grid {
        grid-template-columns: 1fr !important;
    }
    
    .hero-bento-sidebar {
        flex-direction: column !important;
    }
    
    .featured-categories-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    .hero-trust-strip {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .bento-master-layout {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .bento-spotlight-card {
        padding: 20px 16px !important;
    }

    .hero-symptom-strip {
        padding: 10px 14px !important;
        border-radius: 16px !important;
    }

    .symptom-strip-label {
        width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid #e2e8f0 !important;
        padding: 0 0 8px 0 !important;
        margin-bottom: 4px !important;
    }

    .pharmacist-consult-banner {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 14px !important;
        padding: 16px !important;
    }

    /* Fixed Floating Action Buttons on Tablet & Mobile: Avoid overlapping with bottom navigation bar */
    .floating-pill-info {
        display: none !important;
    }
    
    .floating-action-pill {
        min-width: 40px !important;
        width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        justify-content: center !important;
        border-radius: 50% !important;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14) !important;
    }

    .modern-floating-support {
        bottom: 72px !important;
        right: 12px !important;
    }

    #myBtn {
        bottom: 75px !important;
        right: 12px !important;
        border-radius: 50% !important;
        background: rgba(15, 23, 42, 0.8) !important;
        color: #ffffff !important;
        width: 38px !important;
        height: 38px !important;
        line-height: 36px !important;
        font-size: 18px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    }
}

/* Mobile Small (<= 576px) */
@media (max-width: 576px) {
    /* Featured Categories Showcase */
    .home-featured-categories-section {
        padding-left: 12px !important;
        padding-right: 12px !important;
        padding-top: 10px !important;
        padding-bottom: 14px !important;
    }

    .featured-categories-card-wrap {
        padding: 14px 12px !important;
        border-radius: 18px !important;
    }

    .featured-categories-header {
        display: flex !important;
        align-items: flex-end !important;
        justify-content: space-between !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
    }

    .categories-header-left {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .categories-badge {
        font-size: 0.62rem !important;
        padding: 2px 8px !important;
        margin-bottom: 3px !important;
        letter-spacing: 0.3px !important;
    }

    .categories-main-title {
        font-size: 1.05rem !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        line-height: 1.2 !important;
    }

    .categories-view-all-btn {
        font-size: 0.72rem !important;
        font-weight: 600 !important;
        padding: 5px 12px !important;
        border-radius: var(--radius-pill) !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        gap: 4px !important;
    }
    
    .featured-categories-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .featured-cat-item {
        padding: 14px 8px 12px 8px !important;
        border-radius: 16px !important;
    }

    .cat-icon-stage {
        width: 62px !important;
        height: 62px !important;
        margin-bottom: 8px !important;
    }

    .cat-icon-stage img {
        width: 50px !important;
        height: 50px !important;
    }

    .cat-title-text {
        font-size: 0.8rem !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        margin-bottom: 0 !important;
    }

    .cat-hover-pill {
        display: none !important;
    }
    
    .bento-sub-row {
        grid-template-columns: 1fr !important;
    }
    
    .hero-trust-strip {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .trust-strip-item {
        padding: 10px 14px !important;
        border-radius: 14px !important;
    }
    
    /* Floating action buttons on mobile */
    .floating-pill-info {
        display: none !important;
    }
    
    .floating-action-pill {
        min-width: 40px !important;
        width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        justify-content: center !important;
        border-radius: 50% !important;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14) !important;
    }

    .modern-floating-support {
        bottom: 70px !important;
        right: 10px !important;
    }

    .chat-button {
        width: 44px !important;
        height: 44px !important;
    }

    /* Flash Sale Section Mobile */
    .flashsale-card-container {
        padding: 14px 10px !important;
        border-radius: 18px !important;
    }

    /* Universal Owl Carousel Equal-Height Flexbox */
    .flash-arena-body .owl-stage,
    .flashsale-carousel .owl-stage,
    .hboxproduct__list .owl-stage,
    .product__container .owl-stage {
        display: flex !important;
    }

    .flash-arena-body .owl-item,
    .flashsale-carousel .owl-item,
    .hboxproduct__list .owl-item,
    .product__container .owl-item {
        display: flex !important;
        height: auto !important;
    }

    .flash-arena-body .owl-item > div,
    .flashsale-carousel .owl-item > div,
    .product__container .owl-item > div {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
    }

    .flash-arena-body .owl-carousel,
    .flashsale-carousel.owl-carousel {
        padding-top: 14px !important;
        margin-top: -14px !important;
        padding-bottom: 10px !important;
        margin-bottom: -10px !important;
    }

    .flashsale-carousel .owl-stage-outer {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        margin-top: -8px !important;
        margin-bottom: -8px !important;
    }

    .flashsale-product-item {
        padding: 2px !important;
        height: 100% !important;
        width: 100% !important;
        display: flex !important;
    }

    .modern-deal-card {
        padding: 12px !important;
        border-radius: 18px !important;
        height: 100% !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .deal-card-link {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
    }

    .deal-img-wrapper {
        height: 170px !important;
        min-height: 170px !important;
        max-height: 170px !important;
        margin-bottom: 8px !important;
        border-radius: 14px !important;
        padding: 6px !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .deal-thumb-img {
        max-height: 150px !important;
        max-width: 100% !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
        margin: 0 auto !important;
        display: block !important;
    }

    .deal-badge-pill {
        top: 8px !important;
        left: 8px !important;
        font-size: 0.72rem !important;
        padding: 3px 9px !important;
        border-radius: 6px 12px 12px 6px !important;
    }

    .deal-content-body {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
    }

    .deal-product-title {
        font-size: 0.88rem !important;
        line-height: 1.35 !important;
        height: 2.7em !important;
        min-height: 2.7em !important;
        max-height: 2.7em !important;
        margin-bottom: 6px !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        word-break: break-word !important;
    }

    .deal-price-row {
        gap: 6px !important;
        margin-bottom: 6px !important;
    }

    .deal-price-current {
        font-size: 1.25rem !important;
    }

    .deal-price-old {
        font-size: 0.78rem !important;
    }

    .deal-stock-progress {
        height: 17px !important;
        margin: 6px 0 8px 0 !important;
    }

    .deal-progress-caption {
        font-size: 0.68rem !important;
    }

    .deal-actions-row {
        gap: 6px !important;
        padding-top: 4px !important;
    }

    .deal-btn-cart {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        font-size: 0.92rem !important;
        border-radius: 11px !important;
    }

    .deal-btn-buy {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        height: 38px !important;
        font-size: 0.82rem !important;
        font-weight: 700 !important;
        padding: 0 10px !important;
        gap: 4px !important;
        border-radius: 11px !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #ffffff !important;
    }

    .flash-arena-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        padding: 16px 14px !important;
        border-radius: 18px !important;
    }

    .flash-arena-left {
        width: 100% !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
    }

    .flash-arena-badge {
        padding: 4px 10px !important;
        font-size: 0.68rem !important;
    }

    .flash-arena-title {
        font-size: 1.18rem !important;
    }

    .flash-arena-sub {
        font-size: 0.72rem !important;
    }

    .flash-arena-center {
        width: 100% !important;
        margin: 2px 0 !important;
    }

    .flash-timer-wrapper {
        width: 100% !important;
        display: flex !important;
        justify-content: space-between !important;
        padding: 7px 12px !important;
        border-radius: 14px !important;
        box-sizing: border-box !important;
    }

    .timer-lead-text {
        font-size: 0.72rem !important;
    }

    .flash-glass-timer {
        gap: 4px !important;
    }

    .timer-box {
        width: 28px !important;
        height: 25px !important;
        font-size: 0.85rem !important;
        border-radius: 6px !important;
    }

    .timer-lbl {
        font-size: 0.52rem !important;
    }

    .flash-arena-right {
        width: 100% !important;
        margin-left: auto !important; right: 0 !important;
        margin-top: 2px !important;
    }

    .flash-arena-cta-btn {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 9px 16px !important;
        font-size: 0.82rem !important;
        border-radius: 12px !important;
        text-align: center !important;
    }

    /* Product Cards Mobile */
    .probox {
        padding: 10px !important;
        border-radius: 16px !important;
    }

    .probox__img {
        height: 145px !important;
    }

    .probox__img img {
        height: 145px !important;
    }

    .percent_tag {
        font-size: 0.65rem !important;
        padding: 3px 8px !important;
    }

    .probox__title {
        font-size: 0.82rem !important;
        height: 2.6em !important;
    }

    .probox__price .price {
        font-size: 0.95rem !important;
    }

    .probox__actions {
        gap: 6px !important;
    }

    .probox__actions .btn-pro-buy {
        font-size: 0.76rem !important;
        padding: 6px 8px !important;
    }

    .probox__actions .btn-pro-cart {
        width: 32px !important;
        height: 32px !important;
        font-size: 12px !important;
    }

    /* News Section Mobile */
    .home-news-wrapper {
        padding: 16px 12px !important;
        border-radius: 18px !important;
    }

    .home-news-header {
        align-items: flex-end !important;
        margin-bottom: 12px !important;
    }

    .home-news-title {
        font-size: 1.05rem !important;
        line-height: 1.2 !important;
    }

    .btn-news-all {
        font-size: 0.72rem !important;
        padding: 5px 12px !important;
    }

    .news-card-thumb {
        height: 140px !important;
    }

    /* Partner Section Mobile */
    .partner-ecosystem-card {
        padding: 18px 12px !important;
        border-radius: 18px !important;
    }

    .partner-head-title {
        font-size: 1.05rem !important;
    }

    .partner-brand-box {
        height: 90px !important;
        padding: 10px 8px !important;
        border-radius: 14px !important;
    }

    .partner-logo-img {
        max-height: 36px !important;
        max-width: 95px !important;
    }

    /* Footer Mobile */
    .footer-action-pills {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .footer-corporate-card {
        padding: 16px 12px !important;
        border-radius: 16px !important;
    }
}

/* ==========================================================================
   EBAY-INSPIRED PROMO & TRUST BANNERS (BẢO CHỨNG NIỀM TIN & SĂN DEAL ĐA SẮC)
   ========================================================================== */

/* 1. Trust & Guarantee Strip Banner (CRISP PURE DIAMOND GLASS WITH EMERALD POP) */
.ebay-trust-guarantee-section {
    margin-bottom: 28px !important;
}

.ebay-trust-guarantee-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.88) 100%) !important;
    backdrop-filter: blur(16px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(150%) !important;
    border-radius: 22px !important;
    border: 1.5px solid rgba(16, 185, 129, 0.28) !important;
    padding: 22px 30px !important;
    color: #0f172a !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 18px !important;
    box-shadow: 0 12px 32px -4px rgba(0, 168, 89, 0.08), inset 0 1px 1px #ffffff !important;
    position: relative !important;
    overflow: hidden !important;
}

.ebay-trust-guarantee-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: auto !important; right: 0 !important;
    width: 6px !important;
    height: 100% !important;
    background: linear-gradient(180deg, #10b981 0%, #00a859 100%) !important;
    border-radius: 20px 0 0 20px !important;
}

.trust-guarantee-left {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    max-width: 850px !important;
    padding-left: 6px !important;
}

.trust-guarantee-title {
    font-size: 1.32rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 !important;
    letter-spacing: -0.01em !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.trust-guarantee-title i {
    color: #00a859 !important;
    font-size: 1.35rem !important;
    filter: drop-shadow(0 2px 4px rgba(0, 168, 89, 0.25)) !important;
}

.trust-guarantee-sub {
    font-size: 0.88rem !important;
    color: #475569 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
}

.trust-guarantee-btn {
    background: linear-gradient(135deg, #00a859 0%, #059669 100%) !important;
    color: #ffffff !important;
    font-size: 0.86rem !important;
    font-weight: 700 !important;
    padding: 11px 24px !important;
    border-radius: var(--radius-pill) !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 6px 18px rgba(0, 168, 89, 0.28) !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.trust-guarantee-btn:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    color: #ffffff !important;
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 8px 22px rgba(0, 168, 89, 0.38) !important;
}

@media (max-width: 991px) {
    .ebay-trust-guarantee-card {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 14px !important;
        padding: 18px 16px !important;
        border-radius: 18px !important;
    }

    .trust-guarantee-left {
        width: 100% !important;
        gap: 6px !important;
    }

    .trust-guarantee-title {
        font-size: 1.12rem !important;
        line-height: 1.35 !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    .trust-guarantee-title i {
        font-size: 1.15rem !important;
        margin-top: 2px !important;
        flex-shrink: 0 !important;
    }

    .trust-guarantee-sub {
        font-size: 0.8rem !important;
        line-height: 1.45 !important;
    }

    .trust-guarantee-btn {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 10px 16px !important;
        border-radius: 12px !important;
        font-size: 0.84rem !important;
        text-align: center !important;
    }
}

/* 2. Curated Multi-Tile Collection Banner (Catch today's flash offers style) */
.ebay-flash-curated-section {
    margin-bottom: 34px !important;
}

.ebay-flash-curated-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.08) 100%) !important;
    backdrop-filter: blur(3px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(3px) saturate(140%) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.8) !important;
    border-radius: 26px !important;
    padding: 26px 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 28px !important;
    box-shadow: 0 10px 30px -4px rgba(0, 168, 89, 0.06), 0 0 0 1px rgba(16, 185, 129, 0.15), inset 0 1.5px 2px rgba(255, 255, 255, 0.9), inset 0 -1px 2px rgba(16, 185, 129, 0.1) !important;
}

.curated-banner-left {
    flex: 0 0 35% !important;
    max-width: 360px !important;
}

.curated-banner-title {
    font-size: 1.65rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
    margin: 0 0 8px 0 !important;
}

.curated-banner-sub {
    font-size: 0.86rem !important;
    color: #64748b !important;
    line-height: 1.45 !important;
    margin: 0 0 18px 0 !important;
}

.curated-banner-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #0f172a !important;
    color: #ffffff !important;
    font-size: 0.84rem !important;
    font-weight: 600 !important;
    padding: 10px 22px !important;
    border-radius: var(--radius-pill) !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.2) !important;
}

.curated-banner-btn:hover {
    background: #16a34a !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(22, 163, 74, 0.35) !important;
}

.curated-banner-right {
    flex: 1 !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 14px !important;
}

.curated-tile-box {
    border-radius: 20px !important;
    padding: 16px 10px !important;
    height: 155px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    text-decoration: none !important;
    overflow: hidden !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.curated-tile-box:hover {
    transform: translateY(-6px) scale(1.02) !important;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12) !important;
}

.curated-tile-box img {
    max-height: 85px !important;
    max-width: 100% !important;
    object-fit: contain !important;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.12)) !important;
    transition: transform 0.3s ease !important;
}

.curated-tile-box:hover img {
    transform: scale(1.08) !important;
}

.curated-tile-label {
    position: absolute !important;
    bottom: 8px !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
}

/* 4 Tile Color Variations (eBay Pop Colors) */
.tile-lime {
    background: linear-gradient(145deg, #84cc16 0%, #65a30d 100%) !important;
}
.tile-silver {
    background: linear-gradient(145deg, #f1f5f9 0%, #e2e8f0 100%) !important;
}
.tile-silver .curated-tile-label {
    color: #0f172a !important;
    text-shadow: none !important;
}
.tile-red {
    background: linear-gradient(145deg, #ef4444 0%, #dc2626 100%) !important;
}
.tile-blue {
    background: linear-gradient(145deg, #2563eb 0%, #1d4ed8 100%) !important;
}

@media (max-width: 991px) {
    .ebay-flash-curated-card {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 20px 16px !important;
    }
    .curated-banner-left {
        max-width: 100% !important;
        margin-bottom: 12px !important;
    }
    .curated-banner-right {
        width: 100% !important;
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
/* ==========================================================================
   MEGA CATEGORY HUB (MULTI-TABBED SHOWCASE: ĐÔNG DƯỢC, SỮA, TPCN, HÀNG MỚI)
   ========================================================================== */
.mega-category-hub-card {
    background: #FFFFFF !important;
    border: none !important;
    border-radius: 26px !important;
    padding: 28px !important;
    box-shadow: 0 15px 40px -10px rgba(0, 166, 81, 0.08) !important;
    margin-bottom: 36px !important;
}

.mega-hub-top-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
    padding-bottom: 16px !important;
    border-bottom: 1.5px solid rgba(16, 185, 129, 0.15) !important;
}

.mega-hub-nav-pills {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

.mega-tab-btn {
    background: rgba(255, 255, 255, 0.45) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.85) !important;
    color: #475569 !important;
    font-size: 0.84rem !important;
    font-weight: 600 !important;
    padding: 8px 16px !important;
    border-radius: var(--radius-pill) !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    text-decoration: none !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02), inset 0 1px 1px rgba(255, 255, 255, 0.9) !important;
}

.mega-tab-btn:hover {
    background: #f0fdf4 !important;
    border-color: #bbf7d0 !important;
    color: #00A651 !important;
}

.mega-tab-btn.active {
    background: linear-gradient(135deg, #00A651 0%, #00823F 100%) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(0, 166, 81, 0.25) !important;
}

.mega-hub-panel {
    display: none;
    animation: fadeIn 0.3s ease;
}

.mega-hub-panel.active {
    display: block;
}

.mega-panel-banner {
    border-radius: 16px !important;
    overflow: hidden !important;
    margin-bottom: 20px !important;
}

.mega-panel-banner img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

.bento-stage-content {
    min-width: 0 !important;
    width: 100% !important;
}

.bento-stage-content .proitem,
.bento-stage-content .probox {
    height: 100% !important;
}

.bento-stage-content .probox {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

@media (max-width: 768px) {
    .mega-category-hub-card {
        padding: 18px 14px !important;
    }
    .mega-hub-top-bar {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .mega-hub-nav-pills {
        width: 100% !important;
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        padding-bottom: 6px !important;
        padding-right: 40px !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .mega-hub-nav-pills::-webkit-scrollbar {
        display: none !important;
    }
    .mega-tab-btn {
        white-space: nowrap !important;
        font-size: 0.8rem !important;
        padding: 8px 14px !important;
        flex-shrink: 0 !important;
    }
}

/* ==========================================================================
   FLASH SALE PAGE (SIÊU HỘI GIẢM GIÁ CHUYÊN BIỆT)
   ========================================================================== */
.flash-sale-hero-wrapper {
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 40%, #ffffff 80%, #f0fdf4 100%) !important;
    border-radius: 24px !important;
    border: 1.5px solid #a7f3d0 !important;
    padding: 30px 32px !important;
    color: #0f172a !important;
    position: relative !important;
    overflow: hidden !important;
    margin-top: 14px !important;
    margin-bottom: 26px !important;
    box-shadow: 0 12px 36px -8px rgba(16, 185, 129, 0.12) !important;
}

.flash-sale-hero-wrapper::before {
    content: '' !important;
    position: absolute !important;
    top: -60px !important;
    right: 25% !important;
    width: 320px !important;
    height: 320px !important;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.12) 0%, transparent 70%) !important;
    border-radius: 50% !important;
    pointer-events: none !important;
}

.flash-sale-hero-wrapper::after {
    content: '' !important;
    position: absolute !important;
    bottom: -60px !important;
    left: 5% !important;
    width: 260px !important;
    height: 260px !important;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.1) 0%, transparent 70%) !important;
    border-radius: 50% !important;
    pointer-events: none !important;
}

.flash-hero-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #ffffff !important;
    border: 1.2px solid #86efac !important;
    padding: 5px 14px !important;
    border-radius: var(--radius-pill) !important;
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
    color: #15803d !important;
    margin-bottom: 12px !important;
    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.06) !important;
}

.badge-live-beacon {
    width: 8px !important;
    height: 8px !important;
    background: #ef4444 !important;
    border-radius: 50% !important;
    display: inline-block !important;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7) !important;
    animation: beaconPulse 1.5s infinite !important;
}

@keyframes beaconPulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

.flash-hero-title {
    font-size: 1.85rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: #0f172a !important;
    margin-bottom: 8px !important;
    letter-spacing: -0.01em !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.flash-title-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: #ffffff !important;
    padding: 3px 12px !important;
    border-radius: 8px !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important;
    letter-spacing: 0.2px !important;
}

.flash-hero-subtitle {
    font-size: 0.88rem !important;
    font-weight: 400 !important;
    color: #475569 !important;
    max-width: 580px !important;
    line-height: 1.55 !important;
    margin-bottom: 18px !important;
}

.flash-trust-pills {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.flash-trust-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #ffffff !important;
    border: 1.2px solid #bbf7d0 !important;
    border-radius: var(--radius-pill) !important;
    padding: 5px 14px 5px 6px !important;
    font-size: 0.76rem !important;
    font-weight: 500 !important;
    color: #166534 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.2s ease !important;
}

.flash-trust-pill:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.1) !important;
    border-color: #86efac !important;
}

.flash-pill-icon {
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.7rem !important;
}

.pill-emerald { background: #dcfce7 !important; color: #15803d !important; }
.pill-amber { background: #fef3c7 !important; color: #d97706 !important; }
.pill-blue { background: #e0f2fe !important; color: #0284c7 !important; }
.pill-rose { background: #ffe4e6 !important; color: #e11d48 !important; }

/* High-Impact Interactive Countdown Arena Card */
.flash-arena-countdown-card {
    background: #ffffff !important;
    border: 1.5px solid #86efac !important;
    border-radius: 20px !important;
    padding: 20px 22px !important;
    box-shadow: 0 10px 30px rgba(22, 163, 74, 0.1) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.countdown-top-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-bottom: 8px !important;
    border-bottom: 1px dashed #dcfce7 !important;
}

.countdown-head-label {
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    color: #15803d !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-bottom: 0 !important;
}

.deal-session-tag {
    background: #fef3c7 !important;
    color: #b45309 !important;
    border: 1px solid #fde68a !important;
    padding: 2px 8px !important;
    border-radius: var(--radius-pill) !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
}

.countdown-digits-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 4px 0 !important;
}

.countdown-box-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.countdown-num {
    width: 48px !important;
    height: 48px !important;
    background: #0f172a !important;
    border: 1.5px solid #22c55e !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    font-variant-numeric: tabular-nums !important;
    letter-spacing: -0.02em !important;
}

.countdown-unit {
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    color: #64748b !important;
    margin-top: 5px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
}

.countdown-sep {
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    color: #16a34a !important;
    margin-top: -14px !important;
}

.countdown-bottom-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 0.72rem !important;
    color: #64748b !important;
    background: #f0fdf4 !important;
    padding: 6px 10px !important;
    border-radius: 8px !important;
    border: 1px solid #dcfce7 !important;
}

.countdown-bottom-footer span {
    font-weight: 500 !important;
}

.countdown-bottom-footer b {
    color: #15803d !important;
    font-weight: 600 !important;
}

/* ==========================================================================
   FLASH SALE CATEGORY NAVIGATION TABS
   ========================================================================== */
.flash-category-tabs-wrapper {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 20px !important;
    padding: 12px 16px !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.02) !important;
}

.flash-cat-scroll-track {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    overflow-x: auto !important;
    padding-bottom: 2px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
}

.flash-cat-scroll-track::-webkit-scrollbar {
    display: none !important;
}

.flash-cat-tab {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 18px !important;
    border-radius: 9999px !important;
    font-size: 0.86rem !important;
    font-weight: 600 !important;
    color: #334155 !important;
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.flash-cat-tab:hover {
    color: #16a34a !important;
    background: #f0fdf4 !important;
    border-color: #86efac !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.12) !important;
}

.flash-cat-tab.active {
    color: #ffffff !important;
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
    border-color: #16a34a !important;
    box-shadow: 0 6px 18px rgba(22, 163, 74, 0.3) !important;
    transform: translateY(-1px) !important;
}

.flash-cat-tab.active .flash-cat-name {
    color: #ffffff !important;
}

.flash-cat-icon {
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.8rem !important;
    background: #ffffff !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
}

.flash-cat-tab.active .flash-cat-icon {
    background: rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
}

.flash-cat-tab.active .flash-cat-icon i {
    color: #ffffff !important;
}

.flash-cat-count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 2px 8px !important;
    border-radius: 9999px !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    background: #e2e8f0 !important;
    color: #475569 !important;
    transition: all 0.2s ease !important;
}

.flash-cat-tab:hover .flash-cat-count {
    background: #bbf7d0 !important;
    color: #15803d !important;
}

.flash-cat-tab.active .flash-cat-count {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
}

/* Modern Filter & Toolbar Card */
.flash-filter-card {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 18px !important;
    padding: 14px 18px !important;
    margin-bottom: 24px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

.flash-chips-group {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.flash-chip-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 7px 16px !important;
    border-radius: var(--radius-pill) !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: #475569 !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    text-decoration: none !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.flash-chip-btn:hover {
    color: #16a34a !important;
    background: #f0fdf4 !important;
    border-color: #bbf7d0 !important;
    transform: translateY(-1px) !important;
}

.flash-chip-btn.active {
    color: #ffffff !important;
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
    border-color: #16a34a !important;
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.25) !important;
}

.flash-select-pills {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.flash-pill-dropdown-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px 16px !important;
    border-radius: var(--radius-pill) !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: #334155 !important;
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}

.flash-pill-dropdown-btn:hover {
    border-color: #16a34a !important;
    background: #f0fdf4 !important;
    color: #15803d !important;
}

/* ==========================================================================
   FLASH SALE PRODUCT CARDS (SEAMLESS CLEAN LUXURY DESIGN)
   ========================================================================== */
.product__wrapper,
#getproduct_reponse,
.product__container {
    overflow: visible !important;
}

#productContainer {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.flash-proitem {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

.flash-proitem .probox {
    background: #ffffff !important;
    border: 1.5px solid #f1f5f9 !important;
    border-radius: 20px !important;
    padding: 12px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 100% !important;
    position: relative !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
    overflow: hidden !important;
}

.flash-proitem .probox:hover {
    transform: translateY(-5px) !important;
    border-color: #86efac !important;
    box-shadow: 0 16px 36px -6px rgba(16, 185, 129, 0.16), 0 4px 12px rgba(0, 0, 0, 0.04) !important;
}

/* Seamless Image Stage */
.flash-img-stage {
    background: #ffffff !important;
    border: none !important;
    border-radius: 14px !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 200px !important;
    width: 100% !important;
    margin-bottom: 12px !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.flash-img-stage img {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    max-width: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 14px !important;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.flash-proitem .probox:hover .flash-img-stage img {
    transform: scale(1.06) !important;
}

/* Compact Non-Obstructive Discount Tag */
.flash-tag-pill {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    z-index: 3 !important;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: #ffffff !important;
    padding: 3px 8px !important;
    border-radius: 8px !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3) !important;
    letter-spacing: -0.01em !important;
}

.flash-hot-badge {
    position: absolute !important;
    top: 0px !important;
    right: 0px !important;
    z-index: 3 !important;
    background: #fef3c7 !important;
    color: #b45309 !important;
    border: 1px solid #fde68a !important;
    border-radius: var(--radius-pill) !important;
    padding: 2px 7px !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
}

/* Card Content Styling */
.flash-probox-body {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

.flash-unit-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 0.72rem !important;
    color: #059669 !important;
    background: #ecfdf5 !important;
    border: 1px solid #a7f3d0 !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
    max-width: 100% !important;
    width: fit-content !important;
    margin-bottom: 6px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.3 !important;
    box-sizing: border-box !important;
}

.flash-unit-chip .unit-text,
.flash-unit-chip span {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: inline-block !important;
    max-width: 100% !important;
}

.flash-unit-chip i {
    flex-shrink: 0 !important;
    font-size: 0.7rem !important;
}

.flash-pro-title {
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    line-height: 1.38 !important;
    margin: 0 0 8px 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: 2.65em !important;
    transition: color 0.2s ease !important;
}

.flash-proitem .probox:hover .flash-pro-title {
    color: #16a34a !important;
}

.flash-price-row {
    display: flex !important;
    align-items: baseline !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
    flex-wrap: wrap !important;
}

.flash-price-main {
    font-size: 1.18rem !important;
    font-weight: 700 !important;
    color: #dc2626 !important;
    line-height: 1 !important;
    letter-spacing: -0.02em !important;
}

.flash-price-old {
    font-size: 0.8rem !important;
    color: #94a3b8 !important;
    text-decoration: line-through !important;
    font-weight: 400 !important;
}

/* Crystal-Clear Flash Deal Progress Bar */
.flash-stock-wrap {
    margin: 4px 0 10px 0 !important;
}

.flash-stock-info {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 0.72rem !important;
    margin-bottom: 4px !important;
}

.stock-sold {
    color: #e11d48 !important;
    font-weight: 600 !important;
}

.stock-status {
    color: #b45309 !important;
    font-size: 0.68rem !important;
    font-weight: 600 !important;
}

.flash-stock-track {
    width: 100% !important;
    height: 7px !important;
    background: #f1f5f9 !important;
    border-radius: var(--radius-pill) !important;
    overflow: hidden !important;
    border: 1px solid #e2e8f0 !important;
}

.flash-stock-fill {
    height: 100% !important;
    background: linear-gradient(90deg, #f59e0b 0%, #ef4444 100%) !important;
    border-radius: var(--radius-pill) !important;
    transition: width 0.4s ease !important;
}

/* Clean Rating Display */
.flash-rating-bar {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin-bottom: 10px !important;
    font-size: 0.76rem !important;
}

.flash-rating-bar .stars {
    color: #f59e0b !important;
    font-size: 0.72rem !important;
    display: flex !important;
    gap: 2px !important;
}

.flash-rating-score {
    font-weight: 600 !important;
    color: #475569 !important;
    margin-left: 4px !important;
}

/* Modern Action Buttons */
.flash-actions-grid {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: auto !important;
}

.btn-flash-cart {
    width: 42px !important;
    height: 38px !important;
    border-radius: 12px !important;
    background: #f0fdf4 !important;
    border: 1.5px solid #86efac !important;
    color: #16a34a !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.95rem !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
}

.btn-flash-cart:hover {
    background: #16a34a !important;
    border-color: #16a34a !important;
    color: #ffffff !important;
    transform: scale(1.05) !important;
}

.btn-flash-buy {
    flex: 1 !important;
    height: 38px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.25) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
}

.btn-flash-buy:hover {
    background: linear-gradient(135deg, #15803d 0%, #166534 100%) !important;
    box-shadow: 0 6px 18px rgba(22, 163, 74, 0.35) !important;
    transform: translateY(-1px) !important;
    color: #ffffff !important;
}

/* Empty State */
.flash-empty-card {
    background: #ffffff !important;
    border: 1.5px dashed #cbd5e1 !important;
    border-radius: 24px !important;
    padding: 60px 24px !important;
    text-align: center !important;
    margin: 30px 0 !important;
}

.flash-empty-icon {
    width: 80px !important;
    height: 80px !important;
    border-radius: 50% !important;
    background: #fff1f2 !important;
    color: #e11d48 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 2rem !important;
    margin: 0 auto 16px auto !important;
}

.flash-empty-title {
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin-bottom: 8px !important;
}

.flash-empty-desc {
    font-size: 0.9rem !important;
    color: #64748b !important;
    max-width: 450px !important;
    margin: 0 auto 20px auto !important;
}

.flash-empty-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
    padding: 10px 24px !important;
    border-radius: var(--radius-pill) !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.flash-empty-btn:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
}

@media (max-width: 991px) {
    .flash-sale-hero-wrapper {
        padding: 26px 20px !important;
    }
    .flash-hero-title {
        font-size: 1.6rem !important;
    }
    .flash-filter-card {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .flash-select-pills {
        width: 100% !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
    }
}

/* ==========================================================================
   CATEGORY & CATALOG PAGES (TRANG DANH MỤC SẢN PHẨM CHUẨN HIỆN ĐẠI)
   ========================================================================== */
.catalog-hero-header {
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 45%, #ffffff 100%) !important;
    border: 1.5px solid #bbf7d0 !important;
    border-radius: 20px !important;
    padding: 24px 28px !important;
    box-shadow: 0 6px 20px -4px rgba(22, 163, 74, 0.08) !important;
    margin-top: 14px !important;
    margin-bottom: 22px !important;
    position: relative !important;
    overflow: hidden !important;
}

.catalog-hero-header::before {
    content: '' !important;
    position: absolute !important;
    top: -40px !important;
    right: 10% !important;
    width: 240px !important;
    height: 240px !important;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.08) 0%, transparent 70%) !important;
    border-radius: 50% !important;
    pointer-events: none !important;
}

.catalog-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #dcfce7 !important;
    border: 1px solid #86efac !important;
    padding: 4px 12px !important;
    border-radius: var(--radius-pill) !important;
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    color: #15803d !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
    margin-bottom: 6px !important;
}

.catalog-title {
    font-size: 1.65rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 0 6px 0 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.01em !important;
}

.catalog-subtitle {
    font-size: 0.86rem !important;
    color: #475569 !important;
    margin-bottom: 0 !important;
    line-height: 1.5 !important;
}

.catalog-trust-pills {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.catalog-trust-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #ffffff !important;
    border: 1.2px solid #bbf7d0 !important;
    border-radius: var(--radius-pill) !important;
    padding: 5px 12px !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    color: #166534 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
}

@media (max-width: 768px) {
    .catalog-hero-header {
        text-align: center !important;
        padding: 20px 16px !important;
    }
    .catalog-badge {
        margin: 0 auto 8px auto !important;
        display: inline-flex !important;
    }
    .catalog-title {
        text-align: center !important;
        font-size: 1.45rem !important;
    }
    .catalog-subtitle {
        text-align: center !important;
        margin: 0 auto 14px auto !important;
        max-width: 100% !important;
    }
    .catalog-trust-pills {
        justify-content: center !important;
        width: 100% !important;
    }
}

/* Modern Catalog Filter Toolbar */
.catalog-filter-card {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 18px !important;
    padding: 12px 18px !important;
    margin-bottom: 24px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

.catalog-filter-groups {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.catalog-pill-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 7px 16px !important;
    border-radius: var(--radius-pill) !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: #334155 !important;
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}

.catalog-pill-btn:hover {
    border-color: #16a34a !important;
    background: #f0fdf4 !important;
    color: #15803d !important;
}

.catalog-pill-btn.active {
    border-color: #16a34a !important;
    background: #16a34a !important;
    color: #ffffff !important;
}

/* Catalog Modern Dropdown Menu Styling */
.catalog-filter-card .dropdown {
    position: relative !important;
    display: inline-block !important;
}

.catalog-dropdown-menu,
.catalog-filter-card .dropdown-menu {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 8px !important;
    box-shadow: 0 14px 36px -4px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(22, 163, 74, 0.04) !important;
    min-width: 220px !important;
    z-index: 1050 !important;
    top: 100% !important;
    bottom: auto !important;
    left: auto !important; right: 0 !important;
    right: auto !important;
    transform: none !important;
    margin: 4px 0 0 0 !important;
    inset: 100% auto auto 0px !important;
}

/* Invisible bridge so mouse cursor moving from button down to menu never drops hover */
.catalog-dropdown-menu::before,
.catalog-filter-card .dropdown-menu::before {
    content: "" !important;
    position: absolute !important;
    top: -12px !important;
    left: auto !important; right: 0 !important;
    right: 0 !important;
    height: 14px !important;
    background: transparent !important;
    display: block !important;
}

/* Desktop: Open smoothly on hover and stay open when moving cursor down */
@media (min-width: 768px) {
    .catalog-filter-card .dropdown:hover > .catalog-dropdown-menu,
    .catalog-filter-card .dropdown:hover > .dropdown-menu {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        animation: dropdownFadeIn 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
}

.catalog-dropdown-menu.show,
.catalog-filter-card .dropdown-menu.show {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.catalog-sort-group .catalog-dropdown-menu,
.catalog-sort-group .dropdown-menu,
.catalog-sort-group .catalog-dropdown-menu.show {
    left: auto !important;
    right: 0 !important;
    inset: 100% 0px auto auto !important;
}

@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.catalog-dropdown-menu .dropdown-item {
    padding: 8px 14px !important;
    border-radius: 10px !important;
    font-size: 0.84rem !important;
    font-weight: 500 !important;
    color: #334155 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.15s ease !important;
}

.catalog-dropdown-menu .dropdown-item:hover {
    background: #f0fdf4 !important;
    color: #15803d !important;
    font-weight: 600 !important;
    transform: translateX(3px) !important;
}

.catalog-brand-menu {
    max-height: 220px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    min-width: 240px !important;
}

.catalog-brand-menu::-webkit-scrollbar {
    width: 5px !important;
}

.catalog-brand-menu::-webkit-scrollbar-track {
    background: #f8fafc !important;
    border-radius: 10px !important;
}

.catalog-brand-menu::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
    border-radius: 10px !important;
}

.catalog-brand-menu::-webkit-scrollbar-thumb:hover {
    background: #16a34a !important;
}

.filter-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #a7f3d0 !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
    transition: all 0.15s ease !important;
}

.catalog-dropdown-menu .dropdown-item:hover .filter-dot {
    background: #16a34a !important;
    transform: scale(1.3) !important;
}

/* Catalog Product Cards */
.catalog-proitem {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

.catalog-proitem .probox {
    background: #ffffff !important;
    border: 1.5px solid #f1f5f9 !important;
    border-radius: 20px !important;
    padding: 12px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 100% !important;
    position: relative !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
    overflow: hidden !important;
}

.catalog-proitem .probox:hover {
    transform: translateY(-5px) !important;
    border-color: #86efac !important;
    box-shadow: 0 16px 36px -6px rgba(16, 185, 129, 0.16), 0 4px 12px rgba(0, 0, 0, 0.04) !important;
}

.catalog-img-stage {
    background: #ffffff !important;
    border: none !important;
    border-radius: 14px !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 200px !important;
    width: 100% !important;
    margin-bottom: 12px !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.catalog-img-stage img {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    max-width: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 14px !important;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.catalog-proitem .probox:hover .catalog-img-stage img {
    transform: scale(1.06) !important;
}

.catalog-tag-pill {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    z-index: 3 !important;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: #ffffff !important;
    padding: 3px 8px !important;
    border-radius: 8px !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3) !important;
    letter-spacing: -0.01em !important;
}

.catalog-probox-body {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

.catalog-unit-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 0.72rem !important;
    color: #15803d !important;
    background: #f0fdf4 !important;
    border: 1px solid #bbf7d0 !important;
    padding: 3px 10px !important;
    border-radius: 20px !important;
    font-weight: 600 !important;
    max-width: 100% !important;
    width: fit-content !important;
    margin-bottom: 8px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.3 !important;
    box-sizing: border-box !important;
}

.catalog-unit-chip .unit-text,
.catalog-unit-chip span {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: inline-block !important;
    max-width: 100% !important;
}

.catalog-unit-chip i {
    flex-shrink: 0 !important;
    font-size: 0.7rem !important;
}

.catalog-pro-title {
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    line-height: 1.38 !important;
    margin: 0 0 8px 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: 2.65em !important;
    transition: color 0.2s ease !important;
}

.catalog-proitem .probox:hover .catalog-pro-title {
    color: #16a34a !important;
}

.catalog-price-row {
    display: flex !important;
    align-items: baseline !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
    flex-wrap: wrap !important;
}

.catalog-price-main {
    font-size: 1.18rem !important;
    font-weight: 700 !important;
    color: #16a34a !important;
    line-height: 1 !important;
    letter-spacing: -0.02em !important;
}

.catalog-price-old {
    font-size: 0.8rem !important;
    color: #94a3b8 !important;
    text-decoration: line-through !important;
    font-weight: 400 !important;
}

.catalog-rating-bar {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin-bottom: 10px !important;
    font-size: 0.76rem !important;
}

.catalog-rating-bar .stars {
    color: #f59e0b !important;
    font-size: 0.72rem !important;
    display: flex !important;
    gap: 2px !important;
}

.catalog-rating-score {
    font-weight: 600 !important;
    color: #475569 !important;
    margin-left: 4px !important;
}

.catalog-actions-grid {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: auto !important;
}

.btn-catalog-cart {
    width: 42px !important;
    height: 38px !important;
    border-radius: 12px !important;
    background: #f0fdf4 !important;
    border: 1.5px solid #86efac !important;
    color: #16a34a !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.95rem !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
}

.btn-catalog-cart:hover {
    background: #16a34a !important;
    border-color: #16a34a !important;
    color: #ffffff !important;
    transform: scale(1.05) !important;
}

/* ==========================================================================
   STORE LOCATOR / LIST WAREHOUSE MODERN REDESIGN
   ========================================================================== */
.store-locator-wrapper {
    margin-bottom: 40px !important;
}

.store-filter-bar {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 18px !important;
    padding: 16px 20px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04) !important;
}

.store-search-wrap {
    position: relative !important;
}

.store-search-wrap .search-icon {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #16a34a !important;
    font-size: 0.95rem !important;
    pointer-events: none !important;
}

.store-search-input {
    padding-left: 42px !important;
    padding-right: 14px !important;
    border-radius: 12px !important;
    border: 1.5px solid #cbd5e1 !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    height: 46px !important;
    line-height: 1.5 !important;
    transition: all 0.2s ease !important;
    background-color: #ffffff !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

.store-search-input:focus {
    border-color: #16a34a !important;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15) !important;
}

.store-select {
    padding-left: 14px !important;
    padding-right: 32px !important;
    border-radius: 12px !important;
    border: 1.5px solid #cbd5e1 !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    height: 46px !important;
    line-height: 1.5 !important;
    color: #334155 !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    background-color: #ffffff !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

.store-select:focus {
    border-color: #16a34a !important;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15) !important;
}

.store-count-badge {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 0 14px !important;
    border-radius: 12px !important;
    background: #f0fdf4 !important;
    border: 1.5px solid #bbf7d0 !important;
    color: #166534 !important;
    font-size: 0.84rem !important;
    font-weight: 600 !important;
    height: 46px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    white-space: nowrap !important;
}

/* 2-Column Stage */
.store-map-box {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05) !important;
    height: 560px !important;
    position: relative !important;
}

#store__leaflet_map {
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
}

/* Store List Sidebar Panel */
.store-sidebar-panel {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05) !important;
    display: flex !important;
    flex-direction: column !important;
    height: 560px !important;
}

.store-sidebar-header {
    padding: 14px 18px !important;
    background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%) !important;
    border-bottom: 1.5px solid #e2e8f0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.store-sidebar-title {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.store-list-scroll {
    flex-grow: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.store-list-scroll::-webkit-scrollbar {
    width: 5px !important;
}

.store-list-scroll::-webkit-scrollbar-track {
    background: #f8fafc !important;
}

.store-list-scroll::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
    border-radius: 10px !important;
}

.store-list-scroll::-webkit-scrollbar-thumb:hover {
    background: #16a34a !important;
}

/* Store Card Item */
.store-card-item {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 14px !important;
    padding: 12px 14px !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
    position: relative !important;
}

.store-card-item:hover {
    border-color: #86efac !important;
    background: #f0fdf4 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(22, 163, 74, 0.08) !important;
}

.store-card-item.active {
    border-color: #16a34a !important;
    background: #f0fdf4 !important;
    box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.2), 0 8px 20px rgba(22, 163, 74, 0.12) !important;
}

.store-card-item.active::before {
    content: "" !important;
    position: absolute !important;
    left: auto !important; right: 0 !important;
    top: 10px !important;
    bottom: 10px !important;
    width: 4px !important;
    background: #16a34a !important;
    border-radius: 0 4px 4px 0 !important;
}

.store-card-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 6px !important;
}

.store-branch-badge {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    color: #15803d !important;
    background: #dcfce7 !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.store-card-address {
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    line-height: 1.38 !important;
    margin-bottom: 6px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 6px !important;
}

.store-card-address i {
    color: #16a34a !important;
    margin-top: 3px !important;
    flex-shrink: 0 !important;
}

.store-card-meta {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    font-size: 0.76rem !important;
    color: #64748b !important;
    margin-bottom: 8px !important;
}

.store-card-meta span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.store-card-actions {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding-top: 6px !important;
    border-top: 1px dashed #e2e8f0 !important;
}

.btn-store-locate {
    padding: 4px 10px !important;
    border-radius: 8px !important;
    font-size: 0.74rem !important;
    font-weight: 600 !important;
    color: #15803d !important;
    background: #ffffff !important;
    border: 1px solid #86efac !important;
    transition: all 0.15s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    cursor: pointer !important;
}

.btn-store-locate:hover {
    background: #16a34a !important;
    color: #ffffff !important;
    border-color: #16a34a !important;
}

.btn-store-directions {
    padding: 4px 10px !important;
    border-radius: 8px !important;
    font-size: 0.74rem !important;
    font-weight: 600 !important;
    color: #0284c7 !important;
    background: #f0f9ff !important;
    border: 1px solid #bae6fd !important;
    transition: all 0.15s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    text-decoration: none !important;
}

.btn-store-directions:hover {
    background: #0284c7 !important;
    color: #ffffff !important;
}

/* Custom Leaflet Pharmacy Pin */
.custom-pharmacy-pin {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
}

.pin-body {
    width: 36px !important;
    height: 36px !important;
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
    border: 2px solid #ffffff !important;
    border-radius: 50% 50% 50% 0 !important;
    transform: rotate(-45deg) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.4) !important;
    transition: all 0.2s ease !important;
}

.pin-body i {
    transform: rotate(45deg) !important;
    font-size: 14px !important;
}

.custom-pharmacy-pin:hover .pin-body {
    transform: rotate(-45deg) scale(1.15) !important;
    box-shadow: 0 6px 18px rgba(22, 163, 74, 0.6) !important;
}

/* Leaflet Popup Styling */
.leaflet-popup-content-wrapper {
    border-radius: 14px !important;
    padding: 6px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid #e2e8f0 !important;
}

.leaflet-popup-content {
    margin: 8px 10px !important;
    line-height: 1.4 !important;
}

.leaflet-popup-tip {
    background: #ffffff !important;
}

.popup-store-card {
    font-family: inherit !important;
}

.popup-store-title {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    color: #166534 !important;
    margin-bottom: 4px !important;
}

.popup-store-address {
    font-size: 0.8rem !important;
    color: #334155 !important;
    margin-bottom: 6px !important;
}

.popup-store-hours {
    font-size: 0.74rem !important;
    color: #64748b !important;
    margin-bottom: 8px !important;
}

.popup-store-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 5px 12px !important;
    border-radius: 6px !important;
    background: #16a34a !important;
    color: #ffffff !important;
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

.popup-store-btn:hover {
    background: #15803d !important;
    color: #ffffff !important;
}

.btn-catalog-buy {
    flex: 1 !important;
    height: 38px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.25) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
}

.btn-catalog-buy:hover {
    background: linear-gradient(135deg, #15803d 0%, #166534 100%) !important;
    box-shadow: 0 6px 18px rgba(22, 163, 74, 0.35) !important;
    transform: translateY(-1px) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   AUTHENTICATION PAGES (SIGN IN, REGISTER, FORGOT PASSWORD)
   ========================================================================== */
.auth-page-wrapper {
    min-height: calc(100vh - 200px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 30px 15px 80px 15px !important;
    margin-top: 15px !important;
    background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 50%, #ecfdf5 100%) !important;
}

.auth-card {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 24px !important;
    padding: 36px 32px !important;
    box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(22, 163, 74, 0.04) !important;
    max-width: 480px !important;
    width: 100% !important;
    margin: 15px auto 40px auto !important;
    position: relative !important;
}

.auth-card-wide {
    max-width: 580px !important;
}

.auth-header {
    text-align: center !important;
    margin-bottom: 26px !important;
}

.auth-logo-stage {
    width: 80px !important;
    height: 80px !important;
    background: #ffffff !important;
    border: 1.5px solid #bbf7d0 !important;
    border-radius: 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 16px !important;
    box-shadow: 0 6px 20px rgba(22, 163, 74, 0.12) !important;
    padding: 8px !important;
}

.auth-logo-stage img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    display: block !important;
}

.auth-title {
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin-bottom: 6px !important;
    letter-spacing: -0.01em !important;
}

.auth-subtitle {
    font-size: 0.84rem !important;
    color: #64748b !important;
    margin-bottom: 0 !important;
}

.auth-field-group {
    margin-bottom: 18px !important;
}

.auth-label {
    font-size: 0.84rem !important;
    font-weight: 600 !important;
    color: #334155 !important;
    margin-bottom: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.auth-input-wrap {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

.auth-input-icon {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #16a34a !important;
    font-size: 0.95rem !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

.auth-input {
    height: 48px !important;
    padding-left: 42px !important;
    padding-right: 14px !important;
    border-radius: 12px !important;
    border: 1.5px solid #cbd5e1 !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    color: #0f172a !important;
    background: #ffffff !important;
    transition: all 0.2s ease !important;
    width: 100% !important;
}

.auth-input:focus {
    border-color: #16a34a !important;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15) !important;
    background: #ffffff !important;
}

.auth-input.has-toggle {
    padding-right: 42px !important;
}

.auth-pass-toggle {
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #94a3b8 !important;
    font-size: 0.95rem !important;
    cursor: pointer !important;
    padding: 4px !important;
    z-index: 3 !important;
    transition: color 0.15s ease !important;
}

.auth-pass-toggle:hover {
    color: #16a34a !important;
}

.auth-forgot-link {
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: #16a34a !important;
    text-decoration: none !important;
    transition: color 0.15s ease !important;
}

.auth-forgot-link:hover {
    color: #15803d !important;
    text-decoration: underline !important;
}

.btn-auth-submit {
    height: 48px !important;
    width: 100% !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-shadow: 0 6px 18px rgba(22, 163, 74, 0.3) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
    margin-top: 6px !important;
}

.btn-auth-submit:hover {
    background: linear-gradient(135deg, #15803d 0%, #166534 100%) !important;
    box-shadow: 0 10px 24px rgba(22, 163, 74, 0.4) !important;
    transform: translateY(-2px) !important;
    color: #ffffff !important;
}

.auth-footer {
    text-align: center !important;
    margin-top: 22px !important;
    padding-top: 18px !important;
    border-top: 1px dashed #e2e8f0 !important;
    font-size: 0.85rem !important;
    color: #475569 !important;
}

.auth-footer-link {
    color: #dc2626 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    margin-left: 4px !important;
}

.auth-footer-link:hover {
    color: #b91c1c !important;
    text-decoration: underline !important;
}

.auth-trust-badge {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-size: 0.76rem !important;
    color: #64748b !important;
    margin-top: 14px !important;
}

/* ==========================================================================
   DRIBBLE-GRADE LUXURY PRODUCT DETAIL HERO SECTION (DEFINITIVE FIX)
   ========================================================================== */
.prodetail-hero-card {
    background: #ffffff !important;
    border: 1px solid #f1f5f9 !important;
    border-radius: 28px !important;
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.05) !important;
    padding: 28px !important;
    margin-bottom: 24px !important;
    position: relative !important;
}

/* Gallery Container & Stage */
.prodetail-gallery-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}

.prodetail_img_wrapper {
    background: #ffffff !important;
    border: 1.5px solid #eef2f6 !important;
    border-radius: 24px !important;
    padding: 0 !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
}

/* Floating Official Badge */
.gallery-floating-badge {
    position: absolute !important;
    top: 14px !important;
    left: 14px !important;
    z-index: 15 !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid #dcfce7 !important;
    color: #15803d !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    box-shadow: 0 2px 10px rgba(22, 163, 74, 0.12) !important;
}

/* Owl Carousel Main Image - FULL WRAPPER EMBRACE */
#prodimg_carousel {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    background: #ffffff !important;
}

#prodimg_carousel .owl-stage-outer {
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    border-radius: 24px !important;
}

#prodimg_carousel .prodimg__img {
    width: 100% !important;
    height: 380px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    background: #ffffff !important;
    padding: 16px !important;
    box-sizing: border-box !important;
}

#prodimg_carousel .prodimg__img figure {
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
}

#prodimg_carousel .prodimg__img img {
    max-height: 348px !important;
    max-width: 95% !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    mix-blend-mode: multiply !important;
    margin: 0 auto !important;
    display: block !important;
    background: transparent !important;
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.08)) !important;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

#prodimg_carousel:hover .prodimg__img img {
    transform: scale(1.05) translateY(-3px) !important;
    filter: drop-shadow(0 18px 28px rgba(16, 185, 129, 0.2)) !important;
}

/* Floating Glassy Nav Arrows */
#prodimg_carousel .owl-nav button.owl-prev,
#prodimg_carousel .owl-nav button.owl-next {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid #e2e8f0 !important;
    color: #334155 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.25s ease !important;
    opacity: 0.9 !important;
    font-size: 1.05rem !important;
    z-index: 15 !important;
}

#prodimg_carousel .owl-nav button.owl-prev { left: 8px !important; }
#prodimg_carousel .owl-nav button.owl-next { right: 8px !important; }

#prodimg_carousel .owl-nav button.owl-prev:hover,
#prodimg_carousel .owl-nav button.owl-next:hover {
    background: #10b981 !important;
    color: #ffffff !important;
    border-color: #10b981 !important;
    box-shadow: 0 8px 22px rgba(16, 185, 129, 0.35) !important;
    transform: translateY(-50%) scale(1.1) !important;
}

/* Thumbnails Carousel */
#prodimg_carousel__thumb.owl-carousel {
    display: block !important;
    width: 100% !important;
    margin-top: 14px !important;
    padding: 0 !important;
}

#prodimg_carousel__thumb .owl-stage-outer {
    padding: 4px 2px !important;
}

#prodimg_carousel__thumb .prodimg__img {
    border-radius: 14px !important;
    border: 2px solid #edf2f7 !important;
    overflow: hidden !important;
    padding: 4px !important;
    background: #ffffff !important;
    transition: all 0.25s ease !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    aspect-ratio: 1 / 1 !important;
    height: 64px !important;
}

#prodimg_carousel__thumb .prodimg__img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    mix-blend-mode: multiply !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 8px !important;
}

#prodimg_carousel__thumb .owl-item.current .prodimg__img,
#prodimg_carousel__thumb .prodimg__img.selected,
#prodimg_carousel__thumb .prodimg__img:hover {
    border-color: #10b981 !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3) !important;
    transform: translateY(-2px) !important;
}

/* Gallery Assurance Pills under Image (Clean 1-line badges) */
.gallery-assurance-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 10px 14px !important;
    background: #f8fafc !important;
    border: 1px solid #f1f5f9 !important;
    border-radius: 14px !important;
}

.assurance-pill {
    font-size: 0.74rem !important;
    color: #475569 !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
}

/* Product Info Center Column */
.prodetail-top-meta {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
}

.dribbble-pill {
    font-size: 0.78rem !important;
    color: #475569 !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
}

.dribbble-pill-brand {
    background: #f0fdf4 !important;
    border-color: #bbf7d0 !important;
    color: #15803d !important;
    font-weight: 600 !important;
    max-width: 320px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.dribbble-pill-stock {
    background: #ecfdf5 !important;
    border-color: #a7f3d0 !important;
    color: #065f46 !important;
    font-weight: 600 !important;
}

.stock-dot-pulse {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #10b981 !important;
    display: inline-block !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25) !important;
}

.prodetail-modern-title {
    font-size: 1.65rem !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    line-height: 1.3 !important;
    margin: 0 0 10px 0 !important;
    letter-spacing: -0.01em !important;
}

/* Rating & Social Proof Row */
.prodetail-rating-row {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-bottom: 16px !important;
    font-size: 0.82rem !important;
}

.prodetail-rating-row .stars-gold {
    color: #f59e0b !important;
    font-size: 0.85rem !important;
}

.prodetail-rating-row .rating-score {
    font-weight: 700 !important;
    color: #b45309 !important;
}

.prodetail-rating-row .rating-reviews {
    color: #64748b !important;
}

.prodetail-rating-row .rating-divider {
    color: #cbd5e1 !important;
    margin: 0 4px !important;
}

.prodetail-rating-row .rating-sold {
    color: #0f172a !important;
    font-weight: 600 !important;
}

/* Price & Savings Display */
.prodetail-price-box {
    margin: 0 0 18px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.price-main-line {
    display: flex !important;
    align-items: baseline !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

.dribbble-price-val {
    font-size: 2.2rem !important;
    font-weight: 700 !important;
    color: #059669 !important;
    letter-spacing: -0.02em !important;
    line-height: 1 !important;
}

.dribbble-price-old {
    font-size: 1.15rem !important;
    color: #94a3b8 !important;
    text-decoration: line-through !important;
}

.dribbble-discount-badge {
    background: #fee2e2 !important;
    color: #ef4444 !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    padding: 3px 10px !important;
    border-radius: 20px !important;
}

.dribbble-unit-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 0.82rem !important;
    color: #334155 !important;
    background: #f1f5f9 !important;
    padding: 4px 14px !important;
    border-radius: 20px !important;
    width: fit-content !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
}

/* Hero Specs Chips Row (Placed gracefully under Price in the Hero section) */
.hero-specs-chips-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px 8px !important;
    margin-top: 10px !important;
    align-items: center !important;
}

.hero-spec-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 0.78rem !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    padding: 4px 10px !important;
    color: #334155 !important;
    max-width: 100% !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.hero-spec-chip:hover {
    background: #ecfdf5 !important;
    border-color: #a7f3d0 !important;
    color: #065f46 !important;
    transform: translateY(-1px) !important;
}

.hero-spec-chip i {
    color: #059669 !important;
    font-size: 0.75rem !important;
    flex-shrink: 0 !important;
}

.hero-spec-chip .hero-chip-lbl {
    font-weight: 600 !important;
    color: #64748b !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.hero-spec-chip .hero-chip-val {
    font-weight: 600 !important;
    color: #0f172a !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 380px !important;
}

@media (max-width: 767.98px) {
    .hero-spec-chip .hero-chip-val {
        max-width: 200px !important;
    }
}

/* Hero Summary Stack & Box (Dành cho thông số dài như Công dụng, Thành phần dưới giá) */
.hero-summary-stack {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 12px !important;
    margin-bottom: 8px !important;
}

.hero-summary-box {
    background: linear-gradient(145deg, #ffffff 0%, #f0fdf4 100%) !important;
    border: 1.5px solid #bbf7d0 !important;
    border-left: 4px solid #10b981 !important;
    border-radius: 16px !important;
    padding: 12px 16px !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.08), 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.hero-summary-box:hover {
    border-color: #86efac !important;
    border-left-color: #059669 !important;
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.12) !important;
    transform: translateY(-1px) !important;
}

.hero-summary-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 8px !important;
    gap: 8px !important;
}

.hero-summary-pill {
    background: #dcfce7 !important;
    color: #065f46 !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    padding: 3px 10px !important;
    border-radius: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    border: 1px solid #bbf7d0 !important;
    letter-spacing: 0.2px !important;
}

.hero-summary-pill i {
    color: #059669 !important;
    font-size: 0.78rem !important;
}

.hero-summary-badge-sub {
    font-size: 0.72rem !important;
    color: #059669 !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    opacity: 0.9 !important;
}

.hero-summary-body {
    font-size: 0.84rem !important;
    color: #334155 !important;
    line-height: 1.55 !important;
}

.hero-summary-text {
    margin: 0 !important;
    color: #334155 !important;
    font-size: 0.84rem !important;
    line-height: 1.55 !important;
    font-weight: 450 !important;
}

.hero-summary-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.hero-summary-list li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    font-size: 0.83rem !important;
    color: #334155 !important;
    line-height: 1.5 !important;
}

.hero-list-icon {
    color: #10b981 !important;
    font-size: 0.8rem !important;
    margin-top: 3px !important;
    flex-shrink: 0 !important;
}

/* Promotion Card */
.prodetail-promo-card {
    background: linear-gradient(135deg, #f0fdf4 0%, #f7fee7 100%) !important;
    border: 1.5px dashed #86efac !important;
    border-radius: 18px !important;
    padding: 14px 18px !important;
    margin-bottom: 20px !important;
}

.promo-header-line {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
}

.badge-dribbble-gift {
    background: #10b981 !important;
    color: #ffffff !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.promo-sub {
    font-size: 0.75rem !important;
    color: #64748b !important;
}

.promo-body {
    font-size: 0.84rem !important;
    color: #1e293b !important;
}

.promo-body p {
    margin: 0 0 6px 0 !important;
    line-height: 1.4 !important;
}

.promo-body p:last-child {
    margin-bottom: 0 !important;
}

/* Action Buttons - VIBRANT HIGH CONVERSION CTA */
.btn-modern-buynow {
    background: linear-gradient(135deg, #059669 0%, #10b981 50%, #047857 100%) !important;
    background-size: 200% auto !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 18px !important;
    padding: 12px 22px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    box-shadow: 0 14px 30px -5px rgba(16, 185, 129, 0.45) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
    text-decoration: none !important;
}

.btn-modern-buynow:hover {
    background-position: right center !important;
    box-shadow: 0 18px 36px -6px rgba(16, 185, 129, 0.6) !important;
    transform: translateY(-2px) !important;
    color: #ffffff !important;
}

.buynow-icon {
    font-size: 1.6rem !important;
    line-height: 1 !important;
    animation: pulse 1.5s infinite !important;
}

.buynow-text {
    display: flex !important;
    flex-direction: column !important;
    text-align: left !important;
}

.buynow-main {
    font-size: 1.08rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
}

.buynow-sub {
    font-size: 0.74rem !important;
    font-weight: 400 !important;
    opacity: 0.92 !important;
}

.action-sub-buttons {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    margin-top: 12px !important;
}

.btn-modern-addcart {
    background: #ecfdf5 !important;
    border: 2px solid #10b981 !important;
    color: #047857 !important;
    border-radius: 16px !important;
    height: 50px !important;
    font-weight: 600 !important;
    font-size: 0.92rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    transition: all 0.25s ease !important;
    cursor: pointer !important;
}

.btn-modern-addcart:hover {
    background: #10b981 !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3) !important;
    transform: translateY(-1px) !important;
}

.btn-modern-installment {
    background: #eff6ff !important;
    border: 2px solid #3b82f6 !important;
    color: #1d4ed8 !important;
    border-radius: 16px !important;
    height: 50px !important;
    font-weight: 600 !important;
    font-size: 0.92rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    transition: all 0.25s ease !important;
    cursor: pointer !important;
}

.btn-modern-addcart:hover {
    background: #10b981 !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3) !important;
    transform: translateY(-1px) !important;
}

.btn-modern-installment {
    background: #eff6ff !important;
    border: 2px solid #3b82f6 !important;
    color: #1d4ed8 !important;
    border-radius: 16px !important;
    height: 50px !important;
    font-weight: 700 !important;
    font-size: 0.92rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    transition: all 0.25s ease !important;
    cursor: pointer !important;
}

.btn-modern-installment:hover {
    background: #3b82f6 !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3) !important;
    transform: translateY(-1px) !important;
}

/* Full-Width Horizontal 4-Pillar Trust Strip (Spacious & Beautiful) */
.prodetail-horizontal-trust-strip {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 14px !important;
    margin-top: 24px !important;
    padding-top: 20px !important;
    border-top: 1px solid #f1f5f9 !important;
}

@media (max-width: 991px) {
    .prodetail-horizontal-trust-strip {
        grid-template-columns: 1fr 1fr !important;
    }
}

.trust-strip-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: #f8fafc !important;
    border: 1px solid #f1f5f9 !important;
    border-radius: 16px !important;
    padding: 12px 14px !important;
    transition: all 0.2s ease !important;
}

.trust-strip-item:hover {
    background: #ffffff !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
    transform: translateY(-2px) !important;
}

.trust-strip-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.05rem !important;
    flex-shrink: 0 !important;
}

.icon-amber { background: #fef3c7 !important; color: #d97706 !important; }
.icon-green { background: #dcfce7 !important; color: #15803d !important; }
.icon-blue { background: #dbeafe !important; color: #1d4ed8 !important; }
.icon-purple { background: #f3e8ff !important; color: #7e22ce !important; }

.trust-strip-info {
    display: flex !important;
    flex-direction: column !important;
    line-height: 1.25 !important;
}

.trust-strip-info b {
    font-size: 0.82rem !important;
    color: #0f172a !important;
    font-weight: 700 !important;
}

.trust-strip-info span {
    font-size: 0.72rem !important;
    color: #64748b !important;
}

/* ==========================================================================
   PHARMACY CONCIERGE & STORE AVAILABILITY SIDEBAR (RIGHT COLUMN)
   ========================================================================== */
.prodetail-sidebar-stack {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

/* Modern Store Availability Card */
.prodetail-store-card {
    background: #ffffff !important;
    border: 1px solid #f1f5f9 !important;
    border-radius: 24px !important;
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.05) !important;
    padding: 20px !important;
    overflow: hidden !important;
}

.dribbble-store-header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 14px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.store-avatar-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    background: #f0fdf4 !important;
    border: 1px solid #bbf7d0 !important;
    color: #10b981 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.1rem !important;
    flex-shrink: 0 !important;
}

.store-header-title {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    display: block !important;
    line-height: 1.2 !important;
}

.store-header-sub {
    font-size: 0.72rem !important;
    color: #64748b !important;
}

.store-filter-bar {
    margin-bottom: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.store-select {
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
    font-size: 0.8rem !important;
    color: #334155 !important;
    height: 38px !important;
    padding: 0 12px !important;
    transition: all 0.2s ease !important;
}

.store-select:focus {
    background: #ffffff !important;
    border-color: #10b981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important;
}

.store-list-custom {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    max-height: 280px !important;
    overflow-y: auto !important;
}

.store-list-custom::-webkit-scrollbar {
    width: 4px !important;
}

.store-list-custom::-webkit-scrollbar-thumb {
    background: #e2e8f0 !important;
    border-radius: 10px !important;
}

.prodetail__liststore > li::before,
.prodetail__liststore > li::after {
    display: none !important;
    content: none !important;
}

.store-list-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 12px 14px !important;
    border-radius: 14px !important;
    margin-bottom: 8px !important;
    background: #f8fafc !important;
    border: 1px solid #f1f5f9 !important;
    transition: all 0.25s ease !important;
    cursor: pointer !important;
}

.store-list-item:hover {
    background: #f0fdf4 !important;
    border-color: #bbf7d0 !important;
    transform: translateX(3px) !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.08) !important;
}

.store-list-item .store-pin {
    width: 32px !important;
    height: 32px !important;
    border-radius: 10px !important;
    background: #ecfdf5 !important;
    border: 1px solid #a7f3d0 !important;
    color: #059669 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.95rem !important;
    flex-shrink: 0 !important;
    margin-top: 1px !important;
}

.store-list-item .store-pin i {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

.store-item-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.store-item-addr {
    font-size: 0.78rem !important;
    color: #1e293b !important;
    line-height: 1.35 !important;
    font-weight: 500 !important;
}

.store-item-status {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    color: #15803d !important;
}

/* Pharmacist Consultation Card */
.prodetail-pharmacist-card {
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%) !important;
    border: 1px solid #bbf7d0 !important;
    border-radius: 24px !important;
    padding: 16px 18px !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.06) !important;
}

.pharmacist-avatar {
    width: 46px !important;
    height: 46px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    border: 1.5px solid #86efac !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.3rem !important;
    flex-shrink: 0 !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15) !important;
}

.pharmacist-content {
    display: flex !important;
    flex-direction: column !important;
    line-height: 1.2 !important;
}

.pharmacist-content b {
    font-size: 0.85rem !important;
    color: #065f46 !important;
    font-weight: 700 !important;
}

.pharmacist-content span {
    font-size: 0.72rem !important;
    color: #059669 !important;
    margin-bottom: 4px !important;
}

.pharmacist-hotline {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #047857 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    transition: transform 0.2s ease !important;
}

.pharmacist-hotline:hover {
    color: #065f46 !important;
    transform: scale(1.04) !important;
}

/* Quality Assurance Guarantee Card (Right Column) */
.prodetail-guarantee-card {
    background: #ffffff !important;
    border: 1px solid #f1f5f9 !important;
    border-radius: 20px !important;
    padding: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.guarantee-card-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 0.76rem !important;
    color: #334155 !important;
    font-weight: 600 !important;
}

.guarantee-icon {
    width: 24px !important;
    height: 24px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.75rem !important;
    flex-shrink: 0 !important;
}

/* ==========================================================================
   DRIBBLE-GRADE PRODUCT DETAIL LOWER BODY (SPECS, REVIEWS, Q&A, RELATED)
   ========================================================================== */

/* Universal Modern Section Card */
.prodetail-modern-card {
    background: #ffffff !important;
    border: 1px solid #f1f5f9 !important;
    border-radius: 24px !important;
    padding: 24px !important;
    box-shadow: 0 10px 35px -10px rgba(0, 0, 0, 0.04) !important;
    margin-bottom: 24px !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Dribbble Section Header with Icon Accent */
.dribbble-section-header {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    margin-bottom: 18px !important;
}

.section-header-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.2rem !important;
    flex-shrink: 0 !important;
}

.section-title {
    font-size: 1.18rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 !important;
    line-height: 1.25 !important;
}

.section-sub {
    font-size: 0.78rem !important;
    color: #64748b !important;
}

/* Content Collapse & Toggle Button */
.prodetail-desc-card .prodetail__box__content_collapse {
    color: #334155 !important;
    font-size: 0.92rem !important;
    line-height: 1.7 !important;
}

.prodetail-desc-card .prodetail__box__content_collapse h1,
.prodetail-desc-card .prodetail__box__content_collapse h2,
.prodetail-desc-card .prodetail__box__content_collapse h3,
.prodetail-desc-card .prodetail__box__content_collapse h4 {
    color: #0f172a !important;
    font-weight: 700 !important;
    margin-top: 18px !important;
    margin-bottom: 8px !important;
}

.prodetail-desc-card .prodetail__box__content_collapse p {
    margin-bottom: 12px !important;
}

.btn-dribbble-expand {
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    color: #059669 !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    padding: 9px 26px !important;
    border-radius: 25px !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.btn-dribbble-expand:hover {
    background: #ecfdf5 !important;
    border-color: #10b981 !important;
    color: #047857 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.2) !important;
}

/* Reviews & Ratings Section */
.rating-score-badge-card {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important;
    border: 1.5px solid #fde68a !important;
    border-radius: 20px !important;
    padding: 22px 18px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 18px rgba(245, 158, 11, 0.08) !important;
}

.rating-score-number {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}

.rating-score-number .score-val {
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    color: #b45309 !important;
    line-height: 1 !important;
}

.rating-score-number .score-max {
    font-size: 1.2rem !important;
    color: #92400e !important;
    font-weight: 600 !important;
}

.rating-stars-row {
    color: #f59e0b !important;
    font-size: 1.05rem !important;
    letter-spacing: 2px !important;
}

.rating-satisfied-pill {
    background: #ffffff !important;
    border: 1px solid #fcd34d !important;
    color: #78350f !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.btn-modern-write-review {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 14px !important;
    padding: 10px 20px !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    width: 100% !important;
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.3) !important;
    transition: all 0.25s ease !important;
}

.btn-modern-write-review:hover {
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.45) !important;
    transform: translateY(-2px) !important;
    color: #ffffff !important;
}

/* Rating Bars Stack */
.rating-bars-stack {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.rating-bar-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 0.8rem !important;
    color: #475569 !important;
}

.rating-bar-stars {
    width: 80px !important;
    color: #f59e0b !important;
    font-size: 0.76rem !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
}

.rating-progress-custom {
    flex: 1 !important;
    height: 9px !important;
    border-radius: 10px !important;
    background: #f1f5f9 !important;
    overflow: hidden !important;
}

.rating-progress-fill {
    height: 100% !important;
    border-radius: 10px !important;
    background: linear-gradient(90deg, #f59e0b, #fbbf24) !important;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.rating-bar-count {
    width: 70px !important;
    text-align: right !important;
    font-size: 0.76rem !important;
    color: #64748b !important;
    flex-shrink: 0 !important;
}

/* Q&A Section */
.qa-input-box {
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 18px !important;
    padding: 14px !important;
    transition: all 0.25s ease !important;
}

.qa-input-box:focus-within {
    background: #ffffff !important;
    border-color: #10b981 !important;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12) !important;
}

.qa-textarea {
    border: none !important;
    background: transparent !important;
    font-size: 0.88rem !important;
    color: #1e293b !important;
    resize: vertical !important;
    min-height: 70px !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.qa-textarea:focus {
    box-shadow: none !important;
    background: transparent !important;
}

.qa-input-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-top: 10px !important;
    margin-top: 8px !important;
    border-top: 1px solid #eef2f6 !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.qa-tip {
    font-size: 0.74rem !important;
    color: #64748b !important;
}

.btn-modern-send-qa {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 8px 18px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.2s ease !important;
}

.btn-modern-send-qa:hover {
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3) !important;
    transform: translateY(-1px) !important;
}

/* Specs / Ingredients Table */
.table-specs-dribbble {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 6px !important;
}

.table-specs-dribbble tr {
    background: #f8fafc !important;
    border-radius: 12px !important;
    transition: background 0.2s ease !important;
}

.table-specs-dribbble tr:hover {
    background: #f0fdf4 !important;
}

.table-specs-dribbble td {
    padding: 10px 14px !important;
    font-size: 0.82rem !important;
    border: none !important;
}

.table-specs-dribbble td:first-child {
    border-radius: 12px 0 0 12px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    width: 38% !important;
}

.table-specs-dribbble td:last-child {
    border-radius: 0 12px 12px 0 !important;
    color: #0f172a !important;
}

.btn-dribbble-specs-modal {
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    color: #7e22ce !important;
    font-weight: 600 !important;
    font-size: 0.82rem !important;
    padding: 8px 18px !important;
    border-radius: 20px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.2s ease !important;
}

.btn-dribbble-specs-modal:hover {
    background: #faf5ff !important;
    border-color: #c084fc !important;
    color: #6b21a8 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(168, 85, 247, 0.15) !important;
}

/* Suggest Product Stack (Right Column) */
.suggest-product-stack {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.suggest-product-item {
    background: #f8fafc !important;
    border: 1px solid #f1f5f9 !important;
    border-radius: 16px !important;
    padding: 10px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.suggest-product-item:hover {
    background: #ffffff !important;
    border-color: #bbf7d0 !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06) !important;
    transform: translateY(-2px) !important;
}

.suggest-item-link {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    text-decoration: none !important;
}

.suggest-thumb {
    width: 64px !important;
    height: 64px !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    border: 1px solid #eef2f6 !important;
    padding: 4px !important;
    flex-shrink: 0 !important;
    position: relative !important;
    overflow: hidden !important;
}

.suggest-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    mix-blend-mode: multiply !important;
}

.suggest-badge-sale {
    position: absolute !important;
    top: 2px !important;
    left: 2px !important;
    background: #ef4444 !important;
    color: #ffffff !important;
    font-size: 0.6rem !important;
    font-weight: 700 !important;
    padding: 1px 5px !important;
    border-radius: 10px !important;
}

.suggest-info {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    min-width: 0 !important;
}

.suggest-name {
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.suggest-price-row {
    display: flex !important;
    align-items: baseline !important;
    gap: 6px !important;
}

.suggest-price-row .price-cur {
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    color: #059669 !important;
}

.suggest-price-row .price-old {
    font-size: 0.72rem !important;
    color: #94a3b8 !important;
    text-decoration: line-through !important;
}

.suggest-stars {
    font-size: 0.65rem !important;
    color: #f59e0b !important;
}

/* Recently Viewed Cards */
.dribbble-recent-item-card {
    background: #ffffff !important;
    border: 1px solid #f1f5f9 !important;
    border-radius: 18px !important;
    padding: 12px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    height: 100% !important;
}

.dribbble-recent-item-card:hover {
    border-color: #bbf7d0 !important;
    box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.15) !important;
    transform: translateY(-4px) !important;
}

.recent-card-link {
    text-decoration: none !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.recent-thumb-wrapper {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    background: #f8fafc !important;
    border-radius: 14px !important;
    padding: 10px !important;
    position: relative !important;
    overflow: hidden !important;
    margin-bottom: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.recent-thumb-wrapper img {
    max-height: 100% !important;
    max-width: 100% !important;
    object-fit: contain !important;
    mix-blend-mode: multiply !important;
    transition: transform 0.3s ease !important;
}

.dribbble-recent-item-card:hover .recent-thumb-wrapper img {
    transform: scale(1.08) !important;
}

.recent-badge-discount {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: #ffffff !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    padding: 3px 8px !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.35) !important;
    letter-spacing: 0.2px !important;
    z-index: 2 !important;
}

.recent-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    flex-grow: 1 !important;
}

.recent-title {
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    margin: 0 !important;
    line-height: 1.35 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: 2.7em !important;
}

.recent-price-box {
    display: flex !important;
    align-items: baseline !important;
    gap: 6px !important;
    margin-top: auto !important;
    flex-wrap: wrap !important;
}

.recent-price-main {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #059669 !important;
}

.recent-price-old {
    font-size: 0.76rem !important;
    color: #94a3b8 !important;
    text-decoration: line-through !important;
}

/* ==========================================================================
   COMPACT 1-LINE SPECS STRIP (Macro Cleanliness & Zero Visual Overload)
   ========================================================================== */
.dribbble-specs-line-strip {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px 10px !important;
    padding: 10px 14px !important;
    background: #f8fafc !important;
    border: 1px solid #f1f5f9 !important;
    border-radius: 16px !important;
    margin-bottom: 16px !important;
    align-items: center !important;
}

.specs-line-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 0.8rem !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    padding: 4px 12px !important;
    color: #334155 !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

.specs-line-chip:hover {
    border-color: #a7f3d0 !important;
    background: #ecfdf5 !important;
    color: #065f46 !important;
    transform: translateY(-1px) !important;
}

.specs-line-chip i {
    color: #10b981 !important;
    font-size: 0.78rem !important;
}

.specs-line-chip .chip-lbl {
    font-weight: 600 !important;
    color: #64748b !important;
}

.specs-line-chip .chip-val {
    font-weight: 600 !important;
    color: #0f172a !important;
}


/* FAQ Quick Chips */
.faq-chips-wrapper {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    margin-bottom: 12px !important;
}

.faq-quick-chip {
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    color: #334155 !important;
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    padding: 5px 12px !important;
    border-radius: 20px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.faq-quick-chip:hover {
    background: #ecfdf5 !important;
    border-color: #10b981 !important;
    color: #059669 !important;
    transform: translateY(-1px) !important;
}

/* Empty Review Banner with Warm Invite */
.empty-review-banner {
    background: linear-gradient(135deg, #f8fafc 0%, #f0fdf4 100%) !important;
    border: 1.5px dashed #bbf7d0 !important;
    border-radius: 18px !important;
    padding: 24px 20px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

.empty-review-icon {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    background: #ecfdf5 !important;
    color: #059669 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.4rem !important;
    margin-bottom: 4px !important;
}

.empty-review-title {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 !important;
}

.empty-review-sub {
    font-size: 0.8rem !important;
    color: #64748b !important;
    max-width: 420px !important;
    margin: 0 !important;
}

/* Pharmacist Trust & Hotline Box (Sidebar) */
.pharmacist-sidebar-card {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%) !important;
    border: 1.5px solid #a7f3d0 !important;
    border-radius: 20px !important;
    padding: 18px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.08) !important;
}

.pharmacist-sidebar-header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
}

.pharmacist-sidebar-avatar {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    border: 2px solid #10b981 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.2rem !important;
    color: #059669 !important;
    flex-shrink: 0 !important;
}

.pharmacist-sidebar-info h5 {
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    color: #065f46 !important;
    margin: 0 !important;
}

.pharmacist-sidebar-info span {
    font-size: 0.74rem !important;
    color: #059669 !important;
}

.pharmacist-assurance-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: 10px !important;
    padding-top: 10px !important;
    border-top: 1px dashed #6ee7b7 !important;
}

.pharmacist-assurance-item {
    font-size: 0.78rem !important;
    color: #064e3b !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.pharmacist-hotline-btn {
    background: #059669 !important;
    color: #ffffff !important;
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    padding: 8px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    margin-top: 12px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.25) !important;
}

.pharmacist-hotline-btn:hover {
    background: #047857 !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(5, 150, 105, 0.35) !important;
}

/* ==========================================================================
   BENTO TRUST BENEFIT GRID (4-Column Balanced Dribbble Bento Grid)
   ========================================================================== */
.bento-trust-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
}

@media (max-width: 991px) {
    .bento-trust-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
}

@media (max-width: 575px) {
    .bento-trust-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
}

.bento-trust-card {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 18px !important;
    padding: 16px 18px !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02) !important;
    position: relative !important;
    text-decoration: none !important;
}

.bento-trust-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06) !important;
    border-color: #cbd5e1 !important;
}

.bento-trust-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.25rem !important;
    flex-shrink: 0 !important;
    transition: transform 0.25s ease !important;
}

.bento-trust-card:hover .bento-trust-icon {
    transform: scale(1.08) rotate(3deg) !important;
}

/* Color Accents */
.bento-trust-icon.icon-emerald {
    background: #ecfdf5 !important;
    color: #059669 !important;
    border: 1px solid #a7f3d0 !important;
}

.bento-trust-icon.icon-blue {
    background: #eff6ff !important;
    color: #2563eb !important;
    border: 1px solid #bfdbfe !important;
}

.bento-trust-icon.icon-purple {
    background: #faf5ff !important;
    color: #9333ea !important;
    border: 1px solid #e9d5ff !important;
}

.bento-trust-icon.icon-amber {
    background: #fffbeb !important;
    color: #d97706 !important;
    border: 1px solid #fde68a !important;
}

/* Card Content */
.bento-trust-info {
    flex-grow: 1 !important;
    min-width: 0 !important;
}

.bento-trust-title {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin-bottom: 2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
}

.bento-trust-sub {
    font-size: 0.78rem !important;
    color: #64748b !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
}

/* Special styling for Pharmacist CTA Card */
.bento-trust-card.card-pharmacist {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%) !important;
    border-color: #a7f3d0 !important;
}

.bento-trust-card.card-pharmacist .bento-trust-title {
    color: #065f46 !important;
}

.bento-trust-card.card-pharmacist .bento-trust-sub {
    color: #059669 !important;
    font-weight: 600 !important;
}

.bento-trust-card.card-pharmacist:hover {
    border-color: #34d399 !important;
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.15) !important;
}


/* Auto-Fit Recent Products Grid */
.recent-products-auto-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important;
    gap: 16px !important;
}

/* ==========================================================================
   EDITORIAL MEDICAL TYPOGRAPHY (Polishes raw description HTML / CKEditor)
   ========================================================================== */
.product-article-body {
    color: #334155 !important;
    font-size: 0.92rem !important;
    line-height: 1.75 !important;
}

/* ==========================================================================
   EDITORIAL BENTO SECTION CARDS (Transforms flat article text into rich cards)
   ========================================================================== */
.editorial-section-card {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 18px !important;
    padding: 20px 24px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.25s ease !important;
}

.editorial-section-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06) !important;
    transform: translateY(-2px) !important;
}

/* Card Header */
.editorial-card-header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 14px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.editorial-badge-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.05rem !important;
    flex-shrink: 0 !important;
}

.editorial-card-title {
    font-size: 1.02rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 !important;
}

/* Card Body */
.editorial-card-body {
    color: #334155 !important;
    font-size: 0.92rem !important;
    line-height: 1.75 !important;
}

.editorial-card-body p {
    margin-bottom: 12px !important;
}

.editorial-card-body p:last-child {
    margin-bottom: 0 !important;
}

/* Sub-headings inside card body */
.editorial-card-body h5,
.editorial-card-body h6,
.editorial-card-body strong,
.editorial-card-body b {
    color: #0f172a !important;
    font-weight: 700 !important;
}

/* Theme Emerald (Công dụng, Lợi ích, Thành phần) */
.editorial-section-card.theme-emerald {
    border-color: #d1fae5 !important;
    border-left: 4px solid #10b981 !important;
    background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 40%) !important;
}
.editorial-section-card.theme-emerald .editorial-badge-icon {
    background: #d1fae5 !important;
    color: #059669 !important;
}
.editorial-section-card.theme-emerald .editorial-card-title {
    color: #065f46 !important;
}

/* Theme Blue (Cách dùng, Liều dùng, Hướng dẫn, Đối tượng) */
.editorial-section-card.theme-blue {
    border-color: #dbeafe !important;
    border-left: 4px solid #3b82f6 !important;
    background: linear-gradient(180deg, #eff6ff 0%, #ffffff 40%) !important;
}
.editorial-section-card.theme-blue .editorial-badge-icon {
    background: #dbeafe !important;
    color: #2563eb !important;
}
.editorial-section-card.theme-blue .editorial-card-title {
    color: #1e40af !important;
}

/* Theme Amber (Lưu ý, Cảnh báo, Thận trọng, Tác dụng phụ - Standout Alert Callout) */
.editorial-section-card.theme-amber {
    border: 1.5px solid #fde68a !important;
    border-left: 5px solid #f59e0b !important;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important;
    box-shadow: 0 4px 18px rgba(245, 158, 11, 0.12) !important;
}

.editorial-section-card.theme-amber .editorial-card-header {
    border-bottom: 1px solid #fde68a !important;
}

.editorial-section-card.theme-amber .editorial-badge-icon {
    background: #fef08a !important;
    border: 1.5px solid #f59e0b !important;
    color: #b45309 !important;
    font-size: 1.15rem !important;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.25) !important;
}

.editorial-section-card.theme-amber .editorial-card-title {
    color: #92400e !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    letter-spacing: 0.2px !important;
}

.editorial-section-card.theme-amber .editorial-card-body {
    color: #78350f !important;
    font-size: 0.92rem !important;
    font-weight: 500 !important;
    line-height: 1.75 !important;
}

.editorial-section-card.theme-amber .editorial-card-body p {
    color: #78350f !important;
    position: relative !important;
    padding-left: 18px !important;
    margin-bottom: 8px !important;
}

.editorial-section-card.theme-amber .editorial-card-body p::before {
    content: "•" !important;
    position: absolute !important;
    left: 4px !important;
    top: 0 !important;
    color: #d97706 !important;
    font-size: 1.3rem !important;
    line-height: 1.4 !important;
}

.editorial-section-card.theme-amber:hover {
    box-shadow: 0 8px 26px rgba(245, 158, 11, 0.2) !important;
    border-color: #fcd34d !important;
    transform: translateY(-2px) !important;
}


/* Theme Sky (Bảo quản, Hạn dùng, Quy cách) */
.editorial-section-card.theme-sky {
    border-color: #e0e7ff !important;
    border-left: 4px solid #6366f1 !important;
    background: linear-gradient(180deg, #eef2ff 0%, #ffffff 40%) !important;
}
.editorial-section-card.theme-sky .editorial-badge-icon {
    background: #e0e7ff !important;
    color: #4f46e5 !important;
}
.editorial-section-card.theme-sky .editorial-card-title {
    color: #3730a3 !important;
}


/* Article Tables (Transforms raw HTML tables into modern medical spec sheets) */
.product-article-body table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    margin: 16px 0 20px 0 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03) !important;
    background: #ffffff !important;
}

.product-article-body table thead tr,
.product-article-body table tr:first-child:has(th) {
    background: #f8fafc !important;
}

.product-article-body table th {
    background: #f8fafc !important;
    color: #047857 !important;
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 12px 18px !important;
    border-bottom: 1.5px solid #e2e8f0 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
}

.product-article-body table td {
    padding: 10px 18px !important;
    font-size: 0.86rem !important;
    color: #334155 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    vertical-align: middle !important;
    line-height: 1.5 !important;
}

.product-article-body table td:first-child {
    font-weight: 600 !important;
    color: #1e293b !important;
    width: 60% !important;
}

.product-article-body table td:last-child {
    width: 40% !important;
    text-align: right !important;
}

.product-article-body table th:last-child {
    text-align: right !important;
}

/* Badge for Ingredients WITH specific Dosage / Amount */
.ingredient-amount-badge {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%) !important;
    border: 1px solid #86efac !important;
    color: #047857 !important;
    font-weight: 700 !important;
    font-size: 0.82rem !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.12) !important;
    letter-spacing: 0.3px !important;
}

.table-dash-muted {
    color: #94a3b8 !important;
    font-weight: 400 !important;
    font-size: 0.9rem !important;
}

/* ==========================================================================
   AUTHENTIC INGREDIENT CHIPS GRID (Premium Dribbble Flow Layout 2026)
   ========================================================================== */
.article-ingredient-chips-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 18px 0 24px 0 !important;
    padding: 18px 22px !important;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 20px !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02), 0 4px 16px rgba(0, 0, 0, 0.03) !important;
}

.article-ingr-chip {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 50px !important;
    padding: 7px 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 0.88rem !important;
    color: #1e293b !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: default !important;
    user-select: none !important;
}

.article-ingr-chip .chip-icon {
    font-size: 0.72rem !important;
    color: #10b981 !important;
    opacity: 0.85 !important;
    transition: transform 0.2s ease !important;
}

.article-ingr-chip:hover {
    background: #ffffff !important;
    border-color: #10b981 !important;
    color: #047857 !important;
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.14) !important;
}

.article-ingr-chip:hover .chip-icon {
    transform: scale(1.2) rotate(10deg) !important;
}

/* Standout Dosage-bearing Pill (Star Ingredient) */
.article-ingr-chip.has-dosage {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%) !important;
    border: 1.5px solid #34d399 !important;
    color: #064e3b !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.2) !important;
    padding: 6px 8px 6px 16px !important;
}

.article-ingr-chip.has-dosage .chip-icon {
    color: #059669 !important;
    font-size: 0.82rem !important;
    opacity: 1 !important;
}

.article-ingr-chip.has-dosage:hover {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%) !important;
    border-color: #059669 !important;
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3) !important;
    transform: translateY(-2px) scale(1.03) !important;
}

.article-ingr-chip .chip-name {
    display: inline-block !important;
    letter-spacing: 0.1px !important;
}

.article-ingr-chip .chip-dosage {
    background: #059669 !important;
    color: #ffffff !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    letter-spacing: 0.3px !important;
    box-shadow: 0 2px 6px rgba(5, 150, 105, 0.35) !important;
    margin-left: 2px !important;
    display: inline-flex !important;
    align-items: center !important;
}




.product-article-body table tr:last-child td {
    border-bottom: none !important;
}

.product-article-body table tbody tr:nth-child(even),
.product-article-body table tr:nth-child(even) {
    background: #fafafa !important;
}

.product-article-body table tbody tr:hover,
.product-article-body table tr:hover {
    background: #f0fdf4 !important;
    color: #065f46 !important;
}

/* Article Lists */
.product-article-body ul,
.product-article-body ol {
    padding-left: 22px !important;
    margin-bottom: 14px !important;
    color: #334155 !important;
}

.product-article-body li {
    margin-bottom: 6px !important;
    line-height: 1.7 !important;
}

/* Article Images */
.product-article-body img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 16px !important;
    margin: 16px auto !important;
    display: block !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
}

/* Smooth Fade Overlay & Proper Height for Collapsible Content */
.prodetail-desc-card .prodetail__box__content_collapse {
    position: relative !important;
    overflow: hidden !important;
    transition: max-height 0.4s ease !important;
}

/* Khi chưa mở rộng - Tối ưu 350px để người dùng không bị ngợp thông tin */
.prodetail-desc-card .prodetail__box__content:not(.content-show) .prodetail__box__content_collapse {
    max-height: 350px !important;
}

.prodetail-desc-card .prodetail__box__content:not(.content-show) .prodetail__box__content_collapse::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: auto !important; right: 0 !important;
    right: 0 !important;
    height: 100px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 75%, #ffffff 100%) !important;
    pointer-events: none !important;
}

/* Khi đã mở rộng */
.prodetail-desc-card .prodetail__box__content.content-show .prodetail__box__content_collapse {
    max-height: none !important;
    overflow: visible !important;
}

.prodetail-desc-card .prodetail__box__content.content-show .prodetail__box__content_collapse::after {
    display: none !important;
    content: none !important;
}

/* Fix nút expander: loại bỏ icon thừa từ layout-home.css */
.btn-dribbble-expand span::after,
.prodetail__box__content_action span::after,
.content-show .prodetail__box__content_action span::after {
    display: none !important;
    content: none !important;
}

.prodetail__box__content:not(.content-show) .prodetail__box__content_action .show-max {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.prodetail__box__content:not(.content-show) .prodetail__box__content_action .show-min {
    display: none !important;
}

.prodetail__box__content.content-show .prodetail__box__content_action .show-max {
    display: none !important;
}

.prodetail__box__content.content-show .prodetail__box__content_action .show-min {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* ==========================================================================
   MODERN USER ACCOUNT DROPDOWN (Dribbble Profile Menu)
   ========================================================================== */
.user-account-dropdown-wrap {
    position: relative !important;
}

.modern-user-dropdown {
    position: absolute !important;
    top: 100% !important;
    bottom: auto !important;
    right: 0 !important;
    left: auto !important;
    transform: none !important;
    min-width: 275px !important;
    width: 275px !important;
    height: auto !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    padding: 10px !important;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16), 0 4px 12px rgba(15, 23, 42, 0.06) !important;
    margin-top: 8px !important;
    z-index: 999999 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

.modern-user-dropdown.show {
    display: flex !important;
    flex-direction: column !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    top: 100% !important;
    bottom: auto !important;
    right: 0 !important;
    left: auto !important;
    transform: none !important;
}

@media (max-width: 576px) {
    .modern-user-dropdown {
        right: -6px !important;
        min-width: 255px !important;
        max-width: calc(100vw - 16px) !important;
        width: 260px !important;
    }
}

.user-account-dropdown-wrap:hover .modern-user-dropdown,
.modern-user-dropdown:hover {
    display: flex !important;
    flex-direction: column !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Generous Invisible Hover Bridge so mouse movement never hides the dropdown */
.modern-user-dropdown::before {
    content: '' !important;
    position: absolute !important;
    top: -24px !important;
    left: -20px !important;
    right: -20px !important;
    height: 28px !important;
    background: transparent !important;
    display: block !important;
    pointer-events: auto !important;
    z-index: 10 !important;
}

.header-account-pill {
    position: relative !important;
}

.header-account-pill::after {
    content: '' !important;
    position: absolute !important;
    bottom: -18px !important;
    left: auto !important; right: 0 !important;
    right: 0 !important;
    height: 20px !important;
    background: transparent !important;
    display: block !important;
    pointer-events: auto !important;
}

.user-dropdown-header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 12px !important;
    background: #f8fafc !important;
    border: 1px solid #f1f5f9 !important;
    border-radius: 14px !important;
    margin-bottom: 6px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.user-dropdown-avatar {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.05rem !important;
    flex-shrink: 0 !important;
    box-shadow: 0 3px 8px rgba(16, 185, 129, 0.25) !important;
}

.user-dropdown-meta {
    flex-grow: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

.user-dropdown-name {
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.2 !important;
}

.user-dropdown-badge {
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    color: #059669 !important;
    display: inline-flex !important;
    align-items: center !important;
    margin-top: 3px !important;
}

.user-dropdown-divider {
    height: 1px !important;
    background: #f1f5f9 !important;
    margin: 4px 6px !important;
}

.user-dropdown-nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    width: 100% !important;
}

.user-dropdown-link {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 8px 10px !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    color: #334155 !important;
    transition: all 0.15s ease !important;
    background: transparent !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.user-dropdown-link:hover,
.user-dropdown-link:focus {
    background: #f8fafc !important;
    color: #0f172a !important;
    transform: translateX(3px) !important;
}

.user-item-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.88rem !important;
    flex-shrink: 0 !important;
    transition: transform 0.15s ease !important;
}

.user-dropdown-link:hover .user-item-icon {
    transform: scale(1.08) !important;
}

.user-item-icon.icon-blue {
    background: #eff6ff !important;
    color: #2563eb !important;
}

.user-item-icon.icon-emerald {
    background: #ecfdf5 !important;
    color: #059669 !important;
}

.user-item-icon.icon-amber {
    background: #fffbeb !important;
    color: #d97706 !important;
}

.user-item-icon.icon-purple {
    background: #faf5ff !important;
    color: #9333ea !important;
}

.user-item-icon.icon-rose {
    background: #fff1f2 !important;
    color: #e11d48 !important;
}

.user-item-text {
    flex-grow: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

.user-item-title {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    line-height: 1.3 !important;
}

.user-item-desc {
    font-size: 0.72rem !important;
    color: #94a3b8 !important;
    line-height: 1.2 !important;
}

.user-item-arrow {
    font-size: 0.75rem !important;
    color: #cbd5e1 !important;
    transition: transform 0.15s ease, color 0.15s ease !important;
}

.user-dropdown-link:hover .user-item-arrow {
    color: #64748b !important;
    transform: translateX(2px) !important;
}

.user-dropdown-link.item-logout:hover {
    background: #fff1f2 !important;
}

.user-dropdown-link.item-logout .user-item-title {
    color: #e11d48 !important;
}

/* ==========================================================================
   MODERN MOBILE ACCOUNT OFFCANVAS (Dribbble iOS Mobile Sheet)
   ========================================================================== */
.modern-mobile-account-offcanvas {
    top: 110px !important;
    bottom: 0 !important;
    left: auto !important; right: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: calc(100vh - 110px) !important;
    max-height: calc(100vh - 110px) !important;
    border-top-left-radius: 24px !important;
    border-top-right-radius: 24px !important;
    background: #f8fafc !important;
    background-color: #f8fafc !important;
    border: none !important;
    box-shadow: 0 -12px 36px rgba(15, 23, 42, 0.28) !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    z-index: 2000 !important;
}

@media (max-width: 576px) {
    .modern-mobile-account-offcanvas {
        top: 108px !important;
        height: calc(100vh - 108px) !important;
        max-height: calc(100vh - 108px) !important;
    }
}

.mobile-account-sheet-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-top-left-radius: 24px !important;
    border-top-right-radius: 24px !important;
    flex-shrink: 0 !important;
}

.sheet-grabber-pill {
    width: 40px !important;
    height: 4px !important;
    background: #cbd5e1 !important;
    border-radius: 2px !important;
    margin-top: 6px !important;
    margin-bottom: 6px !important;
}

.mobile-account-sheet-body {
    flex: 1 1 auto !important;
    padding: 16px !important;
    padding-bottom: 80px !important;
    overflow-y: auto !important;
    background: #f8fafc !important;
    background-color: #f8fafc !important;
}

.offcanvas-backdrop {
    background-color: rgba(15, 23, 42, 0.5) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}

.mobile-navigation-navgroup {
    background: #ffffff !important;
    background-color: #ffffff !important;
    box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.08) !important;
    border-top: 1px solid #f1f5f9 !important;
}

/* Guest Card */
.mobile-guest-card {
    background: #ffffff !important;
    border-radius: 20px !important;
    padding: 24px 16px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05) !important;
}

.guest-avatar-ring {
    width: 72px !important;
    height: 72px !important;
    border-radius: 50% !important;
    background: #f0fdf4 !important;
    border: 2px solid #bbf7d0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px !important;
}

.guest-logo-img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

.btn-gradient-lime-pill {
    background: var(--gradient-lime-mint) !important;
    border: none !important;
    border-radius: var(--radius-pill) !important;
    color: #ffffff !important;
    font-size: 0.92rem !important;
    transition: all 0.2s ease !important;
}

.btn-outline-lime-pill {
    background: transparent !important;
    border: 1.5px solid var(--color-lime-primary) !important;
    border-radius: var(--radius-pill) !important;
    color: var(--color-lime-dark) !important;
    font-size: 0.92rem !important;
    transition: all 0.2s ease !important;
}

/* User Profile Hero Card */
.mobile-profile-hero-card {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border-radius: 20px !important;
    padding: 18px 16px !important;
    color: #ffffff !important;
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.28) !important;
    position: relative !important;
    overflow: hidden !important;
}

.mobile-profile-hero-card::after {
    content: '' !important;
    position: absolute !important;
    top: -20px !important;
    right: -20px !important;
    width: 100px !important;
    height: 100px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border-radius: 50% !important;
    pointer-events: none !important;
}

.mobile-profile-avatar {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    border: 3px solid rgba(255, 255, 255, 0.8) !important;
    background: #ffffff !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.mobile-profile-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.mobile-profile-info {
    flex-grow: 1 !important;
    min-width: 0 !important;
}

.mobile-profile-name {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin-bottom: 3px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.mobile-profile-badge {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    background: rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
    padding: 3px 10px !important;
    border-radius: var(--radius-pill) !important;
    backdrop-filter: blur(4px) !important;
}

/* Quick Actions Grid */
.mobile-quick-actions-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
}

.mobile-quick-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 12px 6px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-decoration: none !important;
    color: #334155 !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
    transition: all 0.2s ease !important;
}

.mobile-quick-card:active {
    transform: scale(0.96) !important;
    background: #f8fafc !important;
}

.quick-card-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1rem !important;
    margin-bottom: 6px !important;
}

.quick-card-label {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: #1e293b !important;
}

/* Links Card */
.mobile-menu-links-card {
    background: #ffffff !important;
    border-radius: 20px !important;
    border: 1px solid #e2e8f0 !important;
    padding: 8px !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
}

.mobile-menu-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 12px !important;
    border-radius: 14px !important;
    text-decoration: none !important;
    color: #1e293b !important;
    transition: all 0.15s ease !important;
}

.mobile-menu-item:active {
    background: #f1f5f9 !important;
}

.menu-item-left {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-grow: 1 !important;
    min-width: 0 !important;
}

.menu-item-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.92rem !important;
    flex-shrink: 0 !important;
}

.menu-item-icon.icon-blue { background: #eff6ff !important; color: #2563eb !important; }
.menu-item-icon.icon-emerald { background: #ecfdf5 !important; color: #059669 !important; }
.menu-item-icon.icon-teal { background: #f0fdfa !important; color: #0d9488 !important; }
.menu-item-icon.icon-amber { background: #fffbeb !important; color: #d97706 !important; }
.menu-item-icon.icon-purple { background: #faf5ff !important; color: #9333ea !important; }
.menu-item-icon.icon-rose { background: #fff1f2 !important; color: #e11d48 !important; }

.menu-item-text {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
}

.menu-item-title {
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    line-height: 1.3 !important;
}

.menu-item-desc {
    font-size: 0.72rem !important;
    color: #94a3b8 !important;
    line-height: 1.2 !important;
}

.menu-item-arrow {
    font-size: 0.8rem !important;
    color: #cbd5e1 !important;
}

.mobile-menu-divider {
    height: 1px !important;
    background: #f1f5f9 !important;
    margin: 4px 6px !important;
}

/* ==========================================================================
   MODERN ACCOUNT DASHBOARD DESIGN SYSTEM (Dribbble Web UI)
   ========================================================================== */
.modern-account-card {
    background: #ffffff !important;
    border-radius: 20px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04) !important;
    padding: 32px 28px !important;
    margin-bottom: 24px !important;
}

@media (max-width: 576px) {
    .modern-account-card {
        padding: 20px 16px !important;
        border-radius: 16px !important;
    }
}

.account-header-title {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin-bottom: 4px !important;
    letter-spacing: -0.02em !important;
}

.account-header-subtitle {
    font-size: 0.85rem !important;
    color: #64748b !important;
    margin-bottom: 0 !important;
}

.account-member-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: #059669 !important;
    background: #ecfdf5 !important;
    border: 1px solid #bbf7d0 !important;
    padding: 4px 12px !important;
    border-radius: 50px !important;
}

.account-header-divider {
    height: 1px !important;
    background: #f1f5f9 !important;
    margin: 18px 0 24px 0 !important;
}

/* Modern Avatar Uploader */
.modern-avatar-uploader {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.avatar-circle-wrap {
    position: relative !important;
    width: 124px !important;
    height: 124px !important;
    border-radius: 50% !important;
}

.avatar-preview-img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 3px solid #10b981 !important;
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.22) !important;
    background: #ffffff !important;
}

.avatar-camera-btn {
    position: absolute !important;
    right: 2px !important;
    bottom: 2px !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: #10b981 !important;
    color: #ffffff !important;
    border: 2.5px solid #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.88rem !important;
    cursor: pointer !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.avatar-camera-btn:hover {
    background: #059669 !important;
    transform: scale(1.1) !important;
}

.badge-guideline {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 0.76rem !important;
    font-weight: 500 !important;
    color: #475569 !important;
    background: #f1f5f9 !important;
    padding: 3px 10px !important;
    border-radius: 50px !important;
}

/* Modern Form Controls */
.form-label-modern {
    font-weight: 600 !important;
    font-size: 0.88rem !important;
    color: #334155 !important;
    margin-bottom: 6px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.badge-readonly {
    margin-left: auto !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    color: #64748b !important;
    background: #f1f5f9 !important;
    padding: 2px 8px !important;
    border-radius: 50px !important;
}

.form-control-modern, .form-select-modern {
    border-radius: 12px !important;
    border: 1.5px solid #e2e8f0 !important;
    padding: 10px 14px !important;
    font-size: 0.92rem !important;
    color: #0f172a !important;
    background-color: #ffffff !important;
    transition: all 0.2s ease !important;
}

.form-control-modern:focus, .form-select-modern:focus {
    border-color: #10b981 !important;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12) !important;
    outline: none !important;
}

.form-control-readonly {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
    color: #64748b !important;
    cursor: not-allowed !important;
}

.btn-save-profile {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 12px 36px !important;
    font-weight: 700 !important;
    font-size: 0.92rem !important;
    letter-spacing: 0.02em !important;
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.28) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.btn-save-profile:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 25px rgba(16, 185, 129, 0.36) !important;
    color: #ffffff !important;
}

.btn-save-profile:active {
    transform: translateY(0) !important;
}

/* ==========================================================================
   MODERN EMPTY STATE & ANIMATIONS (Dribbble Micro-Interactions)
   ========================================================================== */
.modern-empty-state {
    padding: 64px 24px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    border-radius: 20px !important;
    position: relative !important;
    overflow: hidden !important;
}

.empty-state-illustration-wrap {
    position: relative !important;
    width: 140px !important;
    height: 140px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 24px !important;
}

.empty-state-halo {
    position: absolute !important;
    width: 140px !important;
    height: 140px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.18) 0%, rgba(16, 185, 129, 0.04) 60%, rgba(255, 255, 255, 0) 75%) !important;
    animation: pulseHalo 3s ease-in-out infinite !important;
}

.empty-state-icon-box {
    width: 90px !important;
    height: 90px !important;
    border-radius: 28px !important;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%) !important;
    border: 2px solid #bbf7d0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 2.5rem !important;
    color: #059669 !important;
    box-shadow: 0 10px 25px rgba(16, 185, 129, 0.18) !important;
    animation: floatUpDown 3.5s ease-in-out infinite !important;
    position: relative !important;
    z-index: 2 !important;
}

.empty-state-sparkle-1 {
    position: absolute !important;
    top: 6px !important;
    right: 12px !important;
    font-size: 1.1rem !important;
    animation: sparkleBlink 2.2s infinite ease-in-out !important;
}

.empty-state-sparkle-2 {
    position: absolute !important;
    bottom: 12px !important;
    left: 8px !important;
    font-size: 1rem !important;
    animation: sparkleBlink 2.8s infinite ease-in-out 0.6s !important;
}

@keyframes floatUpDown {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-12px) rotate(2deg);
    }
}

@keyframes pulseHalo {
    0%, 100% {
        transform: scale(0.95);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.15);
        opacity: 1;
    }
}

@keyframes sparkleBlink {
    0%, 100% {
        transform: scale(0.6) rotate(0deg);
        opacity: 0.3;
    }
    50% {
        transform: scale(1.2) rotate(35deg);
        opacity: 1;
    }
}

.empty-state-title {
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin-bottom: 8px !important;
    letter-spacing: -0.01em !important;
}

.empty-state-desc {
    font-size: 0.92rem !important;
    color: #64748b !important;
    max-width: 440px !important;
    line-height: 1.6 !important;
    margin: 0 auto 24px auto !important;
}

.btn-empty-cta {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 12px 32px !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.32) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
}

.btn-empty-cta:hover {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 12px 30px rgba(16, 185, 129, 0.42) !important;
    color: #ffffff !important;
}

/* Modern Order Filter Tabs */
.order-status-tabs {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    overflow-x: auto !important;
    padding-bottom: 8px !important;
    scrollbar-width: none !important;
}

.order-status-tabs::-webkit-scrollbar {
    display: none !important;
}

.order-tab-pill {
    padding: 8px 18px !important;
    border-radius: 50px !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    color: #64748b !important;
    text-decoration: none !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    white-space: nowrap !important;
    transition: all 0.2s ease !important;
}

.order-tab-pill:hover {
    color: #10b981 !important;
    background: #f0fdf4 !important;
    border-color: #bbf7d0 !important;
}

.order-tab-pill.active {
    background: #10b981 !important;
    color: #ffffff !important;
    border-color: #10b981 !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25) !important;
}

/* Modern Order Card */
.modern-order-item-card {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 18px !important;
    padding: 20px !important;
    margin-bottom: 16px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03) !important;
}

.modern-order-item-card:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08) !important;
    transform: translateY(-2px) !important;
}

.order-item-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    margin-bottom: 14px !important;
}

.order-code-badge {
    font-weight: 700 !important;
    color: #0f172a !important;
    font-size: 0.95rem !important;
}

.order-date-text {
    font-size: 0.8rem !important;
    color: #94a3b8 !important;
}

.order-product-row {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 10px 0 !important;
    text-decoration: none !important;
    color: #0f172a !important;
    border-bottom: 1px dashed #f1f5f9 !important;
}

.order-product-row:last-child {
    border-bottom: none !important;
}

.order-product-thumb {
    width: 64px !important;
    height: 64px !important;
    border-radius: 12px !important;
    object-fit: cover !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    flex-shrink: 0 !important;
}

.order-product-info {
    flex-grow: 1 !important;
    min-width: 0 !important;
}

.order-product-title {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    margin-bottom: 4px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.order-product-meta {
    font-size: 0.8rem !important;
    color: #64748b !important;
}

.order-item-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding-top: 14px !important;
    margin-top: 10px !important;
    border-top: 1px solid #f1f5f9 !important;
}

.order-total-price {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: #e11d48 !important;
}

/* ==========================================================================
   MODERN ORDER DETAIL SCREEN (Dribbble E-commerce UI)
   ========================================================================== */
.order-detail-info-card {
    background: #ffffff !important;
    border-radius: 16px !important;
    border: 1.5px solid #e2e8f0 !important;
    padding: 22px !important;
    height: 100% !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.02) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    transition: all 0.2s ease !important;
}

.order-detail-info-card:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05) !important;
}

.order-detail-card-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin-bottom: 16px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.order-detail-card-header i {
    color: #10b981 !important;
    font-size: 1.1rem !important;
}

.order-detail-field {
    display: flex !important;
    align-items: flex-start !important;
    margin-bottom: 12px !important;
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
}

.order-detail-field .field-label {
    min-width: 155px !important;
    color: #64748b !important;
    font-weight: 500 !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.order-detail-field .field-label i {
    width: 16px !important;
    text-align: center !important;
    color: #94a3b8 !important;
}

.order-detail-field .field-val {
    font-weight: 600 !important;
    color: #1e293b !important;
    word-break: break-word !important;
}

.order-detail-product-item {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 16px 0 !important;
    border-bottom: 1px dashed #e2e8f0 !important;
}

.order-detail-product-item:last-child {
    border-bottom: none !important;
}

.order-detail-product-thumb {
    width: 76px !important;
    height: 76px !important;
    border-radius: 12px !important;
    object-fit: cover !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    flex-shrink: 0 !important;
}

.order-summary-box {
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 20px !important;
}

.order-summary-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 10px !important;
    font-size: 0.92rem !important;
    color: #64748b !important;
}

.order-summary-item.total-price-row {
    border-top: 1.5px dashed #cbd5e1 !important;
    padding-top: 14px !important;
    margin-top: 14px !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
}

/* ==========================================================================
   MODERN ADDRESS CARD (Dribbble Address Manager UI)
   ========================================================================== */
.modern-address-card {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 18px !important;
    padding: 22px !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03) !important;
    transition: all 0.25s ease !important;
}

.modern-address-card:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.07) !important;
    transform: translateY(-2px) !important;
}

.modern-address-card.is-default {
    border-color: #10b981 !important;
    background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 50%) !important;
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.12) !important;
}

.address-card-top {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
}

.address-user-name {
    font-size: 1.02rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.address-phone-text {
    font-size: 0.88rem !important;
    color: #64748b !important;
    font-weight: 500 !important;
    margin-top: 2px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.address-badge-default {
    background: #10b981 !important;
    color: #ffffff !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    padding: 4px 12px !important;
    border-radius: 50px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25) !important;
    white-space: nowrap !important;
}

.address-body-text {
    font-size: 0.9rem !important;
    color: #334155 !important;
    line-height: 1.55 !important;
    margin-bottom: 16px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
}

.address-body-text i {
    color: #10b981 !important;
    font-size: 1rem !important;
    margin-top: 3px !important;
    flex-shrink: 0 !important;
}

.address-actions-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding-top: 14px !important;
    border-top: 1px dashed #e2e8f0 !important;
    margin-top: auto !important;
}

.btn-set-default-address {
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: #059669 !important;
    background: #ecfdf5 !important;
    border: 1px solid #bbf7d0 !important;
    padding: 5px 12px !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    transition: all 0.2s ease !important;
}

.btn-set-default-address:hover {
    background: #10b981 !important;
    color: #ffffff !important;
    border-color: #10b981 !important;
}

/* ==========================================================================
   MODERN CHECKOUT DESIGN SYSTEM (Dribbble Checkout UI)
   ========================================================================== */
.modern-checkout-card {
    background: #ffffff !important;
    border-radius: 20px !important;
    border: 1.5px solid #e2e8f0 !important;
    padding: 24px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03) !important;
    transition: all 0.2s ease !important;
}

@media (max-width: 576px) {
    .modern-checkout-card {
        padding: 16px !important;
        border-radius: 16px !important;
    }
}

.checkout-card-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 16px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.checkout-card-title {
    font-size: 1.08rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 0 !important;
}

.checkout-recipient-box {
    background: #f8fafc !important;
    border-radius: 14px !important;
    border: 1px solid #e2e8f0 !important;
    padding: 16px !important;
    margin-bottom: 16px !important;
}

.checkout-recipient-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 0.95rem !important;
    color: #1e293b !important;
    margin-bottom: 6px !important;
}

.checkout-address-text {
    font-size: 0.9rem !important;
    color: #475569 !important;
    line-height: 1.5 !important;
    margin-bottom: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
}

.checkout-address-text i {
    color: #10b981 !important;
    font-size: 1rem !important;
    margin-top: 3px !important;
    flex-shrink: 0 !important;
}

.checkout-shipping-info-box {
    background: #f0fdf4 !important;
    border: 1.5px solid #bbf7d0 !important;
    border-radius: 14px !important;
    padding: 14px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: 14px !important;
}

.checkout-payment-option-card {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    border-radius: 14px !important;
    border: 1.5px solid #e2e8f0 !important;
    margin-bottom: 10px !important;
    cursor: pointer !important;
    background: #ffffff !important;
    transition: all 0.2s ease !important;
}

.checkout-payment-option-card:hover {
    border-color: #cbd5e1 !important;
    background: #f8fafc !important;
}

.checkout-payment-option-card input[type="radio"]:checked ~ .payment-option-label {
    color: #059669 !important;
    font-weight: 700 !important;
}

.checkout-voucher-banner-modern {
    background: linear-gradient(135deg, #eff6ff 0%, #ecfdf5 100%) !important;
    border: 1.5px dashed #10b981 !important;
    border-radius: 16px !important;
    padding: 14px 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    cursor: pointer !important;
    margin-bottom: 20px !important;
    transition: all 0.2s ease !important;
}

.checkout-voucher-banner-modern:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.15) !important;
}

.btn-checkout-submit-modern {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 14px 28px !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    letter-spacing: 0.02em !important;
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.32) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    width: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-transform: uppercase !important;
}

.btn-checkout-submit-modern:hover {
    transform: translateY(-2px) scale(1.01) !important;
    box-shadow: 0 12px 30px rgba(16, 185, 129, 0.42) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   LUXURY CONTACT & SUPPORT CENTER PAGE (MODERN MEDICAL THEME)
   ========================================================================== */
.contact-page-wrapper {
    background-color: #f8fafc !important;
    min-height: 80vh !important;
}

/* 1. Hero Card */
.contact-hero-card {
    background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 50%, #eff6ff 100%) !important;
    border: 1px solid #dcfce7 !important;
    border-radius: 20px !important;
    padding: 22px 28px !important;
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.05) !important;
    position: relative !important;
    overflow: hidden !important;
}

.contact-hero-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #ffffff !important;
    border: 1px solid #bbf7d0 !important;
    padding: 4px 12px !important;
    border-radius: 9999px !important;
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    color: #15803d !important;
    letter-spacing: 0.02em !important;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.06) !important;
}

.contact-hero-title {
    font-size: 1.45rem !important;
    font-weight: 650 !important;
    color: #1e293b !important;
    letter-spacing: -0.01em !important;
    line-height: 1.35 !important;
}

.contact-hero-desc {
    font-size: 0.88rem !important;
    color: #64748b !important;
    line-height: 1.55 !important;
    max-width: 700px !important;
    font-weight: 400 !important;
}

.contact-quick-hotline-box {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: #ffffff !important;
    border: 1px solid #bbf7d0 !important;
    border-radius: 16px !important;
    padding: 10px 18px !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.08) !important;
    text-align: left !important;
}

.hotline-icon-wrap {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1rem !important;
    box-shadow: 0 3px 10px rgba(16, 185, 129, 0.25) !important;
}

.hotline-sub {
    display: block !important;
    font-size: 0.72rem !important;
    color: #64748b !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
}

.hotline-main-num {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #059669 !important;
    text-decoration: none !important;
    letter-spacing: 0.01em !important;
    transition: color 0.2s ease !important;
}

.hotline-main-num:hover {
    color: #047857 !important;
}

/* 2. Left Column: Office & Channels Card */
.contact-info-luxury-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    padding: 24px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

.card-head-line {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.head-icon-circle {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    background: #f0fdf4 !important;
    border: 1px solid #bbf7d0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.05rem !important;
    flex-shrink: 0 !important;
}

.icon-circle-emerald {
    background: #ecfdf5 !important;
    border-color: #a7f3d0 !important;
}

.card-head-title {
    font-size: 1.15rem !important;
    font-weight: 650 !important;
    color: #1e293b !important;
}

.card-head-sub {
    font-size: 0.8rem !important;
    color: #64748b !important;
}

.contact-channels-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.contact-channel-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 14px !important;
    border-radius: 14px !important;
    background: #f8fafc !important;
    border: 1px solid #f1f5f9 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    color: #334155 !important;
}

.contact-channel-item:not(.non-clickable):hover {
    background: #f0fdf4 !important;
    border-color: #bbf7d0 !important;
    transform: translateX(3px) !important;
}

.channel-icon-bubble {
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.88rem !important;
    flex-shrink: 0 !important;
}

.bubble-green { background: #dcfce7 !important; color: #15803d !important; }
.bubble-amber { background: #fef3c7 !important; color: #b45309 !important; }
.bubble-blue { background: #dbeafe !important; color: #1d4ed8 !important; }
.bubble-purple { background: #f3e8ff !important; color: #7e22ce !important; }
.bubble-teal { background: #ccfbf1 !important; color: #0f766e !important; }

.channel-text-body {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
}

.channel-label {
    font-size: 0.72rem !important;
    color: #64748b !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
}

.channel-val {
    font-size: 0.86rem !important;
    color: #1e293b !important;
    line-height: 1.35 !important;
    font-weight: 500 !important;
}

.channel-action-arrow {
    color: #94a3b8 !important;
    font-size: 0.8rem !important;
    transition: all 0.2s ease !important;
}

.contact-channel-item:hover .channel-action-arrow {
    color: #10b981 !important;
    transform: translateX(2px) !important;
}

/* Map Wrapper */
.contact-map-wrapper {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    margin-top: 8px !important;
}

.map-top-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 14px !important;
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.map-label {
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: #334155 !important;
}

.map-view-large {
    font-size: 0.76rem !important;
    color: #059669 !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

.map-view-large:hover {
    text-decoration: underline !important;
}

.map-frame-container iframe {
    display: block !important;
    width: 100% !important;
}

/* 3. Right Column: Form Card */
.contact-form-luxury-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    padding: 26px 28px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important;
}

.form-header-line {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
}

.form-card-title {
    font-size: 1.25rem !important;
    font-weight: 650 !important;
    color: #1e293b !important;
    letter-spacing: -0.01em !important;
}

.form-card-subtitle {
    font-size: 0.84rem !important;
    color: #64748b !important;
    line-height: 1.5 !important;
}

.contact-field-label {
    display: block !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: #334155 !important;
    margin-bottom: 5px !important;
}

.contact-input-modern {
    width: 100% !important;
    height: 44px !important;
    border-radius: 12px !important;
    border: 1px solid #cbd5e1 !important;
    padding: 8px 14px !important;
    font-size: 0.9rem !important;
    color: #1e293b !important;
    background: #ffffff !important;
    transition: all 0.2s ease !important;
    outline: none !important;
}

.contact-input-modern:focus {
    border-color: #10b981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12) !important;
    background: #f0fdf4 !important;
}

.contact-textarea-modern {
    width: 100% !important;
    border-radius: 12px !important;
    border: 1px solid #cbd5e1 !important;
    padding: 12px 14px !important;
    font-size: 0.9rem !important;
    color: #1e293b !important;
    background: #ffffff !important;
    transition: all 0.2s ease !important;
    outline: none !important;
    resize: vertical !important;
    min-height: 95px !important;
}

.contact-textarea-modern:focus {
    border-color: #10b981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12) !important;
    background: #f0fdf4 !important;
}

/* SLEEK & ELEGANT IMAGE UPLOAD COMPONENT */
.contact-upload-wrapper {
    margin-top: 4px !important;
}

.contact-upload-trigger {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 10px 16px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.contact-upload-trigger:hover {
    background: #f0fdf4 !important;
    border-color: #86efac !important;
}

.upload-icon-circle {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    background: #dcfce7 !important;
    color: #15803d !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.95rem !important;
    flex-shrink: 0 !important;
}

.upload-trigger-info {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
}

.upload-main-text {
    font-size: 0.84rem !important;
    font-weight: 600 !important;
    color: #1e293b !important;
}

.upload-sub-text {
    font-size: 0.74rem !important;
    color: #64748b !important;
}

.upload-btn-pill {
    display: inline-flex !important;
    align-items: center !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 20px !important;
    padding: 5px 12px !important;
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    color: #059669 !important;
    transition: all 0.2s ease !important;
}

.contact-upload-trigger:hover .upload-btn-pill {
    background: #059669 !important;
    color: #ffffff !important;
    border-color: #059669 !important;
}

/* Compact Preview Card */
.contact-preview-card {
    display: none !important;
    align-items: center !important;
    gap: 12px !important;
    background: #f0fdf4 !important;
    border: 1px solid #bbf7d0 !important;
    border-radius: 12px !important;
    padding: 8px 14px !important;
}

.contact-preview-card.show-preview {
    display: flex !important;
}

.preview-img-wrap {
    width: 44px !important;
    height: 44px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    border: 1px solid #a7f3d0 !important;
    background: #ffffff !important;
    flex-shrink: 0 !important;
}

.preview-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.preview-info-wrap {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
}

.preview-name {
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    word-break: break-all !important;
}

.preview-status {
    font-size: 0.72rem !important;
    color: #15803d !important;
    font-weight: 500 !important;
}

.btn-delete-upload {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    border: 1px solid #fecaca !important;
    color: #ef4444 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.82rem !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.btn-delete-upload:hover {
    background: #fee2e2 !important;
    color: #dc2626 !important;
    transform: scale(1.05) !important;
}

/* Submit Button */
.btn-contact-submit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 12px 34px !important;
    font-size: 0.92rem !important;
    font-weight: 650 !important;
    letter-spacing: 0.01em !important;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.28) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.btn-contact-submit:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 22px rgba(16, 185, 129, 0.38) !important;
    color: #ffffff !important;
}

.submit-reassurance {
    font-size: 0.78rem !important;
    color: #64748b !important;
    font-weight: 450 !important;
}

/* 4. Bottom Trust Cards */
.contact-trust-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 16px 18px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02) !important;
    height: 100% !important;
    transition: all 0.2s ease !important;
}

.contact-trust-card:hover {
    border-color: #86efac !important;
    transform: translateY(-2px) !important;
}

.trust-card-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1rem !important;
    flex-shrink: 0 !important;
}

.trust-title {
    font-size: 0.9rem !important;
    font-weight: 650 !important;
    color: #1e293b !important;
    margin-bottom: 3px !important;
}

.trust-desc {
    font-size: 0.78rem !important;
    color: #64748b !important;
    line-height: 1.45 !important;
    margin-bottom: 0 !important;
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .contact-hero-card {
        padding: 18px !important;
    }
    .contact-form-luxury-card,
    .contact-info-luxury-card {
        padding: 20px !important;
    }
}

/* ==========================================================================
   DRIBBLE UI MAGAZINE - PHARMAMARKET NEWS & HEALTH ARTICLES
   ========================================================================== */

.dribbble-news-wrapper {
    background-color: #f8fafc !important;
    min-height: 80vh;
}

/* Category Pill Navigation Bar */
.dribbble-news-cat-bar {
    background: #ffffff !important;
    border-radius: 16px !important;
    padding: 10px 16px !important;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04) !important;
    border: 1px solid #f1f5f9 !important;
}

.dribbble-news-cat-scroll {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    padding-bottom: 2px !important;
}

.dribbble-news-cat-scroll::-webkit-scrollbar {
    display: none !important;
}

.dribbble-cat-pill {
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    padding: 8px 18px !important;
    border-radius: 30px !important;
    font-size: 0.86rem !important;
    font-weight: 600 !important;
    color: #475569 !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    text-decoration: none !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.dribbble-cat-pill:hover {
    color: #059669 !important;
    background: #ecfdf5 !important;
    border-color: #a7f3d0 !important;
    transform: translateY(-1px) !important;
}

.dribbble-cat-pill.active {
    color: #ffffff !important;
    background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
    border-color: transparent !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.28) !important;
}

/* Hero Featured Article Card */
.dribbble-hero-article-card {
    position: relative !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    height: 440px !important;
    background: #0f172a !important;
    box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.15) !important;
}

.hero-img-link {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
}

.hero-bg-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.dribbble-hero-article-card:hover .hero-bg-img {
    transform: scale(1.04) !important;
}

.hero-gradient-overlay {
    position: absolute !important;
    top: 0 !important;
    left: auto !important; right: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.1) 0%, rgba(15, 23, 42, 0.5) 45%, rgba(15, 23, 42, 0.95) 100%) !important;
    pointer-events: none !important;
}

.hero-content-box {
    position: absolute !important;
    bottom: 0 !important;
    left: auto !important; right: 0 !important;
    right: 0 !important;
    padding: 28px 32px !important;
    z-index: 2 !important;
    pointer-events: auto !important;
}

.hero-meta-top {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.badge-hero-cat {
    display: inline-flex !important;
    align-items: center !important;
    background: rgba(16, 185, 129, 0.9) !important;
    backdrop-filter: blur(4px) !important;
    color: #ffffff !important;
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
}

.badge-hero-time {
    color: #cbd5e1 !important;
    font-size: 0.78rem !important;
    font-weight: 500 !important;
}

.hero-article-title {
    font-size: 1.55rem !important;
    font-weight: 650 !important;
    line-height: 1.35 !important;
    margin-bottom: 10px !important;
}

.hero-article-title a {
    color: #ffffff !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.hero-article-title a:hover {
    color: #a7f3d0 !important;
}

.hero-article-excerpt {
    color: #cbd5e1 !important;
    font-size: 0.88rem !important;
    line-height: 1.5 !important;
    margin-bottom: 16px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.hero-footer-meta {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
    padding-top: 14px !important;
}

.hero-author {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #e2e8f0 !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
}

.author-avatar {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: #059669 !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.75rem !important;
}

.hero-read-btn {
    display: inline-flex !important;
    align-items: center !important;
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    padding: 6px 16px !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.hero-read-btn:hover {
    background: #059669 !important;
    border-color: #059669 !important;
    color: #ffffff !important;
}

/* Side Widget Card */
.dribbble-side-widget-card {
    background: #ffffff !important;
    border-radius: 20px !important;
    padding: 22px !important;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.06) !important;
    border: 1px solid #f1f5f9 !important;
}

.widget-header-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.widget-icon-box {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.1rem !important;
    flex-shrink: 0 !important;
}

.widget-icon-box.icon-red {
    background: #fee2e2 !important;
    color: #ef4444 !important;
}

.widget-icon-box.icon-emerald {
    background: #dcfce7 !important;
    color: #059669 !important;
}

.widget-icon-box.icon-blue {
    background: #e0f2fe !important;
    color: #0284c7 !important;
}

.widget-title {
    font-size: 1.05rem !important;
    font-weight: 650 !important;
    color: #1e293b !important;
}

.widget-subtitle {
    font-size: 0.76rem !important;
    color: #64748b !important;
}

/* Hot Discussions List */
.hot-discuss-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.hot-discuss-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px !important;
    border-radius: 14px !important;
    background: #f8fafc !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    border: 1px solid transparent !important;
}

.hot-discuss-item:hover {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05) !important;
    transform: translateX(3px) !important;
}

.discuss-rank-num {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: #94a3b8 !important;
    width: 24px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
}

.discuss-rank-num.rank-1 {
    color: #ef4444 !important;
}

.discuss-rank-num.rank-2 {
    color: #f97316 !important;
}

.discuss-rank-num.rank-3 {
    color: #eab308 !important;
}

.discuss-thumb-wrap {
    width: 54px !important;
    height: 54px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}

.discuss-thumb-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.discuss-info-wrap {
    flex: 1 !important;
    min-width: 0 !important;
}

.discuss-title {
    font-size: 0.84rem !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    line-height: 1.35 !important;
    margin-bottom: 4px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    transition: color 0.2s ease !important;
}

.hot-discuss-item:hover .discuss-title {
    color: #059669 !important;
}

.discuss-meta {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-size: 0.72rem !important;
    color: #64748b !important;
}

/* Featured Section Grid (4 Columns) */
.section-title-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.section-pill-tag {
    background: #fef3c7 !important;
    color: #b45309 !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    padding: 3px 10px !important;
    border-radius: 20px !important;
    letter-spacing: 0.5px !important;
}

.section-title-text {
    font-size: 1.25rem !important;
    font-weight: 650 !important;
    color: #0f172a !important;
}

.section-link-more {
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: #059669 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.section-link-more:hover {
    color: #047857 !important;
    transform: translateX(2px) !important;
}

.dribbble-grid-card {
    background: #ffffff !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    border: 1px solid #f1f5f9 !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

.dribbble-grid-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 24px -4px rgba(15, 23, 42, 0.1) !important;
    border-color: #e2e8f0 !important;
}

.grid-card-img-wrap {
    position: relative !important;
    height: 160px !important;
    overflow: hidden !important;
}

.grid-card-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.4s ease !important;
}

.dribbble-grid-card:hover .grid-card-img {
    transform: scale(1.06) !important;
}

.grid-card-cat-badge {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    background: rgba(15, 23, 42, 0.75) !important;
    backdrop-filter: blur(4px) !important;
    color: #ffffff !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    padding: 3px 10px !important;
    border-radius: 14px !important;
}

.grid-card-body {
    padding: 16px !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

.grid-card-time {
    font-size: 0.74rem !important;
    color: #94a3b8 !important;
    font-weight: 500 !important;
}

.grid-card-title {
    font-size: 0.92rem !important;
    font-weight: 650 !important;
    line-height: 1.4 !important;
    margin-bottom: 12px !important;
    flex: 1 !important;
}

.grid-card-title a {
    color: #1e293b !important;
    text-decoration: none !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    transition: color 0.2s ease !important;
}

.grid-card-title a:hover {
    color: #059669 !important;
}

.grid-card-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-top: 1px solid #f1f5f9 !important;
    padding-top: 10px !important;
    font-size: 0.75rem !important;
    color: #64748b !important;
}

.grid-card-arrow {
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    background: #f8fafc !important;
    color: #64748b !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.72rem !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.dribbble-grid-card:hover .grid-card-arrow {
    background: #059669 !important;
    color: #ffffff !important;
    transform: translateX(2px) !important;
}

/* Magazine Feed Container */
.dribbble-feed-container {
    background: #ffffff !important;
    border-radius: 20px !important;
    padding: 24px !important;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05) !important;
    border: 1px solid #f1f5f9 !important;
}

.feed-icon-circle {
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
    background: #ecfdf5 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.95rem !important;
}

.feed-count-badge {
    font-size: 0.78rem !important;
    color: #64748b !important;
    background: #f1f5f9 !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
    font-weight: 500 !important;
}

.dribbble-feed-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

.dribbble-feed-card {
    display: flex !important;
    gap: 18px !important;
    padding: 16px !important;
    border-radius: 16px !important;
    background: #f8fafc !important;
    border: 1px solid transparent !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.dribbble-feed-card:hover {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06) !important;
    transform: translateY(-2px) !important;
}

.feed-thumb-wrap {
    width: 200px !important;
    height: 130px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    position: relative !important;
}

.feed-thumb-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.4s ease !important;
}

.dribbble-feed-card:hover .feed-thumb-img {
    transform: scale(1.05) !important;
}

.feed-mobile-cat-pill {
    position: absolute !important;
    bottom: 6px !important;
    left: 6px !important;
    background: rgba(15, 23, 42, 0.8) !important;
    color: #ffffff !important;
    font-size: 0.65rem !important;
    padding: 2px 6px !important;
    border-radius: 8px !important;
}

.feed-info-wrap {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

.feed-meta-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.feed-cat-chip {
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    color: #059669 !important;
    background: #ecfdf5 !important;
    padding: 2px 10px !important;
    border-radius: 12px !important;
}

.feed-date-chip {
    font-size: 0.74rem !important;
    color: #94a3b8 !important;
}

.feed-card-title {
    font-size: 1.02rem !important;
    font-weight: 650 !important;
    line-height: 1.35 !important;
    margin-bottom: 6px !important;
}

.feed-card-title a {
    color: #1e293b !important;
    text-decoration: none !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    transition: color 0.2s ease !important;
}

.feed-card-title a:hover {
    color: #059669 !important;
}

.feed-card-excerpt {
    font-size: 0.82rem !important;
    color: #64748b !important;
    line-height: 1.45 !important;
    margin-bottom: 12px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    flex: 1 !important;
}

.feed-card-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-top: 8px !important;
    border-top: 1px dashed #e2e8f0 !important;
}

.feed-stats {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}

.feed-stat-item {
    font-size: 0.75rem !important;
    color: #64748b !important;
}

.feed-read-more {
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: #059669 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    transition: all 0.2s ease !important;
}

.feed-read-more:hover {
    color: #047857 !important;
    transform: translateX(3px) !important;
}

/* Loadmore Button */
.btn-dribbble-loadmore {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 11px 28px !important;
    border-radius: 30px !important;
    font-size: 0.86rem !important;
    font-weight: 600 !important;
    color: #059669 !important;
    background: #ecfdf5 !important;
    border: 1px solid #a7f3d0 !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
}

.btn-dribbble-loadmore:hover {
    background: #059669 !important;
    color: #ffffff !important;
    border-color: #059669 !important;
    box-shadow: 0 4px 14px rgba(5, 150, 105, 0.25) !important;
}

/* Sticky Sidebar */
.dribbble-sidebar-sticky {
    position: sticky !important;
    top: 90px !important;
}

.top-view-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.top-view-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.top-view-item:hover .top-view-title {
    color: #059669 !important;
}

.top-view-badge {
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: #059669 !important;
    background: #ecfdf5 !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.top-view-thumb {
    width: 48px !important;
    height: 48px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}

.top-view-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.top-view-content {
    flex: 1 !important;
    min-width: 0 !important;
}

.top-view-title {
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    line-height: 1.35 !important;
    margin-bottom: 2px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.top-view-meta {
    font-size: 0.72rem !important;
    color: #64748b !important;
}

/* Tag Cloud */
.dribbble-tags-cloud {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.dribbble-tag-pill {
    display: inline-block !important;
    padding: 6px 14px !important;
    background: #f1f5f9 !important;
    color: #475569 !important;
    border-radius: 20px !important;
    font-size: 0.76rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.dribbble-tag-pill:hover {
    background: #dbeafe !important;
    color: #1d4ed8 !important;
    transform: translateY(-1px) !important;
}

/* Ask Pharmacist Banner Card */
.dribbble-ask-pharmacist-card {
    background: linear-gradient(135deg, #065f46 0%, #059669 100%) !important;
    border-radius: 20px !important;
    padding: 24px !important;
    color: #ffffff !important;
    box-shadow: 0 10px 25px -4px rgba(5, 150, 105, 0.3) !important;
}

.ask-card-badge {
    display: inline-flex !important;
    align-items: center !important;
    background: rgba(255, 255, 255, 0.2) !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    padding: 4px 10px !important;
    border-radius: 12px !important;
    margin-bottom: 12px !important;
    letter-spacing: 0.5px !important;
}

.ask-card-title {
    font-size: 1.15rem !important;
    font-weight: 650 !important;
    line-height: 1.35 !important;
    margin-bottom: 8px !important;
}

.ask-card-desc {
    font-size: 0.8rem !important;
    color: #d1fae5 !important;
    line-height: 1.45 !important;
    margin-bottom: 18px !important;
}

.ask-card-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    background: #ffffff !important;
    color: #065f46 !important;
    font-size: 0.84rem !important;
    font-weight: 650 !important;
    padding: 10px 18px !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.ask-card-btn:hover {
    background: #f0fdf4 !important;
    color: #047857 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15) !important;
}

/* Responsive */
@media (max-width: 991px) {
    .dribbble-hero-article-card {
        height: 360px !important;
    }
    .hero-content-box {
        padding: 20px !important;
    }
    .hero-article-title {
        font-size: 1.2rem !important;
    }
    .feed-thumb-wrap {
        width: 130px !important;
        height: 90px !important;
    }
    .feed-card-title {
        font-size: 0.92rem !important;
    }
}

@media (max-width: 576px) {
    .dribbble-feed-card {
        flex-direction: column !important;
    }
    .feed-thumb-wrap {
        width: 100% !important;
        height: 160px !important;
    }
}

/* Dribbble Category Banner Header */
.dribbble-category-banner {
    background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%) !important;
    border: 1px solid #dcfce7 !important;
    border-radius: 20px !important;
    padding: 24px 28px !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;
}

.category-banner-content {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
}

.category-banner-icon {
    width: 56px !important;
    height: 56px !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.5rem !important;
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.3) !important;
    flex-shrink: 0 !important;
}

.category-badge-pill {
    display: inline-block !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    color: #059669 !important;
    background: #dcfce7 !important;
    padding: 2px 8px !important;
    border-radius: 10px !important;
    margin-bottom: 4px !important;
}

.category-banner-title {
    font-size: 1.5rem !important;
    font-weight: 650 !important;
    color: #0f172a !important;
    margin-bottom: 4px !important;
}

.category-banner-desc {
    font-size: 0.84rem !important;
    color: #64748b !important;
    line-height: 1.45 !important;
}

@media (max-width: 768px) {
    .dribbble-category-banner {
        padding: 18px 14px !important;
        text-align: center !important;
    }
    .category-banner-content {
        flex-direction: column !important;
        text-align: center !important;
        gap: 12px !important;
    }
    .category-banner-icon {
        margin: 0 auto !important;
    }
    .category-badge-pill {
        margin: 0 auto 6px auto !important;
    }
    .category-banner-title {
        text-align: center !important;
    }
    .category-banner-desc {
        text-align: center !important;
    }
}

/* Dribbble Search Widget */
.dribbble-search-input-wrap {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

.dribbble-search-input {
    width: 100% !important;
    height: 44px !important;
    border-radius: 12px !important;
    border: 1.5px solid #e2e8f0 !important;
    padding: 8px 45px 8px 14px !important;
    font-size: 0.85rem !important;
    color: #1e293b !important;
    background: #f8fafc !important;
    transition: all 0.2s ease !important;
}

.dribbble-search-input:focus {
    background: #ffffff !important;
    border-color: #059669 !important;
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.12) !important;
    outline: none !important;
}

.btn-dribbble-search-submit {
    position: absolute !important;
    right: 6px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    background: #059669 !important;
    color: #ffffff !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.8rem !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.btn-dribbble-search-submit:hover {
    background: #047857 !important;
}

/* Dribbble Category List */
.dribbble-category-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.dribbble-category-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 12px !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    background: #f8fafc !important;
    border: 1px solid transparent !important;
    transition: all 0.2s ease !important;
}

.dribbble-category-item:hover {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
    transform: translateX(3px) !important;
}

.cat-item-name {
    font-size: 0.84rem !important;
    font-weight: 600 !important;
    color: #334155 !important;
    display: flex !important;
    align-items: center !important;
}

.cat-arrow {
    font-size: 0.7rem !important;
    color: #94a3b8 !important;
    transition: transform 0.2s ease, color 0.2s ease !important;
}

.dribbble-category-item:hover .cat-arrow {
    color: #059669 !important;
    transform: translateX(2px) !important;
}

.dribbble-category-item:hover .cat-item-name {
    color: #059669 !important;
}

.cat-item-badge {
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    color: #059669 !important;
    background: #ecfdf5 !important;
    padding: 2px 8px !important;
    border-radius: 12px !important;
}

/* Empty State */
.dribbble-empty-state {
    padding: 40px 20px !important;
}

.empty-icon-wrap {
    font-size: 3rem !important;
    opacity: 0.5 !important;
}

/* PagedList Styling */
.dribbble-pagination-wrap .pagination {
    display: inline-flex !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.dribbble-pagination-wrap .page-item .page-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 38px !important;
    height: 38px !important;
    padding: 0 12px !important;
    border-radius: 10px !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    color: #475569 !important;
    font-size: 0.84rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.dribbble-pagination-wrap .page-item.active .page-link {
    background: #059669 !important;
    color: #ffffff !important;
    border-color: #059669 !important;
    box-shadow: 0 3px 8px rgba(5, 150, 105, 0.3) !important;
}

.dribbble-pagination-wrap .page-item .page-link:hover:not(.active) {
    background: #ecfdf5 !important;
    color: #059669 !important;
    border-color: #a7f3d0 !important;
}

@media (max-width: 768px) {
    .category-banner-content {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }
}

/* ==========================================================================
   GLOBAL REFINED BREADCRUMB & BG-MAIN (MODERN LUXURY UI)
   ========================================================================== */
#bg-main,
.bgmain_min {
    position: relative !important;
    z-index: 2 !important;
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
    margin-bottom: 1rem !important;
    text-align: left !important;
    padding: 0 !important;
}

#bg-main .container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

#bg-main .breadcrumb,
.breadcrumb {
    background: transparent !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 10px 0 !important;
    margin: 0 !important;
    list-style: none !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    letter-spacing: normal !important;
}

#bg-main .breadcrumb-item,
.breadcrumb-item {
    display: inline-flex !important;
    align-items: center !important;
    color: #64748b !important;
    font-size: 0.82rem !important;
    padding: 0 !important;
}

#bg-main .breadcrumb-item a,
.breadcrumb-item a {
    color: #64748b !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    transition: all 0.2s ease !important;
}

#bg-main .breadcrumb-item a:hover,
.breadcrumb-item a:hover {
    color: #059669 !important;
    transform: translateY(-1px) !important;
}

#bg-main .breadcrumb-item + .breadcrumb-item,
.breadcrumb-item + .breadcrumb-item {
    padding-left: auto !important; right: 0 !important;
}

#bg-main .breadcrumb-item + .breadcrumb-item::before,
.breadcrumb-item + .breadcrumb-item::before {
    content: "\f054" !important;
    font-family: "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 900 !important;
    font-size: 0.58rem !important;
    color: #cbd5e1 !important;
    padding: 0 10px !important;
    display: inline-flex !important;
    align-items: center !important;
}

#bg-main .breadcrumb-item.active,
.breadcrumb-item.active,
#bg-main .breadcrumb-item:last-child,
.breadcrumb-item:last-child {
    color: #059669 !important;
    font-weight: 600 !important;
}

#bg-main .breadcrumb-item:last-child a {
    color: #059669 !important;
    font-weight: 600 !important;
    pointer-events: none !important;
}

/* Fail-safe Chatbot Avatar & Responsive Guard */
.chatbot-avatar-wrap {
    width: 42px !important;
    height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
    overflow: hidden !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    position: relative !important;
}

img.chatbot-avatar,
.chat-header img.chatbot-avatar,
.chatbot-avatar {
    width: 42px !important;
    height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
    object-fit: contain !important;
    border-radius: 50% !important;
    display: block !important;
}

@media (max-width: 767px) {
    .chat-widget {
        max-width: 100vw !important;
        width: 100vw !important;
    }
}