/* --- ROOT VARIABLES & BASE STYLES --- */
:root {
    --primary-color: #2c6e49;
    --secondary-color: #34a853;
    --accent-color: #d9534f;
    --text-color: #333;
    --bg-light: #f8f9fa;
    --sidebar-width: 260px;
}

body {
    font-family: 'Kanit', sans-serif;
    margin: 0;
    color: var(--text-color);
    min-height: 100vh;

    /* --- พื้นหลัง Geometric Network V3 --- */
    background-color: #020c1b;
    background-image:
        /* ชั้นที่ 1: ลายเส้น Network */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800'%3E%3Cg fill='none' stroke='%2364ffda' stroke-opacity='0.25' stroke-width='1'%3E%3Ccircle cx='100' cy='100' r='3' fill='%2364ffda' fill-opacity='0.6' stroke='none'/%3E%3Ccircle cx='300' cy='50' r='2.5' fill='%2364ffda' fill-opacity='0.6' stroke='none'/%3E%3Ccircle cx='600' cy='80' r='3' fill='%2364ffda' fill-opacity='0.6' stroke='none'/%3E%3Ccircle cx='750' cy='200' r='2.5' fill='%2364ffda' fill-opacity='0.6' stroke='none'/%3E%3Ccircle cx='50' cy='300' r='2' fill='%2364ffda' fill-opacity='0.6' stroke='none'/%3E%3Ccircle cx='250' cy='250' r='3' fill='%2364ffda' fill-opacity='0.6' stroke='none'/%3E%3Ccircle cx='450' cy='300' r='2.5' fill='%2364ffda' fill-opacity='0.6' stroke='none'/%3E%3Ccircle cx='700' cy='450' r='3' fill='%2364ffda' fill-opacity='0.6' stroke='none'/%3E%3Ccircle cx='150' cy='550' r='2.5' fill='%2364ffda' fill-opacity='0.6' stroke='none'/%3E%3Ccircle cx='350' cy='650' r='3' fill='%2364ffda' fill-opacity='0.6' stroke='none'/%3E%3Ccircle cx='550' cy='550' r='2' fill='%2364ffda' fill-opacity='0.6' stroke='none'/%3E%3Ccircle cx='750' cy='700' r='2.5' fill='%2364ffda' fill-opacity='0.6' stroke='none'/%3E%3Ccircle cx='50' cy='750' r='2.5' fill='%2364ffda' fill-opacity='0.6' stroke='none'/%3E%3Cpath d='M100 100 L300 50 M300 50 L600 80 M600 80 L750 200 M100 100 L50 300 M100 100 L250 250 M300 50 L250 250 M300 50 L450 300 M600 80 L450 300 M750 200 L700 450 M750 200 L450 300 M50 300 L250 250 M50 300 L150 550 M250 250 L450 300 M250 250 L150 550 M250 250 L350 650 M450 300 L700 450 M450 300 L550 550 M450 300 L350 650 M700 450 L750 700 M700 450 L550 550 M150 550 L350 650 M150 550 L50 750 M350 650 L550 550 M350 650 L50 750 M550 550 L750 700 M100 100 L450 300 M600 80 L750 700 M50 300 L350 650'/%3E%3C/g%3E%3C/svg%3E"),
        /* ชั้นที่ 2: แสงฟุ้งมุมซ้ายบน */
        radial-gradient(circle at 0% 0%, rgba(100, 255, 218, 0.2) 0%, transparent 60%),
        /* ชั้นที่ 3: พื้นหลังไล่เฉด */
        linear-gradient(135deg, #0a192f 0%, #020c1b 100%);

    background-size: 800px 800px, 100% 100%, 100% 100%;
    background-position: center top, 0 0, 0 0;
    background-repeat: repeat, no-repeat, no-repeat;
    background-attachment: fixed;
}

a {
    text-decoration: none;
    color: inherit;
}

/* --- MOBILE HEADER --- */
.mobile-header {
    display: none;
   background: linear-gradient(to right, #2d9208, #2ebde9);
    color: white;
    padding: 12px 15px;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 1001;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);

    /* --- [ ✅ เพิ่ม 2 บรรทัดนี้ ] --- */
    width: 100%;
    box-sizing: border-box;
}

.hamburger-btn {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    padding: 5px;
}

.mobile-logo {
    font-size: 1.4em;
    font-weight: 600;
}

/* --- SIDEBAR MENU --- */
.sidebar {
    width: var(--sidebar-width);
    background-color: var(--primary-color);
    color: #e9ecef;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    overflow-y: auto;
    z-index: 1002;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-header {
    background-color: var(--secondary-color);
    padding: 20px;
    text-align: center;
    font-weight: 600;
    font-size: 1.2em;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.nav-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-header {
    background-color: rgba(0, 0, 0, 0.2);
    padding: 15px 20px;
    font-size: 0.9em;
    font-weight: 600;
    color: #a8e6cf;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.menu-item {
    display: block;
    padding: 12px 20px 12px 25px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.menu-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.menu-item.has-sub::after {
    content: '\f054'; /* FontAwesome chevron-right */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: 20px;
    font-size: 0.8em;
    transition: transform 0.3s;
}

.nav-group.open .menu-item.has-sub {
    background-color: var(--secondary-color);
    color: #fff;
}

.nav-group.open .menu-item.has-sub::after {
    transform: rotate(90deg);
}

/* Sub Menu */
.sub-menu {
    display: none;
    background-color: rgba(0, 0, 0, 0.2);
    padding: 0;
    margin: 0;
    list-style: none;
}

.nav-group.open .sub-menu {
    display: block;
}

.sub-menu a {
    display: block;
    padding: 10px 20px 10px 50px;
    font-size: 0.95em;
    color: #ccc;
    transition: all 0.2s;
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
}

.sub-menu a:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.05);
    padding-left: 55px;
}

/* --- MAIN LAYOUT --- */
.page-wrapper {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

.main-content-wrapper {
    margin-left: var(--sidebar-width);
    flex: 1;
    display: flex;
    flex-direction: column;
    transition: margin-left 0.3s;
    padding: 25px; 
    box-sizing: border-box;
}

.desktop-header {
    background: #fff;
    padding: 15px 30px;
    display: flex;
    align-items: center;
    border-bottom: 4px solid var(--accent-color);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.logo-circle {
    width: 50px;
    height: 50px;
    background: var(--secondary-color);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.5em;
    margin-right: 15px;
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px var(--secondary-color);
}

/* --- OVERLAY --- */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1001;
    backdrop-filter: blur(3px);
}


/* --- POPUP MODAL STYLES --- */
.popup-overlay {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
    box-sizing: border-box; /* 👈 [เพิ่มบรรทัดนี้] */
}

.popup-container {
    background: #fff;
    width: 100%;
    max-width: 900px;
    border-radius: 12px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    position: relative;
    overflow: hidden;
    animation: slideUp 0.3s ease-out;
    border-top: 5px solid var(--secondary-color);
}
/* --- NEW POPUP BUTTONS --- */
.popup-buttons-group {
    margin-top: 25px; /* Adjust spacing as needed */
    display: flex;
    gap: 10px; /* Space between buttons */
    flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
    justify-content: center; /* Center buttons horizontally */
}

.popup-buttons-group .btn {
    flex-grow: 1; /* Allow buttons to grow and fill space */
    min-width: 180px; /* Minimum width for buttons */
    padding: 12px 20px;
    font-size: 1em;
    font-weight: 500;
    border-radius: 6px;
    text-align: center;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}

.popup-buttons-group .btn i {
    margin-right: 8px;
}

/* Primary Button (เลือกเสนอราคา) */
.popup-buttons-group .btn-primary {
    background-color: var(--accent-color); /* Green */
    color: #fff;
    border: 1px solid var(--accent-color);
}
.popup-buttons-group .btn-primary:hover {
    background-color: #245c3d; /* Darker green */
    border-color: #245c3d;
}

/* Outline Button (ดาวน์โหลดแคตตาล็อก) */
.popup-buttons-group .btn-outline {
    background-color: transparent;
    color: #333;
    border: 1px solid #ccc;
}
.popup-buttons-group .btn-outline:hover {
    background-color: #f0f0f0;
    border-color: #aaa;
}

/* Responsive adjustments for buttons */
@media (max-width: 480px) {
    .popup-buttons-group {
        flex-direction: column; /* Stack buttons vertically on very small screens */
        gap: 8px;
    }
    .popup-buttons-group .btn {
        min-width: unset; /* Remove min-width to let them fill width */
        width: 100%;
    }
}

/* Ensure font awesome is loaded for icons */
/* If you don't have Font Awesome, you'll need to add it to your <head> in header.php */
/* <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> */

@keyframes slideUp {
    from { transform: translateY(50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.popup-close {
    position: absolute;
    right: 20px;
    top: 15px;
    font-size: 32px;
    color: #999;
    cursor: pointer;
    z-index: 10;
    transition: color 0.2s;
    line-height: 1;
}

.popup-close:hover { color: #333; }

.popup-header {
    background: #f8f9fa;
    padding: 20px 30px;
    border-bottom: 1px solid #eee;
}

.popup-header h2 {
    margin: 0;
    color: #2c3e50;
    font-size: 1.5em;
    padding-right: 30px;
}

.popup-body {
    display: flex;
    padding: 30px;
    gap: 30px;
}

.popup-left { flex: 0 0 40%; }
.popup-right { flex: 1; }

.popup-image-box {
    border: 1px solid #eee;
    padding: 15px;
    border-radius: 8px;
    background: #fff;
    margin-bottom: 20px;
    text-align: center;
}

.popup-image-box img {
    max-width: 100%;
    height: auto;
}

.main-price {
    font-size: 1.8em;
    color: #d9534f;
    font-weight: 700;
    line-height: 1.2;
}

.sub-price {
    color: #007bff;
    font-size: 1.1em;
    margin-top: 5px;
}

.btu-tag {
    display: inline-block;
    background: #e9ecef;
    color: #495057;
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: 500;
    margin-top: 15px;
}

.detail-section { margin-bottom: 25px; }

.detail-header {
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 15px;
    font-size: 1.2em;
    color: #333;
}

.desc-content {
    color: #555;
    line-height: 1.6;
}

.features-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.features-content li {
    padding: 8px 0 8px 30px;
    position: relative;
    border-bottom: 1px dashed #eee;
    color: #444;
}

.features-content li::before {
    content: '✓';
    position: absolute;
    left: 5px;
    color: #28a745;
    font-weight: bold;
}

/* ... (โค้ด CSS ของ Popup เดิม) ... */



/* --- INDEX PAGE SPECIFIC STYLES --- */
.page-limit-container {
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
}

.main-group-header {
    background: #fff;
    padding: 12px 20px;
    border-left: 5px solid var(--primary-color);
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    margin-bottom: 25px;
    font-size: 1.5em;
    font-weight: 600;
    color: #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

/* SEO Content Block */
.seo-content-block {
    background: #fff;
    padding: 25px;
    border-radius: 8px;
    margin-bottom: 30px;
    border: 1px solid #e0e0e0;
    line-height: 1.8;
    color: #444;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.seo-content-block h2, .seo-content-block h3 { color: var(--primary-color); margin-top: 0; }
.seo-content-block img { max-width: 100%; height: auto; border-radius: 4px; margin: 1px 0; }

/* Series Card Layout */
.series-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    margin-bottom: 30px;
    border: 1px solid #eee;
}

.series-header-text {
    background-color:  rgb(45, 178, 244);
    color: rgb(247, 249, 250);
    font-weight: 500;
    padding: 10px 10px;
    font-size: .9em;
    line-height: 1.5;
}

/* Flexbox Container for Body */
.series-body {
    display: flex;
    background-color: #2c3e50; /* พื้นหลังเข้ม */
}

/* Left Column: Image */
.series-image-column {
    flex: 0 0 30%;
    max-width: 300px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #34495e;
    background: #2c3e50;
}

.series-image-column img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    background: #fff;
    padding: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* --- [ ✅ เพิ่ม CSS นี้ ] --- */
/* (ปุ่มดาวน์โหลดแคตตาล็อกใต้รูป) */
.series-image-column {
    /* (ต้องเพิ่ม 2 บรรทัดนี้เพื่อให้ปุ่มจัดกลาง) */
    display: flex;
    flex-direction: column; 
    align-items: center; 
}

.catalog-download-btn {
    display: inline-block;
    background-color: #5bc0de; /* (สีเดียวกับปุ่มใน Popup) */
    color: #fff;
    padding: 8px 15px;
    margin-top: 15px; /* (เว้นระยะจากรูป) */
    border-radius: 5px;
    text-decoration: none;
    font-size: 0.9em;
    font-weight: 500;
    transition: all 0.2s ease;
    border: 1px solid #46b8da;
}
.catalog-download-btn i {
    margin-right: 8px;
}
.catalog-download-btn:hover {
    background-color: #31b0d5;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Right Column: Table */
.series-table-column {
    flex: 1;
    overflow-x: auto;
}

.series-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95em;
    color: #ecf0f1;
}

.series-table th {
    background-color: #1a4d36;
    color: #fff;
    text-align: left;
    padding: 12px 15px;
    font-weight: 500;
    border-bottom: 2px solid #4c956c;
    white-space: nowrap;
}

.series-table td {
    padding: 10px 15px;
    border-bottom: 1px solid #34495e;
    vertical-align: middle;
    font-weight: 300;
}

.series-table tr:last-child td { border-bottom: none; }
.series-table tr:nth-child(even) { background-color: #34495e; }

.series-table tr:hover {
    background-color: #4a637c;
    cursor: pointer;
    transition: background 0.2s;
}

.col-model { font-weight: 400; color: #fff; }
.col-btu { text-align: center; color: #bdc3c7; }
.col-price { text-align: right; font-weight: 600; color: #ff6b6b; font-size: 1.1em; }



/* 1. สำหรับจอ Tablet และ Mobile (เล็กกว่า 992px) */
@media (max-width: 992px) {

    /* --- 1. สลับ Header --- */

    /* แสดง Header มือถือ */
    .mobile-header {
        display: flex;
    }

    /* ซ่อน Header จอใหญ่ */
    .desktop-header {
        display: none;
    }

    /* --- 2. จัดการ Sidebar --- */

    /* ซ่อน Sidebar (เลื่อนไปซ้ายสุด) */
    .sidebar {
        transform: translateX(-100%);
        box-shadow: none;
    }

    /* แสดง Sidebar เมื่อถูกคลิก (มีคลาส .active) */
    .sidebar.active {
        transform: translateX(0);
        box-shadow: 5px 0 25px rgba(0, 0, 0, 0.3);
    }

    /* --- 3. จัดการเนื้อหาหลัก (Main Content) --- */

    .main-content-wrapper {
        /* ลบ margin-left ที่เว้นไว้สำหรับ sidebar จอใหญ่ */
        margin-left: 0;
        
        /* [✅ จุดสำคัญ] บังคับลบ padding รอบนอกเพื่อให้ชิดขอบ */
        padding: 0 !important; 
    }

    /* [✅ จุดสำคัญ] บังคับลบ padding ของ <main> ด้านในด้วย */
    .main-content-wrapper main {
        padding: 0 !important;
    }

    /* --- 4. จัดการ Overlay --- */

    /* แสดง Overlay (ฉากหลังมืดๆ) เมื่อ sidebar เปิด */
    .sidebar-overlay.active {
        display: block;
    }
}

/* 2. สำหรับจอมือถือ (เล็กกว่า 768px) */
@media (max-width: 768px) {

    /* --- Popup Modal --- */
.popup-overlay {
        align-items: flex-start; /* บังคับชิดบน */
        padding: 20px 10px;    /* ลดขอบซ้าย-ขวา */
    }

    /* --- (โค้ดเดิมของคุณที่มีอยู่แล้ว) --- */

    .popup-body {
        flex-direction: column;
        padding: 10px;
    }
    
    .popup-left {
        flex: auto;
        text-align: center;
    }

    .popup-header h2 { 
        font-size: 1.3em; 
    }

    /* --- Index Page Layout --- */
    .page-limit-container {
        padding: 5px !important;
    }

    .series-body { 
        flex-direction: column; 
    }
    
    .series-image-column {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        border-right: none;
        border-bottom: 1px solid #34495e;
        padding: 15px;
    }
    
    .series-image-column img { 
        max-width: 200px; 
    }

    /* --- [ ✅ ส่วนที่แก้ไขตารางตกขอบ (กลยุทธ์บังคับด้วย Px) ] --- */

    .series-table {
        /* 1. นี่คือคำสั่งสำคัญที่สุด: ให้ตารางเชื่อฟัง width ที่เราสั่ง */
        table-layout: fixed; 
        width: 100%;
        font-size: 0.9em;
    }

    .series-table th,
    .series-table td {
        padding: 10px 5px; 
    }

    /* 2. คอลัมน์ Model: ปล่อยให้มันรับพื้นที่ที่เหลือ */
    .series-table th:nth-child(1),
    .col-model {
        width: auto; /* ปล่อยให้มันรับพื้นที่ที่เหลือไป */
        overflow-wrap: break-word; 
        word-break: break-all;     /* บังคับตัดคำ */
        padding-left: 8px;
    }
    
    /* 3. คอลัมน์ BTU: บังคับความกว้างตายตัว */
    .series-table th:nth-child(2),
    .col-btu { 
        width: 65px; /* << บังคับความกว้างเป็น pixel */
        font-size: 0.85em; 
        text-align: center;
    }
    
/* 4. คอลัมน์ Price: บังคับความกว้างตายตัว */
.series-table th:nth-child(3),
.col-price { 
    width: 50px !important; /* << ลองลดค่าลง และเติม !important */
    font-size: 0.9em; 
    white-space: nowrap; 
    padding-right: 8px; 
    text-align: right;
}
}
/* CSS (เมนูขยายปุ่มลอย) - ฉบับแก้ไข */

.floating-chat-widget {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /* --- [✅ แก้ไข] ทำให้พื้นที่ว่างๆ ของ widget โปร่งใสต่อการคลิก --- */
    pointer-events: none; 
}

.fab-menu {
    list-style: none;
    padding: 0;
    margin: 0 0 15px 0;
    transform: scale(0);
    transform-origin: bottom right;
    opacity: 0;
    transition: transform 0.2s ease-out, opacity 0.2s ease-out;
    /* --- [✅ แก้ไข] ทำให้เมนูกลับมาคลิกได้ --- */
    pointer-events: auto; 
}

.floating-chat-widget.active .fab-menu {
    transform: scale(1);
    opacity: 1;
}

.fab-menu li {
    margin-bottom: 10px;
}

.fab-menu a {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-decoration: none;
    color: white;
    font-size: 16px;
    font-weight: 600;
}

.fab-menu a .text {
    background-color: #0d47a1;
    padding: 8px 16px;
    border-radius: 20px;
    margin-right: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
}

.fab-menu a .icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s;
    overflow: hidden;
}

.fab-menu a:hover .icon {
    transform: scale(1.1);
}

.icon img {
    width: 100%;
    height: auto;
}

.icon-facebook {
    background-color: #1877F2;
}

.icon-line {
    background-color: #06C755;
}

.icon-phone {
    background-color: #FF9800;
}

.icon-ai {
    background-color: #ffffff;
    padding: 8px;
    box-sizing: border-box;
}

#fab-toggle {
    width: 60px;
    height: 60px;
    background-color: #14a320ff;
    border-radius: 50%;
    border: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
    /* --- [✅ แก้ไข] ทำให้ปุ่มหลักกลับมาคลิกได้ --- */
    pointer-events: auto;
}

#fab-toggle:hover {
    transform: scale(1.05);
    background-color: #1976d2;
}

#fab-toggle .fab-icon {
    font-size: 28px;
    color: white;
    position: absolute;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.icon-open {
    transform: scale(1);
    opacity: 1;
}

.icon-close-main {
    transform: scale(0);
    opacity: 0;
}

.floating-chat-widget.active #fab-toggle .icon-open {
    transform: scale(0);
    opacity: 0;
}

.floating-chat-widget.active #fab-toggle .icon-close-main {
    transform: scale(1);
    opacity: 1;
}

/* --- [ ✅ เพิ่ม CSS นี้ ] --- */



/* 2. CSS สำหรับปุ่ม (แทนที่ .popup-actions เดิม) */
/* --- (ตรวจสอบว่ามี CSS นี้อยู่) --- */
.popup-quote-actions {
    margin-top: 20px;
    border-top: 1px solid #eee;
    padding-top: 20px;
}
.popup-actions {
    display: flex;
    gap: 15px;
    margin-top: 0; 
}
.action-btn {
    flex: 1;
    padding: 12px;
    text-align: center;
    border-radius: 6px;
    /* ... (สี ฯลฯ) ... */
}
.btn-success {
    background: #28a745;
}
.btn-secondary {
    background: #6c757d;
}



/* --- [ ✅ เพิ่ม CSS นี้ ] --- */

/* (ปุ่มตะกร้าใหม่ ที่อยู่ในเมนู) */
.fab-menu a .icon-cart {
    background-color: var(--primary-color);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px; /* (ปรับขนาดไอคอน) */
    color: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s;
    overflow: hidden;
    position: relative; /* (สำหรับตัวเลข) */
}
.fab-menu a:hover .icon-cart {
    transform: scale(1.1);
}

/* (ตัวเลขจำนวนสินค้า บนปุ่มตะกร้า) */
#cart-item-count {
    position: absolute;
    top: -2px;
    right: -2px;
    background-color: var(--accent-color);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    width: 20px; /* (ขนาดตัวเลข) */
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
}
/* --- [ ✅ เพิ่ม CSS นี้ ] --- */

/* (ลบ CSS ของ .quantity-selector ถ้ามี) */
.quantity-selector {
    display: none !important; 
}

/* (สไตล์ปุ่มติ๊กเลือก) */

.model-selection-radio {
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 12px 15px; /* (ปรับ Padding) */
    background: #f9f9f9;

    /* [ ✅ เพิ่ม 3 บรรทัดนี้ ] */
    display: flex;       /* 1. สั่งให้ของข้างใน (input, label) เรียงแนวนอน */
    align-items: center; /* 2. สั่งให้จัดกลางแนวตั้ง */
    cursor: pointer;     /* 3. ทำให้คลิกได้ทั้งแถบ */
}
.model-selection-radio label {
    /* (ลบ display: flex และ align-items ออก) */
    cursor: pointer;
    font-size: 1.1em;
    color: #333;
    font-weight: 500;
    
    /* [ ✅ เพิ่ม ] ย้าย margin มาไว้ที่นี่ */
    margin-left: 12px; 
}
.model-selection-radio input[type="radio"] {
    /* (ลบ margin-right ออก) */
    transform: scale(1.4); 
    accent-color: var(--primary-color);
    cursor: pointer; /* (เพิ่ม) */
}

/* (สไตล์ปุ่มตอนที่ถูก disable) */
.action-btn:disabled {
    background-color: #ccc;
    opacity: 0.6;
    cursor: not-allowed;
}
.action-btn:disabled:hover {
    background-color: #ccc;
    opacity: 0.6;
}
/* --- [ ✅ เพิ่ม/แก้ไข CSS นี้ ] --- */

/* (ลบ CSS ของ .btn-remove-item ถ้ามี) */
.btn-remove-item {
    display: none; 
}

/* [ ✅ NEW ] CSS for Quantity Stepper */
.quantity-stepper {
    display: flex;
    justify-content: center;
    align-items: center;
}
.quantity-stepper button {
    background: #f0f0f0;
    border: 1px solid #ccc;
    color: #333;
    font-weight: bold;
    font-size: 1.2em;
    cursor: pointer;
    width: 35px;
    height: 35px;
    line-height: 30px;
}
.quantity-stepper button:hover { background: #e0e0e0; }
.quantity-stepper input {
    width: 50px;
    height: 35px;
    text-align: center;
    border: 1px solid #ccc;
    border-left: none;
    border-right: none;
    font-size: 1.1em;
    font-weight: 500;
    color: #333; /* (เพิ่มสีตัวอักษร) */
    background: #fff; /* (เพิ่มพื้นหลัง) */
    pointer-events: none; 
   
}
.quantity-stepper input::-webkit-outer-spin-button,
.quantity-stepper input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.quantity-stepper button.btn-minus { border-radius: 4px 0 0 4px; }
.quantity-stepper button.btn-plus { border-radius: 0 4px 4px 0; }
/* [ End Stepper CSS ] */

/* [ ✅ NEW ] CSS for "Continue Shopping" button */
.cart-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding-bottom: 20px;
}
.btn-continue-shopping {
    background: #6c757d;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 500;
    transition: opacity 0.2s;
    font-size: 0.9em;
}
.btn-continue-shopping:hover { opacity: 0.9; }
/* --- CSS สำหรับรูปภาพประกอบท้ายใบเสนอราคา --- */

.attachment-gallery {
    display: flex; /* จัดเรียงในแถวแนวนอน */
    flex-wrap: wrap; /* ถ้าหลายรูปให้ขึ้นแถวใหม่ */
    gap: 10px; /* เว้นระยะห่างระหว่างรูป */
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #eee;
    background: #f9f9f9;
    border-radius: 4px;
}

/* ⭐️ นี่คือกรอบของรูป (ตัวสี่เหลี่ยม) */
.img-wrapper {
    width: 140px;  /* กำหนดความกว้างของกรอบ */
    height: 110px; /* กำหนดความสูงของกรอบ */
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #ffffff;
    overflow: hidden; /* ซ่อนส่วนที่ล้นออกมา */
    
    /* (สำหรับ Placeholder "No Image") */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ⭐️ นี่คือตัวรูปภาพ (ที่อยู่ข้างใน) */
.img-wrapper img {
    width: 100%;
    height: 100%;
    
    /* * ‼️ นี่คือคำสั่งสำคัญครับ ‼️
     * 'contain' = แสดงรูปเต็มๆ (อาจมีขอบขาว) (แนะนำ)
     * 'cover'   = ซูมรูปให้เต็มกรอบ (รูปอาจโดนตัด)
     */
    object-fit: contain; 
}

/* (สำหรับ Placeholder "No Image") */
.img-wrapper.placeholder {
    background-color: #f0f0f0;
    color: #aaa;
    font-size: 0.8em;
}



        /* --- สไตล์การ์ดหน้า --- */
       .card-split {
    display: flex;              /* จัดเรียงแนวนอน */
    background: #fff;           /* พื้นหลังสีขาว */
    border-radius: 12px;        /* มุมมน */
    overflow: hidden;           /* ตัดมุมรูปภาพไม่ให้เกินกรอบ */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* เงาจางๆ */
    height: 200px;              /* กำหนดความสูงการ์ด */
    margin-bottom: 15px;        /* เว้นระยะห่างด้านล่าง */
}

.card-text {
    width: 40%;                 /* แบ่งครึ่งซ้าย 50% */
    padding: 15px;              /* ระยะห่างขอบด้านใน */
    display: flex;              /* ใช้ Flex จัดข้อความ */
    flex-direction: column;     /* เรียงบนลงล่าง */
    justify-content: center;    /* จัดกึ่งกลางแนวตั้ง */
}

.card-text h3 { margin: 0 0 5px 0; font-size: 18px; color: #333; }
.card-text p  { margin: 0; font-size: 14px; color: #666; }

.card-image {
    width: 60%; 
    height: auto;                
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;       /* ขยายเต็มกรอบเหมือนเดิม */
    object-position: top;    /* <--- เพิ่มบรรทัดนี้ครับ (ยึดด้านบนเป็นหลัก หัวจะไม่ขาด) */
}