* {
    touch-action: manipulation;
}

.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 */
}

.fixed-product {
    width: 100%;
    max-height: 300px;
    height: 300px;
    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;
}

.container {
    max-width:1024px !important;
}
body{
    font-family: "Sarabun", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings:"wdth" 100;
}
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;
    min-width:133px;
    height:37px;
    border-radius:5px;
}


.btn-line{
    background: #10C800;
    border-radius: 5px;
    min-width:133px;
    height:37px;
    box-shadow: 0px 4px 4px 0px #00000026;
}




.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:60px !important;
    border-bottom: 6px solid #FFC21A;
    
}
.nav-item.active a , .nav-item:hover a{
    /* color:black !important; */
    padding-top:6px;
} 

.text-yellow {
    color: #FFC21A;
}

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


.text-red {
    color:#F3053E;
}

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

.text-blue{
    color: #299D90;
}

.text-dark-blue {
    color: #0F4E6F;
}

.text-orange{
    color:#F1822E;

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

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

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

/* 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: linear-gradient(90deg, #053945 0%, #0C8DAB 100%);

}

.banner{
    background: rgb(255,255,255);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    min-height:531px;
    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: #299D90;
    font-size:16px !important;
}
  
.border-break{
    border-bottom:23px solid #FFB825;
}

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

/* SM++ */
@media (min-width: 576px) {
    .footer-logo{
        width:363px;
        height:auto;
    }
    
    .fixed-size {
        max-width: 241px;
        height: 135px;
        max-height: 135px;
    }
    .fixed-product {
        width: 100%;
        max-height: 188px;
        height: 188px;
    }
}
/* MD++ */
@media (min-width: 768px) {
    .sub-logo{
        width:311px;
    }
    .banner{
        background-image: url(/front/img/home-banner.png);
    }
    
    .sub-banner{
        background-image: url(/front/img/sub-banner.png);
    }
    
}
/* LG++ */
@media (min-width: 992px) {
    .sub-logo{
        width:311px;
    }
    .banner{
        min-height:531px;
    }
    .footer-logo{
        width:363px;
        height:auto;
    }
    .height-sub-foot{
        height:140px;
    }
    
    

}
/* XL++ */
@media (min-width: 1200px) {
    
}
/* 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;
    }
}