/* file responsive các màn hình  */
/* =========================================================================================================== chân trang */
/* icon */
@media screen and (max-width: 430px) {
    .ct-link-icon-footer {
        width: 30px;
        height: 30px;
    }

    .ct-box-icon-footer {
        gap: 5px;
    }

}


/* logo */
@media screen and (max-width: 550px) {
    .res-col-logo-footer .col-inner {
        display: flex;
        justify-content: center;
        margin-bottom: 10px;
    }

    .res-col-form-footer .col-inner {
        padding-top: 30px;
        text-align: center;
        position: relative;
    }

    .res-col-form-footer .col-inner::after {
        content: "";
        position: absolute;
        top: 0;
        /* border-top */
        left: 10%;
        /* canh lề để tổng cộng chỉ còn 80% */
        width: 80%;
        border-top: 0.5px solid rgba(116, 116, 116, 0.53);
    }


    .res-col-center-footer {
        text-align: center;
    }

    .ct-box-icon-footer {
        justify-content: center;
        margin-bottom: 20px;
    }
}



/* =========================================================================================================== nav */
@media screen and (max-width: 850px) {
    .nav {
        gap: 0px !important;
    }


}

@media screen and (max-width: 850px) {
    .mobile-sidebar .search-field {
        border: none !important;
        background-color: transparent !important;
        box-shadow: none !important;
        border-bottom: 1px solid rgba(116, 116, 116, 0.53) !important;
        font-size: 14px !important;
    }

    .mobile-sidebar .ux-search-submit {
        border: none !important;
        background-color: transparent !important;
        box-shadow: none !important;


    }

    .mobile-sidebar .ux-search-submit i {
        font-size: 14px !important;
        color: black !important;
    }

    .nav-vertical li li.menu-item-has-children>a {
        font-size: .7em !important;
    }

    .mobile-sidebar .menu-item a {
        font-size: .7em !important;
    }
}



/* =========================================================================================================== trang chủ */


@media screen and (max-width: 550px) {
    .ct-h3-phl-home h3 {
        font-size: 40px !important;
    }
}

@media screen and (max-width: 411px) {
    .ct-h3-phl-home h3 {
        font-size: 30px !important;
    }
}



/* =========================================================================================================== giỏ hàng và thanh toán  */
@media screen and (max-width: 550px) {
    .product-quantity {
        white-space: nowrap;
    }

    .woocommerce-input-wrapper textarea {
        height: 150px !important;
    }
}

/* =========================================================================================================== sản phẩm  */
@media screen and (max-width: 1280px) {
    .product-footer {
        margin-top: 50px !important;
    }

    .ct-tab-single-product .nav {
        padding-top: 0 !important;
    }

    .ct-tab-single-product .tab-panels {
        padding-top: 0 !important;
    }
}

@media screen and (max-width: 550px) {
    .product-small .box-text-products {
        min-height: 180px;
    }

    .res-section-single-product {
        padding: 0 !important;
    }

    .product-info {
        padding-bottom: 0 !important;
    }

    .product-footer {
        margin-top: 10px !important;
    }

    .ct-tab-single-product .nav {
        padding-top: 0 !important;
    }


}


@media screen and (max-width: 850px) {
    .ct-tab-single-product .tab-panels {
        padding-top: 30px !important;
        padding-left: 0 !important;
    }

    .section-content .ct-tab-single-product .nav {
        position: static !important;
    }
}


/* =========================================================================================================== giới thiệu  */
@media screen and (max-width: 850px) {
    .ct-text-s1-plp {
        padding: 0 20px !important;
    }
}

@media screen and (max-width: 1600px) {
    .ct-video-container {
        height: 80vh;
    }

    .ct-video-container iframe {
        height: 80vh;
    }
}

@media screen and (max-width: 1300px) {
    .ct-video-container {
        height: 70vh;
    }

    .ct-video-container iframe {
        height: 70vh;
    }
}

@media screen and (max-width: 850px) {

    .ct-video-container,
    .ct-video-container iframe {
        height: 60vh;
    }
}

@media screen and (max-width: 600px) {

    .ct-video-container,
    .ct-video-container iframe {
        height: 40vh;
    }
}

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

    .ct-video-container,
    .ct-video-container iframe {
        height: 300px;
    }
}

@media screen and (max-width: 1280px) {

    .res-col-about-us-x2 .col-inner,
    .res-col-director-about-us .col-inner {
        padding: 60px 120px 75px 120px !important;
        text-align: justify;
    }

    .res-no-set-col-about-us .col-inner {
        padding: 0 !important;
    }



}

@media screen and (max-width: 850px) {

    .res-col-about-us-x2 .col-inner,
    .res-col-director-about-us .col-inner {
        padding: 50px 30px 30px 30px !important;
    }

    .ct-h2-about-us-plp {
        margin-bottom: 20px !important;
    }

    .res-no-set-col-about-us .col-inner {
        padding: 0 !important;
    }

    .res-col-our-story-about-us .col-inner {
        padding: 0 !important;
    }
}

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

    .res-col-about-us-x2 .col-inner,
    .res-col-director-about-us .col-inner {
        padding: 50px 0px 30px 0px !important;
    }

    .ct-h2-about-us-plp {
        margin-bottom: 20px !important;
    }

    .res-no-set-col-about-us .col-inner {
        padding: 0 !important;
    }

    .ct-text-make-in-plp {
        padding: 0 15px;
    }


}


/* =========================================================================================================== chiến dịch thương hiệu  */
@media screen and (max-width: 430px) {
    .ct-h1-cp h1 {
        font-size: 25px;
    }
}

@media screen and (max-width: 550px) {
    .res-col-center-page-full .col-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

        .res-col-center-page-full .img{
            margin-left: 0 !important;
        }

        .res-col-ps-full-page .col-inner{
            padding-left: 0 !important;
        }
}

/* =========================================================================================================== liên hệ  */

/* Khi màn hình nhỏ hơn hoặc bằng 1280px, ép về 1 cột */
/* Khi màn hình nhỏ hơn hoặc bằng 1280px: stack 1 cột + đảo thứ tự */
@media screen and (max-width: 1280px) {
    .res-row-contact {
        display: flex !important;
        /* giữ flex để dùng flex-direction */
        flex-direction: column-reverse !important;
        /* đảo thứ tự và xếp dọc */
        align-items: stretch;
        /* kéo full width cho children */
        gap: 0;
        /* nếu muốn khoảng cách giữa các col, thay 0 bằng giá trị px/rem */
    }

    /* Ép mỗi cột chiếm full width */
    .res-row-contact .res-col-contact,
    .res-row-contact>.col {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    /* Nếu các .col-inner có padding/margin gây layout, bạn có thể điều chỉnh ở đây */
    .res-row-contact .col-inner {
        width: 100%;
    }
}


@media screen and (max-width: 550px) {
    .ct-form-message-textarea{
        height: 150px !important;
    }

        .ct-form-name-phone {
            gap: 10px;
        }
        .ct-form-file-input{
            margin-bottom: 5px;
        }
        .ct-form-label {
                min-width: 60px !important;
        }
    
}

@media screen and (max-width: 700px) {
    .ct-form-pol p{
        display: flex !important;
        flex-direction: column !important;
        /* xếp dọc */
        align-items: flex-start !important;
        /* canh trái, đổi thành center nếu muốn căn giữa */
        gap: 8px !important;
        /* khoảng cách giữa span và a, có thể chỉnh */
    }

    
}

@media screen and (max-width: 1100px) {
    .res-row-menu-prod .col{
                flex-basis: 100%;
        max-width: 100%;
    }

    
}