@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@100;200;300;400;500;600;700&display=swap');

:root{
    --arrow-circle: url('/wp-content/plugins/vh-core/img/arrow-circle-right.png');
    --color1: #FBBF14;
    --color2: #B1B1B1;
    --color3: #2A2A2A;
    --color4: #BCBCBC;
    --color5: #D9D9D9;
    --color6: #fff;
    --color7: #F2F2F2;
    --color8: #414042;
    --color9: #E2E2E2;
    --font: 'IBM Plex Sans Thai';
}
.m0{
    p{
        margin-bottom: 0 !important;
    }
}
.elementor-element-8d7d04c,.elementor-element-dba4f6d{
    height: 100vh !important;
}
.elementor-element-8d7d04c{
    padding-bottom: 120px !important;
}
::selection {
    background: var(--color1);
    color: var(--color3);
}

::-moz-selection {
    background: var(--color1);
    color: var(--color3);
}
.height400{
    height: 400px !important;
    object-fit: cover;
    object-position: center;
}
a{
    cursor: pointer !important;
}
.elementor-video{
    background-color: transparent !important;
}
.blog{
   .pagination{
        margin-top: 80px;
   } 
}
.lang-item-en{
    pointer-events: none;
}
.a-hover{
    .e-n-menu-heading{
        .e-n-menu-title:hover{
            color: #fff !important;
            a{
                color: var(--color1) !important;
                span{
                    color: var(--color1)!important;
                }
            }
        }
    }
}
.elementor-element-c430d01{
    a{
        color: #fff;
    }
}
.elementor-element-692e23a{
    .cs-section_heading{
        a{
            color: var(--color3);
        }
        a:hover{
            color: var(--color1);
        }
    }
}
#menubar-200{
    .polylang_langswitcher{
        display: none;
    }
}
.m0{
    p,h1,h2,h3,h4,h5,h6,span{
        margin-bottom: 0 !important;
    }
}
.customer-slide-logo{
    overflow: hidden;
    width: 100%;
    .cutomer-slide{
        .swiper-wrapper{
            .swiper-slide{
                text-align: center;
            }
        }
        .cutomer-slide-button-next,.cutomer-slide-button-prev{
            width: 35px;
            height: 35px;
            border-radius: 50%;
            background: var(--color6);
            background-image: var(--arrow-circle);
            background-repeat: no-repeat;
            background-size: cover;
            svg{
                display: none;
            }
        }
        .cutomer-slide-button-prev{
            transform: rotate(-180deg);
        }
        .wrapper{
            display: flex;
            width: max-content;
            animation: logoSlide 30s linear infinite;
            .slide{
                flex-shrink: 0;
                padding: 0 30px;
                img{
                    display: block;
                }
            }
        }
    }
}
@keyframes logoSlide {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}
.slide-text-vh-core{
    .pagination-div{
        position: relative;
        .swiper-wrapper{
            transition-timing-function: linear !important;
            .swiper-slide{
                height: auto;
                display: flex;
                flex-direction: column;
            }
        }
        .slide-text-button-next,.slide-text-button-prev{
            width: 35px;
            height: 35px;
            border-radius: 50%;
            background: var(--color6);
            background-image: var(--arrow-circle);
            background-repeat: no-repeat;
            background-size: cover;
            svg{
                display: none;
            }
        }
        .slide-text-button-next{
            right: -30px !important;
        }
        .slide-text-button-prev{
            transform: rotate(-180deg);
            left: -30px !important;
        }
    }
    .slide-text-pagination{
        position: static;
        margin-top: 30px !important;
    }
    .swiper-pagination-bullet-active{
        background-color: var(--color1);
    }
}
.faqs-list{
    border: 1px solid var(--color2);
    border-left: none;
    border-right: none;
    .list{
        border-top: 1px solid var(--color2);
        .title{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
            gap: 20px;
            h2{
                margin-bottom: 0;
            }
            .faqs-button{
                display: flex;
                justify-content: center;
                align-items: center;
                width: 35px;
                height: 35px;
                border: 1px solid var(--color3);
                border-radius: 50%;
                padding: 5px;
                cursor: pointer;
                background-color: transparent;
                transition: all .3s ease;
                flex-shrink: 0;
            }
            .faqs-button:hover{
                background-color: var(--color1);
                border: 1px solid var(--color1);
                transition: all .3s ease;
            }
        }
        .detail{
            padding: 0 30px;
            display: none;
            p{
                margin-bottom: 0;
            }
        }
    }
    .list.active{
        .title{
            .faqs-button{
                transform: rotate(-180deg);
                background-color: var(--color1);
                border: 1px solid var(--color1);
                transition: all .3s ease;
            }
        }
        .detail{
            padding: 0 30px 30px;
        }
    }
    .list:first-of-type{
        border-top: none;
    }
}
.e-n-menu-item:hover{
    .e-n-menu-dropdown-icon-closed,.e-n-menu-dropdown-icon-opened{
        svg,path{
            fill: var(--color1) !important;
        }
    }
}
.e-n-menu-dropdown-icon-closed,.e-n-menu-dropdown-icon-opened,.toggle-iconMB .elementor-icon{
    svg,path{
        fill: var(--color3) !important;
    }
}
.polylang_langswitcher{
    padding: 0;
    list-style: none;
    margin-bottom: 0;
    display: flex;
    li:last-of-type{
        a{
            transition: all .3s ease;
            border-left: 1px solid var(--color4);
        }
    }
    li{
        a{
            font-family: var(--font);
            font-weight: 400;
            font-size: 14px;
            line-height: 30px;
            color: var(--color3);
            padding: 0 5px;
            transition: all .3s ease;
            color: var(--color4);
        }
        a:hover{
            color: var(--color3);
        }
    }
    .current-lang{
        a{
            color: var(--color3);
        }
    }
}
.tab-vh-core{
    .list{
        .tab-title{
            display: flex;
            justify-content: center;
            .title{
                width: auto;
                height: 60px;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: var(--color5);
                transition: all .3s ease;
                cursor: pointer;
                span{
                    width: 100%;
                    text-align: center;
                    height: 35px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-right: 2px solid var(--color4);
                    transition: all .3s ease;
                    padding: 0 20px;
                }
            }
            .title.active{
                background-color: var(--color1);
                transition: all .3s ease;
                span{
                    border-right: 2px solid transparent;
                }
            }
            .title:first-of-type{
                border-top-left-radius: 8px;
                border-bottom-left-radius: 8px;
            }
            .title:last-of-type{
                border-top-right-radius: 8px;
                border-bottom-right-radius: 8px;
                span{
                    border-right: 2px solid transparent;
                }
            }
        }
        .detail{
            width: 100%;
            left: 0;
            display: none;
            padding-top: 80px;
            .title-detail,.description-detail{
                text-align: center;
            }
            .description-detail{
                margin-bottom: 50px;
            }
        }
    }
}
.tab-slide{
    position: relative;
    .swiper-wrapper{
        .swiper-slide{
            .img{
                padding: 20px;
                background-color: var(--color6);
                border-radius: 10px;
                text-align: center;
            }
            .description{
                margin-top: 30px;
                h3{
                    margin-bottom: 0;
                }
                p{
                    margin-bottom: 0;
                }
            }
        }
    }
    .swiper-pagination{
        position: static;
        margin-top: 50px;
        .swiper-pagination-bullet-active{
            background-color: var(--color1);
        }
    }
    .swiper-button-next,.swiper-button-prev{
        width: 35px;
        height: 35px;
        background: var(--color6);
        background: var(--arrow-circle);
        position: absolute;
        top: 39% !important;
        svg{
            display: none;
        }
    }
    .swiper-button-prev{
        transform: rotate(-180deg);
    }
}
.tab-slide-product{
    position: relative;
    .pagination-tab-product{
        .swiper-wrapper{
            .swiper-slide{
                background-color: var(--color6);
                border-radius: 12px;
                padding: 50px 80px 30px;
                display: flex;
                flex-direction: column;
                gap: 40px;
                .img{
                    text-align: center;
                    img{
                        width: 245px;
                        height: 163px;
                        object-fit: contain;
                    }
                }
                .description{
                    text-align: center;
                    display: flex;
                    flex-direction: column;
                    gap: 25px;
                    h3,p{
                        margin-bottom: 0 !important;
                    }
                    h3{
                        height: 60px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        text-align: center;
                    }
                    .button{
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        justify-content: center;
                        gap: 10px;
                        button,a{
                            height: 40px;
                            width: 120px;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            cursor: pointer;
                            font-family: var(--font);
                            color: var(--color3);
                            font-size: 16px;
                            line-height: 30px;
                        }
                        button{
                            background-color: var(--color1);
                            border-radius: 4px;
                            border: 0;
                            transition: all .3s ease;
                        }
                        button:hover{
                            background-color: var(--color9);
                            transition: all .3s ease;
                        }
                        a{
                            background-color: var(--color9);
                            border-radius: 4px;
                            transition: all .3s ease;
                        }
                        a:hover{
                            background-color: var(--color1);
                            transition: all .3s ease;
                        }
                    }
                    .product-detail{
                        text-align: left !important;
                    }
                }
            }
        }
        .tab-slide-porduct-button-next,.tab-slide-porduct-button-prev{
            width: 35px;
            height: 35px;
            border-radius: 50%;
            background: var(--color6);
            background-image: var(--arrow-circle);
            background-position: cover;
            background-repeat: no-repeat;
            position: absolute;
            top: 50% !important;
            svg{
                display: none;
            }
        }
        .tab-slide-porduct-button-next{
            right: -30px !important;
        }
        .tab-slide-porduct-button-prev{
            transform: rotate(-180deg);
            left: -30px !important;
        }
    }
    .tab-slide-porduct-pagination{
        position: static;
        margin-top: 30px;
    }
}
.product{
    position: relative;
    .pagination-product{
        .swiper{
            .swiper-wrapper{
                .swiper-slide{
                    display: flex;
                    flex-direction: column;
                    gap: 40px;
                    background-color: var(--color6);
                    border-radius: 12px;
                    padding: 0 20px 40px;
                    .img{
                        text-align: center;
                        img{
                            height: 245px;
                            width: 245px;
                            object-fit: contain;
                        }
                    }
                    .description{
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        gap: 25px;
                        h3,.price{
                            font-family: var(--font);
                            color: var(--color3);
                            font-weight: 500;
                            margin-bottom: 0 !important;
                        }
                        h3{
                            line-height: 30px;
                            font-size: 22px;
                            height: 60px;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            text-align: center;
                        }
                        .price{
                            font-size: 18px;
                            line-height: 26px;
                        }
                        .product-detail{
                            margin: 0 !important;
                            text-align: left;
                        }
                        a{
                            height: 40px;
                            width: 120px;
                            background-color: var(--color9);
                            border-radius: 4px;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            font-size: 16px;
                            font-weight: 400;
                            line-height: 30px;
                            color: var(--color3);
                            transition: all .3s ease;
                        }
                        a:hover{
                            background-color: var(--color1);
                            transition: all .3s ease;
                        }
                    }
                }
            }
        }
        .swiper-button-next,.swiper-button-prev{
            position: absolute;
            top: 50%;
            border-radius: 50%;
            background: var(--color6);
            background-image: var(--arrow-circle);
            background-repeat: no-repeat;
            background-size: cover;
            width: 35px;
            height: 35px;
            svg{
                display: none;
            }
        }
        .swiper-button-next{
            right: -30px !important;
        }
        .swiper-button-prev{
            transform: rotate(-180deg);
            left: -30px !important;
        }
    }
    .slide-porduct-pagination{
        position: static;
        margin-top: 30px !important;
    }
    .swiper-pagination-bullet-active{
        background-color: var(--color1);
    }
}
.login-btn{
    background: var(--color1) !important;
    font-weight: 500 !important;
    border-radius: 3px !important;
}
.login-btn:hover{
    background: var(--color9) !important;
    color: var(--color3);
}
.widget-footer{
    border-radius: 4px !important;
    svg,path{
        fill: var(--color8);
    }
}
.white{
    svg,path{
        fill: var(--color6);
    }
}
/* Responsive */

@media only screen and (max-width: 660px){
    .tab-vh-core{
        .list{
            .tab-title{
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                gap: 10px;
                .title{
                    border-radius: 8px;
                    span{
                        border-right: 0;
                    }
                }
            }
        }
    }
}
@media only screen and (max-width: 1049px){
    .tab-slide-product{
        .swiper-wrapper{
            .swiper-slide{
                padding: 50px 30px 30px;;
                .description{
                    .button{
                    }
                }
            }
        }
        .swiper-button-next,.swiper-button-prev{
            width: 35px;
            height: 35px;
            background: var(--color6);
            background: var(--arrow-circle);
            position: absolute;
            top: 50% !important;
            svg{
                display: none;
            }
        }
        .swiper-button-prev{
            transform: rotate(-180deg);
        }
    }
}
@media only screen and (max-width: 1200px){
    .width100{
        width: 100% !important;
    }
}
@media only screen and (max-width: 767px){
    .height400{
        height: auto !important;
    }
    p{
        white-space: normal !important;
    }
    .slide-text-vh-core{
        .pagination-div{
            .slide-text-button-next,.slide-text-button-prev{
                display: none !important;
            }
        }
    }
    .product{
        .pagination-product{
            .slide-porduct-button-next,.slide-porduct-button-prev{
                display: none;
            }
        }
    }
    .tab-slide-product{
        .pagination-tab-product{
            .tab-slide-porduct-button-next,.tab-slide-porduct-button-prev{
                display: none;
            }
        }
    }
}
@media only screen and (min-width: 768px){
    .slide-text-vh-core{
        .slide-text-pagination{
            display: none;
        }
    }
    .product{
        .slide-porduct-pagination{
            display: none;
        }
    }
    .tab-slide-product{
        .tab-slide-porduct-pagination{
            display: none;
        }
    }
}