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

.st-testimonial-wrap{ font-family: 'Noto Sans Thai', sans-serif !important; font-weight:300; font-size:16px; color:#000; line-height:1.8em; }
.st-testimonial-wrap a{ color:#000; }
.st-testimonial-wrap *,
.st-testimonial-wrap *:before,
.st-testimonial-wrap *:after {
    -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
     -ms-box-sizing: border-box;
        box-sizing: border-box;
}
.st-testimonial-wrap .container{ width:90%; margin:auto; }
.st-testimonial-wrap .slide-container{ width:calc(100% + 60px); margin-left:-30px; }

.flex{ 
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; 
}
.justify-between {
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
}
.text-center{ text-align:center; }
.bg-red{ background-color:#b31c18; }
.bg-gray{ background-color:#eee; }
.bg-light-gray{ background-color:#f1f1f1; }
.text-white{ color:#fff !important; }

.st-slide .slick-dots li{ width: 10px; height: 10px; margin: 0 6px; }
.st-slide .slick-dots li button {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    padding: 0;
    background-color: #d9d9d9;
}
.st-slide .slick-dots li.slick-active button{ background-color:#b31c18; }
.st-slide .slick-dots li button::before{ display:none; }
.st-slide.slick-dotted.slick-slider{ margin-bottom:0; padding-bottom:50px; }
.st-slide .slick-dots{ bottom:0; }
.st-slide .slick-prev, .st-slide .slick-next{ width:30px; height:30px; top:48%; text-indent: -9999px; border:none !important; background:none !important; }
.st-slide .slick-prev{ left:-35px; }
.st-slide .slick-next{ right:-35px; }
.st-slide .slick-prev::before, .st-slide .slick-next::before{ background-size:cover; content:''; display:block; position:absolute; top:0; width:30px; height:30px; }
.st-slide .slick-prev::before{ background-image:url('images/chevron-left.svg?v=1.0'); left:1px; }
.st-slide .slick-next::before{ background-image:url('images/chevron-right.svg?v=1.0'); left:2px; }

.st-video-box img{ display:block; width:100%; }
.st-video-box a{ display:block; position:relative; }
.st-video-box a:before{ content:''; display:block; width:100%; height:100%; position:absolute; background-color: rgba(0, 0, 0, 0.1); transition: all 0.3s; }
.st-video-box a:after{ content:''; display:block; width:60px; height:60px; background-image:url('images/icon-play.png'); background-size:cover; position:absolute; top:50%; left:50%; margin:-30px 0 0 -30px; transition: all 0.3s; opacity: 1; }
.st-video-box a:hover:before{ background-color: rgba(0, 0, 0, 0.5); }
.st-video-box a:hover:after{ opacity: 0.7; }
.st-testimonial-box{ background-color:#EBEAEA; padding:60px 30px 20px; border-radius:10px; position:relative; font-family: 'Noto Sans Thai', sans-serif !important; font-size:16px; }
.st-testimonial-box .customer{ text-align: center; font-size:20px; font-weight:500; }
.st-testimonial-box .product{ text-align: center; margin:5px 0 20px; }
.st-testimonial-box .review{ min-height:150px; text-align: center; }
.st-testimonial-box::before,
.st-testimonial-box::after{ content:''; display:block; width:55px; height:55px; position:absolute; background-size:contain; background-repeat: no-repeat; }
.st-testimonial-box::before{ left:-25px; top:25px; background-image:url('images/left-quote.svg'); }
.st-testimonial-box::after{ right:30px; bottom:-35px; background-image:url('images/right-quote.svg'); }
.st-testimonial-box .avatar{ position:absolute; top:-65px; right:60px; width:110px; height:110px; background-color:#fff; border-radius:50%; box-shadow: 0px 4px 20px 0px #00000029; }
.st-testimonial-box .emoji{ text-align:center; margin-top:30px; height:30px; background-image:url('images/emoji-full-score.png?v=1.4'); background-size:contain; background-position: center center; background-repeat: no-repeat; }
.st-testimonial-box .emoji-other-score{ background-image:url('images/emoji-other-score.png?v=1.4'); }
.st-testimonial-box img{ display:block; width:100%; }
.st-testimonial-slide .wrap-slide-testimonial-box{ padding:0 30px; }
.st-testimonial-slide .st-testimonial-box{ margin:70px 0 15px; }
.st-video-slide .st-video-box{ margin:15px; }
.video-item-1{ padding-bottom:0 !important; }
.video-item-1 .slick-dots{ display:none; }
.video-item-2 .slick-track{ margin-left:0 !important; }

#st-testimonial-widget{ padding:80px 0 60px; }
#st-testimonial-widget h3{ font-size:30px; margin-bottom:50px; }
#st-video-widget{ padding:140px 0 80px; position:relative; }
#st-video-widget .button-view-all{ position:absolute; left:50%; top:0; transform:translate(-50%, -50%); display:inline-block; padding:7px 35px; border-radius:3px; font-size:20px; }
#st-video-widget .st-video-box{ width:31%; }
#st-testimonial-page{ padding:100px 0; }
#st-testimonial-page .text-field{ margin-bottom:60px; }
#st-testimonial-page .text-field h1{ font-size:30px; }
#st-testimonial-page .text-field p{ font-size:20px; }
#st-testimonial-list{ display: grid; gap:120px 60px; grid-template-columns: repeat(3,minmax(0,1fr)); margin:130px 0 30px; }
#st-video-page{ padding:100px 0; }
.st-load-more-field{ margin-top:60px; }
#btn-load-testimonial{ padding:9px 0; font-size:18px; border:none; width:200px; border-radius:5px; }
#st-category-select-wrap{ margin:60px 0 0; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
#st-category-label{ margin-bottom:10px; font-size:16px; }
#st-category-select{ width:auto; border:none; width:200px; padding: 0.5rem 1rem; }

#st-category-select-wrap .select2-container--default .select2-selection--single{ background:none; border:none; border-radius: 0; border-bottom:1px #ccc solid; }
#st-category-select-wrap .select2-container .select2-selection--single .select2-selection__rendered{ color:#000; }
#st-category-select-wrap .select2-container--default .select2-selection--single .select2-selection__placeholder{ color:#000; }

.icon-st-avatar{ display:block; width:100%; height:100%; background-size:contain; background-repeat: no-repeat; border-radius: 50%; }
.icon-st-avatar-1{ background-image:url('images/avatar/1.png'); }
.icon-st-avatar-2{ background-image:url('images/avatar/2.png'); }
.icon-st-avatar-3{ background-image:url('images/avatar/3.png'); }
.icon-st-avatar-4{ background-image:url('images/avatar/4.png'); }

.st-loader {
    display:none;
    margin:auto;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50%;
    position: relative;
    animation: rotate 1s linear infinite
}
.st-loader::before, .st-loader::after {
    content: "";
    box-sizing: border-box;
    position: absolute;
    inset: 0px;
    border-radius: 50%;
    border: 5px solid #FFF;
    animation: prixClipFix 2s linear infinite ;
}
.st-loader::after{
    border-color: #c21b17;
    animation: prixClipFix 2s linear infinite , rotate 0.5s linear infinite reverse;
    inset: 6px;
}

#btn-load-testimonial.loading .st-loader{ display:block; }
#btn-load-testimonial.loading .btn-txt{ display:none; }

@keyframes rotate {
    0%   {transform: rotate(0deg)}
    100%   {transform: rotate(360deg)}
}

@keyframes prixClipFix {
    0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
    25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
    50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
    75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
    100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
}

#st-testimonial-list-loading{ margin:100px 0; display:none; }

.st-loader-item{
    display: block;
    position: relative;
    height: 15px;
    width: 140px;
    margin:auto;
    background-image: 
    linear-gradient(#FFF 15px, transparent 0), 
    linear-gradient(#FFF 15px, transparent 0), 
    linear-gradient(#FFF 15px, transparent 0), 
    linear-gradient(#FFF 15px, transparent 0);
    background-repeat: no-repeat;
    background-size: 15px auto;
    background-position: 0 0, 40px 0, 80px 0, 120px 0;
    animation: pgfill 1s linear infinite;
}
@keyframes pgfill {
    0% {   background-image: linear-gradient(#FFF 15px, transparent 0), linear-gradient(#FFF 15px, transparent 0), linear-gradient(#FFF 15px, transparent 0), linear-gradient(#FFF 15px, transparent 0); }
    25% {   background-image: linear-gradient(#c21b17 15px, transparent 0), linear-gradient(#FFF 15px, transparent 0), linear-gradient(#FFF 15px, transparent 0), linear-gradient(#FFF 15px, transparent 0); }
    50% {   background-image: linear-gradient(#FFF 15px, transparent 0), linear-gradient(#c21b17 15px, transparent 0), linear-gradient(#FFF 15px, transparent 0), linear-gradient(#FFF 15px, transparent 0); }
    75% {   background-image: linear-gradient(#FFF 15px, transparent 0), linear-gradient(#FFF 15px, transparent 0), linear-gradient(#c21b17 15px, transparent 0), linear-gradient(#FFF 15px, transparent 0); }
    100% {   background-image: linear-gradient(#FFF 15px, transparent 0), linear-gradient(#FFF 15px, transparent 0), linear-gradient(#FFF 15px, transparent 0), linear-gradient(#c21b17 15px, transparent 0); }
}

#st-video-widget-list > *{ margin-left:3.5%; }
#st-video-widget-list > *:first-child{ margin-left:0; }
#st-video-widget-list.item-1 > *{ margin:auto; }

@media (max-width:1600px){ 

    .st-testimonial-box .review{ min-height:150px; }
    .st-testimonial-wrap .slide-container{ width:calc(100% + 50px); margin-left:-25px; }
    .st-testimonial-slide .wrap-slide-testimonial-box{ padding:0 25px; }
    .st-testimonial-box::after{ right:15px; }
}

@media (max-width:1440px){
    
}

@media (max-width:1366px){
    .st-testimonial-box::before,
    .st-testimonial-box::after{ width:45px; height:45px; }
    .st-testimonial-box::before{ left:-20px; }
    .st-testimonial-box::after{ bottom:-30px; }
}

@media (max-width:1180px){

    #st-video-page{ padding:70px 0; }
    #st-testimonial-list{ gap:120px 50px; grid-template-columns: repeat(2,minmax(0,1fr)); }
    .st-testimonial-wrap .slide-container{ width:calc(100% + 30px); margin-left:-15px; }
    .st-testimonial-slide .wrap-slide-testimonial-box{ padding:0 15px; }
}

@media (max-width:980px){
    
    .st-testimonial-box .review{ min-height:150px; }
}

@media (max-width:767px){

    #st-testimonial-widget{ padding-top:60px; }
    #st-testimonial-widget h3{ font-size:22px; margin-bottom:40px; }
    #st-video-widget{ padding:80px 0 40px; }
    #st-video-widget .st-video-box{ width:100%; margin-bottom:15px; }
    #st-video-widget-list{ -webkit-box-orient: vertical !important;
        -webkit-box-direction: normal !important;
        -ms-flex-direction: column !important;
        flex-direction: column !important; }
    #st-video-widget-list > *{ margin-left:0; }
    #st-testimonial-list{ gap:90px 50px; grid-template-columns: repeat(1,minmax(0,1fr)); padding:0 15px; margin-top:100px; }
    #st-category-select-wrap{ padding-left:15px; padding-right:15px; }
    #st-category-select{ width:100%; text-align: center; }
    .st-testimonial-box::after{ right:-15px; bottom:60px; }
    #btn-load-testimonial{ font-size:16px; }
    #st-testimonial-page, #st-video-page{ padding:40px 0; }
    #st-testimonial-page h1{ font-size:30px; }
    .st-testimonial-box .avatar{ right:40px; top:-50px; width:90px; height:90px; }
    #st-testimonial-page .text-field p{ font-size:18px; }
}