* {
    touch-action: manipulation;
}
.navbar-toggler-icon {
    background-image: url('data:image/svg+xml;charset=UTF8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"%3E%3Cpath stroke="%2364584A" stroke-width="3" stroke-linecap="round" d="M4 7h22M4 15h22M4 23h22"/%3E%3C/svg%3E') !important;
}

/* .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;
}
.dropdown-icon{
    /* Arrow */
    appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23131313%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-size: 0.45rem auto;
}

.pointer{
    cursor: pointer;
}

.seeall{
    right:0;
    bottom:-117%;
}

.eat-label {
    transform: translate(0%, -50%);
    top:60px;
    left:0;
}


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


.text-truncate-2{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 3em; /* Assuming line-height is 1.5em */
    line-height: 1.5em;

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

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none; /* Hidden by default */
    z-index: 999;
  }  
.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:#FAFAFA; */
    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%); */
    background:#E61839;
    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-orange{
    background: #EDB05D;
    /* box-shadow: 0px 4px 4px 0px #00000026; */
    border-radius: 5px;
    min-width:105px;
    padding-left:0px;
    padding-right:0px;
}

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



.btn-blue{
    background: #3D9BE9;
    /* 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%); */
    background:#43D111;
    /* box-shadow: 0px 4px 7px 0px #0000001A; */
    /* border: 1px solid #223427; */
    border-radius: 4px;
}

.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:1rem;
    padding-right:1rem;
}

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

.text-yellow {
    color: #FFD12F;
}

.text-brown {
    color:#674D34;
}


.text-red {
    color:#009344;
}

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

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

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

.text-orange{
    color: #F16724;

}

.text-light-gray,.text-light-grey{
    color:#6C6C6C;
}
.text-gray {
    color:#444444;
}

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

.text-dark-brown {
    color:#64584A;
}

.footer-logo{
    width:287px;
    height:auto;
}

.text-green{
    color:#0B602F;
}

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

li a {
    position: relative;
    left: -5px;
    
}
  
.line-break{
    height:0.7px;
    width:100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url(/front/img/red-line-s.png);
}
.bg-section{
    background: rgb(255,255,255);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right;
    background-image: url(/front/img/bg-white.png);
}

.footer-bg{
    /* background-color: #FFFFFF;
    background-repeat: no-repeat;
    background-size: 200px auto, 200px auto !important;
    background-position: center; */
    /* background-image: url(/front/img/footer-bg.png); */

    /* background: linear-gradient(0deg, #090909 0%, #252726 100%); */
    background: linear-gradient(180deg, #009344 0%, #155835 100%);

}

.section-orange-bg{
    background-repeat: no-repeat;
    background-size: 400px auto, 400px auto !important;
    background-position: center;
}
.banner{
    background: rgb(255,255,255);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom center;
    min-height:429px;
    /* 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:300;
    font-size:16px;
}
.category-list.active{
    font-weight:700 !important;
    color: #444444;
    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;
}

.pt-sub{
    padding-top:80px;
}



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

.animatethis{
    visibility: hidden; /* Makes the element invisible */
    opacity: 0; /* Optional: Smooth fade-out effect */

}

#cart.toggle{
    display: flex;
}

#cart{
    background: linear-gradient(180deg, rgb(19 19 19) 46%, rgb(17 17 17) 90%) !important;
    left: 0;
    top: 0;
    z-index: 1000000;
    width: 100%;
    display: none;
}

#profilemenu , #pagemenu{
    display: none;
}

#profilemenu.toggle , #pagemenu.toggle{
    display: block;
}

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

/* custom */
@media (min-width: 472px) {
    .banner{
        min-height: 480px;
    }
}

@media (min-width: 525px) {
    .banner{
        min-height: 510px;
    }
}


/* SM++ */
@media (min-width: 576px) {
    

    .footer-logo{
        width:287px;
        height:auto;
    }
    
    .fixed-size {
        max-width: 329px;
        height: 185px;
        max-height: 185px;
        
    }
    .fixed-size.type-2 {
        max-width: 329px;
        height: 241px;
        max-height: 241px;
    }
    .fixed-size.type-3 {
        max-width: 241px;
        height: 241px;
        max-height: 241px;
    }
    .fixed-size.type-4 {
        max-width: 329px;
        height: 137px;
        max-height: 137px;
    }
    .fixed-size.type-5 {
        max-width: 240px;
        height: 136px;
        max-height: 136px;
    }
    .fixed-size.type-6 {
        max-width: 502px;
        height: 385px;
        max-height: 385px;
    }
   


    
    .footer-edit{
        max-width:400px;
    }
    
    .show-item{
        width:200px;
    }

    .pt-sub{
        padding-top:90px;
    }
    
    #cart{
        max-width:400px;
    }

    .banner{
        min-height:600px;
    }
    .brown-section{
        min-height:286px;
    }
    
}

@media (min-width: 620px) {
    .banner{
        min-height: 710px;
    }
}


/* MD++ */
@media (min-width: 768px) {
    .sub-logo{
        width:490px;
    }
    .banner{
        /* background-image: url(/front/img/home-banner.png); */
        background-position: center;
    }
    
    .sub-banner{
        background-image: url(/front/img/sub-banner.png);
    }

    .footer-logo{
        width:287px;
        height:auto;
    }
    .footer-edit{
        max-width:none;
    }

    
    .brown-section{
        min-height:386px;
    }
    .seeall{
        right:0;
        bottom:-80%;
    }
}
/* LG++ */
@media (min-width: 992px) {
    .pt-sub{
        padding-top:120px;
    }
    .sub-logo{
        width:795px;;
    }
    .banner{
        min-height:812px;
    }
    .footer-logo{
        width:400px;
        height:auto;
    }
    .height-sub-foot{
        height:140px;
    }
    .show-item{
        width:241px;
    }
    .seeall{
        transform:translate(-50%, -50%);
        top:50%;
        right:0;
        left:initial;
        bottom:initial;
    }
    .eat-label {
        transform: translate(-50%, -50%);top:60px;left:50%;
    }
    .section-orange-bg{
        background: 
    url("/front/img/orange-bg-left.png") -0% center no-repeat,
    url("/front/img/orange-bg-right.png") 100% center no-repeat;

    }
    

}
/* XL++ */
@media (min-width: 1200px) {
    .footer-logo{
        width:400px;
        height:auto;
    }
    .brown-section{
        min-height:486px;
    }
    
    
}
/* 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;
    }
}