@charset "UTF-8";
:root{
    scroll-behavior: smooth;
}

html, body{
    font-family: "Sarabun","Figtree", sans-serif;
    overflow-x: hidden;
    /* height: 100%; สำคัญมากเพื่อให้ body มีความสูงเต็มหน้าจอ */
    margin: 0;   /* ลบขอบนอกที่เบราว์เซอร์กำหนดมาให้ */
    padding: 0;  /* ลบช่องว่างภายในที่เบราว์เซอร์กำหนดมาให้ */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.full-screen1{
    height: 100vh; /* เต็มความสูงหน้าจอ */
    width: 100vw;  /* เต็มความกว้างหน้าจอ */
}
/* underline link */
a:link {
    text-decoration: none !important;
    color: inherit !important;
}
a:visited {
    text-decoration: none !important;
    color: inherit !important;
}
a:hover {
    text-decoration: none !important;
    color: inherit !important;
}
a:active {
    text-decoration: none !important;
    color: inherit !important;
}

/* link menu */
.link-menu{
    display: inline-block;
    background-color: #006c32;
    color: white;
    text-decoration: none;
    cursor: pointer;
    /* transition: 0.3s ease; */
    /* border-radius: 5px; */
}
.link-menu:hover{
    background-color:#ffffff;
    color:#006c32 !important;
    border: #006c32 solid 1px !important;
    padding-left: 8px;
    padding-right: 8px;
    text-decoration: none !important;
    transition: 0.3s ease-in-out;
    /* color: #000000;
    text-decoration: none !important;
    transition: color 0.2s ease-in-out;
    background-color: #ffffff;
    cursor: pointer; */
}
.navbar-height{
    height: 50px;
}

/* color-web-bg */
.bg-web {
    background-color: #006c32 !important;
}
.bg-red{
    background-color: #DC3545 !important;
}
.bg-blue{
    background-color: #0DCAF0 !important;
}
.bg-orange {
    background:#FF9900 !important;
}
.bg-yellow{
    background-color: #fdf363 !important;
}
.bg-search{
    background-color: #ffffff;
}
.bg-search:hover{
    background-color: #e0e0e0;
}
.bg-base{
    background-color: #009688 !important;
}
.bg-gray{
    background-color: #f1efef !important;
}
.bg-gray-2{
    background-color: #fafafa !important;
}

/* text-color */
.text-web{
    color: #006c32 !important;
}
.text-red{
    color: red !important;
}
.text-blue{
    color: blue !important;
}
.text-orange{
    color: orange !important;
}
.text-orange2{
    color: rgb(243, 73, 5) !important;
}
.text-yellow{
    color: yellow !important;
}
.text-green{
    color: green !important;
}
.text-brown{
    color: #795548 !important;
}
.text-gray{
    color: #808080 !important;
}


@keyframes metallicCycle{
    0%   { color: #2c2c2c; text-shadow: 1px 1px 2px #444; }
    25%  { color: #3f3f3f; text-shadow: 1px 1px 3px #555; }
    50%  { color: #5a5a5a; text-shadow: 2px 2px 4px #777; }
    75%  { color: #2a3c4d; text-shadow: 1px 1px 3px #444; }
    100% { color: #2c2c2c; text-shadow: 1px 1px 2px #333; }
}
.metallic-text{
    text-transform: uppercase;
    animation: metallicCycle 5s infinite ease-in-out;
    letter-spacing: 1px;
}

/* border-web */
.border-red{
    border: 1px solid #DC3545 !important;
}
.border-yellow{
    border: 1px solid #fdf363 !important;
}
.border-web{
    border: 1px solid #006c32 !important;
}
.border-web-b{
    border-bottom: 1px solid #006c32 !important;
}

.border-web .dropdown-item:hover {
    background-color: #dbdbdb;
    color: white;
}

.border-no-top{
    border-top: 4px solid #006c32 !important;
    border-bottom: 4px solid #006c32 !important;
    border-left: 4px solid #006c32 !important;
    border-right: 4px solid #006c32 !important;
    border-radius: 5px;
    border-collapse: separate !important;
    border-spacing: 0;
    overflow: hidden;
}

/* font */
.fs-7{
    font-size: 7px;
}

.fs-8{
    font-size: 8px;
}

.fs-9{
    font-size: 9px;
}

.fs-10{
    font-size: 10px;
}

.fs-11{
    font-size: 11px;
}

.fs-12{
    font-size: 12px;
}

.fs-13{
    font-size: 13px;
}

.fs-14{
    font-size: 14px;
}

.fs-15{
    font-size: 15px;
}


.fs-16{
    font-size: 16px;
}

.fs-17{
    font-size: 17px;
}

.fs-18{
    font-size: 18px;
}

.fs-19{
    font-size: 19px;
}

.fs-20{
    font-size: 20px;
}

.fs-21{
    font-size: 21px;
}

.fs-22{
    font-size: 22px;
}

.fs-24{
    font-size: 24px;
}

.fs-26{
    font-size: 26px;
}

.fs-28{
    font-size: 28px;
}

.fs-30{
    font-size: 30px;
}

.fs-33{
    font-size: 33px;
}

.fs-35{
    font-size: 35px;
}

.fs-38{
    font-size: 38px;
}

.fs-40{
    font-size: 40px;
}

.fs-42{
    font-size: 42px;
}

.fw-800{
    font-weight:800;
}

.fw-900{
    font-weight:900;
}


.text-navbar-l{
  font-size:13px;
}
/* breakpoint ของ md คือ 768px */
@media (min-width:768px){
  .text-navbar-l{
    font-size:20px;
  }
}
.text-navbar-r{
  font-size:13px;
}
/* breakpoint ของ md คือ 768px */
@media (min-width:768px){
  .text-navbar-r{
    font-size:16px;
  }
}



.text-store-front{
  font-size: 12px;
}
@media (max-width: 1200px){
  .text-store-front{
    font-size: 12px; /* Notebook / จอกลาง */
  }
}
@media (max-width: 992px){
  .text-store-front{
    font-size: 10px; /* Tablet แนวนอน */
  }
}
@media (max-width: 768px){
  .text-store-front{
    font-size: 11px; /* Tablet แนวตั้ง / มือถือจอใหญ่ */
  }
}
@media (max-width: 576px){
  .text-store-front{
    font-size: 11px; /* มือถือทั่วไป */
  }
}
@media (max-width: 375px){
  .text-store-front{
    font-size: 10px; /* มือถือจอเล็กมาก (iPhone SE เป็นต้น) */
  }
}
/* @media (max-width: 1240px){
  .text-store-front{
    font-size: 12px;
  }
} */

.text-store-list{
  font-size: 12px;
}
@media(max-width: 1240px){
  .text-store-list{
    font-size: 12px;
  }
}
@media (max-width: 992px){
  .text-store-list{
    font-size: 11px;
  }
}

/* swiper */
.swiper {
    /* overflow: visible; */
    width: 100%;
    /* height: 100vh; */
}
.swiper-slide img{
    object-fit:cover;
    /* width: 100%;
    height: 100%; */
}

.swiper-button-next,
.swiper-button-prev{
  color: #198754;
}

.swiper-button-prev::after,
.swiper-button-next::after {
  font-size: 44px; /* ขนาดปกติของลูกศร Swiper */
  font-weight: 900;
}
@media (max-width: 767px) {
  .swiper-button-prev::after,
  .swiper-button-next::after {
    font-size: 28px; /* <-- กำหนดขนาดให้เล็กลงสำหรับจอมือถือ */
  }
}

.swiper-pagination-bullet{
    background-color: #ffffff;
    opacity: 1; /* เพื่อให้สีชัดเจน */
}
/* จุด active เป็นสีขาว */
.swiper-pagination-bullet-active {
  background-color: #198754 !important;
}
.modal-swiper-overlay {
    /* ใช้สำหรับ Modal ที่อยู่ภายใน Swiper */
    position: absolute;
    z-index: 99999; /* สูงพอที่จะลอยเหนือทุกอย่าง */
    /* กำหนดตำแหน่งและการจัดกึ่งกลาง */
    top: 50%;
    left: 50%;
    transform: translate(-50%,50%);
    /* ขนาด */
    width: 80%;
    max-width: 600px;
    /* พื้นหลังทึบแสง (ถ้าต้องการ) */
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
/* hide scrollbar */
.hide-scrollbar{
    overflow: scroll; /* เลื่อนได้ */
    scrollbar-width: none; /* สำหรับ Firefox */
}
.hide-scrollbar::-webkit-scrollbar{
display: none; /* ซ่อน scrollbar */
}
/* hide scrollbar - y */
.hide-scrollbar-y{
    overflow-y: scroll;
    scrollbar-width: none;
}
.hide-scrollbar-y::-webkit-scrollbar{
    display: none;
}

/* responsive sm */
@media (max-width:576px){
    .custom-col-sm {
        width: 50%;  /* กำหนดให้คอลัมน์แต่ละอันมีความกว้าง 50% */
    }
}
/* shadow */
.shadow-gray{
    box-shadow:0 0 4px rgba(169, 169, 169, 0.9);  /* เงาสีเทา */
}
/* sticky */
.sticky-custom{
    position: sticky;
    top: 0; /* ตำแหน่งที่เริ่มติด */
    z-index: 10; /* แนะนำให้เพิ่ม z-index */
    background: white; /* ป้องกันบัง element ด้านหลัง */
}
.sticky-custom-active{
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5); /* เงาด้านล่าง */
    transition: box-shadow 0.3s ease-in-out;
}
/* lazy */
img.lazyload{
    filter: blur(10px);
    transition: filter 0.3s;
}
img.lazyloaded{
    filter: blur(0);
}

/* truncate */
.truncate-2-lines{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.truncate-1-lines{
    white-space: nowrap; /* 1. บังคับให้ข้อความอยู่บนบรรทัดเดียว */
    overflow: hidden;      /* 2. ซ่อนส่วนที่ล้นออกไป */
    text-overflow: ellipsis; /* 3. แสดง ... แทนส่วนที่ถูกซ่อน */
    width: 90%;           /* 4. กำหนดขอบเขตความกว้าง (สำคัญมาก) */
}

/* badge */
.badge-circle{
    width: 36px;
    height: 36px;
    border-radius: 50%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}

.badge-speech{
    position: relative;
    width: 50px;
    height: 45px;
    border-radius: 50%;
    background-color: #fdf363; /* สีแดง Bootstrap */
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
     font-weight: bold;
}

.badge-speech::after{
    content: "";
    position: absolute;
    bottom: -3px;
    left: 3px;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-top-color: #fdf363; /* สีเดียวกับวงกลม */
    transform: rotate(-60deg); /* บิดหางให้เอียงเล็กน้อย */
}

.half-circle-clip{
    width: 21px;
    height: 13px;
    background: #fdf363;
    clip-path: ellipse(100% 100% at 100% 50%);
}

/* animation */
@keyframes gentle-shake{
    0%, 100% {
    transform: translateX(0);
    }
    25% {
    transform: translateX(-2px);
    }
    50% {
    transform: translateX(2px);
    }
    75% {
    transform: translateX(-1px);
    }
}

.shake-forever{
    animation: gentle-shake 2s ease-in-out infinite;
}

.shake-forever2{
    animation: gentle-shake 2s ease-out infinite;
}

/* hover btn */
.hover-grow{
    /* transition: transform 0.2s ease-in-out; */
    display: inline-block;
    transition: transform 0.2s ease-in-out;
    cursor: pointer;
}
.hover-grow:hover{
    transform: scale(1.05); /* ขยายขึ้น 5% */
}

.hover-grow-border{
    /* transition: transform 0.2s ease-in-out; */
    display: inline-block;
    transition: transform 0.2s ease-in-out;
    cursor: pointer;
}
.hover-grow-border:hover{
    transform: scale(1.05); /* ขยายขึ้น 5% */
    border: 2px solid #006c32;
}

.hover-shadow{
    border: 2px solid #dee2e6;
    transition: box-shadow 0.3s ease;
}
.hover-shadow:hover{
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.2);
    transform: translateY(-2px); /* ลอยนิดๆ */
    border: 2px solid #006c32;
}

/* cut text */
.cut-text{
    width: 200px;          /* ความกว้างจำกัด */
    white-space: nowrap;   /* ไม่ให้ขึ้นบรรทัดใหม่ */
    overflow: hidden;      /* ซ่อนข้อความที่เกิน */
    text-overflow: ellipsis; /* แสดง ... */
    border: 1px solid #006c32;
}

/* swal2 */
.swal2-actions{
    justify-content: center !important;
    gap:10px !important;  /* ระยะห่างระหว่างปุ่ม */
}
.swal2-confirm, .swal2-cancel{
    min-width: 100px !important;
}

/* error border */
.error-border{
    border: 2px solid red !important;
}

/* firework */
.firework{
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    pointer-events: none;
    animation: explode 1s ease-out forwards;
}
@keyframes explode{
    0% {
    transform: scale(1) translate(0, 0);
    opacity: 1;
    }
    100% {
    transform: scale(0.5) translate(var(--x), var(--y));
    opacity: 0;
    }
}

/* centered card */
.centered-card {
    display: flex;
    justify-content: center; /* จัดกลางแนวนอน */
    align-items: center;   /* จัดกลางแนวตั้ง */
}

/* rotate */
.bell-shake{
  animation: bellRing 15s infinite ease-in-out;
  transform-origin: top center; /* จุดหมุนเหมือนกระดิ่ง */
}

@keyframes bellRing {
  0%   { transform: rotate(0); }
  10%  { transform: rotate(15deg); }
  20%  { transform: rotate(-15deg); }
  30%  { transform: rotate(10deg); }
  40%  { transform: rotate(-10deg); }
  50%  { transform: rotate(5deg); }
  60%  { transform: rotate(-5deg); }
  70%  { transform: rotate(0); }
  100% { transform: rotate(0); }
}

/* class mobile */


/* navbar text mobile */
#mobileNavbarCollapse .nav-link {
  color: #ffffff;
}
.small-toggler {
    font-size: 0.9rem;  /* ลดขนาด font */
    padding: 0.1rem 0.4rem; /* ลดช่องว่างภายในปุ่มเล็กน้อยเพื่อให้สมส่วน */
}

/* --- Styles for Branch shoose --- */
/* กำหนดสไตล์เริ่มต้น */
.branch-banner-title {
    font-size: 22px;
}
.branch-banner-title img {
    width: 25px;
}
.branch-buttons-container {
    margin-top: 35px;
}
.branch-button {
    font-size: 20px;
    padding: 0.5rem 3rem !important;
}
/* กำหนดสไตล์สำหรับจอขนาด  Tablet แนวนอน */
@media (max-width: 992px) {
    .branch-banner-title {
        font-size: 16px;
        top: 20px;
    }
    .branch-banner-title img {
        width: 16px;
    }
    .branch-buttons-container {
        margin-top: 6px;
    }
    .branch-button {
        font-size: 14px;       /* << ปรับแก้ขนาดฟอนต์ที่นี่ */
        padding: 0.1rem 0.5rem !important;
    }
}

/* --- Styles for customer_like_buy ลูกค้าชอบซื้อ--- */
/* ไอคอน โปรลด */
.alert-icon-container {
    position: absolute;
    top: -21px;
    left: -7px;
}
.alert-icon {
    width: 55px !important;
}
.alert-percent {
    position: absolute;
    font-size: 15px !important;
    top: 1px;
    left: 5px;
}

/* icon send free */
.alert-send-container {
    position: absolute;
    top: -17px;
    right: -4px;
}
.alert-icon-send {
    width: 52px !important;
}
.alert-percent-send {
    position: absolute;
    font-size: 14px !important;
    top: 1px;
    right: 23px;
}
.alert-percent-send2 {
    position: absolute;
    top: -10px;
    right: 6px;
}

/* ชื่อสินค้า */
.font-customer-title {
    font-size: 24px;
}
.font-customer-buy {
    font-size: 18px;
}
/* รูปภาพ */
/* .product-img {
    width: 100%;
    max-height: 180px;
} */

.product-img-box {
    width: 100%;
    height: 160px; /* ความสูงคงที่บน Desktop */
    overflow: hidden;
    border-radius: 12px;
}

.product-img {
    width: 100%;
    height: 100%;
    object-fit: cover;    /* หรือ contain แล้วแต่ดีไซน์ */
    object-position: center;
    display: block;
}

/* ชื่อสินค้า */
.font-product-name {
    font-size: 16px;
}
.height-product1 {
    height: 85px;
}
.height-product2 {
    height: 38px;

}
.height-product3 {
    height: 30px;

}

@media (max-width: 992px) {
    /* ขนาดมือถือ */
    .alert-icon-container {
        position: absolute;
        top: -17px;
        right: -7px;
    }
    .alert-icon {
        width: 45px !important;
    }
    .alert-percent {
        position: absolute;
        font-size: 13px !important;
        top: 1px;
        right:2px;
    }
    /* icon send free */
    .alert-send-container {
        position: absolute;
        top: -12px;
        right: -5px;
    }
    .alert-icon-send {
        width: 42px !important;
    }
    .alert-percent-send {
        position: absolute;
        font-size: 12px !important;
        top: 1px;
        right: 16px;
    }
    .alert-percent-send2 {
        position: absolute;
        top: -10px;
        right: 0px;
    }
    /* ชื่อหัวข้อลูกค้าชอบซื้อ */
    .font-customer-buy {
        font-size: 14px;
    }
    .font-customer-title {
        font-size: 18px;
    }
    /* ชื่อสินค้า */
    .font-product-name {
        font-size: 13px;
    }
    /* รูปภาพ */
    .product-img-box {
        height: 130px; /* ความสูงคงที่บน Mobile */
    }
    .height-product1 {
        height: 75px;
    }
    .height-product2 {
        height: 38px;
    }
    .height-product3 {
        height: 35px;
    }
}
@media (min-width:1px) and (max-width: 480px) {
    .height-product1 {
        height: 57px;
    }
    .height-product2 {
        height: 20px;
    }
    .height-product3 {
        height: 20px;
    }
}

/* แบรนด์ดัง */
.alert-icon-container-b {
    position: absolute;
    top: -15px;
    right: -10px;
}
.alert-icon-b {
    width: 55px !important;
}
.alert-percent-b {
    position: absolute;
    font-size: 15px !important;
    top: 1px;
    right: 5px;
}
@media (max-width: 992px) {
    .alert-icon-container-b {
        position: absolute;
        top: -12px;
        right: -8px;
    }
    .alert-icon-b {
        width: 45px !important;
    }
    .alert-percent-b {
        position: absolute;
        font-size: 13px !important;
        top: 1px;
        right:2px;
    }
}
/*  */
/* foot */
/* 1. สไตล์สำหรับจอมือถือ (ค่าเริ่มต้น) */
.footer-container {
    /* ปรับแก้ property ของ background ที่ไม่รองรับใน style attribute */
    min-height: auto; /* ให้ความสูงยืดหยุ่นตามเนื้อหาบนมือถือ */
}

.footer-logo {
    max-height: 120px; /* ลดขนาดโลโก้ */
}

.footer-title {
    font-size: 20px; /* ลดขนาด Font ของหัวข้อ */
}

.footer-content {
    font-size: 14px;
}

.footer-knowledge-icon {
    height: 90px; /* ลดขนาดไอคอนความรู้ */
}

.footer-social-container {
    margin-top: 0px; /* ลดระยะห่างด้านบน */
}

/* ลดขนาดไอคอนโซเชียล */
.social-icon-fb,
.social-icon-youtube {
    height: 80px;
}
.social-icon-ig {
    height: 35px;
}
.social-icon-tiktok {
    height: 120px;
    margin-left: -50px; /* ปรับระยะ margin ให้เหมาะสม */
}
/* 2. สไตล์สำหรับจอใหญ่ (768px ขึ้นไป) */
@media (min-width: 768px) {
    .footer-container {
        min-height: auto;  /* กลับไปใช้ค่าความสูงเดิม */
    }
    .footer-logo {
        max-height: 180px;
    }
    .footer-title {
        font-size: 24px;
    }
    .footer-content {
        font-size: 16px;
    }
    .footer-knowledge-icon {
        height: 150px;
    }
    .footer-social-container {
        margin-top: -30px;
    }
    .social-icon-fb,
    .social-icon-youtube {
        height: 113px;
    }
    .social-icon-ig {
        height: 50px;
    }
    .social-icon-tiktok {
        height: 170px;
        margin-left: -70px;
    }
}

/* ห้างชั้นนำ ภูมิภาค */
/* (ค่าเริ่มต้น) */
.font-mall-title {
     font-size: 20px;
}
.font-mall-center {
    font-size: 20px;
}

.card-product-img {
    max-height: 200px; /* กลับไปใช้ขนาดเดิม */
}
.card-badge {
    padding: 0.25rem 0.75rem; /* py-1 px-3 */
    top: -4px;
    right: -4px;
}
.card-badge-num {
    font-size: 18px; /* กลับไปใช้ขนาดเดิม */
}
.card-badge-text {
    font-size: 14px; /* กลับไปใช้ขนาดเดิม */
    margin-top: 0;
}
.card-action-btn {
    font-size: 1.25rem; /* กลับไปใช้ขนาดเดิม (fs-5) */
}
.maill-img{
    height:130px;
}
.zone-image {
    max-height: 250px;
}
.zone-badge {
    top: -4px;
    right: -4px;
    padding: .25rem .75rem; /* py-1 px-3 */
}
.zone-badge-num {
    font-size: 18px;
}
.zone-badge-text {
    font-size: 14px;
    margin-top: 0;
}
.branch-list {
    font-size: 18px;
}
.branch-icon {
    font-size: 28px;
}
.branch-gallery-icon {
    font-size: 33px;
}
.modal-branch-title {
    font-size: 24px;
}
.modal-branch-img {
    height: 300px;
}
@media (max-width: 992px) {
    /* ขนาดมือถือ */
    .font-mall-title {
         font-size: 14px;
    }
    .font-mall-center {
        font-size: 14px;
    }
    .card-product-img {
        max-height: 140px; /* ลดความสูงสูงสุดของรูป */
    }
    .card-badge {
        /* ปรับขนาดและตำแหน่งของป้ายมุมขวา */
        padding: 2px 8px;
        top: 0px;
        right: 0px;
    }
    .card-badge-num {
        font-size: 15px; /* ลดขนาดฟอนต์ตัวเลข */
        font-weight: bold;
    }
    .card-badge-text {
        font-size: 12px; /* ลดขนาดฟอนต์คำว่า "สาขา" */
        margin-top: -4px; /* ลดช่องว่างระหว่างบรรทัด */
    }
    .card-action-btn {
        font-size: 1rem; /* ลดขนาดฟอนต์ของปุ่ม fs-5 (1.25rem) -> 1rem */
        font-weight: bold;
    }
    .maill-img{
        height:80px;
    }
    .zone-image {
        max-height: 150px; /* ลดความสูงรูปภาพโซน */
    }
    .zone-badge {
        top: 0;
        right: 0;
        padding: 2px 8px; /* ลด padding ป้าย */
    }
    .zone-badge-num {
        font-size: 14px; /* ลดขนาดฟอนต์ตัวเลข */
        font-weight: bold;
    }
    .zone-badge-text {
        font-size: 12px; /* ลดขนาดฟอนต์คำว่า "สาขา" */
        margin-top: -4px;
    }

    .branch-list {
        font-size: 11px; /* ลดขนาดฟอนต์พื้นฐานของรายการสาขา */
    }
    .branch-icon {
        font-size: 16px; /* ลดขนาดไอคอน */
    }
    .branch-gallery-icon {
        font-size: 16px; /* ลดขนาดไอคอนแกลเลอรี */
    }
    .modal-branch-title {
        font-size: 16px; /* ลดขนาดฟอนต์หัวข้อใน Modal */
    }
    .modal-branch-img {
        /* ทำให้รูปใน Modal ยืดหยุ่น */
        height: auto;
        width: 100%;
        max-height: 250px;
        object-fit: cover;
    }
}


/* --- หมวดหมู่สินค้า --- */

.font-category-title {
    font-size: 22px;
}
.font-category-button {
    font-size: 16px;
}
.img-category{
    height: 180px;
}

@media (max-width: 992px) {
    .font-category-title{
        font-size: 18px;
    }
    .font-category-button {
        font-size: 14px;
    }
    .img-category{
        height: 130px;
    }
}

/* cart product */

.font-cart-product{
    font-size: 14px;
}
.font-cart-product-number{
    top:48%;
    left:30px;
}
.img-cart-product{
    width:55px;
}

.font-cart-title{
    top:20px;
    left:140px;
}

.st-cart-title{
    top:22px;
    left:140px;
}
.st-cart-price-all{
    top:85px;
    left:0px;
}
.st-cart-unit{
    top:145px;
    left:0px;
}
.st-cart-discount{
    top:203px;
    left:0px;
}
.st-cart-pay{
    top:255px;
    left:0px;
}
.st-cart-not-fee{
    top:305px;
    left:2px;
}
.st-cart-pay-button{
    bottom:4px;
    left:130px;
    padding-left:60px;
    padding-right:60px;
}


@media (max-width: 992px) {
    .font-cart-product{
         font-size: 10px;
    }
    .font-cart-product-number{
        top:48%;
        left:24px;
    }
    .img-cart-product{
        width:43px;
    }

}

@media (max-width: 429px) {
     .st-cart-title{
        top:10px;
        left:95px;
    }
    .st-cart-price-all{
        top:55px;
        left:0px;
        font-size: 20px;
    }
    .st-cart-unit{
        top:95px;
        left:0px;
        font-size: 20px;
    }
    .st-cart-discount{
        top:130px;
        left:0px;
        font-size: 20px;
    }
    .st-cart-pay{
        top:165px;
        left:0px;
        font-size: 22px;
    }
    .st-cart-not-fee{
        top:205px;
        left:2px;
    }
    .st-cart-pay-button{
        bottom:0px;
        left:75px;
        padding-left:60px;
        padding-right:60px;
    }
}


/* --- ตระกร้าสินค้า --- */
.cart-pay-img {
    width: 100%;
    max-height: 130px;
}
.cart-pay-name{
    font-size: 18px;
}
.cart-pay-title{
    font-size: 18px;
}
@media (max-width: 992px) {
    .cart-pay-name{
        font-size: 14px;
    }
    .cart-pay-img {
        width: 100%;
        max-height: 90px;
    }
    .cart-pay-title{
        font-size: 16px;
    }
}

/* --- ปุ่มสไลด์หน้ายืนยัน --- */
/* ทำให้การ scroll ลื่นขึ้นบนมือถือ (iOS) */
.horizontal-scroll-container {
  -webkit-overflow-scrolling: touch;
}

/* ปรับแต่ง Scrollbar ให้เล็กและสวยงามขึ้น (สำหรับ Chrome, Safari, Edge) */
.horizontal-scroll-container::-webkit-scrollbar {
  height: 1px; /* ความสูงของ scrollbar */
}

.horizontal-scroll-container::-webkit-scrollbar-track {
  background: #f1f1f1; /* สีพื้นหลังของ track */
}

.horizontal-scroll-container::-webkit-scrollbar-thumb {
  background: #cccccc; /* สีของตัวเลื่อน */
  border-radius: 5px;
}

.horizontal-scroll-container::-webkit-scrollbar-thumb:hover {
  background: #999999; /* สีของตัวเลื่อนเมื่อเอาเมาส์ชี้ */
}


/* --- gen --- */
.gen-img {
    width: 100%;
    max-height: 170px;
}

@media (max-width: 992px) {
    .gen-img{
        width: 100%;
        max-height: 120px;
    }
}

/* --- register --- */
.font-register-title {
    font-size: 22px;
}
.font-register-content {
    font-size: 20px;
}
@media (max-width: 992px) {
    .font-register-title {
        font-size: 16px;
    }
    .font-register-content {
        font-size: 14px;
    }
}


/* --- forgot --- */
.font-forgot-title {
    font-size: 22px;
}
.font-forgot-content {
    font-size: 16px;
}
@media (max-width: 992px) {
    .font-forgot-title {
        font-size: 16px;
    }
    .font-forgot-content {
        font-size: 14px;
    }
}


/* --- profile member --- */
.font-profile-title {
    font-size: 22px;
}
.font-profile-content {
    font-size: 20px;
}
@media (max-width: 992px) {
    .font-profile-title {
        font-size: 16px;
    }
    .font-profile-content {
        font-size: 14px;
    }
}

/* --- tracking --- */
.font-tracking-title {
    font-size: 22px;
}
.font-tracking-content {
    font-size: 20px;
}
@media (max-width: 992px) {
    .font-tracking-title {
        font-size: 16px;
    }
    .font-tracking-content {
        font-size: 14px;
    }
}

/* --- page pay status --- */
.font-status-icon {
    font-size: 80px;
}
.font-status-title {
    font-size: 22px;
}
.font-status-content {
    font-size: 20px;
}
@media (max-width: 992px) {
    .font-status-icon {
        font-size: 50px;
    }
    .font-status-title {
        font-size: 16px;
    }
    .font-status-content {
        font-size: 14px;
    }
}

/* --- address page --- */
.font-address-icon {
    font-size: 16px;
}
.font-address-title {
    font-size: 18px;
}
.font-address-content {
    font-size: 16px;
}
@media (max-width: 992px) {
    .font-address-title {
        font-size: 16px;
    }
    .font-address-content {
        font-size: 14px;
    }
    .font-address-icon {
        font-size: 13px;
    }
}

/* ปุ่ม disabled */
.disabled-div {
    pointer-events: none;
    opacity: 0.7;
    z-index: 0;
    cursor: not-allowed;
}
.disabled-div .t-disabled {
    position: absolute;
    z-index: 9999;
    background-color: #fff !important;
    color: orange !important;
}

/* pop up product */
.font-pop-up-title {
    font-size: 18px;
}
.font-pop-up-body {
    font-size: 16px;
}
.img-pop-up-v {
    width:150px;
}
.img-pop-up-p {
    height: 245px;
}
.truncate-line-pop-up{
  width: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:1; /* << กำหนดจำนวนบรรทัดที่ต้องการที่นี่ */
}
@media (max-width: 992px) {
    .font-pop-up-title {
        font-size: 14px;
    }
    .font-pop-up-body {
        font-size: 14px;
    }
    .img-pop-up-v {
        width:110px;
    }
    .img-pop-up-p {
        height: 150px;
    }
}