<?php
// หน้าคู่มือการใช้งานระบบ (manual.php)
require_once 'auth.php';

// คำนวณจำนวนสินค้าในตะกร้า
$cartCount = 0;
if (isset($_SESSION['cart']) && is_array($_SESSION['cart'])) {
    foreach ($_SESSION['cart'] as $item) {
        $cartCount += ($item['quantity'] ?? 1);
    }
}
?>
<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>คู่มือการใช้งานระบบ - AMARA STUDIO</title>
    <link rel="stylesheet" href="style.css">
    <style>
        .manual-hero {
            background: linear-gradient(135deg, #1e1e24 0%, #121214 100%);
            color: white;
            padding: 50px 30px;
            border-radius: var(--radius);
            margin-top: 25px;
            margin-bottom: 35px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        .manual-hero h1 {
            font-size: 32px;
            font-weight: 700;
            margin-bottom: 12px;
        }
        .manual-hero p {
            color: #a0aec0;
            font-size: 16px;
            max-width: 650px;
            margin: 0 auto 20px;
        }
        .search-manual-box {
            max-width: 500px;
            margin: 0 auto;
            position: relative;
        }
        .search-manual-box input {
            width: 100%;
            padding: 14px 20px 14px 45px;
            border-radius: 30px;
            border: 1px solid rgba(255,255,255,0.2);
            background: rgba(255,255,255,0.1);
            color: white;
            font-size: 15px;
            outline: none;
            backdrop-filter: blur(10px);
            transition: all 0.3s ease;
        }
        .search-manual-box input::placeholder {
            color: #cbd5e0;
        }
        .search-manual-box input:focus {
            background: rgba(255,255,255,0.18);
            border-color: var(--primary);
            box-shadow: 0 0 15px rgba(197, 168, 128, 0.3);
        }
        .search-icon {
            position: absolute;
            left: 18px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 18px;
            color: #cbd5e0;
        }
        .manual-tabs {
            display: flex;
            justify-content: center;
            gap: 12px;
            margin-bottom: 30px;
            flex-wrap: wrap;
        }
        .manual-tab-btn {
            padding: 12px 24px;
            border-radius: 30px;
            border: 1px solid var(--border);
            background: white;
            color: var(--text-main);
            font-weight: 600;
            font-size: 15px;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .manual-tab-btn:hover {
            border-color: var(--primary);
            color: var(--primary);
        }
        .manual-tab-btn.active {
            background: var(--dark);
            color: white;
            border-color: var(--dark);
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }
        .manual-section {
            display: none;
            animation: fadeIn 0.3s ease forwards;
        }
        .manual-section.active {
            display: block;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(8px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .guide-card {
            background: white;
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 30px;
            margin-bottom: 24px;
            box-shadow: var(--shadow);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        .guide-card:hover {
            box-shadow: 0 8px 30px rgba(0,0,0,0.08);
        }
        .guide-card-header {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #edf2f7;
        }
        .guide-step-num {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 18px;
            flex-shrink: 0;
        }
        .guide-card h3 {
            font-size: 20px;
            font-weight: 700;
            color: var(--dark);
            margin: 0;
        }
        .step-list {
            list-style: none;
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: 14px;
        }
        .step-list li {
            position: relative;
            padding-left: 28px;
            font-size: 15px;
            color: #4a5568;
            line-height: 1.6;
        }
        .step-list li::before {
            content: "✓";
            position: absolute;
            left: 0;
            top: 1px;
            color: var(--primary);
            font-weight: bold;
            font-size: 16px;
        }
        .guide-tip {
            background: #fffaf0;
            border-left: 4px solid var(--warning);
            padding: 12px 18px;
            border-radius: 0 8px 8px 0;
            margin-top: 15px;
            font-size: 14px;
            color: #7b341e;
        }
        .guide-badge {
            display: inline-block;
            padding: 3px 8px;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 600;
            background: #edf2f7;
            color: #4a5568;
            margin: 0 4px;
        }
        .faq-item {
            background: white;
            border: 1px solid var(--border);
            border-radius: var(--radius);
            margin-bottom: 12px;
            overflow: hidden;
        }
        .faq-question {
            padding: 18px 24px;
            font-weight: 600;
            font-size: 16px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #fff;
            user-select: none;
            transition: background 0.2s;
        }
        .faq-question:hover {
            background: #f8fafc;
        }
        .faq-answer {
            padding: 0 24px 20px;
            color: #4a5568;
            font-size: 15px;
            line-height: 1.7;
            display: none;
            border-top: 1px solid #f1f5f9;
            padding-top: 15px;
        }
        .faq-item.open .faq-answer {
            display: block;
        }
        .faq-item.open .faq-icon {
            transform: rotate(180deg);
        }
        .faq-icon {
            transition: transform 0.2s ease;
            color: var(--primary);
            font-weight: bold;
        }
        .quick-action-bar {
            background: white;
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 20px;
            display: flex;
            justify-content: space-around;
            text-align: center;
            margin-bottom: 30px;
            flex-wrap: wrap;
            gap: 15px;
        }
        .quick-action-item {
            text-decoration: none;
            color: var(--text-main);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            font-weight: 600;
            font-size: 14px;
            padding: 10px 15px;
            border-radius: 8px;
            transition: all 0.2s ease;
        }
        .quick-action-item:hover {
            background: #f7f7f9;
            color: var(--primary);
            transform: translateY(-2px);
        }
        .quick-action-icon {
            font-size: 24px;
        }
    </style>
</head>
<body>

    <!-- Header Navigation -->
    <header>
        <div class="nav-container">
            <a href="index.php" class="logo">AMARA<span>STUDIO</span></a>
            <ul class="nav-menu">
                <li><a href="index.php" class="nav-link">คอลเลกชันทั้งหมด</a></li>
                <li>
                    <a href="cart.php" class="nav-link cart-icon-wrapper">
                        ตะกร้าสินค้า
                        <span class="cart-count" id="cart-nav-count"><?= $cartCount ?></span>
                    </a>
                </li>
                <li><a href="manual.php" class="nav-link active" style="color: var(--primary); font-weight: 700;">📖 คู่มือการใช้งาน</a></li>
                <?php if (isLoggedIn()): ?>
                    <li><a href="favorites.php" class="nav-link">❤️ สินค้าที่ถูกใจ</a></li>
                    <?php if (isSellerLoggedIn()): ?>
                        <li><a href="seller_dashboard.php" class="nav-link admin-btn">🏪 แดชบอร์ดผู้ขาย</a></li>
                    <?php endif; ?>
                    <li style="display: flex; align-items: center; gap: 10px; margin-left: 10px;">
                        <span style="color: var(--primary); font-size: 14px; font-weight: 600;">👋 <?= htmlspecialchars(getAdminName()) ?></span>
                        <a href="logout.php" class="nav-link" style="color: #e53e3e;">ออกจากระบบ</a>
                    </li>
                <?php else: ?>
                    <li><a href="login.php" class="nav-link admin-btn">เข้าสู่ระบบ</a></li>
                <?php endif; ?>
            </ul>
        </div>
    </header>

    <!-- Main Container -->
    <div class="container" style="margin-bottom: 60px;">
        
        <!-- Hero Header -->
        <div class="manual-hero">
            <span style="color: var(--primary); font-weight: 700; text-transform: uppercase; font-size: 13px; letter-spacing: 2px; display: block; margin-bottom: 8px;">HELP CENTER & DOCUMENTATION</span>
            <h1>คู่มือการใช้งานระบบ AMARA STUDIO</h1>
            <p>ศูนย์รวมข้อมูลและขั้นตอนการใช้งานระบบร้านค้าออนไลน์ ทั้งสำหรับลูกค้าผู้ซื้อ ร้านค้าผู้ขาย และผู้ดูแลระบบ</p>
            <div class="search-manual-box">
                <span class="search-icon">🔍</span>
                <input type="text" id="manual-search" placeholder="ค้นหาคู่มือ เช่น วิธีสั่งซื้อ, เพิ่มสินค้า, แนบสลิป..." onkeyup="filterManualCards()">
            </div>
        </div>

        <!-- Quick Action Links -->
        <div class="quick-action-bar">
            <a href="#buyer-section" class="quick-action-item" onclick="switchTab('buyer')">
                <span class="quick-action-icon">🛍️</span>
                <span>คู่มือผู้ซื้อ</span>
            </a>
            <a href="#seller-section" class="quick-action-item" onclick="switchTab('seller')">
                <span class="quick-action-icon">🏪</span>
                <span>คู่มือร้านค้า/ผู้ขาย</span>
            </a>
            <a href="#admin-section" class="quick-action-item" onclick="switchTab('admin')">
                <span class="quick-action-icon">⚙️</span>
                <span>คู่มือผู้ดูแลระบบ</span>
            </a>
            <a href="#faq-section" class="quick-action-item" onclick="switchTab('faq')">
                <span class="quick-action-icon">❓</span>
                <span>คำถามที่พบบ่อย</span>
            </a>
        </div>

        <!-- Tabs Navigation -->
        <div class="manual-tabs">
            <button type="button" class="manual-tab-btn active" id="tab-buyer-btn" onclick="switchTab('buyer')">
                🛍️ สำหรับลูกค้า / ผู้ซื้อ
            </button>
            <button type="button" class="manual-tab-btn" id="tab-seller-btn" onclick="switchTab('seller')">
                🏪 สำหรับร้านค้า / ผู้ขาย
            </button>
            <button type="button" class="manual-tab-btn" id="tab-admin-btn" onclick="switchTab('admin')">
                ⚙️ สำหรับผู้ดูแลระบบ (Admin)
            </button>
            <button type="button" class="manual-tab-btn" id="tab-faq-btn" onclick="switchTab('faq')">
                ❓ คำถามที่พบบ่อย (FAQ)
            </button>
        </div>

        <!-- SECTION 1: Buyer Guide -->
        <div id="section-buyer" class="manual-section active">
            
            <div class="guide-card">
                <div class="guide-card-header">
                    <div class="guide-step-num">1</div>
                    <div>
                        <h3>การเลือกชมและค้นหาสินค้า (Browse & Search)</h3>
                        <p style="color: var(--text-muted); font-size: 14px; margin-top: 4px;">ค้นหาไอเทมแฟชั่นที่คุณต้องการได้อย่างรวดเร็ว</p>
                    </div>
                </div>
                <ul class="step-list">
                    <li>เข้าสู่หน้าแรก <span class="guide-badge">คอลเลกชันทั้งหมด</span> เพื่อดูรายการสินค้าทั้งหมด</li>
                    <li>ใช้ <strong>แถบหมวดหมู่ (Category Filter)</strong> เช่น ชุดเดรส, เสื้อเชิ้ต, กางเกง, รองเท้า, กระเป๋า เพื่อคัดกรองสินค้าตามประเภท</li>
                    <li>ใช้ <strong>ช่องค้นหา (Search Bar)</strong> พิมพ์ชื่อสินค้า หรือรหัสสินค้า เพื่อค้นหาแบบระบุเฉพาะเจาะจง</li>
                    <li>สามารถคลิกปุ่ม <strong>❤️ ไอคอนหัวใจ</strong> บนการ์ดสินค้าเพื่อบันทึกไว้ใน <span class="guide-badge">สินค้าที่ถูกใจ</span> เพื่อกลับมาดูภายหลังได้</li>
                </ul>
            </div>

            <div class="guide-card">
                <div class="guide-card-header">
                    <div class="guide-step-num">2</div>
                    <div>
                        <h3>การเลือกสี ไซซ์ และใส่ตะกร้า (Select Variants & Add to Cart)</h3>
                        <p style="color: var(--text-muted); font-size: 14px; margin-top: 4px;">ระบุรายละเอียดไซซ์และสีที่ตรงใจก่อนสั่งซื้อ</p>
                    </div>
                </div>
                <ul class="step-list">
                    <li>คลิกที่รูปหรือชื่อสินค้าเพื่อเข้าสู่หน้า <strong>รายละเอียดสินค้า (Product Detail)</strong></li>
                    <li>กดเลือก <strong>สี (Color)</strong> และ <strong>ขนาด (Size)</strong> ที่ต้องการ ระบบจะแสดงจำนวนคงเหลือในสต็อกและปรับรูปภาพ/ราคาตามตัวเลือกนั้น</li>
                    <li>ระบุจำนวนชิ้นที่ต้องการสั่งซื้อ จากนั้นกดปุ่ม <span class="guide-badge" style="background: var(--dark); color: white;">+ เพิ่มลงตะกร้า</span></li>
                    <li>ระบบจะอัปเดตจำนวนสินค้าบนเมนู <span class="guide-badge">ตะกร้าสินค้า</span> ด้านบนทันที</li>
                </ul>
                <div class="guide-tip">
                    💡 <strong>คำแนะนำ:</strong> หากตัวเลือกสีหรือไซซ์ใดหมดสต็อก (Out of Stock) ระบบจะแสดงสถานะสินค้าหมดและไม่อนุญาตให้สั่งซื้อเกินจำนวนคงเหลือ
                </div>
            </div>

            <div class="guide-card">
                <div class="guide-card-header">
                    <div class="guide-step-num">3</div>
                    <div>
                        <h3>การสั่งซื้อและการชำระเงิน (Checkout & Payment)</h3>
                        <p style="color: var(--text-muted); font-size: 14px; margin-top: 4px;">ชำระเงินสะดวกและปลอดภัยผ่าน QR PromptPay พร้อมแนบสลิป</p>
                    </div>
                </div>
                <ul class="step-list">
                    <li>คลิกที่เมนู <span class="guide-badge">ตะกร้าสินค้า</span> เพื่อตรวจสอบรายการสินค้า ปรับลดจำนวน หรือลบสินค้า</li>
                    <li>กรอกข้อมูลผู้รับและที่อยู่จัดส่งให้ครบถ้วน (ชื่อ-นามสกุล, เบอร์โทรศัพท์, ที่อยู่จัดส่ง)</li>
                    <li>ระบบจะแสดง <strong>QR Code พร้อมเพย์ (PromptPay)</strong> พร้อมยอดเงินรวมที่ต้องชำระ</li>
                    <li>เปิดแอปพลิเคชันธนาคารของท่าน สแกน QR Code เพื่อโอนเงินตามยอดที่ระบุ</li>
                    <li>อัปโหลด <strong>ไฟล์รูปภาพสลิปหลักฐานการโอนเงิน (Payment Slip)</strong> ในช่องที่กำหนด</li>
                    <li>ตรวจสอบความถูกต้องแล้วกดปุ่ม <strong>"ยืนยันการสั่งซื้อ"</strong> เพื่อส่งข้อมูลคำสั่งซื้อเข้าสู่ระบบ</li>
                </ul>
            </div>

            <div class="guide-card">
                <div class="guide-card-header">
                    <div class="guide-step-num">4</div>
                    <div>
                        <h3>การติดตามสถานะคำสั่งซื้อ (Order Tracking)</h3>
                        <p style="color: var(--text-muted); font-size: 14px; margin-top: 4px;">ตรวจสอบสถานะการตรวจสอบสลิปและการจัดส่งสินค้า</p>
                    </div>
                </div>
                <ul class="step-list">
                    <li>หลังจากยืนยันคำสั่งซื้อ คุณจะได้รับ <strong>หมายเลขคำสั่งซื้อ (Order ID)</strong></li>
                    <li>สถานะเริ่มต้นคือ <span class="guide-badge" style="background: #feebc8; color: #7b341e;">รอตรวจสอบ (Pending)</span> เมื่อผู้ขายตรวจสอบสลิปจะเปลี่ยนเป็น <span class="guide-badge" style="background: #c6f6d5; color: #22543d;">ชำระเงินแล้ว (Paid)</span></li>
                    <li>เมื่อสินค้าถูกส่งมอบให้ขนส่ง สถานะจะเปลี่ยนเป็น <span class="guide-badge" style="background: #bee3f8; color: #2c5282;">กำลังจัดส่ง (Shipped)</span> พร้อมหมายเลขพัสดุสำหรับติดตาม</li>
                </ul>
            </div>

        </div>

        <!-- SECTION 2: Seller Guide -->
        <div id="section-seller" class="manual-section">
            
            <div class="guide-card">
                <div class="guide-card-header">
                    <div class="guide-step-num">1</div>
                    <div>
                        <h3>การเข้าสู่ระบบร้านค้า (Seller Login & Dashboard)</h3>
                        <p style="color: var(--text-muted); font-size: 14px; margin-top: 4px;">ภาพรวมสถิติร้านค้า ยอดขาย และคำสั่งซื้อล่าสุด</p>
                    </div>
                </div>
                <ul class="step-list">
                    <li>คลิกปุ่ม <span class="guide-badge">เข้าสู่ระบบ</span> แล้วเลือกบทบาท <strong>"ผู้ขาย (Seller)"</strong></li>
                    <li>กรอกชื่อผู้ใช้และรหัสผ่านเพื่อเข้าสู่ <span class="guide-badge">แดชบอร์ดผู้ขาย (Seller Dashboard)</span></li>
                    <li>หน้าแดชบอร์ดจะสรุปข้อมูลสำคัญ: <strong>ยอดขายรวม (Total Sales)</strong>, <strong>จำนวนออเดอร์ (Total Orders)</strong>, และ <strong>จำนวนสินค้าทั้งหมด (Products Count)</strong></li>
                    <li>มีตารางแสดงรายการคำสั่งซื้อล่าสุดของร้านค้า พร้อมปุ่มเข้าถึงการจัดการอย่างรวดเร็ว</li>
                </ul>
            </div>

            <div class="guide-card">
                <div class="guide-card-header">
                    <div class="guide-step-num">2</div>
                    <div>
                        <h3>การลงสินค้าใหม่ด้วย Matrix Generator (Add New Product)</h3>
                        <p style="color: var(--text-muted); font-size: 14px; margin-top: 4px;">สร้างตัวเลือก สี × ไซซ์ พร้อมระบุสต็อกและราคาได้ในพริบตา</p>
                    </div>
                </div>
                <ul class="step-list">
                    <li>ไปที่เมนู <span class="guide-badge">เพิ่มสินค้าใหม่</span> ในแถบเมนูผู้ขาย</li>
                    <li>กรอกข้อมูลพื้นฐาน: ชื่อสินค้า, หมวดหมู่ (Category), ราคาเริ่มต้น, คำอธิบายสินค้า และอัปโหลดรูปภาพหลัก</li>
                    <li>ในส่วน <strong>ตัวเลือกสินค้า (Variant Matrix Generator)</strong>:
                        <ul style="margin-left: 20px; margin-top: 6px; list-style: disc;">
                            <li>เลือกหรือกรอก <strong>สี (Colors)</strong> เช่น Black, White, Gold, Beige</li>
                            <li>เลือกหรือกรอก <strong>ขนาด (Sizes)</strong> เช่น S, M, L, XL หรือ One Size</li>
                        </ul>
                    </li>
                    <li>กดปุ่ม <strong>"สร้างตารางตัวเลือก (Generate Matrix)"</strong> ระบบจะจับคู่ สี × ขนาด ทุกรูปแบบโดยอัตโนมัติ</li>
                    <li>กำหนด SKU, จำนวนสต็อกคงเหลือ และราคาเฉพาะของแต่ละตัวเลือก (หากมี)</li>
                    <li>กดปุ่ม <span class="guide-badge" style="background: var(--dark); color: white;">บันทึกสินค้าใหม่</span> สินค้าจะเผยแพร่บนหน้าร้านค้าทันที</li>
                </ul>
                <div class="guide-tip">
                    💡 <strong>ข้อดีของ Matrix Generator:</strong> ช่วยประหยัดเวลา ไม่ต้องสร้างตัวเลือกทีละแถวด้วยตนเอง และสามารถแก้ไขจำนวนสต็อกแต่ละไซซ์ได้อิสระ
                </div>
            </div>

            <div class="guide-card">
                <div class="guide-card-header">
                    <div class="guide-step-num">3</div>
                    <div>
                        <h3>การจัดการออเดอร์และตรวจสอบสลิป (Order Management)</h3>
                        <p style="color: var(--text-muted); font-size: 14px; margin-top: 4px;">ตรวจสอบหลักฐานการโอนและปรับสถานะพัสดุ</p>
                    </div>
                </div>
                <ul class="step-list">
                    <li>เข้าสู่หน้า <span class="guide-badge">จัดการคำสั่งซื้อ (Orders)</span> เพื่อดูออเดอร์ของสินค้าในร้านคุณ</li>
                    <li>คลิกดู <strong>รูปภาพสลิปโอนเงิน (Payment Slip)</strong> เพื่อตรวจสอบยอดเงินและเวลาโอน</li>
                    <li>เมื่อตรวจสอบยอดเงินถูกต้อง ให้ปรับสถานะเป็น <span class="guide-badge" style="background: #c6f6d5; color: #22543d;">ชำระเงินแล้ว (Paid)</span> หรือ <span class="guide-badge" style="background: #bee3f8; color: #2c5282;">กำลังจัดส่ง (Shipped)</span></li>
                    <li>สามารถระบุ <strong>หมายเลขพัสดุ (Tracking Number)</strong> เพื่อให้ลูกค้าติดตามสินค้าได้</li>
                </ul>
            </div>

        </div>

        <!-- SECTION 3: Admin Guide -->
        <div id="section-admin" class="manual-section">
            
            <div class="guide-card">
                <div class="guide-card-header">
                    <div class="guide-step-num">1</div>
                    <div>
                        <h3>การบริหารระบบในระดับภาพรวม (Admin Portal Overview)</h3>
                        <p style="color: var(--text-muted); font-size: 14px; margin-top: 4px;">ควบคุมดูแลร้านค้า ผู้ขาย และข้อมูลธุรกรรมทั้งหมด</p>
                    </div>
                </div>
                <ul class="step-list">
                    <li>เข้าสู่ระบบด้วยบัญชีผู้ดูแลระบบ (Admin Credentials)</li>
                    <li>ดูภาพรวมสถิติทั้งแพลตฟอร์ม: ยอดขายรวมของทุกร้าน, จำนวนคำสั่งซื้อทั้งหมด และจำนวนสินค้าทั้งหมด</li>
                    <li>ตรวจสอบสินค้าที่มีสต็อกเหลือน้อย เพื่อแจ้งเตือนร้านค้า</li>
                </ul>
            </div>

            <div class="guide-card">
                <div class="guide-card-header">
                    <div class="guide-step-num">2</div>
                    <div>
                        <h3>การพิมพ์ใบจัดส่ง & ใบแพ็กของ (Packing Slip Printing)</h3>
                        <p style="color: var(--text-muted); font-size: 14px; margin-top: 4px;">สร้างเอกสารส่งพัสดุพร้อมพิมพ์ลงกระดาษได้ทันที</p>
                    </div>
                </div>
                <ul class="step-list">
                    <li>ในหน้า <span class="guide-badge">จัดการออเดอร์ & ใบแพ็กของ</span> สามารถกดปุ่ม <strong>"พิมพ์ใบแพ็กสินค้า (Print Packing Slip)"</strong></li>
                    <li>ระบบถูกออกแบบมาเป็นพิเศษสำหรับ Print CSS โดยจะซ่อนเมนูและตกแต่งรูปแบบเอกสารให้เหมาะกับกระดาษ A4 หรือใบปะหน้าพัสดุโดยอัตโนมัติ</li>
                </ul>
            </div>

        </div>

        <!-- SECTION 4: FAQ -->
        <div id="section-faq" class="manual-section">
            
            <div class="faq-item open">
                <div class="faq-question" onclick="toggleFaq(this)">
                    <span>❓ ฉันสามารถชำระเงินผ่านช่องทางใดได้บ้าง?</span>
                    <span class="faq-icon">▼</span>
                </div>
                <div class="faq-answer">
                    ระบบรองรับการชำระเงินผ่าน <strong>พร้อมเพย์ (PromptPay QR Code)</strong> รองรับทุกแอปพลิเคชันธนาคารในประเทศไทย โดยลูกค้าสามารถสแกน QR Code ในขั้นตอนเช็คเอาต์และแนบรูปภาพสลิปเพื่อยืนยันคำสั่งซื้อได้ทันที
                </div>
            </div>

            <div class="faq-item">
                <div class="faq-question" onclick="toggleFaq(this)">
                    <span>❓ หากสินค้าที่ต้องการหมดสต็อก จะสั่งซื้อได้หรือไม่?</span>
                    <span class="faq-icon">▼</span>
                </div>
                <div class="faq-answer">
                    หากตัวเลือกสีหรือขนาดนั้นๆ มีจำนวนสต็อกเป็น 0 ปุ่มเพิ่มลงตะกร้าจะไม่สามารถกดเลือกได้ แนะนำให้กด ❤️ บันทึกไว้ในรายการสินค้าที่ถูกใจ เพื่อรอการเติมสต็อกสินค้าจากทางร้าน
                </div>
            </div>

            <div class="faq-item">
                <div class="faq-question" onclick="toggleFaq(this)">
                    <span>❓ ร้านค้าจะทราบได้อย่างไรว่ามีออเดอร์ใหม่เข้ามา?</span>
                    <span class="faq-icon">▼</span>
                </div>
                <div class="faq-answer">
                    ผู้ขายสามารถเข้าสู่ <span class="guide-badge">แดชบอร์ดผู้ขาย</span> เพื่อดูรายการคำสั่งซื้อล่าสุดที่มีสถานะ "รอตรวจสอบ" พร้อมคลิกดูสลิปและดำเนินการจัดส่งสินค้าได้ทันที
                </div>
            </div>

            <div class="faq-item">
                <div class="faq-question" onclick="toggleFaq(this)">
                    <span>❓ จะเพิ่มรูปภาพสินค้าอย่างไรให้แสดงผลสวยงาม?</span>
                    <span class="faq-icon">▼</span>
                </div>
                <div class="faq-answer">
                    แนะนำให้ใช้รูปภาพสินค้าความละเอียดคมชัด อัตราส่วน 3:4 หรือ 1:1 พื้นหลังสะอาดเรียบร้อย โดยระบบรองรับไฟล์รูปภาพ .jpg, .png, .webp
                </div>
            </div>

            <div class="faq-item">
                <div class="faq-question" onclick="toggleFaq(this)">
                    <span>❓ หากแนบสลิปผิด หรือต้องการแก้ไขคำสั่งซื้อ ต้องทำอย่างไร?</span>
                    <span class="faq-icon">▼</span>
                </div>
                <div class="faq-answer">
                    หากคำสั่งซื้อยังอยู่ในสถานะ "รอตรวจสอบ" ท่านสามารถติดต่อเจ้าหน้าที่หรือผู้ขายพร้อมแจ้งหมายเลขคำสั่งซื้อ (Order ID) เพื่อทำการตรวจสอบและแก้ไขข้อมูลให้ถูกต้อง
                </div>
            </div>

        </div>

    </div>

    <!-- Script ควบคุม Tab และการค้นหา -->
    <script>
        function switchTab(tabName) {
            // ซ่อนทุก Section
            document.querySelectorAll('.manual-section').forEach(el => el.classList.remove('active'));
            document.querySelectorAll('.manual-tab-btn').forEach(el => el.classList.remove('active'));

            const targetSection = document.getElementById('section-' + tabName);
            const targetBtn = document.getElementById('tab-' + tabName + '-btn');

            if (targetSection) targetSection.classList.add('active');
            if (targetBtn) targetBtn.classList.add('active');
        }

        function toggleFaq(element) {
            const parent = element.parentElement;
            parent.classList.toggle('open');
        }

        function filterManualCards() {
            const query = document.getElementById('manual-search').value.toLowerCase().trim();
            const cards = document.querySelectorAll('.guide-card, .faq-item');

            if (query === '') {
                cards.forEach(card => card.style.display = '');
                return;
            }

            // ถ้ามีการค้นหา ให้แสดงทุก section เพื่อให้เห็นผลการค้นหา
            document.querySelectorAll('.manual-section').forEach(sec => sec.classList.add('active'));

            cards.forEach(card => {
                const text = card.textContent.toLowerCase();
                if (text.includes(query)) {
                    card.style.display = '';
                } else {
                    card.style.display = 'none';
                }
            });
        }
    </script>
</body>
</html>
