<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="images/logoEHMD.png">
    <title>รถจักรยานยนต์ (น้ำมัน) | บริษัท อีฮงมดแดงมอเตอร์ จำกัด</title>
    {{template "head_links"}}
    <style>
        .catalogue-hero {
            background: linear-gradient(135deg, #d22630 0%, #a11d25 100%);
            padding: 100px 0 40px;
            text-align: center;
            color: #fff;
            position: relative;
            overflow: hidden;
        }
        .catalogue-hero::before {
            content: '';
            position: absolute;
            inset: 0;
            background: url('images/ปกเว็บรวมรุ่น.png') center/cover no-repeat;
            opacity: 0.15;
        }
        .catalogue-hero .container { position: relative; z-index: 1; }
        .catalogue-hero h1 { font-size: 42px; font-weight: 800; margin-bottom: 12px; }
        .catalogue-hero p { font-size: 17px; color: rgba(255,255,255,0.75); }

        .filter-bar-wrap {
            position: sticky;
            top: 70px;
            z-index: 90;
            padding: 20px 0 10px;
        }
        .filter-bar {
            background: #3c3c3c;
            border-radius: 16px;
            padding: 14px 24px;
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }
        .filter-btn {
            padding: 8px 20px;
            border-radius: 30px;
            border: 1.5px solid #555;
            background: transparent;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.25s ease;
            color: #ccc;
            font-family: inherit;
        }
        .filter-btn:hover, .filter-btn.active {
            background: var(--primary);
            border-color: var(--primary);
            color: #fff;
        }
        /* Scoped Custom Dropdown for Brand Filter */
        #brandDropdown.custom-dropdown {
            position: relative;
            margin-left: auto;
            min-width: 180px;
            font-family: inherit;
            z-index: 100;
        }
        #brandDropdown .dropdown-selected {
            padding: 8px 36px 8px 20px;
            border-radius: 30px;
            border: 1.5px solid #555;
            background: transparent;
            color: #ccc;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ccc' viewBox='0 0 256 256'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80a8,8,0,0,1,11.32-11.32L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'%3E%3C/path%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 12px center;
            background-size: 14px;
            transition: all 0.25s ease;
        }
        #brandDropdown .dropdown-selected:hover, #brandDropdown.active .dropdown-selected {
            border-color: var(--primary);
            color: #fff;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fff' viewBox='0 0 256 256'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80a8,8,0,0,1,11.32-11.32L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'%3E%3C/path%3E%3C/svg%3E");
        }
        #brandDropdown .dropdown-list {
            position: absolute;
            top: calc(100% + 8px);
            right: 0;
            background: #3c3c3c;
            border-radius: 16px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.3);
            width: 100%;
            min-width: 220px;
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px);
            transition: all 0.3s cubic-bezier(0.165,0.84,0.44,1);
            max-height: 400px;
            overflow-y: auto;
            padding: 8px;
            border: 1px solid #555;
            list-style: none; /* Reset list style */
        }
        #brandDropdown.active .dropdown-list {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
        #brandDropdown .dropdown-item {
            padding: 10px 16px;
            color: #ddd;
            font-size: 14px;
            cursor: pointer;
            border-radius: 10px;
            transition: all 0.2s;
            background: transparent; /* Reset background */
            display: block; /* Reset display */
            width: 100%; /* Ensure width */
            text-align: left; /* Ensure alignment */
        }
        #brandDropdown .dropdown-item:hover {
            background: rgba(255,255,255,0.08);
            color: #fff;
        }
        #brandDropdown .dropdown-item.active {
            background: var(--primary);
            color: #fff;
        }
        #brandDropdown .dropdown-list::-webkit-scrollbar { width: 8px; }
        #brandDropdown .dropdown-list::-webkit-scrollbar-track { background: transparent; margin: 10px 0; }
        #brandDropdown .dropdown-list::-webkit-scrollbar-thumb { background: #555; border-radius: 10px; border: 2px solid #3c3c3c; }


        .result-count {
            font-size: 13px;
            color: #999;
            white-space: nowrap;
            padding-left: 8px;
        }

        .product-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
            gap: 24px;
            padding: 0 0 20px;
        }
        .product-catalogue-card {
            background: #fff;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 2px 12px rgba(0,0,0,0.07);
            transition: all 0.3s cubic-bezier(0.165,0.84,0.44,1);
            cursor: pointer;
            border: 1px solid #f5f5f5;
            display: flex;
            flex-direction: column;
        }
        .product-catalogue-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 12px 35px rgba(0,0,0,0.13);
        }
        .family-header {
            font-size: 1.1rem;
            font-weight: 600;
            color: #1f2937;
            margin: 15px 0 12px 0;
            padding: 10px 16px;
            background: #fff;
            border-left: 5px solid var(--secondary-color);
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.08);
            display: flex;
            align-items: center;
        }
        .family-section {
            padding-bottom: 0;
        }
        .card-img-wrap {
            background: #f8f8f8;
            padding: 20px;
            text-align: center;
            position: relative;
            height: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px 12px 0 0;
        }
        .card-img-wrap img {
            max-height: 160px;
            max-width: 100%;
            object-fit: contain;
            transition: transform 0.4s ease;
            border-radius: 8px;
        }
        .product-catalogue-card:hover .card-img-wrap img {
            transform: scale(1.05);
        }
        .card-category-badge {
            position: absolute;
            top: 12px;
            left: 12px;
            background: rgba(230,0,0,0.1);
            color: var(--primary);
            font-size: 11px;
            font-weight: 700;
            padding: 4px 10px;
            border-radius: 20px;
            text-transform: uppercase;
        }
        .card-body {
            padding: 20px;
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        .card-brand {
            font-size: 11px;
            color: #fff;
            background: var(--primary);
            padding: 4px 10px;
            border-radius: 4px;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 8px;
            display: inline-block;
            align-self: flex-start;
            font-weight: 700;
        }
        .card-name {
            font-size: 17px;
            font-weight: 700;
            color: #1a1a1a;
            margin-bottom: 8px;
            line-height: 1.3;
        }
        .card-price {
            font-size: 20px;
            font-weight: 800;
            color: var(--primary);
            margin-top: auto;
            padding-top: 12px;
        }
        .card-price small {
            font-size: 13px;
            color: #aaa;
            font-weight: 400;
        }
        .card-actions {
            display: flex;
            gap: 8px;
            margin-top: 16px;
        }
        .card-btn-primary {
            flex: 1;
            background: var(--primary);
            color: #fff;
            border: none;
            border-radius: 10px;
            padding: 10px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            font-family: inherit;
        }
        .card-btn-primary:hover { background: #c00; }
        .card-btn-outline {
            background: transparent;
            border: 1.5px solid #e0e0e0;
            border-radius: 10px;
            padding: 10px 14px;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.2s;
            color: #666;
            font-family: inherit;
        }
        .card-btn-outline:hover { border-color: var(--primary); color: var(--primary); }

        .sold-out-tag {
            position: absolute;
            top: 12px;
            right: 12px;
            background: #D22630;
            color: #fff;
            font-size: 10px;
            font-weight: 800;
            padding: 4px 10px;
            border-radius: 20px;
            z-index: 2;
        }
        .sold-out-card {
            border: 2px solid #D22630 !important;
            background-color: rgba(210,38,48,0.02) !important;
        }

        .no-results {
            grid-column: 1 / -1;
            text-align: center;
            padding: 80px 20px;
            color: #aaa;
        }
        .no-results i { font-size: 48px; display: block; margin-bottom: 16px; }

        @media (max-width: 768px) {
            .catalogue-hero h1 { font-size: 28px; }
            .product-grid { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 16px; padding: 12px 0 40px; }
            .card-img-wrap { height: 140px; }
        }

        /* Layered Sections Styling */
        .category-section { margin-bottom: 10px; }
        .category-header {
            font-size: 22px;
            font-weight: 700;
            margin: 30px 0 15px;
            color: #1a1a1a;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .category-header::before {
            content: '';
            display: block;
            width: 4px;
            height: 24px;
            background: var(--primary);
            border-radius: 4px;
        }
    </style>
</head>
<body>
    {{template "navbar"}}

    <div class="catalogue-hero">
        <div class="container">
            <h1>รถจักรยานยนต์ (น้ำมัน)</h1>
            <p>เลือกรุ่นที่ใช่ ในราคาที่คุณเป็นเจ้าของได้วันนี้</p>
        </div>
    </div>

    <div class="filter-bar-wrap">
        <div class="container">
            <div class="filter-bar">
                <button class="filter-btn active" onclick="filterProducts('all', this)">ทั้งหมด</button>
                <button class="filter-btn" onclick="filterProducts('family', this)">ครอบครัว</button>
                <button class="filter-btn" onclick="filterProducts('automatic', this)">ออโตเมติก</button>
                <button class="filter-btn" onclick="filterProducts('sport', this)">สปอร์ต</button>
                <button class="filter-btn" onclick="filterProducts('semisport', this)">กึ่งสปอร์ต</button>
                <button class="filter-btn" onclick="filterProducts('minisport', this)">มินิสปอร์ต</button>
                <button class="filter-btn" onclick="filterProducts('others', this)">อื่นๆ</button>
                
                <div class="custom-dropdown" id="brandDropdown">
                    <div class="dropdown-selected" onclick="toggleDropdown()">แบรนด์ทั้งหมด</div>
                    <div class="dropdown-list">
                        <div class="dropdown-item active" onclick="selectBrand('all', 'แบรนด์ทั้งหมด', this)">แบรนด์ทั้งหมด</div>
                        {{range .Brand}}
                        <div class="dropdown-item" onclick="selectBrand('{{.BrandName}}', '{{.BrandName}}', this)">{{.BrandName}}</div>
                        {{end}}
                    </div>
                </div>
                <input type="hidden" id="brandFilter" value="all">

                <span class="result-count" id="resultCount">แสดง {{len .Motorcycles}} รุ่น</span>
            </div>
        </div>
    </div>

    <section style="background: #f9fafb; padding-bottom: 60px;">
        <div class="container">
            <!-- ครอบครัว (family) -->
            {{if .GroupFamily}}
            <div class="category-section" data-category="family">
                <h3 class="category-header">รถครอบครัว</h3>
                {{range .GroupFamily}}
                <div class="family-section" data-family="{{.FamilyName}}">
                    <h4 class="family-header">{{.BrandName}} : {{.FamilyName}} </h4>
                    <div class="product-grid">
                        {{range .Motorcycles}}
                        <div class="product-catalogue-card {{if eq .Count 0}}sold-out-card{{end}}" data-category="family" data-brand="{{.BrandName}}">
                            <div class="card-img-wrap">
                                <span class="card-category-badge">ครอบครัว</span>
                                {{if eq .Count 0}}
                                <span class="sold-out-tag">SOLD OUT</span>
                                {{end}}
                                <img src="images/{{if .PdImg}}{{.PdImg}}{{else}}no-image-available.png{{end}}" 
                                     onerror="this.src='images/no-image-available.png'; this.onerror=null;"
                                     alt="{{.BrandName}} {{.ModelName}}">
                            </div>
                            <div class="card-body">
                                <div class="card-brand">{{.BrandName}}</div>
                                <div class="card-name">{{.ModelName}}</div>
                                <div class="card-price">{{formatNumber .Price}} <small>บาท</small></div>
                                <div class="card-actions">
                                    <button class="card-btn-primary">ดูรายละเอียด</button>
                                    <!-- <button class="card-btn-outline" title="สนใจ"><i class="ph ph-heart"></i></button> -->
                                </div>
                            </div>
                        </div>
                        {{end}}
                    </div>
                </div>
                {{end}}
            </div>
            {{end}}

            <!-- ออโตเมติก (automatic) -->
            {{if .GroupAutomatic}}
            <div class="category-section" data-category="automatic">
                <h3 class="category-header">รถออโตเมติก</h3>
                {{range .GroupAutomatic}}
                <div class="family-section" data-family="{{.FamilyName}}">
                    <h4 class="family-header">{{.BrandName}} : {{.FamilyName}} </h4>
                    <div class="product-grid">
                        {{range .Motorcycles}}
                        <div class="product-catalogue-card {{if eq .Count 0}}sold-out-card{{end}}" data-category="automatic" data-brand="{{.BrandName}}">
                            <div class="card-img-wrap">
                                <span class="card-category-badge">ออโตเมติก</span>
                                {{if eq .Count 0}}
                                <span class="sold-out-tag">SOLD OUT</span>
                                {{end}}
                                <img src="images/{{if .PdImg}}{{.PdImg}}{{else}}no-image-available.png{{end}}" 
                                     onerror="this.src='images/no-image-available.png'; this.onerror=null;"
                                     alt="{{.BrandName}} {{.ModelName}}">
                            </div>
                            <div class="card-body">
                                <div class="card-brand">{{.BrandName}}</div>
                                <div class="card-name">{{.ModelName}}</div>
                                <div class="card-price">{{formatNumber .Price}} <small>บาท</small></div>
                                <div class="card-actions">
                                    <button class="card-btn-primary">ดูรายละเอียด</button>
                                    <!-- <button class="card-btn-outline" title="สนใจ"><i class="ph ph-heart"></i></button> -->
                                </div>
                            </div>
                        </div>
                        {{end}}
                    </div>
                </div>
                {{end}}
            </div>
            {{end}}

            <!-- สปอร์ต (sport) -->
            {{if .GroupSport}}
            <div class="category-section" data-category="sport">
                <h3 class="category-header">รถสปอร์ต</h3>
                {{range .GroupSport}}
                <div class="family-section" data-family="{{.FamilyName}}">
                    <h4 class="family-header">{{.BrandName}} : {{.FamilyName}}</h4>
                    <div class="product-grid">
                        {{range .Motorcycles}}
                        <div class="product-catalogue-card {{if eq .Count 0}}sold-out-card{{end}}" data-category="sport" data-brand="{{.BrandName}}">
                            <div class="card-img-wrap">
                                <span class="card-category-badge">สปอร์ต</span>
                                {{if eq .Count 0}}
                                <span class="sold-out-tag">SOLD OUT</span>
                                {{end}}
                                <img src="images/{{if .PdImg}}{{.PdImg}}{{else}}no-image-available.png{{end}}" 
                                     onerror="this.src='images/no-image-available.png'; this.onerror=null;"
                                     alt="{{.BrandName}} {{.ModelName}}">
                            </div>
                            <div class="card-body">
                                <div class="card-brand">{{.BrandName}}</div>
                                <div class="card-name">{{.ModelName}}</div>
                                <div class="card-price">{{formatNumber .Price}} <small>บาท</small></div>
                                <div class="card-actions">
                                    <button class="card-btn-primary">ดูรายละเอียด</button>
                                    <!-- <button class="card-btn-outline" title="สนใจ"><i class="ph ph-heart"></i></button> -->
                                </div>
                            </div>
                        </div>
                        {{end}}
                    </div>
                </div>
                {{end}}
            </div>
            {{end}}

            <!-- กึ่งสปอร์ต (semisport) -->
            {{if .GroupSemiSport}}
            <div class="category-section" data-category="semisport">
                <h3 class="category-header">รถกึ่งสปอร์ต</h3>
                {{range .GroupSemiSport}}
                <div class="family-section" data-family="{{.FamilyName}}">
                    <h4 class="family-header">{{.BrandName}} : {{.FamilyName}}</h4>
                    <div class="product-grid">
                        {{range .Motorcycles}}
                        <div class="product-catalogue-card {{if eq .Count 0}}sold-out-card{{end}}" data-category="semisport" data-brand="{{.BrandName}}">
                            <div class="card-img-wrap">
                                <span class="card-category-badge">กึ่งสปอร์ต</span>
                                {{if eq .Count 0}}
                                <span class="sold-out-tag">SOLD OUT</span>
                                {{end}}
                                <img src="images/{{if .PdImg}}{{.PdImg}}{{else}}no-image-available.png{{end}}" 
                                     onerror="this.src='images/no-image-available.png'; this.onerror=null;"
                                     alt="{{.BrandName}} {{.ModelName}}">
                            </div>
                            <div class="card-body">
                                <div class="card-brand">{{.BrandName}}</div>
                                <div class="card-name">{{.ModelName}}</div>
                                <div class="card-price">{{formatNumber .Price}} <small>บาท</small></div>
                                <div class="card-actions">
                                    <button class="card-btn-primary">ดูรายละเอียด</button>
                                    <!-- <button class="card-btn-outline" title="สนใจ"><i class="ph ph-heart"></i></button> -->
                                </div>
                            </div>
                        </div>
                        {{end}}
                    </div>
                </div>
                {{end}}
            </div>
            {{end}}

            <!-- มินิสปอร์ต (minisport) -->
            {{if .GroupMiniSport}}
            <div class="category-section" data-category="minisport">
                <h3 class="category-header">รถมินิสปอร์ต</h3>
                {{range .GroupMiniSport}}
                <div class="family-section" data-family="{{.FamilyName}}">
                    <h4 class="family-header">{{.BrandName}} : {{.FamilyName}}</h4>
                    <div class="product-grid">
                        {{range .Motorcycles}}
                        <div class="product-catalogue-card {{if eq .Count 0}}sold-out-card{{end}}" data-category="minisport" data-brand="{{.BrandName}}">
                            <div class="card-img-wrap">
                                <span class="card-category-badge">มินิสปอร์ต</span>
                                {{if eq .Count 0}}
                                <span class="sold-out-tag">SOLD OUT</span>
                                {{end}}
                                <img src="images/{{if .PdImg}}{{.PdImg}}{{else}}no-image-available.png{{end}}" 
                                     onerror="this.src='images/no-image-available.png'; this.onerror=null;"
                                     alt="{{.BrandName}} {{.ModelName}}">
                            </div>
                            <div class="card-body">
                                <div class="card-brand">{{.BrandName}}</div>
                                <div class="card-name">{{.ModelName}}</div>
                                <div class="card-price">{{formatNumber .Price}} <small>บาท</small></div>
                                <div class="card-actions">
                                    <button class="card-btn-primary">ดูรายละเอียด</button>
                                    <!-- <button class="card-btn-outline" title="สนใจ"><i class="ph ph-heart"></i></button> -->
                                </div>
                            </div>
                        </div>
                        {{end}}
                    </div>
                </div>
                {{end}}
            </div>
            {{end}}

            <!-- อื่นๆ (others) -->
            {{if .GroupOthers}}
            <div class="category-section" data-category="others">
                <h3 class="category-header">รถรุ่นอื่นๆ</h3>
                {{range .GroupOthers}}
                <div class="family-section" data-family="{{.FamilyName}}">
                    <h4 class="family-header">{{.BrandName}} : {{.FamilyName}}</h4>
                    <div class="product-grid">
                        {{range .Motorcycles}}
                        <div class="product-catalogue-card {{if eq .Count 0}}sold-out-card{{end}}" data-category="others" data-brand="{{.BrandName}}">
                            <div class="card-img-wrap">
                                <span class="card-category-badge">อื่นๆ</span>
                                {{if eq .Count 0}}
                                <span class="sold-out-tag">SOLD OUT</span>
                                {{end}}
                                <img src="images/{{if .PdImg}}{{.PdImg}}{{else}}no-image-available.png{{end}}" 
                                     onerror="this.src='images/no-image-available.png'; this.onerror=null;"
                                     alt="{{.BrandName}} {{.ModelName}}">
                            </div>
                            <div class="card-body">
                                <div class="card-brand">{{.BrandName}}</div>
                                <div class="card-name">{{.ModelName}}</div>
                                <div class="card-price">{{formatNumber .Price}} <small>บาท</small></div>
                                <div class="card-actions">
                                    <button class="card-btn-primary">ดูรายละเอียด</button>
                                    <!-- <button class="card-btn-outline" title="สนใจ"><i class="ph ph-heart"></i></button> -->
                                </div>
                            </div>
                        </div>
                        {{end}}
                    </div>
                </div>
                {{end}}
            </div>
            {{end}}

            <div id="noResults" class="no-results" style="display:none;">
                <i class="ph ph-magnifying-glass"></i>
                <p>ไม่พบรุ่นรถที่คุณต้องการในหมวดหมู่ชุดนี้</p>
            </div>
        </div>
    </section>

    {{template "footer"}}

    <script src="assets/js/script.js"></script>
    <script>
        let currentCategory = 'all';

        function filterProducts(category, btn) {
            currentCategory = category;
            document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
            if (btn) btn.classList.add('active');
            applyFilters();
        }

        function toggleDropdown() {
            document.getElementById('brandDropdown').classList.toggle('active');
        }

        function selectBrand(value, text, el) {
            document.getElementById('brandFilter').value = value;
            document.querySelector('.dropdown-selected').textContent = text;
            document.querySelectorAll('.dropdown-item').forEach(item => item.classList.remove('active'));
            el.classList.add('active');
            document.getElementById('brandDropdown').classList.remove('active');
            applyFilters();
        }

        // Close dropdown when clicking outside
        document.addEventListener('click', (e) => {
            if (!e.target.closest('#brandDropdown')) {
                const dropdown = document.getElementById('brandDropdown');
                if (dropdown) dropdown.classList.remove('active');
            }
        });

        function applyFilters() {
            const brand = document.getElementById('brandFilter').value;
            const sections = document.querySelectorAll('.category-section');
            const familySections = document.querySelectorAll('.family-section');
            const cards = document.querySelectorAll('.product-catalogue-card');
            let visibleCount = 0;

            // 1. Filter all individual product cards based on category and brand
            cards.forEach(card => {
                const matchCategory = currentCategory === 'all' || card.dataset.category === currentCategory;
                const matchBrand = brand === 'all' || card.dataset.brand === brand;

                if (matchCategory && matchBrand) {
                    card.style.display = 'flex';
                    visibleCount++;
                } else {
                    card.style.display = 'none';
                }
            });

            // 2. Hide/Show Family headers depending if they have visible cards
            familySections.forEach(family => {
                const hasVisibleCards = Array.from(family.querySelectorAll('.product-catalogue-card'))
                    .some(card => card.style.display === 'flex');
                family.style.display = hasVisibleCards ? 'block' : 'none';
            });

            // 3. Hide/Show Category sections depending if they have visible family sections
            sections.forEach(category => {
                const hasVisibleFamilies = Array.from(category.querySelectorAll('.family-section'))
                    .some(family => family.style.display === 'block');
                category.style.display = hasVisibleFamilies ? 'block' : 'none';
            });

            document.getElementById('noResults').style.display = visibleCount === 0 ? 'block' : 'none';
            document.getElementById('resultCount').textContent = `แสดง ${visibleCount} รุ่น`;
        }
    </script>
</body>
</html>