{"id":1533,"date":"2025-07-07T10:17:16","date_gmt":"2025-07-07T07:17:16","guid":{"rendered":"https:\/\/test-new.mispay.co\/%d8%aa%d8%b3%d9%88%d9%82\/"},"modified":"2025-12-08T11:46:30","modified_gmt":"2025-12-08T08:46:30","slug":"%d8%aa%d8%b3%d9%88%d9%82","status":"publish","type":"page","link":"https:\/\/www.mispay.co\/ar\/%d8%aa%d8%b3%d9%88%d9%82\/","title":{"rendered":"\u062a\u0633\u0648\u0642"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1533\" class=\"elementor elementor-1533 elementor-707\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ee5a4bc e-flex e-con-boxed e-con e-parent\" data-id=\"ee5a4bc\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-44b06f7 elementor-widget elementor-widget-heading\" data-id=\"44b06f7\" data-element_type=\"widget\" data-settings=\"{&quot;htmega_fe&quot;:&quot;no&quot;}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">\u0627\u0639\u062b\u0631 \u0639\u0644\u0649 \u0645\u062a\u062c\u0631.<br>\u0627\u062f\u0641\u0639 \u0639\u0644\u0649 4 \u062f\u0641\u0639\u0627\u062a \u0645\u0639 \u0623\u0642\u0633\u0627\u0637<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-194cbf1 elementor-widget__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"194cbf1\" data-element_type=\"widget\" data-settings=\"{&quot;htmega_fe&quot;:&quot;no&quot;}\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>\u0642\u0633\u0651\u0645 \u0645\u0634\u062a\u0631\u064a\u0627\u062a\u0643 \u0639\u0644\u0649 \u0664 \u062f\u0641\u0639\u0627\u062a \u2014 \u0628\u062f\u0648\u0646 \u0631\u0633\u0648\u0645\u060c \u0628\u062f\u0648\u0646 \u0641\u0648\u0627\u0626\u062f\u060c \u0648\u0645\u062a\u0648\u0627\u0641\u0642 \u0661\u0660\u0660\u066a \u0645\u0639 \u0627\u0644\u0634\u0631\u064a\u0639\u0629.<br><br>\u0645\u0646 \u0627\u0644\u0623\u0632\u064a\u0627\u0621 \u0625\u0644\u0649 \u0642\u0637\u0639 \u063a\u064a\u0627\u0631 \u0627\u0644\u0633\u064a\u0627\u0631\u0627\u062a\u060c \u0645\u0639 \u0625\u0645 \u0622\u064a \u0625\u0633 \u0628\u0627\u064a \u062a\u0642\u062f\u0631 \u062a\u0634\u062a\u0631\u064a \u0627\u0644\u064a\u0648\u0645 \u0648\u062a\u062f\u0641\u0639 \u0628\u0639\u062f\u064a\u0646 \u2014 \u0628\u0637\u0631\u064a\u0642\u0629 \u0633\u0647\u0644\u0629 \u0648\u0628\u062f\u0648\u0646 \u0642\u0644\u0642.<br>\u0628\u062f\u0648\u0646 \u0645\u0641\u0627\u062c\u0622\u062a\u2026 \u0623\u0642\u0633\u0627\u0637 \u062a\u0633\u0647\u0644 \u062d\u064a\u0627\u062a\u0643.    <\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7323db2 elementor-widget elementor-widget-html\" data-id=\"7323db2\" data-element_type=\"widget\" data-settings=\"{&quot;htmega_fe&quot;:&quot;no&quot;}\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div>\r\n\r\n\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>\u0627\u0644\u0628\u062d\u062b \u0639\u0646 \u0627\u0644\u0645\u062a\u0627\u062c\u0631<\/title>\r\n    <style>\r\n        * {\r\n            margin: 0;\r\n            padding: 0;\r\n            box-sizing: border-box;\r\n        }\r\n        \r\n        body {\r\n            background: #f8f9fa;\r\n            min-height: 100vh;\r\n        }\r\n        \r\n        .search-container {\r\n            width: 100vw;\r\n            margin: 0 auto;\r\n            padding: 2% 15% 5% 20% ;\r\n            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\r\n        }\r\n        \r\n        .search-header {\r\n            margin-bottom: 30px;\r\n        }\r\n        \r\n        .search-title {\r\n            font-size: 32px;\r\n            font-weight: bold;\r\n            color: #333;\r\n            margin: 0 0 20px 0;\r\n        }\r\n        \r\n        .search-box-wrapper {\r\n            position: relative;\r\n            max-width: 800px;\r\n        }\r\n        \r\n        .search-box {\r\n            width: 100%;\r\n            padding: 16px 20px 16px 50px;\r\n            border: 2px solid #e0e0e0;\r\n            border-radius: 12px;\r\n            font-size: 16px;\r\n            transition: all 0.3s ease;\r\n            background: white;\r\n        }\r\n        \r\n        .search-box:focus {\r\n            outline: none;\r\n            border-color: #6322D0;\r\n            box-shadow: 0 0 0 3px rgba(99, 34, 208, 0.1);\r\n        }\r\n        \r\n        .search-icon {\r\n            position: absolute;\r\n            left: 18px;\r\n            top: 50%;\r\n            transform: translateY(-50%);\r\n            color: #666;\r\n            width: 20px;\r\n            height: 20px;\r\n        }\r\n        \r\n        .clear-search {\r\n            position: absolute;\r\n            right: 50px;\r\n            top: 50%;\r\n            transform: translateY(-50%);\r\n            background: #e0e0e0;\r\n            border: none;\r\n            border-radius: 50%;\r\n            width: 24px;\r\n            height: 24px;\r\n            cursor: pointer;\r\n            display: none;\r\n            align-items: center;\r\n            justify-content: center;\r\n            color: #666;\r\n            font-size: 16px;\r\n            transition: all 0.2s ease;\r\n        }\r\n        \r\n        .clear-search:hover {\r\n            background: #d0d0d0;\r\n        }\r\n        \r\n        .clear-search.visible {\r\n            display: flex;\r\n        }\r\n        \r\n        .search-filters {\r\n            display: flex;\r\n            gap: 10px;\r\n            margin-top: 15px;\r\n            flex-wrap: wrap;\r\n            display: none;\r\n        }\r\n        \r\n        .filter-chip {\r\n            padding: 8px 16px;\r\n            border: 1px solid #e0e0e0;\r\n            border-radius: 20px;\r\n            background: white;\r\n            cursor: pointer;\r\n            font-size: 14px;\r\n            transition: all 0.3s ease;\r\n        }\r\n        \r\n        .filter-chip:hover {\r\n            border-color: #6322D0;\r\n            background: #f5f0ff;\r\n        }\r\n        \r\n        .filter-chip.active {\r\n            background: #6322D0;\r\n            color: white;\r\n            border-color: #6322D0;\r\n        }\r\n        \r\n        .results-info {\r\n            margin: 20px 0;\r\n            color: #666;\r\n            font-size: 14px;\r\n            display: none;\r\n        }\r\n        \r\n        .stores-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\r\n            gap: 20px;\r\n            margin-top: 20px;\r\n            display: none;\r\n        }\r\n        \r\n        .store-card {\r\n            background: white;\r\n            border-radius: 16px;\r\n            padding: 20px;\r\n            box-shadow: 0 4px 20px rgba(0,0,0,0.08);\r\n            transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n            cursor: pointer;\r\n            border: 1px solid #f0f0f0;\r\n            text-decoration: none;\r\n            color: inherit;\r\n            display: flex;\r\n            flex-direction: column;\r\n            align-items: center;\r\n        }\r\n        \r\n        .store-card:hover {\r\n            transform: translateY(-5px);\r\n            box-shadow: 0 8px 30px rgba(0,0,0,0.15);\r\n        }\r\n        \r\n        .store-logo {\r\n            width: 80px;\r\n            height: 80px;\r\n            border-radius: 12px;\r\n            object-fit: contain;\r\n            background: #f8f9fa;\r\n            padding: 10px;\r\n            margin-bottom: 15px;\r\n        }\r\n        \r\n        .store-name {\r\n            font-size: 18px;\r\n            font-weight: 600;\r\n            color: #333;\r\n            text-align: center;\r\n            margin-bottom: 8px;\r\n        }\r\n        \r\n        .store-category {\r\n            font-size: 14px;\r\n            color: #666;\r\n            text-align: center;\r\n            margin-bottom: 12px;\r\n        }\r\n        \r\n        .store-deals-count {\r\n            display: inline-flex;\r\n            align-items: center;\r\n            gap: 6px;\r\n            padding: 6px 12px;\r\n            background: #f0f9ff;\r\n            color: #0369a1;\r\n            border-radius: 16px;\r\n            font-size: 13px;\r\n            font-weight: 500;\r\n        }\r\n        \r\n        .search-dropdown {\r\n            position: absolute;\r\n            top: 100%;\r\n            left: 0;\r\n            right: 0;\r\n            background: white;\r\n            border: 1px solid #e0e0e0;\r\n            border-radius: 12px;\r\n            margin-top: 8px;\r\n            max-height: 400px;\r\n            overflow-y: auto;\r\n            box-shadow: 0 8px 30px rgba(0,0,0,0.12);\r\n            z-index: 1000;\r\n            display: none;\r\n        }\r\n        \r\n        .search-dropdown.visible {\r\n            display: block;\r\n        }\r\n        \r\n        .dropdown-item {\r\n            padding: 12px 20px;\r\n            cursor: pointer;\r\n            transition: background 0.2s ease;\r\n            border-bottom: 1px solid #f5f5f5;\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 12px;\r\n        }\r\n        \r\n        .dropdown-item:last-child {\r\n            border-bottom: none;\r\n        }\r\n        \r\n        .dropdown-item:hover {\r\n            background: #f8f9fa;\r\n        }\r\n        \r\n        .dropdown-item-logo {\r\n            width: 40px;\r\n            height: 40px;\r\n            border-radius: 8px;\r\n            object-fit: contain;\r\n            background: #f8f9fa;\r\n            padding: 6px;\r\n            flex-shrink: 0;\r\n        }\r\n        \r\n        .dropdown-item-info {\r\n            flex: 1;\r\n        }\r\n        \r\n        .dropdown-item-name {\r\n            font-size: 15px;\r\n            font-weight: 600;\r\n            color: #333;\r\n            margin-bottom: 2px;\r\n        }\r\n        \r\n        .dropdown-item-category {\r\n            font-size: 13px;\r\n            color: #666;\r\n        }\r\n        \r\n        .dropdown-empty {\r\n            padding: 40px 20px;\r\n            text-align: center;\r\n            color: #999;\r\n        }\r\n        \r\n        .dropdown-empty-icon {\r\n            font-size: 32px;\r\n            margin-bottom: 8px;\r\n        }\r\n        \r\n        .error {\r\n            color: #d32f2f;\r\n            background: #ffebee;\r\n            border-radius: 8px;\r\n        }\r\n        \r\n        .no-results {\r\n            background: white;\r\n            border-radius: 16px;\r\n            padding: 60px 20px;\r\n        }\r\n        \r\n        .no-results-icon {\r\n            font-size: 48px;\r\n            margin-bottom: 16px;\r\n        }\r\n        \r\n        .no-results-text {\r\n            font-size: 18px;\r\n            font-weight: 600;\r\n            margin-bottom: 8px;\r\n        }\r\n        \r\n        .no-results-hint {\r\n            font-size: 14px;\r\n            color: #999;\r\n        }\r\n        \r\n        @keyframes fadeIn {\r\n            from { opacity: 0; transform: translateY(10px); }\r\n            to { opacity: 1; transform: translateY(0); }\r\n        }\r\n        \r\n        .store-card {\r\n            animation: fadeIn 0.3s ease-out;\r\n        }\r\n        \r\n        @media (max-width: 768px) {\r\n            .stores-grid {\r\n                grid-template-columns: repeat(2, 1fr);\r\n                gap: 15px;\r\n            }\r\n            \r\n            .search-title {\r\n                font-size: 24px;\r\n            }\r\n            \r\n            .search-filters {\r\n                gap: 8px;\r\n            }\r\n            \r\n            .filter-chip {\r\n                font-size: 13px;\r\n                padding: 6px 12px;\r\n            }\r\n        }\r\n    <\/style>\r\n\r\n\r\n    <div class=\"search-container\">\r\n        <div class=\"search-header\">\r\n            <!--<h1 class=\"search-title\">Search Stores<\/h1>-->\r\n            \r\n            <div class=\"search-box-wrapper\">\r\n                <input type=\"text\" class=\"search-box\" id=\"searchInput\" placeholder=\"\u0627\u0628\u062d\u062b \u0639\u0646 \u0627\u0644\u0645\u062a\u0627\u062c\u0631...\" autocomplete=\"off\">\r\n                <button class=\"clear-search\" id=\"clearBtn\" title=\"\u0645\u0633\u062d \u0627\u0644\u0628\u062d\u062b\">\u00d7<\/button>\r\n                <svg class=\"search-icon\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n                    <circle cx=\"11\" cy=\"11\" r=\"8\"\/>\r\n                    <path d=\"m21 21-4.35-4.35\"><\/path>\r\n                <\/path><\/svg>\r\n                \r\n                <div class=\"search-dropdown\" id=\"searchDropdown\"><\/div>\r\n            <\/div>\r\n            \r\n            <div class=\"search-filters\" id=\"categoryFilters\"><\/div>\r\n        <\/div>\r\n        \r\n        <div id=\"storesContainer\"><\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n        \/\/ Configuration\r\n        const STORES_API_BASE_URL = 'https:\/\/mobile.mispay.co\/api';\r\n        \r\n        \/\/ State\r\n        let allStoresData = [];\r\n        let filteredStoresData = [];\r\n        let selectedCategory = '';\r\n        let searchQuery = '';\r\n        \r\n        \/\/ Initialize\r\n        document.addEventListener('DOMContentLoaded', function() {\r\n            const searchInput = document.getElementById('searchInput');\r\n            const clearBtn = document.getElementById('clearBtn');\r\n            \r\n            \/\/ Search input handlers\r\n            searchInput.addEventListener('input', handleSearch);\r\n            searchInput.addEventListener('focus', handleSearchFocus);\r\n            clearBtn.addEventListener('click', clearSearch);\r\n            \r\n            \/\/ Close dropdown when clicking outside\r\n            document.addEventListener('click', function(event) {\r\n                const searchWrapper = document.querySelector('.search-box-wrapper');\r\n                const dropdown = document.getElementById('searchDropdown');\r\n                \r\n                if (!searchWrapper.contains(event.target)) {\r\n                    dropdown.classList.remove('visible');\r\n                }\r\n            });\r\n            \r\n            \/\/ Load stores\r\n            loadStores();\r\n        });\r\n        \r\n        \/\/ Load stores from API\r\n        async function loadStores() {\r\n            try {\r\n                console.log('Fetching stores from API...');\r\n                \r\n                const response = await fetch(`${STORES_API_BASE_URL}\/content-v2\/merchants?lang=en`, {\r\n                    method: 'GET',\r\n                    headers: {\r\n                        'Accept': 'application\/json',\r\n                        'Content-Type': 'application\/json',\r\n                        'Accept-Language': 'en-US,en;q=0.9'\r\n                    },\r\n                    mode: 'cors',\r\n                    credentials: 'omit'\r\n                });\r\n                \r\n                console.log('Stores response:', response.status);\r\n                \r\n                if (!response.ok) {\r\n                    throw new Error(`HTTP error! status: ${response.status}`);\r\n                }\r\n                \r\n                const data = await response.json();\r\n                console.log('Stores data:', data);\r\n                \r\n                if (data.status === 'success' && data.result && Array.isArray(data.result)) {\r\n                    allStoresData = data.result;\r\n                    filteredStoresData = [...allStoresData];\r\n                    \r\n                    console.log(`Loaded ${allStoresData.length} stores`);\r\n                } else {\r\n                    throw new Error('Invalid API response format');\r\n                }\r\n            } catch (error) {\r\n                console.error('Error loading stores:', error);\r\n            }\r\n        }\r\n        \r\n        \/\/ Extract unique categories from stores\r\n        function extractCategories() {\r\n            \/\/ Not needed for search-only mode\r\n        }\r\n        \r\n        \/\/ Render category filters\r\n        function renderCategoryFilters(categories) {\r\n            \/\/ Not needed for search-only mode\r\n        }\r\n        \r\n        \/\/ Handle search\r\n        function handleSearch(event) {\r\n            searchQuery = event.target.value.toLowerCase().trim();\r\n            \r\n            const clearBtn = document.getElementById('clearBtn');\r\n            const dropdown = document.getElementById('searchDropdown');\r\n            \r\n            if (searchQuery) {\r\n                clearBtn.classList.add('visible');\r\n                showSearchResults();\r\n            } else {\r\n                clearBtn.classList.remove('visible');\r\n                dropdown.classList.remove('visible');\r\n            }\r\n        }\r\n        \r\n        \/\/ Handle search focus\r\n        function handleSearchFocus() {\r\n            if (searchQuery) {\r\n                showSearchResults();\r\n            }\r\n        }\r\n        \r\n        \/\/ Show search results dropdown\r\n        function showSearchResults() {\r\n            const dropdown = document.getElementById('searchDropdown');\r\n            \r\n            filteredStoresData = allStoresData.filter(store => {\r\n                return store.name?.toLowerCase().includes(searchQuery) ||\r\n                       store.category?.toLowerCase().includes(searchQuery) ||\r\n                       store.description?.toLowerCase().includes(searchQuery);\r\n            });\r\n            \r\n            if (filteredStoresData.length === 0) {\r\n                dropdown.innerHTML = `\r\n                    <div class=\"dropdown-empty\">\r\n                        <div class=\"dropdown-empty-icon\">\ud83d\udd0d<\/div>\r\n                        <div>No stores found<\/div>\r\n                    <\/div>\r\n                `;\r\n            } else {\r\n                const resultsHTML = filteredStoresData.slice(0, 8).map(store => `\r\n                    <div class=\"dropdown-item\" onclick=\"selectStore('${store.link?.replace(\/'\/g, \"'\")}', '${store.name?.replace(\/'\/g, \"'\")}')\">\r\n                        <img decoding=\"async\" src=\"${store.logo || ''}\" alt=\"${store.name || 'Store'}\" class=\"dropdown-item-logo\" onerror=\"this.src='data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjRjBGMEYwIi8+CjxwYXRoIGQ9Ik0yMCAxMEMxNC40NzcyIDEwIDEwIDE0LjQ3NzIgMTAgMjBDMTAgMjUuNTIyOCAxNC40NzcyIDMwIDIwIDMwQzI1LjUyMjggMzAgMzAgMjUuNTIyOCAzMCAyMEMzMCAxNC40NzcyIDI1LjUyMjggMTAgMjAgMTBaIiBmaWxsPSIjQ0NDQ0NDIi8+Cjwvc3ZnPg=='\">\r\n                        <div class=\"dropdown-item-info\">\r\n                            <div class=\"dropdown-item-name\">${store.name || 'Unknown Store'}<\/div>\r\n                            ${store.category ? `<div class=\"dropdown-item-category\">${store.category}<\/div>` : ''}\r\n                        <\/div>\r\n                    <\/div>\r\n                `).join('');\r\n                \r\n                dropdown.innerHTML = resultsHTML;\r\n            }\r\n            \r\n            dropdown.classList.add('visible');\r\n        }\r\n        \r\n        \/\/ Clear search\r\n        function clearSearch() {\r\n            const searchInput = document.getElementById('searchInput');\r\n            const dropdown = document.getElementById('searchDropdown');\r\n            \r\n            searchInput.value = '';\r\n            searchQuery = '';\r\n            \r\n            document.getElementById('clearBtn').classList.remove('visible');\r\n            dropdown.classList.remove('visible');\r\n            \r\n            searchInput.focus();\r\n        }\r\n        \r\n        \/\/ Select a store from dropdown\r\n        function selectStore(storeLink, storeName) {\r\n            console.log('Store selected:', storeName, storeLink);\r\n            \r\n            const dropdown = document.getElementById('searchDropdown');\r\n            dropdown.classList.remove('visible');\r\n            \r\n            \/\/ Navigate to store link\r\n            if (storeLink) {\r\n                window.location.href = storeLink;\r\n            } else {\r\n                console.error('No link found for store:', storeName);\r\n            }\r\n        }\r\n        \r\n        \/\/ Expose functions globally\r\n        window.selectStore = selectStore;\r\n    <\/script>\r\n\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2c09d1c e-flex e-con-boxed e-con e-parent\" data-id=\"2c09d1c\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3995f28 elementor-widget elementor-widget-html\" data-id=\"3995f28\" data-element_type=\"widget\" data-settings=\"{&quot;htmega_fe&quot;:&quot;no&quot;}\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div>\r\n\r\n\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>\u0627\u0644\u0645\u062a\u0627\u062c\u0631 \u0627\u0644\u0645\u0645\u064a\u0632\u0629<\/title>\r\n\r\n\r\n    <div class=\"featured-stores-container\">\r\n        <div class=\"featured-stores-header\">\r\n            <h2 class=\"featured-stores-title\">\u0627\u0644\u0645\u062a\u0627\u062c\u0631 \u0627\u0644\u0645\u0645\u064a\u0632\u0629<\/h2>\r\n            <div class=\"featured-stores-navigation\">\r\n                <button class=\"nav-btn next-btn\">\u2192<\/button>\r\n                <button class=\"nav-btn prev-btn\" disabled>\u2190<\/button>\r\n \r\n            <\/div>\r\n        <\/div>\r\n        \r\n        <div class=\"featured-stores-wrapper\">\r\n            <div class=\"featured-stores-slider\" id=\"storesSlider\">\r\n                <div class=\"loading-spinner\">\r\n                    <div class=\"spinner\"><\/div>\r\n                    <p>\u062c\u0627\u0631\u064d \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0645\u062a\u0627\u062c\u0631...<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <style>\r\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');\r\n        .featured-stores-container {\r\n            max-width: 1200px;\r\n            margin: 0 auto;\r\n            padding: 20px;\r\n            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\r\n        }\r\n\r\n        .featured-stores-header {\r\n            display: flex;\r\n            justify-content: space-between;\r\n            align-items: center;\r\n            margin-bottom: 24px;\r\n        }\r\n\r\n        .featured-stores-title {\r\n            font-size: 36px;\r\n            font-weight: 700;\r\n            color: #181D27;\r\n            margin: 0;\r\n            line-height: 44px;\r\n            font-family: \"Inter\", sans-serif;\r\n        }\r\n\r\n        .featured-stores-navigation {\r\n            display: flex;\r\n            gap: 8px;\r\n        }\r\n\r\n        .nav-btn {\r\n            width: 40px;\r\n            height: 40px;\r\n            border: 1px solid #e0e0e0;\r\n            border-radius: 50%;\r\n            background: white;\r\n            cursor: pointer;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            transition: all 0.3s ease;\r\n            color: #6322D0;\r\n        }\r\n         .nav-btn:hover:not(:disabled) {\r\n            background: #6322D0;\r\n            border-color: #ccc;\r\n            transform: scale(1.05);\r\n            color: #ffff;\r\n        }\r\n\r\n        .nav-btn:enabled{\r\n            background: #fff;\r\n            border-color: #6322D0;\r\n            transform: scale(1.05);\r\n            color: #6322D0;\r\n            border: 1px solid ;\r\n        }\r\n\r\n        .nav-btn:disabled {\r\n            opacity: 0.8;\r\n            cursor: not-allowed;\r\n            color: #00000;\r\n        }\r\n\r\n        .featured-stores-wrapper {\r\n            overflow: hidden;\r\n            position: relative;\r\n        }\r\n\r\n        .featured-stores-slider {\r\n            display: flex;\r\n            transition: transform 0.4s ease;\r\n            gap: 16px;\r\n        }\r\n\r\n        .store-card {\r\n            flex: 0 0 280px;\r\n            background: white;\r\n            border-radius: 12px;\r\n            overflow: hidden;\r\n            box-shadow: 0 2px 12px rgba(0,0,0,0.08);\r\n            transition: all 0.3s ease;\r\n            cursor: pointer;\r\n            border: 1px solid #f0f0f0;\r\n        }\r\n\r\n        .store-card:hover {\r\n            transform: translateY(-6px);\r\n            box-shadow: 0 8px 25px rgba(0,0,0,0.15);\r\n        }\r\n\r\n        .store-image-bg {\r\n            width: 100%;\r\n            height: 100%;\r\n            object-fit: cover;\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            z-index: 1;\r\n        }\r\n\r\n        .store-image-text {\r\n            position: relative;\r\n            z-index: 2;\r\n        }\r\n\r\n        .store-info {\r\n            padding: 20px;\r\n        }\r\n\r\n        .store-header {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 12px;\r\n            margin-bottom: 12px;\r\n        }\r\n\r\n        .store-logo {\r\n            width: 45px;\r\n            height: 45px;\r\n            border-radius: 50%;\r\n            object-fit: cover;\r\n            border: 2px solid #f0f0f0;\r\n            flex-shrink: 0;\r\n        }\r\n\r\n        .store-logo-placeholder {\r\n            width: 45px;\r\n            height: 45px;\r\n            border-radius: 50%;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            color: white;\r\n            font-weight: 600;\r\n            font-size: 14px;\r\n            flex-shrink: 0;\r\n            background: #6322D0;\r\n        }\r\n\r\n        .store-details {\r\n            flex: 1;\r\n            min-width: 0;\r\n        }\r\n\r\n        .store-details h3 {\r\n            margin: 0 0 4px 0;\r\n            font-size: 16px;\r\n            font-weight: 600;\r\n            color: #1a1a1a;\r\n            white-space: nowrap;\r\n            overflow: hidden;\r\n            text-overflow: ellipsis;\r\n        }\r\n\r\n        .store-type {\r\n            font-size: 13px;\r\n            color: #666;\r\n            margin: 0;\r\n            font-weight: 500;\r\n        }\r\n\r\n        .store-badges {\r\n            display: flex;\r\n            gap: 8px;\r\n            margin-top: 12px;\r\n            flex-wrap: wrap;\r\n        }\r\n\r\n        .badge {\r\n            padding: 6px 10px;\r\n            border-radius: 16px;\r\n            font-size: 11px;\r\n            font-weight: 600;\r\n            text-transform: uppercase;\r\n            letter-spacing: 0.5px;\r\n        }\r\n\r\n        .badge-promotion {\r\n            background: #e3f2fd;\r\n            color: #1976d2;\r\n        }\r\n\r\n        .badge-discount {\r\n            background: #e8f5e8;\r\n            color: #2e7d32;\r\n        }\r\n\r\n        .loading-spinner {\r\n            display: flex;\r\n            flex-direction: column;\r\n            align-items: center;\r\n            justify-content: center;\r\n            padding: 80px 20px;\r\n            color: #6322D0;\r\n            width: 100%;\r\n        }\r\n\r\n        .spinner {\r\n            width: 40px;\r\n            height: 40px;\r\n            border: 3px solid #6322D0;\r\n            border-top: 3px solid #667eea;\r\n            border-radius: 50%;\r\n            animation: spin 1s linear infinite;\r\n            margin-bottom: 16px;\r\n        }\r\n\r\n        @keyframes spin {\r\n            0% { transform: rotate(0deg); }\r\n            100% { transform: rotate(360deg); }\r\n        }\r\n\r\n        .error-message {\r\n            text-align: center;\r\n            padding: 40px 20px;\r\n            color: #e74c3c;\r\n            background: #fdf2f2;\r\n            border-radius: 8px;\r\n            margin: 20px 0;\r\n            border: 1px solid #fecaca;\r\n        }\r\n\r\n        .error-message h3 {\r\n            margin: 0 0 8px 0;\r\n            font-size: 18px;\r\n        }\r\n\r\n        .error-message p {\r\n            margin: 0;\r\n            font-size: 14px;\r\n        }\r\n\r\n        @media (max-width: 768px) {\r\n            .featured-stores-container {\r\n                padding: 16px;\r\n            }\r\n\r\n            .featured-stores-header {\r\n                flex-direction: column;\r\n                align-items: flex-start;\r\n                gap: 16px;\r\n            }\r\n\r\n            .featured-stores-title {\r\n                font-size: 24px;\r\n            }\r\n\r\n            .store-card {\r\n                flex: 0 0 260px;\r\n            }\r\n\r\n            .featured-stores-slider {\r\n                gap: 12px;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 480px) {\r\n            .store-card {\r\n                flex: 0 0 240px;\r\n            }\r\n        }\r\n    <\/style>\r\n\r\n    <script>\r\n        class FeaturedStores {\r\n            constructor() {\r\n                this.currentSlide = 0;\r\n                this.totalSlides = 0;\r\n                this.slidesPerView = 4;\r\n                this.stores = [];\r\n                this.slider = document.getElementById('storesSlider');\r\n                this.prevBtn = document.querySelector('.prev-btn');\r\n                this.nextBtn = document.querySelector('.next-btn');\r\n                \r\n                this.init();\r\n            }\r\n\r\n            init() {\r\n                this.calculateSlidesPerView();\r\n                this.bindEvents();\r\n                this.fetchStores();\r\n            }\r\n\r\n            calculateSlidesPerView() {\r\n                const width = window.innerWidth;\r\n                if (width < 480) this.slidesPerView = 1;\r\n                else if (width < 768) this.slidesPerView = 1;\r\n                else if (width < 1024) this.slidesPerView = 2;\r\n                else if (width < 1200) this.slidesPerView = 3;\r\n                else this.slidesPerView = 4;\r\n            }\r\n\r\n            bindEvents() {\r\n                this.prevBtn.addEventListener('click', () => this.prevSlide());\r\n                this.nextBtn.addEventListener('click', () => this.nextSlide());\r\n                \r\n                window.addEventListener('resize', () => {\r\n                    this.calculateSlidesPerView();\r\n                    this.updateSlider();\r\n                });\r\n            }\r\n\r\n            async fetchStores() {\r\n                try {\r\n                    console.log('Fetching stores from API...');\r\n                    \r\n                    const response = await fetch('https:\/\/mobile.mispay.co\/api\/content-v2\/sections', {\r\n                        method: 'GET',\r\n                        headers: {\r\n                            'Content-Type': 'application\/json',\r\n                            'Accept': 'application\/json'\r\n                        },\r\n                        mode: 'cors'\r\n                    });\r\n                    \r\n                    console.log('Response status:', response.status);\r\n                    console.log('Response headers:', response.headers);\r\n                    \r\n                    if (!response.ok) {\r\n                        throw new Error(`HTTP error! status: ${response.status}`);\r\n                    }\r\n                    \r\n                    const data = await response.json();\r\n                    console.log('API Response:', data);\r\n                    \r\n                    if (data.status === 'success' && data.result) {\r\n                        const featuredSection = data.result.find(section => \r\n                            section.sectionType === 'featured_stores'\r\n                        );\r\n                        \r\n                        if (featuredSection && featuredSection.stores && featuredSection.stores.length > 0) {\r\n                            console.log('Found stores:', featuredSection.stores);\r\n                            this.stores = featuredSection.stores;\r\n                            this.renderStores();\r\n                        } else {\r\n                            console.log('No featured stores section found, using all available stores');\r\n                            this.fetchMerchants();\r\n                        }\r\n                    } else {\r\n                        console.error('Invalid API response format:', data);\r\n                        this.showError('Invalid API response format');\r\n                    }\r\n                } catch (error) {\r\n                    console.error('Error fetching stores:', error);\r\n                    \r\n                    if (error.name === 'TypeError' && error.message.includes('fetch')) {\r\n                        this.showError('Network error: Unable to connect to API. Please check your internet connection or try again later.');\r\n                    } else if (error.message.includes('CORS')) {\r\n                        this.showError('CORS error: API doesn't allow requests from this domain.');\r\n                    } else {\r\n                        this.showError(`Error: ${error.message}`);\r\n                    }\r\n                }\r\n            }\r\n\r\n            async fetchMerchants() {\r\n                try {\r\n                    console.log('Fetching merchants as fallback...');\r\n                    \r\n                    const response = await fetch('https:\/\/mobile.mispay.co\/api\/content-v2\/merchants', {\r\n                        method: 'GET',\r\n                        headers: {\r\n                            'Content-Type': 'application\/json',\r\n                            'Accept': 'application\/json'\r\n                        },\r\n                        mode: 'cors'\r\n                    });\r\n                    \r\n                    if (!response.ok) {\r\n                        throw new Error(`HTTP error! status: ${response.status}`);\r\n                    }\r\n                    \r\n                    const data = await response.json();\r\n                    console.log('Merchants Response:', data);\r\n                    \r\n                    if (data.status === 'success' && data.result && data.result.length > 0) {\r\n                        this.stores = data.result.slice(0, 10);\r\n                        this.renderStores();\r\n                    } else {\r\n                        this.showError('No stores available');\r\n                    }\r\n                } catch (error) {\r\n                    console.error('Error fetching merchants:', error);\r\n                    this.showError('Unable to load stores. Please try again later.');\r\n                }\r\n            }\r\n\r\n            renderStores() {\r\n                if (this.stores.length === 0) {\r\n                    this.showError('No stores available');\r\n                    return;\r\n                }\r\n\r\n                this.slider.innerHTML = '';\r\n                \r\n                this.stores.forEach((store, index) => {\r\n                    const storeCard = this.createStoreCard(store, index);\r\n                    this.slider.appendChild(storeCard);\r\n                });\r\n\r\n                this.totalSlides = Math.max(0, this.stores.length - this.slidesPerView);\r\n                this.updateNavigation();\r\n            }\r\n\r\n            createStoreCard(store, index) {\r\n                const card = document.createElement('div');\r\n                card.className = 'store-card';\r\n                card.setAttribute('data-store-id', store.id);\r\n                card.setAttribute('data-link', store.link);\r\n\r\n                const storeType = [];\r\n                if (store.online) storeType.push('Online');\r\n                if (store.offline) storeType.push('In-store');\r\n\r\n                const badges = [];\r\n                if (store.promotionMessage) {\r\n                    badges.push(`<span class=\"badge badge-promotion\">${store.promotionMessage}<\/span>`);\r\n                }\r\n                if (store.discountMessage) {\r\n                    badges.push(`<span class=\"badge badge-discount\">${store.discountMessage}<\/span>`);\r\n                }\r\n                \r\n                card.innerHTML = `\r\n                 <div class=\"store-info\">\r\n                        <div class=\"store-header\">\r\n                        ${store.logo ? \r\n                                `<img decoding=\"async\" class=\"store-logo\" src=\"${store.logo}\" alt=\"${store.name} logo\" onerror=\"this.style.display='none'; this.nextElementSibling.style.display='flex';\">\r\n                            <div class=\"store-logo-placeholder\" style=\"display: none;\">${store.name.charAt(0).toUpperCase()}<\/div>` :\r\n                                `<div class=\"store-logo-placeholder\">${store.name.charAt(0).toUpperCase()}<\/div>`\r\n                            }\r\n                            <div class=\"store-details\">\r\n                                <h3>${store.name}<\/h3>\r\n                                <p class=\"store-type\">${storeType.join(' & ') || 'Store'}<\/p>\r\n                            <\/div>\r\n                        <\/div>\r\n                        ${badges.length > 0 ? `<div class=\"store-badges\">${badges.join('')}<\/div>` : ''}\r\n                    <\/div>\r\n                `;\r\n\r\n                card.addEventListener('click', () => {\r\n                    if (store.link) {\r\n                        window.open(store.link, '_blank');\r\n                    }\r\n                });\r\n\r\n                return card;\r\n            }\r\n\r\n            showError(message) {\r\n                this.slider.innerHTML = `\r\n                    <div class=\"error-message\">\r\n                        <h3>Unable to Load Stores<\/h3>\r\n                        <p>${message}<\/p>\r\n                        <button onclick=\"location.reload()\" style=\" background: #667eea; color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; margin-top: 10px; font-size: 14px; \">Try Again<\/button>\r\n                    <\/div>\r\n                `;\r\n            }\r\n\r\n            updateSlider() {\r\n                const slideWidth = 280 + 16;\r\n                const offset = -this.currentSlide * slideWidth;\r\n                this.slider.style.transform = `translateX(${offset}px)`;\r\n            }\r\n\r\n            updateNavigation() {\r\n                this.prevBtn.disabled = this.currentSlide === 0;\r\n                this.nextBtn.disabled = this.currentSlide >= this.totalSlides;\r\n            }\r\n\r\n            prevSlide() {\r\n                if (this.currentSlide > 0) {\r\n                    this.currentSlide--;\r\n                    this.updateSlider();\r\n                    this.updateNavigation();\r\n                }\r\n            }\r\n\r\n            nextSlide() {\r\n                if (this.currentSlide < this.totalSlides) {\r\n                    this.currentSlide++;\r\n                    this.updateSlider();\r\n                    this.updateNavigation();\r\n                }\r\n            }\r\n        }\r\n\r\n        document.addEventListener('DOMContentLoaded', () => {\r\n            new FeaturedStores();\r\n        });\r\n    <\/script>\r\n\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-94d1293 e-flex e-con-boxed e-con e-parent\" data-id=\"94d1293\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-741f02e elementor-widget elementor-widget-html\" data-id=\"741f02e\" data-element_type=\"widget\" data-settings=\"{&quot;htmega_fe&quot;:&quot;no&quot;}\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div>\r\n\r\n\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>\u0627\u0644\u0641\u0631\u0648\u0639 \u0627\u0644\u0645\u0645\u064a\u0632\u0629<\/title>\r\n    <style>\r\n        * {\r\n            margin: 0;\r\n            padding: 0;\r\n            box-sizing: border-box;\r\n        }\r\n\r\n        .super-branches-container {\r\n            max-width: 1200px;\r\n            margin: 0 auto;\r\n            padding: 20px;\r\n            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\r\n        }\r\n\r\n        .super-branches-header {\r\n            display: flex;\r\n            justify-content: space-between;\r\n            align-items: center;\r\n            margin-bottom: 30px;\r\n        }\r\n\r\n        .super-branches-title {\r\n            font-size: 36px;\r\n            line-height: 44px;\r\n            font-weight: 700;\r\n            color: #181D27;\r\n        }\r\n\r\n        .navigation-arrows {\r\n            display: flex;\r\n            gap: 10px;\r\n        }\r\n\r\n        .nav-arrow {\r\n            width: 40px;\r\n            height: 40px;\r\n            border: 1px solid #6322D0;\r\n            border-radius: 50%;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            cursor: pointer;\r\n            transition: all 0.3s ease;\r\n            background: white;\r\n            color: #6322D0;\r\n        }\r\n\r\n        .nav-arrow:hover {\r\n            border-color: #333;\r\n            background-color:  #6322D0;\r\n            border-color: #ccc;\r\n            transform: scale(1.05);\r\n            color: #6322D0;\r\n        }\r\n\r\n        .nav-arrow.disabled {\r\n            opacity: 0.5;\r\n            cursor: not-allowed;\r\n        }\r\n\r\n        .nav-arrow.disabled:hover {\r\n            border-color: #e0e0e0;\r\n            background: #fff;\r\n        }\r\n\r\n        .nav-arrow svg {\r\n            width: 20px;\r\n            height: 20px;\r\n            fill: #6322D0;\r\n        }\r\n#nextArrow, #prevArrow{\r\n    border: 1px solid #6322D0;\r\n            border-radius: 50%;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            cursor: pointer;\r\n            transition: all 0.3s ease;\r\n            background: white;\r\n            color: #6322D0;\r\n}\r\n#nextArrow:hover, #prevArrow:hover{\r\n      border-color: #333;\r\n            background-color:  #6322D0;\r\n            border-color: #ccc;\r\n            transform: scale(1.05);\r\n            color: #fff;\r\n}\r\n        .branches-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n            gap: 32px;\r\n            margin-bottom: 20px;\r\n        }\r\n\r\n        .branch-card {\r\n            background: #f8f8f8;\r\n            border-radius: 16px;\r\n            padding: 20px;\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 16px;\r\n            transition: all 0.3s ease;\r\n            cursor: pointer;\r\n            border: 2px solid transparent;\r\n        }\r\n\r\n        .branch-card:hover {\r\n            transform: translateY(-2px);\r\n            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);\r\n            border-color: #e0e0e0;\r\n        }\r\n\r\n        .branch-logo {\r\n            width: 60px;\r\n            height: 60px;\r\n            border-radius: 12px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            font-weight: bold;\r\n            font-size: 1.2rem;\r\n            color: white;\r\n            flex-shrink: 0;\r\n            overflow: hidden;\r\n        }\r\n\r\n        .branch-logo img {\r\n            width: 100%;\r\n            height: 100%;\r\n            object-fit: cover;\r\n            border-radius: 8px;\r\n        }\r\n\r\n        .branch-info {\r\n            flex: 1;\r\n        }\r\n\r\n        .branch-name {\r\n            font-size: 1.1rem;\r\n            font-weight: 600;\r\n            color: #1a1a1a;\r\n            margin-bottom: 4px;\r\n        }\r\n\r\n        .branch-availability {\r\n            font-size: 0.9rem;\r\n            color: #666;\r\n        }\r\n\r\n        .promotion-badge {\r\n            background: #ff4444;\r\n            color: white;\r\n            padding: 2px 8px;\r\n            border-radius: 12px;\r\n            font-size: 0.8rem;\r\n            font-weight: 600;\r\n            margin-left: 8px;\r\n        }\r\n\r\n        .discount-message {\r\n            background: #00aa44;\r\n            color: white;\r\n            padding: 2px 8px;\r\n            border-radius: 12px;\r\n            font-size: 0.8rem;\r\n            font-weight: 600;\r\n            margin-top: 4px;\r\n            display: inline-block;\r\n        }\r\n\r\n        .loading {\r\n            display: flex;\r\n            justify-content: center;\r\n            align-items: center;\r\n            height: 200px;\r\n            color: #666;\r\n        }\r\n\r\n        .error {\r\n            background: #fee;\r\n            color: #c33;\r\n            padding: 20px;\r\n            border-radius: 8px;\r\n            text-align: center;\r\n        }\r\n\r\n        .spinner {\r\n            border: 4px solid #f3f3f3;\r\n            border-top: 4px solid #3498db;\r\n            border-radius: 50%;\r\n            width: 40px;\r\n            height: 40px;\r\n            animation: spin 1s linear infinite;\r\n        }\r\n\r\n        @keyframes spin {\r\n            0% { transform: rotate(0deg); }\r\n            100% { transform: rotate(360deg); }\r\n        }\r\n\r\n        \/* Responsive design *\/\r\n        @media (max-width: 768px) {\r\n            .super-branches-title {\r\n                font-size: 2rem;\r\n            }\r\n            \r\n            .branches-grid {\r\n                grid-template-columns: 1fr;\r\n            }\r\n            \r\n            .branch-card {\r\n                padding: 16px;\r\n            }\r\n        }\r\n    <\/style>\r\n\r\n\r\n    <div class=\"super-branches-container\">\r\n        <div class=\"super-branches-header\">\r\n            <h1 class=\"super-branches-title\">\u0627\u0644\u0641\u0631\u0648\u0639 \u0627\u0644\u0645\u0645\u064a\u0632\u0629<\/h1>\r\n            <div class=\"navigation-arrows\">\r\n                <\/div>\r\n                <div class=\"nav-arrow\" id=\"nextArrow\">\u2192\r\n                    <!--<svg viewBox=\"0 0 24 24\">-->\r\n                    <!--    <path d=\"M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z\"\/>-->\r\n                    <!--<\/svg>-->\r\n                <\/div>\r\n                <div class=\"nav-arrow\" id=\"prevArrow\">\u2190\r\n                    <!--<svg viewBox=\"0 0 24 24\">-->\r\n                    <!--    <path d=\"M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z\"\/>-->\r\n                    <!--<\/svg>-->\r\n                \r\n            <\/div>\r\n        <\/div>\r\n        \r\n        <div id=\"branchesContainer\">\r\n            <div class=\"loading\">\r\n                <div class=\"spinner\"><\/div>\r\n                <span style=\"margin-left: 10px;\">\u062c\u0627\u0631\u064d \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0641\u0631\u0648\u0639...<\/span>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n        class SuperBranches {\r\n            constructor() {\r\n                this.apiEndpoint = 'https:\/\/mobile.mispay.co\/api\/content-v2\/merchants';\r\n                this.currentPage = 0;\r\n                this.itemsPerPage = 6;\r\n                this.branches = [];\r\n                this.init();\r\n            }\r\n\r\n            init() {\r\n                this.loadBranches();\r\n                this.setupEventListeners();\r\n            }\r\n\r\n            setupEventListeners() {\r\n                document.getElementById('prevArrow').addEventListener('click', () => this.previousPage());\r\n                document.getElementById('nextArrow').addEventListener('click', () => this.nextPage());\r\n            }\r\n\r\n            async loadBranches() {\r\n                try {\r\n                    const response = await fetch(this.apiEndpoint);\r\n                    if (!response.ok) {\r\n                        throw new Error(`HTTP error! status: ${response.status}`);\r\n                    }\r\n                    const data = await response.json();\r\n                    \r\n                    if (data.status === 'success' && Array.isArray(data.result)) {\r\n                        this.branches = data.result;\r\n                        this.renderBranches();\r\n                    } else {\r\n                        throw new Error('Invalid API response format');\r\n                    }\r\n                } catch (error) {\r\n                    console.error('Error loading branches:', error);\r\n                    this.renderError(error.message);\r\n                }\r\n            }\r\n\r\n            renderBranches() {\r\n                const container = document.getElementById('branchesContainer');\r\n                \r\n                if (this.branches.length === 0) {\r\n                    container.innerHTML = '<div class=\"error\">No branches found<\/div>';\r\n                    return;\r\n                }\r\n\r\n                const startIndex = this.currentPage * this.itemsPerPage;\r\n                const endIndex = startIndex + this.itemsPerPage;\r\n                const currentBranches = this.branches.slice(startIndex, endIndex);\r\n\r\n                const branchesHTML = currentBranches.map(branch => this.createBranchCard(branch)).join('');\r\n                \r\n                container.innerHTML = `<div class=\"branches-grid\">${branchesHTML}<\/div>`;\r\n                \r\n                this.updateNavigationState();\r\n            }\r\n\r\n            createBranchCard(branch) {\r\n                const logoColor = this.generateLogoColor(branch.name);\r\n                const logoText = branch.name.substring(0, 2).toUpperCase();\r\n                const availability = this.getAvailabilityText(branch);\r\n                \r\n                return `\r\n                    <div class=\"branch-card\" onclick=\"window.superBranches.handleBranchClick('${branch.id}', '${branch.link}')\">\r\n                        <div class=\"branch-logo\" style=\"background-color: ${logoColor}\">\r\n                            ${branch.logo ? `<img decoding=\"async\" src=\"${branch.logo}\" alt=\"${branch.name}\" onerror=\"this.style.display='none'; this.parentElement.innerHTML='${logoText}';\">` : logoText}\r\n                        <\/div>\r\n                        <div class=\"branch-info\">\r\n                            <div class=\"branch-name\">\r\n                                ${branch.name}\r\n                                ${branch.promotionMessage ? `<span class=\"promotion-badge\">${branch.promotionMessage}<\/span>` : ''}\r\n                            <\/div>\r\n                            <div class=\"branch-availability\">${availability}<\/div>\r\n                            ${branch.discountMessage ? `<div class=\"discount-message\">${branch.discountMessage}<\/div>` : ''}\r\n                        <\/div>\r\n                    <\/div>\r\n                `;\r\n            }\r\n\r\n            generateLogoColor(name) {\r\n                const colors = [\r\n                    '#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A', '#98D8C8',\r\n                    '#F7DC6F', '#BB8FCE', '#85C1E9', '#F8C471', '#82E0AA',\r\n                    '#F8696B', '#63B3ED', '#68D391', '#F6AD55', '#9F7AEA'\r\n                ];\r\n                \r\n                let hash = 0;\r\n                for (let i = 0; i < name.length; i++) {\r\n                    hash = name.charCodeAt(i) + ((hash << 5) - hash);\r\n                }\r\n                \r\n                return colors[Math.abs(hash) % colors.length];\r\n            }\r\n\r\n            getAvailabilityText(branch) {\r\n                const isOnline = branch.online;\r\n                const isOffline = branch.offline;\r\n                \r\n                if (isOnline && isOffline) {\r\n                    return 'Online & In-store';\r\n                } else if (isOnline) {\r\n                    return 'Online only';\r\n                } else if (isOffline) {\r\n                    return 'In-store only';\r\n                } else {\r\n                    return 'Check availability';\r\n                }\r\n            }\r\n\r\n            handleBranchClick(branchId, branchLink) {\r\n                console.log('Branch clicked:', branchId);\r\n                \r\n                \/\/ If there's a link, open it in a new tab\r\n                if (branchLink && branchLink !== '') {\r\n                    window.open(branchLink, '_blank');\r\n                }\r\n                \r\n                \/\/ You can add additional custom logic here\r\n                \/\/ For example, trigger an event or analytics tracking\r\n                if (typeof window.gtag !== 'undefined') {\r\n                    window.gtag('event', 'branch_click', {\r\n                        'branch_id': branchId\r\n                    });\r\n                }\r\n            }\r\n\r\n            previousPage() {\r\n                if (this.currentPage > 0) {\r\n                    this.currentPage--;\r\n                    this.renderBranches();\r\n                }\r\n            }\r\n\r\n            nextPage() {\r\n                const maxPages = Math.ceil(this.branches.length \/ this.itemsPerPage);\r\n                if (this.currentPage < maxPages - 1) {\r\n                    this.currentPage++;\r\n                    this.renderBranches();\r\n                }\r\n            }\r\n\r\n            updateNavigationState() {\r\n                const prevArrow = document.getElementById('prevArrow');\r\n                const nextArrow = document.getElementById('nextArrow');\r\n                const maxPages = Math.ceil(this.branches.length \/ this.itemsPerPage);\r\n                \r\n                \/\/ Update previous arrow\r\n                if (this.currentPage === 0) {\r\n                    prevArrow.classList.add('disabled');\r\n                } else {\r\n                    prevArrow.classList.remove('disabled');\r\n                }\r\n                \r\n                \/\/ Update next arrow\r\n                if (this.currentPage >= maxPages - 1) {\r\n                    nextArrow.classList.add('disabled');\r\n                } else {\r\n                    nextArrow.classList.remove('disabled');\r\n                }\r\n            }\r\n\r\n            renderError(message) {\r\n                const container = document.getElementById('branchesContainer');\r\n                container.innerHTML = `\r\n                    <div class=\"error\">\r\n                        <h3>Error loading branches<\/h3>\r\n                        <p>${message}<\/p>\r\n                        <button onclick=\"window.superBranches.loadBranches()\" style=\"margin-top: 10px; padding: 8px 16px; background: #007cba; color: white; border: none; border-radius: 4px; cursor: pointer;\">\r\n                            Try Again\r\n                        <\/button>\r\n                    <\/div>\r\n                `;\r\n            }\r\n\r\n            \/\/ Optional: Add search functionality\r\n            searchBranches(searchText) {\r\n                if (!searchText) {\r\n                    this.loadBranches();\r\n                    return;\r\n                }\r\n                \r\n                const searchUrl = `${this.apiEndpoint}?searchText=${encodeURIComponent(searchText)}`;\r\n                fetch(searchUrl)\r\n                    .then(response => response.json())\r\n                    .then(data => {\r\n                        if (data.status === 'success' && Array.isArray(data.result)) {\r\n                            this.branches = data.result;\r\n                            this.currentPage = 0;\r\n                            this.renderBranches();\r\n                        }\r\n                    })\r\n                    .catch(error => {\r\n                        console.error('Search error:', error);\r\n                        this.renderError('Search failed');\r\n                    });\r\n            }\r\n\r\n            \/\/ Optional: Filter by category\r\n            filterByCategory(categoryId) {\r\n                if (!categoryId) {\r\n                    this.loadBranches();\r\n                    return;\r\n                }\r\n                \r\n                const filterUrl = `${this.apiEndpoint}?categoryId=${categoryId}`;\r\n                fetch(filterUrl)\r\n                    .then(response => response.json())\r\n                    .then(data => {\r\n                        if (data.status === 'success' && Array.isArray(data.result)) {\r\n                            this.branches = data.result;\r\n                            this.currentPage = 0;\r\n                            this.renderBranches();\r\n                        }\r\n                    })\r\n                    .catch(error => {\r\n                        console.error('Filter error:', error);\r\n                        this.renderError('Filter failed');\r\n                    });\r\n            }\r\n        }\r\n\r\n        \/\/ Initialize the Super Branches widget\r\n        window.superBranches = new SuperBranches();\r\n    <\/script>\r\n\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d865882 e-flex e-con-boxed e-con e-parent\" data-id=\"d865882\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d260731 elementor-widget elementor-widget-html\" data-id=\"d260731\" data-element_type=\"widget\" data-settings=\"{&quot;htmega_fe&quot;:&quot;no&quot;}\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div>\r\n\r\n\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>\u062a\u062c\u0627\u0631 MisPay<\/title>\r\n    <style>\r\n        .mispay-container {\r\n            max-width: 1200px;\r\n            margin: 0 auto;\r\n            padding: 20px;\r\n            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\r\n        }\r\n        \r\n        .mispay-header {\r\n            display: flex;\r\n            justify-content: space-between;\r\n            align-items: center;\r\n            margin-bottom: 30px;\r\n        }\r\n        \r\n        .mispay-title {\r\n            font-size: 36px;\r\n            font-weight: 700;\r\n            color: #181D27;\r\n            margin: 0;\r\n            line-height: 44px;\r\n        }\r\n        \r\n        .mispay-navigation {\r\n            display: flex;\r\n            gap: 10px;\r\n        }\r\n        \r\n        .nav-arrow {\r\n            width: 40px;\r\n            height: 40px;\r\n            border: 1px solid #6322D0;\r\n            border-radius: 50%;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            cursor: pointer;\r\n            transition: all 0.3s ease;\r\n            background: white;\r\n            color: #6322D0;\r\n        }\r\n        \r\n        .nav-arrow:hover {\r\n            border-color: #333;\r\n            background-color: #6322D0;\r\n            border-color: #ccc;\r\n            transform: scale(1.05);\r\n            color: #fff;\r\n        }\r\n        \r\n        .nav-arrow.disabled {\r\n            opacity: 0.5;\r\n            cursor: not-allowed;\r\n        }\r\n        \r\n        .merchants-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\r\n            gap: 32px;\r\n            margin-bottom: 30px;\r\n        }\r\n        \r\n        .merchant-card {\r\n            background: #f8f8f8;\r\n            border-radius: 16px;\r\n            padding: 20px;\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 16px;\r\n            transition: all 0.3s ease;\r\n            cursor: pointer;\r\n            border: 2px solid transparent;\r\n        }\r\n        \r\n        .merchant-card:hover {\r\n            transform: translateY(-5px);\r\n            box-shadow: 0 8px 25px rgba(0,0,0,0.15);\r\n        }\r\n        \r\n        .merchant-header {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 15px;\r\n        }\r\n        \r\n        .merchant-logo {\r\n            width: 60px;\r\n            height: 60px;\r\n            border-radius: 12px;\r\n            object-fit: cover;\r\n            flex-shrink: 0;\r\n            background: #e0e0e0;\r\n        }\r\n        \r\n        .merchant-info {\r\n            flex: 1;\r\n        }\r\n        \r\n        .merchant-info h3 {\r\n            margin: 0 0 5px 0;\r\n            font-size: 18px;\r\n            font-weight: 600;\r\n            color: #333;\r\n        }\r\n        \r\n        .merchant-availability {\r\n            font-size: 14px;\r\n            color: #666;\r\n        }\r\n        \r\n        .merchant-messages {\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 5px;\r\n        }\r\n        \r\n        .promotion-message {\r\n            background: #fff3cd;\r\n            color: #856404;\r\n            padding: 6px 10px;\r\n            border-radius: 6px;\r\n            font-size: 12px;\r\n            font-weight: 500;\r\n        }\r\n        \r\n        .discount-message {\r\n            background: #d4edda;\r\n            color: #155724;\r\n            padding: 6px 10px;\r\n            border-radius: 6px;\r\n            font-size: 12px;\r\n            font-weight: 500;\r\n        }\r\n        \r\n        .loading {\r\n            text-align: center;\r\n            padding: 40px;\r\n            color: #666;\r\n        }\r\n        \r\n        .error {\r\n            text-align: center;\r\n            padding: 40px;\r\n            color: #d32f2f;\r\n            background: #ffebee;\r\n            border-radius: 8px;\r\n        }\r\n        \r\n        @media (max-width: 768px) {\r\n            .merchants-grid {\r\n                grid-template-columns: 1fr;\r\n            }\r\n            \r\n            .mispay-header {\r\n                flex-direction: column;\r\n                gap: 20px;\r\n                text-align: center;\r\n            }\r\n        }\r\n    <\/style>\r\n\r\n\r\n    <div class=\"mispay-container\">\r\n        <div class=\"mispay-header\">\r\n            <h1 class=\"mispay-title\">\u062a\u0642\u0633\u064a\u0645 \u0639\u0644\u0649 6,12<\/h1>\r\n            <!--\r\n            <div class=\"mispay-navigation\">\r\n                <div class=\"nav-arrow\" id=\"prevBtn\" onclick=\"changePage(-1)\">\r\n  \u2190\r\n                <\/div>\r\n                <div class=\"nav-arrow\" id=\"nextBtn\" onclick=\"changePage(1)\">\r\n  \u2192\r\n                <\/div>\r\n            <\/div>\r\n            -->\r\n        <\/div>\r\n        \r\n        <div id=\"merchantsContainer\">\r\n            <div class=\"loading\">\u062c\u0627\u0631\u064d \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u062a\u062c\u0627\u0631...<\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n        const API_BASE_URL = 'https:\/\/mobile.mispay.co\/api';\r\n        const MERCHANTS_PER_PAGE = 6;\r\n        \r\n        let allMerchants = [];\r\n        let currentPage = 1;\r\n        \r\n        document.addEventListener('DOMContentLoaded', function() {\r\n            loadMerchants();\r\n        });\r\n        \r\n        async function loadMerchants() {\r\n            try {\r\n                const response = await fetch(`${API_BASE_URL}\/content-v2\/merchants`);\r\n                const data = await response.json();\r\n                \r\n                if (data.status === 'success') {\r\n                    allMerchants = data.result;\r\n                    currentPage = 1;\r\n                    renderMerchants();\r\n                } else {\r\n                    throw new Error('Failed to load merchants');\r\n                }\r\n            } catch (error) {\r\n                console.error('Error loading merchants:', error);\r\n                document.getElementById('merchantsContainer').innerHTML = \r\n                    '<div class=\"error\">Failed to load merchants. Please try again later.<\/div>';\r\n            }\r\n        }\r\n        \r\n        function renderMerchants() {\r\n            const container = document.getElementById('merchantsContainer');\r\n            const startIndex = (currentPage - 1) * MERCHANTS_PER_PAGE;\r\n            const endIndex = startIndex + MERCHANTS_PER_PAGE;\r\n            const merchantsToShow = allMerchants.slice(startIndex, endIndex);\r\n            \r\n            if (merchantsToShow.length === 0) {\r\n                container.innerHTML = '<div class=\"error\">No merchants found.<\/div>';\r\n                return;\r\n            }\r\n            \r\n            const merchantsHTML = merchantsToShow.map(merchant => `\r\n                <div class=\"merchant-card\" onclick=\"openMerchant('${merchant.link}')\">\r\n                    <div class=\"merchant-header\">\r\n                        <img decoding=\"async\" src=\"${merchant.logo}\" alt=\"${merchant.name}\" class=\"merchant-logo\" onerror=\"this.style.display='none'\" \/>\r\n                        <div class=\"merchant-info\">\r\n                            <h3>${merchant.name}<\/h3>\r\n                            <div class=\"merchant-availability\">\r\n                                ${getAvailabilityText(merchant.online, merchant.offline)}\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                    \r\n                    ${(merchant.promotionMessage || merchant.discountMessage) ? `\r\n                    <div class=\"merchant-messages\">\r\n                        ${merchant.promotionMessage ? \r\n                            `<div class=\"promotion-message\">${merchant.promotionMessage}<\/div>` : ''\r\n                        }\r\n                        ${merchant.discountMessage ? \r\n                            `<div class=\"discount-message\">${merchant.discountMessage}<\/div>` : ''\r\n                        }\r\n                    <\/div>\r\n                    ` : ''}\r\n                <\/div>\r\n            `).join('');\r\n            \r\n            container.innerHTML = `<div class=\"merchants-grid\">${merchantsHTML}<\/div>`;\r\n            updateNavigationArrows();\r\n        }\r\n        \r\n        function getAvailabilityText(online, offline) {\r\n            if (online && offline) return 'Online & in-store';\r\n            if (online) return 'Online only';\r\n            if (offline) return 'In-store only';\r\n            return 'Contact for availability';\r\n        }\r\n        \r\n        function openMerchant(link) {\r\n            if (link) {\r\n                window.open(link, '_blank');\r\n            }\r\n        }\r\n        \r\n        function updateNavigationArrows() {\r\n            const totalPages = Math.ceil(allMerchants.length \/ MERCHANTS_PER_PAGE);\r\n            const prevBtn = document.getElementById('prevBtn');\r\n            const nextBtn = document.getElementById('nextBtn');\r\n            \r\n            prevBtn.classList.toggle('disabled', currentPage === 1);\r\n            nextBtn.classList.toggle('disabled', currentPage === totalPages);\r\n        }\r\n        \r\n        function changePage(direction) {\r\n            const totalPages = Math.ceil(allMerchants.length \/ MERCHANTS_PER_PAGE);\r\n            const newPage = currentPage + direction;\r\n            \r\n            if (newPage >= 1 && newPage <= totalPages) {\r\n                currentPage = newPage;\r\n                renderMerchants();\r\n                window.scrollTo({ top: 0, behavior: 'smooth' });\r\n            }\r\n        }\r\n        \r\n        setInterval(loadMerchants, 300000);\r\n    <\/script>\r\n\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3d1bc93 e-flex e-con-boxed e-con e-parent\" data-id=\"3d1bc93\" data-element_type=\"container\" id=\"Deal\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1cefdb1 elementor-widget elementor-widget-html\" data-id=\"1cefdb1\" data-element_type=\"widget\" data-settings=\"{&quot;htmega_fe&quot;:&quot;no&quot;}\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div>\r\n\r\n\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>\u0623\u0641\u0636\u0644 \u0639\u0631\u0648\u0636 MisPay<\/title>\r\n    <style>\r\n        * {\r\n            margin: 0;\r\n            padding: 0;\r\n            box-sizing: border-box;\r\n        }\r\n        \r\n        body {\r\n            background: #f8f9fa;\r\n            min-height: 100vh;\r\n        }\r\n        \r\n        .deals-container {\r\n            max-width: 1200px;\r\n            margin: 0 auto;\r\n            padding: 20px;\r\n            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\r\n        }\r\n        \r\n        .deals-header {\r\n            display: flex;\r\n            justify-content: space-between;\r\n            align-items: center;\r\n            margin-bottom: 30px;\r\n        }\r\n        \r\n        .deals-title {\r\n            font-size: 32px;\r\n            font-weight: bold;\r\n            color: #333;\r\n            margin: 0;\r\n        }\r\n        \r\n        .deals-navigation {\r\n            display: flex;\r\n            gap: 10px;\r\n        }\r\n        \r\n        .nav-arrow {\r\n            width: 40px;\r\n            height: 40px;\r\n            border: 1px solid #6322D0;\r\n            border-radius: 50%;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            cursor: pointer;\r\n            transition: all 0.3s ease;\r\n            background: white;\r\n            color: #6322D0;\r\n            font-size: 18px;\r\n            font-weight: bold;\r\n        }\r\n        \r\n        .nav-arrow:hover:not(.disabled) {\r\n            background-color: #6322D0;\r\n            color: #fff;\r\n            transform: scale(1.05);\r\n        }\r\n        \r\n        .nav-arrow.disabled {\r\n            opacity: 0.3;\r\n            cursor: not-allowed;\r\n        }\r\n        \r\n        .deals-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\r\n            gap: 20px;\r\n            margin-bottom: 30px;\r\n        }\r\n        \r\n        .deal-card {\r\n            background: white;\r\n            border-radius: 16px;\r\n            padding: 24px;\r\n            box-shadow: 0 4px 20px rgba(0,0,0,0.08);\r\n            transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n            cursor: pointer;\r\n            position: relative;\r\n            border: 1px solid #f0f0f0;\r\n        }\r\n        \r\n        .deal-card:hover {\r\n            transform: translateY(-5px);\r\n            box-shadow: 0 8px 30px rgba(0,0,0,0.15);\r\n        }\r\n        \r\n        .deal-header {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 12px;\r\n            margin-bottom: 20px;\r\n        }\r\n        \r\n        .merchant-logo {\r\n            width: 48px;\r\n            height: 48px;\r\n            border-radius: 50%;\r\n            object-fit: cover;\r\n            background: #f0f0f0;\r\n            border: 2px solid #fff;\r\n            box-shadow: 0 2px 8px rgba(0,0,0,0.1);\r\n        }\r\n        \r\n        .deal-info {\r\n            flex: 1;\r\n        }\r\n        \r\n        .merchant-name {\r\n            font-size: 16px;\r\n            font-weight: 600;\r\n            color: #333;\r\n            margin: 0 0 4px 0;\r\n        }\r\n        \r\n        .coupon-code {\r\n            font-size: 14px;\r\n            color: #666;\r\n            font-family: 'Courier New', monospace;\r\n            background: #f8f8f8;\r\n            padding: 2px 6px;\r\n            border-radius: 4px;\r\n            display: inline-block;\r\n        }\r\n        \r\n        .deal-type {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 8px;\r\n            margin-bottom: 12px;\r\n        }\r\n        \r\n        .deal-type-icon {\r\n            width: 20px;\r\n            height: 20px;\r\n            border-radius: 4px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            font-size: 12px;\r\n            color: white;\r\n            font-weight: bold;\r\n        }\r\n        \r\n        .discount-icon {\r\n            background: #10b981;\r\n        }\r\n        \r\n        .cashback-icon {\r\n            background: #3b82f6;\r\n        }\r\n        \r\n        .deal-type-text {\r\n            font-size: 14px;\r\n            color: #666;\r\n            font-weight: 500;\r\n        }\r\n        \r\n        .deal-amount {\r\n            font-size: 48px;\r\n            font-weight: bold;\r\n            color: #333;\r\n            margin: 16px 0;\r\n            line-height: 1;\r\n        }\r\n        \r\n        .deal-timer {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 6px;\r\n            margin-bottom: 20px;\r\n        }\r\n        \r\n        .timer-icon {\r\n            width: 16px;\r\n            height: 16px;\r\n            color: #10b981;\r\n        }\r\n        \r\n        .timer-text {\r\n            font-size: 14px;\r\n            color: #10b981;\r\n            font-weight: 500;\r\n        }\r\n        \r\n        .get-deal-btn {\r\n            width: 100%;\r\n            background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);\r\n            color: white;\r\n            border: none;\r\n            padding: 14px 24px;\r\n            border-radius: 12px;\r\n            font-size: 16px;\r\n            font-weight: 600;\r\n            cursor: pointer;\r\n            transition: all 0.3s ease;\r\n            box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);\r\n        }\r\n        \r\n        .get-deal-btn:hover {\r\n            transform: translateY(-2px);\r\n            box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);\r\n        }\r\n        \r\n        .get-deal-btn:active {\r\n            transform: translateY(0);\r\n        }\r\n        \r\n        .view-all-container {\r\n            text-align: center;\r\n            margin-top: 40px;\r\n        }\r\n        \r\n        .view-all-btn {\r\n            background: transparent;\r\n            color: #666;\r\n            border: 2px solid #e0e0e0;\r\n            padding: 12px 32px;\r\n            border-radius: 8px;\r\n            font-size: 16px;\r\n            font-weight: 500;\r\n            cursor: pointer;\r\n            transition: all 0.3s ease;\r\n        }\r\n        \r\n        .view-all-btn:hover {\r\n            border-color: #333;\r\n            color: #333;\r\n        }\r\n        \r\n        .loading, .error {\r\n            text-align: center;\r\n            padding: 40px;\r\n            color: #666;\r\n            font-size: 16px;\r\n        }\r\n        \r\n        .error {\r\n            color: #d32f2f;\r\n            background: #ffebee;\r\n            border-radius: 8px;\r\n        }\r\n        \r\n        .error-details {\r\n            margin-top: 10px;\r\n            font-size: 14px;\r\n            font-family: monospace;\r\n            background: white;\r\n            padding: 15px;\r\n            border-radius: 4px;\r\n            max-width: 700px;\r\n            margin-left: auto;\r\n            margin-right: auto;\r\n            text-align: left;\r\n            line-height: 1.6;\r\n        }\r\n        \r\n        .error-details a {\r\n            color: #3b82f6;\r\n            text-decoration: underline;\r\n        }\r\n        \r\n        .error-details strong {\r\n            color: #333;\r\n        }\r\n        \r\n        .deal-conditions {\r\n            font-size: 12px;\r\n            color: #666;\r\n            margin-top: 8px;\r\n            line-height: 1.4;\r\n        }\r\n        \r\n        .expired-overlay {\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            right: 0;\r\n            bottom: 0;\r\n            background: rgba(0,0,0,0.05);\r\n            border-radius: 16px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n        }\r\n        \r\n        .expired-text {\r\n            background: rgba(220, 38, 38, 0.9);\r\n            color: white;\r\n            padding: 8px 16px;\r\n            border-radius: 20px;\r\n            font-weight: 600;\r\n            font-size: 14px;\r\n        }\r\n        \r\n        @keyframes slideIn {\r\n            from { transform: translateX(100%); opacity: 0; }\r\n            to { transform: translateX(0); opacity: 1; }\r\n        }\r\n        \r\n        @media (max-width: 768px) {\r\n            .deals-grid {\r\n                grid-template-columns: 1fr;\r\n            }\r\n            \r\n            .deals-header {\r\n                flex-direction: column;\r\n                gap: 20px;\r\n                text-align: center;\r\n            }\r\n            \r\n            .deal-amount {\r\n                font-size: 40px;\r\n            }\r\n        }\r\n    <\/style>\r\n\r\n\r\n    <div class=\"deals-container\">\r\n        <div class=\"deals-header\">\r\n            <h1 class=\"deals-title\">\u0623\u0641\u0636\u0644 \u0627\u0644\u0639\u0631\u0648\u0636<\/h1>\r\n            <!--\r\n            <div class=\"deals-navigation\">\r\n                <div class=\"nav-arrow disabled\" id=\"prevBt\">\r\n  \u2190\r\n                <\/div>\r\n                <div class=\"nav-arrow disabled\" id=\"nextBt\">\r\n  \u2192\r\n                <\/div>\r\n            <\/div>\r\n            -->\r\n        <\/div>\r\n        \r\n        <div id=\"dealsContainer\">\r\n            <div class=\"loading\">\u062c\u0627\u0631\u064d \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0639\u0631\u0648\u0636...<\/div>\r\n        <\/div>\r\n        \r\n      <!--\r\n      <div class=\"view-all-container\">\r\n    <a href=\"https:\/\/test-new.mispay.co\/deal\">\r\n        <button class=\"view-all-btn\" id=\"viewAllBtn\">\u0639\u0631\u0636 \u0627\u0644\u0643\u0644<\/button>\r\n    <\/a>\r\n<\/div>\r\n-->\r\n    <\/div>\r\n\r\n    <script>\r\n        \/\/ Configuration - using unique variable names to avoid conflicts\r\n        const DEALS_API_BASE_URL = 'https:\/\/mobile.mispay.co\/api';\r\n        const DEALS_PER_PAGE = 3;\r\n        \r\n        \/\/ State - using unique variable names\r\n        let dealsArray = [];\r\n        let dealsCurrentPage = 1;\r\n        \r\n        \/\/ Initialize\r\n        document.addEventListener('DOMContentLoaded', function() {\r\n            document.getElementById('prevBt').addEventListener('click', () => changeDealsPage(-1));\r\n            document.getElementById('nextBt').addEventListener('click', () => changeDealsPage(1));\r\n            document.getElementById('viewAllBtn').addEventListener('click', viewAllDeals);\r\n            \r\n            loadDeals();\r\n            startDealsTimerUpdates();\r\n        });\r\n        \r\n        \/\/ Load deals from API\r\n        async function loadDeals() {\r\n            const container = document.getElementById('dealsContainer');\r\n            \r\n            try {\r\n                console.log('Fetching deals from:', `${DEALS_API_BASE_URL}\/content-v2\/deals?status=active&lang=en`);\r\n                \r\n                const response = await fetch(`${DEALS_API_BASE_URL}\/content-v2\/deals?status=active&lang=en`, {\r\n                    method: 'GET',\r\n                    headers: {\r\n                        'Accept': 'application\/json',\r\n                        'Content-Type': 'application\/json',\r\n                        'Accept-Language': 'en-US,en;q=0.9'\r\n                    },\r\n                    mode: 'cors',\r\n                    credentials: 'omit'\r\n                });\r\n                \r\n                console.log('Deals response received:', response.status, response.statusText);\r\n                \r\n                if (!response.ok) {\r\n                    throw new Error(`HTTP error! status: ${response.status} - ${response.statusText}`);\r\n                }\r\n                \r\n                const data = await response.json();\r\n                console.log('Deals data parsed:', data);\r\n                \r\n                if (data.status === 'success' && data.result && Array.isArray(data.result)) {\r\n                    dealsArray = data.result.map(deal => ({\r\n                        ...deal,\r\n                        isExpired: new Date(deal.endDate) < new Date()\r\n                    }));\r\n                    \r\n                    console.log(`Loaded ${dealsArray.length} deals successfully`);\r\n                    \r\n                    if (dealsArray.length === 0) {\r\n                        container.innerHTML = '<div class=\"error\">No deals available at the moment.<\/div>';\r\n                        return;\r\n                    }\r\n                    \r\n                    dealsCurrentPage = 1;\r\n                    renderDeals();\r\n                    updateDealsNavigation();\r\n                } else {\r\n                    throw new Error('Invalid API response format: ' + JSON.stringify(data));\r\n                }\r\n            } catch (error) {\r\n                console.error('Error loading deals:', error);\r\n                \r\n                let errorMessage = error.message;\r\n                let errorType = 'Unknown Error';\r\n                \r\n                if (error.message.includes('Failed to fetch') || error.name === 'TypeError') {\r\n                    errorType = 'CORS or Network Error';\r\n                    errorMessage = 'Cannot connect to API. This is likely a CORS issue or network problem.';\r\n                }\r\n                \r\n                container.innerHTML = `\r\n                    <div class=\"error\">\r\n                        Failed to load deals\r\n                        <div class=\"error-details\">\r\n                            <strong>${errorType}<\/strong><br>\r\n                            ${errorMessage}<br><br>\r\n                            <strong>Possible solutions:<\/strong><br>\r\n                            1. Check if the API server is running<br>\r\n                            2. Verify CORS is enabled on the API server<br>\r\n                            3. Check browser console for detailed errors<br>\r\n                            4. Try accessing the API directly: <a href=\"${DEALS_API_BASE_URL}\/content-v2\/deals?status=active\" target=\"_blank\">Test API<\/a><br><br>\r\n                            <strong>API URL:<\/strong> ${DEALS_API_BASE_URL}\/content-v2\/deals?status=active\r\n                        <\/div>\r\n                    <\/div>\r\n                `;\r\n            }\r\n        }\r\n        \r\n        \/\/ Render deals\r\n        function renderDeals() {\r\n            const container = document.getElementById('dealsContainer');\r\n            const startIndex = (dealsCurrentPage - 1) * DEALS_PER_PAGE;\r\n            const endIndex = startIndex + DEALS_PER_PAGE;\r\n            const dealsToShow = dealsArray.slice(startIndex, endIndex);\r\n            \r\n            if (dealsToShow.length === 0) {\r\n                container.innerHTML = '<div class=\"error\">No deals available.<\/div>';\r\n                return;\r\n            }\r\n            \r\n            const dealsHTML = dealsToShow.map(deal => {\r\n                const dealLink = deal.link || '';\r\n                const dealCode = deal.couponCode || '';\r\n                const dealId = deal.id || Math.random().toString(36).substr(2, 9);\r\n                \r\n                return `\r\n                <div class=\"deal-card\" data-link=\"${dealLink}\" data-code=\"${dealCode}\" onclick=\"handleDealClick(this)\">\r\n                    <div class=\"deal-header\">\r\n                        <img decoding=\"async\" src=\"${deal.logo || ''}\" alt=\"${deal.merchantName || 'Merchant'}\" class=\"merchant-logo\" onerror=\"this.src='data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgMCA0OCA0OCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMjQiIGN5PSIyNCIgcj0iMjQiIGZpbGw9IiNGMEYwRjAiLz4KPHBhdGggZD0iTTI0IDE2QzE5LjU4MTcgMTYgMTYgMTkuNTgxNyAxNiAyNEMxNiAyOC40MTgzIDE5LjU4MTcgMzIgMjQgMzJDMjguNDE4MyAzMiAzMiAyOC40MTgzIDMyIDI0QzMyIDE5LjU4MTcgMjguNDE4MyAxNiAyNCAxNloiIGZpbGw9IiNDQ0NDQ0MiLz4KPC9zdmc+'\" \/>\r\n                        <div class=\"deal-info\">\r\n                            <h3 class=\"merchant-name\">${deal.merchantName || 'Unknown Merchant'}<\/h3>\r\n                            ${deal.couponCode ? `<div class=\"coupon-code\">${deal.couponCode}<\/div>` : ''}\r\n                        <\/div>\r\n                    <\/div>\r\n                    \r\n                    <div class=\"deal-type\">\r\n                        <div class=\"deal-type-icon ${getDealTypeClass(deal.discountType)}\">\r\n                            ${getDealTypeIcon(deal.discountType)}\r\n                        <\/div>\r\n                        <span class=\"deal-type-text\">${getDealTypeText(deal.discountType)}<\/span>\r\n                    <\/div>\r\n                    \r\n                    <div class=\"deal-amount\">\r\n                        ${deal.amount || '0'}${deal.discountType === 'percentage' ? '%' : ''}\r\n                    <\/div>\r\n                    \r\n                    ${deal.endDate ? `\r\n                        <div class=\"deal-timer\">\r\n                            <svg class=\"timer-icon\" viewBox=\"0 0 16 16\" fill=\"currentColor\">\r\n                                <path d=\"M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z\"\/>\r\n                                <path d=\"M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z\"\/>\r\n                            <\/svg>\r\n                            <span class=\"timer-text\" id=\"timer-${dealId}\">\r\n                                ${getTimeRemaining(deal.endDate)}\r\n                            <\/span>\r\n                        <\/div>\r\n                    ` : ''}\r\n                    \r\n                    <button class=\"get-deal-btn\">Get Deal<\/button>\r\n                    \r\n                    ${deal.briefConditions ? \r\n                        `<div class=\"deal-conditions\">${deal.briefConditions}<\/div>` : ''\r\n                    }\r\n                    \r\n                    ${deal.isExpired ? \r\n                        `<div class=\"expired-overlay\">\r\n                            <div class=\"expired-text\">Expired<\/div>\r\n                        <\/div>` : ''\r\n                    }\r\n                <\/div>\r\n            `;\r\n            }).join('');\r\n            \r\n            container.innerHTML = `<div class=\"deals-grid\">${dealsHTML}<\/div>`;\r\n        }\r\n        \r\n        function getDealTypeClass(type) {\r\n            return type === 'percentage' ? 'discount-icon' : 'cashback-icon';\r\n        }\r\n        \r\n        function getDealTypeIcon(type) {\r\n            return type === 'percentage' ? '%' : '$';\r\n        }\r\n        \r\n        function getDealTypeText(type) {\r\n            return type === 'percentage' ? 'Discount' : 'Cashback';\r\n        }\r\n        \r\n        function getTimeRemaining(endDate) {\r\n            const now = new Date();\r\n            const end = new Date(endDate);\r\n            const diff = end - now;\r\n            \r\n            if (diff <= 0) return 'Expired';\r\n            \r\n            const days = Math.floor(diff \/ (1000 * 60 * 60 * 24));\r\n            const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) \/ (1000 * 60 * 60));\r\n            const minutes = Math.floor((diff % (1000 * 60 * 60)) \/ (1000 * 60));\r\n            const seconds = Math.floor((diff % (1000 * 60)) \/ 1000);\r\n            \r\n            if (days > 0) return `${days}d ${hours}h ${minutes}m ${seconds}s`;\r\n            if (hours > 0) return `${hours}h ${minutes}m ${seconds}s`;\r\n            if (minutes > 0) return `${minutes}m ${seconds}s`;\r\n            return `${seconds}s`;\r\n        }\r\n        \r\n        function updateTimers() {\r\n            dealsArray.forEach(deal => {\r\n                const timerElement = document.getElementById(`timer-${deal.id}`);\r\n                if (timerElement && deal.endDate) {\r\n                    const timeRemaining = getTimeRemaining(deal.endDate);\r\n                    timerElement.textContent = timeRemaining;\r\n                    \r\n                    if (timeRemaining === 'Expired' && !deal.isExpired) {\r\n                        deal.isExpired = true;\r\n                        renderDeals();\r\n                    }\r\n                }\r\n            });\r\n        }\r\n        \r\n        function startDealsTimerUpdates() {\r\n            setInterval(updateTimers, 1000);\r\n        }\r\n        \r\n        function handleDealClick(element) {\r\n            const link = element.getAttribute('data-link');\r\n            const code = element.getAttribute('data-code');\r\n            getDeal(link, code);\r\n        }\r\n        \r\n        function getDeal(link, couponCode) {\r\n            if (couponCode && navigator.clipboard) {\r\n                navigator.clipboard.writeText(couponCode).then(() => {\r\n                    showToast(`Coupon code \"${couponCode}\" copied to clipboard!`);\r\n                }).catch(err => {\r\n                    console.error('Failed to copy:', err);\r\n                    showToast('Unable to copy code. Please copy manually.');\r\n                });\r\n            }\r\n            \r\n            if (link) {\r\n                window.open(link, '_blank');\r\n            }\r\n        }\r\n        \r\n        function showToast(message) {\r\n            const toast = document.createElement('div');\r\n            toast.style.cssText = `\r\n                position: fixed;\r\n                top: 20px;\r\n                right: 20px;\r\n                background: #10b981;\r\n                color: white;\r\n                padding: 12px 20px;\r\n                border-radius: 8px;\r\n                font-size: 14px;\r\n                font-weight: 500;\r\n                z-index: 1000;\r\n                box-shadow: 0 4px 12px rgba(0,0,0,0.15);\r\n                animation: slideIn 0.3s ease-out;\r\n            `;\r\n            \r\n            toast.textContent = message;\r\n            document.body.appendChild(toast);\r\n            \r\n            setTimeout(() => {\r\n                toast.remove();\r\n            }, 3000);\r\n        }\r\n        \r\n        function updateDealsNavigation() {\r\n            const totalPages = Math.ceil(dealsArray.length \/ DEALS_PER_PAGE);\r\n            const prevBt = document.getElementById('prevBt');\r\n            const nextBt = document.getElementById('nextBt');\r\n            \r\n            if (prevBt && nextBt) {\r\n                prevBt.classList.toggle('disabled', dealsCurrentPage === 1);\r\n                nextBt.classList.toggle('disabled', dealsCurrentPage >= totalPages);\r\n            }\r\n        }\r\n        \r\n        function changeDealsPage(direction) {\r\n            const totalPages = Math.ceil(dealsArray.length \/ DEALS_PER_PAGE);\r\n            const newPage = dealsCurrentPage + direction;\r\n            \r\n            if (newPage >= 1 && newPage <= totalPages) {\r\n                dealsCurrentPage = newPage;\r\n                renderDeals();\r\n                updateDealsNavigation();\r\n                window.scrollTo({ top: 0, behavior: 'smooth' });\r\n            }\r\n        }\r\n        \r\n        function viewAllDeals() {\r\n            alert('Navigate to full deals page - You can customize this function to navigate to your full deals page');\r\n        }\r\n        \r\n        \/\/ Auto-refresh deals every 5 minutes\r\n        setInterval(loadDeals, 300000);\r\n    <\/script>\r\n\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-fee9c00 e-flex e-con-boxed e-con e-parent\" data-id=\"fee9c00\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a983134 elementor-widget elementor-widget-html\" data-id=\"a983134\" data-element_type=\"widget\" data-settings=\"{&quot;htmega_fe&quot;:&quot;no&quot;}\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div>\r\n\r\n\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>\u062a\u0633\u0648\u0642 \u062d\u0633\u0628 \u0627\u0644\u0641\u0626\u0629<\/title>\r\n    <style>\r\n        * {\r\n            margin: 0;\r\n            padding: 0;\r\n            box-sizing: border-box;\r\n        }\r\n        \r\n        body {\r\n            background: #f8f9fa;\r\n            min-height: 100vh;\r\n        }\r\n        \r\n        .shop-by-category {\r\n            max-width: 1200px;\r\n            margin: 0 auto;\r\n            padding: 20px;\r\n            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\r\n        }\r\n        \r\n        .category-header {\r\n            display: flex;\r\n            justify-content: space-between;\r\n            align-items: center;\r\n            margin-bottom: 30px;\r\n        }\r\n        \r\n        .category-title {\r\n            font-size: 32px;\r\n            font-weight: bold;\r\n            color: #333;\r\n            margin: 0;\r\n        }\r\n        \r\n        .nav-controls {\r\n            display: flex;\r\n            gap: 10px;\r\n        }\r\n        \r\n        .nav-btn {\r\n            width: 40px;\r\n            height: 40px;\r\n            border: 1px solid #6322D0;\r\n            border-radius: 50%;\r\n            background: white;\r\n            color: #6322D0;\r\n            cursor: pointer;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            transition: all 0.3s ease;\r\n            font-size: 18px;\r\n            font-weight: bold;\r\n        }\r\n        \r\n        .nav-btn:hover:not(:disabled) {\r\n            background-color: #6322D0;\r\n            color: #fff;\r\n            transform: scale(1.05);\r\n        }\r\n        \r\n        .nav-btn:disabled {\r\n            opacity: 0.3;\r\n            cursor: not-allowed;\r\n        }\r\n        \r\n        .categories-container {\r\n            position: relative;\r\n            overflow: hidden;\r\n            margin-bottom: 30px;\r\n        }\r\n        \r\n        .categories-grid {\r\n            display: flex;\r\n            gap: 20px;\r\n            transition: transform 0.3s ease;\r\n            padding-bottom: 20px;\r\n        }\r\n        \r\n        .category-card {\r\n            min-width: 200px;\r\n            flex-shrink: 0;\r\n            background: white;\r\n            border-radius: 16px;\r\n            box-shadow: 0 4px 20px rgba(0,0,0,0.08);\r\n            overflow: hidden;\r\n            transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n            cursor: pointer;\r\n            text-decoration: none;\r\n            color: inherit;\r\n            padding: 12px;\r\n            border: 1px solid #f0f0f0;\r\n        }\r\n        \r\n        .category-card:hover {\r\n            transform: translateY(-5px);\r\n            box-shadow: 0 8px 30px rgba(0,0,0,0.15);\r\n        }\r\n        \r\n        .category-icon {\r\n            height: 120px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            font-size: 3rem;\r\n            position: relative;\r\n            overflow: hidden;\r\n            border-radius: 12px;\r\n            background: #f8f9fa;\r\n        }\r\n        \r\n        .category-icon img {\r\n            width: 80%;\r\n            height: 80%;\r\n            object-fit: contain;\r\n            border-radius: 8px;\r\n        }\r\n        \r\n        .category-name {\r\n            padding: 15px 5px 5px 5px;\r\n            text-align: center;\r\n            font-weight: 600;\r\n            font-size: 16px;\r\n            color: #333;\r\n            background: white;\r\n        }\r\n        \r\n        .view-all-container {\r\n            text-align: center;\r\n            margin-top: 40px;\r\n        }\r\n        \r\n        .view-all-btn {\r\n            background: transparent;\r\n            color: #666;\r\n            border: 2px solid #e0e0e0;\r\n            padding: 12px 32px;\r\n            border-radius: 8px;\r\n            font-size: 16px;\r\n            font-weight: 500;\r\n            cursor: pointer;\r\n            transition: all 0.3s ease;\r\n            text-decoration: none;\r\n            display: inline-block;\r\n        }\r\n        \r\n        .view-all-btn:hover {\r\n            border-color: #333;\r\n            color: #333;\r\n        }\r\n        \r\n        .loading {\r\n            text-align: center;\r\n            padding: 40px;\r\n            color: #666;\r\n            font-size: 16px;\r\n        }\r\n        \r\n        .error {\r\n            text-align: center;\r\n            padding: 40px;\r\n            color: #d32f2f;\r\n            background: #ffebee;\r\n            border-radius: 8px;\r\n            margin: 20px 0;\r\n        }\r\n        \r\n        \/* Default category colors *\/\r\n        .category-home-kitchen { background: linear-gradient(135deg, #fbb6ce, #f687b3); }\r\n        .category-groceries { background: linear-gradient(135deg, #9ae6b4, #68d391); }\r\n        .category-travel { background: linear-gradient(135deg, #90cdf4, #63b3ed); }\r\n        .category-fitness { background: linear-gradient(135deg, #feb2b2, #fc8181); }\r\n        .category-healthy-beauty { background: linear-gradient(135deg, #c6f6d5, #9ae6b4); }\r\n        .category-electronics { background: linear-gradient(135deg, #a78bfa, #8b5cf6); }\r\n        .category-baby-care { background: linear-gradient(135deg, #fbb6ce, #f687b3); }\r\n        .category-default { background: linear-gradient(135deg, #e2e8f0, #cbd5e0); }\r\n        \r\n        @keyframes slideIn {\r\n            from { transform: translateX(100%); opacity: 0; }\r\n            to { transform: translateX(0); opacity: 1; }\r\n        }\r\n        \r\n        \/* Responsive design *\/\r\n        @media (max-width: 768px) {\r\n            .category-card {\r\n                min-width: 160px;\r\n            }\r\n            \r\n            .category-header {\r\n                flex-direction: column;\r\n                gap: 20px;\r\n                text-align: center;\r\n            }\r\n            \r\n            .category-title {\r\n                font-size: 24px;\r\n            }\r\n            \r\n            .category-name {\r\n                font-size: 14px;\r\n            }\r\n        }\r\n    <\/style>\r\n\r\n\r\n    <div class=\"shop-by-category\">\r\n        <div class=\"category-header\">\r\n            <h2 class=\"category-title\">\u062a\u0633\u0648\u0642 \u062d\u0633\u0628 \u0627\u0644\u0641\u0626\u0629<\/h2>\r\n            <div class=\"nav-controls\">\r\n                <button class=\"nav-btn\" id=\"nextBtn\" onclick=\"scrollCategories(1)\">\u2192<\/button>\r\n                <button class=\"nav-btn\" id=\"prevBtn\" onclick=\"scrollCategories(-1)\">\u2190<\/button>\r\n \r\n            <\/div>\r\n        <\/div>\r\n        \r\n        <div class=\"categories-container\">\r\n            <div class=\"categories-grid\" id=\"categoriesGrid\">\r\n                <div class=\"loading\">\u062c\u0627\u0631\u064d \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0641\u0626\u0627\u062a...<\/div>\r\n            <\/div>\r\n        <\/div>\r\n        \r\n        <!--<div class=\"view-all-container\">-->\r\n        <!--    <a href=\"https:\/\/test-new.mispay.co\/shop\/#store\" class=\"view-all-btn\" id=\"viewAllBtn\">View all<\/a>-->\r\n        <!--<\/div>-->\r\n    <\/div>\r\n\r\n    <script>\r\n        \/\/ Configuration - Update these values for your setup\r\n        const CATEGORY_API_CONFIG = {\r\n            baseUrl: 'https:\/\/mobile.mispay.co\/api',\r\n            categoriesEndpoint: '\/content-v2\/categories',\r\n            viewAllUrl: '\/shop\/categories' \/\/ Update this to your categories page URL\r\n        };\r\n\r\n        \/\/ State management\r\n        let categoriesData = [];\r\n        let categoryScrollPosition = 0;\r\n        const categoryItemsPerView = 5;\r\n        const categoryCardWidth = 220; \/\/ Card width (200px) + gap (20px)\r\n\r\n        \/\/ Category color mapping\r\n        const categoryColors = {\r\n            'home': 'category-home-kitchen',\r\n            'kitchen': 'category-home-kitchen',\r\n            'groceries': 'category-groceries',\r\n            'food': 'category-groceries',\r\n            'travel': 'category-travel',\r\n            'fitness': 'category-fitness',\r\n            'health': 'category-healthy-beauty',\r\n            'beauty': 'category-healthy-beauty',\r\n            'electronics': 'category-electronics',\r\n            'tech': 'category-electronics',\r\n            'baby': 'category-baby-care',\r\n            'kids': 'category-baby-care'\r\n        };\r\n\r\n        \/\/ Get category color class\r\n        function getCategoryColorClass(categoryName) {\r\n            const name = categoryName.toLowerCase();\r\n            for (const [key, value] of Object.entries(categoryColors)) {\r\n                if (name.includes(key)) {\r\n                    return value;\r\n                }\r\n            }\r\n            return 'category-default';\r\n        }\r\n\r\n        \/\/ Create category card HTML\r\n        function createCategoryCard(category) {\r\n            const colorClass = getCategoryColorClass(category.name);\r\n            return `\r\n                <a href=\"#\" class=\"category-card\" onclick=\"handleCategoryClick('${category.id}', '${category.name}')\">\r\n                    <div class=\"category-icon ${colorClass}\">\r\n                        ${category.image ? \r\n                            `<img decoding=\"async\" src=\"${category.image}\" alt=\"${category.name}\" onerror=\"this.style.display='none'\">` : \r\n                            `<span>${category.name.charAt(0)}<\/span>`\r\n                        }\r\n                    <\/div>\r\n                    <div class=\"category-name\">${category.name}<\/div>\r\n                <\/a>\r\n            `;\r\n        }\r\n\r\n        \/\/ Handle category click\r\n        function handleCategoryClick(categoryId, categoryName) {\r\n            \/\/ Update this function to handle category navigation\r\n            \/\/ You can redirect to a category page or trigger a filter\r\n            console.log('Category clicked:', categoryId, categoryName);\r\n            \r\n            \/\/ Example: Redirect to category page\r\n            \/\/ window.location.href = `\/shop\/category\/${categoryId}`;\r\n            \r\n            \/\/ Or trigger a custom event for other parts of your site\r\n            const event = new CustomEvent('categorySelected', {\r\n                detail: { id: categoryId, name: categoryName }\r\n            });\r\n            window.dispatchEvent(event);\r\n        }\r\n\r\n        \/\/ Scroll categories\r\n        function scrollCategories(direction) {\r\n            const grid = document.getElementById('categoriesGrid');\r\n            const maxScroll = Math.max(0, (categoriesData.length - categoryItemsPerView) * categoryCardWidth);\r\n            \r\n            categoryScrollPosition += direction * categoryCardWidth * 2;\r\n            categoryScrollPosition = Math.max(0, Math.min(categoryScrollPosition, maxScroll));\r\n            \r\n            grid.style.transform = `translateX(-${categoryScrollPosition}px)`;\r\n            \r\n            updateCategoryNavigation();\r\n        }\r\n        \r\n        function updateCategoryNavigation() {\r\n            const maxScroll = Math.max(0, (categoriesData.length - categoryItemsPerView) * categoryCardWidth);\r\n            const prevBtn = document.getElementById('prevBtn');\r\n            const nextBtn = document.getElementById('nextBtn');\r\n            \r\n            if (prevBtn && nextBtn) {\r\n                prevBtn.disabled = categoryScrollPosition === 0;\r\n                nextBtn.disabled = categoryScrollPosition >= maxScroll;\r\n                \r\n                \/\/ Show buttons if there are more than 5 items\r\n                if (categoriesData.length > categoryItemsPerView) {\r\n                    prevBtn.style.display = 'flex';\r\n                    nextBtn.style.display = 'flex';\r\n                } else {\r\n                    prevBtn.style.display = 'none';\r\n                    nextBtn.style.display = 'none';\r\n                }\r\n            }\r\n        }\r\n\r\n        \/\/ Fetch categories from API\r\n        async function fetchCategories() {\r\n            try {\r\n                console.log('Fetching categories from:', `${CATEGORY_API_CONFIG.baseUrl}${CATEGORY_API_CONFIG.categoriesEndpoint}?lang=en`);\r\n                \r\n                const response = await fetch(`${CATEGORY_API_CONFIG.baseUrl}${CATEGORY_API_CONFIG.categoriesEndpoint}?lang=en`, {\r\n                    method: 'GET',\r\n                    headers: {\r\n                        'Accept': 'application\/json',\r\n                        'Content-Type': 'application\/json',\r\n                        'Accept-Language': 'en-US,en;q=0.9'\r\n                    },\r\n                    mode: 'cors',\r\n                    credentials: 'omit'\r\n                });\r\n                \r\n                console.log('Categories response:', response.status);\r\n                \r\n                if (!response.ok) {\r\n                    throw new Error(`HTTP error! status: ${response.status}`);\r\n                }\r\n                \r\n                const data = await response.json();\r\n                console.log('Categories data:', data);\r\n                \r\n                if (data.status === 'success' && data.result) {\r\n                    categoriesData = data.result;\r\n                    renderCategories();\r\n                } else {\r\n                    throw new Error('Invalid API response format');\r\n                }\r\n            } catch (error) {\r\n                console.error('Error fetching categories:', error);\r\n                showError('Failed to load categories. Please try again later.');\r\n            }\r\n        }\r\n\r\n        \/\/ Render categories\r\n        function renderCategories() {\r\n            const grid = document.getElementById('categoriesGrid');\r\n            \r\n            if (categoriesData.length === 0) {\r\n                grid.innerHTML = '<div class=\"loading\">No categories available<\/div>';\r\n                return;\r\n            }\r\n            \r\n            grid.innerHTML = categoriesData.map(category => createCategoryCard(category)).join('');\r\n            \r\n            \/\/ Initialize navigation\r\n            updateCategoryNavigation();\r\n        }\r\n\r\n        \/\/ Show error message\r\n        function showError(message) {\r\n            const grid = document.getElementById('categoriesGrid');\r\n            grid.innerHTML = `<div class=\"error\">${message}<\/div>`;\r\n        }\r\n\r\n        \/\/ Initialize the widget\r\n        function initializeCategoryWidget() {\r\n            \/\/ Set up view all button\r\n            const viewAllBtn = document.getElementById('viewAllBtn');\r\n            viewAllBtn.href = CATEGORY_API_CONFIG.viewAllUrl;\r\n            \r\n            \/\/ Fetch and display categories\r\n            fetchCategories();\r\n            \r\n            \/\/ Add keyboard navigation\r\n            document.addEventListener('keydown', function(e) {\r\n                if (e.key === 'ArrowLeft') {\r\n                    scrollCategories(-1);\r\n                } else if (e.key === 'ArrowRight') {\r\n                    scrollCategories(1);\r\n                }\r\n            });\r\n        }\r\n\r\n        \/\/ Auto-initialize when DOM is ready\r\n        if (document.readyState === 'loading') {\r\n            document.addEventListener('DOMContentLoaded', initializeCategoryWidget);\r\n        } else {\r\n            initializeCategoryWidget();\r\n        }\r\n\r\n        \/\/ Expose functions for external use\r\n        window.shopByCategory = {\r\n            refresh: fetchCategories,\r\n            scrollTo: scrollCategories,\r\n            handleCategoryClick: handleCategoryClick\r\n        };\r\n    <\/script>\r\n\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1894518 e-flex e-con-boxed e-con e-parent\" data-id=\"1894518\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-9f2c2bd e-con-full e-flex e-con e-child\" data-id=\"9f2c2bd\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fcdcf2f elementor-widget elementor-widget-heading\" data-id=\"fcdcf2f\" data-element_type=\"widget\" data-settings=\"{&quot;htmega_fe&quot;:&quot;no&quot;}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">\u0627\u0643\u062a\u0634\u0641 \u062a\u062c\u0631\u0628\u0629 \u062a\u0633\u0648\u0642 \u0623\u0630\u0643\u0649<br> \u0645\u0639 MISpay<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cfc3415 elementor-widget__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"cfc3415\" data-element_type=\"widget\" data-settings=\"{&quot;htmega_fe&quot;:&quot;no&quot;}\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>\u0622\u0644\u0627\u0641 \u0627\u0644\u0645\u062a\u0627\u062c\u0631. \u0645\u0626\u0627\u062a \u0627\u0644\u0639\u0631\u0648\u0636. \u062a\u0637\u0628\u064a\u0642 \u0648\u0627\u062d\u062f \u064a\u0639\u0637\u064a\u0643 \u062a\u062d\u0643\u0645 \u0643\u0627\u0645\u0644 \u0641\u064a \u0645\u0635\u0627\u0631\u064a\u0641\u0643 \u0648\u064a\u0633\u0627\u0639\u062f\u0643 \u062a\u0648\u0641\u0651\u0631 \u0623\u0643\u062b\u0631.  <\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0a14a47 e-con-full e-flex e-con e-child\" data-id=\"0a14a47\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ede4445 e-n-tabs-none elementor-widget elementor-widget-n-tabs\" data-id=\"ede4445\" data-element_type=\"widget\" data-settings=\"{&quot;tabs_justify_horizontal&quot;:&quot;end&quot;,&quot;tabs_justify_horizontal_mobile&quot;:&quot;center&quot;,&quot;horizontal_scroll&quot;:&quot;disable&quot;,&quot;htmega_fe&quot;:&quot;no&quot;}\" data-widget_type=\"nested-tabs.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-n-tabs\" data-widget-number=\"249447493\" aria-label=\"Tabs. Open items with Enter or Space, close with Escape and navigate using the Arrow keys.\">\n\t\t\t<div class=\"e-n-tabs-heading\" role=\"tablist\">\n\t\t\t\t\t<button id=\"first\" data-tab-title-id=\"e-n-tab-title-2494474931\" class=\"e-n-tab-title\" aria-selected=\"true\" data-tab-index=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"e-n-tab-content-2494474931\" style=\"--n-tabs-title-order: 1;\">\n\t\t\t\t\t\t<span class=\"e-n-tab-title-text\">\n\t\t\t\t\u0639\u0628\u0631 \u0627\u0644\u0625\u0646\u062a\u0631\u0646\u062a\t\t\t<\/span>\n\t\t<\/button>\n\t\t\t\t<button id=\"first\" data-tab-title-id=\"e-n-tab-title-2494474932\" class=\"e-n-tab-title\" aria-selected=\"false\" data-tab-index=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"e-n-tab-content-2494474932\" style=\"--n-tabs-title-order: 2;\">\n\t\t\t\t\t\t<span class=\"e-n-tab-title-text\">\n\t\t\t\t\u062f\u0627\u062e\u0644 \u0627\u0644\u0645\u062a\u0627\u062c\u0631\t\t\t<\/span>\n\t\t<\/button>\n\t\t\t\t\t<\/div>\n\t\t\t<div class=\"e-n-tabs-content\">\n\t\t\t\t<div id=\"e-n-tab-content-2494474931\" role=\"tabpanel\" aria-labelledby=\"first\" data-tab-index=\"1\" style=\"--n-tabs-title-order: 1;\" class=\"e-active elementor-element elementor-element-839faec e-con-full e-flex e-con e-child\" data-id=\"839faec\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-ab53778 e-con-full e-flex e-con e-child\" data-id=\"ab53778\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-83e6b75 e-con-full e-flex e-con e-child\" data-id=\"83e6b75\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e7d47b9 elementor-vertical-align-top elementor-widget elementor-widget-image-box\" data-id=\"e7d47b9\" data-element_type=\"widget\" data-settings=\"{&quot;htmega_fe&quot;:&quot;no&quot;}\" data-widget_type=\"image-box.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-image-box-wrapper\"><div class=\"elementor-image-box-content\"><h3 class=\"elementor-image-box-title\">\u0642\u0633\u0637 \u0645\u062f\u0641\u0648\u0639\u0627\u062a\u0643<\/h3><p class=\"elementor-image-box-description\">\u0627\u062e\u062a\u0631 \u0625\u0645 \u0622\u064a \u0625\u0633 \u0628\u0627\u064a \u0641\u064a \u0635\u0641\u062d\u0629 \u0627\u0644\u062f\u0641\u0639 \u0648\u0643\u0645\u0651\u0644 \u0639\u0645\u0644\u064a\u0629 \u0627\u0644\u0634\u0631\u0627\u0621 \u0628\u062b\u0648\u0627\u0646\u064a.<\/p><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1a365ef e-con-full e-flex e-con e-child\" data-id=\"1a365ef\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e3bf7a3 elementor-vertical-align-top elementor-widget elementor-widget-image-box\" data-id=\"e3bf7a3\" data-element_type=\"widget\" data-settings=\"{&quot;htmega_fe&quot;:&quot;no&quot;}\" data-widget_type=\"image-box.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-image-box-wrapper\"><div class=\"elementor-image-box-content\"><h3 class=\"elementor-image-box-title\">\u062e\u064a\u0627\u0631\u0627\u062a \u062a\u0642\u0633\u064a\u0637 \u0645\u062a\u0639\u062f\u062f\u0629<\/h3><p class=\"elementor-image-box-description\">\u0642\u0633\u0651\u0645 \u0645\u0634\u062a\u0631\u064a\u0627\u062a\u0643 \u0639\u0644\u0649 \u0664 \u0623\u0648 \u0665 \u0623\u0648 \u0666 \u0623\u0648 \u062d\u062a\u0649 \u0661\u0662 \u062f\u0641\u0639\u0629 \u062a\u0646\u0627\u0633\u0628\u0643 \u2014 \u0628\u062f\u0648\u0646 \u0641\u0648\u0627\u0626\u062f.<\/p><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-04c0b9f e-con-full e-flex e-con e-child\" data-id=\"04c0b9f\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6b5db91 elementor-vertical-align-top elementor-widget elementor-widget-image-box\" data-id=\"6b5db91\" data-element_type=\"widget\" data-settings=\"{&quot;htmega_fe&quot;:&quot;no&quot;}\" data-widget_type=\"image-box.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-image-box-wrapper\"><div class=\"elementor-image-box-content\"><h3 class=\"elementor-image-box-title\">\u0628\u062f\u0648\u0646 \u0623\u064a \u0632\u064a\u0627\u062f\u0629  <\/h3><p class=\"elementor-image-box-description\">\u0627\u062f\u0641\u0639 \u0641\u0642\u0637 \u0642\u064a\u0645\u0629 \u0645\u0634\u062a\u0631\u064a\u0627\u062a\u0643 \u2014 \u0644\u0627 \u0631\u0633\u0648\u0645 \u0625\u0636\u0627\u0641\u064a\u0629\u060c \u0648\u0644\u0627 \u0634\u0631\u0648\u0637 \u0645\u062e\u0641\u064a\u0629.<\/p><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e543251 e-con-full e-flex e-con e-child\" data-id=\"e543251\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9bdaaa2 elementor-widget elementor-widget-image\" data-id=\"9bdaaa2\" data-element_type=\"widget\" data-settings=\"{&quot;htmega_fe&quot;:&quot;no&quot;}\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"400\" height=\"517\" src=\"https:\/\/www.mispay.co\/wp-content\/uploads\/2025\/08\/How-Does-Mispay-work-online2.png\" class=\"attachment-large size-large wp-image-1679\" alt=\"\" srcset=\"https:\/\/www.mispay.co\/wp-content\/uploads\/2025\/08\/How-Does-Mispay-work-online2.png 400w, https:\/\/www.mispay.co\/wp-content\/uploads\/2025\/08\/How-Does-Mispay-work-online2-232x300.png 232w\" sizes=\"(max-width: 400px) 100vw, 400px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div id=\"e-n-tab-content-2494474932\" role=\"tabpanel\" aria-labelledby=\"first\" data-tab-index=\"2\" style=\"--n-tabs-title-order: 2;\" class=\" elementor-element elementor-element-ecd1932 e-con-full e-flex e-con e-child\" data-id=\"ecd1932\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-18440ed e-con-full e-flex e-con e-child\" data-id=\"18440ed\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-904664c elementor-widget elementor-widget-image\" data-id=\"904664c\" data-element_type=\"widget\" data-settings=\"{&quot;htmega_fe&quot;:&quot;no&quot;}\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"800\" height=\"800\" src=\"https:\/\/www.mispay.co\/wp-content\/uploads\/2025\/10\/ss-03-1024x1024.png\" class=\"attachment-large size-large wp-image-4131\" alt=\"\" srcset=\"https:\/\/www.mispay.co\/wp-content\/uploads\/2025\/10\/ss-03-1024x1024.png 1024w, https:\/\/www.mispay.co\/wp-content\/uploads\/2025\/10\/ss-03-300x300.png 300w, https:\/\/www.mispay.co\/wp-content\/uploads\/2025\/10\/ss-03-150x150.png 150w, https:\/\/www.mispay.co\/wp-content\/uploads\/2025\/10\/ss-03-768x768.png 768w, https:\/\/www.mispay.co\/wp-content\/uploads\/2025\/10\/ss-03-1536x1536.png 1536w, https:\/\/www.mispay.co\/wp-content\/uploads\/2025\/10\/ss-03-2048x2048.png 2048w, https:\/\/www.mispay.co\/wp-content\/uploads\/2025\/10\/ss-03-650x650.png 650w, https:\/\/www.mispay.co\/wp-content\/uploads\/2025\/10\/ss-03-1300x1300.png 1300w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1248613 e-con-full e-flex e-con e-child\" data-id=\"1248613\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-02897b0 e-con-full e-flex e-con e-child\" data-id=\"02897b0\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-40a8d8a elementor-vertical-align-top elementor-widget elementor-widget-image-box\" data-id=\"40a8d8a\" data-element_type=\"widget\" data-settings=\"{&quot;htmega_fe&quot;:&quot;no&quot;}\" data-widget_type=\"image-box.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-image-box-wrapper\"><div class=\"elementor-image-box-content\"><h3 class=\"elementor-image-box-title\">\u0627\u0639\u062b\u0631 \u0639\u0644\u0649 \u0627\u0644\u0639\u0644\u0627\u0645\u0627\u062a \u0627\u0644\u062a\u062c\u0627\u0631\u064a\u0629 \u0627\u0644\u0645\u0641\u0636\u0644\u0629 \u0644\u062f\u064a\u0643<\/h3><p class=\"elementor-image-box-description\">\u062a\u0633\u0648\u0642 \u0645\u0646 \u0627\u0644\u0645\u0641\u0636\u0644\u0627\u062a \u0644\u062f\u064a\u0643 \u0623\u0648 \u0627\u0643\u062a\u0634\u0641 \u0639\u0644\u0627\u0645\u0627\u062a \u062a\u062c\u0627\u0631\u064a\u0629 \u062c\u062f\u064a\u062f\u0629 \u0641\u064a \u062a\u0637\u0628\u064a\u0642 \u0645\u0633\u0628\u0627\u064a \u062a\u062a\u064a\u062d \u0644\u0643 \u0627\u0644\u0627\u0633\u062a\u0641\u0627\u062f\u0629 \u0627\u0644\u0642\u0635\u0648\u0649 \u0645\u0646 \u0627\u0644\u062a\u0633\u0648\u0642.<\/p><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3b1184f e-con-full e-flex e-con e-child\" data-id=\"3b1184f\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bf01bd8 elementor-vertical-align-top elementor-widget elementor-widget-image-box\" data-id=\"bf01bd8\" data-element_type=\"widget\" data-settings=\"{&quot;htmega_fe&quot;:&quot;no&quot;}\" data-widget_type=\"image-box.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-image-box-wrapper\"><div class=\"elementor-image-box-content\"><h3 class=\"elementor-image-box-title\">\u0627\u062e\u062a\u0631 \u0645\u0633\u0628\u0627\u064a \u0639\u0646\u062f \u0627\u0644\u062f\u0641\u0639<\/h3><p class=\"elementor-image-box-description\">\u0623\u0636\u0641 \u0645\u0627 \u062a\u0631\u064a\u062f\u0647 \u0625\u0644\u0649 \u0633\u0644\u0629 \u0627\u0644\u062a\u0633\u0648\u0642 \u0648\u0627\u062e\u062a\u0631 \u0645\u0633\u0628\u0627\u064a \u0639\u0646\u062f \u0627\u0644\u062f\u0641\u0639.\u2028\u0633\u062c\u0644\u060c \u0627\u0631\u0628\u0637 \u0623\u064a \u0628\u0637\u0627\u0642\u0629 \u0648\u0627\u062d\u0635\u0644 \u0639\u0644\u0649 \u0627\u0644\u0645\u0648\u0627\u0641\u0642\u0629 \u0641\u0648\u0631\u064b\u0627.<\/p><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-420fc18 e-con-full e-flex e-con e-child\" data-id=\"420fc18\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9997b8c elementor-vertical-align-top elementor-widget elementor-widget-image-box\" data-id=\"9997b8c\" data-element_type=\"widget\" data-settings=\"{&quot;htmega_fe&quot;:&quot;no&quot;}\" data-widget_type=\"image-box.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-image-box-wrapper\"><div class=\"elementor-image-box-content\"><h3 class=\"elementor-image-box-title\">\u0627\u062f\u0641\u0639 \u0639\u0644\u0649 \u0623\u0642\u0633\u0627\u0637<\/h3><p class=\"elementor-image-box-description\">\u0627\u062e\u062a\u0631 4 \u062f\u0641\u0639\u0627\u062a \u0628\u062f\u0648\u0646 \u0641\u0648\u0627\u0626\u062f \u0623\u0648 \u062d\u062a\u0649 12 \u062f\u0641\u0639\u0629 \u0634\u0647\u0631\u064a\u0629. \u0642\u0645 \u0628\u062f\u0641\u0639 \u0627\u0644\u062f\u0641\u0639\u0629 \u0627\u0644\u0623\u0648\u0644\u0649 \u0648\u0633\u0646\u0630\u0643\u0631\u0643 \u0628\u0627\u0644\u0628\u0627\u0642\u064a. <\/p><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-131de98 e-flex e-con-boxed e-con e-parent\" data-id=\"131de98\" data-element_type=\"container\" id=\"store\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a4e0f9b elementor-widget elementor-widget-html\" data-id=\"a4e0f9b\" data-element_type=\"widget\" data-settings=\"{&quot;htmega_fe&quot;:&quot;no&quot;}\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>All Stores<\/title>\r\n    <style>\r\n        .mispay-stores * {\r\n            margin: 0;\r\n            padding: 0;\r\n            box-sizing: border-box;\r\n        }\r\n\r\n        .mispay-stores-container {\r\n            max-width: 1200px;\r\n            margin: 0 auto;\r\n            padding: 20px;\r\n            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\r\n        }\r\n\r\n        .mispay-page-header {\r\n            margin-bottom: 30px;\r\n        }\r\n\r\n        .mispay-page-title {\r\n            font-size: 36px;\r\n            line-height: 44px;\r\n            font-weight: 700;\r\n            color: #181D27;\r\n            margin-bottom: 48px;\r\n        }\r\n\r\n        .mispay-filters-section {\r\n            display: flex;\r\n            flex-wrap: wrap;\r\n            gap: 15px;\r\n            margin-bottom: 48px;\r\n            align-items: center;\r\n        }\r\n\r\n        .mispay-search-container {\r\n            position: relative;\r\n            flex: 1;\r\n            max-width: 384px;\r\n        }\r\n\r\n        .mispay-search-input {\r\n            width: 100%;\r\n            padding: 12px 12px 12px 45px;\r\n            border: 1px solid #000000;\r\n            border-radius: 8px;\r\n            font-size: 16px;\r\n            line-height: 24px;\r\n            transition: border-color 0.3s ease;\r\n        }\r\n\r\n        .mispay-search-input:focus {\r\n            outline: none;\r\n            border-color: #000000;\r\n        }\r\n\r\n        .mispay-search-icon {\r\n            position: absolute;\r\n            left: 15px;\r\n            top: 50%;\r\n            transform: translateY(-50%);\r\n            color: #a0aec0;\r\n            font-size: 18px;\r\n        }\r\n\r\n        .mispay-filter-dropdown {\r\n            position: relative;\r\n            display: inline-block;\r\n          \r\n            background-color: white;\r\n        }\r\n\r\n        .mispay-dropdown-button {\r\n            background: white;\r\n            border: 1px solid #e2e8f0;\r\n            width: 80vw;\r\n           \r\n            padding: 10px 10px 10px 10px;\r\n            border-radius: 8px;\r\n            cursor: pointer;\r\n            font-size: 16px;\r\n            display: flex;\r\n            gap: 16px;\r\n            transition: all 0.3s ease;\r\n            max-width: 200px;\r\n            color : #181D27;\r\n        }\r\n\r\n        .mispay-dropdown-button:hover {\r\n            border-color: #EEE7FA;\r\n            background-color: #EEE7FA;\r\n            color: #000000;\r\n        }\r\n\r\n        .mispay-dropdown-button.mispay-active {\r\n            border-color: #EEE7FA;\r\n        }\r\n\r\n        .mispay-dropdown-arrow {\r\n            margin-left: auto;\r\n            transition: transform 0.3s ease;\r\n        }\r\n\r\n        .mispay-dropdown-button.mispay-active .mispay-dropdown-arrow {\r\n            transform: rotate(180deg);\r\n        }\r\n\r\n        .mispay-dropdown-menu {\r\n            position: absolute;\r\n            top: 100%;\r\n            left: 0;\r\n            right: 0;\r\n            background: white;\r\n            border: 2px solid #e2e8f0;\r\n            border-radius: 8px;\r\n            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\r\n            z-index: 1000;\r\n            max-height: 200px;\r\n            overflow-y: auto;\r\n            display: none;\r\n        }\r\n\r\n        .mispay-dropdown-menu.mispay-show {\r\n            display: block;\r\n        }\r\n\r\n        .mispay-dropdown-item {\r\n            padding: 12px 15px;\r\n            cursor: pointer;\r\n            transition: background-color 0.2s ease;\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 8px;\r\n        }\r\n\r\n        .mispay-dropdown-item:hover {\r\n            background-color: #f7fafc;\r\n        }\r\n\r\n        .mispay-dropdown-item.mispay-selected {\r\n            background-color: #ebf8ff;\r\n            color: #2b6cb0;\r\n        }\r\n\r\n        .mispay-filter-controls {\r\n            display: flex;\r\n            gap: 15px;\r\n            align-items: center;\r\n        }\r\n\r\n        .mispay-deals-toggle {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 8px;\r\n            cursor: pointer;\r\n        }\r\n\r\n        .mispay-deals-checkbox {\r\n            width: 18px;\r\n            height: 18px;\r\n            accent-color: #4299e1;\r\n        }\r\n\r\n        .mispay-stores-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\r\n            gap: 32px;\r\n            margin-bottom: 20px;}\r\n\r\n        .mispay-store-card {\r\n            background: #f8f8f8;\r\n            border-radius: 16px;\r\n            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\r\n            padding: 20px;\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 16px;\r\n            transition: all 0.3s ease;\r\n            cursor: pointer;\r\n            border: 2px solid transparent;\r\n\r\n            overflow: hidden;\r\n            transition: all 0.3s ease;\r\n            cursor: pointer;\r\n            text-decoration: none;\r\n            color: inherit;\r\n        }\r\n\r\n        .mispay-store-card:hover {\r\n            transform: translateY(-4px);\r\n            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);\r\n        }\r\n\r\n        .mispay-store-logo {\r\n             width: 60px;\r\n            height: 60px;\r\n            border-radius: 12px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            font-weight: bold;\r\n            font-size: 1.2rem;\r\n            color: white;\r\n            flex-shrink: 0;\r\n            overflow: hidden;\r\n            \/*width: 100%;*\/\r\n            \/*height: 80px;*\/\r\n            \/*display: flex;*\/\r\n            \/*align-items: center;*\/\r\n            \/*justify-content: center;*\/\r\n            \/*background: #f7fafc;*\/\r\n            \/*border-bottom: 1px solid #e2e8f0;*\/\r\n        }\r\n\r\n        .mispay-store-logo img {\r\n            width: 100%;\r\n            height: 100%;\r\n            object-fit: cover;\r\n            border-radius: 8px;\r\n\r\n            \/*max-width: 80px;*\/\r\n            \/*max-height: 60px;*\/\r\n            \/*object-fit: contain;*\/\r\n        }\r\n\r\n        .mispay-store-logo-placeholder {\r\n            width: 60px;\r\n            height: 60px;\r\n            border-radius: 50%;\r\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            color: white;\r\n            font-weight: bold;\r\n            font-size: 20px;\r\n        }\r\n\r\n        .mispay-store-info {\r\n            flex: 1;\r\n            \r\n            \/*padding: 20px;*\/\r\n        }\r\n\r\n        .mispay-store-name {\r\n            font-size: 1.2rem;\r\n            font-weight: 600;\r\n            color: #2d3748;\r\n            margin-bottom: 8px;\r\n        }\r\n\r\n        .mispay-store-type {\r\n            font-size: 0.9rem;\r\n            color: #718096;\r\n            margin-bottom: 12px;\r\n        }\r\n\r\n        .mispay-store-badges {\r\n            display: flex;\r\n            gap: 8px;\r\n            flex-wrap: wrap;\r\n        }\r\n\r\n        .mispay-badge {\r\n            padding: 4px 8px;\r\n            border-radius: 12px;\r\n            font-size: 0.8rem;\r\n            font-weight: 500;\r\n        }\r\n\r\n        .mispay-badge-promotion {\r\n            background: #fed7d7;\r\n            color: #c53030;\r\n        }\r\n\r\n        .mispay-badge-discount {\r\n            background: #c6f6d5;\r\n            color: #25855a;\r\n        }\r\n\r\n        .mispay-loading {\r\n            text-align: center;\r\n            padding: 60px 20px;\r\n            color: #718096;\r\n            font-size: 1.1rem;\r\n        }\r\n\r\n        .mispay-error {\r\n            text-align: center;\r\n            padding: 40px 20px;\r\n            color: #e53e3e;\r\n            background: #fed7d7;\r\n            border-radius: 8px;\r\n            margin: 20px 0;\r\n        }\r\n\r\n        .mispay-no-results {\r\n            text-align: center;\r\n            padding: 60px 20px;\r\n            color: #718096;\r\n        }\r\n\r\n        .mispay-pagination {\r\n            display: flex;\r\n            \r\n            justify-content: center;\r\n            align-items: center;\r\n            gap: 10px;\r\n            margin-top: 40px;\r\n        }\r\n\r\n        .mispay-pagination-btn {\r\n            padding: 8px 16px;\r\n            width: 100px;\r\n            border: 2px solid #e2e8f0;\r\n            background: white;\r\n            border-radius: 6px;\r\n            cursor: pointer;\r\n            font-size: 14px;\r\n            transition: all 0.3s ease;\r\n            text-decoration: none;\r\n            color: #4a5568;\r\n        }\r\n\r\n        .mispay-pagination-btn:hover {\r\n            border-color: #4299e1;\r\n            color: #2b6cb0;\r\n        }\r\n\r\n        .mispay-pagination-btn.mispay-active {\r\n            background: #4299e1;\r\n            color: white;\r\n            border-color: #4299e1;\r\n        }\r\n\r\n        .mispay-pagination-btn:disabled {\r\n            opacity: 0.5;\r\n            cursor: not-allowed;\r\n        }\r\n\r\n        .mispay-results-count {\r\n            text-align: center;\r\n            color: #718096;\r\n            margin-bottom: 20px;\r\n        }\r\n\r\n        \/* Responsive design *\/\r\n        @media (max-width: 768px) {\r\n            .mispay-filters-section {\r\n                flex-direction: column;\r\n                align-items: stretch;\r\n            }\r\n\r\n            .mispay-search-container {\r\n                min-width: auto;\r\n            }\r\n\r\n            .mispay-filter-controls {\r\n                flex-wrap: wrap;\r\n            }\r\n\r\n            .mispay-page-title {\r\n                font-size: 2rem;\r\n            }\r\n\r\n            .mispay-stores-grid {\r\n                grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\r\n                gap: 15px;\r\n            }\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n    <div class=\"mispay-stores\">\r\n        <div class=\"mispay-stores-container\">\r\n            <div class=\"mispay-page-header\">\r\n                <h1 class=\"mispay-page-title\">\u062c\u0645\u064a\u0639 \u0627\u0644\u0645\u062a\u0627\u062c\u0631<\/h1>\r\n            <\/div>\r\n\r\n            <div class=\"mispay-filters-section\">\r\n                <div class=\"mispay-search-container\">\r\n                    <input type=\"text\" class=\"mispay-search-input\" placeholder=\"\u0645\u062a\u0627\u062c\u0631 \u0627\u0644\u0628\u062d\u062b...\" id=\"mispaySearchInput\">\r\n                    <span class=\"mispay-search-icon\">\ud83d\udd0d<\/span>\r\n                <\/div>\r\n\r\n                <div class=\"mispay-filter-controls\">\r\n                    <div class=\"mispay-filter-dropdown\">\r\n                        <button class=\"mispay-dropdown-button\" id=\"mispayCategoryFilter\">\r\n                            <span>\u062c\u0645\u064a\u0639 \u0627\u0644\u0641\u0626\u0627\u062a<\/span>\r\n                            <span class=\"mispay-dropdown-arrow\">\u25bc<\/span>\r\n                        <\/button>\r\n                        <div class=\"mispay-dropdown-menu\" id=\"mispayCategoryMenu\">\r\n                            <div class=\"mispay-dropdown-item mispay-selected\" data-value=\"\">\r\n                                <span>\u2713<\/span>\r\n                                <span>All categories<\/span>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"mispay-filter-dropdown\">\r\n                        <button class=\"mispay-dropdown-button\" id=\"mispayTypeFilter\">\r\n                            <span>\u062c\u0645\u064a\u0639 \u0627\u0644\u0623\u0646\u0648\u0627\u0639<\/span>\r\n                            <span class=\"mispay-dropdown-arrow\">\u25bc<\/span>\r\n                        <\/button>\r\n                        <div class=\"mispay-dropdown-menu\" id=\"mispayTypeMenu\">\r\n                            <div class=\"mispay-dropdown-item mispay-selected\" data-value=\"\">\r\n                                <span>\u2713<\/span>\r\n                                <span>All types<\/span>\r\n                            <\/div>\r\n                            <div class=\"mispay-dropdown-item\" data-value=\"online\">\r\n                                <span><\/span>\r\n                                <span>Online only<\/span>\r\n                            <\/div>\r\n                            <div class=\"mispay-dropdown-item\" data-value=\"offline\">\r\n                                <span><\/span>\r\n                                <span>In-store only<\/span>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"mispay-filter-dropdown\">\r\n                        <button class=\"mispay-dropdown-button\" id=\"mispaySortFilter\">\r\n                            <span>\u0645\u064f\u0633\u062a\u064e\u062d\u0633\u064e\u0646<\/span>\r\n                            <span class=\"mispay-dropdown-arrow\">\u25bc<\/span>\r\n                        <\/button>\r\n                        <div class=\"mispay-dropdown-menu\" id=\"mispaySortMenu\">\r\n                            <div class=\"mispay-dropdown-item mispay-selected\" data-value=\"recommended\">\r\n                                <span>\u2713<\/span>\r\n                                <span>Recommended<\/span>\r\n                            <\/div>\r\n                            <div class=\"mispay-dropdown-item\" data-value=\"alphabetical\">\r\n                                <span><\/span>\r\n                                <span>Alphabetical<\/span>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <label class=\"mispay-deals-toggle\">\r\n                        <input type=\"checkbox\" class=\"mispay-deals-checkbox\" id=\"mispayDealsOnly\">\r\n                        <span>\u0627\u0644\u0635\u0641\u0642\u0627\u062a \u0641\u0642\u0637<\/span>\r\n                    <\/label>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"mispay-results-count\" id=\"mispayResultsCount\"><\/div>\r\n\r\n            <div class=\"mispay-stores-grid\" id=\"mispayStoresGrid\">\r\n                <div class=\"mispay-loading\">\u062c\u0627\u0631\u064d \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0645\u062a\u0627\u062c\u0631...<\/div>\r\n            <\/div>\r\n\r\n            <div class=\"mispay-pagination\" id=\"mispayPagination\"><\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n        \/\/ Wrap everything in IIFE to avoid global namespace pollution\r\n        (function() {\r\n            'use strict';\r\n\r\n            \/\/ Configuration\r\n            const MISPAY_API_CONFIG = {\r\n                baseUrl: 'https:\/\/mobile.mispay.co\/api',\r\n                merchantsEndpoint: '\/content-v2\/merchants',\r\n                categoriesEndpoint: '\/content-v2\/categories',\r\n                storesPerPage: 12\r\n            };\r\n\r\n            \/\/ State management\r\n            let mispayAllStores = [];\r\n            let mispayFilteredStores = [];\r\n            let mispayCategories = [];\r\n            let mispayCurrentPage = 1;\r\n            let mispayFilters = {\r\n                search: '',\r\n                category: '',\r\n                type: '',\r\n                sort: 'recommended',\r\n                dealsOnly: false\r\n            };\r\n\r\n            \/\/ Initialize the application\r\n            async function mispayInitializeApp() {\r\n                await Promise.all([\r\n                    mispayFetchCategories(),\r\n                    mispayFetchMerchants()\r\n                ]);\r\n                \r\n                mispaySetupEventListeners();\r\n                mispayRenderStores();\r\n            }\r\n\r\n            \/\/ Fetch categories for filter dropdown\r\n            async function mispayFetchCategories() {\r\n                try {\r\n                    const response = await fetch(`${MISPAY_API_CONFIG.baseUrl}${MISPAY_API_CONFIG.categoriesEndpoint}`);\r\n                    const data = await response.json();\r\n                    \r\n                    if (data.status === 'success' && data.result) {\r\n                        mispayCategories = data.result;\r\n                        mispayPopulateCategoryFilter();\r\n                    }\r\n                } catch (error) {\r\n                    console.error('Error fetching categories:', error);\r\n                }\r\n            }\r\n\r\n            \/\/ Fetch merchants\r\n            async function mispayFetchMerchants() {\r\n                try {\r\n                    const response = await fetch(`${MISPAY_API_CONFIG.baseUrl}${MISPAY_API_CONFIG.merchantsEndpoint}`);\r\n                    const data = await response.json();\r\n                    \r\n                    if (data.status === 'success' && data.result) {\r\n                        mispayAllStores = data.result;\r\n                        mispayApplyFilters();\r\n                    } else {\r\n                        throw new Error('Invalid API response');\r\n                    }\r\n                } catch (error) {\r\n                    console.error('Error fetching merchants:', error);\r\n                    mispayShowError('Failed to load stores. Please try again later.');\r\n                }\r\n            }\r\n\r\n            \/\/ Populate category filter dropdown\r\n            function mispayPopulateCategoryFilter() {\r\n                const categoryMenu = document.getElementById('mispayCategoryMenu');\r\n                \r\n                mispayCategories.forEach(category => {\r\n                    const item = document.createElement('div');\r\n                    item.className = 'mispay-dropdown-item';\r\n                    item.setAttribute('data-value', category.id);\r\n                    item.innerHTML = `\r\n                        <span><\/span>\r\n                        <span>${category.name}<\/span>\r\n                    `;\r\n                    categoryMenu.appendChild(item);\r\n                });\r\n            }\r\n\r\n            \/\/ Setup event listeners\r\n            function mispaySetupEventListeners() {\r\n                \/\/ Search input\r\n                const searchInput = document.getElementById('mispaySearchInput');\r\n                let searchTimeout;\r\n                searchInput.addEventListener('input', (e) => {\r\n                    clearTimeout(searchTimeout);\r\n                    searchTimeout = setTimeout(() => {\r\n                        mispayFilters.search = e.target.value.toLowerCase();\r\n                        mispayCurrentPage = 1;\r\n                        mispayApplyFilters();\r\n                    }, 300);\r\n                });\r\n\r\n                \/\/ Dropdown toggles\r\n                mispaySetupDropdown('mispayCategoryFilter', 'mispayCategoryMenu');\r\n                mispaySetupDropdown('mispayTypeFilter', 'mispayTypeMenu');\r\n                mispaySetupDropdown('mispaySortFilter', 'mispaySortMenu');\r\n\r\n                \/\/ Deals only checkbox\r\n                document.getElementById('mispayDealsOnly').addEventListener('change', (e) => {\r\n                    mispayFilters.dealsOnly = e.target.checked;\r\n                    mispayCurrentPage = 1;\r\n                    mispayApplyFilters();\r\n                });\r\n\r\n                \/\/ Close dropdowns when clicking outside\r\n                document.addEventListener('click', mispayCloseAllDropdowns);\r\n            }\r\n\r\n            \/\/ Setup dropdown functionality\r\n            function mispaySetupDropdown(buttonId, menuId) {\r\n                const button = document.getElementById(buttonId);\r\n                const menu = document.getElementById(menuId);\r\n                \r\n                button.addEventListener('click', (e) => {\r\n                    e.stopPropagation();\r\n                    mispayCloseAllDropdowns();\r\n                    menu.classList.toggle('mispay-show');\r\n                    button.classList.toggle('mispay-active');\r\n                });\r\n\r\n                menu.addEventListener('click', (e) => {\r\n                    e.stopPropagation();\r\n                    const item = e.target.closest('.mispay-dropdown-item');\r\n                    if (!item) return;\r\n\r\n                    \/\/ Update selection\r\n                    menu.querySelectorAll('.mispay-dropdown-item').forEach(i => {\r\n                        i.classList.remove('mispay-selected');\r\n                        i.querySelector('span').textContent = '';\r\n                    });\r\n                    \r\n                    item.classList.add('mispay-selected');\r\n                    item.querySelector('span').textContent = '\u2713';\r\n                    \r\n                    \/\/ Update button text and filter\r\n                    const text = item.querySelector('span:last-child').textContent;\r\n                    button.querySelector('span').textContent = text;\r\n                    \r\n                    const value = item.getAttribute('data-value');\r\n                    \r\n                    if (buttonId === 'mispayCategoryFilter') {\r\n                        mispayFilters.category = value;\r\n                    } else if (buttonId === 'mispayTypeFilter') {\r\n                        mispayFilters.type = value;\r\n                    } else if (buttonId === 'mispaySortFilter') {\r\n                        mispayFilters.sort = value;\r\n                    }\r\n                    \r\n                    mispayCurrentPage = 1;\r\n                    mispayApplyFilters();\r\n                    \r\n                    \/\/ Close dropdown\r\n                    menu.classList.remove('mispay-show');\r\n                    button.classList.remove('mispay-active');\r\n                });\r\n            }\r\n\r\n            \/\/ Close all dropdowns when clicking outside\r\n            function mispayCloseAllDropdowns() {\r\n                document.querySelectorAll('.mispay-dropdown-menu').forEach(menu => {\r\n                    menu.classList.remove('mispay-show');\r\n                });\r\n                document.querySelectorAll('.mispay-dropdown-button').forEach(button => {\r\n                    button.classList.remove('mispay-active');\r\n                });\r\n            }\r\n\r\n            \/\/ Apply filters to stores\r\n            function mispayApplyFilters() {\r\n                mispayFilteredStores = mispayAllStores.filter(store => {\r\n                    \/\/ Search filter\r\n                    if (mispayFilters.search && !store.name.toLowerCase().includes(mispayFilters.search)) {\r\n                        return false;\r\n                    }\r\n                    \r\n                    \/\/ Category filter\r\n                    if (mispayFilters.category && !store.categories.some(cat => cat.id === mispayFilters.category)) {\r\n                        return false;\r\n                    }\r\n                    \r\n                    \/\/ Type filter\r\n                    if (mispayFilters.type === 'online' && !store.online) {\r\n                        return false;\r\n                    }\r\n                    if (mispayFilters.type === 'offline' && !store.offline) {\r\n                        return false;\r\n                    }\r\n                    \r\n                    \/\/ Deals only filter\r\n                    if (mispayFilters.dealsOnly && (!store.discountMessage && !store.promotionMessage)) {\r\n                        return false;\r\n                    }\r\n                    \r\n                    return true;\r\n                });\r\n\r\n                \/\/ Apply sorting\r\n                if (mispayFilters.sort === 'alphabetical') {\r\n                    mispayFilteredStores.sort((a, b) => a.name.localeCompare(b.name));\r\n                }\r\n                \r\n                mispayRenderStores();\r\n                mispayRenderPagination();\r\n            }\r\n\r\n            \/\/ Render stores\r\n            function mispayRenderStores() {\r\n                const grid = document.getElementById('mispayStoresGrid');\r\n                const resultsCount = document.getElementById('mispayResultsCount');\r\n                \r\n                if (mispayFilteredStores.length === 0) {\r\n                    grid.innerHTML = '<div class=\"mispay-no-results\">No stores found matching your criteria.<\/div>';\r\n                    resultsCount.textContent = '';\r\n                    return;\r\n                }\r\n\r\n                const startIndex = (mispayCurrentPage - 1) * MISPAY_API_CONFIG.storesPerPage;\r\n                const endIndex = startIndex + MISPAY_API_CONFIG.storesPerPage;\r\n                const paginatedStores = mispayFilteredStores.slice(startIndex, endIndex);\r\n                \r\n                resultsCount.textContent = `Showing ${startIndex + 1}-${Math.min(endIndex, mispayFilteredStores.length)} of ${mispayFilteredStores.length} stores`;\r\n                \r\n                grid.innerHTML = paginatedStores.map(store => mispayCreateStoreCard(store)).join('');\r\n            }\r\n\r\n            \/\/ Create store card HTML\r\n            function mispayCreateStoreCard(store) {\r\n                const storeType = [];\r\n                if (store.online) storeType.push('Online');\r\n                if (store.offline) storeType.push('In-store');\r\n                \r\n                return `\r\n                    <div class=\"mispay-store-card\" onclick=\"mispayHandleStoreClick('${store.id}', '${store.name}', '${store.link || ''}')\">\r\n                        <div class=\"mispay-store-logo\">\r\n                            ${store.logo ? \r\n                                `<img decoding=\"async\" src=\"${store.logo}\" alt=\"${store.name}\" onerror=\"this.style.display='none'; this.nextElementSibling.style.display='flex';\">\r\n                                 <div class=\"mispay-store-logo-placeholder\" style=\"display: none;\">${store.name.charAt(0)}<\/div>` :\r\n                                `<div class=\"mispay-store-logo-placeholder\">${store.name.charAt(0)}<\/div>`\r\n                            }\r\n                        <\/div>\r\n                        <div class=\"mispay-store-info\">\r\n                            <div class=\"mispay-store-name\">${store.name}<\/div>\r\n                            <div class=\"mispay-store-type\">${storeType.join(' & ')}<\/div>\r\n                            <div class=\"mispay-store-badges\">\r\n                                ${store.promotionMessage ? `<span class=\"mispay-badge mispay-badge-promotion\">${store.promotionMessage}<\/span>` : ''}\r\n                                ${store.discountMessage ? `<span class=\"mispay-badge mispay-badge-discount\">${store.discountMessage}<\/span>` : ''}\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                `;\r\n            }\r\n\r\n            \/\/ Handle store click\r\n            window.mispayHandleStoreClick = function(storeId, storeName, storeLink) {\r\n                console.log('Store clicked:', storeId, storeName, storeLink);\r\n                \r\n                \/\/ Example actions - uncomment what you need:\r\n                \r\n                \/\/ Option 1: Open store link in new tab\r\n                \/\/ if (storeLink) {\r\n                \/\/     window.open(storeLink, '_blank');\r\n                \/\/ }\r\n                \r\n                \/\/ Option 2: Redirect to store page\r\n                \/\/ window.location.href = `\/store\/${storeId}`;\r\n                \r\n                \/\/ Option 3: Trigger custom event\r\n                const event = new CustomEvent('mispayStoreSelected', {\r\n                    detail: { id: storeId, name: storeName, link: storeLink }\r\n                });\r\n                window.dispatchEvent(event);\r\n            };\r\n\r\n            \/\/ Render pagination\r\n            function mispayRenderPagination() {\r\n                const totalPages = Math.ceil(mispayFilteredStores.length \/ MISPAY_API_CONFIG.storesPerPage);\r\n                const pagination = document.getElementById('mispayPagination');\r\n                \r\n                if (totalPages <= 1) {\r\n                    pagination.innerHTML = '';\r\n                    return;\r\n                }\r\n                \r\n                let paginationHTML = '';\r\n                \r\n                \/\/ Previous button\r\n                if (mispayCurrentPage > 1) {\r\n                    paginationHTML += `<button class=\"mispay-pagination-btn\" onclick=\"mispayChangePage(${mispayCurrentPage - 1})\">\u2190 \u0633\u0627\u0628\u0642<\/button>`;\r\n                }\r\n                \r\n                \/\/ Page numbers\r\n                const startPage = Math.max(1, mispayCurrentPage - 2);\r\n                const endPage = Math.min(totalPages, mispayCurrentPage + 2);\r\n                \r\n                if (startPage > 1) {\r\n                    paginationHTML += `<button class=\"mispay-pagination-btn\" onclick=\"mispayChangePage(1)\">1<\/button>`;\r\n                    if (startPage > 2) {\r\n                        paginationHTML += `<span>...<\/span>`;\r\n                    }\r\n                }\r\n                \r\n                for (let i = startPage; i <= endPage; i++) {\r\n                    paginationHTML += `<button class=\"mispay-pagination-btn ${i === mispayCurrentPage ? 'mispay-active' : ''}\" onclick=\"mispayChangePage(${i})\">${i}<\/button>`;\r\n                }\r\n                \r\n                if (endPage < totalPages) {\r\n                    if (endPage < totalPages - 1) {\r\n                        paginationHTML += `<span>...<\/span>`;\r\n                    }\r\n                    paginationHTML += `<button class=\"mispay-pagination-btn\" onclick=\"mispayChangePage(${totalPages})\">${totalPages}<\/button>`;\r\n                }\r\n                \r\n                \/\/ Next button\r\n                if (mispayCurrentPage < totalPages) {\r\n                    paginationHTML += `<button class=\"mispay-pagination-btn\" onclick=\"mispayChangePage(${mispayCurrentPage + 1})\">\u0627\u0644\u062a\u0627\u0644\u064a \u2192<\/button>`;\r\n                }\r\n                \r\n                pagination.innerHTML = paginationHTML;\r\n            }\r\n\r\n            \/\/ Change page\r\n            window.mispayChangePage = function(page) {\r\n                mispayCurrentPage = page;\r\n                mispayRenderStores();\r\n                mispayRenderPagination();\r\n                \r\n                \/\/ Scroll to top\r\n                const container = document.querySelector('.mispay-stores-container');\r\n                if (container) {\r\n                    container.scrollIntoView({ behavior: 'smooth' });\r\n                }\r\n            };\r\n\r\n            \/\/ Show error message\r\n            function mispayShowError(message) {\r\n                const grid = document.getElementById('mispayStoresGrid');\r\n                grid.innerHTML = `<div class=\"mispay-error\">${message}<\/div>`;\r\n            }\r\n\r\n            \/\/ Expose public API\r\n            window.MispayStores = {\r\n                refresh: mispayFetchMerchants,\r\n                changePage: window.mispayChangePage,\r\n                handleStoreClick: window.mispayHandleStoreClick\r\n            };\r\n\r\n            \/\/ Initialize when DOM is ready\r\n            if (document.readyState === 'loading') {\r\n                document.addEventListener('DOMContentLoaded', mispayInitializeApp);\r\n            } else {\r\n                mispayInitializeApp();\r\n            }\r\n\r\n        })();\r\n    <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-842a46a e-flex e-con-boxed e-con e-parent\" data-id=\"842a46a\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-c31bc15 e-con-full e-flex e-con e-child\" data-id=\"c31bc15\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a79ed3c elementor-widget elementor-widget-heading\" data-id=\"a79ed3c\" data-element_type=\"widget\" data-settings=\"{&quot;htmega_fe&quot;:&quot;no&quot;}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">\u062d\u064a\u0651\u0627\u0643 \u0641\u064a \u0627\u0644\u0639\u0627\u0644\u0645 \u0627\u0644\u0628\u0646\u0641\u0633\u062c\u064a<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dac0357 elementor-widget__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"dac0357\" data-element_type=\"widget\" data-settings=\"{&quot;htmega_fe&quot;:&quot;no&quot;}\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>\u0627\u0628\u062f\u0623 \u062a\u062c\u0631\u0628\u062a\u0643 \u0628\u0627\u0644\u062a\u0633\u0648\u0651\u0642 \u0648 \u0627\u0644\u0639\u0631\u0648\u0636 \u0627\u0644\u062d\u0635\u0631\u064a\u0629\u060c \u0648\u0627\u0644\u0633\u0647\u0648\u0644\u0629 \u0641\u064a \u0643\u0644 \u062e\u0637\u0648\u0627\u062a\u0643 \u2014 \u0641\u0642\u0637 \u0645\u0639 MISpay.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b485f59 e-con-full e-flex e-con e-child\" data-id=\"b485f59\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c0edc95 elementor-widget elementor-widget-image\" data-id=\"c0edc95\" data-element_type=\"widget\" data-settings=\"{&quot;htmega_fe&quot;:&quot;no&quot;}\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.mispay.co\/wp-content\/uploads\/2025\/05\/QR-Code.png\" title=\"\" alt=\"\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5a101e5 elementor-widget elementor-widget-heading\" data-id=\"5a101e5\" data-element_type=\"widget\" data-settings=\"{&quot;htmega_fe&quot;:&quot;no&quot;}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">\u062d\u0645\u0651\u0644 <br>\u0627\u0644\u062a\u0637\u0628\u064a\u0642<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6325a5f e-con-full e-flex e-con e-child\" data-id=\"6325a5f\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ddce7fc elementor-widget elementor-widget-image\" data-id=\"ddce7fc\" data-element_type=\"widget\" data-settings=\"{&quot;htmega_fe&quot;:&quot;no&quot;}\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"400\" height=\"517\" src=\"https:\/\/www.mispay.co\/wp-content\/uploads\/2025\/11\/home.png\" class=\"attachment-large size-large wp-image-3725\" alt=\"\" srcset=\"https:\/\/www.mispay.co\/wp-content\/uploads\/2025\/11\/home.png 400w, https:\/\/www.mispay.co\/wp-content\/uploads\/2025\/11\/home-232x300.png 232w\" sizes=\"(max-width: 400px) 100vw, 400px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u0627\u0639\u062b\u0631 \u0639\u0644\u0649 \u0645\u062a\u062c\u0631.\u0627\u062f\u0641\u0639 \u0639\u0644\u0649 4 \u062f\u0641\u0639\u0627\u062a \u0645\u0639 \u0623\u0642\u0633\u0627\u0637 \u0642\u0633\u0651\u0645 \u0645\u0634\u062a\u0631\u064a\u0627\u062a\u0643 \u0639\u0644\u0649 \u0664 \u062f\u0641\u0639\u0627\u062a \u2014 \u0628\u062f\u0648\u0646 \u0631\u0633\u0648\u0645\u060c \u0628\u062f\u0648\u0646 \u0641\u0648\u0627\u0626\u062f\u060c \u0648\u0645\u062a\u0648\u0627\u0641\u0642 \u0661\u0660\u0660\u066a \u0645\u0639 \u0627\u0644\u0634\u0631\u064a\u0639\u0629. \u0645\u0646 \u0627\u0644\u0623\u0632\u064a\u0627\u0621 \u0625\u0644\u0649 \u0642\u0637\u0639 \u063a\u064a\u0627\u0631 \u0627\u0644\u0633\u064a\u0627\u0631\u0627\u062a\u060c \u0645\u0639 \u0625\u0645 \u0622\u064a \u0625\u0633 \u0628\u0627\u064a \u062a\u0642\u062f\u0631 \u062a\u0634\u062a\u0631\u064a \u0627\u0644\u064a\u0648\u0645 \u0648\u062a\u062f\u0641\u0639 \u0628\u0639\u062f\u064a\u0646 \u2014 \u0628\u0637\u0631\u064a\u0642\u0629 \u0633\u0647\u0644\u0629 \u0648\u0628\u062f\u0648\u0646 \u0642\u0644\u0642.\u0628\u062f\u0648\u0646 \u0645\u0641\u0627\u062c\u0622\u062a\u2026 \u0623\u0642\u0633\u0627\u0637 \u062a\u0633\u0647\u0644 \u062d\u064a\u0627\u062a\u0643. \u0627\u0644\u0628\u062d\u062b \u0639\u0646 \u0627\u0644\u0645\u062a\u0627\u062c\u0631 \u00d7 \u0627\u0644\u0645\u062a\u0627\u062c\u0631 \u0627\u0644\u0645\u0645\u064a\u0632\u0629 \u0627\u0644\u0645\u062a\u0627\u062c\u0631 \u0627\u0644\u0645\u0645\u064a\u0632\u0629 [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-1533","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.0 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>\u062a\u0633\u0648\u0642 - MISPay<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.mispay.co\/ar\/%d8%aa%d8%b3%d9%88%d9%82\/\" \/>\n<meta property=\"og:locale\" content=\"ar_AR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u062a\u0633\u0648\u0642 - MISPay\" \/>\n<meta property=\"og:description\" content=\"\u0627\u0639\u062b\u0631 \u0639\u0644\u0649 \u0645\u062a\u062c\u0631.\u0627\u062f\u0641\u0639 \u0639\u0644\u0649 4 \u062f\u0641\u0639\u0627\u062a \u0645\u0639 \u0623\u0642\u0633\u0627\u0637 \u0642\u0633\u0651\u0645 \u0645\u0634\u062a\u0631\u064a\u0627\u062a\u0643 \u0639\u0644\u0649 \u0664 \u062f\u0641\u0639\u0627\u062a \u2014 \u0628\u062f\u0648\u0646 \u0631\u0633\u0648\u0645\u060c \u0628\u062f\u0648\u0646 \u0641\u0648\u0627\u0626\u062f\u060c \u0648\u0645\u062a\u0648\u0627\u0641\u0642 \u0661\u0660\u0660\u066a \u0645\u0639 \u0627\u0644\u0634\u0631\u064a\u0639\u0629. \u0645\u0646 \u0627\u0644\u0623\u0632\u064a\u0627\u0621 \u0625\u0644\u0649 \u0642\u0637\u0639 \u063a\u064a\u0627\u0631 \u0627\u0644\u0633\u064a\u0627\u0631\u0627\u062a\u060c \u0645\u0639 \u0625\u0645 \u0622\u064a \u0625\u0633 \u0628\u0627\u064a \u062a\u0642\u062f\u0631 \u062a\u0634\u062a\u0631\u064a \u0627\u0644\u064a\u0648\u0645 \u0648\u062a\u062f\u0641\u0639 \u0628\u0639\u062f\u064a\u0646 \u2014 \u0628\u0637\u0631\u064a\u0642\u0629 \u0633\u0647\u0644\u0629 \u0648\u0628\u062f\u0648\u0646 \u0642\u0644\u0642.\u0628\u062f\u0648\u0646 \u0645\u0641\u0627\u062c\u0622\u062a\u2026 \u0623\u0642\u0633\u0627\u0637 \u062a\u0633\u0647\u0644 \u062d\u064a\u0627\u062a\u0643. \u0627\u0644\u0628\u062d\u062b \u0639\u0646 \u0627\u0644\u0645\u062a\u0627\u062c\u0631 \u00d7 \u0627\u0644\u0645\u062a\u0627\u062c\u0631 \u0627\u0644\u0645\u0645\u064a\u0632\u0629 \u0627\u0644\u0645\u062a\u0627\u062c\u0631 \u0627\u0644\u0645\u0645\u064a\u0632\u0629 [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.mispay.co\/ar\/%d8%aa%d8%b3%d9%88%d9%82\/\" \/>\n<meta property=\"og:site_name\" content=\"MISPay\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-08T08:46:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.mispay.co\/wp-content\/uploads\/2025\/08\/How-Does-Mispay-work-online2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"400\" \/>\n\t<meta property=\"og:image:height\" content=\"517\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u0648\u0642\u062a \u0627\u0644\u0642\u0631\u0627\u0621\u0629 \u0627\u0644\u0645\u064f\u0642\u062f\u0651\u0631\" \/>\n\t<meta name=\"twitter:data1\" content=\"12 \u062f\u0642\u064a\u0642\u0629\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.mispay.co\/ar\/%d8%aa%d8%b3%d9%88%d9%82\/\",\"url\":\"https:\/\/www.mispay.co\/ar\/%d8%aa%d8%b3%d9%88%d9%82\/\",\"name\":\"\u062a\u0633\u0648\u0642 - MISPay\",\"isPartOf\":{\"@id\":\"https:\/\/www.mispay.co\/ar\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.mispay.co\/ar\/%d8%aa%d8%b3%d9%88%d9%82\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.mispay.co\/ar\/%d8%aa%d8%b3%d9%88%d9%82\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.mispay.co\/wp-content\/uploads\/2025\/08\/How-Does-Mispay-work-online2.png\",\"datePublished\":\"2025-07-07T07:17:16+00:00\",\"dateModified\":\"2025-12-08T08:46:30+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.mispay.co\/ar\/%d8%aa%d8%b3%d9%88%d9%82\/#breadcrumb\"},\"inLanguage\":\"ar\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.mispay.co\/ar\/%d8%aa%d8%b3%d9%88%d9%82\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"ar\",\"@id\":\"https:\/\/www.mispay.co\/ar\/%d8%aa%d8%b3%d9%88%d9%82\/#primaryimage\",\"url\":\"https:\/\/www.mispay.co\/wp-content\/uploads\/2025\/08\/How-Does-Mispay-work-online2.png\",\"contentUrl\":\"https:\/\/www.mispay.co\/wp-content\/uploads\/2025\/08\/How-Does-Mispay-work-online2.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.mispay.co\/ar\/%d8%aa%d8%b3%d9%88%d9%82\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.mispay.co\/ar\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u062a\u0633\u0648\u0642\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.mispay.co\/ar\/#website\",\"url\":\"https:\/\/www.mispay.co\/ar\/\",\"name\":\"MISPay\",\"description\":\"Split Your Payments\",\"publisher\":{\"@id\":\"https:\/\/www.mispay.co\/ar\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.mispay.co\/ar\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ar\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.mispay.co\/ar\/#organization\",\"name\":\"MISPay\",\"url\":\"https:\/\/www.mispay.co\/ar\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ar\",\"@id\":\"https:\/\/www.mispay.co\/ar\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.mispay.co\/wp-content\/uploads\/2025\/05\/logo-243x75-1.png\",\"contentUrl\":\"https:\/\/www.mispay.co\/wp-content\/uploads\/2025\/05\/logo-243x75-1.png\",\"width\":243,\"height\":75,\"caption\":\"MISPay\"},\"image\":{\"@id\":\"https:\/\/www.mispay.co\/ar\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\u062a\u0633\u0648\u0642 - MISPay","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.mispay.co\/ar\/%d8%aa%d8%b3%d9%88%d9%82\/","og_locale":"ar_AR","og_type":"article","og_title":"\u062a\u0633\u0648\u0642 - MISPay","og_description":"\u0627\u0639\u062b\u0631 \u0639\u0644\u0649 \u0645\u062a\u062c\u0631.\u0627\u062f\u0641\u0639 \u0639\u0644\u0649 4 \u062f\u0641\u0639\u0627\u062a \u0645\u0639 \u0623\u0642\u0633\u0627\u0637 \u0642\u0633\u0651\u0645 \u0645\u0634\u062a\u0631\u064a\u0627\u062a\u0643 \u0639\u0644\u0649 \u0664 \u062f\u0641\u0639\u0627\u062a \u2014 \u0628\u062f\u0648\u0646 \u0631\u0633\u0648\u0645\u060c \u0628\u062f\u0648\u0646 \u0641\u0648\u0627\u0626\u062f\u060c \u0648\u0645\u062a\u0648\u0627\u0641\u0642 \u0661\u0660\u0660\u066a \u0645\u0639 \u0627\u0644\u0634\u0631\u064a\u0639\u0629. \u0645\u0646 \u0627\u0644\u0623\u0632\u064a\u0627\u0621 \u0625\u0644\u0649 \u0642\u0637\u0639 \u063a\u064a\u0627\u0631 \u0627\u0644\u0633\u064a\u0627\u0631\u0627\u062a\u060c \u0645\u0639 \u0625\u0645 \u0622\u064a \u0625\u0633 \u0628\u0627\u064a \u062a\u0642\u062f\u0631 \u062a\u0634\u062a\u0631\u064a \u0627\u0644\u064a\u0648\u0645 \u0648\u062a\u062f\u0641\u0639 \u0628\u0639\u062f\u064a\u0646 \u2014 \u0628\u0637\u0631\u064a\u0642\u0629 \u0633\u0647\u0644\u0629 \u0648\u0628\u062f\u0648\u0646 \u0642\u0644\u0642.\u0628\u062f\u0648\u0646 \u0645\u0641\u0627\u062c\u0622\u062a\u2026 \u0623\u0642\u0633\u0627\u0637 \u062a\u0633\u0647\u0644 \u062d\u064a\u0627\u062a\u0643. \u0627\u0644\u0628\u062d\u062b \u0639\u0646 \u0627\u0644\u0645\u062a\u0627\u062c\u0631 \u00d7 \u0627\u0644\u0645\u062a\u0627\u062c\u0631 \u0627\u0644\u0645\u0645\u064a\u0632\u0629 \u0627\u0644\u0645\u062a\u0627\u062c\u0631 \u0627\u0644\u0645\u0645\u064a\u0632\u0629 [&hellip;]","og_url":"https:\/\/www.mispay.co\/ar\/%d8%aa%d8%b3%d9%88%d9%82\/","og_site_name":"MISPay","article_modified_time":"2025-12-08T08:46:30+00:00","og_image":[{"width":400,"height":517,"url":"https:\/\/www.mispay.co\/wp-content\/uploads\/2025\/08\/How-Does-Mispay-work-online2.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"\u0648\u0642\u062a \u0627\u0644\u0642\u0631\u0627\u0621\u0629 \u0627\u0644\u0645\u064f\u0642\u062f\u0651\u0631":"12 \u062f\u0642\u064a\u0642\u0629"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.mispay.co\/ar\/%d8%aa%d8%b3%d9%88%d9%82\/","url":"https:\/\/www.mispay.co\/ar\/%d8%aa%d8%b3%d9%88%d9%82\/","name":"\u062a\u0633\u0648\u0642 - MISPay","isPartOf":{"@id":"https:\/\/www.mispay.co\/ar\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.mispay.co\/ar\/%d8%aa%d8%b3%d9%88%d9%82\/#primaryimage"},"image":{"@id":"https:\/\/www.mispay.co\/ar\/%d8%aa%d8%b3%d9%88%d9%82\/#primaryimage"},"thumbnailUrl":"https:\/\/www.mispay.co\/wp-content\/uploads\/2025\/08\/How-Does-Mispay-work-online2.png","datePublished":"2025-07-07T07:17:16+00:00","dateModified":"2025-12-08T08:46:30+00:00","breadcrumb":{"@id":"https:\/\/www.mispay.co\/ar\/%d8%aa%d8%b3%d9%88%d9%82\/#breadcrumb"},"inLanguage":"ar","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.mispay.co\/ar\/%d8%aa%d8%b3%d9%88%d9%82\/"]}]},{"@type":"ImageObject","inLanguage":"ar","@id":"https:\/\/www.mispay.co\/ar\/%d8%aa%d8%b3%d9%88%d9%82\/#primaryimage","url":"https:\/\/www.mispay.co\/wp-content\/uploads\/2025\/08\/How-Does-Mispay-work-online2.png","contentUrl":"https:\/\/www.mispay.co\/wp-content\/uploads\/2025\/08\/How-Does-Mispay-work-online2.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.mispay.co\/ar\/%d8%aa%d8%b3%d9%88%d9%82\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.mispay.co\/ar\/"},{"@type":"ListItem","position":2,"name":"\u062a\u0633\u0648\u0642"}]},{"@type":"WebSite","@id":"https:\/\/www.mispay.co\/ar\/#website","url":"https:\/\/www.mispay.co\/ar\/","name":"MISPay","description":"Split Your Payments","publisher":{"@id":"https:\/\/www.mispay.co\/ar\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.mispay.co\/ar\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ar"},{"@type":"Organization","@id":"https:\/\/www.mispay.co\/ar\/#organization","name":"MISPay","url":"https:\/\/www.mispay.co\/ar\/","logo":{"@type":"ImageObject","inLanguage":"ar","@id":"https:\/\/www.mispay.co\/ar\/#\/schema\/logo\/image\/","url":"https:\/\/www.mispay.co\/wp-content\/uploads\/2025\/05\/logo-243x75-1.png","contentUrl":"https:\/\/www.mispay.co\/wp-content\/uploads\/2025\/05\/logo-243x75-1.png","width":243,"height":75,"caption":"MISPay"},"image":{"@id":"https:\/\/www.mispay.co\/ar\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.mispay.co\/ar\/wp-json\/wp\/v2\/pages\/1533","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mispay.co\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.mispay.co\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.mispay.co\/ar\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mispay.co\/ar\/wp-json\/wp\/v2\/comments?post=1533"}],"version-history":[{"count":63,"href":"https:\/\/www.mispay.co\/ar\/wp-json\/wp\/v2\/pages\/1533\/revisions"}],"predecessor-version":[{"id":4396,"href":"https:\/\/www.mispay.co\/ar\/wp-json\/wp\/v2\/pages\/1533\/revisions\/4396"}],"wp:attachment":[{"href":"https:\/\/www.mispay.co\/ar\/wp-json\/wp\/v2\/media?parent=1533"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}