/* ============================================================================
   NAVIGATION MENU - MEGA MENU UI CUSTOMIZATION
   Styles for Option B (1 StreamField unified approach)
   Demo reference: MEGA_MENU_UI_DEMO.html
   ============================================================================ */

/* CSS Variables - Banner CTA Gradients (định nghĩa để đảm bảo hoạt động độc lập) */
:root {
    /* === GRADIENTS === */
    --gradient-purple: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
    --gradient-blue: linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%);
    --gradient-green: linear-gradient(135deg, #10b981 0%, #22c55e 100%);

    /* === LAYOUT DIMENSIONS === */
    --header-height: 80px;
    --sidebar-width: 256px;
    --sidebar-width-mobile: 200px;
    --sidebar-banner-height: 600px;
    --sidebar-gap: 16px;
    --product-grid-gap: 16px;
    --content-max-width: 1280px;

    /* === FILTER BAR === */
    --filter-bar-height: 56px;
    --filter-bar-bg: #f9fafb;
    --filter-bar-border: #e5e7eb;

    /* === PRODUCT CARD === */
    --product-card-radius: 12px;
    --product-card-padding: 12px;
    --product-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    --product-card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.15);

    /* === COLORS - Semantic === */
    --text-primary: #1f2937;
    --text-secondary: #6b7280;
    --text-muted: #9ca3af;
    --bg-primary: #ffffff;
    --bg-secondary: #f9fafb;
    --border-color: #e5e7eb;
    --accent-primary: #4f46e5;
    --accent-hover: #4338ca;

    /* === ANIMATION === */
    --transition-fast: 150ms ease;
    --transition-normal: 300ms ease;
    --transition-slow: 500ms ease;

    /* === Z-INDEX SCALE === */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal: 300;
    --z-tooltip: 400;
}

/* === GLOBAL TEXT SHARPNESS - Đảm bảo text CTA không bị nhoè === */
/* Loại bỏ mọi hiệu ứng có thể gây blur text */
[class*="banner"][class*="__title"],
[class*="banner"][class*="__subtitle"],
[class*="banner"][class*="__title"] p,
[class*="banner"][class*="__subtitle"] p,
[class*="cta"][class*="__title"],
[class*="cta"][class*="__subtitle"],
[class*="cta"][class*="__title"] p,
[class*="cta"][class*="__subtitle"] p {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
    transform: none !important;
    filter: none !important;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* Tạo stacking context riêng để isolate khỏi parent transforms */
    isolation: isolate;
    will-change: auto;
}

/* Không dùng text-shadow nặng trên chữ CTA (gây nhoè) – chỉ dùng shadow nhẹ cho overlay trên ảnh */
.inline-banner-cta__title,
.inline-banner-cta__subtitle,
.inline-banner-cta__title p,
.inline-banner-cta__subtitle p,
.sidebar-banner-cta__title,
.sidebar-banner-cta__subtitle,
.sidebar-banner-cta__title p,
.sidebar-banner-cta__subtitle p {
    text-shadow: none !important;
}

/* Sidebar overlay trên ảnh: shadow rất nhẹ để đọc chữ, tránh nhoè */
.sidebar-banner-overlay__text .sidebar-banner-overlay__title,
.sidebar-banner-overlay__text .sidebar-banner-overlay__title p,
.sidebar-banner-overlay__text .sidebar-banner-overlay__subtitle,
.sidebar-banner-overlay__text .sidebar-banner-overlay__subtitle p {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}

/* === 1. BACKGROUND STYLES (7 variations) === */
/* Demo reference: line 221-235 */

.mega-menu-dropdown {
    border-radius: 0.5rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

/* Transparent - đồng nhất với trang */
.mega-menu-dropdown.bg-transparent {
    background: transparent;
    border: none;
    box-shadow: none;
}

/* White */
.mega-menu-dropdown.bg-white {
    background: #ffffff;
    border: 1px solid #e5e7eb;
}

/* Solid Light */
.mega-menu-dropdown.bg-solid-light {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
}

/* Solid Dark */
.mega-menu-dropdown.bg-solid-dark {
    background: #1f2937;
    color: #f3f4f6;
}

.mega-menu-dropdown.bg-solid-dark a,
.mega-menu-dropdown.bg-solid-dark .category-card {
    color: #f3f4f6;
}

/* Purple Gradient */
.mega-menu-dropdown.bg-gradient-purple {
    background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
    color: #ffffff;
}

.mega-menu-dropdown.bg-gradient-purple a,
.mega-menu-dropdown.bg-gradient-purple .category-card {
    color: #ffffff;
}

/* Blue Gradient */
.mega-menu-dropdown.bg-gradient-blue {
    background: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 100%);
    color: #ffffff;
}

.mega-menu-dropdown.bg-gradient-blue a,
.mega-menu-dropdown.bg-gradient-blue .category-card {
    color: #ffffff;
}

/* Dark Gradient (Aurora) */
.mega-menu-dropdown.bg-gradient-dark {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    color: #f3f4f6;
}

.mega-menu-dropdown.bg-gradient-dark a,
.mega-menu-dropdown.bg-gradient-dark .category-card {
    color: #f3f4f6;
}


/* === 2. HORIZONTAL BANNER STYLES (Header/Footer) === */

.horizontal-banner {
    width: 100%;
    margin: 0 0 1.5rem 0;
}

.horizontal-banner--footer {
    margin: 1.5rem 0 0 0;
}

/* Reset margin khi nằm trong container có space-y (tránh spacing chồng chất) */
#headerBannersContainer>.horizontal-banner,
#footerBannersContainer>.horizontal-banner {
    margin: 0;
}

/* Đảm bảo premium content blocks trong header/footer có padding nội bộ hợp lý */
#headerBannersContainer .menu-premium-content,
#footerBannersContainer .menu-premium-content {
    /* Block nội bộ không cần thêm margin — space-y-4 trên container đã xử lý */
    margin: 0;
}

/* Khi chỉ có 1 block trong container, bỏ margin-bottom thừa */
#headerBannersContainer > *:last-child,
#footerBannersContainer > *:last-child {
    margin-bottom: 0;
}

.horizontal-banner--full-width {
    border-radius: 0.5rem;
    overflow: hidden;
}

/* === Horizontal Banner Height Classes === */
/* Chỉ dùng cho horizontal banner trong menu - chiều rộng fullwidth, thiết lập chiều cao */
.horizontal-banner--height-auto {
    height: auto;
}

.horizontal-banner--height-xs {
    height: 80px !important;
    overflow: hidden;
}

.horizontal-banner--height-sm {
    height: 120px !important;
    overflow: hidden;
}

.horizontal-banner--height-md {
    height: 180px !important;
}

.horizontal-banner--height-lg {
    height: 240px !important;
}

.horizontal-banner--height-xl {
    height: 320px !important;
}

/* Inner elements fill parent height */
.horizontal-banner[class*="--height-"] .horizontal-banner__container {
    height: 100% !important;
}

.horizontal-banner[class*="--height-"] .horizontal-banner__cta,
.horizontal-banner[class*="--height-"] .horizontal-banner__image-overlay,
.horizontal-banner[class*="--height-"] .horizontal-banner__default {
    height: 100% !important;
}

.horizontal-banner[class*="--height-"] .horizontal-banner__default a,
.horizontal-banner[class*="--height-"] .horizontal-banner__default img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
}

/* Responsive content cho height nhỏ (xs, sm) */
.horizontal-banner--height-xs .horizontal-banner__image-overlay-content,
.horizontal-banner--height-xs .horizontal-banner__cta-grid {
    padding: 0.5rem 1rem !important;
    gap: 0.5rem !important;
}

.horizontal-banner--height-xs .horizontal-banner__image-title,
.horizontal-banner--height-xs .horizontal-banner__cta-title {
    font-size: 1rem !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

.horizontal-banner--height-xs .horizontal-banner__image-subtitle,
.horizontal-banner--height-xs .horizontal-banner__cta-subtitle {
    font-size: 0.75rem !important;
    margin: 0 !important;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.horizontal-banner--height-xs .horizontal-banner__image-btn,
.horizontal-banner--height-xs .horizontal-banner__cta-btn {
    padding: 0.25rem 0.75rem !important;
    font-size: 0.75rem !important;
}

.horizontal-banner--height-sm .horizontal-banner__image-overlay-content,
.horizontal-banner--height-sm .horizontal-banner__cta-grid {
    padding: 0.75rem 1.25rem !important;
    gap: 0.75rem !important;
}

.horizontal-banner--height-sm .horizontal-banner__image-title,
.horizontal-banner--height-sm .horizontal-banner__cta-title {
    font-size: 1.25rem !important;
    margin: 0 0 0.25rem 0 !important;
}

.horizontal-banner--height-sm .horizontal-banner__image-subtitle,
.horizontal-banner--height-sm .horizontal-banner__cta-subtitle {
    font-size: 0.875rem !important;
    margin: 0 0 0.5rem 0 !important;
}

.horizontal-banner--height-sm .horizontal-banner__image-btn,
.horizontal-banner--height-sm .horizontal-banner__cta-btn {
    padding: 0.375rem 1rem !important;
    font-size: 0.875rem !important;
}

/* CTA Style */
.horizontal-banner__cta {
    border-radius: 0.5rem;
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* CTA Layout - Horizontal: Icon | Content | Button ngang hàng */
.horizontal-banner__cta--layout {
    padding: 1rem 2rem;
    height: 100%;
}

.horizontal-banner__cta-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 100%;
    height: 100%;
}

.horizontal-banner__cta-icon {
    font-size: 2rem;
    line-height: 1;
    flex-shrink: 0;
}

.horizontal-banner__cta-content {
    flex: 1;
    min-width: 0;
    text-align: left;
    /* Text wrap - cho phép nhiều dòng */
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

/* Theme chữ theo banner.get_cta_text_theme */
.horizontal-banner__cta--dark .horizontal-banner__cta-title,
.horizontal-banner__cta--dark .horizontal-banner__cta-subtitle,
.horizontal-banner__cta--dark .horizontal-banner__cta-title p,
.horizontal-banner__cta--dark .horizontal-banner__cta-subtitle p {
    color: #fff !important;
}

.horizontal-banner__cta--light .horizontal-banner__cta-title,
.horizontal-banner__cta--light .horizontal-banner__cta-title p {
    color: #1e293b !important;
}

.horizontal-banner__cta--light .horizontal-banner__cta-subtitle,
.horizontal-banner__cta--light .horizontal-banner__cta-subtitle p {
    color: #475569 !important;
}

.horizontal-banner__cta--royal .horizontal-banner__cta-title,
.horizontal-banner__cta--royal .horizontal-banner__cta-subtitle,
.horizontal-banner__cta--royal .horizontal-banner__cta-title p,
.horizontal-banner__cta--royal .horizontal-banner__cta-subtitle p {
    color: #F3E5AB !important;
}

.horizontal-banner__cta--cyber .horizontal-banner__cta-title,
.horizontal-banner__cta--cyber .horizontal-banner__cta-subtitle,
.horizontal-banner__cta--cyber .horizontal-banner__cta-title p,
.horizontal-banner__cta--cyber .horizontal-banner__cta-subtitle p {
    color: #FB923C !important;
}

.horizontal-banner__cta-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
    text-align: left;
    /* Text wrap */
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    max-width: 100%;
    /* Text trực tiếp trên nền – không dùng text-shadow (tránh nhoè) */
    text-shadow: none !important;
    /* Text sharpness */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.horizontal-banner__cta-title p {
    margin: 0 0 0.35rem 0;
}

.horizontal-banner__cta-subtitle {
    font-size: 0.875rem;
    margin: 0.25rem 0 0 0;
    line-height: 1.4;
    text-align: left;
    opacity: 0.9;
    /* Text wrap */
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    max-width: 100%;
    /* Text trực tiếp trên nền – không dùng text-shadow (tránh nhoè) */
    text-shadow: none !important;
    /* Text sharpness */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.horizontal-banner__cta-subtitle p {
    margin: 0;
}

.horizontal-banner__cta-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    min-height: 40px;
    padding: 0 1.5rem;
    font-weight: 600;
    font-size: 1rem;
    border-radius: 0.5rem;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    width: fit-content;
    max-width: 100%;
    transition: box-shadow 0.2s ease, background 0.2s ease;
    /* Text sharpness - no filter/transform to avoid blur */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Style nút CTA trên nền (header/footer banner) - base primary tím */
.horizontal-banner__cta-btn--primary {
    background: var(--gradient-purple, var(--cms-gradient-primary, linear-gradient(135deg, #6366f1 0%, #ec4899 100%)));
    color: #fff;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.35);
}

.horizontal-banner__cta-btn--primary:hover {
    box-shadow: 0 6px 24px rgba(99, 102, 241, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Biến thể nhiều màu cho từng cta_style (không dùng nút trắng/xám) */
.horizontal-banner__cta-btn--primary_purple {
    background: var(--gradient-purple, linear-gradient(135deg, #6366f1 0%, #a855f7 100%));
    color: #fff;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.35);
}

.horizontal-banner__cta-btn--primary_blue {
    background: var(--gradient-blue, linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%));
    color: #fff;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.35);
}

.horizontal-banner__cta-btn--primary_green {
    background: var(--gradient-green, linear-gradient(135deg, #10b981 0%, #22c55e 100%));
    color: #fff;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.35);
}

.horizontal-banner__cta-btn--primary_orange {
    background: linear-gradient(135deg, #f97316 0%, #facc15 100%);
    color: #111827;
    box-shadow: 0 4px 15px rgba(249, 115, 22, 0.35);
}

.horizontal-banner__cta-btn--primary_soft {
    background: var(--cms-gradient-soft, linear-gradient(135deg, rgba(102, 126, 234, 0.16) 0%, rgba(244, 114, 182, 0.18) 100%));
    color: #312e81;
    box-shadow: 0 4px 12px rgba(148, 163, 184, 0.35);
}

.horizontal-banner__cta-btn--primary_bright {
    background: var(--cms-gradient-primary, linear-gradient(135deg, #4f46e5 0%, #ec4899 100%));
    color: #fff;
    box-shadow: 0 4px 18px rgba(79, 70, 229, 0.4);
}

/* 8 combo phong cách – horizontal-banner CTA */
.horizontal-banner__cta-btn--sunset_dream {
    background: #FACC15;
    color: #111827;
    box-shadow: 0 4px 15px rgba(250, 204, 21, 0.4);
}

.horizontal-banner__cta-btn--deep_ocean {
    background: rgba(255, 255, 255, 0.95);
    color: #2563eb;
}

.horizontal-banner__cta-btn--royal_luxury {
    background: linear-gradient(135deg, #D4AF37 0%, #AA8432 100%);
    color: #000;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
}

.horizontal-banner__cta-btn--cyber_sale {
    background: linear-gradient(135deg, #F97316 0%, #E11D48 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(249, 115, 22, 0.4);
}

.horizontal-banner__cta-btn--flash_sale {
    background: rgba(255, 255, 255, 0.95);
    color: #E11D48;
}

.horizontal-banner__cta-btn--midnight_tech {
    background: linear-gradient(135deg, #3B82F6 0%, #2DD4BF 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}

.horizontal-banner__cta-btn--soft_garden {
    background: linear-gradient(135deg, #FB7185 0%, #F472B6 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(251, 113, 133, 0.4);
}

.horizontal-banner__cta-btn--neon_purple {
    background: #39FF14;
    color: #000;
    box-shadow: 0 4px 15px rgba(57, 255, 20, 0.4);
}

.horizontal-banner__cta-btn--sunset_dream:hover,
.horizontal-banner__cta-btn--royal_luxury:hover,
.horizontal-banner__cta-btn--cyber_sale:hover,
.horizontal-banner__cta-btn--midnight_tech:hover,
.horizontal-banner__cta-btn--soft_garden:hover,
.horizontal-banner__cta-btn--neon_purple:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.horizontal-banner__cta-btn--deep_ocean:hover,
.horizontal-banner__cta-btn--flash_sale:hover {
    background: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.horizontal-banner__cta-btn--size {
    height: 40px;
    min-height: 40px;
    padding: 0 1.5rem;
    width: fit-content;
}

/* Image Overlay Style */
.horizontal-banner__image-overlay {
    position: relative;
    min-height: 180px;
    border-radius: 0.5rem;
    overflow: hidden;
}

/* Khi có height cố định từ parent */
.horizontal-banner[class*="--height-"] .horizontal-banner__image-overlay {
    min-height: unset !important;
    height: 100% !important;
}

.horizontal-banner__image-overlay img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Image+Overlay Layout - Text trái, ảnh phải */
.horizontal-banner__image-overlay--layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
}

/* Bỏ min-height khi có height cố định */
.horizontal-banner[class*="--height-"] .horizontal-banner__image-overlay--layout {
    min-height: unset !important;
}

/* Image overlay img container - đảm bảo fill đúng với height cố định */
.horizontal-banner__image-overlay-img {
    position: absolute;
    inset: 0;
    grid-column: 1 / -1;
}

.horizontal-banner[class*="--height-"] .horizontal-banner__image-overlay-img {
    position: absolute;
    inset: 0;
}

.horizontal-banner__image-overlay-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Gradient overlay cho horizontal banner - gradient ngang từ trái sang phải */
.horizontal-banner__image-overlay-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.4) 40%, transparent 70%);
    z-index: 0;
}

.horizontal-banner__image-overlay-content {
    position: relative;
    grid-column: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 2rem;
    z-index: 1;
}

/* Text group: Icon + Text inner (title+subtitle) */
.horizontal-banner__text-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    flex: 1;
    min-width: 0;
}

.horizontal-banner__icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.horizontal-banner__text-inner {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.horizontal-banner__image-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
    text-align: left;
    /* Text wrap - cho phép nhiều dòng */
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    max-width: 100%;
    /* Text trực tiếp trên nền – không text-shadow để tránh nhoè chữ */
    text-shadow: none !important;
    /* Text sharpness */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.horizontal-banner__image-title p {
    margin: 0 0 0.5rem 0;
}

.horizontal-banner__image-subtitle {
    font-size: 0.875rem;
    margin: 0.25rem 0 0 0;
    line-height: 1.4;
    text-align: left;
    opacity: 0.9;
    /* Text wrap - cho phép nhiều dòng */
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    max-width: 100%;
    /* Text trực tiếp trên nền – không text-shadow để tránh nhoè chữ */
    text-shadow: none !important;
    /* Text sharpness */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.horizontal-banner__image-subtitle p {
    margin: 0 0 1.25rem 0;
}

/* Theme chữ cho CTA trên ảnh (horizontal banner image overlay) */
.horizontal-banner__image-overlay--dark .horizontal-banner__image-title,
.horizontal-banner__image-overlay--dark .horizontal-banner__image-subtitle,
.horizontal-banner__image-overlay--dark .horizontal-banner__image-title p,
.horizontal-banner__image-overlay--dark .horizontal-banner__image-subtitle p {
    color: #fff !important;
}

.horizontal-banner__image-overlay--light .horizontal-banner__image-title,
.horizontal-banner__image-overlay--light .horizontal-banner__image-title p {
    color: #1e293b !important;
}

.horizontal-banner__image-overlay--light .horizontal-banner__image-subtitle,
.horizontal-banner__image-overlay--light .horizontal-banner__image-subtitle p {
    color: #475569 !important;
}

.horizontal-banner__image-overlay--royal .horizontal-banner__image-title,
.horizontal-banner__image-overlay--royal .horizontal-banner__image-subtitle,
.horizontal-banner__image-overlay--royal .horizontal-banner__image-title p,
.horizontal-banner__image-overlay--royal .horizontal-banner__image-subtitle p {
    color: #F3E5AB !important;
}

.horizontal-banner__image-overlay--cyber .horizontal-banner__image-title,
.horizontal-banner__image-overlay--cyber .horizontal-banner__image-subtitle,
.horizontal-banner__image-overlay--cyber .horizontal-banner__image-title p,
.horizontal-banner__image-overlay--cyber .horizontal-banner__image-subtitle p {
    color: #FB923C !important;
}

.horizontal-banner__image-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    min-height: 40px;
    padding: 0 1.5rem;
    font-weight: 600;
    font-size: 1rem;
    border-radius: 0.5rem;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    width: fit-content;
    max-width: 100%;
    transition: box-shadow 0.2s ease, background 0.2s ease;
    /* Text sharpness - no filter/transform to avoid blur */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.horizontal-banner__image-btn--primary {
    background: var(--gradient-purple, var(--cms-gradient-primary, linear-gradient(135deg, #6366f1 0%, #ec4899 100%)));
    color: #fff;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.35);
}

.horizontal-banner__image-btn--primary:hover {
    box-shadow: 0 6px 24px rgba(99, 102, 241, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.horizontal-banner__image-btn--white {
    background: rgba(255, 255, 255, 0.95);
    color: #1f2937;
}

.horizontal-banner__image-btn--white:hover {
    background: #fff;
    color: #111827;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.horizontal-banner__image-btn--outline_white {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.9);
}

.horizontal-banner__image-btn--outline_white:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: #fff;
    box-shadow: 0 4px 16px rgba(255, 255, 255, 0.2);
}

.horizontal-banner__image-btn--dark {
    background: #1f2937;
    color: #fff;
}

.horizontal-banner__image-btn--dark:hover {
    background: #111827;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* Biến thể nhiều màu cho CTA trên ảnh (horizontal banner) */
.horizontal-banner__image-btn--primary_purple {
    background: var(--gradient-purple, linear-gradient(135deg, #6366f1 0%, #a855f7 100%));
    color: #fff;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.35);
}

.horizontal-banner__image-btn--primary_blue {
    background: var(--gradient-blue, linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%));
    color: #fff;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.35);
}

.horizontal-banner__image-btn--primary_green {
    background: var(--gradient-green, linear-gradient(135deg, #10b981 0%, #22c55e 100%));
    color: #fff;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.35);
}

.horizontal-banner__image-btn--primary_orange {
    background: linear-gradient(135deg, #f97316 0%, #facc15 100%);
    color: #111827;
    box-shadow: 0 4px 15px rgba(249, 115, 22, 0.35);
}

.horizontal-banner__image-btn--primary_soft {
    background: var(--cms-gradient-soft, linear-gradient(135deg, rgba(102, 126, 234, 0.16) 0%, rgba(244, 114, 182, 0.18) 100%));
    color: #312e81;
    box-shadow: 0 4px 12px rgba(148, 163, 184, 0.35);
}

.horizontal-banner__image-btn--primary_bright {
    background: var(--cms-gradient-primary, linear-gradient(135deg, #4f46e5 0%, #ec4899 100%));
    color: #fff;
    box-shadow: 0 4px 18px rgba(79, 70, 229, 0.4);
}

.horizontal-banner__image-btn--primary_purple:hover,
.horizontal-banner__image-btn--primary_blue:hover,
.horizontal-banner__image-btn--primary_green:hover,
.horizontal-banner__image-btn--primary_bright:hover {
    box-shadow: 0 6px 24px rgba(99, 102, 241, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.horizontal-banner__image-btn--primary_orange:hover {
    box-shadow: 0 6px 24px rgba(249, 115, 22, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.horizontal-banner__image-btn--primary_soft:hover {
    box-shadow: 0 6px 20px rgba(148, 163, 184, 0.45);
}

/* 8 combo phong cách – horizontal-banner image overlay */
.horizontal-banner__image-btn--sunset_dream {
    background: #FACC15;
    color: #111827;
    box-shadow: 0 4px 15px rgba(250, 204, 21, 0.4);
}

.horizontal-banner__image-btn--deep_ocean {
    background: rgba(255, 255, 255, 0.95);
    color: #2563eb;
}

.horizontal-banner__image-btn--royal_luxury {
    background: linear-gradient(135deg, #D4AF37 0%, #AA8432 100%);
    color: #000;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
}

.horizontal-banner__image-btn--cyber_sale {
    background: linear-gradient(135deg, #F97316 0%, #E11D48 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(249, 115, 22, 0.4);
}

.horizontal-banner__image-btn--flash_sale {
    background: rgba(255, 255, 255, 0.95);
    color: #E11D48;
}

.horizontal-banner__image-btn--midnight_tech {
    background: linear-gradient(135deg, #3B82F6 0%, #2DD4BF 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}

.horizontal-banner__image-btn--soft_garden {
    background: linear-gradient(135deg, #FB7185 0%, #F472B6 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(251, 113, 133, 0.4);
}

.horizontal-banner__image-btn--neon_purple {
    background: #39FF14;
    color: #000;
    box-shadow: 0 4px 15px rgba(57, 255, 20, 0.4);
}

.horizontal-banner__image-btn--sunset_dream:hover,
.horizontal-banner__image-btn--royal_luxury:hover,
.horizontal-banner__image-btn--cyber_sale:hover,
.horizontal-banner__image-btn--midnight_tech:hover,
.horizontal-banner__image-btn--soft_garden:hover,
.horizontal-banner__image-btn--neon_purple:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.horizontal-banner__image-btn--deep_ocean:hover,
.horizontal-banner__image-btn--flash_sale:hover {
    background: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.horizontal-banner__image-btn--size {
    height: 40px;
    min-height: 40px;
    padding: 0 1.5rem;
    width: fit-content;
}

@media (max-width: 639px) {
    .horizontal-banner__cta-grid {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .horizontal-banner__cta-btn {
        align-self: center;
    }

    .horizontal-banner__image-overlay--layout {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr auto;
        min-height: 260px;
    }

    .horizontal-banner__image-overlay-gradient {
        background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0.85) 100%);
    }

    .horizontal-banner__image-overlay-content {
        grid-row: 2;
        padding: 1.5rem 1.5rem;
    }
}


/* === 3. INLINE BANNER STYLES (6 variations) === */
/* Demo reference: line 1043-1160 */

.inline-banner {
    display: flex;
    flex-direction: column;
    height: 100%;
    cursor: pointer;
    /* Text sharpness - no transition/transform to avoid blur */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* CTA Style - Gradient + Layout icon | content | button */
.inline-banner--cta {
    background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
    color: #ffffff;
    padding: 1rem 1.25rem;
    min-height: 100px;
}

.inline-banner-cta__grid {
    display: flex;
    align-items: center;
    gap: 0.75rem 1rem;
}

.inline-banner-cta__icon {
    font-size: 2.25rem;
    line-height: 1;
    flex-shrink: 0;
}

.inline-banner-cta__content {
    flex: 1;
    min-width: 0;
    /* Text wrap và căn giữa */
    text-align: center;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

/* Theme chữ cho inline banner CTA */
.inline-banner--cta--dark .inline-banner-cta__title,
.inline-banner--cta--dark .inline-banner-cta__title p {
    color: #fff !important;
}

.inline-banner--cta--dark .inline-banner-cta__subtitle,
.inline-banner--cta--dark .inline-banner-cta__subtitle p {
    color: rgba(255, 255, 255, 0.9) !important;
}

.inline-banner--cta--light .inline-banner-cta__title,
.inline-banner--cta--light .inline-banner-cta__title p {
    color: #1e293b !important;
}

.inline-banner--cta--light .inline-banner-cta__subtitle,
.inline-banner--cta--light .inline-banner-cta__subtitle p {
    color: #475569 !important;
    opacity: 0.9;
}

.inline-banner--cta--royal .inline-banner-cta__title,
.inline-banner--cta--royal .inline-banner-cta__title p,
.inline-banner--cta--royal .inline-banner-cta__subtitle,
.inline-banner--cta--royal .inline-banner-cta__subtitle p {
    color: #F3E5AB !important;
}

.inline-banner--cta--cyber .inline-banner-cta__title,
.inline-banner--cta--cyber .inline-banner-cta__title p,
.inline-banner--cta--cyber .inline-banner-cta__subtitle,
.inline-banner--cta--cyber .inline-banner-cta__subtitle p {
    color: #FB923C !important;
}

.inline-banner-cta__title {
    font-size: 0.9375rem;
    font-weight: 700;
    margin: 0 0 0.15rem 0;
    line-height: 1.3;
    text-align: center;
    /* Text wrap - cho phép nhiều dòng */
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    max-width: 100%;
    /* Text sharpness */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.inline-banner-cta__subtitle {
    font-size: 0.8125rem;
    margin: 0;
    line-height: 1.3;
    text-align: center;
    /* Text wrap - cho phép nhiều dòng */
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    max-width: 100%;
    /* Text sharpness */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.inline-banner-cta__btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    min-height: 40px;
    padding: 0 1.25rem;
    font-size: 0.9375rem;
    font-weight: 600;
    border-radius: 0.5rem;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

/* Style nút CTA trên nền (inline banner) - giống stream block / price block */
.inline-banner-cta__btn--primary {
    background: var(--gradient-purple, var(--cms-gradient-primary, linear-gradient(135deg, #6366f1 0%, #ec4899 100%)));
    color: #fff;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.35);
}

.inline-banner-cta__btn--primary:hover {
    box-shadow: 0 6px 24px rgba(99, 102, 241, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.inline-banner-cta__btn--white {
    background: rgba(255, 255, 255, 0.95);
    color: #5b21b6;
}

.inline-banner-cta__btn--white:hover {
    background: #fff;
    color: #4c1d95;
}

.inline-banner-cta__btn--outline_white {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.9);
}

.inline-banner-cta__btn--outline_white:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: #fff;
}

.inline-banner-cta__btn--dark {
    background: #1f2937;
    color: #fff;
}

.inline-banner-cta__btn--dark:hover {
    background: #111827;
}

/* Biến thể nhiều màu cho inline banner */
.inline-banner-cta__btn--primary_purple {
    background: var(--gradient-purple, linear-gradient(135deg, #6366f1 0%, #a855f7 100%));
    color: #fff;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.35);
}

.inline-banner-cta__btn--primary_blue {
    background: var(--gradient-blue, linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%));
    color: #fff;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.35);
}

.inline-banner-cta__btn--primary_green {
    background: var(--gradient-green, linear-gradient(135deg, #10b981 0%, #22c55e 100%));
    color: #fff;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.35);
}

.inline-banner-cta__btn--primary_orange {
    background: linear-gradient(135deg, #f97316 0%, #facc15 100%);
    color: #111827;
    box-shadow: 0 4px 15px rgba(249, 115, 22, 0.35);
}

.inline-banner-cta__btn--primary_soft {
    background: var(--cms-gradient-soft, linear-gradient(135deg, rgba(102, 126, 234, 0.16) 0%, rgba(244, 114, 182, 0.18) 100%));
    color: #312e81;
    box-shadow: 0 4px 12px rgba(148, 163, 184, 0.35);
}

.inline-banner-cta__btn--primary_bright {
    background: var(--cms-gradient-primary, linear-gradient(135deg, #4f46e5 0%, #ec4899 100%));
    color: #fff;
    box-shadow: 0 4px 18px rgba(79, 70, 229, 0.4);
}

.inline-banner-cta__btn--sunset_dream {
    background: #FACC15;
    color: #111827;
    box-shadow: 0 4px 15px rgba(250, 204, 21, 0.4);
}

.inline-banner-cta__btn--deep_ocean {
    background: rgba(255, 255, 255, 0.95);
    color: #2563eb;
}

.inline-banner-cta__btn--royal_luxury {
    background: linear-gradient(135deg, #D4AF37 0%, #AA8432 100%);
    color: #000;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
}

.inline-banner-cta__btn--cyber_sale {
    background: linear-gradient(135deg, #F97316 0%, #E11D48 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(249, 115, 22, 0.4);
}

.inline-banner-cta__btn--flash_sale {
    background: rgba(255, 255, 255, 0.95);
    color: #E11D48;
}

.inline-banner-cta__btn--midnight_tech {
    background: linear-gradient(135deg, #3B82F6 0%, #2DD4BF 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}

.inline-banner-cta__btn--soft_garden {
    background: linear-gradient(135deg, #FB7185 0%, #F472B6 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(251, 113, 133, 0.4);
}

.inline-banner-cta__btn--neon_purple {
    background: #39FF14;
    color: #000;
    box-shadow: 0 4px 15px rgba(57, 255, 20, 0.4);
}

.inline-banner-cta__btn--sunset_dream:hover,
.inline-banner-cta__btn--royal_luxury:hover,
.inline-banner-cta__btn--cyber_sale:hover,
.inline-banner-cta__btn--midnight_tech:hover,
.inline-banner-cta__btn--soft_garden:hover,
.inline-banner-cta__btn--neon_purple:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.inline-banner-cta__btn--deep_ocean:hover,
.inline-banner-cta__btn--flash_sale:hover {
    background: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.inline-banner-cta__btn--size {
    height: 40px;
    min-height: 40px;
    padding: 0 1.25rem;
}

/* Image Style - Image + Text + Button */
.inline-banner--image {
    background: #ffffff;
    border: 2px solid #e5e7eb;
}

.inline-banner--image img {
    width: 100%;
    height: auto;
    min-height: 180px;
    object-fit: cover;
    /* Cho phép ảnh co giãn, giữ aspect-ratio mặc định */
}

.inline-banner--image .inline-banner__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    padding: 1rem;
    color: #ffffff;
}

/* Image-Only Style - Pure Image */
.inline-banner--image-only {
    border: 2px solid #e5e7eb;
    padding: 0;
}

.inline-banner--image-only img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Bỏ aspect-ratio để cho phép ảnh co giãn theo container */
}

.inline-banner--image-only:hover img {
    filter: brightness(1.05);
}

/* Highlight Style - Viền màu */
.inline-banner--highlight {
    border: 3px solid #3b82f6;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}

/* Gradient Style - Gradient background */
.inline-banner--gradient {
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    color: #ffffff;
}

/* Default Style */
.inline-banner--default {
    background: #ffffff;
    border: 1px solid #e5e7eb;
}

/* Inline banner image overlay - text trực tiếp, không shadow (tránh nhoè) */
.inline-banner-image-overlay__title,
.inline-banner-image-overlay__title p {
    text-shadow: none !important;
    /* Text wrap - cho phép nhiều dòng */
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    max-width: 100%;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
}

.inline-banner-image-overlay__subtitle,
.inline-banner-image-overlay__subtitle p {
    text-shadow: none !important;
    /* Text wrap - cho phép nhiều dòng */
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    max-width: 100%;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
}


/* === 4. SIDEBAR BANNERS (Fixed positioning, vertically centered) === */
/* Demo reference: line 270-310, 1750-1836 */
/* Requirements:
   - Kích thước hình chữ nhật (200px width x 600px height, tỷ lệ 1:3)
   - Căn giữa theo chiều dọc trong khoảng trống (từ header đến bottom)
   - position: fixed - không bị ảnh hưởng khi scroll
   - Không bị header che (z-index < header, top position below header)
   - Phù hợp với màn hình laptop phổ thông (1366x768, 1920x1080)
*/

.sidebar-banner {
    position: fixed;
    /* Căn giữa trong vùng khả dụng: từ header (100px) đến bottom viewport */
    /* Header: 56px navbar + 44px secondary = 100px */
    /* Công thức: top = header + (available_height - banner_height) / 2 */
    /* available_height = 100vh - 100px (header) - 20px (bottom padding) */
    top: calc(100px + (100vh - 100px - 20px - min(600px, calc(100vh - 140px))) / 2);
    z-index: 40;
    /* Below header (z-index: 1050) and dropdowns */
    width: 160px !important;
    /* Fixed height: giới hạn theo viewport */
    height: min(600px, calc(100vh - 140px)) !important;
    overflow: hidden;
    display: none;
    /* Hidden by default - only show on wide screens */
    background: transparent;
    border-radius: 0.75rem;
}

.sidebar-banner-left {
    /* Bám sát mép trái viewport, cách 12px */
    left: 12px;
}

.sidebar-banner-right {
    /* Bám sát mép phải viewport, cách 12px */
    right: 12px;
}

/* Sidebar banners: breakpoints dựa trên content max-w-7xl (1280px) + 2×(banner + gap)
   Đảm bảo banner KHÔNG đè lên content kể cả khi zoom 110-125%. */
/* ≥1600px: banner nhỏ (120px), opacity giảm nhẹ */
@media (min-width: 1600px) {
    .sidebar-banner {
        display: block;
        width: 120px !important;
        opacity: 0.92;
    }
}

/* ≥1700px: banner đầy đủ (160px) */
@media (min-width: 1700px) {
    .sidebar-banner {
        width: 160px !important;
        opacity: 1;
    }
}

/* ≥1800px: banner rộng hơn (200px), căn giữa trong khoảng trống */
@media (min-width: 1800px) {
    .sidebar-banner {
        width: 200px !important;
    }

    .sidebar-banner-left {
        left: max(20px, calc((100vw - 1680px) / 4));
    }

    .sidebar-banner-right {
        right: max(20px, calc((100vw - 1680px) / 4));
    }
}

/* Sidebar banner content - Phương án D: nội dung từ banner_item.html */
.sidebar-banner-content {
    background: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.sidebar-banner-content--fill {
    height: 100%;
    width: 100%;
}

/* Cho banner_item render bên trong: fill container, ảnh cover */
.sidebar-banner-content--fill>a,
.sidebar-banner-content--fill>div {
    display: block !important;
    height: 100% !important;
    width: 100% !important;
    min-height: 0;
}

.sidebar-banner-content--fill .banner-item__image-inner,
.sidebar-banner-content--fill [class*="aspect-"] {
    height: 100% !important;
    min-height: 0;
    aspect-ratio: unset !important;
    /* Force fill container, không dùng aspect-ratio */
}

/* banner_item.html server-render: .banner-item-wrapper > .block.group > div chain fill container */
.sidebar-banner-content--fill .banner-item-wrapper {
    height: 100%;
}

.sidebar-banner-content--fill .block.group {
    height: 100%;
}

.sidebar-banner-content--fill .block.group>div {
    height: 100%;
}

.sidebar-banner-content--fill img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center;
}

.sidebar-banner-image {
    width: 100% !important;
    height: 100% !important;
    /* Lấp đầy container (160x600 hoặc 200x600) */
    object-fit: cover !important;
    /* Crop để lấp đầy, giữ center - giống horizontal banner */
    object-position: center center;
    display: block;
    border-radius: 0.75rem;
}

/* Sidebar banner overlay (image + text) - căn giữa, nút 40px */
.sidebar-banner-overlay__title,
.sidebar-banner-overlay__subtitle {
    text-align: center;
    /* Text wrap */
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    max-width: 100%;
    /* Text sharpness */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.sidebar-banner-overlay__title p,
.sidebar-banner-overlay__subtitle p {
    margin: 0 0 0.25rem 0;
}

.sidebar-banner-overlay__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    margin-top: 0.75rem;
    font-weight: 600;
    font-size: 0.9375rem;
    border-radius: 12px;
    width: fit-content;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-banner-overlay__btn--primary {
    background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
}

.sidebar-banner-overlay__btn--primary:hover {
    background: linear-gradient(135deg, #5855e0 0%, #db3a88 100%);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.5);
}

.sidebar-banner-overlay__btn--white {
    background: rgba(255, 255, 255, 0.95);
    color: #1f2937;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.sidebar-banner-overlay__btn--white:hover {
    background: #fff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.sidebar-banner-overlay__btn--outline_white {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.9);
}

.sidebar-banner-overlay__btn--outline_white:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.sidebar-banner-overlay__btn--dark {
    background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(31, 41, 55, 0.3);
}

.sidebar-banner-overlay__btn--dark:hover {
    background: linear-gradient(135deg, #111827 0%, #1f2937 100%);
    box-shadow: 0 8px 25px rgba(31, 41, 55, 0.4);
}

/* Biến thể primary nhiều màu cho sidebar overlay (sync với cta_style) */
.sidebar-banner-overlay__btn--primary_purple {
    background: var(--gradient-purple, linear-gradient(135deg, #6366f1 0%, #a855f7 100%));
    color: #fff;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.35);
}

.sidebar-banner-overlay__btn--primary_blue {
    background: var(--gradient-blue, linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%));
    color: #fff;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.35);
}

.sidebar-banner-overlay__btn--primary_green {
    background: var(--gradient-green, linear-gradient(135deg, #10b981 0%, #22c55e 100%));
    color: #fff;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.35);
}

.sidebar-banner-overlay__btn--primary_orange {
    background: linear-gradient(135deg, #f97316 0%, #facc15 100%);
    color: #111827;
    box-shadow: 0 4px 15px rgba(249, 115, 22, 0.35);
}

.sidebar-banner-overlay__btn--primary_soft {
    background: var(--cms-gradient-soft, linear-gradient(135deg, rgba(102, 126, 234, 0.16) 0%, rgba(244, 114, 182, 0.18) 100%));
    color: #312e81;
    box-shadow: 0 4px 12px rgba(148, 163, 184, 0.35);
}

.sidebar-banner-overlay__btn--primary_bright {
    background: var(--cms-gradient-primary, linear-gradient(135deg, #4f46e5 0%, #ec4899 100%));
    color: #fff;
    box-shadow: 0 4px 18px rgba(79, 70, 229, 0.4);
}

.sidebar-banner-overlay__btn--primary_purple:hover,
.sidebar-banner-overlay__btn--primary_blue:hover,
.sidebar-banner-overlay__btn--primary_green:hover,
.sidebar-banner-overlay__btn--primary_bright:hover {
    box-shadow: 0 6px 24px rgba(99, 102, 241, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.sidebar-banner-overlay__btn--primary_orange:hover {
    box-shadow: 0 6px 24px rgba(249, 115, 22, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.sidebar-banner-overlay__btn--primary_soft:hover {
    box-shadow: 0 6px 20px rgba(148, 163, 184, 0.45);
}

.sidebar-banner-overlay__btn--sunset_dream {
    background: #FACC15;
    color: #111827;
    box-shadow: 0 4px 15px rgba(250, 204, 21, 0.4);
}

.sidebar-banner-overlay__btn--deep_ocean {
    background: rgba(255, 255, 255, 0.95);
    color: #2563eb;
}

.sidebar-banner-overlay__btn--royal_luxury {
    background: linear-gradient(135deg, #D4AF37 0%, #AA8432 100%);
    color: #000;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
}

.sidebar-banner-overlay__btn--cyber_sale {
    background: linear-gradient(135deg, #F97316 0%, #E11D48 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(249, 115, 22, 0.4);
}

.sidebar-banner-overlay__btn--flash_sale {
    background: rgba(255, 255, 255, 0.95);
    color: #E11D48;
}

.sidebar-banner-overlay__btn--midnight_tech {
    background: linear-gradient(135deg, #3B82F6 0%, #2DD4BF 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}

.sidebar-banner-overlay__btn--soft_garden {
    background: linear-gradient(135deg, #FB7185 0%, #F472B6 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(251, 113, 133, 0.4);
}

.sidebar-banner-overlay__btn--neon_purple {
    background: #39FF14;
    color: #000;
    box-shadow: 0 4px 15px rgba(57, 255, 20, 0.4);
}

.sidebar-banner-overlay__btn--sunset_dream:hover,
.sidebar-banner-overlay__btn--royal_luxury:hover,
.sidebar-banner-overlay__btn--cyber_sale:hover,
.sidebar-banner-overlay__btn--midnight_tech:hover,
.sidebar-banner-overlay__btn--soft_garden:hover,
.sidebar-banner-overlay__btn--neon_purple:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.sidebar-banner-overlay__btn--deep_ocean:hover,
.sidebar-banner-overlay__btn--flash_sale:hover {
    background: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* Theme chữ cho sidebar-banner-overlay */
.sidebar-banner-overlay--dark .sidebar-banner-overlay__title,
.sidebar-banner-overlay--dark .sidebar-banner-overlay__subtitle,
.sidebar-banner-overlay--dark .sidebar-banner-overlay__title p,
.sidebar-banner-overlay--dark .sidebar-banner-overlay__subtitle p {
    color: #fff !important;
}

.sidebar-banner-overlay--light .sidebar-banner-overlay__title,
.sidebar-banner-overlay--light .sidebar-banner-overlay__title p {
    color: #1e293b !important;
}

.sidebar-banner-overlay--light .sidebar-banner-overlay__subtitle,
.sidebar-banner-overlay--light .sidebar-banner-overlay__subtitle p {
    color: #475569 !important;
}

.sidebar-banner-overlay--royal .sidebar-banner-overlay__title,
.sidebar-banner-overlay--royal .sidebar-banner-overlay__subtitle,
.sidebar-banner-overlay--royal .sidebar-banner-overlay__title p,
.sidebar-banner-overlay--royal .sidebar-banner-overlay__subtitle p {
    color: #F3E5AB !important;
}

.sidebar-banner-overlay--cyber .sidebar-banner-overlay__title,
.sidebar-banner-overlay--cyber .sidebar-banner-overlay__subtitle,
.sidebar-banner-overlay--cyber .sidebar-banner-overlay__title p,
.sidebar-banner-overlay--cyber .sidebar-banner-overlay__subtitle p {
    color: #FB923C !important;
}

/* === Sidebar Banner CTA Below Image === */
/* Khi sidebar banner có ảnh + CTA, CTA hiển thị phía dưới ảnh */
.sidebar-banner-image-cta-below {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.sidebar-banner-cta-below {
    text-decoration: none;
    transition: filter 0.2s ease;
    /* Text sharpness */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.sidebar-banner-cta-below:hover {
    filter: brightness(1.05);
}

.sidebar-banner-cta-below__title,
.sidebar-banner-cta-below__subtitle {
    text-align: center;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    max-width: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.sidebar-banner-cta-below__title p,
.sidebar-banner-cta-below__subtitle p {
    margin: 0 0 0.25rem 0;
}

.sidebar-banner-cta-below__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    margin-top: 0.5rem;
    font-weight: 600;
    font-size: 0.8125rem;
    border-radius: 0.5rem;
    width: fit-content;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Sidebar CTA-below button styles - kế thừa từ overlay styles */
.sidebar-banner-cta-below__btn--primary {
    background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
}

.sidebar-banner-cta-below__btn--white {
    background: rgba(255, 255, 255, 0.95);
    color: #1f2937;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.sidebar-banner-cta-below__btn--outline_white {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.9);
}

.sidebar-banner-cta-below__btn--dark {
    background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(31, 41, 55, 0.3);
}

.sidebar-banner-cta-below__btn--primary_purple {
    background: var(--gradient-purple, linear-gradient(135deg, #6366f1 0%, #a855f7 100%));
    color: #fff;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.35);
}

.sidebar-banner-cta-below__btn--primary_blue {
    background: var(--gradient-blue, linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%));
    color: #fff;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.35);
}

.sidebar-banner-cta-below__btn--primary_green {
    background: var(--gradient-green, linear-gradient(135deg, #10b981 0%, #22c55e 100%));
    color: #fff;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.35);
}

.sidebar-banner-cta-below__btn--primary_orange {
    background: linear-gradient(135deg, #f97316 0%, #facc15 100%);
    color: #111827;
    box-shadow: 0 4px 15px rgba(249, 115, 22, 0.35);
}

.sidebar-banner-cta-below__btn--primary_soft {
    background: var(--cms-gradient-soft, linear-gradient(135deg, rgba(102, 126, 234, 0.16) 0%, rgba(244, 114, 182, 0.18) 100%));
    color: #312e81;
    box-shadow: 0 4px 12px rgba(148, 163, 184, 0.35);
}

.sidebar-banner-cta-below__btn--primary_bright {
    background: var(--cms-gradient-primary, linear-gradient(135deg, #4f46e5 0%, #ec4899 100%));
    color: #fff;
    box-shadow: 0 4px 18px rgba(79, 70, 229, 0.4);
}

.sidebar-banner-cta-below__btn--sunset_dream {
    background: #FACC15;
    color: #111827;
    box-shadow: 0 4px 15px rgba(250, 204, 21, 0.4);
}

.sidebar-banner-cta-below__btn--deep_ocean {
    background: rgba(255, 255, 255, 0.95);
    color: #2563eb;
}

.sidebar-banner-cta-below__btn--royal_luxury {
    background: linear-gradient(135deg, #D4AF37 0%, #AA8432 100%);
    color: #000;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
}

.sidebar-banner-cta-below__btn--cyber_sale {
    background: linear-gradient(135deg, #F97316 0%, #E11D48 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(249, 115, 22, 0.4);
}

.sidebar-banner-cta-below__btn--flash_sale {
    background: rgba(255, 255, 255, 0.95);
    color: #E11D48;
}

.sidebar-banner-cta-below__btn--midnight_tech {
    background: linear-gradient(135deg, #3B82F6 0%, #2DD4BF 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}

.sidebar-banner-cta-below__btn--soft_garden {
    background: linear-gradient(135deg, #FB7185 0%, #F472B6 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(251, 113, 133, 0.4);
}

.sidebar-banner-cta-below__btn--neon_purple {
    background: #39FF14;
    color: #000;
    box-shadow: 0 4px 15px rgba(57, 255, 20, 0.4);
}

/* Hover cho sidebar CTA-below buttons */
.sidebar-banner-cta-below__btn--primary:hover,
.sidebar-banner-cta-below__btn--primary_purple:hover,
.sidebar-banner-cta-below__btn--primary_blue:hover,
.sidebar-banner-cta-below__btn--primary_green:hover,
.sidebar-banner-cta-below__btn--primary_bright:hover {
    box-shadow: 0 6px 24px rgba(99, 102, 241, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.sidebar-banner-cta-below__btn--primary_orange:hover {
    box-shadow: 0 6px 24px rgba(249, 115, 22, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.sidebar-banner-cta-below__btn--primary_soft:hover {
    box-shadow: 0 6px 20px rgba(148, 163, 184, 0.45);
}

.sidebar-banner-cta-below__btn--sunset_dream:hover,
.sidebar-banner-cta-below__btn--royal_luxury:hover,
.sidebar-banner-cta-below__btn--cyber_sale:hover,
.sidebar-banner-cta-below__btn--midnight_tech:hover,
.sidebar-banner-cta-below__btn--soft_garden:hover,
.sidebar-banner-cta-below__btn--neon_purple:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.sidebar-banner-cta-below__btn--deep_ocean:hover,
.sidebar-banner-cta-below__btn--flash_sale:hover {
    background: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.sidebar-banner-cta-below__btn--white:hover {
    background: #fff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.sidebar-banner-cta-below__btn--outline_white:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: #fff;
}

.sidebar-banner-cta-below__btn--dark:hover {
    background: linear-gradient(135deg, #111827 0%, #1f2937 100%);
    box-shadow: 0 8px 25px rgba(31, 41, 55, 0.4);
}

/* Theme chữ cho sidebar-banner-cta-below */
.sidebar-banner-cta-below--dark .sidebar-banner-cta-below__title,
.sidebar-banner-cta-below--dark .sidebar-banner-cta-below__subtitle,
.sidebar-banner-cta-below--dark .sidebar-banner-cta-below__title p,
.sidebar-banner-cta-below--dark .sidebar-banner-cta-below__subtitle p {
    color: #fff !important;
}

.sidebar-banner-cta-below--light .sidebar-banner-cta-below__title,
.sidebar-banner-cta-below--light .sidebar-banner-cta-below__title p {
    color: #1e293b !important;
}

.sidebar-banner-cta-below--light .sidebar-banner-cta-below__subtitle,
.sidebar-banner-cta-below--light .sidebar-banner-cta-below__subtitle p {
    color: #475569 !important;
}

.sidebar-banner-cta-below--royal .sidebar-banner-cta-below__title,
.sidebar-banner-cta-below--royal .sidebar-banner-cta-below__subtitle,
.sidebar-banner-cta-below--royal .sidebar-banner-cta-below__title p,
.sidebar-banner-cta-below--royal .sidebar-banner-cta-below__subtitle p {
    color: #F3E5AB !important;
}

.sidebar-banner-cta-below--cyber .sidebar-banner-cta-below__title,
.sidebar-banner-cta-below--cyber .sidebar-banner-cta-below__subtitle,
.sidebar-banner-cta-below--cyber .sidebar-banner-cta-below__title p,
.sidebar-banner-cta-below--cyber .sidebar-banner-cta-below__subtitle p {
    color: #FB923C !important;
}

/* CTA Sidebar Banner - căn giữa, Rich Text, nút 40px cao, rộng vừa text */
.sidebar-banner-cta {
    background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
    color: #ffffff;
    padding: 2rem;
    text-align: center;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.35);
}

/* Theme chữ cho sidebar banner CTA */
.sidebar-banner-cta--dark .sidebar-banner-cta__title,
.sidebar-banner-cta--dark .sidebar-banner-cta__subtitle,
.sidebar-banner-cta--dark .sidebar-banner-cta__title p,
.sidebar-banner-cta--dark .sidebar-banner-cta__subtitle p {
    color: #fff !important;
}

.sidebar-banner-cta--light .sidebar-banner-cta__title,
.sidebar-banner-cta--light .sidebar-banner-cta__title p {
    color: #1e293b !important;
}

.sidebar-banner-cta--light .sidebar-banner-cta__subtitle,
.sidebar-banner-cta--light .sidebar-banner-cta__subtitle p {
    color: #475569 !important;
}

.sidebar-banner-cta--royal .sidebar-banner-cta__title,
.sidebar-banner-cta--royal .sidebar-banner-cta__subtitle,
.sidebar-banner-cta--royal .sidebar-banner-cta__title p,
.sidebar-banner-cta--royal .sidebar-banner-cta__subtitle p {
    color: #F3E5AB !important;
}

.sidebar-banner-cta--cyber .sidebar-banner-cta__title,
.sidebar-banner-cta--cyber .sidebar-banner-cta__subtitle,
.sidebar-banner-cta--cyber .sidebar-banner-cta__title p,
.sidebar-banner-cta--cyber .sidebar-banner-cta__subtitle p {
    color: #FB923C !important;
}

.sidebar-banner-cta__title,
.sidebar-banner-cta__subtitle {
    width: 100%;
    text-align: center;
    /* Text wrap */
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    max-width: 100%;
    /* Text sharpness */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.sidebar-banner-cta__title p,
.sidebar-banner-cta__subtitle p {
    margin: 0 0 0.25rem 0;
}

.sidebar-banner-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    margin-top: 0.75rem;
    font-weight: 600;
    font-size: 0.9375rem;
    border-radius: 12px;
    white-space: nowrap;
    width: fit-content;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Style nút CTA sidebar (trên nền gradient) - giống stream block / price block */
.sidebar-banner-cta__btn--primary {
    background: var(--gradient-purple, var(--cms-gradient-primary, linear-gradient(135deg, #6366f1 0%, #ec4899 100%)));
    color: #fff;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.35);
}

.sidebar-banner-cta__btn--primary:hover {
    box-shadow: 0 8px 28px rgba(99, 102, 241, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.sidebar-banner-cta__btn--white {
    background: rgba(255, 255, 255, 0.95);
    color: #5b21b6;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.sidebar-banner-cta__btn--white:hover {
    background: #fff;
    color: #4c1d95;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.sidebar-banner-cta__btn--outline_white {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.9);
}

.sidebar-banner-cta__btn--outline_white:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.sidebar-banner-cta__btn--dark {
    background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(31, 41, 55, 0.3);
}

.sidebar-banner-cta__btn--dark:hover {
    background: linear-gradient(135deg, #111827 0%, #1f2937 100%);
    box-shadow: 0 8px 25px rgba(31, 41, 55, 0.4);
}

/* Biến thể nhiều màu cho sidebar banner CTA */
.sidebar-banner-cta__btn--primary_purple {
    background: var(--gradient-purple, linear-gradient(135deg, #6366f1 0%, #a855f7 100%));
    color: #fff;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.35);
}

.sidebar-banner-cta__btn--primary_blue {
    background: var(--gradient-blue, linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%));
    color: #fff;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.35);
}

.sidebar-banner-cta__btn--primary_green {
    background: var(--gradient-green, linear-gradient(135deg, #10b981 0%, #22c55e 100%));
    color: #fff;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.35);
}

.sidebar-banner-cta__btn--primary_orange {
    background: linear-gradient(135deg, #f97316 0%, #facc15 100%);
    color: #111827;
    box-shadow: 0 4px 15px rgba(249, 115, 22, 0.35);
}

.sidebar-banner-cta__btn--primary_soft {
    background: var(--cms-gradient-soft, linear-gradient(135deg, rgba(102, 126, 234, 0.16) 0%, rgba(244, 114, 182, 0.18) 100%));
    color: #312e81;
    box-shadow: 0 4px 12px rgba(148, 163, 184, 0.35);
}

.sidebar-banner-cta__btn--primary_bright {
    background: var(--cms-gradient-primary, linear-gradient(135deg, #4f46e5 0%, #ec4899 100%));
    color: #fff;
    box-shadow: 0 4px 18px rgba(79, 70, 229, 0.4);
}

.sidebar-banner-cta__btn--sunset_dream {
    background: #FACC15;
    color: #111827;
    box-shadow: 0 4px 15px rgba(250, 204, 21, 0.4);
}

.sidebar-banner-cta__btn--deep_ocean {
    background: rgba(255, 255, 255, 0.95);
    color: #2563eb;
}

.sidebar-banner-cta__btn--royal_luxury {
    background: linear-gradient(135deg, #D4AF37 0%, #AA8432 100%);
    color: #000;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
}

.sidebar-banner-cta__btn--cyber_sale {
    background: linear-gradient(135deg, #F97316 0%, #E11D48 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(249, 115, 22, 0.4);
}

.sidebar-banner-cta__btn--flash_sale {
    background: rgba(255, 255, 255, 0.95);
    color: #E11D48;
}

.sidebar-banner-cta__btn--midnight_tech {
    background: linear-gradient(135deg, #3B82F6 0%, #2DD4BF 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}

.sidebar-banner-cta__btn--soft_garden {
    background: linear-gradient(135deg, #FB7185 0%, #F472B6 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(251, 113, 133, 0.4);
}

.sidebar-banner-cta__btn--neon_purple {
    background: #39FF14;
    color: #000;
    box-shadow: 0 4px 15px rgba(57, 255, 20, 0.4);
}

.sidebar-banner-cta__btn--sunset_dream:hover,
.sidebar-banner-cta__btn--royal_luxury:hover,
.sidebar-banner-cta__btn--cyber_sale:hover,
.sidebar-banner-cta__btn--midnight_tech:hover,
.sidebar-banner-cta__btn--soft_garden:hover,
.sidebar-banner-cta__btn--neon_purple:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.sidebar-banner-cta__btn--deep_ocean:hover,
.sidebar-banner-cta__btn--flash_sale:hover {
    background: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* Removed legacy .sidebar-banner-cta a styles - now using inline background from template */


/* === 5. GRID LAYOUT (Responsive & Dynamic columns) === */
/* Demo reference: line 1645-1654 */
/* Support both custom classes (.grid-X) and Tailwind classes (grid-cols-X) */

.mega-menu-grid {
    display: grid !important;
    gap: var(--product-grid-gap, 1rem);
    margin: 1.5rem 0;
    /* Default: 4 columns on desktop */
    grid-template-columns: repeat(4, 1fr);
}

/* Responsive default - fallback when no specific class */
@media (max-width: 1023px) {
    .mega-menu-grid:not(.grid-2):not(.grid-3):not(.grid-4):not(.grid-5):not(.grid-auto) {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 639px) {
    .mega-menu-grid:not(.grid-2):not(.grid-3):not(.grid-4):not(.grid-5):not(.grid-auto) {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Auto mode - responsive (like Tailwind's default) */
.mega-menu-grid.grid-auto,
.mega-menu-grid.grid-cols-auto {
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 640px) {

    .mega-menu-grid.grid-auto,
    .mega-menu-grid.grid-cols-auto {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {

    .mega-menu-grid.grid-auto,
    .mega-menu-grid.grid-cols-auto {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Fixed columns - Desktop (support both naming conventions) */
.mega-menu-grid.grid-2,
.mega-menu-grid.grid-cols-2 {
    grid-template-columns: repeat(2, 1fr) !important;
}

.mega-menu-grid.grid-3,
.mega-menu-grid.grid-cols-3 {
    grid-template-columns: repeat(3, 1fr) !important;
}

.mega-menu-grid.grid-4,
.mega-menu-grid.grid-cols-4 {
    grid-template-columns: repeat(4, 1fr) !important;
}

.mega-menu-grid.grid-5,
.mega-menu-grid.grid-cols-5 {
    grid-template-columns: repeat(5, 1fr) !important;
}

/* ============================================
   RESPONSIVE GRID - Matching Home Page Pattern
   Mobile: 2 cols | Tablet: 3 cols | Desktop: 4-5 cols
   Pattern: grid-cols-2 md:grid-cols-3 lg:grid-cols-5
   ============================================ */

/* Tablet (640px - 1023px): 3 columns - like md:grid-cols-3 on home */
@media (min-width: 640px) and (max-width: 1023px) {

    .mega-menu-grid,
    .mega-menu-grid.grid-3,
    .mega-menu-grid.grid-4,
    .mega-menu-grid.grid-5,
    .mega-menu-grid.grid-cols-3,
    .mega-menu-grid.grid-cols-4,
    .mega-menu-grid.grid-cols-5 {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.75rem;
    }

    /* Keep grid-2 as 2 columns on tablet */
    .mega-menu-grid.grid-2,
    .mega-menu-grid.grid-cols-2 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Mobile (< 640px): 2 columns - like grid-cols-2 on home */
@media (max-width: 639px) {

    .mega-menu-grid,
    .mega-menu-grid.grid-2,
    .mega-menu-grid.grid-3,
    .mega-menu-grid.grid-4,
    .mega-menu-grid.grid-5,
    .mega-menu-grid.grid-cols-2,
    .mega-menu-grid.grid-cols-3,
    .mega-menu-grid.grid-cols-4,
    .mega-menu-grid.grid-cols-5 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.625rem;
    }
}

/* Full-width inline banner (position=0) */
.inline-banner-wrapper[data-full-width="true"],
.inline-banner-wrapper--full-width,
.inline-content-wrapper--full-width {
    grid-column: 1 / -1;
    /* Span all columns - responsive on all breakpoints */
}

/* ============================================
   INLINE CONTENT & PREMIUM BLOCK SPACING IN GRID
   Full-width content blocks (Hero, CTA, Stats, etc.)
   cần separation rõ ràng hơn so với product cards
   ============================================ */
.inline-content-wrapper {
    grid-column: 1 / -1;
}

.inline-content-wrapper--full-width {
    padding: 0.5rem 0;
    /* Visual separation: thêm padding trên/dưới để tạo không gian thở */
}

/* Premium content blocks trong grid: đảm bảo spacing nhất quán */
.inline-content-wrapper .menu-premium-content {
    margin: 0;
}

/* Giữ block nội bộ không bị sát viền */
.inline-content-wrapper .menu-premium-content__inner > *:last-child {
    margin-bottom: 0;
}

/* Inline banner wrapper - đảm bảo chiếm đúng không gian trong grid */
.inline-banner-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 280px;
    /* Tránh collapse khi HTML inject từ server (Phương án D) - tương đương product card */
}

/* Server-render (banner_item.html): direct child phải có min-height để hiển thị */
.inline-banner-wrapper>a,
.inline-banner-wrapper>div {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 280px;
}

/* Legacy JS-render: .inline-banner */
.inline-banner-wrapper .inline-banner {
    flex: 1;
    min-height: 280px;
}

/* Inline banner--cta: flex column để căn nội dung */
.inline-banner-wrapper .inline-banner--cta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Inline banner--image, image-only: cho ảnh chiếm đầy */
.inline-banner-wrapper .inline-banner--image,
.inline-banner-wrapper .inline-banner--image-only {
    display: flex;
    flex-direction: column;
}

.inline-banner-wrapper .inline-banner--image img,
.inline-banner-wrapper .inline-banner--image-only img {
    flex: 1;
    min-height: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Override aspect-ratio của Tailwind bên trong wrapper để banner fill toàn bộ chiều cao */
.inline-banner-wrapper .inline-banner--image-only>a,
.inline-banner-wrapper .inline-banner--image-only>a>div,
.inline-banner-wrapper .inline-banner--image-only>div {
    height: 100%;
    aspect-ratio: unset !important;
}

/* Đảm bảo inline-banner--image-only fill toàn bộ wrapper */
.inline-banner-wrapper .inline-banner--image-only {
    height: 100%;
}

/* Server-render (banner_item.html): CTA bar và image-inner fill wrapper */
.inline-banner-wrapper .banner-item__cta-bar,
.inline-banner-wrapper .banner-item__image-inner {
    flex: 1;
    min-height: 200px;
    height: 100%;
}

.inline-banner-wrapper .banner-item__cta-bar {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Override Tailwind aspect-ratio classes - CHỈ cho banners có content (CTA, video, etc.) */
.inline-banner-wrapper.inline-banner--with-content [class*="aspect-"] {
    aspect-ratio: unset !important;
    height: 100% !important;
}

/* Server-render (banner_item.html): .block.group fill wrapper */
.inline-banner-wrapper .block.group {
    flex: 1;
    min-height: 280px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.inline-banner-wrapper .block.group>div {
    flex: 1;
    min-height: 280px;
    height: 100%;
}

/* GIỮ aspect-ratio cho image-only banners (server-render với aspect-video) */
.inline-banner-wrapper.inline-banner--image-only [class*="aspect-"] {
    aspect-ratio: revert !important;
    height: 100% !important;
}

/* Inline banner image overlay (display_mode=image) - fill toàn bộ wrapper */
.inline-banner-wrapper .inline-banner-image-overlay {
    height: 100%;
    aspect-ratio: unset !important;
}

.inline-banner-wrapper .inline-banner-image-overlay img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Link wrapper bên trong inline-banner-wrapper cho image type */
.inline-banner-wrapper>a.block {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.inline-banner-wrapper>a.block>.inline-banner-image-overlay {
    flex: 1;
    min-height: 280px;
}


/* === 6. RESPONSIVE BEHAVIOR === */

/* Hide inline banners on tablet and below */
@media (max-width: 1023px) {
    .inline-banner-wrapper {
        display: none !important;
    }
}

/* Hide sidebar banners below 1440px (đồng bộ với breakpoint hiển thị ở trên) */
@media (max-width: 1439px) {
    .sidebar-banner {
        display: none !important;
    }
}

/* Mobile: Force 2 columns */
@media (max-width: 639px) {
    .mega-menu-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.625rem;
    }

    .horizontal-banner__cta {
        padding: 1rem;
        text-align: center;
    }

    .horizontal-banner__cta h3 {
        font-size: 1.5rem;
    }
}


/* === 7. UTILITIES === */

/* Line clamp (truncate text) */
.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

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

/* Aspect ratio container */
.aspect-video-container {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 */
}

.aspect-video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Smooth transitions */
.transition-all {
    transition: all 0.3s ease;
}

/* Shadow utilities */
.shadow-sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}