/* style.css - ฉบับสมบูรณ์ (Complete Refactored & Fixed) */

/* =========================================
   1. Variables & Global Settings
   ========================================= */
:root {
    /* Theme: Teal / Sea Green */
    --primary-color: #00897B; /* สีหลัก (Teal 600) */
    --primary-dark: #00695C;  /* สีเข้ม (Teal 800) */
    --light-bg: #E0F2F1;      /* สีพื้นหลังอ่อน (Teal 50) */
    
    --vip-gold: #FFC107;      /* สีทอง VIP */
    --text-dark: #333;
}

body {
    font-family: 'Prompt', sans-serif;
    background-color: #f8f9fa;
    color: var(--text-dark);
    overflow-x: hidden; 
}

a { text-decoration: none; }

/* =========================================
   2. SYSTEM FIXES (แก้บั๊ก Dropdown & Mobile)
   *** ส่วนสำคัญ ห้ามลบ ***
   ========================================= */

/* 2.1 แก้ Navbar บังเนื้อหา หรือ Dropdown จม */
.navbar {
    background-color: white;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
    position: relative;
    z-index: 1030; /* ให้แน่ใจว่าอยู่บนสุดแต่ต่ำกว่า Offcanvas */
}

/* 2.2 แก้ Dropdown ไม่ทำงาน/โดนบัง */
.dropdown-menu {
    margin-top: 0;
    z-index: 1055 !important; /* ต้องสูงกว่า Offcanvas */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* 2.3 แก้ Off-canvas (Mobile Menu) กดไม่ติด/ไม่เลื่อน */
.offcanvas {
    visibility: hidden; /* ซ่อนไว้ก่อน */
    transition: transform 0.3s ease-in-out;
    z-index: 1045;
}

.offcanvas.show {
    visibility: visible; /* แสดงเมื่อมี Class show */
}

/* 2.4 จัดระยะห่าง Header สำหรับหน้าต่างๆ */
.body-fixed-nav {
    padding-top: 100px;
}
@media (max-width: 991px) {
    .body-fixed-nav {
        padding-top: 120px;
    }
}
/* แก้ Bug ช่องว่าง Navbar (สำรอง) */
body.fixed-nav-padding {
    padding-top: 80px;
}

/* =========================================
   3. Navbar Components
   ========================================= */
.logo-circle {
    width: 35px; height: 35px;
    background-color: var(--primary-color);
    color: white;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}

.nav-link.active {
    color: var(--primary-color) !important;
    font-weight: 600;
}

.search-input {
    border-color: #e0e0e0;
    background-color: #f8f9fa;
}
.search-input:focus {
    background-color: #fff;
    border-color: var(--primary-color);
    box-shadow: none;
}

/* --- Profile Dropdown Styling --- */
.nav-profile-dropdown .dropdown-toggle::after { display: none; }

.nav-profile-dropdown .dropdown-menu {
    border-radius: 16px;
    border: none;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    margin-top: 15px; 
    padding: 0;
    width: 260px;
    overflow: hidden;
}

.dropdown-wallet-header {
    background-color: var(--light-bg);
    padding: 15px 20px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.nav-profile-dropdown .dropdown-item {
    padding: 12px 20px;
    font-size: 0.95rem;
    border-left: 3px solid transparent;
}

.nav-profile-dropdown .dropdown-item:hover {
    background-color: #f8f9fa;
    color: var(--primary-color);
    border-left-color: var(--primary-color);
}

.nav-profile-dropdown .dropdown-item.text-danger:hover {
    background-color: #fff5f5;
    color: #dc3545;
    border-left-color: #dc3545;
}

.user-level-badge {
    font-size: 0.7rem;
    padding: 4px 8px;
    background: linear-gradient(45deg, #FFC107, #FF8F00);
    color: #fff;
    border-radius: 4px;
    font-weight: 600;
    display: inline-block;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* =========================================
   4. Offcanvas Sidebar (Mobile Style)
   ========================================= */
.offcanvas.offcanvas-end {
    width: 300px !important;       
    max-width: 85vw !important;
    border-top-left-radius: 24px !important;    
    border-bottom-left-radius: 24px !important; 
    overflow: hidden;               
    border: none;
    box-shadow: -10px 0 30px rgba(0,0,0,0.15);
}

.offcanvas-header {
    background-color: var(--primary-color);
    color: white;
    padding: 1.5rem;
}

.offcanvas-menu-item {
    font-weight: 500; color: #555;
    border-radius: 0 50px 50px 0; 
    margin-right: 15px;
    transition: all 0.2s;
    border-left: 4px solid transparent;
}

.offcanvas-menu-item:hover {
    background-color: var(--light-bg);
    color: var(--primary-color);
    font-weight: 600;
    border-left-color: var(--primary-color);
}

/* =========================================
   5. Utilities & Buttons
   ========================================= */
.text-theme { color: var(--primary-color) !important; }
.bg-theme { background-color: var(--primary-color) !important; }
.text-gold { color: #d4af37; }

/* Bootstrap Overrides */
.bg-danger { background-color: #dc3545 !important; }
.bg-primary { background-color: #0d6efd !important; }
.bg-secondary { background-color: #6c757d !important; }

/* Buttons */
.btn-vip {
    background-color: var(--vip-gold);
    color: #212529; font-weight: 600;
    border: none; transition: all 0.3s;
}
.btn-vip:hover {
    background-color: #FFB300;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(255, 193, 7, 0.4);
}

.btn-outline-custom {
    border: 1px solid var(--primary-color);
    color: var(--primary-color); background: white;
}
.btn-outline-custom:hover {
    background-color: var(--primary-color); color: white;
}

.btn-see-more {
    color: var(--primary-color);
    font-weight: 600; font-size: 0.9rem;
    text-decoration: none; transition: all 0.2s;
}
.btn-see-more:hover {
    color: var(--primary-dark); text-decoration: underline;
}

.object-fit-cover {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.required-star {
    color: #dc3545;
}

/* =========================================
   6. Hero Carousel & Home Layout Fixes
   ========================================= */
.bg-sea-gradient {
    background: linear-gradient(135deg, var(--primary-color) 0%, #004D40 100%);
}

#heroCarousel {
    overflow: visible !important; 
    margin-bottom: 2rem; /* ปรับลดระยะห่าง (Layout Fix) */
}

.carousel-inner {
    border-radius: 16px; 
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.hero-slide-content { padding-bottom: 3rem; }

.carousel-indicators { bottom: -50px; margin-bottom: 0; }

.carousel-indicators [data-bs-target] {
    width: 10px !important; height: 10px !important;
    border-radius: 50%;
    background-color: #dee2e6;
    border: 2px solid transparent;
    margin: 0 6px;
    transition: all 0.3s ease;
    opacity: 1;
}

.carousel-indicators .active {
    background-color: var(--primary-color);
    transform: scale(1.3);
    box-shadow: none;
}

/* --- Layout Fix: ปรับแต่ง Container และ Banner หน้าแรก --- */
.container-custom {
    max-width: 1600px; /* กว้างกว่า container ปกติ */
    width: 100%;
    padding-right: var(--bs-gutter-x, 0.75rem);
    padding-left: var(--bs-gutter-x, 0.75rem);
    margin-right: auto;
    margin-left: auto;
}

/* ปรับระยะห่างของ Hero Section */
header.mt-5.pt-4 {
    margin-top: 1rem !important;
    padding-top: 1rem !important;
}

.banner-image {
    border-radius: 12px; /* ลดความโค้งให้ดู Modern */
}

/* Responsive จอใหญ่ */
@media (min-width: 1400px) {
    .container {
        max-width: 1400px; /* ขยาย Container ปกติให้กว้างขึ้น */
    }
}

/* =========================================
   7. Product Layout (Desktop Scroll Fixed)
   ========================================= */

.product-scroller {
    display: flex !important;
    flex-wrap: nowrap !important;       /* ห้ามขึ้นบรรทัดใหม่ */
    overflow-x: auto !important;        /* เปิด Scroll แนวนอน */
    overflow-y: hidden !important;
    
    gap: 16px !important;
    padding: 10px 5px 25px 5px !important; /* เผื่อที่ให้ Scrollbar ด้านล่าง */
    
    width: 100% !important;
    
    /* Mobile Config */
    touch-action: pan-x !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory;      /* ดีดเข้าล็อค */
    
    /* ⚠️ Firefox Scrollbar */
    scrollbar-width: thin;
    scrollbar-color: #cdcdcd transparent;
    
    margin-bottom: 0 !important;
}

/* ⚠️ [CRITICAL] บังคับโชว์ Scrollbar สำหรับ Chrome/Edge บน Desktop */
.product-scroller::-webkit-scrollbar {
    display: block !important;          /* ห้ามซ่อนเด็ดขาด */
    height: 10px !important;            /* ความสูงเส้น Scrollbar */
    background-color: transparent;
}

.product-scroller::-webkit-scrollbar-track {
    background: #f8f9fa;                /* สีพื้นหลังรางเลื่อน */
    border-radius: 10px;
}

.product-scroller::-webkit-scrollbar-thumb {
    background-color: #bbbbbb;          /* สีตัวเลื่อน (เทา) ให้เห็นชัดๆ */
    border-radius: 10px;
    border: 2px solid #f8f9fa;          
}

.product-scroller::-webkit-scrollbar-thumb:hover {
    background-color: #00897B;          /* เปลี่ยนสีเมื่อเมาส์ชี้ */
}

/* --- บังคับ Child Items --- */
.product-scroller > div,
.product-scroller .product-item {
    flex: 0 0 auto !important;
    display: block !important;
    /* ค่า width และ min-width จะดึงมาจาก Inline Style ใน PHP */
}
/* =========================================
   8. Product Card Styling
   ========================================= */
.product-card {
    transition: all 0.2s ease-in-out;
    border: none;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    height: 100%; /* ให้การ์ดยืดเต็มความสูงของ Column */
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    position: relative;
    display: flex;          /* ใช้ Flexbox จัดเนื้อหา */
    flex-direction: column; /* เรียงจากบนลงล่าง */
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
}

/* รูปสินค้าใน Card (รวม 2 แบบที่ให้มา) */
.card-img-wrapper, .product-img-wrapper {
    position: relative; 
    width: 100%;
    height: 260px;      /* ความสูงรูป */
    overflow: hidden;
    background-color: #f1f1f1; 
    display: flex; align-items: center; justify-content: center;
    z-index: 1;
}

.card-img-top, .product-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;           /* ขยายเต็มกรอบ */
    object-position: center top; /* จัดภาพชิดด้านบน */
    transition: transform 0.4s ease;
    display: block;
}

.product-card:hover .card-img-top,
.product-card:hover .product-img-wrapper img {
    transform: scale(1.08);
}

/* จัดเนื้อหาการ์ด */
.product-card .card-body {
    flex: 1; /* ยืดเนื้อหาให้เต็มพื้นที่ที่เหลือ */
    display: flex;
    flex-direction: column;
}

/* ตัดคำชื่อสินค้า */
.product-card .card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 3rem; /* จองพื้นที่ความสูงสำหรับ 2 บรรทัด */
    margin-bottom: 0.5rem;
}

/* ดันปุ่มไปล่างสุด */
.product-card .mt-auto {
    margin-top: auto !important;
}

/* ราคาสินค้า */
.price-section .price-tag, .text-success {
    font-size: 1.1rem;
    font-weight: bold;
    color: #198754; 
}

/* Badges */
.vip-badge {
    position: absolute;
    top: 0; left: 0;
    background: linear-gradient(135deg, #FFD700 0%, #FF8C00 100%);
    color: #fff;
    padding: 5px 12px;
    border-bottom-right-radius: 12px;
    font-size: 0.75rem;
    font-weight: bold;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    z-index: 20; 
    transform: translateZ(0); 
}

.file-type-badge {
    position: absolute;
    top: 10px; right: 10px;
    z-index: 20; 
    transform: translateZ(0);
    font-size: 0.7rem;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 4px;
    padding: 4px 8px;
    color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* =========================================
   9. Product Detail Page Styles (หน้ารายละเอียด)
   ========================================= */
.img-zoom-wrapper { 
    position: relative; 
    overflow: hidden; 
    border-radius: 12px; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); 
    cursor: pointer; 
}

.main-image { 
    width: 100%; 
    object-fit: cover; 
    max-height: 500px; 
    transition: transform 0.3s ease; 
}

.zoom-overlay { 
    position: absolute; 
    top: 0; left: 0; 
    width: 100%; height: 100%; 
    background: rgba(0,0,0,0); 
    display: flex; align-items: center; justify-content: center; 
    transition: 0.3s; opacity: 0; 
}

.img-zoom-wrapper:hover .zoom-overlay { 
    background: rgba(0,0,0,0.1); opacity: 1; 
}

.zoom-icon-badge { 
    background: rgba(0, 0, 0, 0.6); 
    color: white; padding: 15px; 
    border-radius: 50%; font-size: 1.5rem; 
    backdrop-filter: blur(4px); 
    box-shadow: 0 4px 15px rgba(0,0,0,0.3); 
}

.gallery-thumb { 
    width: 80px; height: 80px; 
    object-fit: cover; border-radius: 8px; 
    cursor: pointer; border: 2px solid transparent; 
    transition: 0.2s; 
}

.gallery-thumb:hover, .gallery-thumb.active { 
    border-color: #198754; transform: translateY(-2px); 
}

.product-content img { 
    max-width: 100% !important; height: auto !important; border-radius: 8px; 
}

/* VIP Glow Button Animation */
.btn-vip-glow { 
    background: linear-gradient(45deg, #FFC107, #FFD700, #FFEB3B, #FFC107); 
    background-size: 300% 300%; 
    border: none; color: #4a3b00; 
    font-weight: 700; 
    box-shadow: 0 4px 15px rgba(255, 193, 7, 0.4); 
    animation: gradientAnim 3s ease infinite; 
}
.btn-vip-glow:hover { transform: translateY(-3px); color: #000; }

@keyframes gradientAnim { 
    0% { background-position: 0% 50%; } 
    50% { background-position: 100% 50%; } 
    100% { background-position: 0% 50%; } 
}

/* =========================================
   10. Blog & News Styles
   ========================================= */
.blog-card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.blog-card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
}

.transition-img {
    transition: transform 0.5s ease;
}

.blog-card-hover:hover .transition-img {
    transform: scale(1.05);
}

.text-truncate-2 {
    display: -webkit-box; 
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
    overflow: hidden; text-overflow: ellipsis;
}

/* =========================================
   11. Footer Styles
   ========================================= */
.social-icon-btn {
    width: 38px; height: 38px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    display: flex; align-items: center; justify-content: center;
    color: white; text-decoration: none;
    transition: all 0.3s ease;
}
.social-icon-btn:hover {
    color: white; transform: translateY(-3px);
}
.social-icon-btn.facebook:hover { background-color: #1877F2; }
.social-icon-btn.line:hover { background-color: #06c755; }
.social-icon-btn.youtube:hover { background-color: #FF0000; }

.hover-white:hover {
    color: #fff !important; text-decoration: underline !important;
}

/* =========================================
   12. PAGE: VIP Register
   ========================================= */
.vip-hero {
    background: linear-gradient(135deg, #198754 0%, #0f5132 100%);
    color: white;
    padding: 80px 0 100px;
    border-radius: 0 0 50% 50% / 20px;
    margin-bottom: 30px;
    position: relative; overflow: hidden;
}

.vip-hero::before {
    content: '';
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
    background-size: 20px 20px; opacity: 0.3;
}

.crown-icon {
    font-size: 4rem; color: #FFD700;
    text-shadow: 0 4px 15px rgba(255, 215, 0, 0.5);
    animation: crownFloat 3s ease-in-out infinite;
}
@keyframes crownFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.pricing-card {
    border: none; border-radius: 20px;
    background: white;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative; overflow: hidden;
    margin-top: -50px;
}
.pricing-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.badge-best {
    position: absolute; top: 25px; right: -30px;
    background: #FFD700; color: #000;
    padding: 5px 40px;
    transform: rotate(45deg);
    font-weight: 800; font-size: 0.8rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 2;
}

.price-tag { font-size: 2.8rem; font-weight: 800; color: #333; }
.price-tag small { font-size: 1rem; color: #999; font-weight: 400; }

.feature-list { list-style: none; padding: 0; margin: 20px 0; }
.feature-list li {
    padding: 10px 0; border-bottom: 1px dashed #eee;
    color: #555; font-size: 0.95rem;
}
.feature-list li:last-child { border-bottom: none; }
.feature-list i { margin-right: 8px; }

.qr-placeholder {
    width: 200px; height: 200px;
    background: #fff;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 15px; border-radius: 12px;
    border: 1px solid #ddd; padding: 10px;
}
.qr-placeholder img { width: 100%; height: 100%; object-fit: contain; }

/* =========================================
   13. PAGE: Register & Login
   ========================================= */
.register-section {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 15px;
    background-color: #f8f9fa; /* สีพื้นหลังจางๆ */
}

.register-card {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    overflow: hidden;
    width: 100%;
    max-width: 600px; /* ความกว้างของกล่อง */
    border: 1px solid #eaeaea;
}

.register-header {
    background-color: #00897b; /* สีธีมหลัก */
    color: #ffffff;
    padding: 30px;
    text-align: center;
}

.register-header h3 {
    margin: 0;
    font-weight: 700;
    font-size: 1.8rem;
}

.register-body {
    padding: 40px;
}

.btn-google-signup {
    background-color: #ffffff;
    color: #444;
    border: 1px solid #dddddd;
    font-weight: 600;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px;
}

.btn-google-signup:hover {
    background-color: #f1f1f1;
    border-color: #cccccc;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.divider-text {
    display: flex;
    align-items: center;
    color: #999;
    margin: 25px 0;
    font-size: 0.9rem;
}

.divider-text::before, .divider-text::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid #eeeeee;
}

.divider-text::before { margin-right: 10px; }
.divider-text::after { margin-left: 10px; }

.form-group-label {
    font-weight: 500;
    color: #333;
    font-size: 0.95rem;
    margin-bottom: 5px;
}

.btn-register-submit {
    background-color: #00897b;
    color: white;
    font-weight: 700;
    font-size: 1.1rem;
    padding: 12px;
    border: none;
    transition: 0.3s;
}

.btn-register-submit:hover {
    background-color: #00695c;
    color: white;
    box-shadow: 0 4px 15px rgba(0, 137, 123, 0.3);
}

/* =========================================
   14. PAGE: Shopping Cart
   ========================================= */
.cart-page-container {
    margin-top: 2rem; 
}

/* รูปสินค้าในตะกร้า */
.cart-item-img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

/* ราคาสินค้า */
.price-text {
    color: #198754;
    font-weight: bold;
    font-size: 1.1rem;
}

/* กล่องสรุปยอด (Sticky) */
.total-box {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 100px; /* ระยะห่างจากด้านบนเมื่อเลื่อนลงมา */
    z-index: 900;
}

/* ปุ่มตะกร้าลอย (Floating Cart Icon) */
.cart-float-icon {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1050;
    transition: transform 0.2s;
}
.cart-float-icon:hover {
    transform: scale(1.1);
}

/* =========================================
   15. About Us & Profile
   ========================================= */
.hero-desc {
    font-size: 1.15rem;
    font-weight: 300;
    opacity: 0.9;
    max-width: 650px; /* บีบความกว้างข้อความ */
    margin: 15px auto 0; /* จัดกึ่งกลาง */
    line-height: 1.8; /* เพิ่มระยะห่างบรรทัดให้อ่านง่าย */
    padding: 0 20px; /* ✅ สำคัญ: กันข้อความชิดขอบจอโทรศัพท์ */
}

/* Responsive: มือถือ */
@media (max-width: 768px) {
    .hero-desc {
        font-size: 1rem;
        padding: 0 30px; /* เพิ่ม Padding บนมือถือให้มากขึ้น */
        width: 100%;
    }
    
    /* ปรับ Title ด้วย */
    .hero-title { font-size: 2rem; }
    .hero-subtitle { font-size: 1.5rem; }
}

.profile-card {
    border: none;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: transform 0.3s;
    overflow: hidden;
    background-color: #fff;
}

.profile-card:hover {
    transform: translateY(-10px);
}

.profile-img-wrapper {
    height: 100%;
    min-height: 250px;
    overflow: hidden;
    background-color: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tech-badge {
    font-size: 0.9rem;
    padding: 8px 15px;
    border-radius: 50px;
    background-color: #e9ecef;
    color: #495057;
    margin-right: 5px;
    margin-bottom: 10px;
    display: inline-block;
}

.social-link {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #f1f3f5;
    color: #333;
    text-decoration: none;
    transition: 0.2s;
    margin-right: 10px;
}

.social-link:hover {
    background-color: #0d6efd;
    color: white;
}

/* ปรับ Responsive สำหรับ Mobile */
@media (max-width: 768px) {
    .profile-img-wrapper {
        height: 250px; /* กำหนดความสูงในมือถือ */
    }
}
/* Special Card Styling */
.special-product-card {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.special-product-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}

.special-product-card .btn-dark {
    background: #212529;
    transition: all 0.2s;
}

.special-product-card:hover .btn-dark {
    background: linear-gradient(90deg, #00C9FF 0%, #92FE9D 100%);
    color: #000;
    border-color: transparent;
}

/* =========================================
   SHOUT BOX / REQUEST BOX STYLES (Fixed Layout)
   ========================================= */

/* พื้นหลัง Chat */
.chat-bg-pattern {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-color: #9bbbd4; /* สีฟ้า LINE */
    opacity: 0.3; pointer-events: none; z-index: 0;
}
#shoutbox-container { 
    position: relative; z-index: 1; 
    padding: 15px !important;
}

/* --- แถวข้อความ (Row) --- */
.line-chat-row {
    display: flex;
    align-items: flex-start; /* สำคัญ! ห้ามใช้ stretch */
    margin-bottom: 15px;
    width: 100%;
}

/* ถ้าเป็น "ฉัน" ให้ชิดขวา */
.line-chat-row.me {
    justify-content: flex-end;
}

/* --- Avatar (ซ้ายสุด) --- */
.avatar-wrapper {
    margin-right: 8px;
    flex-shrink: 0;
}
.chat-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* --- กลุ่มเนื้อหา (Bubble + Meta) --- */
.chat-content-group {
    display: flex;
    flex-direction: column;
    max-width: 75%;
}

/* ถ้าเป็น "ฉัน" ให้เนื้อหาชิดขวา */
.line-chat-row.me .chat-content-group {
    align-items: flex-end; /* สำคัญ! บังคับให้ Bubble ชิดขวาและไม่ยืด */
}

/* --- ชื่อคนส่ง --- */
.chat-name {
    font-size: 0.75rem;
    color: #444;
    margin-bottom: 2px;
}

/* --- Badge (ป้ายวิชา) --- */
.chat-badge-wrapper {
    margin-bottom: 4px;
}
.chat-badge-pill {
    font-size: 0.65rem;
    background-color: rgba(0,0,0,0.05);
    color: #666;
    padding: 2px 8px;
    border-radius: 10px;
    display: inline-block;
}

/* ถ้าเป็น "ฉัน" ให้ซ่อน Badge วิชา (เพื่อให้เหมือน Chat ทั่วไป) */
/* ถ้าอยากโชว์ให้ลบบรรทัดนี้ทิ้ง */
.line-chat-row.me .chat-badge-wrapper {
    display: none; 
}

/* --- Bubble + Time Wrapper --- */
.bubble-time-wrapper {
    display: flex;
    align-items: flex-end; /* เวลาอยู่ล่างสุด */
    gap: 6px;
}

/* ถ้าเป็น "ฉัน" ให้เวลาอยู่ซ้าย */
.line-chat-row.me .bubble-time-wrapper {
    flex-direction: row-reverse;
}

/* --- ตัวกล่อง Bubble --- */
.chat-bubble-box {
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 0.95rem;
    line-height: 1.4;
    position: relative;
    box-shadow: 0 1px 1px rgba(0,0,0,0.05);
    
    /* แก้บั๊กกล่องยืด */
    width: fit-content;      /* กว้างเท่าเนื้อหา */
    max-width: 100%;         /* ไม่เกิน container */
    word-wrap: break-word;   /* ตัดคำ */
    overflow-wrap: break-word;
}

/* สไตล์ Bubble: คนอื่น (ขาว) */
.line-chat-row.other .chat-bubble-box {
    background-color: #fff;
    color: #000;
    border-top-left-radius: 2px; /* หางแหลม */
}

/* สไตล์ Bubble: ฉัน (เขียว) */
.line-chat-row.me .chat-bubble-box {
    background-color: #06c755;
    color: #fff;
    border-top-right-radius: 2px; /* หางแหลม */
}

/* --- เวลา --- */
.chat-time {
    font-size: 0.65rem;
    color: #666;
    min-width: 35px;
    white-space: nowrap;
    margin-bottom: 2px;
}
.line-chat-row.me .chat-time {
    text-align: right;
}

/* --- Admin Reply --- */
.admin-reply-box {
    margin-top: 8px;
    padding: 8px;
    background: rgba(0,0,0,0.05);
    border-radius: 8px;
    font-size: 0.85rem;
    border-left: 3px solid #FFC107;
    color: #333;
}
.line-chat-row.me .admin-reply-box {
    background: rgba(255,255,255,0.2);
    color: #fff;
    border-left-color: #fff;
}

/* =========================================
   SCROLLER NAVIGATION BUTTONS (ปุ่มเลื่อนซ้ายขวา)
   ========================================= */
.scroller-wrapper {
    position: relative;
    width: 100%;
}

/* ซ่อนปุ่มบนมือถือ (เพราะมือถือปัดได้อยู่แล้ว) */
@media (max-width: 991px) {
    .scroller-btn { display: none !important; }
}

.scroller-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    height: 45px;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    transition: all 0.2s ease;
    opacity: 0; /* ซ่อนก่อน ถ้าไม่เอาเมาส์ชี้ */
    color: #333;
}

.scroller-wrapper:hover .scroller-btn {
    opacity: 1; /* โชว์เมื่อเอาเมาส์ชี้ */
}

.scroller-btn:hover {
    background-color: var(--primary-color, #00897B);
    color: white;
    border-color: var(--primary-color, #00897B);
}

.scroller-btn.left { left: -20px; }
.scroller-btn.right { right: -20px; }

/* Product Scroller (ปรับให้รองรับปุ่ม) */
.product-scroller {
    display: flex;
    overflow-x: auto;
    gap: 16px;
    padding: 10px 5px 25px 5px;
    scroll-behavior: smooth; /* เลื่อนนุ่มๆ */
    -webkit-overflow-scrolling: touch;
    
    /* ซ่อน Scrollbar ให้สวยงาม (ใช้ปุ่มแทน) */
    scrollbar-width: none; 
    -ms-overflow-style: none;
}
.product-scroller::-webkit-scrollbar { 
    display: none; 
}

/* บังคับการ์ด */
.product-scroller .product-item {
    flex: 0 0 auto;
    width: 280px;
}