/**
 * Stylesheet for Fullwidth Slider Section
 * Local styles for .fullwidth-swiper-wrapper
 */

/* Đảm bảo toàn bộ slider tràn viền 100% chiều ngang */
.fullwidth-swiper-wrapper {
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;
}

html, body {
    overflow-x: hidden;
}

/* Cấu hình chiều cao cố định cho khung Slider */
.swiper-custom-instance {
    width: 100%;
    height: 90vh; /* Chiều cao lý tưởng của Banner trên Desktop */
}

/* Định vị trí ảnh phủ kín (Cover) và căn giữa */
.swiper-custom-instance .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Đảm bảo phủ kín khung hình (cover) không móp méo ảnh */
    object-position: center; /* Luôn giữ tâm điểm bức ảnh ở giữa màn hình */
    display: block;
}

.swiper-custom-instance .swiper-slide a {
    display: block;
    width: 100%;
    height: 100%;
}

/* Nút điều hướng Trái/Phải */
.swiper-custom-instance .swiper-button-next, 
.swiper-custom-instance .swiper-button-prev {
    color: var(--color-text-white) !important;
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    transition: background 0.3s ease;
}

.swiper-custom-instance .swiper-button-next:hover, 
.swiper-custom-instance .swiper-button-prev:hover {
    background: var(--color-accent-gold);
}

.swiper-custom-instance .swiper-button-next::after, 
.swiper-custom-instance .swiper-button-prev::after {
    font-size: 16px !important;
    font-weight: bold;
}

/* Dấu chấm chuyển slide */
.swiper-custom-instance .swiper-pagination-bullet-active {
    background: var(--color-accent-gold) !important;
    width: 24px !important;
    border-radius: 4px !important;
    transition: width 0.3s ease;
}

/* Co giãn chiều cao cover theo từng thiết bị */
@media (max-width: 1024px) {
    .swiper-custom-instance {
        height: 450px; /* Chiều cao banner trên Tablet */
    }
}

@media (max-width: 768px) {
    .swiper-custom-instance {
        height: 200px; /* Chiều cao banner trên Mobile */
    }
    
    .swiper-custom-instance .swiper-button-next, 
    .swiper-custom-instance .swiper-button-prev {
        display: flex !important;
        width: 36px;
        height: 36px;
    }

    .swiper-custom-instance .swiper-button-next::after, 
    .swiper-custom-instance .swiper-button-prev::after {
        font-size: 12px !important;
    }
}