/* =====================================================
   BANNER SLIDER (CMS BLOCK) — Layout 70/30 + Grid 3 item
   ===================================================== */

/* ---------- HERO WRAPPER (70/30 hoặc full) ---------- */

.banner-hero-wrapper {
    width: 100%;
    max-width: 100%;
}

/* Mobile: tránh cắt nội dung, chỉ ẩn overflow bên trong swiper */
@media (max-width: 767px) {
    .banner-hero-wrapper {
        overflow: visible;
    }
}

/* Khi không có phần 30%, slider full width */
.banner-hero-wrapper--full .banner-slider-section {
    width: 100%;
}

@media (min-width: 768px) {
    /* Layout 70/30: cố định height hàng = 380px để 2 block luôn bằng chiều cao */
    .banner-hero-wrapper .banner-hero-row {
        height: 380px;
    }

    /* Grid 30%: chỉ hiển thị từ md trở lên (mobile ẩn bởi Tailwind .hidden) */
    .banner-hero-grid {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    /* Banner trái fill đủ chiều cao 380px */
    .banner-hero-wrapper:not(.banner-hero-wrapper--full) .banner-slider-section,
    .banner-hero-wrapper:not(.banner-hero-wrapper--full) .banner-slider-section .swiper,
    .banner-hero-wrapper:not(.banner-hero-wrapper--full) .banner-slider-section .swiper-wrapper {
        height: 100%;
    }

    .banner-hero-wrapper:not(.banner-hero-wrapper--full) .banner-slider-section .swiper-slide {
        height: 380px;
    }

    .banner-hero-wrapper.banner-hero-wrapper--full .banner-slider-section .swiper-slide {
        height: 400px;
    }

    .banner-hero-grid .banner-hero-grid-item {
        flex: 1;
        min-height: 0;
    }

    .banner-hero-grid .banner-hero-grid-item img {
        width: 100%;
        height: 100%;
        object-fit: fill;
    }
}

@media (max-width: 767px) {
    .banner-hero-grid .banner-hero-grid-item {
        aspect-ratio: 16 / 9;
    }

    .banner-hero-grid .banner-hero-grid-item img {
        width: 100%;
        height: 100%;
        object-fit: fill;
    }
}

/* ---------- BASE ---------- */

.banner-slider-section {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.banner-slider-section .swiper {
    position: relative;
    width: 100%;
    max-width: 100%;
}

.banner-slider-section .swiper-wrapper {
    width: 100%;
    display: flex;
}

/* Height control */
.banner-slider-section .swiper-slide {
    height: auto;
    min-height: 200px;
    width: 100%;
    flex-shrink: 0;
}

/* Mobile: Use aspect ratio to prevent image cutting */
@media (max-width: 767px) {
    .banner-slider-section {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
    
    .banner-slider-section .container {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box;
    }
    
    .banner-slider-section .swiper {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box;
    }
    
    .banner-slider-section .swiper-wrapper {
        width: 100% !important;
        box-sizing: border-box;
    }
    
    .banner-slider-section .swiper-slide {
        width: 100% !important;
        flex-shrink: 0;
        aspect-ratio: 16 / 9;
        height: auto;
        box-sizing: border-box;
    }
    
    .banner-slider-section .banner-slide {
        width: 100% !important;
        max-width: 100% !important;
        height: 100%;
        box-sizing: border-box;
    }
    
    .banner-slider-section .banner-slide a {
        width: 100%;
        height: 100%;
        display: block;
        box-sizing: border-box;
    }
    
    .banner-slider-section .banner-slide-image {
        object-fit: cover;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        display: block;
        box-sizing: border-box;
    }
}

/* Desktop: Fixed height */
@media (min-width: 768px) {
    .banner-slider-section .swiper-slide {
        height: 400px;
    }
    
    .banner-slider-section .banner-slide-image {
        object-fit: cover;
    }
}

/* ---------- BORDER RADIUS ---------- */

.banner-slider-section .banner-slide,
.banner-slider-section .swiper-slide {
    border-radius: 0;
    overflow: hidden;
}

@media (min-width: 768px) {
    .banner-slider-section .banner-slide,
    .banner-slider-section .swiper-slide {
        border-radius: 1rem;
    }
}

/* ---------- PAGINATION ---------- */

.banner-slider-section .swiper-pagination {
    position: absolute;
    bottom: 30px;
    inset-inline: 0;
    display: none;
    justify-content: center;
    align-items: center;
    gap: 8px;
    z-index: 10;
}

@media (min-width: 768px) {
    .banner-slider-section .swiper-pagination {
        display: flex;
    }
}

.banner-slider-section .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 1;
    margin: 0 !important;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.banner-slider-section .swiper-pagination-bullet-active {
    background: #ffffff;
    width: 14px;
    height: 14px;
}

/* ---------- NAVIGATION ARROWS ---------- */

.banner-slider-section .swiper-button-prev,
.banner-slider-section .swiper-button-next {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    color: #333;

    display: flex;
    align-items: center;
    justify-content: center;

    position: absolute;
    top: 50%;
    transform: translateY(-50%) scale(0.95);

    opacity: 0;
    pointer-events: none;

    z-index: 10;
    cursor: pointer;
    outline: none;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.25s ease;
}

/* Position */
.banner-slider-section .swiper-button-prev {
    left: 10px;
}

.banner-slider-section .swiper-button-next {
    right: 10px;
}

/* Hover trigger: Chỉ hiển thị khi hover vào section */
@media (min-width: 768px) {
    .banner-slider-section:hover .swiper-button-prev,
    .banner-slider-section:hover .swiper-button-next {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(-50%) scale(1);
    }
}

/* Hover effect */
.banner-slider-section .swiper-button-prev:hover,
.banner-slider-section .swiper-button-next:hover {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transform: translateY(-50%) scale(1.05);
}

/* Ẩn SVG icon mặc định của Swiper */
.banner-slider-section .swiper-button-prev::after,
.banner-slider-section .swiper-button-next::after {
    display: none !important;
}

.banner-slider-section .swiper-button-prev svg,
.banner-slider-section .swiper-button-next svg {
    display: none !important;
}

/* Icon Font Awesome */
.banner-slider-section .swiper-button-prev i,
.banner-slider-section .swiper-button-next i {
    font-size: 18px;
    color: inherit;
    line-height: 1;
    display: block;
}

/* ---------- MOBILE ---------- */

@media (max-width: 767px) {
    .banner-slider-section .swiper-button-prev,
    .banner-slider-section .swiper-button-next {
        display: none;
    }
}