/* --- 1. Fonts & Base --- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@300;400;500;700&display=swap');
/* ควบคุมไม่ให้เนื้อหายืดเกินไปบนจอ 34 นิ้ว */
#main, .container {
    max-width: 1200px; /* หรือ 1320px ตามความชอบ */
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}


/* 1. ล็อคความกว้างส่วน Header และเนื้อหาทั้งหมด */
#header .container, 
#header .container-md,
#wrapper, 
#content-wrapper,
#notifications .container,
#footer .container {
    max-width: 1320px !important; 
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    float: none !important;
}

/* 2. แก้ไข Slider ที่หลุดขอบ (สำคัญมาก) */
#home-slider, .ratio-homeSlider {
    height: 460px !important;
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    left: 0 !important;
    right: 0 !important;
}

/* 3. ปรับรูปภาพใน Slider ไม่ให้ยืดจนแตก */
#home-slider .carousel-item img {
    width: 100% !important;
    /*height: auto !important;*/
    object-fit: contain; /* เปลี่ยนเป็น contain เพื่อให้เห็นรูปครบถ้วนไม่โดนตัด */
    background-color: #fff; /* ใส่พื้นหลังขาวกันขอบดำ */
}



/* 4. ปลดล็อค Header ส่วนที่เคยตั้งไว้ 99% ในบรรทัดที่ 18-26 */
.header-nav .container-md,
.header-top .container-md,
.header-bottom .container-md {
    max-width: 1320px !important;
    width: 100% !important;
}

/* ล็อคความกว้างของ Header ให้กลับมาอยู่ตรงกลางจอ */
.header-top .container-md {
    max-width: 1320px !important; /* หรือ 1200px ให้เท่ากับเนื้อหา */
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
}


/* ป้องกันโลโก้ยืดขนาดใหญ่เกินไป */
.logo-section .logo {
    max-width: 250px !important; /* ปรับขนาดความกว้างโลโก้ตามต้องการ */
    height: auto !important;
}

/* จัดระเบียบ Wrapper ด้านในให้เว้นระยะห่างสวยงาม */
.header-main-wrapper {
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}


body,
html,
.header-nav,
.header-top,
.store-dropdown,
button,
input {
    font-family: 'Noto Sans Thai', sans-serif !important;
}

/* เปลี่ยน container-md ให้กว้างเกือบเต็มหน้าจอ */
.header-nav .container-md,
.header-top .container-md,
.header-bottom .container-md {
    max-width: 1320px !important; /* ปรับเป็น 100% ถ้าอยากให้ชนขอบเป๊ะ */
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin:0 auto !important;
    
}

/* บังคับให้ Wrapper หลักขยายตัวตาม Container ที่เราปลดล็อค */
.header-main-wrapper {
    display: flex !important;
    width: 100% !important;
    justify-content: space-between !important;
    gap: 20px !important; /* ระยะห่างขั้นต่ำระหว่าง Logo กับ Search */
}

/* --- 2. Top Bar (header-nav) --- */
.header-nav {
    background: #000;
    color: #fff;
    padding: 12px 0;
    font-size: 14px;
    border-bottom: 1px solid #222;
}

.nav-wrapper {
    flex-wrap: nowrap;
}

.contact-group {
    gap: 25px;
    white-space: nowrap;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.contact-item i {
    font-size: 14px;
}

.nav-divider {
    width: 1px;
    height: 16px;
    background: #444;
    margin: 0 5px;
}

/* Store Locator & Arrow */
.store-locator-trigger {
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    white-space: nowrap;
    transition: color 0.3s ease;
}

.store-locator-wrapper:hover .store-locator-trigger,
.store-locator-wrapper.is-open .store-locator-trigger {
    color: #d10000 !important;
}

.arrow-icon {
    transition: transform 0.3s ease;
    margin-left: 5px;
    font-size: 14px;
}

.store-locator-wrapper:hover .arrow-icon,
.store-locator-wrapper.is-open .arrow-icon {
    transform: rotate(90deg);
}

/* --- 3. Dropdown Menu --- */
.store-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    width: 370px;
    height: 300px;
    background: #fff;
    color: #333;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    border-radius: 50px;
    z-index: 9999;
    padding: 25px;
    margin-top: 15px;
    text-align: left;
}

.store-dropdown::before {
    content: "";
    position: absolute;
    top: -20px;
    left: 0;
    width: 100%;
    height: 25px;
    background: transparent;
}

.store-locator-wrapper:hover .store-dropdown,
.store-locator-wrapper.is-open .store-dropdown {
    display: block;
    animation: fadeIn 0.3s ease;
}

.store-title {
    color: #000;
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 10px;
}

.store-detail-scroll {
    max-height: 200px;
    overflow-y: auto;
    padding-right: 10px;
}

.store-detail {
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 5px;
    transition: background 0.2s;
}

.store-detail:hover {
    background: #f5f5f5;
}

.store-hours {
    font-size: 14px;
    color: #666;
}

.btn-all-stores {
    display: block;
    background: #d10000;
    color: #fff !important;
    text-align: center;
    padding: 12px;
    border-radius: 8px;
    margin-top: 0px;
    text-decoration: none;
    font-weight: 500;
}

/* --- 4. Main Header (Advanced Flexbox Full-Width) --- */
.header-top {
    background: #fff;
    padding: 10px 0 15px 0;
}

/* บังคับ Wrapper หลักให้เป็น Flex */
.header-main-wrapper {
    display: flex !important;
    width: 100%;
    gap: 100px;
    /* ระยะห่างระหว่าง Logo - Search - Cart */
}

/* ส่วนของ Logo: ให้กว้างเท่าขนาดภาพ ไม่ต้องยืด */
.logo-section {
    flex-shrink: 0;
}

.logo {
    width: 151px !important;
    height: 50px !important;
    margin-top: 5px !important;
    display: block;
}

/* ส่วนของ Search: บังคับให้ยืดตัว (Flex-Grow) เพื่อกินพื้นที่ว่างทั้งหมด */
.search-container {
    flex-grow: 1;
    /* หัวใจหลัก: สั่งให้ขยายเต็มพื้นที่ที่เหลือ */
    margin-top: 5px !important;
    min-width: 200px;
    /* ป้องกันการหดจนมองไม่เห็น */
}

#search_widget {
    width: 90% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    /* margin auto ซ้าย-ขวา คือการดึงให้อยู่กลาง */
    margin-right: auto !important;
}

#search_widget form {
    display: flex !important;
    width: 100% !important;
    position: relative;
}

/* --- บังคับแก้ไขช่อง Input ให้เป็นสีขาวและโค้ง 50px --- */

/* 2. บังคับตัว Input (ใช้ Selector หลายชั้นเพื่อให้ชนะทุกกฎ) */
/* --- บังคับแก้ไขระยะห่าง (Padding) ให้เห็นผลจริง --- */
#header .header-top #search_widget form input[type="text"],
#header .header-top #search_widget input.ui-autocomplete-input,
div#search_widget input[name="s"] {
    width: 100% !important;
    height: 42px !important;

    /* ใช้โครงสร้าง: padding: [บน] [ขวา] [ล่าง] [ซ้าย] !important;
       เปลี่ยนค่าตัวสุดท้าย (ซ้าย) จากเดิม 25px เป็น 50px หรือมากกว่า
       เพื่อให้ห่างจากแว่นขยายที่คุณต้องการ
    */
    padding: 0 50px 0 55px !important;

    background: #ffffff !important;
    background-color: #ffffff !important;
    border-radius: 50px !important;
    border: 1px solid #e0e0e0 !important;

    /* ล้างสไตล์ส่วนเกิน */
    box-shadow: none !important;
    outline: none !important;
    font-size: 14px !important;
    color: #333 !important;
}

/* บังคับขนาดไอคอนแว่นขยาย */
#search_widget button[type="submit"] i.material-icons {
    font-size: 24px !important;
    color: #666 !important;
}

/* ส่วนของไอคอน: ไม่ต้องยืด */
.icon-group-section {
    flex-shrink: 0;
    white-space: nowrap;
}

.icon-group-section i {
    font-size: 28px;
    color: #333;
}

/* --- 1. จัดการปุ่ม Login (ซ่อนคำว่า Sign in) --- */
.user-info a span:not(.material-icons) {
    display: none !important;
    /* ซ่อนข้อความทั้งหมดที่อยู่ใน span แต่ไม่ซ่อนไอคอน */
}

.user-info a {
    font-size: 0 !important;
    /* บังคับลบตัวหนังสือที่อาจหลุดรอด */
    display: flex !important;
    align-items: center !important;
    /* กึ่งกลางแนวตั้ง */
    justify-content: center !important;
    /* กึ่งกลางแนวนอน */
    padding: 0 !important;
    /* ล้างค่า padding เดิมที่อาจทำให้เบี้ยว */
    /* ดึงค่าขนาดวงกลมจากส่วนที่ 5 มาเช็คให้มั่นใจ */
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
}

/* บังคับไม่ให้ตัวไอคอนมี margin ส่วนเกิน */
.user-info a .material-icons {
    margin: 0 !important;
    display: block !important;
}

/* --- 5. คลีนปุ่มรถเข็น (ลบคำว่า รถเข็น ออกแบบ 100%) --- */

/* สั่งซ่อน Class ที่คุณตรวจเจอ (header-block__title) ให้หายไปเลย */
#header-icons-wrapper .header-block__title {
    display: none !important;
}

/* จัดระเบียบไอคอนและตัวเลขให้เรียงกันสวยๆ */
#header-icons-wrapper .header-block {
    display: flex !important;
    align-items: center;

}

/* ตรวจเช็คขนาดไอคอนรถเข็นและคน */
#header-icons-wrapper .material-icons {
    font-size: 28px !important;
    color: #333 !important;
}

/* 1. บังคับระยะห่างระหว่างกลุ่มไอคอน (คน กับ รถเข็น) */
#header-icons-wrapper .header-block {
    margin-right: 20px !important;
    /* เว้นระยะห่างด้านขวาของแต่ละบล็อก */
    display: inline-flex !important;
}

/* 1. สร้างวงกลมล้อมรอบปุ่ม Login และ ปุ่มรถเข็น (ปรับตาม HTML ของคุณ) */
#header-icons-wrapper .user-info a,
#header-icons-wrapper .header-block__action-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px !important;
    height: 44px !important;
    background: #f8f9fa !important;
    border: 1px solid #eeeeee !important;
    border-radius: 50% !important;
    transition: all 0.3s ease !important;
    cursor: pointer;
    position: relative;
    /* สำคัญมาก: เพื่อให้เลข 0 เกาะกับวงกลมนี้ */
}

/* 2. ล้างค่าพื้นหลังและ Padding ของ Wrapper ชั้นนอกที่ขวางอยู่ */
#header-icons-wrapper .blockcart,
#header-icons-wrapper .header-block {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    width: auto !important;
}

/* 3. จัดการเลข 0 ให้มาชิดด้านขวาของวงกลม (ตามที่คุณต้องการ) */
/* --- ปรับแต่งเลข 0 ให้ไม่มีพื้นหลัง --- */
#header-icons-wrapper .header-block__badge {
    position: relative !important;
    display: inline-flex !important;
    margin-left: -6px !important;
    /* ระยะห่างจากรถเข็น */

    /* ลบพื้นหลังและเส้นขอบออก */
    background: none !important;
    border: none !important;
    box-shadow: none !important;

    /* ปรับแต่งตัวเลข */
    color: #333 !important;
    /* สีของตัวเลข */
    font-size: 14px !important;
    /* ขนาดตัวเลข */
    font-weight: bold;

    /* ล้างค่าความกว้าง/สูงคงที่ เพื่อไม่ให้มีช่องว่างขาวๆ */
    min-width: auto !important;
    height: auto !important;
    padding: 0 !important;
    top: 5px !important;
    left: auto !important;
}

/* 4. เอฟเฟกต์ Hover ให้พื้นหลังเข้มขึ้น */
#header-icons-wrapper .user-info a:hover,
#header-icons-wrapper .header-block__action-btn:hover {
    background: #eeeeee !important;
    border-color: #e0e0e0 !important;
}

/* 1. ซ่อนช่องค้นหาที่แถมมากับตัวเมนู (ตัวการที่ทำให้ซ้อนกัน) */
#header .header-bottom .search-widget,
#header .header-bottom #search_widget {
    display: none !important;
}

/* 2. บังคับให้เมนูแสดงผล (ป้องกันธีมสั่งซ่อนเป็นโหมดมือถือ) */
#header .header-bottom {
    background-color: #ffffff !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    border-bottom: 1px solid #eeeeee;
    z-index: 1 !important;
}

#_desktop_top_menu {
    display: block !important;
}

/* 3. จัดเมนู NOTEBOOK ไว้ซ้าย และ หน้าแรก ไว้ขวา */
.top-menu {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0;
    padding: 10px 0;
}

/* จัดวางตำแหน่งปุ่ม */
.menu-container {
    position: relative;
    padding: 10px 0;
}

/* --- 1. ปลดล็อค Container แม่ ไม่ให้กักขังเมนูย่อย --- */
.category-menu-container,
.header-bottom,
.menu-container {
    overflow: visible !important;
    /* ยอมให้เมนูยื่นออกไปนอกกรอบได้ */
}

/* --- 3. แก้ปัญหา Level 3 ทับซ้อน และ บีบตัว --- */
.dropdown-vertical-menu li {
    position: absolute !important;
    /* บังคับให้ลูกอ้างอิงตำแหน่งจากบรรทัดนี้ */
}


/* --- 4. แก้ไขระยะห่างของ Link ข้างในให้ไม่บีบตัว --- */
.dropdown-vertical-menu .js-sub-menu a,
.dropdown-vertical-menu .submenu a {
    display: block !important;
    padding: 12px 25px !important;
    /* เพิ่มพื้นที่ให้คลิกง่าย */
    text-align: left !important;
    width: auto !important;
}

/* --- 5. คำสั่งแสดงผลเมื่อ Hover --- */
.dropdown-vertical-menu li:hover>.js-sub-menu,
.dropdown-vertical-menu li:hover>.submenu {
    display: block !important;
    visibility: visible !important;
}

/* --- 1. เตรียมปุ่มกดให้รองรับการคลิกค้าง --- */
.btn-category-toggle,
.category-menu-container {
    outline: none;
    /* ลบเส้นขอบสีฟ้าเวลาคลิก */
}

/* --- 2. สั่งให้ Level 2 กางค้างเมื่อมีการคลิก (Focus) --- */
/* เมื่อคลิกที่ container หรือปุ่ม เมนู .dropdown-vertical-menu จะแสดงค้างไว้ */
.category-menu-container:focus-within .dropdown-vertical-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 1. บังคับให้ตัวคลุมเป็นจุดเริ่มนับตำแหน่ง (สำคัญมาก) */
.category-menu-container {
    position: relative !important;
}

/* 2. ปรับแผงเมนู Level 2 ให้ตรงกับปุ่ม */
.dropdown-vertical-menu {
   
    /* หัวใจสำคัญ: เปิด Scrollbar แนวตั้ง แต่อย่ากักขังลูกแนวขวาง */
    overflow-y: auto !important;
    overflow-x: visible !important;
    /* 1. เปลี่ยนวิธีซ่อน: แทนการใช้ display: none ให้ใช้การซ่อนด้วย opacity และตำแหน่งแทน */
    display: block !important; 
    visibility: hidden;
    opacity: 0;
     /* 2. ตั้งค่าการเลื่อน: ให้เริ่มต้นจากตำแหน่งที่สูงขึ้นเล็กน้อย (เช่น -10px) */
    transform: translateY(-10px);
    
    /* 3. กำหนดความเร็วและความนุ่มนวล */
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    
    /* คงค่าเดิมของคุณไว้ */
    position: absolute !important;
    left: 0 !important;
    top: 100% !important;
    width: 250px !important;

    /*เปิด scrollbar แนวตั้ง*/
    z-index: 999 !important;
    background: #fff !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
    height: auto !important;
    max-height: fit-content !important;
}


/* --- เมื่อมีการคลิกหรือกางออก (State: Active) --- */
.category-menu-container:focus-within .dropdown-vertical-menu,
.category-menu-container.active .dropdown-vertical-menu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0); /* เลื่อนลงมาที่ตำแหน่งปกติ */
}

/* --- จัดการ Level 3 ให้ดีดออกทางขวา --- */

/* 1. ตั้งค่าให้รายการในแผงหมวดหมู่ (Level 2) เป็นจุดอ้างอิง */
.dropdown-vertical-menu li {
    position: relative !important;
}

/* 2. สั่งให้แผงลูก (Level 3) ดีดออกไปทางขวา */
/* ปกติใน PrestaShop แผงนี้จะใช้คลาส .js-sub-menu หรือ .submenu */
.dropdown-vertical-menu .js-sub-menu,
.dropdown-vertical-menu .submenu {
    display: none;
    /* ซ่อนไว้ก่อน */
    position: absolute !important;

    /* ดีดไปทางขวา 98% ของความกว้างแผง Level 2 (ให้เกยกันนิดหน่อยกันเมาส์หลุด) */
    left: 98% !important;
    top: 0 !important;

    width: 250px !important;
    /* ความกว้างแผงย่อย */
    background: #ffffff !important;
    border: 1px solid #ddd !important;
    box-shadow: 10px 0 20px rgba(0, 0, 0, 0.1) !important;
    z-index: 10000 !important;
    padding: 10px 0 !important;
    list-style: none !important;
}

/* 3. สั่งให้แสดงผลเมื่อเอาเมาส์ชี้ (Hover) ที่หัวข้อใน Level 2 */
.dropdown-vertical-menu li:hover>.js-sub-menu,
.dropdown-vertical-menu li:hover>.submenu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 4. สร้างสะพานล่องหน (Invisible Bridge) */
/* ช่วยให้เวลาเลื่อนเมาส์จากแผง NOTEBOOK ไปหา COMMERCIAL แล้วเมนูไม่หุบ */
.dropdown-vertical-menu li:hover::after {
    content: "";
    position: absolute;
    top: 0;
    right: -25px;
    width: 30px;
    height: 100%;
    background: transparent;
    z-index: 1;
}

/* 1. บังคับให้ Link ใน Level 3 แสดงบรรทัดเดียวเสมอ */
.dropdown-vertical-menu .js-sub-menu a,
.dropdown-vertical-menu .submenu a,
.dropdown-vertical-menu .js-sub-menu .category {
    white-space: nowrap !important;
    /* ห้ามตัดขึ้นบรรทัดใหม่ */
    display: block !important;
    width: 100% !important;
}

/* ============================================================
   FIX: เชื่อมต่อกรอบเมนู Level 2, 3, 4 ให้สนิทเป๊ะ (ยึดตาม HTML จริง)
   ============================================================ */

/* 1. จัดการตัวหุ้มเมนูย่อย (Container) ให้แผ่ออกทางขวาแบบอิสระ */
.dropdown-vertical-menu .menu-container {
    position: absolute !important;
    left: 100% !important;
    /* ดีดออกไปขอบขวาของ Level 2 */
    top: 0 !important;
    /* จัดขอบบนให้เสมอหัวข้อแม่ */
    width: auto !important;
    min-width: 250px !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 2. ล้างค่า Bootstrap ที่ขวางการจัดตำแหน่ง */
.dropdown-vertical-menu .menu-container .container,
.dropdown-vertical-menu .menu-container .row {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    /* เปลี่ยนจาก flex เพื่อให้คุมพื้นที่ง่ายขึ้น */
}

/* 3. จัดการแผง Level 3 และ 4 (ul.submenu) ให้แปะติดขอบ */
/* แผงย่อย Level 3 / 4 */
.dropdown-vertical-menu .submenu,
.dropdown-vertical-menu .js-sub-menu {
    display: block !important; /* เปลี่ยนจาก none */
    visibility: hidden;
    opacity: 0;
    
    /* ให้ดีดออกมาจากทางซ้ายนิดหน่อย */
    transform: translateX(10px); 
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;

    position: absolute !important;
    left: 100% !important;
    top: 0 !important;
}

/* เมื่อ Hover หัวข้อใน Level 2 */
.dropdown-vertical-menu li:hover > .submenu,
.dropdown-vertical-menu li:hover > .js-sub-menu {
    visibility: visible;
    opacity: 1;
    transform: translateX(0); /* เลื่อนกลับมาตำแหน่งปกติ */
}

/* 4. แก้ปัญหาตำแหน่งของ COMMERCIAL (Level 3) โดยเฉพาะ */
/* บังคับให้แผงที่ซ้อนอยู่ข้างใน กางออกแนวนอนเสมอ */
li.category {
    position: relative !important;
    display: block !important;
    width: 100% !important;
}

/* 5. แก้ตัวหนังสือแนวตั้ง และจัดระยะห่าง Link */
.main-menu__tree__link {
    white-space: nowrap !important;
    /* ห้ามตัดบรรทัด */
    display: flex !important;
    align-items: center;
    padding: 12px 25px !important;
    width: 100% !important;
    
}

/* 6. คำสั่ง Hover ให้แสดงผลต่อเนื่อง */
li.category:hover>.submenu,
li.category:hover>.js-sub-menu,
.menu-container-sm.js-sub-menu {
    display: block !important;
}

/* 1. สภาวะปกติ: ลูกศรหันขวา */
.btn-category-toggle .material-icons.arrow {
    display: inline-block;
    transition: transform 0.3s ease !important;
    transform: rotate(-90deg) !important;
    /* หันขวา */
}

/* 2. สภาวะเมื่อคลิกแล้วเมนูกางออก: ให้ลูกศรหมุนลง */
/* ใช้การตรวจสอบว่าถ้าเมนูตัวถัดจากปุ่ม (Sibling) มีการแสดงผลอยู่ ให้หมุนลูกศร */
.btn-category-toggle+.dropdown-vertical-menu[style*="display: block"] .material-icons.arrow,
.btn-category-toggle:focus .material-icons.arrow {
    transform: rotate(0deg) !important;
    /* หันลง */
}

/* 3. กรณีธีมใช้การฉีด Class เข้าไปที่ Container แม่ (ดักไว้อีกทาง) */
.category-menu-container.active .btn-category-toggle .material-icons.arrow,
.category-menu-container.open .btn-category-toggle .material-icons.arrow {
    transform: rotate(0deg) !important;
}

/* --- 1. เปลี่ยนรูปแบบลูกศรให้เหมือนปุ่มหลัก (ใช้ Material Icon) --- */
/* เราจะซ่อนลูกศรเก่าของธีมออกก่อน */
.dropdown-vertical-menu .dropdown-toggle::after {
    display: none !important;
}

/* ใส่ไอคอน expand_more เข้าไปใหม่ให้เหมือนปุ่ม หมวดหมู่สินค้า */
.dropdown-vertical-menu .main-menu__tree__link.dropdown-toggle::before {
    content: "expand_more";
    font-family: 'Material Icons';
    position: absolute;
    right: 15px;
    /* จัดตำแหน่งให้อยู่ขวาสุด */
    font-size: 18px;
    color: #666;

    /* --- 2. ตั้งค่าเริ่มต้นให้หันไปทางขวา --- */
    display: inline-block;
    transition: transform 0.3s ease;
    transform: rotate(-90deg);
    /* หันขวา */
}

/* --- 3. เมื่อ Hover ให้ลูกศรหมุนลง --- */
.dropdown-vertical-menu li:hover>.main-menu__tree__link.dropdown-toggle::before {
    transform: rotate(0deg);
    /* หันลง */
    color: #d10000;
    /* เปลี่ยนสีเป็นแดงตามธีมตอน hover (ไม่บังคับ) */
}

/* จัดระยะห่างข้อความไม่ให้ทับลูกศร */
.dropdown-vertical-menu .main-menu__tree__link {
    font-weight: 400 !important; /* 400 คือค่ามาตรฐานของตัวปกติ */
    padding-right: 40px !important;
    position: relative;
        color: #333 !important;
            /* สีปกติ เช่น สีเทาเข้ม */
            transition: color 0.3s ease !important;
            /* เพิ่มความนุ่มนวลเวลาเปลี่ยนสี */
}
/* 2. เปลี่ยนเป็นสีแดง "เฉพาะ" ตอนเมาส์ชี้ (Hover) */
.dropdown-vertical-menu .main-menu__tree__link:hover {
    color: #d10000 !important;
    /* สีแดงตอนชี้ */
    text-decoration: none !important;
    /* เอาเส้นใต้ตัวอักษรออก */
}
/* 3. ทำให้ลูกศร (ที่เราสร้างไว้ก่อนหน้า) เปลี่ยนเป็นสีแดงพร้อมกันด้วย */
.dropdown-vertical-menu li:hover>.main-menu__tree__link.dropdown-toggle::before {
    color: #d10000 !important;
}

/* --- ปรับแต่งปุ่มหมวดหมู่สินค้าใหม่ (สไตล์ Minimal) --- */
.btn-category-toggle {
    background-color: #f8faff !important;
    /* พื้นหลังสีฟ้าอ่อน/เทาจางตามรูป */
    color: #333 !important;
    border: none !important;
    border-radius: 12px !important;
    /* เพิ่มความโค้งมน */
    padding: 10px 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px;
    /* ระยะห่างระหว่างไอคอนและข้อความ */
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important; /* เงาด้านล่างแบบนุ่มๆ */
}

/* ปรับไอคอนด้านหน้า (Dashboard Icon) */
.btn-category-toggle i:first-child {
    color: #4a5568 !important;
    /* สีไอคอนเทาเข้ม */
    font-size: 24px !important;
}

/* --- เปลี่ยนลูกศรให้เป็น Chevron-Right --- */
/* ซ่อนลูกศรเก่า (expand_more) */
.btn-category-toggle .arrow {
    display: none !important;
}

/* สร้างลูกศรใหม่แบบ Chevron โดยใช้ Pseudo-element */
.btn-category-toggle::after {
    content: "chevron_right";
    /* ใช้ Material Icon แบบ Chevron */
    font-family: 'Material Icons';
    font-size: 20px;
    margin-left: auto;
    /* ดันไปขวาสุด */
    color: #a0aec0;
    transition: transform 0.3s ease;
}

/* เมื่อมีการคลิกเปิดเมนู ให้ลูกศร Chevron หมุนลง */
.btn-category-toggle[aria-expanded="true"]::after,
.btn-category-toggle.is-open::after {
    transform: rotate(90deg);
    /* หมุนลง 90 องศา */
}

/* เอฟเฟกต์เมื่อ Hover ปุ่ม */
.btn-category-toggle:hover {
    background-color: #edf2f7 !important;
    cursor: pointer;
}

/* ลบเส้นคั่นระหว่างแถวใน Header ทั้งหมด */
.header-top,
.header-bottom,
.header-nav,
.header-main-wrapper,
#header {
    border-bottom: none !important;
    border-top: none !important;
    box-shadow: none !important;
}

/* ลบเส้นที่อาจติดมากับ Container */
.header-top .container,
.header-top .container-md,
.header-bottom .container,
.header-bottom .container-md {
    border-bottom: none !important;
    border-top: none !important;
}

/* ลบเส้นคั่นจางๆ ที่มักจะอยู่ใต้แถวโลโก้ */
.header-main-wrapper {
    border-bottom: 0 !important;
}

/* ปรับระยะห่างด้านล่างของปุ่มหมวดหมู่สินค้า */
.btn-category-toggle {
    margin-bottom: 5px !important;
}

/* หากปุ่มถูกหุ้มด้วย Container และระยะยังไม่เปลี่ยน ให้ลองใช้ตัวนี้ครับ */
.category-menu-container {
    margin-bottom: 5px !important;
}

/* เจาะจงลดความสูงเฉพาะเมนูชั้นที่เป็น COMMERCIAL */
.dropdown-vertical-menu .main-menu__tree__link[data-depth="1"] {
    padding-top: 0px !important;     /* ปรับลดระยะห่างด้านบน */
    padding-bottom: 7px !important;    /* ปรับลดระยะห่างด้านล่าง */
    min-height: 0 !important;    /* ยกเลิกค่าความสูงขั้นต่ำเดิม */
    line-height: 1 !important;    /* บีบระยะบรรทัดให้ชิดตัวอักษรมากขึ้น */
    display: flex !important;
    align-items: center !important;

    padding-left: 10px !important;        /* ปรับให้ชิดซ้ายมากขึ้น (ลดจากค่าเดิม) */
        padding-right: 15px !important;        /* เว้นระยะด้านขวาไว้เผื่อลูกศร */
    
        /* ป้องกันตัวหนังสือร้นหรือตัดขึ้นบรรทัดใหม่ */
        white-space: wrap !important;        /* บังคับให้อยู่บรรทัดเดียว */
        /* overflow: hidden !important;        ซ่อนส่วนที่เกิน (ถ้ามี) */
        text-overflow: ellipsis !important;        /* แสดง ... ถ้าชื่อยาวเกินกรอบ */
        justify-content: flex-start !important;
        text-align: left !important;        /* บังคับเนื้อหาชิดซ้าย */
}

/* จัดการตำแหน่งให้ขยับไปทางขวาตามรูปของคุณ */
.custom-nav-links {
    margin-left: auto;
    display: flex;
    gap: 25px; /* ระยะห่างระหว่างเมนู */
}

/* ลิงก์ปกติ */
.c-nav-item {
    color: #333 !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

/* ลิงก์ที่ active จากไฟล์ .tpl */
.c-nav-item.active {
    color: #d10000 !important;
    font-weight: normal !important;
}

/* บังคับให้ Header ทั้งแผงเป็น Sticky */
#header.js-sticky-header {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: -50px !important; /* ตัวเลขนี้ต้องเท่ากับ "ความสูงของแถบสีดำ" */
    z-index: 1001 !important;
    background: #fff !important;
    transition: all 0.3s ease !important;
}

/* ปรับแต่งให้ Header-top และ Bottom ยังคงเป็นสีขาวและดูชัดเจน */
.header-top, .header-bottom {
    background: #ffffff !important;
    position: relative !important;
    z-index: 1001 !important;
}

/* เพิ่มเงาให้แถบขาวเมื่อมันเลื่อนขึ้นไปชิดขอบบน */
#header.js-sticky-header {
    box-shadow: 0 4px 15px rgba(0,0,0,0.08) !important;
}

/* --- 3. จัดการรายการใน Level 2 (li) เพื่อเป็นจุดดีดให้ Level 3 --- */
.js-sub-menu ul[data-depth="1"] > li.category {
    position: static !important; /* สำคัญ: เพื่อให้ Level 3 อ้างอิงตำแหน่งกับขอบถาดใหญ่ */
}








/* กล่อง Portal ต้องลอยตัวและมีขนาดชัดเจน */
.submenu-portal {
    position: fixed !important;
    z-index: 999999 !important;
    display: none;
    background: #ffffff !important;
    border: 1px solid #ddd !important;
    box-shadow: 10px 0 25px rgba(0,0,0,0.2) !important;
    min-width: 250px;
    min-height: 50px;
    /* padding: 10px; */

    pointer-events: auto;
}

/* บังคับให้รายการข้างใน Portal แสดงผล */
.submenu-portal li {
    list-style: none !important;
    display: block !important;
}

.submenu-portal a {
    display: block;
    padding: 10px;
    color: #333;
    text-decoration: none;

}

/* Level 2 ในถาดปกติ */
.dropdown-vertical-menu {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: 480px !important;
    display: block !important; /* บังคับให้โชว์ Level 2 ไว้ก่อนทดสอบ */
}

/* ตกแต่ง Level 4 ภายในแผงลอย (Portal) */
.submenu-portal ul ul {
display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    
}

.submenu-portal ul ul li a {
    padding: 8px 25px !important;
    font-size: 14px !important; /* ขนาดเล็กลงกว่า Level 3 เล็กน้อย */
    color: #666 !important;
}

.submenu-portal ul ul li a:hover {
    color: #d10000 !important;
    background: transparent !important;
}
/* ใช้สไตล์เดียวกับ Portal ชั้นแรก */

.submenu-portal, 
.submenu-portal-l4 {
    padding:2px !important;
    padding-top:15px !important;

    min-width: 250px !important;
    max-width: 350px !important;
    position: fixed !important;
    z-index: 999999 !important;

    background: #ffffff !important;
    border: 1px solid #ddd !important;
    box-shadow: 15px 0 30px rgba(0,0,0,0.2) !important;
    border-radius: 8px;
    line-height: 2px !important;

    margin-left:2px !important;
}
/* เจาะจงไปที่รายการเมนูในกล่อง Level 4 (Portal L4) */
.submenu-portal-l4 a {
    /* ปรับค่า padding บน-ล่าง เพิ่มขึ้นเพื่อให้บรรทัดห่างกัน */
    /* จากเดิมที่เคยใช้อยู่ประมาณ 4px ให้ลองเพิ่มเป็น 8px หรือ 10px ครับ */
    padding-top: 1px !important;    
    padding-bottom: 1px !important; 

    /* เพิ่ม line-height เพื่อให้ตัวหนังสือมีพื้นที่ว่างรอบๆ มากขึ้น */
    line-height: 1 !important;    
    
    display: flex !important;
    align-items: center;
}


/* เพิ่มเติม: ปรับแต่งสี Hover ให้ดูนุ่มนวลขึ้น */
.submenu-portal a:hover, 
.submenu-portal-l4 a:hover {
    background-color: #fcfcfc !important; 
    transition: all 0.2s ease-in-out;
}

/* ซ่อนเมนูเดิมที่แอบติดมาใน Portal เพื่อไม่ให้แสดงซ้อนข้างล่าง */
.submenu-portal ul ul, 
.submenu-portal-l4 ul ul {
    display: none !important;
}

/* ตกแต่งรายการลิสต์ */
.submenu-portal li, .submenu-portal-l4 li {
    list-style: none !important;
    position: relative;
    margin-bottom: 2px !important; /* เพิ่มระยะห่างระหว่างแถวเล็กน้อย */
    display: block !important;
    width: 100% !important;
    padding-left:0 !important;
    padding-right: 0 !important;

}

.submenu-portal li a, .submenu-portal-l4 li a {
    display: flex !important;
    padding: 10px 25px !important;
    color: #333 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    padding-top: 15px !important;    
    padding-bottom: 15px !important;

}

.submenu-portal li a:hover, .submenu-portal-l4 li a:hover {
    background-color: #f8f9fa !important;
    color: #d10000 !important;
}






/* 1. กำหนดไอคอนเริ่มต้นใน Level 3 ให้ "หันขวา" */
/* เราเลือก .main-menu__tree__link.dropdown-toggle เพราะเป็นคลาสที่มีลูกศรตาม HTML ที่คุณส่งมา */
#submenu-portal .main-menu__tree__link.dropdown-toggle::before {
    content: "expand_more" !important; /* ใช้สัญลักษณ์เดียวกับ Level 2 */
    font-family: 'Material Icons' !important;
    position: absolute;
    right: 15px;
    font-size: 18px;
    color: #666;
    display: inline-block;
    transition: transform 0.3s ease;
    
    /* บังคับหมุนไปทางขวา -90 องศา */
    transform: rotate(-90deg) !important; 
}

/* 2. เมื่อเมาส์ Hover ที่บรรทัด (li) ให้ลูกศรหมุนกลับมา "ชี้ลง" */
#submenu-portal li.category:hover > .main-menu__tree__link.dropdown-toggle::before {
    transform: rotate(0deg) !important; /* หันลงปกติ */
    color: #d10000 !important; /* เปลี่ยนเป็นสีแดงตามธีม */
}

/* 3. ปรับระยะตัวหนังสือไม่ให้ทับไอคอน และให้ชิดซ้ายตามที่คุณเคยต้องการ */
#submenu-portal .main-menu__tree__link {
    position: relative;
    padding-left: 12px !important; /* ชิดซ้าย */
    padding-right: 40px !important; /* เว้นที่ให้ไอคอนทางขวา */
    display: flex !important;
    align-items: center;
    width: 100%;
}

/* ซ่อนไอคอนเดิมที่อาจเป็นแท็ก i หรือ span ภายใน Portal Level 3 */
#submenu-portal .main-menu__tree__link i,
#submenu-portal .main-menu__tree__link span.material-icons,
#submenu-portal .main-menu__tree__link .caret {
    display: none !important;
}

/* หากลูกศรเดิมถูกสร้างด้วย ::after ให้ซ่อนทิ้ง */
#submenu-portal .main-menu__tree__link::after {
    display: none !important;
    content: none !important;
}








/* ดันข้อความเมนูโน้ตบุ๊กออกไปทางขวา 45px */
#category-10 > a.main-menu__tree__link {
    padding-left: 45px !important;
    display: flex !important;
    align-items: center !important;
}

/* แถม: จัดตำแหน่งไอคอนโน้ตบุ๊กให้กึ่งกลางสวยๆ (ถ้ายังไม่เป๊ะ) */
#category-10 > a.main-menu__tree__link .notebook-custom-icon {
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}
/* 1. ตั้งค่าสีไอคอนตอนปกติ (สีเทาเข้ม) และเพิ่มความสมูทในการเปลี่ยนสี */
.notebook-custom-icon {
    color: #555 !important;
    transition: color 0.2s ease-in-out !important;
}

/* 2. เมื่อเอาเมาส์ไปชี้ที่แถวเมนู (Hover) ให้ไอคอนเปลี่ยนเป็นสีแดง */
#category-10:hover .notebook-custom-icon {
    color: #ed1c24 !important;
}

/* ตั้งค่าสีไอคอนตอนปกติ */
.notebook-custom-icon, .lab-custom-icon {
    color: #555 !important;
    transition: color 0.2s ease-in-out !important;
}

/* เมื่อ Hover ให้ไอคอนเป็นสีแดง */
#category-10:hover .notebook-custom-icon,
#category-59:hover .lab-custom-icon {
    color: #ed1c24 !important;
}

/* ดันข้อความสำหรับเมนู 59 */
#category-59 > a.main-menu__tree__link {
    padding-left: 45px !important;
}



/* 1. สั่งให้ไอคอน (แท็ก i) ทุกตัวในเมนูมีสีเทาเป็นพื้นฐาน */
#menu-categories a.main-menu__tree__link i {
    color: #555 !important;
    transition: color 0.2s ease-in-out !important;
}

/* 2. เมื่อ Hover ที่เมนู (li) ให้ไอคอน (i) ที่อยู่ข้างในเปลี่ยนเป็นสีแดง */
/* ครอบคลุมทุก ID รวมถึง 13 และ 14 แน่นอน */
#category-10:hover i, #category-59:hover i,
#category-13:hover i, #category-14:hover i,
#category-18:hover i, #category-15:hover i,
#category-16:hover i, #category-58:hover i,
#category-17:hover i, #category-60:hover i,
#category-61:hover i, #category-62:hover i,
#category-63:hover i, #category-64:hover i,
#category-65:hover i, #category-66:hover i,
#category-67:hover i, #category-68:hover i,
#category-69:hover i, #category-70:hover i,
#category-71:hover i, #category-72:hover i,
#category-73:hover i, #category-74:hover i {
    color: #ed1c24 !important;
}

/* 3. ดันข้อความให้ขยับมาทางขวา (ชุดเดิม) */
#category-10 > a, #category-59 > a, #category-13 > a, #category-14 > a,
#category-18 > a, #category-15 > a, #category-16 > a, #category-58 > a,
#category-17 > a, #category-60 > a, #category-61 > a, #category-62 > a,
#category-63 > a, #category-64 > a, #category-65 > a, #category-66 > a,
#category-67 > a, #category-68 > a, #category-69 > a, #category-70 > a,
#category-71 > a, #category-72 > a, #category-73 > a, #category-74 > a {
    padding-left: 45px !important;
}

/* ขยายขนาดไอคอนในเมนู Level 2 */
.main-menu__tree__item .main-menu__tree__item .material-icons {
    font-size: 26px !important; /* ปรับขนาดตามต้องการ เช่น 24px หรือ 26px */
    width: 26px !important;
    height: 26px !important;
}

/* ถ้าต้องการปรับระยะห่างข้อความใหม่หลังจากไอคอนใหญ่ขึ้น */
.main-menu__tree__item .main-menu__tree__item a {
    padding-left: 50px !important; /* เพิ่มระยะ Padding จากเดิม 45px เป็น 50px หรือมากกว่า */
}

/* บังคับปิดเมนูย่อยทุกตัวที่ไม่ได้ถูก Hover */
.main-menu__tree__item:not(:hover) > .menu-dropdown, 
.main-menu__tree__item:not(:hover) > .main-menu__dropdown {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* แก้ไขปัญหา Layer ทับซ้อนที่ทำให้เมนูค้าง */
.main-menu__tree__item {
    z-index: auto !important;
}

.main-menu__tree__item:hover {
    z-index: 999 !important; /* ดันเฉพาะตัวที่ Hover ขึ้นมาข้างบน */
}

/* ทำให้พื้นที่เมนูเชื่อมต่อกัน ไม่มีช่องโหว่ให้เมาส์หลุด */
.menu-dropdown, .main-menu__dropdown {
    margin-top: -1px !important;
    border-top: 1px solid transparent;
}

footer .container {
    /* max-width: 100% !important; */
    padding-left: 50px;
    padding-right: 50px;
}


/* ตั้งค่าสถานะปกติให้เหมือน Email */
.contact__line_custom .line-oa-link {
    color: #dfe3e4 !important;
    font-size: 0.875rem !important; /* ขนาดเท่า Email เป๊ะๆ */
    text-decoration: none;
}

.contact__line_custom .line-icon-img {
    /* ปรับไอคอนให้เป็นสีเทาอ่อน #dfe3e4 */
    filter: invert(95%) sepia(5%) saturate(145%) hue-rotate(155deg) brightness(95%) contrast(90%) !important;
}

/* ตั้งค่าเมื่อ Mouse Hover ให้เป็นสีขาว #ffffff ทั้งชุด */
.contact__line_custom:hover .line-oa-link {
    color: #ffffff !important;
}

.contact__line_custom:hover .line-icon-img {
    filter: brightness(0) invert(1) !important; /* เปลี่ยนไอคอนเป็นขาวบริสุทธิ์ */
}

/* 1. ไม่แสดงข้อความใน Breadcrumb */
.breadcrumb li, 
.breadcrumb span, 
.breadcrumb a {
    display: none !important;
}

/* 2. ลดความสูงของแถบ Breadcrumb ลง */
.breadcrumb, 
nav[data-depth] {
    padding-top: 5px !important;    /* ปรับค่าความสูงตามต้องการ */
    padding-bottom: 5px !important; /* ปรับค่าความสูงตามต้องการ */
    margin-bottom: 10px !important; /* ระยะห่างจากคอนเทนต์ด้านล่าง */
    min-height: auto !important;    /* ปลดล็อคความสูงขั้นต่ำ */
    background-color: transparent;  /* ทำให้พื้นหลังโปร่งใส หรือใส่สีที่ต้องการ */
}


/* ขยาย Container ให้กว้างขึ้นชิดขอบ (ตัวอย่าง 95% หรือ 100%) */
/* .container {
    max-width: 100% !important; 
    width: 100% !important;
} */

/* หากต้องการให้หน้าแรกขยายเต็มหน้าจอโดยเฉพาะ */
/* #index .container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 15px;
    padding-right: 15px;
} */


/* style ปุ่ม chat */
/* --- 1. ส่วนเมนูนำทาง (Navigation) --- */
.c-nav-item {
    color: #333 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.c-nav-item:hover, 
.c-nav-item.active {
    color: #d70014 !important;
}

.c-nav-item.active {
    font-weight: bold !important;
}

/* --- 2. ส่วนโครงสร้างปุ่มแชท (Layout) --- */
.chat-container-right {
    display: flex;
    justify-content: flex-end;
    margin-top: 5px; /* ระยะห่างจากข้อความด้านบน */
    width: 100%;
}

.chat-wrapper {
    position: relative;
    display: inline-block;
    width: 180px; /* กำหนดความกว้างเท่ากันทุกปุ่ม */
}

/* --- 3. สไตล์ปุ่มทั้งหมด (Common Button Style) --- */
.chat-main-btn, 
.btn-messenger, 
.btn-line {

    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    padding: 8px 0 !important;
    border-radius: 50px;
    font-weight: bold;
    text-decoration: none !important;
    cursor: pointer;
    box-sizing: border-box;
    transition: all 0.3s ease-in-out !important;
    margin: 0 !important;
    color: white !important;
}

/* --- จัดระยะห่างระหว่างปุ่ม chat --- */
.chat-options {
    display: none;
    flex-direction: column;
    gap: 3px; /* ระยะห่างระหว่างปุ่ม Line และ Messenger */
    position: absolute;
    right: 0;
    top: 41px; /* ดันขึ้นไปชิดปุ่มหลัก แชทกับรัฐชิคิ */
    width: 100%;
    padding-top: 0;
    z-index: 1000;
}

.chat-wrapper:hover .chat-options {
    display: flex;
}

/* --- 5. สีและสถานะ Hover (Colors & Interaction) --- */
/* ปุ่มหลัก */
.chat-main-btn { 
    background-color: #d70014 !important; 
}
.chat-main-btn:hover {
    background-color: #b30011 !important;
    transform: translateY(-2px);
}

/* ปุ่ม Line */
.btn-line { 
    background-color: #00c300 !important; 
}
.btn-line:hover {
    background-color: #009900 !important;
}

/* ปุ่ม Messenger */
.btn-messenger { 
    background-color: #0084ff !important; 
}
.btn-messenger:hover {
    background-color: #0066cc !important;
}

/* --- ปรับแต่งปุ่มย่อยให้ Font บางลงและเล็กลง --- */
.btn-line, .btn-messenger {
    display: flex !important;
    align-items: center;
    /* เปลี่ยนจาก center เป็น flex-start เพื่อให้ขยับมาทางซ้าย */
    justify-content: flex-start !important; 
    
    width: 100% !important;
    padding: 8px 0 8px 25px !important; /* เพิ่ม Padding ซ้าย 25px เพื่อให้แนวไอคอนตรงกับคำว่า 'แชท' */
    border-radius: 50px;
    
    font-size: 13px !important;    /* ขนาดตัวหนังสือเล็กตามที่ต้องการ */
    font-weight: 400 !important;   /* ฟอนต์บางลง */
    
    text-decoration: none !important;
    margin: 0 !important;
    color: white !important;
    transition: 0.3s;
    box-sizing: border-box; /* สำคัญ: เพื่อให้การคำนวณความกว้างรวม Padding ถูกต้อง */
}

/* --- 6. ไอคอน (Icons) --- */
.chat-icon {
    width: 18px;
    height: 18px;
    margin-right: 8px;
}

.chat-options img {
    width: 20px;
    height: 20px;
}
/* --- ส่วนไอคอน Line (จัดการสีดำให้เป็นขาว) --- */
.chat-icon-line, .chat-icon-bg {
    width: 24px;
    height: 24px;
    /* เทคนิคย้อมสีไอคอน SVG จากดำเป็นขาว */
    filter: brightness(0) invert(1); 
    margin-right: 10px;
    display: inline-block;
    vertical-align: middle;
    object-fit: contain;
}

/* ปรับสีฟอนต์ชื่อสินค้าในส่วนสินค้ายอดนิยมให้เป็นสีดำ */
.featured-products .product-miniature__title {
    color: #000000 !important;
}
/* 1. กำหนดให้ตัวหนังสือและไอคอนเป็นสีแดงตั้งแต่แรก */
.product-miniature__quickview_button,
.product-miniature__quickview_button i {
    color: #ff0000 !important; /* สีแดง */
}

/* 2. เมื่อเอาเมาส์ไปชี้ (Hover) ให้เปลี่ยนเป็นสีแดงอมดำ */
.product-miniature__quickview_button:hover,
.product-miniature__quickview_button:hover i {
    color: #8b0000 !important; /* สีแดงเข้ม/แดงอมดำ (DarkRed) */
}
/* ปรับแต่งปุ่มให้เป็นวงกลม/จัตุรัสสำหรับใส่ไอคอน */
.btn-primary.add-to-cart {
    background-color: #ff0000 !important;
    border-color: #ff0000 !important;
    font-size: 0 !important; /* ซ่อนข้อความตัวหนังสือ 'หยิบใส่ตะกร้า' ทั้งหมด */
    padding: 8px 12px !important;
}

/* ดึงไอคอนกลับมาแสดงผล */
.btn-primary.add-to-cart i.material-icons {
    display: inline-block !important;
    font-size: 20px !important; /* กำหนดขนาดไอคอน */
    color: #ffffff !important;
    margin: 0 !important;
}

.btn-primary.add-to-cart:hover {
    background-color: #8b0000 !important;
    border-color: #8b0000 !important;
}

/* บังคับให้หัวใจเป็นสีแดงและแสดงผลเต็มดวงตั้งค่าเริ่มต้น */
.wishlist-button-add i.material-icons {
    color: #ff0000 !important; /* เปลี่ยนจากสีเทาเป็นสีแดง */
    content: "favorite" !important; /* ใช้รูปหัวใจแบบถมเต็ม */
}

/* เมื่อเอาเมาส์ไปชี้ ให้เป็นสีแดงอมดำ (ตามสไตล์ที่คุณชอบ) */
.wishlist-button-add:hover i.material-icons {
    color: #8b0000 !important;
}




/* 1. คืนค่าราคาปกติให้เป็นสีดำ/เทา สำหรับสินค้าที่ไม่มีส่วนลด */
.product-miniature__price {
    color: #232323; /* หรือสีเดิมของธีมคุณ */
    font-weight: normal;

}

/* 2. สั่งให้เป็นสีแดง เฉพาะเมื่อมี "ราคาเดิม" (Regular Price) แสดงอยู่ข้างๆ เท่านั้น */
.product-miniature__discount-price + .product-miniature__price,
.product-miniature__discount-price ~ .product-miniature__price,
div:has(> .product-miniature__regular-price) + .product-miniature__price {
    color: #d10000 !important;
    font-weight: bold !important;
}

/* หรือใช้ท่าที่แม่นยำที่สุดสำหรับ PrestaShop 9 คือหา Wrapper ที่บ่งบอกว่าลดราคา */
.product-miniature:has(.product-miniature__regular-price) .product-miniature__price {
    color: #d10000 !important;
    font-weight: bold !important;
}

/* 3. ราคาเดิมให้ขีดฆ่าเสมอ (ซึ่งมันจะปรากฏเฉพาะตอนตั้ง Specific Price เท่านั้น) */
.product-miniature__regular-price {
    text-decoration: line-through !important;
    color: #000000 !important;
    font-size: 0.8rem !important;
    margin-right: 8px;
}


/* ปรับแต่งป้ายส่วนลดให้เป็นทรงแคปซูลสีแดง */
li.badge.discount {
    background-color: #d10000 !important; /* พื้นหลังสีแดง */
    color: #ffffff !important;           /* ตัวหนังสือสีขาว */
    border-radius: 50px !important;      /* ปรับขอบให้โค้งมนเป็นทรงแคปซูล */
    padding: 4px 12px !important;        /* เพิ่มระยะห่างข้างในให้ดูสมส่วน */
 
    font-size: 0.85rem !important;       /* ปรับขนาดตัวอักษรให้พอดี */
    display: inline-block !important;    /* ให้ขนาดกว้างตามเนื้อหา */
    border: none !important;             /* ลบขอบเดิมออก */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* เพิ่มมิติด้วยเงาบางๆ */
    list-style: none !important;         /* ลบจุดหน้าลิสต์ (ถ้ามี) */
}

/* ถ้าต้องการให้ป้ายดูมีช่องว่างจากราคาเล็กน้อย */
.product-miniature__discount-price li.badge.discount {
    margin-left: 8px;
    vertical-align: middle;
}


/* 1. ตั้งค่าตัวคลุมใหญ่ให้เป็นจุดอ้างอิง */
section.featured-products {
    position: relative !important;
}

/* 2. ดึงปุ่ม All Products ออกจากตำแหน่งเดิม แล้วไปแปะไว้ข้างบน */
section.featured-products .all-product-link {
    position: absolute !important;
    top: 4px !important;    /* ปรับขึ้นลงเพื่อให้ตรงกับหัวข้อ */
    right: 50px !important;  /* ปรับซ้ายขวาให้ชิดขอบ container */
    margin: 0 !important;
    z-index: 10 !important;  /* มั่นใจว่าปุ่มจะไม่โดนอะไรทับ */
    background: transparent !important; /* ลบสีพื้นหลัง */
    border: none !important;             /* ลบเส้นกรอบออก */
    color: #000000 !important;           /* เปลี่ยนสีตัวอักษรเป็นสีดำ */
    padding: 0 !important;               /* ลบระยะห่างขอบในออก */
    text-decoration: none !important;    /* ลบเส้นใต้ (ถ้ามี) */
    display: inline-flex !important;     /* จัดเรียงไอคอนกับตัวหนังสือ */
    /* align-items: center; */
    font-weight: 500;                    /* ความหนาพอประมาณ */
}

/* ล็อกสีและสไตล์ตอน Hover ให้เหมือนเดิมทุกประการ */
section.featured-products .all-product-link:hover,
section.featured-products .all-product-link:focus,
section.featured-products .all-product-link:active {
    color: #000000 !important;           /* บังคับเป็นสีดำเหมือนเดิม */
    text-decoration: none !important;    /* บังคับไม่มีเส้นใต้ตอนชี้ */
    background: transparent !important;   /* ไม่มีสีพื้นหลัง */
    outline: none !important;
}

/* ปรับไอคอนให้เล็กลงและสีเดียวกับตัวหนังสือ */
section.featured-products .all-product-link i.material-icons {
    font-size: 1.2rem !important;
    color: #000000 !important;
    margin-left: 2px;
}




/* 1. ตั้งค่า Container ของสินค้าใหม่ให้เป็นจุดอ้างอิง */
#content section.new-products .container {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
}

/* 2. จัดตำแหน่งปุ่ม "ดูสินค้าใหม่ทั้งหมด" ให้ดีดขึ้นไปข้างบน */
#content section.new-products .all-product-link {
    position: absolute !important;
    top: 55px !important;    /* ปรับระดับให้ขนานกับหัวข้อ "สินค้าใหม่" */
    right: 0px !important; /* ชิดขอบขวา */
    margin: 0 !important;
    z-index: 10 !important;
    
    /* สไตล์ลิงก์สีดำ (No Border) */
    background: transparent !important;
    border: none !important;
    color: #000000 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center;
    font-weight: 500;
    padding: 0 !important;
    box-shadow: none !important;
}

/* 1. ล็อกสไตล์พื้นฐานให้คงที่ที่สุด */
#content section.new-products .all-product-link,
#content section.featured-products .all-product-link {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 15px !important;      /* บังคับขนาดฟอนต์ให้คงที่ */
    line-height: 1 !important;       /* ป้องกันบรรทัดดีด */
    transition: none !important;      /* ปิดการเคลื่อนไหวที่อาจทำให้ขนาดเพี้ยน */
}

/* 2. ล็อกสไตล์ตอน Hover/Focus ไม่ให้ขยับหรือเปลี่ยนขนาด */
#content section.new-products .all-product-link:hover,
#content section.new-products .all-product-link:focus,
#content section.featured-products .all-product-link:hover,
#content section.featured-products .all-product-link:focus {
    color: #000000 !important;
    text-decoration: none !important;
    background: transparent !important;
    font-size: 15px !important;      /* ย้ำขนาดฟอนต์อีกครั้งตอน hover */
    transform: none !important;      /* ป้องกันการขยายตัว (Scale) */
    box-shadow: none !important;
}

/* 3. บังคับให้ไอคอน > แสดงผลตลอดเวลาและไม่ขยับ */
#content section.new-products .all-product-link i.material-icons,
#content section.featured-products .all-product-link i.material-icons {
    display: inline-block !important;
    visibility: visible !important;
    font-size: 18px !important;      /* ปรับขนาดไอคอนให้พอดีสายตา */
    color: #000000 !important;
    margin-left: 5px !important;
    width: auto !important;
    height: auto !important;
}


/* 1. สร้างทรงแฉกและพื้นหลังสีเขียว */
.product-flags .badge.new {
    background-color: #28a745 !important; /* สีเขียว */
    
    color: #ffffff !important;
    width: 38px !important;              /* ขยายขนาดให้พอดีขึ้น */
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    
    /* ทรงแฉก Starburst */
    clip-path: polygon(50% 0%, 61% 10%, 75% 5%, 79% 19%, 93% 18%, 90% 32%, 100% 41%, 93% 54%, 97% 68%, 83% 73%, 80% 87%, 66% 86%, 58% 98%, 45% 91%, 32% 98%, 25% 85%, 11% 87%, 12% 73%, 0% 66%, 7% 53%, 0% 39%, 12% 31%, 10% 17%, 24% 18%, 29% 4%, 42% 11%) !important;
    padding: 0 !important;
    border: none !important;
    /* ปรับขนาดฟอนต์ของคำว่า "ใหม่" */
    font-size: 10px !important; 
    font-weight: bold !important;
    line-height: 1 !important;
}


/* ปรับสีชื่อสินค้าในหน้าแรกและหน้ารายการสินค้าเป็นสีดำ */
.product-miniature .product-miniature__title {
    color: #000000 !important;   /* บังคับเป็นสีดำสนิท */
    font-weight: 500 !important;  /* เพิ่มความหนาเล็กน้อยเพื่อความสวยงาม (ถ้าชอบ) */
    transition: color 0.2s ease; /* เพิ่มลูกเล่นเวลาเอาเมาส์ชี้ */
}

/* แถม: กรณีเอาเมาส์ชี้ (Hover) ถ้าอยากให้คงสีดำไว้ หรือเปลี่ยนสีเทานิดๆ */
.product-miniature .product-miniature__title:hover {
    color: #333333 !important;   /* เปลี่ยนเป็นสีเทาเข้มเล็กน้อยเวลาชี้ */
    text-decoration: none !important; /* ไม่มีเส้นใต้กวนใจ */
}




/* 1. ปรับแต่งตัวปุ่มหลัก */
.btn-primary[data-button-action="add-to-cart"] {
    background-color: #ff5252 !important;
    border-color: #ff5252 !important;
    border-radius: 3px !important;
    width: 36.4px !important; 
    height: 36.4px !important;
    
    /* การจัดกึ่งกลางที่สมบูรณ์แบบ */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    position: relative !important;
    overflow: hidden !important;
}

/* 2. ซ่อนไอคอนเดิม () และกำจัดพื้นที่ของมัน */
.btn-primary[data-button-action="add-to-cart"] i.material-icons {
    display: none !important; /* ซ่อนและไม่ให้กินที่ */
}

/* 3. ซ่อน Span ข้อความ (ถ้ายังมีพื้นที่หลงเหลือ) */
.btn-primary[data-button-action="add-to-cart"] .visually-hidden {
    position: absolute !important; /* แยกออกไปจากเลย์เอาท์หลัก ไม่ให้ดันไอคอน */
}

/* 4. ใส่ไอคอนรถเข็นใหม่ที่ตัวปุ่ม (button) โดยตรง */
.btn-primary[data-button-action="add-to-cart"]::before {
    content: "\e8cc" !important; /* รหัสรถเข็น */
    font-family: 'Material Icons' !important;
    font-size: 20px !important;
    color: #ffffff !important;
    
    /* มั่นใจว่าไม่มี margin มาดัน */
    margin: 0 !important;
    line-height: 1 !important;
    display: block !important;
}

/* 1. ตั้งค่าให้ตัวแม่ (ul) เป็น Flex และเรียงลำดับใหม่ */
.product-flags.js-product-flags {
    display: flex !important;
    flex-wrap: wrap; /* ป้องกันป้ายหลุดขอบถ้ามีเยอะ */
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 2. สั่งให้ป้ายทุกใบมีลำดับพื้นฐาน (เช่น ให้เป็น 2) */
.product-flags.js-product-flags li.badge {
    order: 2;
    margin-right: 5px; /* เว้นระยะห่างระหว่างป้าย */
}

/* 3. สั่งเจาะจงให้ป้าย "ใหม่" มีลำดับเป็น 1 (น้อยที่สุดจะอยู่ซ้ายสุด) */
.product-flags.js-product-flags li.badge.new {
    order: 1 !important;
    transform: translateY(-6px) !important; /* ขยับขึ้น 8px (ปรับเลขได้ตามใจชอบ ยิ่งลบมากยิ่งขึ้นสูง) */
}


/* ปรับความโค้งมนของป้าย On Sale ให้เท่ากับป้ายอื่นๆ */
.product-flags .badge.on-sale {
    /* ปรับค่าความโค้งมน (ถ้ายังไม่เท่า ลองเปลี่ยนจาก 3px เป็น 5px หรือ 50px สำหรับทรงมนรี) */
    border-radius: 50px !important; 
    
    /* เพิ่มเติม: จัดตำแหน่งตัวอักษรให้สมดุล */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 5px 10px !important; /* ปรับขนาดพื้นที่รอบตัวอักษรให้ดูสวยงาม */
    font-size: 0.85rem !important;
    /* หากต้องการให้ขยับขึ้นไปในระดับเดียวกับป้าย "ใหม่" ที่เราทำไว้ */
    /* transform: translateY(-8px) !important; */
        box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* เพิ่มมิติด้วยเงาบางๆ */
}

/* 1. ปลดล็อกเฉพาะป้ายสินค้าหมดให้ลงมาข้างล่าง */
.product-flags .badge.out_of_stock {
    position: relative !important;   /* เปลี่ยนจาก absolute เป็น relative เพื่อให้กลับเข้าสู่แถว */
    display: table !important;       /* บังคับตัดบรรทัดใหม่ และกว้างเท่าเนื้อหา */
    top: auto !important;            /* ล้างค่าตำแหน่งเดิมที่อาจค้างอยู่ */
    left: auto !important;           /* ล้างค่าตำแหน่งเดิมที่อาจค้างอยู่ */
    
    /* ระยะห่าง */
    margin-top: 200px !important;    /* ปรับตัวเลขนี้เพื่อให้มันลงมาอยู่ใต้รูปสินค้า (กะระยะตามความสูงของรูป) */
    margin-left: 10px !important;    /* ปรับให้ชิดซ้ายเท่ากับขอบชื่อสินค้า */
    
    /* ตกแต่งเพิ่มเติม (ถ้าต้องการ) */

    color: #ffffff !important;
    z-index: 1 !important;
width:100%;

    background-color: rgb(248, 215, 218);
border-bottom-color: rgb(241, 174, 181);
}

/* 1. เจาะจงเฉพาะกล่อง Container ของ Best Sellers ตามภาพ */
section.best-sellers-products .container {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
}

/* 2. ดีดปุ่มจาก Footer ขึ้นไปด้านบน */
section.best-sellers-products .best-sellers-products-footer {
    position: absolute !important;
    top: 48px !important;    /* ปรับขึ้น-ลง ให้ตรงกับหัวข้อสินค้าขายดี */
    right: 0px !important; /* ชิดขวา */
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
}

/* 3. ปรับแต่ง Link ให้เป็นสีดำ ไม่มีขอบ เหมือนสินค้าใหม่ */
section.best-sellers-products .all-product-link {
    background: transparent !important;
    border: none !important;
    color: #000000 !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    box-shadow: none !important;
    padding: 0 !important;
    opacity: 1 !important;      /* บังคับให้แสดงผลชัดเจน 100% ไม่ต้องรอ Hover */
    visibility: visible !important;
    font-size:15px;
}

/* 4. จัดการ Icon ให้แสดงนิ่งๆ */
section.best-sellers-products .all-product-link i {
    display: inline-block !important; /* แสดงผลทันที */
    font-size: 18px !important;
    margin-left: 5px !important;      /* ระยะห่างระหว่างข้อความกับไอคอน */
    color: #000000 !important;        /* สีไอคอนเดียวกับข้อความ */
    vertical-align: middle !important;
}



.search-widgets__dropdown{
    background: var(--bs-white);
    /* border: 1px solid #ced4da; */
    border-radius: var(--bs-border-radius); 
    box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
    max-width: 30rem;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: calc(100%);
    width: 100vw;
}

.dropdown-menu
{
        --bs-dropdown-min-width: 0rem;
}





/* แก้คำแปลผิด "รวมทั้ั้งหมด (รวมภาษีแล้ว)" ผ่าน CSS ด่วน */
.cart-summary__line.cart-total .cart-summary__label {
    font-size: 0 !important; /* ซ่อนข้อความเดิมที่พิมพ์ผิด */
}

.cart-summary__line.cart-total .cart-summary__label::before {
    content: "ยอดรวมทั้งสิ้น (รวมภาษี)" !important; /* พ่นข้อความใหม่ที่ถูกต้อง */
    font-size: 16px !important;
    font-weight: bold;
}
#cart-subtotal-products .cart-summary__label {
    font-size: 0 !important; /* ซ่อนคำว่า Subtotal เดิม */
}

#cart-subtotal-products .cart-summary__label::before {
    content: "รวม" !important;  /* ข้อความใหม่ที่ต้องการแสดง */
    font-size: 16px !important; /* กำหนดขนาดตัวอักษรตามความเหมาะสม */
    color: #333333 !important; /* กำหนดสีข้อความ */
}


@media (max-width: 991px) {
    /* 1. แถบดำติดหนึบที่บนสุด */
    header#header .header-nav {
        background-color: #000000 !important;
        min-height: 50px !important;
        top: 0 !important;
        z-index: 1100 !important;

        /* ให้เลื่อนหายไปตามปกติ ไม่ใช้ fixed/sticky */
        display: block;
    }

     .logo {
        height: 250px !important;
        width: 75px !important;
    }

    /* 3. ค้นหาร้านค้าบนแถบดำ (ใช้ค่าเดิมที่คุณใช้งานได้แล้ว) */
    .store-locator-wrapper {
        position: absolute !important;
        right: 15px !important;
        top: 15px !important;
        z-index: 1101 !important;
    }

    /* 4. ช่องค้นหาสินค้า (นำกลับมาแสดงและให้ติดหนึบต่อจากแถบดำ) */
    .search-widget {
        display: block !important;
        /* นำกลับมาแสดง */
        position: sticky !important;
        top: 55px !important;
        /* ให้อยู่ใต้แถบดำพอดี */
        background-color: #ffffff !important;
        padding: 10px 15px !important;
        z-index: 1050 !important;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
        /* เพิ่มเงาให้ดูมีมิติ */
    }

    /* 5. จัดการพื้นที่สีขาวและซ่อนส่วนอื่นที่ไม่ต้องการ */
    .header-top {
        padding: 0 !important;
        /* ลดช่องว่าง */
        background-color: #ffffff !important;
    }

    .contact-group,
    .header-top .container>.row>div:not(.logo-section):not(.search-widget) {
        display: none !important;
        /* ซ่อน icon user, cart และอื่นๆ */
    }




 #_desktop_search {
     display: flex !important;
     /* เปลี่ยนจาก d-none เป็น flex */
     width: 100% !important;
     /* ให้กว้างเต็มจอ */
     padding: 10px 15px !important;
     justify-content: center !important;
 }

 #search_widget {
     width: 100% !important;
 }

 /* ปรับแต่งช่อง Input ให้ดูดีบนมือถือ */
 .js-search-input {
     width: 100% !important;
     height: 40px !important;
     border: 1px solid #ccc !important;
     border-radius: 20px !important;
     padding: 0 40px !important;
     /* เว้นที่ให้ไอคอน search และ clear */
     font-size: 14px;
 }

/* บังคับให้เมนูอยู่ล่างสุดและคงที่ตลอดเวลา */
.mobile-menu-bottom {
    position: fixed !important;
    /* ทำให้เมนูอยู่กับที่ ไม่เลื่อนตามหน้าจอ */
    bottom: 0 !important;
    /* ชิดขอบล่างสุด */
    left: 0 !important;
    /* ชิดขอบซ้าย */
    right: 0 !important;
    /* ชิดขอบขวา */
    width: 100% !important;
    /* กว้างเต็มจอ */
    z-index: 9999 !important;
    /* ให้อยู่เลเยอร์บนสุด ไม่โดนรูปหรือเนื้อหาทับ */

    /* ตกแต่งเพิ่มเติมเพื่อให้ดูเป็นระเบียบ */
    background-color: #ffffff !important;
    display: flex !important;
    justify-content: space-around !important;
    padding: 10px 0 !important;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1) !important;
    /* เพิ่มเงาด้านบนให้ดูมีมิติ */
}

/* ป้องกันเนื้อหาท้ายเว็บโดนเมนูทับ */
body {
    padding-bottom: 70px !important;
    /* เว้นระยะด้านล่างของ Body ให้เท่ากับความสูงเมนู */
}


/* 1. บังคับให้กลุ่มไอคอนลงไปอยู่ล่างสุดและค้างไว้ account, cart, หมวดหมู่สินค้า*/
#header-icons-wrapper,
.category-menu-container {
    position: fixed !important;
    bottom: 0 !important;
    background: #fff !important;
    z-index: 10000 !important;
    height: 61px !important;    /* ความสูงของแถบเมนู */
    margin: 0 !important;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1) !important;
}
.btn-category-toggle {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    font-size: 16px !important;    /* ขนาดตัวอักษร "หมวดหมู่สินค้า" */
    padding: 0 !important;
    background: none !important;
    border: none !important;
    color: #333 !important;
}


/* 3. จัดวางกลุ่มไอคอน (Sign In / Cart) ไว้ฝั่งขวา */
#header-icons-wrapper {
    right: 0 !important;
    left: 0 !important;    /* เริ่มต่อจากปุ่มหมวดหมู่ */
    width: 100% !important;
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
    order: 2 !important;
    flex: 1 !important;
}

/* 1. ให้รถเข็น (Cart) อยู่ตรงกลาง */
#_desktop_cart {
    order: 2 !important;
    flex: 1 !important;
}

/* 2. ให้บัญชี (Account) อยู่ขวาสุด */
#_desktop_user_info {
    order: 4 !important;
    flex: 1 !important;
}

/* ปรับแต่งปุ่ม Sign in ให้แสดงผลเหมือนปุ่มอื่น */
#_desktop_user_info .header-block__action-btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

/* บังคับแสดงข้อความ Sign in บนมือถือ */
#_desktop_user_info .header-block__title {
    display: block !important;
    font-size: 10px !important;
    color: #666 !important;
    margin-top: 2px !important;
    white-space: nowrap !important;
}

/* ส่วนของไอคอนหมวดหมู่ (ถ้าคุณใช้โค้ดก่อนหน้า) */
.category-menu-container {
    order: 4 !important;    /* อยู่ซ้ายสุด */
    flex: 1 !important;
}

/* 1. สร้างปุ่มหน้าแรก (ไอคอน + ตัวหนังสือ) ให้อยู่ในโครงสร้างแนวตั้ง */
/* ==========================================
   ใส่ภูมิหลังวงกลมให้ปุ่ม "หน้าแรก" (Home Circle Button)
   ========================================== */
/* 0. ตัวกล่องแม่: บังคับให้จัดเรียงลูกเป็นแนวดิ่ง (บน-ลง-ล่าง) */
/* 1. ตัวกล่องแม่: บังคับให้จัดเรียงลูกเป็นแนวดิ่ง (วงกลมบน ข้อความล่าง) */
#_desktop_user_info .user-info.d-flex {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
}

/* 2. วงกลมไอคอนบ้าน (อยู่บรรทัดบน) */
#_desktop_user_info .user-info.d-flex::before {
    content: "home" !important;
    font-family: 'Material Icons' !important;
    
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    width: 42px !important;
    height: 42px !important;
    background-color: #f5f5f5 !important; /* พื้นหลังวงกลมเทาอ่อน */
    border-radius: 50% !important;
    
    font-size: 25px !important;
    line-height: 1 !important;
    color: #333333 !important;
    text-align: center !important;
    cursor: pointer !important;
    
    order: 99 !important;                 /* ล็อกให้อยู่บรรทัดบนสุด */
    margin: 0 auto 2px auto !important;  /* เว้นระยะห่างด้านล่างนิดหน่อย */
}

/* 3. ข้อความ "หน้าแรก" (อยู่บรรทัดล่าง ต่อใต้รูปบ้าน) */
#_desktop_user_info .user-info.d-flex::after {
    content: "หน้าแรก" !important;
    display: block !important;
    font-family: 'Noto Sans Thai', sans-serif !important;
    font-size: 14px !important;           /* ขนาดเท่ากับเข้าสู่ระบบ */
    color: #666666 !important;            /* สีเดียวกับเข้าสู่ระบบ */
    line-height: 1.2 !important;
    text-align: center !important;
    white-space: nowrap !important;
    
    order: 99 !important;                 /* ล็อกให้อยู่ต่อใต้รูปบ้านพอดี */

}

/* 1. จัดการตัวปุ่มหลัก: ซ่อนข้อความเดิมทั้งหมดก่อน */
.category-menu-container .btn-category-toggle {
    font-size: 0 !important;
    /* ซ่อนคำว่า "หมวดหมู่สินค้า" */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    width: 100% !important;
}

/* 2. บังคับให้ไอคอนรูป widgets (หมวดหมู่) แสดงผลปกติ */
.category-menu-container .btn-category-toggle i.material-icons:not(.arrow) {
    font-size: 16px !important;
    margin-bottom: 2px !important;
    visibility: visible !important;
}

/* 3. สร้างข้อความใหม่ "หมวดหมู่" ขึ้นมาแทน */
.category-menu-container .btn-category-toggle::after {
    content: "หมวดหมู่" !important;
    font-size: 16px !important;
    /* ขนาดเท่ากับเมนูอื่น */
    line-height: 1 !important;
    color: #666 !important;
    visibility: visible !important;
    display: block !important;
    font-family: inherit !important;
}

/* 4. ซ่อนลูกศร (arrow) ทิ้งไป */
.category-menu-container .btn-category-toggle i.arrow {
    display: none !important;
}

/* 1. ยกเลิกการล็อกความสูง 400px เดิม และบีบ Margin บน-ล่างของตัว Slider หลัก */
    #home-slider,
    .ratio-homeSlider,
    .homeslider-container,
    #carousel {
        height: auto !important;          /* ให้ความสูงยืดหดตามรูปจริง */
        min-height: initial !important;  /* ล้างค่าความสูงขั้นต่ำเดิม */
        margin-top: 0 !important;        /* ดันขึ้นชิดช่องค้นหาด้านบน */
        margin-bottom: 0 !important;     /* ลดพื้นที่ว่างด้านล่าง */
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* 2. บังคับตัว Carousel และรูปภาพให้สูงเท่ากับสัดส่วนภาพจริง */
    #home-slider .carousel,
    #home-slider .carousel-inner,
    #home-slider .carousel-item,
    #home-slider .carousel-content {
        height: auto !important;
        min-height: auto !important;
    }

    #home-slider .carousel-content img {
        height: auto !important;         /* ปล่อยความสูงรูปให้เป็น Auto ตามสัดส่วนภาพ */
        max-height: none !important;
        object-fit: contain !important;
    }

    /* 3. ดึงจุดไข่ปลา (Pagination Dots) ขึ้นมาชิดใต้รูปภาพ ไม่ให้ลอยไปไกล */
    #home-slider .carousel-indicators {
        position: relative !important;
        bottom: 0 !important;
        margin-top: 5px !important;      /* ระยะห่างจุดไข่ปลาจากใต้รูป */
        margin-bottom: 5px !important;
    }

    /* 4. ดึงหัวข้อ "สินค้ายอดนิยม" ขยับขึ้นมาต่อชิดด้านล่าง */
    .featured-products,
    #content-wrapper {
        padding-top: 0 !important;
        margin-top: 5px !important;     /* ปรับระยะห่างระหว่างสไลด์กับสินค้าตามชอบ */
    }













/* ============================================================
   FIX: สั่งจัดเรียงปุ่ม "หน้าแรก", "เข้าสู่ระบบ", "รถเข็น" เป็นแถวแนวนอน
   ============================================================ */

/* 1. ล้างค่า Pseudo-element เก่าใน user-info ทั้งหมดกันตีกัน */
#_desktop_user_info .user-info::before,
#_desktop_user_info .user-info::after,
#_desktop_user_info .user-info.d-flex::before,
#_desktop_user_info .user-info.d-flex::after {
    display: none !important;
    content: none !important;
}

/* 2. บังคับกล่องแม่ใหญ่ให้เรียงแนวนอน 100% */
#header-icons-wrapper,
#header-icons-wrapper > .header-block {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-around !important;
    width: 100% !important;
    height: 60px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 3. บังคับกล่อง Account ให้เรียงปุ่มลูก (หน้าแรก + เข้าสู่ระบบ) เป็นแนวนอนข้างกัน */
#_desktop_user_info {
    display: flex !important;
    flex-direction: row !important; /* หัวใจสำคัญ: จัดวางขนานแนวนอน */
    align-items: center !important;
    justify-content: space-around !important;
    flex: 2 !important;
    margin: 0 !important;
    position: relative !important; /* เพิ่มเพื่อเป็นกรอบให้ ::after */
}

/* 4. ปุ่ม "หน้าแรก" (สร้างด้วย ::before บน _desktop_user_info) */
#_desktop_user_info::before {
    /* Part 1: The Icon */
    content: "home" !important;
    font-family: 'Material Icons' !important;
    font-size: 28px !important; /* ขนาดไอคอนตามที่ต้องการ */
    color: #333333 !important;
    cursor: pointer !important;
    
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative; /* เพิ่มเพื่อรองรับการขยับตำแหน่ง */
    top: -6px; /* ขยับไอคอนขึ้นเพื่อสร้างช่องว่าง */

     /* --- Circle Styles --- */
    width: 44px !important;
    height: 44px !important;
    background-color: #f5f5f5 !important;
    border-radius: 50% !important;
}

/* สร้างข้อความ "หน้าแรก" ด้วย ::after และจัดตำแหน่ง */
#_desktop_user_info::after {
    content: "หน้าแรก" !important;
    font-family: 'Noto Sans Thai', sans-serif !important;
    font-size: 10px !important; /* ขนาดตัวหนังสือตามที่ต้องการ */
    color: #666666 !important;
    
    position: absolute;
    bottom: 5px; /* ปรับตำแหน่งข้อความลงมาด้านล่างเพื่อให้มีช่องว่าง 2px */
    left: 25%;   /* #_desktop_user_info กว้าง 2 ส่วน, ปุ่ม home คือครึ่งแรก (0-50%), กึ่งกลางคือ 25% */
    transform: translateX(-50%);
    line-height: 1;
    pointer-events: none; /* ทำให้คลิกทะลุไปโดนไอคอนได้ */
}

/* 5. ปุ่ม "เข้าสู่ระบบ" (จัดให้เป็นกล่องแนวตั้งขนานอยู่ข้างๆ หน้าแรก) */
#_desktop_user_info .user-info,
#_desktop_user_info .header-block {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
}

#_desktop_user_info .header-block__action-btn {
    width: 44px !important;
    height: 44px !important;
    background-color: #f5f5f5 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 2px auto !important;
}

#_desktop_user_info .header-block__title {
    display: block !important;
    font-size: 10px !important;
    color: #666666 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

/* 6. ปุ่ม "รถเข็น" */
#_desktop_cart {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

#_desktop_cart .header-block__action-btn {
    width: 44px !important;
    height: 44px !important;
    background-color: #f5f5f5 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 2px auto !important;
}












    
}

@media (min-width: 992px) {
    /* 1. สภาวะปกติ: ซ่อนเมนูไว้ก่อน */
    .category-menu-container .js-menu-desktop,
    .category-menu-container .main-menu {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }

    /* 2. สภาวะเมื่อมีการ "คลิก" ที่กลุ่มหมวดหมู่สินค้า: บังคับกางเมนูออก */
    .category-menu-container:focus-within .js-menu-desktop,
    .category-menu-container:focus-within .main-menu,
    .category-menu-container.active .js-menu-desktop,
    .category-menu-container.active .main-menu {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    /* สั่งซ่อนปุ่มสามขีดและปุ่ม Offcanvas ที่ซ้อนอยู่ในกลุ่มหมวดหมู่ */
    .category-menu-container .header-block.d-xl-none,
    .category-menu-container [data-bs-target="#mobileMenu"],
    .dropdown-vertical-menu .header-block.d-xl-none {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }
}