/*
*** FINAL COLOR REVISION: Pale Mint Green Background + Soft Taupe Navbar + RED Price ***
*** สีพื้นฐาน: Pale Mint Green (#E8F5E9) | แถบบาร์: Soft Taupe (#E0E0E0) | สีเน้นราคา: แดงเข้ม (#E31B54) ***
*/

/* ========================================================================= */
/* 1. BASE STYLES & LAYOUT (สไตล์พื้นฐานและโครงสร้าง) */
/* ========================================================================= */

body {
    font-family: 'Inter', Arial, sans-serif;
    min-height: 100vh;
    padding: 2rem 1rem; /* Default for main pages */
    background-color: #ffffff; /* พื้นหลัง: Pale Mint Green (เขียวอ่อนจาง ๆ) ❌ นี่คือสีที่คุณต้องการ (Original value in first body) */
}

/* Base body for Product Detail & Admin Pages */
body:not(.modal-open):has(.container) { /* Apply to product detail and admin views */
    background-color: #f3f4f6; /* Set as the background for the detail view context */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 4rem 1rem;
}

/* Utility to lock main screen scrolling when modal is open */
body.modal-open {
    overflow: hidden;
}

.container {
    max-width: 900px; /* Product Detail container */
    width: 100%;
}
.container:has(.product-grid) { /* Admin product grid container */
    max-width: 1200px;
    margin: 0 auto;
}

/* Back Button (Detail Page) */
.btn-back {
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 1.5rem;
    margin-bottom: 1.5rem;
    border-radius: 9999px;
    background-color: #e5e7eb;
    color: #4b5563;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.3s ease;
}
.btn-back:hover {
    background-color: #d1d5db;
}

/* ========================================================================= */
/* 2. NAVIGATION & UTILITIES (แถบนำทางและเครื่องมือ) */
/* ========================================================================= */

.navbar {
    background-color: #ffffff; /* แถบ: Soft Taupe/Grey (คงเดิม ไม่ใช่สีขาว) */
    box-shadow: 0 4px 15px rgba(0, 0, 0, .08);
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 50;
    padding: 1rem
}

/* --- Search Component --- */
.search-container {
    position: relative;
    width: 300px
}
.search-container input {
    width: 100%;
    padding: .5rem 1rem;
    border-radius: 9999px;
    border: 1px solid #d1d5db;
    outline: none;
    transition: border-color .3s
}
.search-container input:focus {
    border-color: #1F2937; /* Focus border: เทาเข้ม (#1F2937) */
    box-shadow: 0 0 0 3px rgba(31, 41, 55, .1); /* Focus shadow: เทาเข้มโปร่งแสง */
}
.search-results-list {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
    max-height: 300px;
    overflow-y: auto;
    z-index: 100;
    margin-top: .5rem
}
.search-result-item {
    display: flex;
    align-items: center;
    padding: .75rem 1rem;
    cursor: pointer;
    transition: background-color .2s
}
.search-result-item:hover {
    background-color: #f3f4f6
}
.search-result-item img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
    margin-right: 1rem
}
.search-result-item span {
    font-size: .95rem;
    color: #1f2937
}

/* --- Toast Notification --- */
.toast-notification {
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    /* Use the darker color from the main file, not the blue from the detail file */
    background-color: rgba(31, 41, 55, .9); /* Toast: เทาเข้มเกือบดำ (ไม่เปลี่ยน) */
    color: white;
    padding: .75rem 1.5rem;
    border-radius: 9999px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
    opacity: 0;
    transition: opacity .5s ease-in-out, transform .5s ease-in-out;
    z-index: 1000;
    pointer-events: none
}
.toast-notification.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0)
}
.toast-notification.hide {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px)
}

/* ========================================================================= */
/* 3. PRODUCT GRID & CARD COMPONENTS (การ์ดสินค้าและรายการ) */
/* ========================================================================= */

/* ... (โค้ดส่วนอื่น ๆ ของการ์ดสินค้า) ... */

.product-info {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1
}

/* การแก้ไขชื่อสินค้า: ลดขนาดฟอนต์ และแสดงเพียงบรรทัดเดียวพร้อม ellipsis (ตามคำขอ) */
.product-info h3 { /* Targeting h3 inside product-info, same as .product-name */
    white-space: nowrap; /* ทำให้ชื่อสินค้าอยู่ในบรรทัดเดียว (แก้ไขจาก normal) */
    overflow: hidden;
    text-overflow: ellipsis; /* แสดง ... เมื่อข้อความยาวเกิน */
    /* ลบคำสั่ง -webkit-line-clamp: 2; ออกเพื่อบังคับ 1 บรรทัด */
    font-size: 0.9rem; /* <<< FIX: ลดขนาดฟอนต์ชื่อสินค้า (Mobile/Base) */
    font-weight: 600;
    color: #1F2937; /* ชื่อสินค้า: เทาเข้ม (สีข้อความปกติ) */
    margin-bottom: .25rem; /* ลด margin ล่างให้ชิดขึ้น */
    text-decoration: none;
    display: block;
}

/* ... (โค้ดส่วนอื่น ๆ ของชื่อสินค้า) ... */

/* PRICE COLOR OVERRIDE: สีแดงเข้มโดดเด่น */
.product-card .text-red-600,
.carousel-card .text-red-600 {
    color: #E31B54 !important; /* แดงเข้มสะดุดตา */
    font-weight: 700;
}

/* --- NEW PRICE FONT SIZE OVERRIDES FOR MOBILE --- */

/* Main Display Price (text-xl class from HTML) */
.product-card .text-xl,
.carousel-card .text-xl {
    font-size: 0.95rem !important; /* <<< FIX: ลดขนาดราคาหลักให้เล็กลง (Mobile/Base) */
}

/* Strikethrough Price (text-xs class from HTML) */
.product-card .text-xs,
.carousel-card .text-xs {
    font-size: 0.75rem !important; /* <<< FIX: ลดขนาดราคาที่ถูกขีดฆ่าให้เล็กลง (Mobile/Base) */
}
.product-grid {
    display: grid;
    /* มือถือ: 2 คอลัมน์ (Mobile-First) */
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* <<< เพิ่ม !important ที่นี่ */
    gap: 1rem;
    padding-top: 1rem
}
.container:has(.product-grid) .product-grid { /* Admin grid overrides */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    padding-top: 0;
}

.product-card {
    /* ใช้สไตล์ใหม่ที่ชัดเจนและสอดคล้องกับ Tailwind */
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border-radius: 0.5rem; /* rounded-lg */
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
    cursor: pointer;
    text-decoration: none
}
.product-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.product-card:has(.product-actions) { /* Admin product card */
    background-color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease;
}
.product-card:has(.product-actions):hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.image-card-container {
    position: relative;
    width: 100%;
    /* FIX: ปรับสัดส่วนรูปภาพเป็น 1:1 (100%) เพื่อให้เป็นสี่เหลี่ยมจัตุรัส */
    padding-top: 100%;
    overflow: hidden
}
.product-image-container { /* Admin product image container */
    width: 100%;
    padding-top: 75%;
    position: relative;
    background-color: #e2e8f0;
}
.image-card-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* FIX: เปลี่ยนจาก 'contain' เป็น 'cover' เพื่อให้รูปเต็มพื้นที่กรอบเสมอ */
    object-fit: cover;
}
.product-image { /* Admin product image */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.product-info {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1
}

/* การแก้ไขชื่อสินค้าไม่ให้ถูกตัด แต่ให้ขึ้นบรรทัดใหม่ได้สูงสุด 2 บรรทัด */
.product-info h3 { /* Targeting h3 inside product-info, same as .product-name */
    white-space: normal; /* Override truncate */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* อนุญาตให้ชื่อขึ้นได้ 2 บรรทัด */
    -webkit-box-orient: vertical;
    font-size: 1rem; /* FIX: ลดขนาดฟอนต์ชื่อสินค้าเป็น 1rem */
    font-weight: 600;
    color: #1F2937; /* ชื่อสินค้า: เทาเข้ม (สีข้อความปกติ) */
    margin-bottom: .25rem; /* FIX: ลด margin ล่าง */
    text-decoration: none;
    display: block;
}

/* แก้ไข .product-name ให้เป็น .product-info h3 เพื่อรวมสไตล์ */
.product-name {
    /* ถูกแทนที่ด้วย .product-info h3 ด้านบน */
    display: none; /* ซ่อนสไตล์เก่า .product-name เพื่อใช้ .product-info h3 แทน */
}
.product-info h3:hover {
    color: #4B5563
} /* ชื่อสินค้า Hover: เทาปานกลาง */
.product-category {
    font-size: .875rem;
    color: #6b7280;
    margin-bottom: .5rem
}
.product-price, .product-category:has(~ .product-price) { /* Admin product price/category */
    color: #4b5563;
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
}


/* PRICE COLOR OVERRIDE: สีแดงเข้มโดดเด่น */
.product-card .text-red-600,
.carousel-card .text-red-600 {
    color: #E31B54 !important; /* แดงเข้มสะดุดตา */
    font-weight: 700;
    font-size: 1rem !important; /* FIX: ลดขนาดราคาหลักให้เล็กลง */
}

/* ราคาที่ถูกขีดฆ่า */
.product-card .text-xs,
.carousel-card .text-xs {
    font-size: 0.75rem !important; /* FIX: ลดขนาดราคาที่ถูกขีดฆ่าให้เล็กลง */
}

/* ========================================================================= */
/* 4. CAROUSEL (สไลด์สินค้า) */
/* ========================================================================= */

.carousel-container {
    width: 100%;
    display: flex;
    justify-content: center;
    perspective: 1000px;
    margin-bottom: 2rem;
    height: 300px; /* NEW: Increased height for PC */
    position: relative;
    align-items: center
}
.carousel-wrapper {
    position: relative;
    width: 100%;
    max-width: 500px;
    height: 100%;
    transform-style: preserve-3d
}
.carousel-card {
    position: absolute;
    width: 250px; /* NEW: Increased width for PC */
    height: 250px; /* NEW: Increased height for PC */
    top: 0;
    left: 50%;
    transform-origin: center;
    background-color: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .1);
    transition: transform .6s cubic-bezier(.25, .46, .45, .94), opacity .6s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-decoration: none
}
.carousel-card .image-card-container {
    height: 75%;
    padding-top: 0
} /* ❌ แก้ไข: เพิ่มพื้นที่รูปภาพเป็น 75% */
.carousel-card .product-info {
    height: 25%;
    padding: 0.4rem 0.5rem;
} /* ❌ แก้ไข: ลดพื้นที่ข้อมูลเหลือ 25% และลด Padding/ขอบขาว */
.carousel-card .product-name {
    font-size: .85rem;
    margin-bottom: 0.25rem;
} /* ❌ แก้ไข: ปรับขนาดฟอนต์และระยะห่างชื่อสินค้า */
.carousel-card .product-category {
    font-size: .7rem;
    margin-bottom: 0;
    line-height: 1;
} /* ❌ แก้ไข: ปรับขนาดฟอนต์และระยะห่างหมวดหมู่ */
.carousel-card.active {
    transform: translateX(-50%) scale(1) translateZ(50px);
    opacity: 1;
    z-index: 3
}
.carousel-card.next {
    transform: translateX(20%) scale(.85) translateZ(-20px);
    opacity: .9;
    z-index: 2
}
.carousel-card.prev {
    transform: translateX(-120%) scale(.85) translateZ(-20px);
    opacity: .9;
    z-index: 2
}
.carousel-card.far-next {
    transform: translateX(10%) scale(.7) translateZ(-100px);
    opacity: .7;
    z-index: 1
}
.carousel-card.far-prev {
    transform: translateX(-110%) scale(.7) translateZ(-100px);
    opacity: .7;
    z-index: 1
}

/* NEW: Fix image in carousel to be fully visible (fit entirely in the frame) */
.carousel-card .image-card-container img {
    object-fit: contain; /* ทำให้ภาพแสดงเต็มในกรอบ โดยไม่ถูกตัด (คงค่าเดิมไว้สำหรับ Carousel) */
}

/* Carousel Button */
.carousel-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, .9); /* สีปุ่ม: ขาวกึ่งโปร่งแสง (ไม่เปลี่ยน) */
    border: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
    cursor: pointer;
    z-index: 4;
    transition: background-color .3s ease, transform .3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}
.carousel-button:hover {
    background-color: rgba(255, 255, 255, 1);
    transform: translateY(-50%) scale(1.1)
}
.carousel-button:focus {
    outline: none
}
.carousel-button.prev {
    left: 0px; /* แก้ไข: ดันเข้ามาให้ชิดขอบซ้ายสุดของ container */
}
.carousel-button.next {
    right: 0px; /* แก้ไข: ดันเข้ามาให้ชิดขอบขวาสุดของ container */
}
.carousel-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background-color: #fff;
    border-radius: 8px;
    margin-bottom: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    cursor: pointer;
}

/* ========================================================================= */
/* 5. CATEGORY (หมวดหมู่สินค้า - แถบสี่เหลี่ยมเลื่อนได้) */
/* ========================================================================= */

.category-image-grid {
    display: inline-flex; /* KEY CHANGE: inline-flex ทำให้กรอบยุบตามความกว้างของเนื้อหา */
    max-width: 100%; /* NEW: เพื่อให้แน่ใจว่า scroll ได้ถ้าเนื้อหายาวเกินจอ */
    overflow-x: auto;
    gap: 0; /* ลบ gap 1rem ให้ติดกัน */
    padding: 0; /* ลบ padding บน-ล่าง */
    margin-top: 0.2rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
    border: 1px solid #d1d5db; /* เพิ่มเส้นขอบใหญ่รอบนอก */
    border-radius: 8px; /* เพิ่มขอบมนรอบนอก */
    background-color: #ffffff; /* เพิ่มพื้นหลังขาว */
}
.category-image-grid::-webkit-scrollbar {
    display: none
}
.category-item {
    flex-shrink: 0;
    width: 80px;
    height: 110px; /* <<< NEW: กำหนดความสูงรวมที่แน่นอน เพื่อให้กรอบสม่ำเสมอ */
    text-align: center;
    cursor: pointer;
    transition: background-color .2s ease, box-shadow .2s ease; /* เปลี่ยน transition */
    opacity: 1;
    border-right: 1px solid #d1d5db; /* เพิ่มเส้นกั้นด้านขวา */
    position: relative;
}
.category-item:last-child {
    border-right: none; /* ลบเส้นกั้นที่อันสุดท้าย */
}
.category-item:hover {
    opacity: 1;
    background-color: #f3f4f6; /* เพิ่ม hover effect */
    transform: none;
}
.category-item.active {
    /* สไตล์สำหรับ Active Category: เปลี่ยนเป็นเน้นเส้นด้านล่างแทน */
    box-shadow: inset 0 -3px 0 0 #1F2937; /* เพิ่มเส้นด้านล่างเป็นสีเทาเข้ม */
}
.category-item.active .image-card-container {
    /* ลบ box-shadow เดิมที่เน้นรูปวงกลม */
    box-shadow: none;
}
.category-item .image-card-container {
    position: relative;
    width: 70px; /* <<< แก้ไข: ทำให้คอนเทนเนอร์รูปภาพเป็นสี่เหลี่ยมจัตุรัส 70x70px */
    height: 70px; /* <<< แก้ไข: ทำให้เป็นสี่เหลี่ยมจัตุรัส 1:1 */
    border-radius: 8px;
    overflow: visible; /* รักษา: ให้ส่วนที่เกินแสดงผลออกมา */
    margin: 0.2rem auto 0; /* จัดให้อยู่กึ่งกลางแนวนอนและมี margin ด้านบน */
    box-shadow: none; /* ลบเงา */
    transition: none; /* ลบ transition */
}
.category-item img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* รักษา: ใช้ 'contain' เพื่อให้รูปภาพแสดงทั้งหมดในกรอบ 70x70px */
}
.category-item p {
    font-size: .75rem; /* ปรับลดขนาดฟอนต์ให้เข้ากับพื้นที่ */
    font-weight: 600; /* ให้ข้อความหนาขึ้น */
    color: #1f2937;
    padding: .2rem 0; /* ปรับลด padding บน-ล่าง */
    white-space: nowrap; /* ข้อความอยู่ในบรรทัดเดียว */
    overflow: hidden; /* ซ่อนส่วนที่เกิน */
    text-overflow: ellipsis; /* แสดง ... เมื่อข้อความถูกซ่อน */
}

/* Category Admin List */
.category-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem;
    border-bottom: 1px solid #e5e7eb;
}
.category-list-item:last-child {
    border-bottom: none;
}
.category-image-preview {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
    margin-right: 1rem;
}

/* ========================================================================= */
/* 6. PRODUCT DETAIL (รายละเอียดสินค้า) */
/* ========================================================================= */

.product-detail-card {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Image and Aspect Ratio */
.product-image-container-detail {
    position: relative;
    padding-top: 66.66%;
    /* FIX: เปลี่ยนเป็นสีขาวเพื่อให้ไม่มีกรอบสีเทาในมุมมองมือถือ */
    background-color: #ffffff;
}
.product-image-detail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Mobile Default Styles */
.product-image-block {
    padding: 1rem;
    cursor: pointer; /* NEW: Cursor pointer to indicate clickability */
}
.product-info-detail {
    padding: 1rem;
    padding-top: 0;
}
.product-description-detail {
    font-size: 1rem;
    line-height: 1.6;
    color: #4b5563;
    margin-bottom: 2rem;
    margin-top: 0;
}

/* Product Specs Mobile Styles */
.product-specs {
    border-top: 1px solid #e5e7eb;
    margin-top: 0;
    padding: 1.5rem 1rem;
}

/* Specs Content Styles */
.spec-item {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    font-size: 0.95rem;
}
.spec-label {
    font-weight: 600;
    color: #4b5563;
}
.spec-value {
    color: #1f2937;
    font-weight: 500;
    text-align: right;
}

/* Related Products */
.related-product-card {
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease;
}
.related-product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
.related-product-image-container {
    position: relative;
    padding-top: 100%;
    background-color: #f7f8fa;
}
.related-product-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0.5rem;
}

/* ========================================================================= */
/* 7. ADMIN ACTION BUTTONS (ปุ่มสำหรับหน้าจัดการสินค้า) */
/* ========================================================================= */

.product-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}
.btn-action {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-weight: 500;
    transition: background-color 0.2s ease;
}
.btn-edit {
    background-color: #3b82f6;
    color: #ffffff;
}
.btn-edit:hover {
    background-color: #2563eb;
}
.btn-delete {
    background-color: #ef4444;
    color: #ffffff;
}
.btn-delete:hover {
    background-color: #dc2626;
}
.btn-add-product {
    background-color: #4f46e5;
    color: #ffffff;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    transition: background-color 0.2s ease;
}
.btn-add-product:hover {
    background-color: #4338ca;
}

/* ========================================================================= */
/* 8. MODAL WINDOWS (หน้าต่าง Modal) */
/* ========================================================================= */

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    overflow-y: auto; /* เพิ่มการเลื่อนใน modal */
}
.modal-content {
    background-color: #ffffff;
    padding: 2rem;
    border-radius: 12px;
    width: 100%;
    max-width: 500px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
.modal-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 1rem;
    text-align: center;
}
.modal-form label {
    display: block;
    font-weight: 500;
    color: #4b5563;
    margin-bottom: 0.5rem;
}
.modal-form input,
.modal-form textarea {
    width: 100%;
    padding: 0.75rem;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    margin-bottom: 1rem;
    transition: border-color 0.2s ease;
}
.modal-form input:focus,
.modal-form textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}
.modal-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1rem;
}
.btn-primary {
    background-color: #10b981;
    color: #ffffff;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    transition: background-color 0.2s ease;
}
.btn-primary:hover {
    background-color: #059669;
}
.btn-cancel {
    background-color: #9ca3af;
    color: #ffffff;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    transition: background-color 0.2s ease;
}
.btn-cancel:hover {
    background-color: #6b7280;
}
/* START OF FIX: แก้ไขเพื่อให้ productSelectionGrid เลื่อนได้บน PC */
#productSelectionModal .product-grid {
    max-height: 70vh; /* กำหนดความสูงสูงสุดเพื่อให้เนื้อหาที่เกินสามารถเลื่อนได้ */
    overflow-y: auto; /* เปิดใช้งานการเลื่อนแนวตั้งเมื่อเนื้อหาเกิน */
    padding-right: 15px; /* เพิ่ม padding ด้านขวาเพื่อไม่ให้ scrollbar ทับเนื้อหา */
}
/* END OF FIX */


/* Modal Image Zoom Styles */
.modal-overlay {
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9); /* Dark background */
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-content:has(.modal-image) { /* Specific content for image zoom */
    padding: 0;
    background-color: transparent;
    box-shadow: none;
    margin: auto;
    display: block;
    width: 90%;
    max-width: 900px; /* Max width for the image */
    position: relative;
}

.modal-image {
    width: 100%;
    height: auto;
    max-height: 90vh; /* Max height to fit within viewport */
    display: block;
    object-fit: contain;
}

.modal-close {
    position: absolute;
    top: -30px; /* Move above the image */
    right: 0px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
    line-height: 1;
    padding: 0 10px;
    z-index: 1001; /* Ensure close button is above the image */
}

.modal-close:hover,
.modal-close:focus {
    color: #ccc;
    text-decoration: none;
    cursor: pointer;
}

.hidden {
    display: none !important;
}

/* ========================================================================= */
/* 9. FLASH SALE STYLES (สไตล์สำหรับ Flash Sale) */
/* ========================================================================= */

.flash-sale-card {
    position: relative;
}

/* Discount Percentage Badge (Top-Left) */
.flash-sale-card .sale-badge {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    background-color: #dc2626;
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    z-index: 10;
}

/* Flash Sale Text Overlay (Bottom-Right) */
.flash-sale-badge-overlay {
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: #ef4444;
    color: white;
    font-size: 0.625rem;
    font-weight: 700;
    padding: 0.2rem 0.4rem;
    border-radius: 0.375rem 0 0.375rem 0;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    z-index: 20;
    opacity: 0.95;
    text-transform: uppercase;
}

/* Style for the floating 'Flash Sale!' badge on image - Overridden by the above block for consistency */
/* The original floating badge block is mostly duplicated and less specific than the one above, so the explicit text overlay is kept. */
.flash-sale-badge-overlay {
    bottom: 0.5rem; /* Reverting to original position for floating badge, if this style is preferred over the corner overlay */
    right: 0.5rem;
    background-color: #E31B54;
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    z-index: 20;
    opacity: 1; /* Ensure visibility */
    display: flex;
    align-items: center;
    gap: 0.25rem;
    text-transform: uppercase;
    line-height: 1;
}


/* Highlight style for Flash Sale cards */
.product-card.flash-sale-card {
    border: 4px solid #f87171;
    box-shadow: 0 10px 15px -3px rgba(239, 68, 68, 0.2), 0 4px 6px -4px rgba(239, 68, 68, 0.1);
}

.product-card.flash-sale-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 15px 20px -3px rgba(239, 68, 68, 0.4), 0 6px 8px -4px rgba(239, 68, 68, 0.2);
}

/* Style for the countdown timer (Sale Timer) */
.flash-sale-card .sale-timer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(153, 27, 27, 0.9); /* red-800/90 */
    color: white;
    font-size: 0.75rem; /* text-xs */
    text-align: center;
    padding: 0.25rem 0;
    font-weight: 500; /* font-medium */
    z-index: 10;
    /* สไตล์เมื่อหมดเวลา */
    transition: background-color 0.3s ease;
}

.flash-sale-card .sale-timer.bg-gray-500\/80 { /* คลาสที่ใช้เมื่อหมดเวลา */
    background-color: rgba(107, 114, 128, 0.8); /* gray-500/80 */
}

.flash-sale-card .sale-timer .fa-clock {
    margin-right: 0.25rem;
}

/* NEW: Styles for Flash Sale Slider Animation */
.flash-sale-slider-wrapper {
    position: relative;
}

/* Viewport clips the track and sets the 4-column layout context */
#flashSaleViewport {
    overflow: hidden;
    display: grid; /* Use grid to define the visible area for 4 items */
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem; /* The gap for 4 columns */
}

/* The track itself - holds all cards side by side */
#flashSaleTrack {
    display: flex;
    transition: transform 0.5s ease-in-out; /* *** SMOOTH ANIMATION *** */
    width: fit-content; /* Allows track to expand for all items */
    gap: 1rem;
    /* Reset to start at 0,0 */
    transform: translateX(0);
    /* Important: Override Tailwind's default product-grid behavior */
}

/* Define the width of a single card within the flex track */
/* Must match the width of one column in the Viewport's 4-column grid */
#flashSaleTrack .product-card {
    flex-shrink: 0;
    /* Calculate width to match 1/4 of the viewport width minus the gap */
    width: calc((100% / 4) - 0.75rem); /* 100% of Viewport is 4 columns + 3 gaps. Card is 1/4 of the width, minus 1rem gap adjustment */
    margin: 0;
}

/* NEW: Navigation Button Styling for Flash Sale Pagination */
.flash-sale-nav-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.9); /* สีปุ่ม: ขาวกึ่งโปร่งแสง */
    border: 2px solid #ef4444;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    z-index: 30;
    color: #ef4444;
    opacity: 0.8;
    transition: opacity 0.2s, background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flash-sale-nav-button:hover {
    opacity: 1;
    background: #fee2e2;
}

/* Position adjustment for buttons */
.flash-sale-nav-button.prev {
    left: -20px;
}

.flash-sale-nav-button.next {
    right: -20px;
}


/* ========================================================================= */
/* 10. MEDIA QUERIES (การปรับสำหรับขนาดหน้าจอต่างๆ) */
/* ========================================================================= */

/* Mobile (max-width: 640px) */
@media (max-width: 640px) { /* sm-down */
    body {
        padding: 1rem .5rem
    }
    .navbar {
        flex-direction: column;
        align-items: stretch;
        padding: .75rem;
        gap: .75rem
    }
    .search-container {
        width: 100%
    }
    /* Carousel Adjustments */
    .carousel-container {
        height: 50vw
    }
    .carousel-wrapper {
        max-width: 500px
    }
    .carousel-card {
        width: 50vw;
        height: 50vw
    }
    .carousel-card.active {
        transform: translateX(-50%) scale(1) translateZ(30px)
    }
    .carousel-card.next {
        transform: translateX(10%) scale(.85) translateZ(-10px)
    }
    .carousel-card.prev {
        transform: translateX(-110%) scale(.85) translateZ(-10px)
    }
    .carousel-card.far-next,
    .carousel-card.far-prev {
        opacity: 0;
        pointer-events: none
    }
    .carousel-button {
        width: 36px;
        height: 36px;
        padding: 0;
    }
    .carousel-button.prev {
        left: 0rem
    } /* แก้ไข: ดันเข้ามาให้ชิดขอบซ้ายสุดของ container บนมือถือ */
    .carousel-button.next {
        right: 0rem
    } /* แก้ไข: ดันเข้ามาให้ชิดขอบขวาสุดของ container บนมือถือ */

    /* สไตล์มือถือสำหรับ Category Item ที่ถูกแก้ไข */
    .category-item {
        width: 80px;
        height: 110px;
    }
    .category-item .image-card-container {
        width: 70px;
        height: 70px;
        margin: 0.2rem auto 0;
    } /* ใช้ fixed 70x70 และ center it */
    .category-item p {
        font-size: .75rem; /* Apply new font size */
    }

    /* Flash Sale Track Card Width for Mobile (2 columns) */
    #flashSaleViewport {
         grid-template-columns: repeat(2, 1fr);
     }
     #flashSaleTrack .product-card {
         width: calc(50% - 0.5rem);
     }
}

/* Mobile Medium: 3 คอลัมน์ (min-width: 480px) */
@media (min-width: 480px) and (max-width: 639px) { /* <<< เพิ่ม Breakpoint 3 คอลัมน์สำหรับมือถือกลาง */
    .product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important; /* <<< เพิ่ม !important ที่นี่ */
    }
}

/* Tablet: 4 คอลัมน์ (min-width: 640px) */
@media (min-width: 640px) { /* sm */
    .product-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important; /* <<< เพิ่ม !important ที่นี่ */
    }

    /* Flash Sale Track Card Width for Tablet (3 columns) */
    #flashSaleViewport {
       grid-template-columns: repeat(3, 1fr);
    }
    #flashSaleTrack .product-card {
       width: calc(33.333% - 0.66rem);
    }
}

/* Desktop (Product Detail - Two-Column Layout) */
@media (min-width: 768px) {
    /* START: แก้ไขโครงสร้างและขนาดสำหรับ Desktop (Two-Column Layout) */
    .product-detail-card {
        flex-direction: row;
        flex-wrap: wrap;
    }

    /* LEFT COLUMN - 40% (Image & Specs) */
    .product-image-block,
    .product-specs {
        flex: 0 0 40%;
        border-right: 1px solid #e5e7eb;
    }

    .product-image-block {
        order: 1;
        padding: 2rem;
        padding-bottom: 0;
    }

    .product-specs {
        order: 3;
        padding: 0 2rem 2rem 2rem;
        border-top: none;
        margin-top: 0;
    }

    /* RIGHT COLUMN - 60% (Info: Name/Desc) */
    .product-info-detail {
        flex: 0 0 60%;
        order: 2;
        padding: 2rem;
    }

    /* Image Sizing */
    .product-image-container-detail {
        padding-top: 0 !important;
        height: 400px;
        min-height: auto;
        /* ลบ background-color ซ้ำซ้อนสำหรับ Desktop ออก เพราะถูกกำหนดเป็นสีขาวในค่าเริ่มต้นแล้ว */
    }
    /* END: แก้ไขโครงสร้างและขนาดสำหรับ Desktop */

    /* Admin Modal */
    #productSelectionModal .modal-content {
        max-width: 500px;
        padding: 2rem;
    }

    /* Admin/Modal overrides for mobile (max-width: 768px) were moved to the end of the file/or removed if not needed */
}

/* เดสก์ท็อป: 4 คอลัมน์ (min-width: 1024px) */
@media (min-width: 1024px) { /* lg */
    .product-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important; /* <<< เพิ่ม !important ที่นี่ */
        /* ใช้ gap 1rem สำหรับ 4 คอลัมน์ (เพื่อให้พอดี ไม่แน่นเกินไป) */
        gap: 1rem;
    }

    /* Flash Sale Track Card Width for Desktop (4 columns) */
    #flashSaleViewport {
        grid-template-columns: repeat(4, 1fr);
    }
    #flashSaleTrack .product-card {
        width: calc(25% - 0.75rem);
    }
}

/* Mobile (max-width: 768px) - Admin/Modal overrides */
@media (max-width: 768px) {
    #productSelectionModal .modal-content {
        max-width: 95%;
        padding: 1rem;
    }
    #productSelectionModal .product-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

        /* Discount Percentage Badge (Top-Left) */
        .sale-badge {
            position: absolute;
            top: 0.5rem;
            left: 0.5rem;
            background-color: #dc2626;
            color: white;
            font-size: 0.75rem;
            font-weight: 700;
            padding: 0.125rem 0.5rem;
            border-radius: 9999px;
            z-index: 10;
        }

        /* Flash Sale Text Overlay (Bottom-Right) */
        .flash-sale-badge-overlay {
            position: absolute;
            bottom: 0;
            right: 0;
            background-color: #ef4444;
            color: white;
            font-size: 0.625rem;
            font-weight: 700;
            padding: 0.2rem 0.4rem;
            border-radius: 0.375rem 0 0.375rem 0;
            display: flex;
            align-items: center;
            gap: 0.25rem;
            z-index: 20;
            opacity: 0.95;
            text-transform: uppercase;
        }


        /* Highlight style for Flash Sale cards */
        .product-card.flash-sale-card {
            border: 4px solid #f87171;
            box-shadow: 0 10px 15px -3px rgba(239, 68, 68, 0.2), 0 4px 6px -4px rgba(239, 68, 68, 0.1);
        }

        .product-card.flash-sale-card:hover {
            transform: translateY(-4px) scale(1.02);
            box-shadow: 0 15px 20px -3px rgba(239, 68, 68, 0.4), 0 6px 8px -4px rgba(239, 68, 68, 0.2);
        }

        /* NEW: Styles for Flash Sale Slider Animation */
        .flash-sale-slider-wrapper {
            position: relative;
        }

        /* Viewport clips the track and sets the 4-column layout context */
        #flashSaleViewport {
            overflow: hidden;
            display: grid; /* Use grid to define the visible area for 4 items */
            grid-template-columns: repeat(4, 1fr);
            gap: 1rem; /* The gap for 4 columns */
        }

        /* The track itself - holds all cards side by side */
        #flashSaleTrack {
            display: flex;
            transition: transform 0.5s ease-in-out; /* *** SMOOTH ANIMATION *** */
            width: fit-content; /* Allows track to expand for all items */
            gap: 1rem;
            /* Reset to start at 0,0 */
            transform: translateX(0);
            /* Important: Override Tailwind's default product-grid behavior */
        }

        /* Define the width of a single card within the flex track */
        /* Must match the width of one column in the Viewport's 4-column grid */
        #flashSaleTrack .product-card {
            flex-shrink: 0;
            /* Calculate width to match 1/4 of the viewport width minus the gap */
            width: calc((100% / 4) - 0.75rem); /* 100% of Viewport is 4 columns + 3 gaps. Card is 1/4 of the width, minus 1rem gap adjustment */
            margin: 0;
        }

        /* NEW: Navigation Button Styling for Flash Sale Pagination */
        .flash-sale-nav-button {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(255, 255, 255, 0.9);
            border: 2px solid #ef4444;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            cursor: pointer;
            z-index: 30;
            color: #ef4444;
            opacity: 0.8;
            transition: opacity 0.2s, background 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .flash-sale-nav-button:hover {
            opacity: 1;
            background: #fee2e2;
        }

        /* Position adjustment for buttons */
        .flash-sale-nav-button.prev {
            left: -20px;
        }

        .flash-sale-nav-button.next {
            right: -20px;
        }

        /* Media Queries to ensure responsive card width */
        @media (min-width: 1024px) { /* Desktop: 4 columns */
            #flashSaleViewport {
                grid-template-columns: repeat(4, 1fr);
            }
            #flashSaleTrack .product-card {
                width: calc(25% - 0.75rem);
            }
        }
        @media (max-width: 1023px) and (min-width: 640px) { /* Tablet: 3 columns */
             #flashSaleViewport {
                grid-template-columns: repeat(3, 1fr);
            }
            #flashSaleTrack .product-card {
                width: calc(33.333% - 0.66rem);
            }
        }
        @media (max-width: 639px) { /* Mobile: 2 columns */
             #flashSaleViewport {
                grid-template-columns: repeat(2, 1fr);
            }
            #flashSaleTrack .product-card {
                width: calc(50% - 0.5rem);
            }
        }