* {
    touch-action: manipulation;
}


.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;
}

.container {
    max-width:1024px !important;
}
body{
    font-family: "Noto Sans Thai", 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: #DD1E25;
    box-shadow: 0px 4px 4px 0px #00000026;

    border-radius: 30px;
    min-width:154px;
    padding-top:0.375rem;
    padding-bottom:0.375rem;
    padding-left:0.75rem;
    padding-right:0.75rem;
    border:none;
}
.btn-black{
    background: #201F25;
    box-shadow: 0px 4px 4px 0px #00000026;

    border-radius: 30px;
    min-width:154px;
    padding-top:0.375rem;
    padding-bottom:0.375rem;
    padding-left:0.75rem;
    padding-right:0.75rem;
    border: 1px solid #FFFFFF
}

.btn-line{
    background: #3BB44A;
    border-radius: 30px;
    min-width:67px;
    padding-left:0.2rem;
    padding-right:0.2rem;
}





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

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

.nav-item.active , .nav-item:hover{
    /* background: linear-gradient(180deg, #FFF500 0%, #FFB800 100%); */
    height:60px !important;
    border-bottom: 4px solid #00ACAC;
    
}
.nav-item.active a , .nav-item:hover a{
    color:black !important;
    padding-top:4px;
}

.text-yellow {
    color:#FFB800;
}

.text-red {
    color:#A52C24;
}

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

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

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

.text-orange{
    color: #FD9518;

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

.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);
}

.banner{
    background: rgb(255,255,255);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    min-height:480px;
    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;
    min-height:431px;
    background-image: url(/front/img/sub-banner.png);
}

.sub-logo{
    max-width:127px;
    padding-top:119px;
}

.category-list{
    color: #808080;
    font-weight:500;
    font-size:14px;
}
.category-list.active{
    font-weight:700;
    color:#FFB800;
}
  
/* SM++ */
@media (min-width: 576px) {
    .footer-logo{
        width:300px;
        height:auto;
    }
    
    .fixed-size {
        max-width: 241px;
        height: 154px;
        max-height: 154px;
    }
    
}
/* MD++ */
@media (min-width: 768px) {
    .footer-logo{
        width:100%;
        height:auto;
    }
   .last-footer{
    padding-top:38px;
   }
    
}
/* LG++ */
@media (min-width: 992px) {
    .banner{
        min-height:717px;
    }
    .footer-logo{
        width:345px;
        height:96px;
    }
    

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