.card-img-wrap {
position: relative; width: 100%;
padding-top: 100%;
overflow: hidden;
background: #ffffff; }

@media (min-width: 992px) {
  .container-fluid {
    padding-left: 120px;  /* << คุณสามารถปรับค่านี้ได้ตามใจชอบ */
    padding-right: 120px; /* << คุณสามารถปรับค่านี้ได้ตามใจชอบ */
  }


/* --- 1. สไตล์ของ Container หลัก (ไม่เปลี่ยนแปลง) --- */
#slider #slider-carousel {
    position: relative !important;.mobile-cart-button
    height: 380px !important;
    background-color: #ffffff !important;
    border: 1px solid #f0f0f0 !important;
    overflow: hidden !important;
    margin-top: 55px;
}

#slider #slider-carousel .carousel-inner,
#slider #slider-carousel .carousel-inner > .item {
    height: 100% !important;
}

/* --- 2. สร้าง Layout 2 ส่วน (พร้อมการแก้ไขที่สำคัญที่สุด) --- */
.slide-content-wrapper {
    display: flex;
    height: 100%;
    width: 100%;
    

}
.container-Z {
    padding-left: 0px;  /* << คุณสามารถปรับค่านี้ได้ตามใจชอบ */
    padding-right: 0px; /* << คุณสามารถปรับค่านี้ได้ตามใจชอบ */
  }
.carousel-text-column {
    flex-basis: 60%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* จัดเนื้อหาชิดขอบบนของกล่องนี้ */

    padding-top: 2px; 
    
    /* [ KNOB 2: ปรับระยะห่างซ้าย-ขวา ] */
    padding-left: 2%;
    padding-right: 2%;
}

/* --- 4. แผงควบคุม "ส่วนที่ 2: รูปภาพ" (ไม่เปลี่ยนแปลง) --- */
.carousel-image-column {
    flex-basis: 38%;
    height: 100%; /* << สำคัญมากเมื่อใช้ align-items: stretch */
}

.carousel-image-column img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
}
/* =======================================================
   GENERAL CONTENT STYLES
   ======================================================= */

.title.text-center {
    display: inline-block; /* ทำให้ block มีขนาดพอดีกับข้อความ */
    padding: 10px 30px;    /* เพิ่มระยะห่างภายใน */
    background-color: #D32F2F; /* พื้นหลังสีแดง (สีเดียวกับ Header) */
    color: #FFFFFF;           /* ตัวอักษรสีขาว */
    font-size: 18px;
    border-radius: 10px;      /* ทำให้ขอบมนเป็นแคปซูล */
    margin-bottom: 20px;      /* เพิ่มระยะห่างจากสินค้าด้านล่าง */
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* ลบเส้นขีดข้างๆ ของเดิมออก */
.title.text-center::before,
.title.text-center::after {
    display: none;
}

/* =======================================================
   MODERN PRODUCT CARD STYLES (WITH VISIBLE BORDERS)
   ======================================================= */

/* เราจะย้าย transform และ box-shadow มาไว้ที่การ์ดหลักแทน */
.single-products {
    display: flex;
    flex-direction: column;
    height: 100%; 
    background: #fff;
    margin-bottom: 30px;

    /* --- [ส่วนที่แก้ไขและเพิ่มเติม] --- */

    /* 1. เพิ่มเส้นขอบที่ชัดเจนขึ้น */
    border: 1px solid #e9e9e9; /* สีเทาอ่อนที่มองเห็นได้ชัดเจน */

    /* 2. เพิ่มความโค้งมนที่มุมของการ์ด */
    border-radius: 8px;

    /* 3. เพิ่มเงาจางๆ เพื่อให้การ์ดดูลอยขึ้นมาเล็กน้อย */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

    /* 4. ทำให้ทุกอย่างดูสมูทเมื่อ Hover */
    transition: all 0.3s ease-in-out;
    
    /* ป้องกันไม่ให้เนื้อหาข้างในทะลุออกมาตอนทำมุมโค้ง */
    overflow: hidden; 
}

/* --- สไตล์ Hover ยังคงเหมือนเดิม --- */
/* เมื่อนำเมาส์ไปวาง จะยกระดับและเปลี่ยนสีเส้นขอบ */
.single-products:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-5px);
    border-color: #ffffcc !important; /* เปลี่ยนเป็นสีส้มของธีม */
}
  
  /* --- โค้ดเดิมของคุณ (เก็บไว้เหมือนเดิม) --- */
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid #f2f2f2;
  margin-bottom: 30px;
}

.productinfo {
    padding: 5px;
    flex-grow: 1; /* ทำให้ส่วนข้อมูลนี้ยืดขยายจนเต็มการ์ด */
    display: flex;
    flex-direction: column;
    text-align: center;
}

/* 2. จัดการรูปภาพ (ใช้โค้ดของคุณเป็นฐานและปรับปรุง) */
.productinfo img {
    width: 100%;
    height: 180px; /* ลดความสูงลงเล็กน้อยให้พอดีกับกล่องที่แคบลง */
    object-fit: contain;
    margin-bottom: 15px;
}

/* 3. จัดการส่วนเนื้อหา (ชื่อ, ราคา, ปุ่ม) */
.productinfo-content {
    flex-grow: 1; /* ทำให้ส่วนนี้ยืดเพื่อดันปุ่มลงไปอยู่ข้างล่างสุด */
}

/* 4. ปรับขนาดตัวอักษรให้เหมาะสมกับ 4 คอลัมน์ */
.productinfo h2 {
    color: #333;
    font-size: 18px; /* ลดขนาดลงให้พอดี */
    font-weight: 700;
    margin-bottom: 5px;
}

.productinfo h2 small del {
    color: #999;
    font-size: 14px; /* ลดขนาดตาม */
    font-weight: 400;
    margin-left: 8px;
}

.productinfo p {
    color: #666;
    font-size: 14px; /* ลดขนาดลงเล็กน้อย */
    line-height: 1.4;
    height: 28px; /* กำหนดความสูงคงที่ (ประมาณ 3 บรรทัด) */
    overflow: hidden; /* ซ่อนข้อความที่ยาวเกิน */
    margin-bottom: 15px;
}

/* 5. จัดสไตล์ปุ่ม Add to Cart */
.productinfo .add-to-cart {
    margin-top: auto; /* [เวทมนตร์] ดันปุ่มนี้ลงไปอยู่ล่างสุดของการ์ดเสมอ */
    background: #FE980F;
    color: #FFFFFF;
    border: none;
    padding: 8px 20px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.productinfo .add-to-cart:hover {
    background: #e68a0d;
}

.add-to-cart {
    background: #e74c3c; /* โค้ดสีแดง (สามารถเปลี่ยนเป็นเฉดสีแดงอื่นได้) */
    color: #ffffff;      /* เปลี่ยนสีตัวอักษรเป็นสีขาวเพื่อให้อ่านง่าย */
    border: none;
    border-radius: 5px;  /* ปรับความโค้งของขอบ */
    padding: 10px 20px;
    font-weight: 700;
    transition: all 0.3s ease;
}

/* สถานะเมื่อนำเมาส์ไปวาง (Hover) */
.add-to-cart:hover {
    background: #c0392b; /* ทำให้สีแดงเข้มขึ้นเมื่อนำเมาส์ไปวาง */
    color: #ffffff;
}

/* --- กรณีพิเศษ: ปุ่มภายใน Product Overlay --- */
/* ถ้าต้องการให้ปุ่มใน overlay แตกต่าง สามารถปรับแก้ส่วนนี้ได้ */
.product-overlay .overlay-content .add-to-cart {
    background: #ffffff; /* ปัจจุบันเป็นสีขาว */
    color: #e74c3c;      /* ตัวอักษรสีแดง */
}

.product-overlay .overlay-content .add-to-cart:hover {
    background: #f0f0f0; /* สีขาวที่เข้มขึ้นเล็กน้อย */
}
/* ลบส่วนที่ไม่จำเป็นออกจากการ์ด */
.single-products .choose {
    display: none;
}
.left-sidebar .category-products {
    background: #ffffff;
    border: 1px solid #e9e9e9;
    border-radius: 8px; /* ทำให้ขอบมน */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07); /* เพิ่มเงาเล็กน้อย */
    padding: 20px;
    margin-bottom: 30px;
}

/* --- 2. หัวข้อ "CATEGORY" --- */
.left-sidebar h2 {
    /* --- ล้างสไตล์เก่าของ Template --- */
    padding: 5px 5px !important;
    margin: 0 0 0px 0 !important;
    text-align: left !important; /* จัดชิดซ้าย */
    position: relative !important;
    
    /* --- กำหนดสไตล์ใหม่ที่ต้องการ --- */
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    border-bottom: 2px solid #FE980F; /* เส้นใต้สีส้ม */
}

/* --- กำจัดเส้นตกแต่งที่ไม่ต้องการ ที่มาจาก Template --- */
.left-sidebar h2::before,
.left-sidebar h2::after {
    display: none !important;
}

/* --- 3. รายการเมนูหมวดหมู่ --- */
.category-menu {
  width: 100%;
}
.category-menu li a {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.category-menu li {
  border-bottom: 1px solid #eee;
}

.category-menu li:last-child {
  border-bottom: none;
}

.category-menu li a {
  display: block;
  padding: 5px 5px;
  font-size: 19px !important;
    font-family: 'Noto Sans Lao', sans-serif;
  color: #444;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
  background-color: transparent;
}

.category-menu li a:hover {
  background-color: #ffe5e5;     /* พื้นหลังแดงอ่อน */
  color: #d60000;                /* ตัวอักษรแดงเข้ม */
  transform: translateX(5px);    /* ขยับเล็กน้อยเพื่อความนุ่มนวล */
}

.category-menu li a.active {
  background-color: #fdf5e7;
  color: #FE980F;
  font-weight: bold;
}

.left-sidebar .category-menu .submenu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: none; /* <--- ตัวนี้หายไปจาก CSS ล่าสุด */
    background-color: #f9f9f9;
    border-top: 1px solid #f0f0f0;
}

/* เดิมที่คุณเคยให้ไว้ และควรจะมี */
.left-sidebar .category-menu li.has-submenu > a .fa-angle-down {
    margin-left: auto;
    transition: transform 0.3s ease;
}
.left-sidebar .category-menu li.has-submenu.active > a .fa-angle-down {
    transform: rotate(180deg);
}

.mobile-cart-button {
    display: none; /* 1. ซ่อนไว้เป็นค่าเริ่มต้น */
    position: fixed;
    bottom: 420px;
    right: 20px;
    width: 60px;
    height: 60px;
    background-color: #cc0033; /* สีส้มเดียวกับเว็บ */
    color: #FFFFFF;
    border-radius: 50%;
    text-align: center;
    font-size: 24px;
    line-height: 60px;
    z-index: 1030;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    transition: all 0.3s;
}

.mobile-cart-button:hover {
    color: #FFFFFF;
    transform: scale(1.1);
}

.badge-count {
    background-color: #ff3b30; /* ສີແດງ */
    color: white;               /* ຕົວເລກສີຂາວ */
    border-radius: 50%;         /* ເຮັດໃຫ້ເປັນວົງມົນ */
    min-width: 24px;            /* ຄວາມກວ້າງຕ່ຳສຸດ */
    height: 24px;               /* ຄວາມສູງ */
    display: inline-flex;       /* ຈັດວາງໃຫ້ຢູ່ແຖວດຽວກັນ */
    align-items: center;        /* ເຮັດໃຫ້ຕົວເລກຢູ່ເຄິ່ງກາງທາງຕັ້ງ */
    justify-content: center;    /* ເຮັດໃຫ້ຕົວເລກຢູ່ເຄິ່ງກາງທາງນອນ */
    font-size: 14px;            /* ຂະໜາດຕົວເລກ */
    font-weight: bold;          /* ເຮັດໃຫ້ຕົວເລກເຂັ້ມ */
    margin-left: 8px;           /* ໄລຍະຫ່າງຈາກຂໍ້ຄວາມ */
    vertical-align: middle;     /* ຈັດໃຫ້ຢູ່ລະດັບດຽວກັນກັບຕົວໜັງສື */
    line-height: 1;             /* ປັບຄວາມສູງຂອງແຖວບໍ່ໃຫ້ຕົວເລກເຄື່ອນ */
}
.cart-count-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #D9534F; /* สีแดง */
    color: white;
    border-radius: 50%;
    padding: 2px 7px;
    font-size: 12px;
    font-weight: bold;
    border: 2px solid white;
}

/* 2. ใช้ Media Query เพื่อแสดงผลเฉพาะบนจอมือถือ (ความกว้างน้อยกว่า 768px) */
@media (max-width: 767px) {
    .mobile-cart-button {
        display: block;
    }
}





#categoryModal .modal-dialog {
    width: 90% !important;
    max-width: 1200px !important; /* ขยายเพิ่มเล็กน้อย */
    margin: 30px auto;
}
#categoryModal .modal-content {
    border-radius: 8px;
    border: none;
    box-shadow: 0 5px 25px rgba(0,0,0,0.2);
}
#categoryModal .modal-header {
    background-color: #C12E2A; /* ปรับสีให้ดูทันสมัยขึ้น */
    color: #ffffff;
    border-bottom: none;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    padding: 15px 25px;
}
#categoryModal .modal-header .modal-title {
    font-weight: 600;
}
#categoryModal .modal-header .close {
    color: #ffffff;
    opacity: 0.9;
    text-shadow: none;
}

/* --- 2. Layout หลักภายใน Modal --- */
#categoryModal .modal-body {
    padding: 0;
    background-color: #f4f6f9; /* สีพื้นหลังเทาอ่อน */
}
#categoryModal .modal-body .row {
    margin: 0;
}

/* ========================= */
/* 1. Modal Container        */
/* ========================= */
.modal-content {
    border-radius: 12px;
    overflow: hidden;
    border: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    background-color: #fff;
    animation: fadeIn 0.3s ease-in-out;
}

/* ========================= */
/* 2. Sidebar (หมวดหมู่หลัก) */
/* ========================= */
.category-modal-sidebar {
    background-color: #fdfdfd;
    padding: 20px 0;
    height: 65vh;
    min-height: 500px;
    overflow-y: auto;
    border-right: 1px solid #eee;
}

.category-modal-sidebar .nav-pills > li > a {
    border-radius: 0;
    color: #444;
    padding: 12px 25px;
    font-size: 15px;
    transition: all 0.2s ease;
    border-left: 4px solid transparent;
}

.category-modal-sidebar .nav-pills > li > a:hover {
    background-color: #f0f4f8;
}

.category-modal-sidebar .nav-pills > li.active > a,
.category-modal-sidebar .nav-pills > li.active > a:hover,
.category-modal-sidebar .nav-pills > li.active > a:focus {
    background-color: #e6f2ff;
    color: #007bff;
    font-weight: 600;
    border-left-color: #007bff;
}

/* ========================= */
/* 3. Content Area (ขวา)     */
/* ========================= */
.category-modal-content-area {
    padding: 0;
    height: 65vh;
    min-height: 600px;
    display: flex;
    flex-direction: column;
    background-color: #fafafa;
}

/* ========================= */
/* 4. Sub-category Bar       */
/* ========================= */
.sub-category-bar {
    padding: 20px 25px;
    border-bottom: 1px solid #dee2e6;
    background-color: #ffffff;
    flex-shrink: 0;
    font-weight: 500;
    font-size: 16px;
    color: #333;
}

/* ========================= */
/* 5. Product Grid           */
/* ========================= */
.product-grid-container {
    padding: 25px;
    overflow-y: auto;
    flex-grow: 1;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 25px;
}

/* ========================= */
/* 6. Product Card           */
/* ========================= */
.product-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    padding: 15px;
    position: relative;
    transition: transform 0.2s ease;
}

.product-card:hover {
    transform: translateY(-4px);
}

.product-card img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    object-fit: cover;
}

/* ========================= */
/* 7. Sale Badge             */
/* ========================= */
.sale-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 10;
    background: #e74c3c;
    color: #ffffff;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 5px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* ========================= */
/* 8. Loading Spinner        */
/* ========================= */
#modal-loading-indicator {
    position: absolute;
    top: 57px;
    left: 25%;
    right: 0;
    bottom: 0;
    background-color: rgba(244, 246, 249, 0.8);
    z-index: 1051;
    display: none;
    align-items: center;
    justify-content: center;
}

/* ========================= */
/* 9. Testimonial Container  */
/* ========================= */
.testimonial-container {
    width: 100%;
    max-width: 900px;
    margin: 20px auto;
    padding: 10px;
}

/* ========================= */
/* 10. Animation             */
/* ========================= */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}


/* สไตล์ของการ์ดแต่ละใบ */
.testimonial-card {
    background-color: #ffffff; /* สีพื้นหลังของการ์ด */
    border-radius: 12px;       /* ทำให้ขอบมน */
    padding: 25px 30px;        /* ระยะห่างภายใน */
    margin-bottom: 25px;       /* ระยะห่างระหว่างการ์ด */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* เพิ่มเงาให้ดูมีมิติ */
    border: 1px solid #e9e9e9;
    transition: transform 0.3s ease;
}

.testimonial-card:hover {
    transform: translateY(-5px); /* ทำให้การ์ดลอยขึ้นเล็กน้อยเมื่อเมาส์ชี้ */
}

/* ส่วนของเนื้อหาคำติชม */
.testimonial-body {
    position: relative;
    padding-left: 50px; /* เว้นที่ให้อเครื่องหมายคำพูด */
    margin-bottom: 20px;
}

/* ไอคอนเครื่องหมายคำพูดใหญ่ๆ */
.testimonial-quote-icon {
    position: absolute;
    left: 0;
    top: -10px;
    font-size: 48px; /* ขนาดของไอคอน */
    color: #f0ad4e;  /* สีของไอคอน (สีส้มเดียวกับขอบเก่า) */
    opacity: 0.5;
}

/* ข้อความคำติชม */
.testimonial-text {
    font-size: 16px;
    color: #555;
    line-height: 1.6;
    font-style: italic;
}

/* ส่วนข้อมูลผู้เขียน */
.testimonial-author-info {
    display: flex;       /* ทำให้ไอคอนกับชื่อเรียงข้างกัน */
    align-items: center; /* จัดให้อยู่กึ่งกลางแนวตั้ง */
    border-top: 1px solid #f0f0f0;
    padding-top: 15px;
}

/* ไอคอนรูปคน */
.author-icon .fa-user-circle {
    font-size: 45px;      /* ขนาดไอคอนรูปคน */
    color: #cccccc;       /* สีไอคอนรูปคน */
    margin-right: 15px;   /* ระยะห่างจากชื่อ */
}

/* กล่องเก็บชื่อและวันที่ */
.author-details {
    display: flex;
    flex-direction: column; /* ทำให้ชื่อกับวันที่เรียงบน-ล่าง */
}

/* ชื่อผู้เขียน */
.author-name {
    font-weight: bold;
    font-size: 15px;
    color: #333;
}

/* วันที่ส่ง */
.testimonial-date {
    font-size: 13px;
    color: #888;
}
.cart-icon-container {
  position: relative;
}

.cart-count-badge {
  position: absolute;
  top: 5px;       /* ปรับตำแหน่งแนวตั้ง */
  right: -5px;    /* ปรับตำแหน่งแนวนอน */
  width: 20px;
  height: 20px;
  background-color: #FE980F; /* สีส้มเดียวกับเว็บ */
  color: white;
  border-radius: 50%;
  font-size: 11px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid white;
}
.cart-qty-span {
    background-color: #FE980F; /* สีพื้นหลัง (สีส้มเดียวกับของเดิม) */
    color: white;             /* สีตัวอักษร */
    border-radius: 50%;       /* ทำให้เป็นวงกลม */
    
    /* ปรับขนาดและตำแหน่งให้สวยงาม */
    padding: 2px 9px;         /* เพิ่มพื้นที่ภายใน (แนวตั้ง แนวนอน) */
    font-size: 10px;          /* ขนาดตัวอักษร */
    font-weight: bold;        /* ทำให้เป็นตัวหนา */
    margin-left: 5px;         /* [สำคัญ!] เพิ่มระยะห่างจากคำว่า "Cart" */
    
    /* เทคนิคเพิ่มเติมเพื่อให้แสดงผลได้ดี */
    vertical-align: top;      /* จัดตำแหน่งให้อยู่สูงขึ้นเล็กน้อย จะได้ดูสมดุล */
    display: inline-block;    /* ทำให้ padding และ margin ทำงานได้ถูกต้อง */
}
.cart-badge {
  position: absolute;
  top: -5px;       /* ปรับตำแหน่งแนวตั้ง */
  right: 45px;    /* ปรับตำแหน่งแนวนอน */
  width: 20px;
  height: 20px;
  background-color: #FE980F; /* สีส้มเดียวกับเว็บ */
  color: white;
  border-radius: 50%;
  font-size: 11px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid white;
}



/* --- 2. สไตล์สำหรับตะกร้าย่อ (Mini-Cart Dropdown) --- */
.mini-cart-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  width: 350px;
  background-color: #ffffff;
  border: 1px solid #e5e5e5;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 1001;
  padding: 15px;
  display: none; /* << ซ่อนไว้ก่อน */
  text-align: left;
}

.mini-cart-items {
    list-style: none;
    padding: 0 10px;
    margin: 0;
    max-height: 250px;
    overflow-y: auto;
}
.mini-cart-item {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}
.mini-cart-item:last-child {
    border-bottom: none;
}
.mini-cart-item-img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 4px;
    margin-right: 10px;
}
.mini-cart-item-details {
    flex-grow: 1; /* ทำให้รายละเอียดขยายเต็มพื้นที่ที่เหลือ */
    display: flex;
    flex-direction: column;
}
.mini-cart-item-details .item-name {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    /* ป้องกันชื่อยาวเกินไป */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px; /* ปรับขนาดได้ตามความเหมาะสม */
}
.mini-cart-item-details .item-qty {
    font-size: 12px;
    color: #777;
}
.mini-cart-remove-item {
    color: #d9534f; /* สีแดงสำหรับปุ่มลบ */
    font-size: 16px;
    padding: 5px;
    margin-left: 10px;
}
.mini-cart-remove-item:hover {
    color: #c9302c;
    cursor: pointer;
}













/* << คำสั่งสำคัญ: ให้แสดง Dropdown เมื่อเอาเมาส์ชี้ >> */
.cart-icon-container:hover .mini-cart-dropdown {
  display: block;
}
.cart-header {
  padding-left: 20px;
}
.mini-cart-header {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}

ul.mini-cart-items {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 300px; /* จำกัดความสูง ถ้าสินค้าเยอะจะมี scrollbar */
  overflow-y: auto;
}

ul.mini-cart-items li {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
}

ul.mini-cart-items li:last-child {
  border-bottom: none;
}

ul.mini-cart-items img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  margin-right: 15px;
  border: 1px solid #eee;
}

.item-details .item-name {
  font-size: 14px;
  color: #333;
  margin-bottom: 5px;
  line-height: 1.3;
}

.item-details .item-price {
  font-size: 13px;
  color: #888;
}

.mini-cart-summary {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #f0f0f0;
}

.summary-total {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  font-weight: bold;
  color: #FE980F;
  margin-bottom: 15px;
}

.btn-view-cart {
  display: block;
  width: 100%;
  padding: 12px;
  background-color: #ff0000;
  color: white !important;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  border-radius: 3px;
}
.box {
  height: 200px;
}
.btn-view-cart:hover {
  background-color: #ff3300;
  color: white !important;
}
#floating-cat-button {
    display: none; /* ซ่อนไว้ก่อนเป็นค่าเริ่มต้น */
    position: fixed; /* ทำให้ลอยอยู่กับที่ */
    left: 15px;
    bottom: 80px; /* ปรับตำแหน่งสูง-ต่ำตามต้องการ */
    z-index: 998;
    background-color: #FE980F; /* สีส้ม */
    color: white;
    padding: 10px 15px;
    border-radius: 30px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    font-size: 14px;
    align-items: center;
    text-decoration: none;
    transition: all 0.2s ease;
}
#floating-cat-button:hover {
    background-color: #e6890d;
}
#floating-cat-button i {
    margin-right: 8px;
}

/* --- 2. สไตล์ของ "เมนูที่สไลด์ออกมา" --- */
#slideout-category-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px; /* ความกว้างของเมนู */
    height: 100%;
    background-color: #FFFFFF;
    box-shadow: 2px 0 10px rgba(0,0,0,0.1);
    z-index: 1000;
    overflow-y: auto; /* ทำให้เลื่อนได้ถ้าเนื้อหายาว */
    padding: 20px;
    transform: translateX(-100%); /* ซ่อนไว้นอกจอด้านซ้าย */
    transition: transform 0.3s ease-in-out; /* เอฟเฟกต์ตอนเลื่อน */
}
/* เมื่อมี class 'open' ให้เลื่อนเมนูกลับเข้ามาในจอ */
#slideout-category-menu.open {
    transform: translateX(0);
}
.slideout-close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 30px;
    color: #333;
    text-decoration: none;
}

/* --- 3. สไตล์ของ "พื้นหลังสีดำ" --- */
#slideout-menu-overlay {
    display: none; /* ซ่อนไว้ก่อน */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 999;
}
/* เมื่อมี class 'active' ให้แสดงพื้นหลัง */
#slideout-menu-overlay.active {
    display: block;
}


/* --- 4. Responsive (จุดที่สำคัญที่สุด!) --- */

.floating-category-btn {
    position: fixed; /* ทำให้ลอยอยู่กับที่ */
    bottom: 310px;    /* ห่างจากขอบล่าง 80px */
    right: 20px;     /* ห่างจากขอบขวา 15px */
    z-index: 1000;   /* ทำให้ลอยอยู่เหนือองค์ประกอบอื่น */
    
    background-color: #cc0033; /* สีส้ม */
    color: #FFFFFF;           /* ตัวอักษรสีขาว */
    
    width: 60px;       /* ความกว้าง */
    height: 60px;      /* ความสูง */
    border-radius: 50%; /* ทำให้เป็นวงกลม */
    
    display: none; /* [สำคัญ!] ซ่อนปุ่มนี้ไว้ก่อนเป็นค่าเริ่มต้น */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    
    font-size: 12px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
}

.floating-category-btn i {
    font-size: 20px;
    line-height: 1;
}

.floating-category-btn:hover {
    color: #FFFFFF;
    transform: scale(1.1);
}


/* --- 2. คำสั่งให้แสดงปุ่มนี้ "เฉพาะบนจอมือถือ" --- */
@media (max-width: 767px) {
    .floating-category-btn {
        display: flex; /* เปลี่ยนจาก none เป็น flex เพื่อให้ปุ่มแสดงผล */
    }
    
    /* [โบนัส] ซ่อน Sidebar เดิมทางซ้ายเมื่อเป็นจอมือถือ เพื่อไม่ให้ซ้ำซ้อน */
    .left-sidebar {
        display: none;
    }
    .main-content-area { /* สร้าง class นี้ขึ้นมาใหม่ */
        width: 100%; /* ทำให้เนื้อหาหลักขยายเต็มจอเมื่อไม่มี sidebar */
    }
}
.modal-sidebar {
    border-right: 1px solid #eeeeee;
    max-height: 70vh; /* จำกัดความสูงของคอลัมน์ */
    overflow-y: auto; /* ทำให้ Scroll ได้ถ้าหมวดหมู่เยอะ */
}
.modal-main-content {
    max-height: 70vh; /* จำกัดความสูงของคอลัมน์ */
    overflow-y: auto; /* ทำให้ Scroll ได้ถ้าสินค้าเยอะ */
}

/* ทำให้หมวดหมู่ย่อยแสดงผลสวยงาม */
.sub-category-container {
    padding: 0 15px 15px 15px;
    border-bottom: 1px solid #eeeeee;
    margin-bottom: 15px;
}
.sub-category-container a {
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-right: 5px;
    margin-bottom: 5px;
    color: #333;
}
.sub-category-container a.active,
.sub-category-container a:hover {
    background-color: #FE980F;
    color: #fff;
    border-color: #FE980F;
    text-decoration: none;
}
#sticky-header-wrapper {
    /* --- คำสั่งหลัก --- */
    position: sticky; /* ทำให้ element นี้เป็นแบบ sticky */
    top: 0;           /* ให้เริ่มติดหนึบเมื่อขอบบนของมันชนกับขอบบนของจอ */
    
    /* --- คำสั่งเสริมที่สำคัญมาก --- */
    z-index: 1000;    /* กำหนดค่า z-index สูงๆ เพื่อให้มันลอยอยู่ "เหนือ" เนื้อหาอื่นๆ ทั้งหมด */
    background-color: #ffffff; /* กำหนดสีพื้นหลังเป็นสีขาว (หรือสีเดียวกับ header) ป้องกันเนื้อหาเว็บทะลุขึ้นมาตอน scroll */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* (ทางเลือก) เพิ่มเงาจางๆ ตอนที่มันติดหนึบ จะดูสวยขึ้น */
}
@media (max-width: 767px) {

    /* 
      เราจะสั่งให้ .single-products กลับมามีสไตล์เหมือนเดิม
      ถึงแม้จะถูก Template เดิมรีเซ็ตไปก็ตาม 
    */
    .single-products {
        /* นำสไตล์ที่เราต้องการกลับมาทั้งหมด */
        border: 1px solid #e9e9e9 !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
        
        /* ปรับระยะห่างด้านล่างสำหรับมือถือให้พอดี */
        margin-bottom: 20px !important;
    }

    /* ไม่ต้องมี hover effect บนมือถือ เพราะไม่มีเมาส์ */
    .single-products:hover {
        transform: none !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important; /* ทำให้เงาเหมือนเดิม */
    }
/* 
==============================================
== Custom CSS for Login/Signup Modal ==
==============================================
*/

/* ปรับปรุงภาพรวมของ Modal Body */
#smyModal .modal-body {
    padding: 15px 30px 30px 30px; /* เพิ่มระยะห่างด้านข้างและด้านล่าง */
}

/* === สไตล์สำหรับส่วน "ล็อกอินแล้ว" (Logged-in View) === */

.logged-in-view {
    text-align: center;
}

/* ไอคอนรูปคน (Avatar) */
.total-price {
    display: inline-block;
    margin-right: 4px; /* ระยะห่างเล็กน้อยก่อน LAK */
}

.currency {
    font-weight: normal;
    font-size: 0.95em;
    color: #555;
}

@media (max-width: 767px) {
    /* ทำให้แต่ละส่วนของ footer มีระยะห่างเมื่อเรียงเป็นแนวตั้ง */
    .footer-section .footer-widget {
        margin-bottom: 10px;
    }
    
    /* ทำให้หัวข้อที่พับได้ สามารถคลิกได้ */
    .footer-widget .widget-title[data-toggle="collapse"] {
        position: relative;
        display: block;
        cursor: pointer;
        color: #fff; /* ทำให้สีเหมือนเดิม */
        text-decoration: none; /* เอาขีดเส้นใต้ลิงก์ออก */
    }

    /* เพิ่มไอคอน '+' หรือ '-' ด้านขวาของหัวข้อ */
    .footer-widget .widget-title[data-toggle="collapse"]::after {
        content: '\f067'; /* ไอคอน + ของ FontAwesome */
        font-family: FontAwesome;
        position: absolute;
        right: 5px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 14px;
        transition: transform 0.3s ease;
    }

    /* เมื่อเมนูถูกเปิด ให้เปลี่ยนไอคอนเป็น '-' */
    .footer-widget .widget-title[data-toggle="collapse"]:not(.collapsed)::after {
        content: '\f068'; /* ไอคอน - ของ FontAwesome */
        transform: translateY(-50%) rotate(180deg);
    }

    /* สไตล์ของ ul ที่ถูกซ่อน/แสดง */
    .footer-widget ul.collapse {
        margin-top: 15px; /* เพิ่มระยะห่างจากหัวข้อ */
    }
    .footer-widget ul.collapse.in {
        /* Bootstrap จะจัดการการแสดงผลเอง */
    }
}
@media (max-width: 767px) {
    .view-more-link {
        padding-right: 15px;  /* เพิ่มระยะห่างจากขอบขวา 15px */
        font-size: 12px;      /* ลดขนาดตัวหนังสือลงนิดหน่อยเพื่อให้พอดี */
        white-space: nowrap;  /* บังคับไม่ให้ข้อความตัดลงบรรทัดใหม่ */
    }
    
    /* หรือถ้ามันยังชิดเกินไป ให้ปรับที่ Container แม่ของมัน (ถ้ามี class นี้) */
    .section-header, .features_items h2 {
        padding-right: 15px;
    }
}
@media (max-width: 768px) {
    /* เพิ่มพื้นที่ว่างด้านล่างใน Modal Category */
    #categoryModal .modal-body {
        padding-bottom: 40px !important; /* 60px (ความสูงเมนู) + 20px (เผื่อไว้) */
    }

    /* หรือถ้าอยากดันเฉพาะส่วนปุ่มเลขหน้า */
    #modal-pagination-wrapper {
        padding-bottom: 40px; 
        display: block; /* มั่นใจว่าเป็น block เพื่อให้ padding ทำงาน */
    }
}