* {
    touch-action: manipulation;
}

/* .container-fluid{
    max-width:1920px;
} */

.text-indent-1{
    text-indent: 1rem;
}

.text-indent-2{
    text-indent: 2rem;
}

.text-indent-3{
    text-indent: 3rem;
}

.text-indent-4{
    text-indent: 4rem;
}



.fixed-size {
    width: 100%;
    max-width: 521px;
    object-fit: cover; /* ป้องกันการบิดเบี้ยวของรูป */
    display: block;
    margin: 0 auto; /* ทำให้รูปอยู่กลาง card */
}


.text-truncate-2{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.text-truncate-3{
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


.container {
    max-width:1024px !important;
}
body{
    /* font-family: "Noto Sans Thai", sans-serif; */
    font-family: "Sarabun", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings:"wdth" 100;

    background-color:white;
    background-image: url("/front/img/bg-with-left.png"),url("/front/img/bg-white-right.png");
    background-repeat: repeat-y;
    background-position: left,right;
    background-size: contain;
}


a {
    text-decoration: none;
}
a:hover,
a:focus,
a:active {
    text-decoration: none;
    color: inherit;
    outline: none;
}

.btn-temp{
    background: #0095DA;
    box-shadow: 0px 2px 4px 0px #00000040;
    border-radius: 5px;
    min-width:154px;
    padding-top:0.375rem;
    padding-bottom:0.375rem;
    padding-left:0.75rem;
    padding-right:0.75rem;
    border:none;
}

.btn-red{
    background: linear-gradient(180deg, #F3053E 0%, #D60335 39.25%, #B7002C 61.19%, #B7002C 100%);
    box-shadow: 0px 4px 4px 0px #0000002E;
    border-radius: 3.6px;
    min-width:154px;
    padding-top:0.375rem;
    padding-bottom:0.375rem;
    padding-left:0.75rem;
    padding-right:0.75rem;
    border:none;
}
.btn-black{
    background: #252F3F;
    box-shadow: 0px 4px 4px 0px #00000026;
    border-radius: 0px;
    min-width:154px;
    padding-left:0.75rem;
    padding-right:0.75rem;
}

.btn-yellow{
    background: #FFD12F;
    box-shadow: 0px 4px 4px 0px #00000026;
    border-radius: 0px;
    min-width:154px;
    padding-left:0.75rem;
    padding-right:0.75rem;
}

.btn-green{
    background: #009A7B;
    /* box-shadow: 0px 4px 4px 0px #00000026; */
    border-radius: 5px;
    min-width:105px;
    padding-left:0px;
    padding-right:0px;
}

.btn-white{
    background: white;;
    /* box-shadow: 0px 4px 4px 0px #00000026; */
    border-radius: 5px;
    min-width:105px;
    padding-left:0px;
    padding-right:0px;
    border:1px solid #009A7B;
}

.btn-line{
    background: linear-gradient(360deg, #117F3F 0%, #89C636 100%);
    box-shadow: 0px 4px 7px 0px #0000001A;
    border: 1px solid #223427;
    border-radius: 9px;
}

.btn-tel{
    background: linear-gradient(175.34deg, #FFFFFF 3.16%, #E5E5E5 102.27%);
    box-shadow: 0px 4px 7px 0px #0000001A;
    border: 1px solid #17833F;
    border-radius: 9px;
}





.btn-temp:hover{
    box-shadow: 0px 4px 8px 0px #00000040;
}

 .nav-item{
    padding-left:0.5rem;
    padding-right:0.5rem;
}

.nav-item.active , .nav-item:hover{
    /* background: linear-gradient(180deg, #FFF500 0%, #FFB800 100%); */ 
    /* height:52px !important; */
    border-bottom: 4px solid #D70066;
    
}
.nav-item.active a , .nav-item:hover a{
    /* color:black !important; */
    padding-top:4px;
    /* color:#2A8E3E !important; */
    font-weight:500 !important
} 

.text-yellow {
    color: #FFD12F;
}

.text-brown {
    color:#7F511E;
}


.text-red {
    color:#F3053E;
}

.text-black {
    color:black;
}
.text-dark {
    color:#201F25 !important;
}

.text-blue{
    color: #00A9F7;
}

.text-dark-blue {
    color: #202F42;
}

.text-orange{
    color: #FD9518;

}
.text-gray {
    color:#444444;
}

.text-dark-gray{
    
    color:#333333;
}

.footer-logo{
    width:80%;
    height:auto;
}

.text-green{
    color:#009A7B;
    

}

/* ul{
    list-style-position:inside;
} */
li::marker {
    color: black;
}

li a {
    position: relative;
    left: -5px;
    
}
  
.bg-section{
    background: rgb(255,255,255);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url(/front/img/home-bg-section1.png);
}

.footer-bg{
    background: rgb(255,255,255);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url(/front/img/footer-bg.png);
}

.banner{
    background: rgb(255,255,255);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom center;
    min-height:560px;
    background-image: url(/front/img/home-banner.png);
}

.sub-banner{
    background: rgb(255,255,255);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
    min-height:430px;
    background-image: url(/front/img/sub-banner.png);
}

.sub-logo{
    width:290px;
}

.category-list{
    color: #808080;
    font-weight:500;
    font-size:16px;
}
.category-list.active{
    font-weight:700 !important;
    color: #009A7B;
    font-size:16px !important;
}
  
.border-break{
    border-bottom:23px solid #FFB825;
}

.height-sub-foot{
    height:200px;
}

.footer-edit{
    max-width:340px;
}

.show-item{
    width:170px;
    height:auto;
}

/* SM++ */
@media (min-width: 576px) {
    .footer-logo{
        width:405px;
        height:auto;
    }
    
    .fixed-size {
        max-width: 329px;
        height: 185px;
        max-height: 185px;
    }
    .fixed-size.type-2 {
        max-width: 329px;
        height: 241px;
        max-height: 241px;
    }

    
    .footer-edit{
        max-width:400px;
    }
    
    .show-item{
        width:200px;
    }
    
}
/* MD++ */
@media (min-width: 768px) {
    .sub-logo{
        width:490px;
    }
    .banner{
        background-image: url(/front/img/home-banner.png);
    }
    
    .sub-banner{
        background-image: url(/front/img/sub-banner.png);
    }

    .footer-logo{
        width:405px;
        height:auto;
    }
    .footer-edit{
        max-width:none;
    }
    
    
}
/* LG++ */
@media (min-width: 992px) {
    .sub-logo{
        width:795px;;
    }
    .banner{
        min-height:693px;
    }
    .footer-logo{
        width:405px;
        height:auto;
    }
    .height-sub-foot{
        height:140px;
    }
    .show-item{
        width:241px;
    }

}
/* XL++ */
@media (min-width: 1200px) {
    .footer-logo{
        width:405px;
        height:auto;
    }
    
}
/* XXL++ */
@media (min-width: 1400px) {

}


.fade-in {
    opacity: 1;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 0.3s;
}

@keyframes fadeInOpacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.fade-out {
    opacity: 0;
    animation-name: fadeOutOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 0.2s;
}

@keyframes fadeOutOpacity {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}