/* =========================================
   🎨 GLOBAL THEME & VARIABLES (สีเดิมที่คุณชอบ)
   ========================================= */
:root {
    /* กำหนดตัวแปรกลาง (ค่าเริ่มต้น) */
    --primary-color: #ffa303;
    /* ปุ่มกด */
    --price-tag-color: #ffa303;
    /* ป้ายราคา */
    --navbar-color: #ffa303;
    --global-radius: 12px;
    /* ความโค้งมน */
    --card-img-height: 140px;
    /* ขนาดรูป */
}

body {
    background-color: #f0f2f5;
    font-family: 'Sarabun', sans-serif;
    overflow-x: hidden;
    padding-top: 65px;
}

/* =========================================
   🔧 FIX: บังคับให้ Navbar ใช้สีจากตัวแปรที่ตั้งค่า
   ========================================= */
.navbar-custom {
    /* ดึงค่าสีจากตัวแปร --navbar-color มาแสดงผล */
    background-color: var(--navbar-color) !important;

    /* เพิ่ม Effect ให้สีเปลี่ยนแบบนุ่มนวล */
    transition: background-color 0.3s ease;

    /* (แถม) ทำให้เงาดูสวยขึ้น */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
}

/* ปรับสีตัวอักษรบน Navbar ให้เป็นสีขาวเสมอ (จะได้อ่านง่ายเวลาพื้นหลังเข้ม) */
.navbar-custom .brand-text,
.navbar-custom .branch-text,
.navbar-custom i,
.navbar-custom #current-user-name,
.navbar-custom small {
    color: #ffffff !important;
}

/* =========================================
   🔧 FIX: บังคับใช้ธีม (ปุ่ม + ความโค้งมน)
   ========================================= */

/* 1. บังคับใช้สีปุ่ม (Primary Color) */
.btn-primary,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
    /* บังคับตัวอักษรสีขาว */
}

/* ทำให้ปุ่ม Outline (ขอบสี) เปลี่ยนตามด้วย */
.btn-outline-primary {
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.btn-outline-primary:hover {
    background-color: var(--primary-color) !important;
    color: #fff !important;
}

/* 2. บังคับใช้ความโค้งมน (Border Radius) */
/* ใช้ * (Universal Selector) เพื่อครอบคลุมทุกอย่างที่ควรจะโค้ง */
.btn,
.form-control,
.form-select,
.card,
.card-custom,
.modal-content,
.dropdown-menu,
.nav-link,
.alert,
.pos-product-card,
/* การ์ดสินค้า */
.dashboard-stat-card

/* การ์ดหน้าแดชบอร์ด */
    {
    border-radius: var(--global-radius) !important;
    transition: border-radius 0.3s ease;
    /* เอฟเฟกต์นุ่มๆ ตอนเลื่อนปรับ */
}

/* (แถม) ทำให้รูปในการ์ดโค้งตามด้วย */
.pos-product-card img,
.card-img-top {
    border-top-left-radius: var(--global-radius);
    border-top-right-radius: var(--global-radius);
}


/* =========================================
   🧩 SIDEBAR (เมนูหลัก) - แก้ไขใหม่ให้ไม่ตีกัน
   ========================================= */
.sidebar {
    width: 260px;
    height: 100vh;
    background: #fff;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    z-index: 1000;
}

/* ลิงก์ในเมนู */
.nav-link {
    color: #555;
    margin-bottom: 5px;
    border-radius: 10px;
    padding: 10px 15px;
    transition: all 0.2s;
    cursor: pointer;
}

.nav-link:hover,
.nav-link.active {
    background: linear-gradient(135deg, #ffa303, #ffc107);
    /* สีส้มไล่เฉด */
    color: white;
    font-weight: bold;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.nav-link i {
    margin-right: 10px;
    font-size: 1.2rem;
}

/* =========================================
   📱 MOBILE SIDEBAR (หัวใจสำคัญ: โหมดมือถือ)
   ========================================= */
@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        top: 0;
        /* 🔥 ซ่อนไว้ทางซ้ายนอกจอ */
        left: -300px;

        width: 280px;
        height: 100%;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        /* เอฟเฟกต์สไลด์นุ่มๆ */
        z-index: 9999;
        /* อยู่บนสุดทับทุกอย่าง */
        box-shadow: 4px 0 15px rgba(0, 0, 0, 0.15);

        /* บังคับแสดงผล (แก้ปัญหาเมนูหาย) */
        display: flex !important;
    }

    /* คลาส show: เมื่อถูกกดจะสไลด์เข้ามาที่ 0 */
    .sidebar.show {
        left: 0 !important;
    }

    /* ฉากหลังสีดำ (Overlay) */
    #sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9998;
        /* อยู่ใต้เมนู */
        backdrop-filter: blur(2px);
    }
}

/* ซ่อน Sidebar ใน PC (ถ้าหน้า Home เป็นเมนูหลัก) */
@media (min-width: 769px) {
    .sidebar {
        display: none !important;
    }
}

/* =========================================
   📦 GENERAL COMPONENTS
   ========================================= */
.card-custom {
    border: none;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

/* Animation */
.page-section {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* =========================================
   🏠 MODERN DASHBOARD
   ========================================= */
.dashboard-stat-card {
    background: linear-gradient(135deg, #2c3e50, #34495e);
    color: white;
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.dashboard-stat-card::before {
    content: "\F1C7";
    font-family: bootstrap-icons;
    position: absolute;
    right: -20px;
    bottom: -20px;
    font-size: 10rem;
    opacity: 0.1;
    transform: rotate(-20deg);
}

.menu-grid-btn {
    border: none;
    border-radius: 15px;
    color: white !important;
    width: 100%;
    height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 1.3rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.menu-grid-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.menu-grid-btn:active {
    transform: translateY(-2px);
}

.menu-grid-btn i {
    font-size: 3rem;
    margin-bottom: 8px;
}

/* สีปุ่มเมนู */
.btn-sale {
    background: linear-gradient(135deg, #2193b0, #6dd5ed);
}

.btn-stock {
    background: linear-gradient(135deg, #11998e, #38ef7d);
}

.btn-member {
    background: linear-gradient(135deg, #fce38a, #f38181);
    color: #444 !important;
}

.btn-member i {
    color: #444;
}

.btn-report {
    background: linear-gradient(135deg, #834d9b, #d04ed6);
}

.btn-expense {
    background: linear-gradient(135deg, #ff9966, #ff5e62);
}

.btn-setting {
    background: linear-gradient(135deg, #bdc3c7, #2c3e50);
}

/* =========================================
   🛍️ POS SYSTEM
   ========================================= */
.category-scroll {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 10px;
    gap: 10px;
}

.category-scroll::-webkit-scrollbar {
    height: 4px;
}

.category-scroll::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

.btn-category {
    border-radius: 50px;
    padding: 8px 20px;
    border: 1px solid #eee;
    background: white;
    color: #555;
    white-space: nowrap;
}

.btn-category.active {
    background: var(--primary-color);
    color: white;
    border-color: transparent;
}

/* การ์ดสินค้า */
.pos-product-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    cursor: pointer;
    position: relative;
    height: 100%;
    transition: transform 0.2s;
}

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

/* ป้ายรหัสสินค้า & ราคาส่ง (จัดระเบียบใหม่) */
.card-badges-container {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-start;
}

.product-code-tag {
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 0.7rem;
}

.wholesale-tag {
    background: #dc3545;
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.65rem;
}

/* ป้ายราคา */
.pos-product-card .price-tag {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--price-tag-color);
    color: white;
    font-weight: bold;
    padding: 4px 10px;
    border-radius: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 5;
}

/* รูปภาพ */
.img-box {
    height: var(--card-img-height);
    background: linear-gradient(to bottom, #ffffff 0%, #f8f9fa 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.pos-product-card img {
    max-height: 100%;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
}

/* ข้อมูลสินค้า */
.pos-product-card .info {
    padding: 10px;
    text-align: center;
}

.pos-product-card .title {
    font-weight: 600;
    font-size: 0.95rem;
    color: #333;
    height: 2.6em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.stock-badge {
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 4px;
    background: #e8f5e9;
    color: #2e7d32;
    display: inline-block;
}

.stock-badge.low {
    background: #ffebee;
    color: #c62828;
}

.stock-badge.out {
    background: #eee;
    color: #999;
}

/* =========================================
   🛒 MOBILE RESPONSIVE LAYOUT (LOYVERSE)
   ========================================= */
@media (max-width: 768px) {

    /* ปรับ Layout หลัก */
    body {
        padding-top: 60px;
        padding-bottom: 80px;
        /* เว้นที่ให้ปุ่มลอย */
    }

    /* ซ่อนตะกร้า (Cart) ให้เป็น Overlay เลื่อนขึ้นมา */
    #cart-panel {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100% !important;
        background: white;
        z-index: 1050;
        transform: translateY(100%);
        /* ซ่อนข้างล่าง */
        transition: transform 0.3s ease-in-out;
        padding: 0 !important;
    }

    #cart-panel.mobile-cart-open {
        transform: translateY(0) !important;
        /* เลื่อนขึ้นมา */
    }

    /* ปรับ Grid สินค้าเป็น 2 คอลัมน์ */
    .col-6 {
        width: 50% !important;
        padding: 5px !important;
    }

    .pos-product-card {
        margin-bottom: 0;
    }

    /* ปุ่มสรุปยอดลอย (Floating Bar) */
    #mobile-cart-bar {
        position: fixed;
        bottom: 20px;
        left: 15px;
        right: 15px;
        background: var(--primary-color);
        height: 60px;
        border-radius: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;
        color: white;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        z-index: 1040;
        cursor: pointer;
    }

    /* ซ่อนปุ่มลอยถ้าเปิดตะกร้าอยู่ */
    #cart-panel.mobile-cart-open~#mobile-cart-bar {
        display: none !important;
    }
}

/* ซ่อน Elements มือถือเมื่ออยู่บน PC */
@media (min-width: 769px) {

    #mobile-cart-bar,
    #mobile-bottom-nav,
    .cart-header-mobile {
        display: none !important;
    }
}

/* =========================================
   📦 PRODUCT GRID SYSTEM (ฉบับแก้ไข: ทะลุทะลวง .row)
   ========================================= */
:root {
    --pos-grid-columns: 4;
    /* ค่าเริ่มต้น */
}

/* 1. สั่งให้ Grid ทำงานที่ Container */
#product-list-container {
    display: grid !important;
    grid-template-columns: repeat(var(--pos-grid-columns, 4), 1fr) !important;
    gap: 10px !important;
    padding: 10px !important;
    align-content: start !important;

    /* ล้างค่าเดิม */
    flex-wrap: wrap !important;
    width: 100% !important;
}

/* 2. 🔥 แก้จุดตาย: ถ้ามี .row ขวางอยู่ ให้เปลี่ยน .row เป็น Grid ด้วย (หรือเป็นแค่ทางผ่าน) */
#product-list-container>.row {
    display: contents !important;
    /* ทำให้ .row หายตัวไป (เสมือนไม่มีอยู่จริง) */
    /* หรือถ้า contents ไม่เวิร์คในบาง browser ให้ใช้แบบนี้แทน:
    display: grid !important;
    grid-template-columns: repeat(var(--pos-grid-columns, 4), 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 !important;
    */
}

/* 3. สั่งให้การ์ดสินค้าเต็มช่อง Grid ของตัวเอง */
#product-list-container>div,
#product-list-container .row>div,
/* เพิ่มตัวนี้เผื่อมันอยู่ใน row */
#product-list-container .pos-product-card-wrapper,
#product-list-container .col-md-3,
#product-list-container .col-6,
#product-list-container .col-12 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
}

/* 4. มือถือให้เหลือ 2 คอลัมน์ */
@media (max-width: 768px) {
    #product-list-container {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* =========================================
   📜 LIST VIEW MODE (ฉบับปรับปรุง: สวยงาม เป็นระเบียบ)
   ========================================= */

/* 1. ปรับ Container ให้เป็น 1 คอลัมน์ */
#product-list-container.view-list {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 10px !important;
}

/* 2. จัด Layout ของการ์ดให้เป็นแนวนอน (Flex Row) */
#product-list-container.view-list .pos-product-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    /* จัดกึ่งกลางแนวตั้ง */
    justify-content: space-between !important;
    height: auto !important;
    min-height: 70px;
    padding: 8px 15px !important;
    text-align: left !important;
    border: 1px solid #eee;
    /* เพิ่มขอบบางๆ ให้ดูแยกส่วนชัดเจน */
}

/* 3. จัดการรูปภาพ (ให้ไปอยู่ซ้ายสุด - Order 1) */
#product-list-container.view-list .pos-product-card .img-box {
    order: 1;
    /* ลำดับที่ 1 */
    width: 55px !important;
    height: 55px !important;
    min-width: 55px !important;
    padding: 0 !important;
    margin-right: 15px !important;
    background: transparent !important;
    border-radius: 8px;
    overflow: hidden;
    /* กันรูปเกินขอบ */
}

#product-list-container.view-list .pos-product-card .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* รูปเต็มกรอบสวยๆ */
}

/* 4. ส่วนข้อมูลสินค้า (ชื่อ + สต็อก) (ลำดับที่ 2) */
#product-list-container.view-list .pos-product-card .info {
    order: 2;
    /* ลำดับที่ 2 */
    padding: 0 !important;
    flex-grow: 1 !important;
    /* ขยายเต็มพื้นที่ว่าง */
    display: flex !important;
    flex-direction: column !important;
    /* ชื่ออยู่บน สต็อกอยู่ล่าง */
    align-items: flex-start !important;
    /* ชิดซ้าย */
    justify-content: center !important;
}

/* 4.1 ชื่อสินค้า */
#product-list-container.view-list .pos-product-card .title {
    font-size: 1.1rem !important;
    /* ตัวใหญ่ขึ้น */
    font-weight: bold;
    margin-bottom: 4px !important;
    text-align: left !important;
    height: auto !important;
    -webkit-line-clamp: 1 !important;
    /* ตัดบรรทัดเดียว */
}

/* 4.2 แก้ไขป้ายสต็อก (ที่เคยยาวๆ ให้หดเหลือแค่นิดเดียว) */
#product-list-container.view-list .stock-badge {
    display: inline-block !important;
    width: auto !important;
    /* ห้ามกว้างเต็มจอ */
    padding: 2px 10px !important;
    font-size: 0.8rem !important;
    border-radius: 20px !important;
}

/* 5. ป้ายราคา (ย้ายไปขวาสุด - Order 3) */
#product-list-container.view-list .pos-product-card .price-tag {
    order: 3;
    /* ลำดับที่ 3 */
    position: static !important;
    /* เลิกใช้ Absolute */
    margin-left: 15px !important;
    font-size: 1.2rem !important;
    /* ราคาตัวใหญ่สะใจ */
    padding: 5px 15px !important;
    min-width: 80px;
    text-align: center;
    box-shadow: none !important;
    background: var(--price-tag-color) !important;
    /* ใช้สีตามธีม */
    color: #fff !important;
    border-radius: 50px !important;
    /* ทรงแคปซูล */
}

/* (ซ่อนป้าย Code/Wholesale เพื่อความสะอาดตา) */
#product-list-container.view-list .card-badges-container {
    display: none !important;
}

/* =========================================
   📱 MOBILE LIST VIEW TWEAKS (แก้ชื่อยาวตัดขึ้นบรรทัดใหม่)
   ========================================= */
@media (max-width: 768px) {

    /* 1. แก้ไขชื่อสินค้าให้ขึ้นบรรทัดใหม่ได้ */
    #product-list-container.view-list .pos-product-card .title {
        white-space: normal !important;
        /* อนุญาตให้ข้อความขึ้นบรรทัดใหม่ */

        /* เทคนิคตัดคำเมื่อครบ 2 บรรทัด (สวยกว่าปล่อยยาวเฟื้อย) */
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        /* โชว์สูงสุด 2 บรรทัด */
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;

        height: auto !important;
        /* ความสูงยืดหดตามข้อความ */
        font-size: 0.9rem !important;
        /* ลดขนาดตัวอักษรนิดนึงให้พอดีจอ */
        line-height: 1.3 !important;
        /* ระยะห่างบรรทัด */
        margin-bottom: 2px !important;
    }

    /* 2. ปรับการ์ดให้ยืดความสูงได้ตามเนื้อหา */
    #product-list-container.view-list .pos-product-card {
        height: auto !important;
        min-height: 75px !important;
        /* ความสูงขั้นต่ำ */
        padding: 8px 10px !important;
        /* ลดขอบข้างนิดนึง */
    }

    /* 3. ลดขนาดป้ายราคาบนมือถือ (จะได้ไม่เบียดชื่อ) */
    #product-list-container.view-list .pos-product-card .price-tag {
        font-size: 1rem !important;
        padding: 4px 10px !important;
        min-width: 60px !important;
        margin-left: 10px !important;
    }

    /* 4. ปรับขนาดรูปบนมือถือให้เล็กลงอีกนิด */
    #product-list-container.view-list .pos-product-card .img-box {
        width: 45px !important;
        height: 45px !important;
        min-width: 45px !important;
        margin-right: 10px !important;
    }
}

/* =========================================
   📱 MOBILE GRID VIEW TWEAKS (แก้ชื่อยาวในโหมดตาราง)
   ========================================= */
@media (max-width: 768px) {

    /* ใช้ :not(.view-list) เพื่อเจาะจงเฉพาะ "โหมดตาราง" เท่านั้น */
    #product-list-container:not(.view-list) .pos-product-card .title {

        /* 1. อนุญาตให้ขึ้นบรรทัดใหม่ */
        white-space: normal !important;

        /* 2. เทคนิคตัดคำที่บรรทัดที่ 2 */
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        /* โชว์สูงสุด 2 บรรทัด */
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        /* ซ่อนส่วนที่เกิน */

        /* 3. จัดระเบียบความสูงและตัวอักษร */
        height: 2.6em !important;
        /* ล็อคความสูง title ให้เท่ากันทุกใบ (จะได้ Grid ไม่เบี้ยว) */
        font-size: 0.85rem !important;
        /* ลดตัวหนังสือลงนิดนึงให้พอดีการ์ดเล็ก */
        line-height: 1.3 !important;
        margin-bottom: 5px !important;
    }

    /* (แถม) ปรับ Padding ในการ์ดโหมดตารางให้กระชับขึ้น */
    #product-list-container:not(.view-list) .pos-product-card {
        padding: 5px !important;
    }

    #product-list-container:not(.view-list) .pos-product-card .info {
        padding: 5px 2px !important;
    }
}

/* =========================================
   🔘 VIEW MODE TOGGLE (ปุ่มสลับโหมดแบบใหม่)
   ========================================= */

/* 1. กล่องพื้นหลัง (ทรงแคปซูลสีเทาอ่อน) */
.view-mode-toggle {
    background-color: #f1f3f5;
    /* สีพื้นหลังเทาอ่อน */
    border-radius: 50px;
    /* ความมนเต็มพิกัด */
    padding: 4px;
    /* ระยะห่างขอบ */
    display: inline-flex;
    position: relative;
    border: 1px solid #e9ecef;
}

/* 2. ตัวปุ่มปกติ (ยังไม่เลือก) */
.view-mode-btn {
    padding: 6px 20px;
    border-radius: 50px;
    /* มนตามกล่องแม่ */
    font-size: 0.9rem;
    color: #6c757d;
    /* สีตัวอักษรเทาเข้ม */
    cursor: pointer;
    transition: all 0.3s ease;
    /* เอฟเฟกต์นุ่มๆ */
    border: none;
    font-weight: 500;
    display: flex;
    align-items: center;
}

.view-mode-btn:hover {
    color: #333;
    /* เมาส์ชี้แล้วตัวเข้มขึ้น */
}

/* 3. 🔥 เมื่อถูกเลือก (Active) */
.btn-check:checked+.view-mode-btn {
    background-color: var(--primary-color) !important;
    /* สีตามธีม */
    color: #ffffff !important;
    /* ตัวหนังสือสีขาว */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    /* เงาลอยๆ */
    transform: scale(1.05);
    /* ขยายขึ้นนิดนึงให้ดูเด่น */
}

/* =========================================
   🖼️ NAVBAR LOGO & BRAND (ปรับแต่งโลโก้บนแถบเมนู)
   ========================================= */

/* 1. ปรับกล่องใส่โลโก้ให้รองรับรูปภาพ */
.navbar-custom .logo-box {
    width: 42px;
    /* กำหนดขนาดให้แน่นอน */
    height: 42px;
    min-width: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* กันรูปเกินขอบ */
    border-radius: 8px;
    /* มนนิดๆ */
    background: rgba(255, 255, 255, 0.2);
    /* พื้นหลังจางๆ (เผื่อเป็นไอคอน) */
    color: #fff;
    margin-right: 10px;
}

/* 2. สไตล์ของรูปภาพโลโก้ */
.navbar-custom .logo-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* ให้รูปแสดงครบสัดส่วน ไม่โดนตัด */
}

/* 3. ลบพื้นหลังออกถ้าเป็นรูปภาพ (จะได้ไม่เห็นกรอบซ้อน) */
.navbar-custom .logo-box.has-image {
    background: transparent !important;
}

/* =========================================
   🧲 FIXED SEARCH BAR (ฉบับแก้ไข: เผื่อความสูงหมวดหมู่ + แก้ปุ่มจาง)
   ========================================= */
@media (max-width: 768px) {

    /* 1. ล็อคพฤติกรรมการเด้งของหน้าจอ */
    body {
        overscroll-behavior-y: none;
    }

    /* 2. ตัวแถบค้นหา (Fixed) */
    .sticky-search-bar {
        position: fixed !important;
        top: 60px !important;
        /* เกาะใต้ Navbar */
        left: 0 !important;
        width: 100% !important;
        z-index: 1030 !important;

        background-color: #ffffff !important;
        /* 🔥 บังคับพื้นหลังสีขาวทึบ 100% (แก้ปุ่มโปร่ง) */

        margin: 0 !important;
        border-radius: 0 0 20px 20px !important;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08) !important;
        padding: 10px 15px 5px 15px !important;
        /* ปรับระยะห่างภายใน */
    }

    /* 3. 🔥 ดันรายการสินค้าลงมาให้พ้น (เพิ่มระยะจาก 85px เป็น 160px) */
    /* เพราะเรามีทั้งช่องค้นหา + แถบหมวดหมู่ มันเลยสูงกินที่เยอะ */
    #product-panel {
        padding-top: 100px !important;
    }

    /* 4. ปรับช่อง Input ให้สวยงาม (โดยไม่กระทบปุ่มเมนู) */
    .sticky-search-bar input {
        background-color: #f1f3f5 !important;
        /* ให้พื้นหลังสีเทาเฉพาะช่องพิมพ์ */
        border: none !important;
        border-radius: 50px !important;
        /* มนๆ สวยๆ */
        box-shadow: none !important;
        height: 45px !important;
        /* ความสูงช่องพิมพ์ */
    }

    /* (ลบโค้ดที่ทำให้ .d-flex เป็นสีเทาออก เพื่อให้ปุ่มเมนูเด่นบนพื้นขาว) */
}

/* ============================================================
   📱 1. MOBILE ZONE (มือถือ: ต่ำกว่า 767px)
   ============================================================ */
/* 🔥 แก้จุดตัด: ให้มือถือจบที่ 767px (iPad 768px จะได้ไปเข้าโหมดคอม) */
@media (max-width: 767px) {
    /* ... (โค้ดมือถือเดิม คงไว้เหมือนเดิม) ... */
    #product-list-container, #product-panel {
        touch-action: pan-y !important;
        overflow-x: hidden !important;
        width: 100% !important;
    }
    #product-panel {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    #product-list-container {
        padding-left: 8px !important;
        padding-right: 8px !important;
        padding-bottom: 80px !important;
        gap: 8px !important;
        justify-content: center !important;
    }
}


/* ============================================================
   🖥️ 2. DESKTOP & IPAD ZONE (คอมและแท็บเล็ต: 768px ขึ้นไป)
   ============================================================ */
/* 🔥 เริ่มต้นที่ 768px (iPad แนวตั้ง) */
@media (min-width: 768px) {

    /* --- พื้นที่แสดงสินค้า --- */
    #product-panel {
        height: calc(100vh - 75px) !important; 
        overflow-y: auto !important; 
        padding: 15px !important;
        padding-bottom: 50px !important;
        
        /* ล้างค่า Mobile */
        background: transparent !important; 
    }
    /* Scrollbar สวยๆ */
    #product-panel::-webkit-scrollbar { width: 6px; }
    #product-panel::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }

    /* --- แถบค้นหา (Sticky) --- */
    .sticky-search-bar {
        position: sticky !important;
        top: 0 !important;
        z-index: 10 !important;
        width: 100% !important;
        margin-bottom: 15px !important;
        padding-bottom: 10px !important;
        background: #f0f2f5 !important;
        box-shadow: none !important;
    }

    /* --- Grid สินค้า (4 แถวตามสั่ง) --- */
    #product-list-container {
        display: grid !important;
        /* ใช้ตัวแปร slider (ถ้าไม่มีให้ default 4) */
        grid-template-columns: repeat(var(--pos-grid-columns, 4), 1fr) !important; 
        gap: 12px !important; /* ลดช่องว่างลงนิดนึงให้ iPad ไม่อึดอัด */
        padding: 0 !important;
        margin: 0 !important;
        touch-action: auto !important;
    }

    /* --- การ์ดสินค้า (ย่อขนาดให้พอดี) --- */
    .pos-product-card {
        width: 100% !important;
        margin: 0 !important;
        /* ลดความสูงขั้นต่ำลง เผื่อ iPad จอเล็ก */
        min-height: 240px !important; 
    }

    /* --- ซ่อนของมือถือ --- */
    .d-md-none, .sticky-search-bar button.d-md-none { display: none !important; }
    .container, .container-fluid { max-width: 100% !important; padding: 0 15px !important; }

    /* =========================================
       ✨ TABLET TWEAKS (ปรับจูนเฉพาะ iPad ให้ 4 แถวไม่ล้น)
       ========================================= */
    /* ช่วงความกว้าง 768px - 1100px (iPad แนวตั้ง/แนวนอน) */
    @media (max-width: 1100px) {
        
        /* 1. ลดขนาดรูปและตัวหนังสือลง */
        .pos-product-card .img-box {
            height: 120px !important; /* ลดจาก 140px */
        }
        .pos-product-card .title {
            font-size: 0.9rem !important; /* ลดตัวหนังสือลง */
        }
        .pos-product-card .price-tag {
            font-size: 0.9rem !important;
            padding: 2px 8px !important;
        }

        /* 2. ลด Gap ของ Grid ลงอีก */
        #product-list-container {
            gap: 8px !important; 
        }

        /* 3. 🔥 บังคับซ่อน Sidebar บน iPad แนวตั้ง (768px-991px) */
        /* เพื่อให้มีพื้นที่เหลือเฟือสำหรับ 4 แถว (ไม่งั้น Sidebar จะเบียดจนตกขอบ) */
        .sidebar {
            display: none !important; /* ซ่อน Sidebar */
        }
        /* โชว์ปุ่ม Hamburger แทน (เพื่อให้กดเรียกเมนูได้) */
        .sticky-search-bar button.d-md-none {
            display: block !important;
        }
        /* ขยาย Product Panel ให้เต็มจอเมื่อไม่มี Sidebar */
        main, .content-page {
            margin-left: 0 !important;
            width: 100% !important;
        }
    }

    /* =========================================
       🔨 FIX LIST VIEW (โหมดรายการ: เรียงแถวเดียว)
       ========================================= */
    #product-list-container.view-list {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    #product-list-container.view-list .pos-product-card {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        min-height: 70px !important;
        padding: 8px 10px !important;
    }
    #product-list-container.view-list .img-box {
        width: 50px !important; height: 50px !important;
        margin-right: 15px !important; flex-shrink: 0;
    }
    #product-list-container.view-list .info { text-align: left; flex-grow: 1; }
    #product-list-container.view-list .title { font-size: 1rem !important; margin: 0; }
    #product-list-container.view-list .price-tag { 
        position: static !important; margin-left: 10px; font-size: 1.1rem !important; 
    }
    #product-list-container.view-list .card-badges-container { display: none !important; }
}