/* ==========================================================
   VẠN THÀNH HƯNG - HOME BANNER SLIDER
   Ảnh gốc: 1536 x 585
   Class đặt tại Slider cha: home-banner-slider
========================================================== */


/* Slider */
.home-banner-slider {
    width: 100%;
    overflow: hidden;
}


/* ==========================================================
   QUAN TRỌNG:
   Flatsome dùng .banner làm từng slide
========================================================== */

.home-banner-slider .banner {
    width: 100% !important;

    /* Tỷ lệ chính xác ảnh 1536 x 585 */
    aspect-ratio: 1536 / 585 !important;

    height: auto !important;
    min-height: 0 !important;

    overflow: hidden !important;
}


/* ==========================================================
   BANNER INNER
========================================================== */

.home-banner-slider .banner-inner {
    position: absolute !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width: 100% !important;
    height: 100% !important;

    min-height: 0 !important;
}


/* ==========================================================
   BACKGROUND WRAPPER
========================================================== */

.home-banner-slider .banner-bg {
    position: absolute !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width: 100% !important;
    height: 100% !important;

    min-height: 0 !important;
}


/* ==========================================================
   ẢNH BACKGROUND
========================================================== */

.home-banner-slider .banner-bg .bg,
.home-banner-slider .banner-bg .bg-fill {

    position: absolute !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width: 100% !important;
    height: 100% !important;

    /*
     * QUAN TRỌNG
     * contain = hiển thị toàn bộ ảnh
     * không crop trái/phải
     */
    background-size: contain !important;

    background-position: center center !important;

    background-repeat: no-repeat !important;
}


/* ==========================================================
   FLICKITY
========================================================== */

.home-banner-slider .flickity-viewport {
    width: 100% !important;
}


/* Mỗi banner chiếm toàn bộ chiều ngang */
.home-banner-slider .flickity-slider > .banner {
    width: 100% !important;
}


/* ==========================================================
   DESKTOP
========================================================== */

@media (min-width: 850px) {

    .home-banner-slider .banner {
        aspect-ratio: 1536 / 585 !important;

        height: auto !important;
        min-height: 0 !important;
    }

    .home-banner-slider .banner-bg .bg,
    .home-banner-slider .banner-bg .bg-fill {

        background-size: contain !important;

        background-position: center center !important;

        background-repeat: no-repeat !important;
    }

}


/* ==========================================================
   TABLET
========================================================== */

@media (min-width: 550px) and (max-width: 849px) {

    .home-banner-slider .banner {
        aspect-ratio: 1536 / 585 !important;

        height: auto !important;
        min-height: 0 !important;
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 549px) {

    .home-banner-slider .banner {
        aspect-ratio: 1536 / 585 !important;

        height: auto !important;
        min-height: 0 !important;
    }


    /* Slider dots */

    .home-banner-slider .flickity-page-dots {
        bottom: 6px !important;
    }

    .home-banner-slider .flickity-page-dots .dot {

        width: 6px !important;
        height: 6px !important;

        margin: 0 4px !important;
    }

}