:root {
    --primary-color: #0b4de3; /* ธีมสีน้ำเงินเริ่มต้น */
    --primary-hover: #093baf;
    --bs-primary: #0b4de3;
    --text-main: #333;
    --text-muted: #888;
    --bg-body: #f4f6f9;
}

body {
    background-color: var(--bg-body);
    font-family: 'Prompt', sans-serif;
    color: var(--text-main);
    padding: 20px;
}

/* --- กรอบโครงสร้างหลัก (Main Container) --- */
.main-container {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #eaeaea;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    max-width: 1400px;
    margin: 0 auto;
    overflow: hidden;
}

/* --- Navbar --- */
.top-navbar {
    height: 72px;
    padding: 0 25px;
    border-bottom: 1px solid #eaeaea;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
}

.brand-logo {
    width: 230px; /* 1. กำหนดความกว้างให้เท่ากับกล่องตัวกรองพอดีเป๊ะ */
    display: flex;
    justify-content: center; /* 2. ดันรูปโลโก้ให้อยู่กึ่งกลางพื้นที่ 230px */
    align-items: center;
    margin-left: -10px; /* 3. ดึงไปทางซ้าย 10px เพื่อชดเชยระยะ Padding ให้เส้นขอบตรงกับกล่องด้านล่าง */

    font-size: 24px;
    font-weight: 700;
    color: var(--primary-color);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.3s ease;
}

.brand-logo:hover {
    opacity: 0.8;
}

/* กล่องค้นหา (ไอคอนอยู่ขวา) */
.search-box { position: relative; width: 450px; }
.search-box i {
    position: absolute; right: 15px; top: 50%;
    transform: translateY(-50%); color: #999;
}
.search-box input {
    padding-right: 45px; padding-left: 15px;
    border-radius: 8px; border: 1px solid #eaeaea;
    background-color: #fdfdfd; font-size: 14px;
}
.search-box input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem rgba(11, 77, 227, 0.1); 
}

.nav-actions .btn { font-size: 14px; color: #444; font-weight: 500; }

.badge-cart {
    background-color: var(--primary-color);
    border-radius: 50px;
    padding: 3px 8px;
    font-size: 12px;
    margin-left: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.color-dot-theme {
    width: 16px; height: 16px; border-radius: 50%; display: inline-block;
}

/* --- Layout --- */
.content-area { 
    display: flex; 
    padding: 15px;           /* เพิ่มระยะขอบรอบๆ ด้านในกรอบใหญ่ */
    gap: 15px;               /* เพิ่มช่องว่างระหว่างกล่องตัวกรอง กับ ส่วนเนื้อหาสินค้า */
    align-items: flex-start; /* ล็อกไม่ให้กล่องตัวกรองยืดลงไปสุดขอบล่างตามความสูงเนื้อหา */
}

/* --- Sidebar (ปรับเป็นรูปแบบกล่อง) --- */
.sidebar-filter {
    width: 230px; 
    min-width: 230px;
    border: 1px solid #eaeaea; /* เพิ่มกรอบล้อมรอบ 4 ด้าน */
    border-radius: 8px;        /* ทำมุมโค้งมนให้เหมือนกล่อง Toolbar */
    background-color: #fff;
    display: flex; 
    flex-direction: column;
    overflow: hidden;
}

/* ส่วนหัวตัวกรอง */
.sidebar-header {
    height: 60px; /* ล็อกความสูง 60px ให้แนวระดับตรงกับกล่อง Toolbar ขวามือเป๊ะๆ */
    padding: 0 20px;
    border-bottom: 1px solid #eaeaea;
    display: flex; 
    align-items: center; 
    gap: 10px;
}

/* ส่วนเนื้อหาตัวกรองด้านใน */
.sidebar-content {
    padding: 20px;
}

/* --- Main Content --- */
.main-content {
    flex-grow: 1; 
    min-width: 0; /* ป้องกันไม่ให้ Grid สินค้าล้นขอบจอ */
    /* ไม่ต้องใส่ padding: 25px; ในนี้แล้ว เพราะย้ายไปคุมใน .content-area แทน */
}

/* กล่อง Toolbar (แยกเป็นกล่องมนอิสระ) */
.toolbar-box {
    border: 1px solid #eaeaea;
    border-radius: 8px;
    padding: 12px 20px;
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 15px;
    background: #fff;
    height: 60px;
}

.sort-dropdown select {
    border-radius: 6px; border: 1px solid #eaeaea;
    padding: 5px 10px; font-size: 14px;
}
.sort-dropdown select:focus {
    border-color: var(--primary-color); box-shadow: 0 0 0 0.25rem rgba(11, 77, 227, 0.1);
}

/* Custom Styles สำหรับ Sidebar Filter Components */
.filter-group {
    margin-bottom: 25px;
    border-bottom: 1px solid #eaeaea;
    padding-bottom: 25px;
}
.filter-group:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.filter-title { font-weight: 700; font-size: 14px; color: var(--text-main); }

.custom-checkbox {
    width: 18px; height: 18px;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    accent-color: var(--primary-color);
    transition: accent-color 0.3s ease;
}
.custom-checkbox:checked {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.filter-list {
    max-height: 315px;
    overflow-y: auto;
}
.filter-list::-webkit-scrollbar { width: 4px; }
.filter-list::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; }

/* Product Cards */
.product-card {
    background: #fff; border-radius: 10px; border: 1px solid #eee;
    padding: 15px; position: relative; transition: 0.2s;
    height: 100%; display: flex; flex-direction: column;
}
.product-card:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.08); transform: translateY(-2px); border-color: #e5e5e5;
}
.product-badge {
    position: absolute; top: 15px; left: 15px; font-size: 10px;
    font-weight: 700; padding: 4px 8px; border-radius: 4px; color: white; z-index: 2;
}
.badge-best { background-color: var(--primary-color); transition: background-color 0.3s ease; }
.badge-sale { background-color: #e53935; }

.btn-fav {
    position: absolute; top: 12px; right: 12px; background: transparent;
    border: none; color: #ccc; font-size: 18px; z-index: 2; cursor: pointer;
}
.btn-fav:hover { color: var(--primary-color); }

.product-img {
    height: 150px; display: flex; align-items: center;
    justify-content: center; margin-bottom: 15px;
}
.product-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.product-title { font-size: 13px; font-weight: 500; margin-bottom: 6px; color: #333; }

.btn-add-cart {
    width: 100%; background-color: var(--primary-color); color: white;
    font-size: 13px; font-weight: 500; padding: 8px; border-radius: 6px;
    border: none; display: flex; align-items: center; justify-content: center; gap: 6px;
    transition: background-color 0.3s ease;
}
.btn-add-cart:hover { background-color: var(--primary-hover); color: white; }
/* ==========================================
   ปุ่มสินค้าหมด (Out of Stock)
   ========================================== */
.btn-out-of-stock {
    width: 100%;
    background-color: #e2e6ea; /* พื้นหลังสีเทา */
    color: #8c98a4;            /* ตัวหนังสือสีเทาเข้ม */
    font-size: 13px;
    font-weight: 500;
    padding: 8px;
    border-radius: 6px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.3s ease;
}

.btn-out-of-stock:hover {
    background-color: #d3d9df; /* เมื่อโฮเวอร์ให้สีเข้มขึ้นนิดนึง แต่ยังดูปิดใช้งานอยู่ */
    color: #6c757d;
}

/* ==========================================
   Cart Dropdown Styles
   ========================================== */
/* ตัวเลขสีดำทับไอคอนรถเข็น */
.cart-badge-overlap {
    position: absolute;
    top: -6px;
    right: -8px;
    background-color: #222;
    color: white;
    font-size: 11px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 50%;
    border: 2px solid #fff;
    line-height: 1.2;
}

/* กล่อง Dropdown ตะกร้า */
.cart-dropdown-menu {
    width: 360px;
    border-radius: 8px;
    padding: 0;
    border: 1px solid #eaeaea;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.cart-items-container {
    max-height: 320px;
    overflow-y: auto;
}
.cart-items-container::-webkit-scrollbar { width: 4px; }
.cart-items-container::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; }

/* รูปสินค้าในตะกร้า */
.cart-item-img {
    width: 65px;
    height: 65px;
    object-fit: contain;
    border: 1px solid #eaeaea;
    border-radius: 4px;
    background: #fff;
}

/* ชื่อสินค้า (ตัดคำถ้าเกิน 2 บรรทัด) */
.cart-item-title {
    font-size: 13.5px;
    color: #333;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}

/* ปุ่ม เพิ่ม/ลด จำนวนสินค้า */
.qty-control {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd;
    background: #f8f9fa;
    cursor: pointer;
    font-size: 14px;
    color: #555;
}
.qty-control:hover { background: #e2e6ea; }
.qty-input {
    width: 30px;
    height: 24px;
    border: 1px solid #ddd;
    border-left: none;
    border-right: none;
    text-align: center;
    font-size: 13px;
    outline: none;
}

/* ==========================================
   Price Range Slider
   ========================================== */
.slider-container {
    position: relative;
    width: 100%;
    height: 6px;
    margin: 20px 0;
}
.slider-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #e9ecef;
    border-radius: 5px;
}
.slider-track {
    position: absolute;
    height: 100%;
    background-color: var(--primary-color);
    border-radius: 5px;
    z-index: 1;
}
.range-input {
    position: absolute;
    width: 100%;
    top: -6px;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    background: none;
    pointer-events: none;
    z-index: 2;
}
.range-input::-webkit-slider-thumb {
    pointer-events: auto;
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background-color: var(--primary-color);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

.range-input::-moz-range-thumb {
    pointer-events: auto;
    width: 18px;
    height: 18px;
    background-color: var(--primary-color);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
    border: none;
}

/* ==========================================
   ซ่อนลูกศรขึ้น-ลง (Spin Buttons) ในช่องกรอกตัวเลข
   ========================================== */
/* สำหรับ Chrome, Safari, Edge, Opera */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* สำหรับ Firefox */
input[type="number"] {
    -moz-appearance: textfield;
}

/* ==========================================
   Effect ลอยเข้าตะกร้า
   ========================================== */
.flying-item {
    position: fixed;
    z-index: 9999;
    border-radius: 50%;
    object-fit: cover;
    pointer-events: none; /* ป้องกันไม่ให้เมาส์ไปโดนรูปตอนลอย */
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    /* ตั้งค่าความเร็วและความสมูทของการลอย */
    transition: all 0.7s cubic-bezier(0.25, 1, 0.5, 1); 
}

/* Effect ตะกร้าสั่นเวลารูปวิ่งไปถึง */
.cart-shake {
    animation: shakeCart 0.4s ease-in-out;
}

@keyframes shakeCart {
    0% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.2) rotate(-10deg); }
    50% { transform: scale(1.2) rotate(10deg); }
    75% { transform: scale(1.2) rotate(-10deg); }
    100% { transform: scale(1) rotate(0deg); }
}

/* ==========================================
   จัดระเบียบ Pagination (ให้ข้อความอยู่ใต้ปุ่ม)
   ========================================== */
#pagination-container nav div.d-sm-flex {
    flex-direction: column-reverse !important; /* สลับให้ปุ่มขึ้นด้านบน ข้อความลงด้านล่าง */
    align-items: center !important;            /* จัดให้อยู่กึ่งกลาง */
    justify-content: center !important;
    gap: 1px;                                 /* เพิ่มระยะห่างระหว่างปุ่มและข้อความ */
}

/* ลบระยะขอบด้านล่างของข้อความ Showing ออกเพื่อให้ดูสมดุล */
#pagination-container nav div.d-sm-flex > div:first-child p {
    margin-bottom: 0 !important;
}

/* ==========================================
   ปรับแต่งขนาดกล่องค้นหาสินค้า (Search Box)
   ========================================== */

/* 1. ปรับความกว้างให้สั้นลง (เสมอป้าย Hisense) */
.top-navbar .search-box {
    width: 100% !important;
    
    /* 1. จัดขอบซ้าย: ดันกล่องไปทางขวาให้ขอบซ้ายตรงกับกล่อง "แสดงสินค้าทั้งหมด" */
    margin-left: 20px !important; /* 🔴 ลองเพิ่มจาก 50 เป็น 140 หรือ 160 จนกว่าขอบซ้ายจะเป๊ะ */
    
    /* 2. จัดขอบขวา: เมื่อขอบซ้ายเป๊ะแล้ว ค่อยมายืด/หดความยาวให้ตรงกับป้าย Hisense */
    max-width: 666px !important; /* 🔴 ปรับลดตัวเลขนี้ลงอีกนิดถ้ายาวไป หรือเพิ่มถ้าสั้นไป */
    
    margin-right: auto !important; /* ป้องกันไม่ให้ไปเบียดเมนูฝั่งขวา */
}

/* 2. ปรับความสูงให้เตี้ยลง (เสมอกับกล่อง "แสดงสินค้าทั้งหมด") */
.top-navbar .search-box .form-control {
    /* 🔴 ปรับลดจาก 56px ลงมาเหลือประมาณ 48px หรือ 50px */
    height: 48px !important; 
    font-size: 15px !important; /* ลดขนาดฟอนต์ลงนิดนึงให้สมดุลกับกล่องที่เตี้ยลง */
    border-radius: 8px !important;
}

/* 3. จัดตำแหน่งไอคอนแว่นขยาย */
.top-navbar .search-box i.bi-search {
    position: absolute;
    top: 50% !important;
    transform: translateY(-50%) !important; 
    font-size: 16px; /* ลดขนาดแว่นขยายลงนิดนึง */
}

/* ==========================================
   ล็อกความกว้างข้อความตะกร้าสินค้า (กันเมนูดุ๊กดิ๊ก)
   ========================================== */
.cart-text-fixed {
    /* จองพื้นที่ความกว้างไว้ตายตัว */
    min-width: 150px; 
    
    /* บังคับให้ตัวหนังสือชิดซ้ายเสมอ เวลาราคายืดจะยืดไปทางขวาในพื้นที่ที่จองไว้ */
    text-align: left; 
    
    /* (เผื่ออนาคต) บังคับไม่ให้ข้อความตกบรรทัด */
    white-space: nowrap; 
}