﻿/*NguyenDuy slider Banner*/

div.ct-banner > img {
    width: unset;
}
/*Trên banner là ko set*/
.banner-icon a:hover {
    opacity: unset;
}

/*Banners*/

.s-h-banner {
    min-height: 100vh;
    /* min-height: 450px;*/
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    background-repeat: no-repeat;
    background-size: cover;
}

.main-ct-banner {
    min-height: calc(100vh * 3/4);
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    background-repeat: no-repeat;
    background-size: cover;
}


.s-h-banner,
.main-ct-banner {
    overflow: hidden;
}

.banner-slider {
    margin-block-end: 60px;
}

.bn-item-slide_ct {
    /*padding: 80px 0;*/
    position: relative;
    flex: auto;
    align-items: center;
    display: flex;
    flex-direction: column;
}

.ct-banner {
    padding: 80px 0;
}

.bn-item-slide {
    margin: 0;
    /* width: 100% !important;*/
    min-height: 100vh;
    background-position: center;
    background-size: cover;
}

/*sub slide*/
.sub-slide {
    margin-top: 80px;
    /*margin-bottom: 80px;*/
    flex: 0;
}

    .sub-slide .item-sub-slide {
        /*max-height: 400px;*/
        height: 250px;
        min-width: 250px;
        margin: 5px;
        text-align: center;
        align-content: center;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        background-color: transparent;
        border-radius: 15px;
    }

        .sub-slide .item-sub-slide img {
            max-height: 90%;
            max-width: 90%;
        }


/*end sub*/
section .bnImages-slider .slick-slide {
    margin: 0;
    justify-items: center;
    align-content: center;
    display: flex;
    flex-direction: row;
    flex: auto;
}

.banner-slider .slick-slide {
    margin: 0;
    justify-items: center;
    align-content: center;
    display: flex;
    flex-direction: column;
}

.slick-dots {
    position: absolute;
    bottom: 0;
    right: 10%;
    list-style: none;
}

    .slick-dots li {
        display: inline-block;
        margin: 5px;
    }

        .slick-dots li button {
            content: "";
            position: relative;
            -webkit-transition: background-color 0.2s;
            transition: background-color 0.2s;
            background-color: #fff;
            border: 1px solid #7BA351;
            border-radius: 10px;
            width: 14px;
            height: 14px;
            -webkit-border-radius: 20px;
            border-radius: 20px;
            -webkit-transition: opacity .5s, background-color .5s, width .5s;
            -o-transition: opacity .5s, background-color .5s, width .5s;
            transition: opacity .5s, background-color .5s, width .5s;
            -webkit-transition-delay: .5s, .5s, 0s;
            -o-transition-delay: .5s, .5s, 0s;
            transition-delay: .5s, .5s, 0s;
            text-decoration: none;
            color: transparent;
            font-size: 0;
            display: block;
        }

        .slick-dots li.slick-active button {
            background-color: #7BA351;
            /*NguyenDuy*/
            opacity: 1;
            width: 100px;
            -webkit-transition-delay: 0s;
            -o-transition-delay: 0s;
            transition-delay: 0s;
            border: unset;
        }

.bn-ct-right {
    flex: auto;
    justify-content: right;
    z-index: 2;
    position: relative;
}

.bn-ct-left {
    justify-content: left;
    z-index: 2;
}

.bn-ct-center {
    justify-content: center;
}

.bn-ct-left .t3-banner-title h3 {
    text-align: left;
}

.div-icon-right {
    text-align: right;
}

.ct-bn-5 {
    min-height: 100vh;
    background-position: center;
    background-size: cover;
    display: flex;
    flex-direction: column;
}

.bn-ct-bottom {
    justify-content: center;
    align-content: end;
    padding: 20px 0;
}

/* Xử lý nội dụng trên banner*/

.banner-ct {
    gap: 25px;
}

.banner-ct-text {
}
.banner-ct-icon {
}

.banner-title h3, .banner-title h4 {
    font-family: Google Sans Flex;
    font-weight: 600;
    font-style: SemiBold;
    font-size: 24px;
    leading-trim: NONE;
    line-height: 48px;
    letter-spacing: 0%;
    color: #0E601E;
}

.banner-sdesc {
    font-family: Google Sans Flex;
    font-weight: 600;
    font-size: 40px;
    line-height: 48px;
    letter-spacing: 0%;
    color: #212121;
    margin: 20px 0 35px;
}

.banner-desc {
    font-family: Google Sans Flex;
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0%;
    color: #616161;
    margin: 10px 0 25px;
}

.banner-btn {
}
.banner-icon {
}

.banner-btn-01 {
    font-family: Poppins, Montserrat;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: normal;
    text-align: center;
    background: #126E24;
    color: #fff;
    padding: 10px 30px;
    border-radius: 25px;
    border: 1px solid transparent;
    display: inline-block;
}

    .banner-btn-01:hover {
        opacity: 0.7;
        color: #fff;
    }
/*Banner 00 loại 00*/
.banner-00 {
}
/*Banner 01 loại Nội dung Trái - Icon Phải*/
.banner-01 {
}
/*Banner 02 loại Nội dung Phải - Icon Trái*/
.banner-02 {
}
/*Banner 03 loại Nội dung & Icon - Trái*/
.banner-03 {
}
    .banner-03 .banner-ct {
        justify-content: flex-start;
        align-content: center;
    }

/*Banner 04 loại Nội dung & Icon - Phải*/
.banner-04 {
}
    .banner-04 .banner-ct {
        justify-content: flex-end;
        align-content: center;
    }

/*Banner 05 loại chỉnh giữa - dưới*/
.banner-05 {
}
div.s-h-banner:has(.banner-05),
div.main-ct-banner:has(.banner-05) {
    justify-content: end;
}
.banner-05 .banner-ct {
    justify-content: center;
    align-content: end;
}

/*Banner 06 Nội dung trái & Icon Phải - giữa*/
.banner-06 {
}
.banner-06 .banner-ct {
    justify-content: center;
    align-content: end;
}

/*Mobile*/
.d-Mobile .ct-banner {
    margin:80px 0;
}
.d-Mobile .s-h-banner:has(.banner-03),
.d-Mobile .main-ct-banner:has(.banner-03) {
    background-position: right 20% center;
}
.d-Mobile .s-h-banner:has(.banner-04),
.d-Mobile .main-ct-banner:has(.banner-04) {
    /* Gán CSS cho thẻ cha tại đây */
    background-position: left 20% center;
}

