/* ============================================================================
   SIDEBAR BANNERS — Banner cố định 2 bên website
   Shared CSS: dùng trên Homepage + Mega Menu + bất kỳ trang nào cần sidebar banners
   Positioning: fixed, vertically centered, responsive breakpoints

   NOTE: Rules này cũng có trong mega-menu.css (backward compatible).
   Khi mega-menu.css được refactor, sẽ import file này thay vì duplicate.
   ============================================================================ */

/* === 1. POSITIONING — Fixed, vertically centered === */
.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;
}

/* === 2. RESPONSIVE — 3 breakpoints === */
/* Breakpoints tính toán: content max-w-7xl (1280px) + 2×(banner + gap + breathing room)
   Đảm bảo banner KHÔNG BAO GIỜ đè lên content, kể cả khi zoom 110-125%.
   - Tier 1: 1280 + 2×(120+12+20) = 1584 → round up 1600px
   - Tier 2: 1280 + 2×(160+12+20) = 1664 → round up 1700px
   - Tier 3: 1280 + 2×(200+20+20) = 1760 → round up 1800px */

/* ≥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));
    }
}

/* Hide sidebar banners below 1600px */
@media (max-width: 1599px) {
    .sidebar-banner {
        display: none !important;
    }
}

/* === 3. CONTAINER — 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 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;
    object-fit: cover !important;
    object-position: center center;
    display: block;
    border-radius: 0.75rem;
}