{"id":6751,"date":"2023-06-15T16:22:11","date_gmt":"2023-06-15T12:52:11","guid":{"rendered":"https:\/\/followbegir.ir\/?page_id=6751"},"modified":"2026-07-31T23:32:37","modified_gmt":"2026-07-31T20:02:37","slug":"number","status":"publish","type":"page","link":"https:\/\/followbegir.ir\/number\/","title":{"rendered":"\u062e\u0631\u06cc\u062f \u0634\u0645\u0627\u0631\u0647 \u0645\u062c\u0627\u0632\u06cc"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"6751\" class=\"elementor elementor-6751\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-0cf6d2a elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"0cf6d2a\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-26d6e3d\" data-id=\"26d6e3d\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-a7e8557 elementor-widget elementor-widget-shortcode\" data-id=\"a7e8557\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\r\n<script>\r\n    \/\/ \u062a\u0639\u0631\u06cc\u0641 \u0622\u06cc\u06a9\u0648\u0646\u200c\u0647\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u0633\u0631\u0627\u0633\u0631\u06cc \u062a\u0627 \u062f\u0631 \u062a\u0645\u0627\u0645 \u0628\u062e\u0634\u200c\u0647\u0627\u06cc HTML \u0642\u0627\u0628\u0644 \u062f\u0633\u062a\u0631\u0633 \u0628\u0627\u0634\u0646\u062f\r\n    window.vnDefaultServiceIcon = \"https:\/\/followbegir.ir\/wp-content\/plugins\/wp-numbers-pro\/assets\/images\/default-service.svg\";\r\n    window.vnDefaultCountryIcon = \"https:\/\/followbegir.ir\/wp-content\/plugins\/wp-numbers-pro\/assets\/images\/default-country.svg\";\r\n\r\n    \/\/ \u0645\u062a\u063a\u06cc\u0631 \u0642\u062f\u06cc\u0645\u06cc \u062c\u0647\u062a \u0633\u0627\u0632\u06af\u0627\u0631\u06cc\r\n    var vnDefaultIcon = window.vnDefaultServiceIcon;\r\n\r\n    var vnDefaultLayout = \"grid\";\r\n    var vnAllowSwitch = true;\r\n    var vnServicesLimit = 20;\r\n    var vnCountriesLimit = 30;\r\n    var vn_server_departments = [{\"dept_id\":\"support\",\"dept_label\":\"\\u067e\\u0634\\u062a\\u06cc\\u0628\\u0627\\u0646\\u06cc \\u0639\\u0645\\u0648\\u0645\\u06cc\"},{\"dept_id\":\"sales\",\"dept_label\":\"\\u0628\\u062e\\u0634 \\u0641\\u0631\\u0648\\u0634 \\u0648 \\u0645\\u0627\\u0644\\u06cc\"},{\"dept_id\":\"tech\",\"dept_label\":\"\\u067e\\u0634\\u062a\\u06cc\\u0628\\u0627\\u0646\\u06cc \\u0641\\u0646\\u06cc\"}];\r\n    var vnStartTab = \"buy\";\r\n<\/script>\r\n<div id=\"vn-app\" class=\"vn-wrapper\" v-cloak>\r\n\r\n    <div v-if=\"isLogged\" class=\"vn-nav-wrapper\">\r\n        <div class=\"vn-nav-scroller\">\r\n\t\t                    <button @click=\"switchTab('buy')\" class=\"vn-nav-item\" :class=\"{ active: currentTab === 'buy' }\">\r\n                    <span class=\"dashicons dashicons-cart\"><\/span> \u062e\u0631\u06cc\u062f \u0634\u0645\u0627\u0631\u0647\r\n                <\/button>\r\n\t\t    \r\n\t                        <button @click=\"switchTab('history')\" class=\"vn-nav-item\" :class=\"{ active: currentTab === 'history' }\">\r\n                    <span class=\"dashicons dashicons-list-view\"><\/span> \u0633\u0641\u0627\u0631\u0634\u0627\u062a \u0645\u0646\r\n                <\/button>\r\n\t        \r\n\t\t                    <button @click=\"switchTab('wallet')\" class=\"vn-nav-item\" :class=\"{ active: currentTab === 'wallet' }\">\r\n                    <span class=\"dashicons dashicons-vault\"><\/span> \u06a9\u06cc\u0641 \u067e\u0648\u0644\r\n                <\/button>\r\n\t\t    \r\n\t                        <button @click=\"switchTab('referral')\" class=\"vn-nav-item\" :class=\"{ active: currentTab === 'referral' }\">\r\n                    <span class=\"dashicons dashicons-groups\"><\/span> \u06a9\u0633\u0628 \u062f\u0631\u0622\u0645\u062f\r\n                <\/button>\r\n\t        \r\n\t\t                    <button @click=\"switchTab('transactions')\" class=\"vn-nav-item\" :class=\"{ active: currentTab === 'transactions' }\">\r\n                    <span class=\"dashicons dashicons-money-alt\"><\/span> \u062a\u0631\u0627\u06a9\u0646\u0634\u200c\u0647\u0627\r\n                <\/button>\r\n\t\t    \r\n\t\t                    <button @click=\"switchTab('support')\" class=\"vn-nav-item\" :class=\"{ active: currentTab === 'support' }\">\r\n                    <span class=\"dashicons dashicons-sos\"><\/span> \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc\r\n                <\/button>\r\n\t\t    \r\n\t\t                    <button @click=\"switchTab('profile')\" class=\"vn-nav-item\" :class=\"{ active: currentTab === 'profile' }\">\r\n                    <span class=\"dashicons dashicons-id-alt\"><\/span> \u062d\u0633\u0627\u0628 \u06a9\u0627\u0631\u0628\u0631\u06cc\r\n                <\/button>\r\n\t\t    \r\n\r\n        <\/div>\r\n\r\n        <div class=\"vn-layout-switcher\" v-if=\"allowSwitch && currentTab === 'buy'\">\r\n            <button @click=\"currentLayout = 'grid'\" :class=\"{ active: currentLayout === 'grid' }\" title=\"\u0646\u0645\u0627\u06cc\u0634 \u0634\u0628\u06a9\u0647\u200c\u0627\u06cc\"><span class=\"dashicons dashicons-grid-view\"><\/span><\/button>\r\n            <button @click=\"currentLayout = 'list'\" :class=\"{ active: currentLayout === 'list' }\" title=\"\u0646\u0645\u0627\u06cc\u0634 \u0644\u06cc\u0633\u062a\u06cc\"><span class=\"dashicons dashicons-menu\"><\/span><\/button>\r\n        <\/div>\r\n    <\/div>\r\n    <div v-else class=\"vn-guest-header\">\r\n        <div class=\"vn-gh-info\">\r\n            <div class=\"vn-gh-icon\">\r\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"24\" height=\"24\">\r\n                    <path d=\"M5,22h14c1.103,0,2-0.897,2-2V9c0-0.553-0.447-1-1-1h-3V7c0-2.757-2.243-5-5-5S7,4.243,7,7v1H4C3.447,8,3,8.447,3,9v11 C3,21.103,3.897,22,5,22z M9,7c0-1.654,1.346-3,3-3s3,1.346,3,3v1H9V7z M5,10h2v2h2v-2h6v2h2v-2h2v10H5V10z\"\/>\r\n                <\/svg>\r\n            <\/div>\r\n            <div class=\"vn-gh-text\">\r\n                <strong>\u067e\u0646\u0644 \u0634\u0645\u0627\u0631\u0647 \u0645\u062c\u0627\u0632\u06cc<\/strong>\r\n                <span>\u0628\u0631\u0627\u06cc \u062e\u0631\u06cc\u062f \u0648 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0633\u0641\u0627\u0631\u0634\u0627\u062a \u0648\u0627\u0631\u062f \u062d\u0633\u0627\u0628 \u062e\u0648\u062f \u0634\u0648\u06cc\u062f.<\/span>\r\n            <\/div>\r\n        <\/div>\r\n        <div class=\"vn-gh-actions\">\r\n            <a :href=\"vn_obj.login_url\" class=\"vn-btn-login-outline\">\u0648\u0631\u0648\u062f \u0628\u0647 \u062d\u0633\u0627\u0628<\/a>\r\n            <a :href=\"vn_obj.register_url || vn_obj.login_url\" class=\"vn-btn-register-primary\">\u062b\u0628\u062a\u200c\u0646\u0627\u0645 \u0631\u0627\u06cc\u06af\u0627\u0646<\/a>\r\n        <\/div>\r\n    <\/div>\r\n\t    <div v-show=\"currentTab === 'buy'\">\r\n        <div v-if=\"isLogged\" class=\"vn-balance-header\" style=\"background:#fff; border:1px solid #eee; padding:10px 15px; border-radius:10px; margin-bottom:15px; display:flex; align-items:center; gap:10px; box-shadow:0 2px 5px rgba(0,0,0,0.02);\">\r\n\r\n            <div style=\"background:#e6f7ff; color:#2271b1; width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;\">\r\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"24\" height=\"24\">\r\n                    <path d=\"M21,7h-1V6c0-1.103-0.897-2-2-2H4C2.897,4,2,4.897,2,6v12c0,1.103,0.897,2,2,2h14c1.103,0,2-0.897,2-2v-1h1c1.103,0,2-0.897,2-2V9C23,7.897,22.103,7,21,7z M4,6h14v1H4V6z M18,18H4V9h14V18z M21,15h-1v-4h1V15z\"\/>\r\n                    <circle cx=\"11\" cy=\"13.5\" r=\"1.5\"\/>\r\n                <\/svg>\r\n            <\/div>\r\n\r\n            <div style=\"display:flex; flex-direction:column;\">\r\n                <span style=\"font-size:11px; color:#777;\">\u0645\u0648\u062c\u0648\u062f\u06cc \u06a9\u06cc\u0641 \u067e\u0648\u0644<\/span>\r\n                <span style=\"font-size:15px; font-weight:bold; color:#333;\">{{ formatPrice(userBalance) }} \u062a\u0648\u0645\u0627\u0646<\/span>\r\n            <\/div>\r\n            <a href=\"#\" @click.prevent=\"switchTab('wallet')\" style=\"margin-right:auto; font-size:12px; background:#2271b1; color:#fff; padding:4px 10px; border-radius:4px; text-decoration:none;\">+ \u0627\u0641\u0632\u0627\u06cc\u0634<\/a>\r\n        <\/div>\r\n        <div v-if=\"loading\" class=\"vn-loading\">\r\n            <span class=\"vn-spinner\"><\/span> \u062f\u0631 \u062d\u0627\u0644 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0633\u0631\u0648\u06cc\u0633\u200c\u0647\u0627...\r\n        <\/div>\r\n\r\n        <div v-if=\"!loading && isLogged && !isVerified\" class=\"vn-alert-warning\">\r\n            <span>\u26a0\ufe0f \u062d\u0633\u0627\u0628 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0634\u0645\u0627 \u062a\u0627\u06cc\u06cc\u062f \u0646\u0634\u062f\u0647 \u0627\u0633\u062a. \u0627\u0645\u06a9\u0627\u0646 \u062e\u0631\u06cc\u062f \u0648\u062c\u0648\u062f \u0646\u062f\u0627\u0631\u062f.<\/span>\r\n            <button @click=\"openVerifyModal\">\u062a\u0627\u06cc\u06cc\u062f \u0634\u0645\u0627\u0631\u0647 \u0645\u0648\u0628\u0627\u06cc\u0644<\/button>\r\n        <\/div>\r\n\r\n        <div v-if=\"!loading && currentLayout === 'grid'\" :class=\"{ 'vn-two-col-layout': activeOrder }\">\r\n\r\n            <div :class=\"activeOrder ? 'vn-col-right' : ''\">\r\n                <div class=\"vn-panel\">\r\n                    <div class=\"vn-header\">\r\n                        <div class=\"vn-heading\">\u0644\u06cc\u0633\u062a \u0633\u0631\u0648\u06cc\u0633\u200c\u0647\u0627<\/div>\r\n                        <input type=\"text\" v-model=\"search\" placeholder=\"\u062c\u0633\u062a\u062c\u0648\u06cc \u0633\u0631\u0648\u06cc\u0633...\" class=\"vn-search-input\">\r\n                    <\/div>\r\n\r\n                    <div class=\"vn-services-grid\">\r\n                        <div v-for=\"service in filteredServices\" :key=\"service.id\" class=\"vn-service-card\" @click=\"selectService(service)\">\r\n                            <div class=\"vn-icon\">\r\n                                <img :src=\"service.icon || vnDefaultIcon\" @error=\"handleImageError\" class=\"vn-service-img\" loading=\"lazy\">\r\n                            <\/div>\r\n                            <div class=\"vn-name\" :title=\"service.name\">{{ service.name }}<\/div>\r\n                        <\/div>\r\n                        <div v-if=\"filteredServices.length < services.filter(s=>s.name.toLowerCase().includes(search.toLowerCase())).length\"\r\n                             class=\"vn-service-card vn-load-more-card\"\r\n                             @click=\"showMoreServices\">\r\n                            <div class=\"vn-icon\">\r\n                                <span class=\"dashicons dashicons-plus-alt2\"><\/span>\r\n                            <\/div>\r\n                            <div class=\"vn-name\">\u0646\u0645\u0627\u06cc\u0634 \u0628\u06cc\u0634\u062a\u0631<\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div v-if=\"activeOrder\" class=\"vn-col-left\">\r\n                <div class=\"vn-sticky-box\">\r\n                    <div v-if=\"checkingOrder\" class=\"vn-sticky-box vn-panel vn-placeholder-box\">\r\n                        <span class=\"vn-spinner\"><\/span>\r\n                        <p style=\"margin-top:10px; font-size:13px; color:#666;\">\u062f\u0631\u062d\u0627\u0644 \u0628\u0631\u0631\u0633\u06cc \u0633\u0641\u0627\u0631\u0634 \u0641\u0639\u0627\u0644...<\/p>\r\n                    <\/div>\r\n                    <div v-else-if=\"activeOrder\" class=\"vn-panel\">\r\n                        <div class=\"vn-panel-title\" style=\"display:flex; align-items:center; gap:5px; color:#2271b1;\">\r\n                            <span class=\"dashicons dashicons-clock\"><\/span>\r\n                            <span>\u0633\u0641\u0627\u0631\u0634 \u0641\u0639\u0627\u0644<\/span>\r\n                        <\/div>\r\n                        <active-order-component :order=\"activeOrder\" :timer=\"timerDisplay\" :sms-code=\"smsCode\" @copy=\"copyToClipboard\" @copy-smart=\"copyNumberSmart\" @cancel=\"cancelOrder\" @finish=\"finishOrder\"><\/active-order-component>\r\n                    <\/div>\r\n                    <div v-else class=\"vn-sticky-box vn-panel vn-placeholder-box\">\r\n                        <span class=\"dashicons dashicons-cart\" style=\"font-size: 40px; color: #ccc; margin-bottom: 10px;\"><\/span>\r\n                        <p>\u0647\u0646\u0648\u0632 \u0634\u0645\u0627\u0631\u0647\u200c\u0627\u06cc \u0646\u062e\u0631\u06cc\u062f\u0647\u200c\u0627\u06cc\u062f.<\/p>\r\n                        <small>\u0633\u0631\u0648\u06cc\u0633\u06cc \u0631\u0627 \u0627\u0632 \u0644\u06cc\u0633\u062a \u0633\u0645\u062a \u0631\u0627\u0633\u062a \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f \u0648 \u06a9\u0634\u0648\u0631 \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u0631\u0627 \u0628\u0632\u0646\u06cc\u062f.<\/small>\r\n                    <\/div>\r\n\r\n                <\/div>\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n        <div v-if=\"!loading && currentLayout === 'list'\" class=\"vn-two-col-layout\">\r\n\r\n            <div class=\"vn-col-right\">\r\n                <div class=\"vn-panel\">\r\n                    <div class=\"vn-header-sm\">\r\n                        <input type=\"text\" v-model=\"search\" placeholder=\"\u062c\u0633\u062a\u062c\u0648 \u062f\u0631 \u0633\u0631\u0648\u06cc\u0633\u200c\u0647\u0627...\" class=\"vn-search-input-full\">\r\n                    <\/div>\r\n                    <div class=\"vn-services-list-wrapper\">\r\n                        <div v-for=\"service in filteredServices\" :key=\"service.id\" class=\"vn-list-item\" :class=\"{ 'expanded': expandedServiceId === service.id }\">\r\n\r\n                            <div class=\"vn-list-head\" @click=\"toggleServiceDropdown(service)\">\r\n                                <div class=\"vn-flex-start\">\r\n                                    <img :src=\"service.icon || vnDefaultIcon\" @error=\"handleImageError\" class=\"vn-list-icon\">\r\n                                    <span class=\"vn-list-name\">{{ service.name }}<\/span>\r\n                                <\/div>\r\n                                <span class=\"dashicons\" :class=\"expandedServiceId === service.id ? 'dashicons-arrow-up-alt2' : 'dashicons-arrow-down-alt2'\"><\/span>\r\n                            <\/div>\r\n\r\n                            <div v-if=\"expandedServiceId === service.id\" class=\"vn-list-body\">\r\n                                <div v-if=\"modalLoading\" class=\"vn-loading-sm\"><span class=\"vn-spinner\"><\/span> \u062f\u0631 \u062d\u0627\u0644 \u062f\u0631\u06cc\u0627\u0641\u062a \u0627\u0637\u0644\u0627\u0639\u0627\u062a...<\/div>\r\n                                <div v-else>\r\n                                    <div class=\"vn-dropdown-controls\">\r\n                                        <div class=\"vn-search-row\">\r\n                                            <input type=\"text\" v-model=\"modalSearch\" placeholder=\"\u062c\u0633\u062a\u062c\u0648\u06cc \u0646\u0627\u0645 \u06a9\u0634\u0648\u0631...\" class=\"vn-input-full\">\r\n                                        <\/div>\r\n                                        <div class=\"vn-filters-row\">\r\n                                            <span class=\"vn-filter-label\">\u0645\u0631\u062a\u0628\u200c\u0633\u0627\u0632\u06cc:<\/span>\r\n                                            <label :class=\"{ 'active': modalSort === 'price_asc' }\"><input type=\"radio\" value=\"price_asc\" v-model=\"modalSort\"> \u0627\u0631\u0632\u0627\u0646\u200c\u062a\u0631\u06cc\u0646<\/label>\r\n                                            <label :class=\"{ 'active': modalSort === 'price_desc' }\"><input type=\"radio\" value=\"price_desc\" v-model=\"modalSort\"> \u06af\u0631\u0627\u0646\u200c\u062a\u0631\u06cc\u0646<\/label>\r\n                                            <label :class=\"{ 'active': modalSort === 'count_desc' }\"><input type=\"radio\" value=\"count_desc\" v-model=\"modalSort\"> \u0628\u06cc\u0634\u062a\u0631\u06cc\u0646 \u0645\u0648\u062c\u0648\u062f\u06cc<\/label>\r\n                                        <\/div>\r\n                                    <\/div>\r\n\r\n                                    <div class=\"vn-list-countries\">\r\n                                        <div v-for=\"(country, index) in filteredModalCountries\" :key=\"country.buy_key ? country.buy_key : index\" class=\"vn-list-country-row\">\r\n                                            <div class=\"vn-lc-info\">\r\n                                                <img :src=\"country.flag\" :alt=\"country.country_name\" @error=\"this.onerror=null; this.src=window.vnDefaultCountryIcon;\">\r\n                                                <span>{{ country.country_name }}<\/span>\r\n                                            <\/div>\r\n                                            <div class=\"vn-lc-meta-center\">\r\n                                                <span class=\"vn-count-badge\" :class=\"{ 'vn-zero-stock': Number(country.count) <= 0 }\">\r\n                                                    {{ formatNumber(country.count) }} <span v-if=\"Number(country.count) > 0\">\u0639\u062f\u062f<\/span>\r\n                                                <\/span>\r\n                                            <\/div>\r\n                                            <div class=\"vn-lc-action\">\r\n                                                <span class=\"vn-lc-price\">{{ formatPrice(country.price) }} \u062a<\/span>\r\n                                                <button @click=\"buyNumber(country)\" :disabled=\"processing\" class=\"vn-btn-xs\">{{ processing ? '...' : '\u062e\u0631\u06cc\u062f' }}<\/button>\r\n                                            <\/div>\r\n                                        <\/div>\r\n                                        <div v-if=\"filteredModalCountries.length === 0\" class=\"vn-text-center vn-text-muted\">\u0645\u0648\u0631\u062f\u06cc \u06cc\u0627\u0641\u062a \u0646\u0634\u062f.<\/div>\r\n                                        <div v-if=\"hasMoreCountries\" class=\"vn-text-center\" style=\"margin-top:10px;\">\r\n                                            <button @click=\"showMoreCountries\" class=\"vn-link-sm\" style=\"cursor:pointer;\">\u0646\u0645\u0627\u06cc\u0634 \u06f3\u06f0 \u06a9\u0634\u0648\u0631 \u0628\u0639\u062f\u06cc...<\/button>\r\n                                        <\/div>\r\n                                    <\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div v-if=\"filteredServices.length < services.filter(s=>s.name.includes(search)).length\" class=\"vn-load-more-container\">\r\n                        <button @click=\"showMoreServices\" class=\"vn-btn-secondary\">\u0646\u0645\u0627\u06cc\u0634 \u0633\u0631\u0648\u06cc\u0633\u200c\u0647\u0627\u06cc \u0628\u06cc\u0634\u062a\u0631 \ud83d\udc47<\/button>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"vn-col-left\">\r\n                <div v-if=\"checkingOrder\" class=\"vn-sticky-box vn-panel vn-placeholder-box\">\r\n                    <span class=\"vn-spinner\"><\/span>\r\n                    <p style=\"margin-top:10px; font-size:13px; color:#666;\">\u062f\u0631\u062d\u0627\u0644 \u0628\u0631\u0631\u0633\u06cc \u0633\u0641\u0627\u0631\u0634 \u0641\u0639\u0627\u0644...<\/p>\r\n                <\/div>\r\n                <div v-else-if=\"activeOrder\" class=\"vn-sticky-box\">\r\n                    <div class=\"vn-panel-title\" style=\"display:flex; align-items:center; gap:5px; color:#2271b1;\">\r\n                        <span class=\"dashicons dashicons-clock\"><\/span>\r\n                        <span>\u0633\u0641\u0627\u0631\u0634 \u0641\u0639\u0627\u0644<\/span>\r\n                    <\/div>\r\n                    <active-order-component :order=\"activeOrder\" :timer=\"timerDisplay\" :sms-code=\"smsCode\" @copy=\"copyToClipboard\" @copy-smart=\"copyNumberSmart\" @cancel=\"cancelOrder\" @finish=\"finishOrder\"><\/active-order-component>\r\n                <\/div>\r\n                <div v-else class=\"vn-sticky-box vn-panel vn-placeholder-box\">\r\n                    <span class=\"dashicons dashicons-cart\" style=\"font-size: 40px; color: #ccc; margin-bottom: 10px;\"><\/span>\r\n                    <p>\u0647\u0646\u0648\u0632 \u0634\u0645\u0627\u0631\u0647\u200c\u0627\u06cc \u0646\u062e\u0631\u06cc\u062f\u0647\u200c\u0627\u06cc\u062f.<\/p>\r\n                    <small>\u0633\u0631\u0648\u06cc\u0633\u06cc \u0631\u0627 \u0627\u0632 \u0644\u06cc\u0633\u062a \u0633\u0645\u062a \u0631\u0627\u0633\u062a \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f \u0648 \u06a9\u0634\u0648\u0631 \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u0631\u0627 \u0628\u0632\u0646\u06cc\u062f.<\/small>\r\n                <\/div>\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\t\t    <div v-show=\"currentTab === 'wallet'\">\r\n\r\n        <div class=\"vn-panel vn-fade-in\">\r\n            <div class=\"vn-wallet-header\">\r\n                <div class=\"vn-wallet-icon-box\">\r\n                    <span class=\"dashicons dashicons-money\"><\/span>\r\n                <\/div>\r\n                <div class=\"vn-heading\">\u0627\u0641\u0632\u0627\u06cc\u0634 \u0627\u0639\u062a\u0628\u0627\u0631 \u062d\u0633\u0627\u0628<\/div>\r\n                <p>\u0645\u0628\u0644\u063a \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0631\u062f\u0647 \u0648 \u062f\u0631\u06af\u0627\u0647 \u067e\u0631\u062f\u0627\u062e\u062a \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f.<\/p>\r\n            <\/div>\r\n\r\n            <div class=\"vn-wallet-form\">\r\n                <label>\u0645\u0628\u0644\u063a \u0634\u0627\u0631\u0698 (\u062a\u0648\u0645\u0627\u0646)<\/label>\r\n                <input type=\"number\" v-model=\"depositAmount\" class=\"vn-input-amount\" placeholder=\"\u0645\u062b\u0644\u0627 \u06f5\u06f0\u06f0\u06f0\u06f0\">\r\n\r\n                <div class=\"vn-quick-amounts\">\r\n                    <button @click=\"depositAmount=50000\">\u06f5\u06f0,\u06f0\u06f0\u06f0<\/button>\r\n                    <button @click=\"depositAmount=100000\">\u06f1\u06f0\u06f0,\u06f0\u06f0\u06f0<\/button>\r\n                    <button @click=\"depositAmount=200000\">\u06f2\u06f0\u06f0,\u06f0\u06f0\u06f0<\/button>\r\n                    <button @click=\"depositAmount=500000\">\u06f5\u06f0\u06f0,\u06f0\u06f0\u06f0<\/button>\r\n                <\/div>\r\n\r\n                <label style=\"margin-top:20px;\">\u0627\u0646\u062a\u062e\u0627\u0628 \u062f\u0631\u06af\u0627\u0647 \u067e\u0631\u062f\u0627\u062e\u062a<\/label>\r\n                <div class=\"vn-gateways-grid\">\r\n                    <div v-for=\"gw in gateways\" :key=\"gw.id\"\r\n                         class=\"vn-gateway-card\"\r\n                         :class=\"{ active: selectedGateway === gw.id }\"\r\n                         @click=\"selectedGateway = gw.id\">\r\n                        <img :src=\"gw.icon\" class=\"vn-gw-icon\" v-if=\"gw.icon\">\r\n                        <span class=\"dashicons dashicons-shield\" v-else><\/span>\r\n                        <div class=\"vn-gw-info\">\r\n                            <span class=\"vn-gw-title\">{{ gw.title }}<\/span>\r\n                            <span class=\"vn-gw-desc\">{{ gw.desc }}<\/span>\r\n                        <\/div>\r\n                        <span class=\"vn-gw-check\" v-if=\"selectedGateway === gw.id\">\r\n                            <span class=\"dashicons dashicons-yes\"><\/span>\r\n                        <\/span>\r\n                    <\/div>\r\n                <\/div>\r\n                <div v-if=\"gateways.length === 0\" class=\"vn-alert vn-alert-warning\" style=\"margin-top:10px;\">\r\n                    \u062f\u0631 \u062d\u0627\u0644 \u062d\u0627\u0636\u0631 \u062f\u0631\u06af\u0627\u0647 \u067e\u0631\u062f\u0627\u062e\u062a \u0641\u0639\u0627\u0644\u06cc \u0648\u062c\u0648\u062f \u0646\u062f\u0627\u0631\u062f.\r\n                <\/div>\r\n                <button @click=\"initiatePayment\" class=\"vn-btn-pay\" :disabled=\"processing\">\r\n                <span v-if=\"processing\">\r\n                    <span class=\"dashicons dashicons-update vn-spin\"><\/span> \u062f\u0631 \u062d\u0627\u0644 \u0627\u062a\u0635\u0627\u0644 \u0628\u0647 \u062f\u0631\u06af\u0627\u0647...\r\n                <\/span>\r\n                    <span v-else>\r\n                    \u067e\u0631\u062f\u0627\u062e\u062a {{ formatPrice(depositAmount) }} \u062a\u0648\u0645\u0627\u0646\r\n                <\/span>\r\n                <\/button>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"vn-panel vn-fade-in\" style=\"margin-top:20px;\">\r\n            <div class=\"vn-heading\">\u062a\u0627\u0631\u06cc\u062e\u0686\u0647 \u0627\u0641\u0632\u0627\u06cc\u0634 \u0645\u0648\u062c\u0648\u062f\u06cc<\/div>\r\n\r\n            <div v-if=\"depositLoading\" class=\"vn-loading\"><span class=\"vn-spinner\"><\/span> \u062f\u0631 \u062d\u0627\u0644 \u062f\u0631\u06cc\u0627\u0641\u062a...<\/div>\r\n            <div v-else-if=\"depositHistory.length === 0\" class=\"vn-empty-state\">\u0647\u0646\u0648\u0632 \u0634\u0627\u0631\u0698\u06cc \u0627\u0646\u062c\u0627\u0645 \u0646\u0634\u062f\u0647 \u0627\u0633\u062a.<\/div>\r\n\r\n            <div v-else>\r\n                <div class=\"vn-table-responsive\">\r\n                    <table class=\"vn-history-table\">\r\n                        <thead><tr><th>\u062a\u0627\u0631\u06cc\u062e<\/th><th>\u0645\u0628\u0644\u063a<\/th><th>\u062a\u0648\u0636\u06cc\u062d\u0627\u062a<\/th><th>\u0648\u0636\u0639\u06cc\u062a<\/th><\/tr><\/thead>\r\n                        <tbody>\r\n                        <tr v-for=\"item in depositHistory\" :key=\"item.id\">\r\n                            <td>{{ item.date }}<\/td>\r\n                            <td class=\"vn-text-success\">+{{ formatPrice(item.amount) }} \u062a<\/td>\r\n                            <td>{{ item.desc }}<\/td>\r\n                            <td><span class=\"vn-badge vn-badge-success\">\u0645\u0648\u0641\u0642<\/span><\/td>\r\n                        <\/tr>\r\n                        <\/tbody>\r\n                    <\/table>\r\n                <\/div>\r\n\r\n                <div class=\"vn-pagination-bar\" v-if=\"depositHistory.length > 0 || depPage > 1\">\r\n                    <div class=\"vn-pg-left\">\r\n                        <span>\u062a\u0639\u062f\u0627\u062f:<\/span>\r\n                        <select v-model=\"depPerPage\" @change=\"depPage=1; fetchDepositHistory()\" class=\"vn-pg-select\">\r\n                            <option :value=\"5\">5<\/option>\r\n                            <option :value=\"10\">10<\/option>\r\n                            <option :value=\"20\">20<\/option>\r\n                        <\/select>\r\n                    <\/div>\r\n                    <div class=\"vn-pg-center\">\u0635\u0641\u062d\u0647 {{ depPage }} \u0627\u0632 {{ depTotalPages }}<\/div>\r\n                    <div class=\"vn-pg-right\">\r\n                        <button @click=\"changeDepPage(depPage - 1)\" :disabled=\"depPage <= 1\" class=\"vn-pg-btn\"><span class=\"dashicons dashicons-arrow-right-alt2\"><\/span><\/button>\r\n                        <button @click=\"changeDepPage(depPage + 1)\" :disabled=\"depPage >= depTotalPages\" class=\"vn-pg-btn\"><span class=\"dashicons dashicons-arrow-left-alt2\"><\/span><\/button>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\t\t    <div v-show=\"currentTab === 'history'\">\r\n        <div class=\"vn-panel\">\r\n            <div class=\"vn-heading\">\u062a\u0627\u0631\u06cc\u062e\u0686\u0647 \u0633\u0641\u0627\u0631\u0634\u0627\u062a \u0645\u0646<\/div>\r\n            <div v-if=\"historyLoading\" class=\"vn-loading\">\u062f\u0631\u062d\u0627\u0644 \u062f\u0631\u06cc\u0627\u0641\u062a...<\/div>\r\n            <div v-else-if=\"ordersHistory.length === 0\" class=\"vn-empty-state\">\u0647\u06cc\u0686 \u0633\u0641\u0627\u0631\u0634\u06cc \u06cc\u0627\u0641\u062a \u0646\u0634\u062f.<\/div>\r\n            <div v-else class=\"vn-table-responsive\">\r\n                <table class=\"vn-history-table\">\r\n                    <thead><tr><th width=\"60\">\u0634\u0646\u0627\u0633\u0647<\/th><th>\u0633\u0631\u0648\u06cc\u0633<\/th><th>\u0634\u0645\u0627\u0631\u0647<\/th><th>\u06a9\u062f<\/th><th>\u0647\u0632\u06cc\u0646\u0647<\/th><th>\u0648\u0636\u0639\u06cc\u062a<\/th><th>\u062a\u0627\u0631\u06cc\u062e<\/th><\/tr><\/thead>\r\n                    <tbody>\r\n                    <tr v-for=\"item in ordersHistory\" :key=\"item.id\">\r\n                        <td style=\"font-weight:bold; color:#777;\">#{{ item.id }}<\/td>\r\n                        <td>\r\n                            <div class=\"vn-history-info\">\r\n                                <div class=\"vn-h-row\" v-if=\"item.service\"><img :src=\"item.icon || vnDefaultIcon\" @error=\"handleImageError\" class=\"vn-tiny-icon\"><span>{{ item.service }}<\/span><\/div>\r\n                                <div class=\"vn-h-row\" v-if=\"item.country\"><img :src=\"item.flag || vnDefaultIcon\" @error=\"handleImageError\" class=\"vn-tiny-flag\"><span class=\"vn-text-muted\">{{ item.country }}<\/span><\/div>\r\n                            <\/div>\r\n                        <\/td>\r\n                        <td dir=\"ltr\" @click=\"copyNumberSmart(item.number, item.prefix, 'plus')\" class=\"vn-td-copy\" title=\"\u06a9\u067e\u06cc \u0634\u0645\u0627\u0631\u0647\">{{ item.number }}<\/td>\r\n                        <td class=\"center-text\"><div v-if=\"item.code !== '-'\" @click=\"copyToClipboard(item.code)\" class=\"vn-code-badge clickable\" title=\"\u06a9\u067e\u06cc \u06a9\u062f\">{{ item.code }}<\/div><span v-else>-<\/span><\/td>\r\n                        <td>{{ formatPrice(item.price) }} \u062a<\/td>\r\n                        <td><span :class=\"'vn-badge vn-badge-' + item.status_class\">{{ item.status_label }}<\/span><\/td>\r\n                        <td class=\"vn-date-col\">{{ item.date }}<\/td>\r\n                    <\/tr>\r\n                    <\/tbody>\r\n                <\/table>\r\n\r\n                <div class=\"vn-pagination-bar\" v-if=\"ordersHistory.length > 0 || histPage > 1\">\r\n                    <div class=\"vn-pg-left\">\r\n                        <span>\u062a\u0639\u062f\u0627\u062f \u0646\u0645\u0627\u06cc\u0634:<\/span>\r\n                        <select v-model=\"histPerPage\" @change=\"histPage=1; fetchHistory()\" class=\"vn-pg-select\">\r\n                            <option :value=\"10\">10<\/option>\r\n                            <option :value=\"20\">20<\/option>\r\n                            <option :value=\"30\">30<\/option>\r\n                            <option :value=\"50\">50<\/option>\r\n                            <option :value=\"100\">100<\/option>\r\n                        <\/select>\r\n                    <\/div>\r\n                    <div class=\"vn-pg-center\">\r\n                        \u0635\u0641\u062d\u0647 {{ histPage }} \u0627\u0632 {{ histTotalPages }} (\u06a9\u0644: {{ histTotalItems }})\r\n                    <\/div>\r\n                    <div class=\"vn-pg-right\">\r\n                        <button @click=\"changeHistPage(histPage - 1)\" :disabled=\"histPage <= 1\" class=\"vn-pg-btn\"><span class=\"dashicons dashicons-arrow-right-alt2\"><\/span><\/button>\r\n                        <button @click=\"changeHistPage(histPage + 1)\" :disabled=\"histPage >= histTotalPages\" class=\"vn-pg-btn\"><span class=\"dashicons dashicons-arrow-left-alt2\"><\/span><\/button>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\t\t    <div v-show=\"currentTab === 'transactions'\">\r\n        <div class=\"vn-panel\">\r\n            <div class=\"vn-heading\">\u062a\u0631\u0627\u06a9\u0646\u0634\u200c\u0647\u0627\u06cc \u0645\u0627\u0644\u06cc<\/div>\r\n\r\n            <div v-if=\"transactionsLoading\" class=\"vn-loading\"><span class=\"vn-spinner\"><\/span> \u062f\u0631 \u062d\u0627\u0644 \u062f\u0631\u06cc\u0627\u0641\u062a...<\/div>\r\n            <div v-else-if=\"transactions.length === 0\" class=\"vn-empty-state\">\u0647\u0646\u0648\u0632 \u062a\u0631\u0627\u06a9\u0646\u0634\u06cc \u062b\u0628\u062a \u0646\u0634\u062f\u0647 \u0627\u0633\u062a.<\/div>\r\n\r\n            <div v-else class=\"vn-trans-list\">\r\n                <div v-for=\"t in transactions\" :key=\"t.id\" class=\"vn-trans-item\">\r\n                    <div class=\"vn-trans-icon\" :class=\"t.icon_class\">\r\n                        <span class=\"dashicons\" :class=\"{\r\n                            'dashicons-cart': t.type === 'purchase',\r\n                            'dashicons-undo': t.type === 'refund',\r\n                            'dashicons-plus': t.type === 'deposit'\r\n                        }\"><\/span>\r\n                    <\/div>\r\n                    <div class=\"vn-trans-details\">\r\n                        <span class=\"vn-trans-title\">{{ t.label }}<\/span>\r\n                        <span class=\"vn-trans-desc\">{{ t.desc }}<\/span>\r\n                        <span class=\"vn-trans-date\">{{ t.date }}<\/span>\r\n                    <\/div>\r\n                    <div class=\"vn-trans-amount\" :class=\"{ 'negative': t.amount < 0, 'positive': t.amount > 0 }\">\r\n                        <span dir=\"ltr\">{{ formatPrice(t.amount) }}<\/span> <small>\u062a\u0648\u0645\u0627\u0646<\/small>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"vn-pagination-bar\" v-if=\"transactions.length > 0 || transPage > 1\">\r\n                <div class=\"vn-pg-left\">\r\n                    <span>\u062a\u0639\u062f\u0627\u062f:<\/span>\r\n                    <select v-model=\"transPerPage\" @change=\"transPage=1; fetchTransactions()\" class=\"vn-pg-select\">\r\n                        <option :value=\"10\">10<\/option>\r\n                        <option :value=\"20\">20<\/option>\r\n                        <option :value=\"30\">30<\/option>\r\n                        <option :value=\"50\">50<\/option>\r\n                        <option :value=\"100\">100<\/option>\r\n                    <\/select>\r\n                <\/div>\r\n                <div class=\"vn-pg-center\">\r\n                    \u0635\u0641\u062d\u0647 {{ transPage }} \u0627\u0632 {{ transTotalPages }}\r\n                <\/div>\r\n                <div class=\"vn-pg-right\">\r\n                    <button @click=\"changeTransPage(transPage - 1)\" :disabled=\"transPage <= 1\" class=\"vn-pg-btn\"><span class=\"dashicons dashicons-arrow-right-alt2\"><\/span><\/button>\r\n                    <button @click=\"changeTransPage(transPage + 1)\" :disabled=\"transPage >= transTotalPages\" class=\"vn-pg-btn\"><span class=\"dashicons dashicons-arrow-left-alt2\"><\/span><\/button>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\t\t    <div v-if=\"currentTab === 'support'\" class=\"vn-fade-in\">\r\n\r\n        <div v-if=\"supportView === 'list'\">\r\n\r\n            <div class=\"vn-support-header\">\r\n                <div class=\"vn-sh-right\">\r\n                    <div class=\"vn-heading\">\u062a\u06cc\u06a9\u062a\u200c\u0647\u0627\u06cc \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc<\/div>\r\n                    <span class=\"vn-text-muted\" style=\"font-size:12px;\">\u0644\u06cc\u0633\u062a \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u200c\u0647\u0627\u06cc \u0627\u0631\u0633\u0627\u0644 \u0634\u062f\u0647 \u0634\u0645\u0627<\/span>\r\n                <\/div>\r\n                <button class=\"vn-btn-new-ticket\" @click=\"supportView = 'create'\">\r\n                    <span class=\"dashicons dashicons-plus-alt2\"><\/span> \u062b\u0628\u062a \u062a\u06cc\u06a9\u062a \u062c\u062f\u06cc\u062f\r\n                <\/button>\r\n            <\/div>\r\n\r\n            <div class=\"vn-filter-bar\">\r\n                <button class=\"vn-filter-tab\" :class=\"{active: ticketFilter==='all'}\" @click=\"fetchTickets('all')\">\u0647\u0645\u0647<\/button>\r\n                <button class=\"vn-filter-tab\" :class=\"{active: ticketFilter==='open'}\" @click=\"fetchTickets('open')\">\u0628\u0627\u0632 \/ \u062f\u0631 \u062c\u0631\u06cc\u0627\u0646<\/button>\r\n                <button class=\"vn-filter-tab\" :class=\"{active: ticketFilter==='closed'}\" @click=\"fetchTickets('closed')\">\u0628\u0633\u062a\u0647 \u0634\u062f\u0647<\/button>\r\n            <\/div>\r\n\r\n            <div v-if=\"ticketsLoading\" class=\"vn-loading\">\r\n                <span class=\"vn-spinner\"><\/span> \u062f\u0631\u062d\u0627\u0644 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u062a\u06cc\u06a9\u062a\u200c\u0647\u0627...\r\n            <\/div>\r\n\r\n            <div v-else-if=\"tickets.length === 0\" class=\"vn-empty-state-modern\">\r\n                <div class=\"vn-empty-icon\">\r\n                    <span class=\"dashicons dashicons-email-alt\"><\/span>\r\n                <\/div>\r\n                <div class=\"vn-heading\">\u0647\u0646\u0648\u0632 \u062a\u06cc\u06a9\u062a\u06cc \u062b\u0628\u062a \u0646\u06a9\u0631\u062f\u0647\u200c\u0627\u06cc\u062f!<\/div>\r\n                <p>\u0627\u06af\u0631 \u0633\u0648\u0627\u0644 \u06cc\u0627 \u0645\u0634\u06a9\u0644\u06cc \u062f\u0627\u0631\u06cc\u062f\u060c \u0647\u0645\u06cc\u0646 \u062d\u0627\u0644\u0627 \u06cc\u06a9 \u062a\u06cc\u06a9\u062a \u062c\u062f\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f.<\/p>\r\n                <button class=\"vn-btn-outline\" @click=\"supportView = 'create'\">\u0627\u06cc\u062c\u0627\u062f \u0627\u0648\u0644\u06cc\u0646 \u062a\u06cc\u06a9\u062a<\/button>\r\n            <\/div>\r\n\r\n            <div v-else class=\"vn-tickets-list\">\r\n                <div v-for=\"t in tickets\" :key=\"t.id\" class=\"vn-ticket-card\" @click=\"openTicket(t.id)\">\r\n                    <div class=\"vn-ticket-icon\" :class=\"'status-' + t.status\">\r\n                        <span class=\"dashicons\" :class=\"t.status === 'closed' ? 'dashicons-yes' : (t.status === 'answered' ? 'dashicons-admin-comments' : 'dashicons-email')\"><\/span>\r\n                    <\/div>\r\n                    <div class=\"vn-ticket-content\">\r\n                        <div class=\"vn-ticket-top\">\r\n                            <span class=\"vn-ticket-subject\">{{t.subject}}<\/span>\r\n                            <span class=\"vn-ticket-date\">{{ t.date }}<\/span>\r\n                        <\/div>\r\n                        <div class=\"vn-ticket-bottom\">\r\n                            <span class=\"vn-ticket-dept\">{{ t.department }}<\/span>\r\n                            <span class=\"vn-status-badge\" :class=\"t.status\">{{ getStatusLabel(t.status) }}<\/span>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div v-if=\"supportView === 'create'\">\r\n            <div style=\"margin-bottom:15px;\">\r\n                <button class=\"vn-btn vn-btn-text\" @click=\"supportView = 'list'\">\u0628\u0627\u0632\u06af\u0634\u062a<\/button>\r\n            <\/div>\r\n            <div class=\"vn-heading\">\u0627\u0631\u0633\u0627\u0644 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc<\/div>\r\n            <form @submit.prevent=\"submitNewTicket\">\r\n                <div class=\"vn-form-group\">\r\n                    <label>\u0639\u0646\u0648\u0627\u0646 \u062a\u06cc\u06a9\u062a<\/label>\r\n                    <input type=\"text\" v-model=\"newTicket.subject\" class=\"vn-input\" required placeholder=\"\u0645\u062b\u0644\u0627\u064b: \u0645\u0634\u06a9\u0644 \u062f\u0631 \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u062f\">\r\n                <\/div>\r\n                <div class=\"vn-row\">\r\n                    <div class=\"vn-col\">\r\n                        <label>\u062f\u067e\u0627\u0631\u062a\u0645\u0627\u0646<\/label>\r\n                        <select v-model=\"newTicket.department_id\" class=\"vn-input\">\r\n                            <option v-for=\"d in settings.departments\" :value=\"d.dept_id\">{{ d.dept_label }}<\/option>\r\n                        <\/select>\r\n                    <\/div>\r\n                    <div class=\"vn-col\">\r\n                        <label>\u0627\u0648\u0644\u0648\u06cc\u062a<\/label>\r\n                        <select v-model=\"newTicket.priority\" class=\"vn-input\">\r\n                            <option value=\"normal\">\u0639\u0627\u062f\u06cc<\/option>\r\n                            <option value=\"high\">\u0641\u0648\u0631\u06cc<\/option>\r\n                            <option value=\"low\">\u06a9\u0645<\/option>\r\n                        <\/select>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"vn-form-group\">\r\n                    <label>\u0634\u0646\u0627\u0633\u0647 \u0633\u0641\u0627\u0631\u0634\u0627\u062a \u0645\u0631\u062a\u0628\u0637 (\u0627\u062e\u062a\u06cc\u0627\u0631\u06cc)<\/label>\r\n                    <input type=\"text\" v-model=\"newTicket.related_orders\" class=\"vn-input\" placeholder=\"\u0645\u062b\u0644\u0627\u064b: 150, 152 (\u0628\u0627 \u06a9\u0627\u0645\u0627 \u062c\u062f\u0627 \u06a9\u0646\u06cc\u062f)\">\r\n                    <small style=\"color:#777; font-size:11px;\">\u0627\u06af\u0631 \u062a\u06cc\u06a9\u062a \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 \u0633\u0641\u0627\u0631\u0634 \u062e\u0627\u0635\u06cc \u0627\u0633\u062a\u060c \u0634\u0645\u0627\u0631\u0647 \u0622\u0646 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0633\u0631\u06cc\u0639\u200c\u062a\u0631 \u0628\u0631\u0631\u0633\u06cc \u0634\u0648\u062f.<\/small>\r\n                <\/div>\r\n                <div class=\"vn-form-group\">\r\n                    <label>\u0645\u062a\u0646 \u067e\u06cc\u0627\u0645<\/label>\r\n                    <textarea v-model=\"newTicket.message\" class=\"vn-input\" rows=\"5\" required><\/textarea>\r\n                <\/div>\r\n                <div class=\"vn-form-group\">\r\n                    <label>\u067e\u06cc\u0648\u0633\u062a \u062a\u0635\u0648\u06cc\u0631 (JPG, PNG)<\/label>\r\n                    <input type=\"file\" ref=\"ticketFile\" accept=\".jpg,.png,.jpeg\">\r\n                <\/div>\r\n                <button type=\"submit\" class=\"vn-btn vn-btn-primary vn-block\" :disabled=\"sendingTicket\">\r\n                    {{ sendingTicket ? '\u062f\u0631\u062d\u0627\u0644 \u0627\u0631\u0633\u0627\u0644...' : '\u0627\u0631\u0633\u0627\u0644 \u062a\u06cc\u06a9\u062a' }}\r\n                <\/button>\r\n            <\/form>\r\n        <\/div>\r\n\r\n        <div v-if=\"supportView === 'single'\" class=\"vn-single-ticket-wrap\">\r\n\r\n            <div class=\"vn-chat-header\">\r\n                <div class=\"vn-ch-info\">\r\n                    <button class=\"vn-btn-back-icon\" @click=\"supportView = 'list'\" title=\"\u0628\u0627\u0632\u06af\u0634\u062a\">\r\n                        <span class=\"dashicons dashicons-arrow-right-alt2\"><\/span>\r\n                    <\/button>\r\n                    <div>\r\n                        <div class=\"vn-ch-title\">\u062a\u06cc\u06a9\u062a #{{ singleTicket.details?.id }}<\/div>\r\n                        <span class=\"vn-ch-status\" :class=\"singleTicket.details?.status\">\r\n                                    {{ getStatusLabel(singleTicket.details?.status) }}\r\n                                <\/span>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"vn-ch-actions\" v-if=\"singleTicket.details?.status !== 'closed'\">\r\n                    <button @click=\"openCloseDialog\" class=\"vn-btn-close-ticket\">\r\n                        <span class=\"dashicons dashicons-no\"><\/span> \u0628\u0633\u062a\u0646 \u062a\u06cc\u06a9\u062a\r\n                    <\/button>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"vn-ticket-body-scroll\" id=\"vn-chat-scroll\">\r\n\r\n                <div v-if=\"singleTicket.orders && singleTicket.orders.length > 0\" class=\"vn-smart-order-list\">\r\n                    <div class=\"vn-sol-title\">\r\n                        <span class=\"dashicons dashicons-info\"><\/span> \u0633\u0641\u0627\u0631\u0634\u0627\u062a \u0645\u0631\u062a\u0628\u0637:\r\n                    <\/div>\r\n                    <div v-for=\"ord in singleTicket.orders\" :key=\"ord.id\" class=\"vn-order-compact-row\">\r\n                        <div class=\"vn-ocr-col id\">\r\n                            <strong>#{{ ord.id }}<\/strong>\r\n                        <\/div>\r\n\r\n                        <div class=\"vn-ocr-col info\">\r\n                            <div class=\"vn-ocr-item\">\r\n                                <img :src=\"vnDefaultIcon\" class=\"vn-tiny-icon\"> {{ ord.service_name }}\r\n                            <\/div>\r\n                            <div class=\"vn-ocr-item\">\r\n                                <img :src=\"vnDefaultIcon\" class=\"vn-tiny-flag\"> {{ ord.country_name }}\r\n                            <\/div>\r\n                        <\/div>\r\n\r\n                        <div class=\"vn-ocr-col number\" dir=\"ltr\">\r\n                            <span>{{ ord.phone_number }}<\/span>\r\n                            <span v-if=\"ord.sms_code && ord.sms_code !== '-'\" class=\"vn-ocr-code\">{{ ord.sms_code }}<\/span>\r\n                        <\/div>\r\n\r\n                        <div class=\"vn-ocr-col meta\">\r\n                            <span>{{ formatPrice(ord.user_price) }} \u062a<\/span>\r\n                            <small>{{ ord.created_at }}<\/small>\r\n                        <\/div>\r\n\r\n                        <div class=\"vn-ocr-col status\">\r\n                                    <span class=\"vn-badge\" :class=\"getOrderStatusClass(ord.status)\">\r\n                                        {{ getOrderStatusLabel(ord.status) }}\r\n                                    <\/span>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"vn-chat-messages\">\r\n                    <div v-for=\"rep in singleTicket.replies\" class=\"vn-bubble-row\" :class=\"rep.is_admin == 1 ? 'admin-row' : 'user-row'\">\r\n                        <div class=\"vn-chat-bubble-modern\" :class=\"rep.is_admin == 1 ? 'admin' : 'user'\">\r\n                            <div class=\"vn-bubble-text\" v-html=\"nl2br(rep.message)\"><\/div>\r\n\r\n                            <div v-if=\"rep.attachment_path\" class=\"vn-bubble-attach\">\r\n                                <a :href=\"rep.attachment_path\" target=\"_blank\">\r\n                                    <span class=\"dashicons dashicons-paperclip\"><\/span> \u062f\u0627\u0646\u0644\u0648\u062f \u067e\u06cc\u0648\u0633\u062a\r\n                                <\/a>\r\n                            <\/div>\r\n\r\n                            <div class=\"vn-bubble-meta\">\r\n                                <span>{{ rep.is_admin == 1 ? '\u067e\u0634\u062a\u06cc\u0628\u0627\u0646' : '\u0634\u0645\u0627' }}<\/span>\r\n                                <span class=\"vn-time\">{{ rep.created_at.split(' ')[1] }}<\/span>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"vn-reply-area-modern\" v-if=\"singleTicket.details?.status !== 'closed'\">\r\n                <div class=\"vn-reply-input-wrapper\">\r\n                    <textarea v-model=\"replyMessage\" placeholder=\"\u067e\u06cc\u0627\u0645 \u062e\u0648\u062f \u0631\u0627 \u0628\u0646\u0648\u06cc\u0633\u06cc\u062f...\" rows=\"1\" class=\"vn-reply-textarea\"><\/textarea>\r\n                <\/div>\r\n\r\n                <div class=\"vn-reply-actions\">\r\n                    <div class=\"vn-upload-wrapper\">\r\n                        <input type=\"file\" ref=\"replyFile\" id=\"vn-file-input\" class=\"vn-hidden-input\" accept=\".jpg,.png,.jpeg\" @change=\"handleFileSelect\">\r\n                        <label for=\"vn-file-input\" class=\"vn-btn-attach\" title=\"\u067e\u06cc\u0648\u0633\u062a \u062a\u0635\u0648\u06cc\u0631\">\r\n                            <span class=\"dashicons dashicons-paperclip\"><\/span>\r\n                        <\/label>\r\n                        <span v-if=\"selectedFileName\" class=\"vn-file-name-badge\">\r\n                                    {{ selectedFileName }} <span class=\"vn-remove-file\" @click=\"clearFile\">&times;<\/span>\r\n                                <\/span>\r\n                    <\/div>\r\n\r\n                    <button class=\"vn-btn-send-modern\" @click=\"sendReply\" :disabled=\"sendingReply || (!replyMessage && !selectedFileName)\">\r\n                        <span v-if=\"sendingReply\" class=\"vn-spinner-sm\"><\/span>\r\n                        <span v-else class=\"dashicons dashicons-arrow-left-alt2\"><\/span>\r\n                    <\/button>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div v-else class=\"vn-alert vn-alert-warning\" style=\"margin: 10px; text-align:center;\">\r\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"36\" height=\"36\">\r\n                    <path d=\"M12,2C9.243,2,7,4.243,7,7v3H6c-1.103,0-2,0.897-2,2v8c0,1.103,0.897,2,2,2h12c1.103,0,2-0.897,2-2v-8 c0-1.103-0.897-2-2-2h-1V7C17,4.243,14.757,2,12,2z M12,17c-1.103,0-2-0.897-2-2s0.897-2,2-2s2,0.897,2,2S13.103,17,12,17z M9,10V7 c0-1.654,1.346-3,3-3s3,1.346,3,3v3H9z\"\/>\r\n                <\/svg> \u0627\u06cc\u0646 \u062a\u06cc\u06a9\u062a \u0628\u0633\u062a\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a.\r\n\r\n                <div class=\"vn-rating-box\" v-if=\"!singleTicket.details.rating || singleTicket.details.rating == 0\">\r\n                    <p style=\"margin: 10px 0 5px; font-size:12px; color:#666;\">\u0627\u0632 \u0646\u062d\u0648\u0647 \u067e\u0627\u0633\u062e\u06af\u0648\u06cc\u06cc \u0631\u0627\u0636\u06cc \u0628\u0648\u062f\u06cc\u062f\u061f<\/p>\r\n                    <div class=\"vn-stars\">\r\n                                <span v-for=\"i in 5\" :key=\"i\"\r\n                                      class=\"dashicons\"\r\n                                      :class=\"tempRating >= i ? 'dashicons-star-filled' : 'dashicons-star-empty'\"\r\n                                      @mouseover=\"tempRating = i\"\r\n                                      @click=\"submitRating(i)\"><\/span>\r\n                    <\/div>\r\n                <\/div>\r\n                <div v-else style=\"margin-top:10px; color:#00a32a; font-weight:bold;\">\r\n                    <span class=\"dashicons dashicons-star-filled\"><\/span> \u0627\u0645\u062a\u06cc\u0627\u0632 \u062b\u0628\u062a \u0634\u062f\u0647: {{ singleTicket.details.rating }} \u0627\u0632 \u06f5\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\t\t    <div v-show=\"currentTab === 'profile'\" class=\"vn-profile-layout\">\r\n\r\n        <div class=\"vn-profile-sidebar\">\r\n            <div class=\"vn-profile-menu\">\r\n                <button @click=\"profileTab = 'info'\" :class=\"{ active: profileTab === 'info' }\">\r\n                    <span class=\"dashicons dashicons-id\"><\/span> \u0645\u0634\u062e\u0635\u0627\u062a\r\n                <\/button>\r\n                <button @click=\"profileTab = 'apikey'\" :class=\"{ active: profileTab === 'apikey' }\">\r\n                    <span class=\"dashicons dashicons-editor-code\"><\/span> API Key\r\n                <\/button>\r\n                <button @click=\"profileTab = 'advanced'\" :class=\"{ active: profileTab === 'advanced' }\">\r\n                    <span class=\"dashicons dashicons-admin-settings\"><\/span> \u067e\u06cc\u0634\u0631\u0641\u062a\u0647\r\n                <\/button>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"vn-profile-content\">\r\n\r\n            <div v-if=\"profileTab === 'info'\" class=\"vn-panel vn-fade-in\">\r\n                <div class=\"vn-section-header\">\r\n                    <div class=\"vn-heading\">\u0645\u0634\u062e\u0635\u0627\u062a \u06a9\u0627\u0631\u0628\u0631<\/div>\r\n                    <button @click=\"openProfileEditModal\" class=\"vn-btn-primary-outline\"><span class=\"dashicons dashicons-edit\"><\/span> \u0648\u06cc\u0631\u0627\u06cc\u0634 \u0627\u0637\u0644\u0627\u0639\u0627\u062a<\/button>\r\n                <\/div>\r\n\r\n                <div class=\"vn-avatar-section\">\r\n                    <div class=\"vn-avatar-wrapper\">\r\n                        <img :src=\"userProfile.avatar\" class=\"vn-user-avatar\">\r\n                        <div v-if=\"uploadingAvatar\" class=\"vn-avatar-overlay\"><span class=\"vn-spinner\"><\/span><\/div>\r\n                    <\/div>\r\n                    <div class=\"vn-change-avatar-box\">\r\n                        <span class=\"dashicons dashicons-camera\" style=\"font-size:16px; width:16px; height:16px;\"><\/span>\r\n                        <span class=\"vn-link-change\" @click=\"$refs.avatarInput.click()\">\u062a\u063a\u06cc\u06cc\u0631 \u062a\u0635\u0648\u06cc\u0631<\/span>\r\n                        <input type=\"file\" ref=\"avatarInput\" @change=\"handleAvatarUpload\" style=\"display:none\" accept=\"image\/*\">\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"vn-info-display-grid\">\r\n                    <div class=\"vn-info-card\">\r\n                        <label>\u0646\u0627\u0645 \u0648 \u0646\u0627\u0645 \u062e\u0627\u0646\u0648\u0627\u062f\u06af\u06cc<\/label>\r\n                        <div class=\"vn-val\">{{ userProfile.first_name || '-' }} {{ userProfile.last_name }}<\/div>\r\n                    <\/div>\r\n                    <div class=\"vn-info-card\">\r\n                        <label>\u0646\u0627\u0645 \u06a9\u0627\u0631\u0628\u0631\u06cc<\/label>\r\n                        <div class=\"vn-val\">{{ userProfile.username }}<\/div>\r\n                    <\/div>\r\n                    <div class=\"vn-info-card\">\r\n                        <label>\u0634\u0645\u0627\u0631\u0647 \u0645\u0648\u0628\u0627\u06cc\u0644<\/label>\r\n                        <div class=\"vn-val\">{{ userProfile.mobile }}<\/div>\r\n                    <\/div>\r\n                    <div class=\"vn-info-card\">\r\n                        <label>\u0627\u06cc\u0645\u06cc\u0644<\/label>\r\n                        <div class=\"vn-val\">{{ userProfile.email }}<\/div>\r\n                    <\/div>\r\n                    <div class=\"vn-info-card\">\r\n                        <label>\u0634\u0645\u0627\u0631\u0647 \u06a9\u0627\u0631\u062a<\/label>\r\n                        <div class=\"vn-val\">{{ userProfile.card || '\u062b\u0628\u062a \u0646\u0634\u062f\u0647' }}<\/div>\r\n                    <\/div>\r\n                    <div class=\"vn-info-card\">\r\n                        <label>\u0634\u0645\u0627\u0631\u0647 \u0634\u0628\u0627<\/label>\r\n                        <div class=\"vn-val\">{{ userProfile.sheba || '\u062b\u0628\u062a \u0646\u0634\u062f\u0647' }}<\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div v-if=\"profileTab === 'apikey'\" class=\"vn-panel vn-fade-in\">\r\n                <div class=\"vn-heading\">\u06a9\u0644\u06cc\u062f API \u0627\u062e\u062a\u0635\u0627\u0635\u06cc \u0634\u0645\u0627<\/div>\r\n                <p class=\"vn-text-muted\">\u0627\u06cc\u0646 \u06a9\u0644\u06cc\u062f \u0645\u062d\u0631\u0645\u0627\u0646\u0647 \u0627\u0633\u062a. \u0627\u0632 \u0622\u0646 \u0628\u0631\u0627\u06cc \u0627\u062a\u0635\u0627\u0644 \u0646\u0631\u0645\u200c\u0627\u0641\u0632\u0627\u0631\u0647\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\r\n                <div class=\"vn-api-box\"><code>{{ userProfile.api_key }}<\/code><\/div>\r\n                <button @click=\"regenerateKey\" class=\"vn-btn-success center-block\" :disabled=\"processing\">\r\n                    <span class=\"dashicons dashicons-update\"><\/span> \u062a\u063a\u06cc\u06cc\u0631 \u06a9\u0644\u06cc\u062f API\r\n                <\/button>\r\n            <\/div>\r\n\r\n            <div v-if=\"profileTab === 'advanced'\" class=\"vn-panel vn-fade-in\">\r\n                <div class=\"vn-heading\">\u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u0634\u062e\u0635\u06cc<\/div>\r\n\r\n                <div class=\"vn-setting-row\">\r\n                    <span>\u062d\u0627\u0644\u062a \u0646\u0645\u0627\u06cc\u0634 \u067e\u06cc\u0634\u200c\u0641\u0631\u0636<\/span>\r\n                    <div class=\"vn-toggle-group\">\r\n                        <button @click=\"setPref('layout', 'grid')\" :class=\"{active: settings.layout === 'grid'}\">\u0628\u0627\u06a9\u0633\u06cc<\/button>\r\n                        <button @click=\"setPref('layout', 'list')\" :class=\"{active: settings.layout === 'list'}\">\u0644\u06cc\u0633\u062a\u06cc<\/button>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"vn-setting-row\">\r\n                    <span>\u0627\u0639\u0644\u0627\u0646 \u0635\u0648\u062a\u06cc \u067e\u06cc\u0627\u0645\u06a9<\/span>\r\n                    <div class=\"vn-toggle-group\">\r\n                        <button @click=\"setPref('sound', true)\" :class=\"{active: settings.sound === true}\">\u0641\u0639\u0627\u0644<\/button>\r\n                        <button @click=\"setPref('sound', false)\" :class=\"{active: settings.sound === false}\">\u063a\u06cc\u0631\u0641\u0639\u0627\u0644<\/button>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"vn-setting-row\" v-if=\"settings.sound\">\r\n                    <span style=\"font-size:12px; color:#888;\">\u062a\u0633\u062a \u0635\u062f\u0627\u06cc \u0627\u0639\u0644\u0627\u0646:<\/span>\r\n                    <button @click=\"playSound\" class=\"vn-link-sm\" style=\"background:none; border:none; cursor:pointer;\">\u067e\u062e\u0634 \u0635\u062f\u0627\u06cc \u062a\u0633\u062a<\/button>\r\n                <\/div>\r\n            <\/div>\r\n\r\n        <\/div>\r\n    <\/div>\r\n\t\t    <div v-show=\"currentTab === 'referral'\" class=\"vn-fade-in\">\r\n\r\n        <div class=\"vn-panel\">\r\n            <div class=\"vn-ref-header\">\r\n                <div class=\"vn-rh-text\">\r\n                    <div class=\"vn-heading\">\u0633\u06cc\u0633\u062a\u0645 \u0647\u0645\u06a9\u0627\u0631\u06cc \u062f\u0631 \u0641\u0631\u0648\u0634<\/div>\r\n                    <p>\u0644\u06cc\u0646\u06a9 \u0627\u062e\u062a\u0635\u0627\u0635\u06cc \u062e\u0648\u062f \u0631\u0627 \u0628\u0647 \u0627\u0634\u062a\u0631\u0627\u06a9 \u0628\u06af\u0630\u0627\u0631\u06cc\u062f \u0648 \u062f\u0631\u0622\u0645\u062f \u06a9\u0633\u0628 \u06a9\u0646\u06cc\u062f.<\/p>\r\n                <\/div>\r\n                <div class=\"vn-rh-balance\" v-if=\"refSettings.mode === 'manual'\">\r\n                    <span>\u062f\u0631\u0622\u0645\u062f \u0642\u0627\u0628\u0644 \u0628\u0631\u062f\u0627\u0634\u062a:<\/span>\r\n                    <strong class=\"vn-text-success\">{{ formatPrice(userRef.balance) }} \u062a\u0648\u0645\u0627\u0646<\/strong>\r\n                    <button @click=\"openWithdrawModal\" class=\"vn-btn-withdraw\">\u062a\u0633\u0648\u06cc\u0647 \u062d\u0633\u0627\u0628<\/button>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"vn-referral-box-lg\">\r\n                <div class=\"vn-link-row\">\r\n                    <input type=\"text\" :value=\"userRef.link + (campaignSource ? '&source='+campaignSource : '')\" readonly id=\"refLinkInp\">\r\n                    <button @click=\"copyToClipboard(document.getElementById('refLinkInp').value)\">\u06a9\u067e\u06cc \u0644\u06cc\u0646\u06a9<\/button>\r\n                <\/div>\r\n                <div class=\"vn-campaign-maker\">\r\n                    <span class=\"dashicons dashicons-admin-links\"><\/span>\r\n                    <input type=\"text\" v-model=\"campaignSource\" placeholder=\"\u0646\u0627\u0645 \u06a9\u0645\u067e\u06cc\u0646 (\u0645\u062b\u0644\u0627: instagram)\" class=\"vn-inp-camp\">\r\n                    <small>\u0628\u0627 \u0627\u0641\u0632\u0648\u062f\u0646 \u0646\u0627\u0645 \u06a9\u0645\u067e\u06cc\u0646\u060c \u0648\u0631\u0648\u062f\u06cc\u200c\u0647\u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u062a\u0641\u06a9\u06cc\u06a9 \u06a9\u0646\u06cc\u062f.<\/small>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"vn-stats-grid-4\">\r\n                <div class=\"vn-stat-box purple\">\r\n                    <span class=\"lbl\">\u06a9\u0644 \u0632\u06cc\u0631\u0645\u062c\u0645\u0648\u0639\u0647\u200c\u0647\u0627<\/span>\r\n                    <div class=\"val\">{{ userRef.total_subs }} \u0646\u0641\u0631<\/div>\r\n                    <span class=\"vn-stat-icon dashicons dashicons-groups\"><\/span>\r\n                <\/div>\r\n\r\n                <div class=\"vn-stat-box orange\">\r\n                    <span class=\"lbl\">\u0648\u0631\u0648\u062f\u06cc\u200c\u0647\u0627\u06cc \u0627\u0645\u0631\u0648\u0632<\/span>\r\n                    <div class=\"val\">{{ userRef.today_visits || 0 }} \u0628\u0627\u0632\u062f\u06cc\u062f<\/div>\r\n                    <span class=\"vn-stat-icon dashicons dashicons-chart-line\"><\/span>\r\n                <\/div>\r\n\r\n                <div class=\"vn-stat-box green\">\r\n                    <span class=\"lbl\">\u062f\u0631\u0622\u0645\u062f \u06a9\u0644<\/span>\r\n                    <div class=\"val\">{{ formatPrice(userRef.lifetime_earnings) }} \u062a<\/div>\r\n                    <span class=\"vn-stat-icon dashicons dashicons-money-alt\"><\/span>\r\n                <\/div>\r\n\r\n                <div class=\"vn-stat-box blue\">\r\n                    <span class=\"lbl\">\u0633\u0641\u0627\u0631\u0634\u0627\u062a \u0645\u0648\u0641\u0642<\/span>\r\n                    <div class=\"val\">{{ userRef.total_orders }} \u0639\u062f\u062f<\/div>\r\n                    <span class=\"vn-stat-icon dashicons dashicons-cart\"><\/span>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"vn-chart-container\" style=\"margin-top:20px; height:300px; background:#f9f9f9; border-radius:10px; display:flex; align-items:center; justify-content:center; color:#999;\">\r\n                <canvas id=\"vnRefChart\"><\/canvas>\r\n            <\/div>\r\n\r\n            <div class=\"vn-heading\" style=\"margin-top:30px;\">\u0622\u062e\u0631\u06cc\u0646 \u0632\u06cc\u0631\u0645\u062c\u0645\u0648\u0639\u0647\u200c\u0647\u0627\u06cc \u0641\u0639\u0627\u0644<\/div>\r\n            <div v-if=\"userRef.subs.length === 0\" class=\"vn-empty-state-modern\" style=\"margin-top:10px; border:1px solid #f0f0f1;\">\r\n                <div class=\"vn-empty-icon\" style=\"background:#f3e5f5; color:#8e24aa;\">\r\n                    <span class=\"dashicons dashicons-groups\"><\/span>\r\n                <\/div>\r\n                <div class=\"vn-heading\">\u0647\u0646\u0648\u0632 \u0632\u06cc\u0631\u0645\u062c\u0645\u0648\u0639\u0647\u200c\u0627\u06cc \u0646\u062f\u0627\u0631\u06cc\u062f!<\/div>\r\n                <p>\u0644\u06cc\u0646\u06a9 \u0627\u062e\u062a\u0635\u0627\u0635\u06cc \u062e\u0648\u062f \u0631\u0627 \u0628\u0627 \u062f\u0648\u0633\u062a\u0627\u0646\u062a\u0627\u0646 \u0628\u0647 \u0627\u0634\u062a\u0631\u0627\u06a9 \u0628\u06af\u0630\u0627\u0631\u06cc\u062f \u062a\u0627 \u0644\u06cc\u0633\u062a \u0634\u0645\u0627 \u067e\u0631 \u0634\u0648\u062f.<\/p>\r\n                <button @click=\"copyToClipboard(userRef.link)\" class=\"vn-btn-outline\" style=\"border-color:#8e24aa; color:#8e24aa;\">\u06a9\u067e\u06cc \u0644\u06cc\u0646\u06a9 \u062f\u0639\u0648\u062a<\/button>\r\n            <\/div>\r\n            <div v-else class=\"vn-table-responsive\">\r\n                <table class=\"vn-history-table\">\r\n                    <thead><tr><th>\u06a9\u0627\u0631\u0628\u0631<\/th><th>\u062a\u0627\u0631\u06cc\u062e \u0639\u0636\u0648\u06cc\u062a<\/th><th>\u06a9\u0645\u067e\u06cc\u0646<\/th><th>\u062e\u0631\u06cc\u062f \u06a9\u0644<\/th><th>\u0633\u0648\u062f \u0634\u0645\u0627<\/th><\/tr><\/thead>\r\n                    <tbody>\r\n                    <tr v-for=\"sub in userRef.subs\" :key=\"sub.id\">\r\n                        <td>{{ sub.name }}<\/td>\r\n                        <td>{{ sub.date }}<\/td>\r\n                        <td><span class=\"vn-badge\">{{ sub.source || '\u0645\u0633\u062a\u0642\u06cc\u0645' }}<\/span><\/td>\r\n                        <td>{{ formatPrice(sub.total_spent) }} \u062a<\/td>\r\n                        <td class=\"vn-text-success\">+{{ formatPrice(sub.my_profit) }} \u062a<\/td>\r\n                    <\/tr>\r\n                    <\/tbody>\r\n                <\/table>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div v-if=\"showWithdrawModal\" class=\"vn-modal-overlay\">\r\n            <div class=\"vn-modal\">\r\n                <div class=\"vn-modal-header\"><div class=\"vn-heading\">\u062f\u0631\u062e\u0648\u0627\u0633\u062a \u062a\u0633\u0648\u06cc\u0647 \u062d\u0633\u0627\u0628<\/div><button @click=\"showWithdrawModal=false\" class=\"vn-close-btn\">&times;<\/button><\/div>\r\n                <div class=\"vn-modal-body\">\r\n                    <div class=\"vn-form-group\">\r\n                        <label>\u0645\u0628\u0644\u063a (\u062a\u0648\u0645\u0627\u0646)<\/label>\r\n                        <input type=\"number\" v-model=\"withdraw.amount\" class=\"vn-input-modern\">\r\n                        <small>\u0645\u0648\u062c\u0648\u062f\u06cc: {{ formatPrice(userRef.balance) }} \u062a<\/small>\r\n                    <\/div>\r\n                    <div class=\"vn-form-group\">\r\n                        <label>\u0631\u0648\u0634 \u0648\u0627\u0631\u06cc\u0632<\/label>\r\n                        <select v-model=\"withdraw.method\" class=\"vn-input-modern\">\r\n                            <option value=\"wallet\">\u0648\u0627\u0631\u06cc\u0632 \u0628\u0647 \u06a9\u06cc\u0641 \u067e\u0648\u0644 \u062e\u0631\u06cc\u062f (\u0622\u0646\u06cc)<\/option>\r\n                            <option value=\"bank\">\u0648\u0627\u0631\u06cc\u0632 \u0628\u0647 \u062d\u0633\u0627\u0628 \u0628\u0627\u0646\u06a9\u06cc (\u067e\u0627\u06cc\u0627)<\/option>\r\n                        <\/select>\r\n                    <\/div>\r\n\r\n                    <div v-if=\"withdraw.method === 'bank'\">\r\n                        <div class=\"vn-form-group\"><label>\u0634\u0645\u0627\u0631\u0647 \u06a9\u0627\u0631\u062a<\/label><input v-model=\"withdraw.card\" class=\"vn-input-modern\" placeholder=\"0000-0000...\"><\/div>\r\n                        <div class=\"vn-form-group\"><label>\u0634\u0645\u0627\u0631\u0647 \u0634\u0628\u0627<\/label><input v-model=\"withdraw.sheba\" class=\"vn-input-modern\" placeholder=\"IR...\"><\/div>\r\n                        <div class=\"vn-form-group\"><label>\u0646\u0627\u0645 \u0635\u0627\u062d\u0628 \u062d\u0633\u0627\u0628<\/label><input v-model=\"withdraw.name\" class=\"vn-input-modern\"><\/div>\r\n                    <\/div>\r\n\r\n                    <button @click=\"submitWithdraw\" class=\"vn-btn-primary full-width\" :disabled=\"processing\">\u062b\u0628\u062a \u062f\u0631\u062e\u0648\u0627\u0633\u062a<\/button>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n    <\/div>\r\n\t    <div v-if=\"currentLayout === 'grid' && selectedService && !activeOrder\" class=\"vn-modal-overlay\" @click.self=\"selectedService = null\">\r\n        <div class=\"vn-modal\">\r\n            <div class=\"vn-modal-header\">\r\n                <div class=\"vn-heading\">\u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0634\u0648\u0631 \u0628\u0631\u0627\u06cc {{ selectedService.name }}<\/div>\r\n                <button @click=\"selectedService = null\" class=\"vn-close-btn\">&times;<\/button>\r\n            <\/div>\r\n            <div v-if=\"modalLoading\" class=\"vn-loading-modal\"><span class=\"vn-spinner\"><\/span> \u062f\u0631 \u062d\u0627\u0644 \u062f\u0631\u06cc\u0627\u0641\u062a \u0642\u06cc\u0645\u062a\u200c\u0647\u0627\u06cc \u0644\u062d\u0638\u0647\u200c\u0627\u06cc...<\/div>\r\n            <div v-else class=\"vn-countries-list\">\r\n                <div v-if=\"!selectedService.countries || selectedService.countries.length === 0\" class=\"vn-empty-state\">\u0645\u0648\u0631\u062f\u06cc \u06cc\u0627\u0641\u062a \u0646\u0634\u062f.<\/div>\r\n                <div class=\"vn-modal-header-filters\" v-if=\"selectedService.countries && selectedService.countries.length > 0\">\r\n                    <input type=\"text\" v-model=\"modalSearch\" placeholder=\"\u062c\u0633\u062a\u062c\u0648\u06cc \u06a9\u0634\u0648\u0631...\" class=\"vn-input-sm\">\r\n                    <div class=\"vn-sort-radios\">\r\n                        <label class=\"vn-radio-label\" :class=\"{ 'active': modalSort === 'price_asc' }\"><input type=\"radio\" value=\"price_asc\" v-model=\"modalSort\">\u0627\u0631\u0632\u0627\u0646\u200c\u062a\u0631\u06cc\u0646<\/label>\r\n                        <label class=\"vn-radio-label\" :class=\"{ 'active': modalSort === 'price_desc' }\"><input type=\"radio\" value=\"price_desc\" v-model=\"modalSort\">\u06af\u0631\u0627\u0646\u200c\u062a\u0631\u06cc\u0646<\/label>\r\n                        <label class=\"vn-radio-label\" :class=\"{ 'active': modalSort === 'count_desc' }\"><input type=\"radio\" value=\"count_desc\" v-model=\"modalSort\">\u0628\u06cc\u0634\u062a\u0631\u06cc\u0646 \u0645\u0648\u062c\u0648\u062f\u06cc<\/label>\r\n                    <\/div>\r\n                <\/div>\r\n                <div v-for=\"(country, index) in filteredModalCountries\" :key=\"country.buy_key ? country.buy_key : index\" class=\"vn-country-row\">\r\n                    <div class=\"vn-c-info\"><img :src=\"country.flag\" :alt=\"country.country_name\" @error=\"this.onerror=null; this.src=window.vnDefaultCountryIcon;\" class=\"vn-flag-img\"><span class=\"vn-c-name\">{{ country.country_name }}<\/span><\/div>\r\n                    <div class=\"vn-c-meta\"><span class=\"vn-count-badge\" :class=\"{ 'vn-zero-stock': Number(country.count) <= 0 }\">\r\n    {{ formatNumber(country.count) }} <span v-if=\"Number(country.count) > 0\">\u0639\u062f\u062f<\/span>\r\n<\/span><span class=\"vn-c-price\">{{ formatPrice(country.price) }} \u062a<\/span><\/div>\r\n                    <button @click=\"buyNumber(country)\" class=\"vn-buy-btn\" :disabled=\"processing\">{{ processing ? '...' : '\u062e\u0631\u06cc\u062f' }}<\/button>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div v-if=\"showVerifyModal\" class=\"vn-modal-overlay\">\r\n        <div class=\"vn-modal vn-modal-sm\">\r\n            <div class=\"vn-modal-header\"><div class=\"vn-heading\">\u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u067e\u06cc\u0627\u0645\u06a9\u06cc<\/div><button @click=\"showVerifyModal = false\" class=\"vn-close-btn\">&times;<\/button><\/div>\r\n            <div class=\"vn-modal-body\">\r\n                <div v-if=\"verifyStep === 1\">\r\n                    <p>\u0628\u0631\u0627\u06cc \u0627\u0645\u0646\u06cc\u062a \u062d\u0633\u0627\u0628\u060c \u0644\u0637\u0641\u0627 \u0634\u0645\u0627\u0631\u0647 \u0645\u0648\u0628\u0627\u06cc\u0644 \u062e\u0648\u062f \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f:<\/p>\r\n                    <input type=\"tel\" v-model=\"mobileNumber\" placeholder=\"0912...\" class=\"vn-input-text\">\r\n                    <div id=\"vn-recaptcha-container\" class=\"vn-mb-10\"><\/div>\r\n                    <button @click=\"sendOtp\" class=\"vn-btn-primary\" :disabled=\"processing\">{{ processing ? '\u062f\u0631\u062d\u0627\u0644 \u0627\u0631\u0633\u0627\u0644...' : '\u0627\u0631\u0633\u0627\u0644 \u06a9\u062f \u062a\u0627\u06cc\u06cc\u062f' }}<\/button>\r\n                <\/div>\r\n                <div v-else>\r\n                    <p>\u06a9\u062f \u06f5 \u0631\u0642\u0645\u06cc \u0627\u0631\u0633\u0627\u0644 \u0634\u062f\u0647 \u0628\u0647 {{ mobileNumber }} \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f:<\/p>\r\n                    <input type=\"text\" v-model=\"otpCode\" placeholder=\"12345\" class=\"vn-input-text center-text\">\r\n                    <button @click=\"verifyOtp\" class=\"vn-btn-success\" :disabled=\"processing\">{{ processing ? '\u062f\u0631\u062d\u0627\u0644 \u0628\u0631\u0631\u0633\u06cc...' : '\u062a\u0627\u06cc\u06cc\u062f \u0646\u0647\u0627\u06cc\u06cc' }}<\/button>\r\n                    <a href=\"#\" @click.prevent=\"verifyStep = 1\" class=\"vn-link-sm\">\u0627\u0635\u0644\u0627\u062d \u0634\u0645\u0627\u0631\u0647<\/a>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div v-if=\"showProfileEditModal\" class=\"vn-modal-overlay\">\r\n        <div class=\"vn-modal\">\r\n            <div class=\"vn-modal-header\">\r\n                <div class=\"vn-heading\">\u0648\u06cc\u0631\u0627\u06cc\u0634 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u06a9\u0627\u0631\u0628\u0631\u06cc<\/div>\r\n                <button @click=\"closeProfileEditModal\" class=\"vn-close-btn\">&times;<\/button>\r\n            <\/div>\r\n            <div class=\"vn-modal-body\">\r\n                <div class=\"vn-form-row\">\r\n                    <div class=\"vn-form-group\">\r\n                        <label>\u0646\u0627\u0645<\/label>\r\n                        <input type=\"text\" v-model=\"tempProfile.first_name\" class=\"vn-input-modern\">\r\n                    <\/div>\r\n                    <div class=\"vn-form-group\">\r\n                        <label>\u0646\u0627\u0645 \u062e\u0627\u0646\u0648\u0627\u062f\u06af\u06cc<\/label>\r\n                        <input type=\"text\" v-model=\"tempProfile.last_name\" class=\"vn-input-modern\">\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"vn-form-group\">\r\n                    <label>\u0634\u0645\u0627\u0631\u0647 \u06a9\u0627\u0631\u062a<\/label>\r\n                    <input type=\"text\" dir=\"ltr\" v-model=\"tempProfile.card\" class=\"vn-input-modern\" placeholder=\"0000-0000-0000-0000\">\r\n                <\/div>\r\n                <div class=\"vn-form-group\">\r\n                    <label>\u0634\u0645\u0627\u0631\u0647 \u0634\u0628\u0627<\/label>\r\n                    <input type=\"text\" dir=\"ltr\" v-model=\"tempProfile.sheba\" class=\"vn-input-modern\" placeholder=\"IR...\">\r\n                <\/div>\r\n\r\n                <div class=\"vn-form-actions\">\r\n                    <button @click=\"closeProfileEditModal\" class=\"vn-btn-cancel\">\u0627\u0646\u0635\u0631\u0627\u0641<\/button>\r\n\r\n                    <button @click=\"saveProfileFromModal\" class=\"vn-btn-primary\" :disabled=\"processing\">\r\n                        <span v-if=\"processing\" class=\"vn-spinner-sm\"><\/span>\r\n                        <span v-else>\u0630\u062e\u06cc\u0631\u0647 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a<\/span>\r\n                    <\/button>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div v-if=\"showCloseModal\" class=\"vn-modal-overlay\">\r\n        <div class=\"vn-modal vn-modal-sm\">\r\n            <div class=\"vn-modal-header\">\r\n                <div class=\"vn-heading\">\u0628\u0633\u062a\u0646 \u062a\u06cc\u06a9\u062a \u0648 \u0646\u0638\u0631\u0633\u0646\u062c\u06cc<\/div>\r\n                <button @click=\"showCloseModal = false\" class=\"vn-close-btn\">&times;<\/button>\r\n            <\/div>\r\n            <div class=\"vn-modal-body\" style=\"text-align:center;\">\r\n                <p style=\"font-weight:bold; color:#555;\">\u0622\u06cc\u0627 \u0645\u0634\u06a9\u0644 \u0634\u0645\u0627 \u0628\u0631\u0637\u0631\u0641 \u0634\u062f\u0647 \u0627\u0633\u062a\u061f<\/p>\r\n                <p style=\"font-size:13px; color:#777; margin-bottom:15px;\">\u0644\u0637\u0641\u0627\u064b \u0628\u0627 \u0627\u0645\u062a\u06cc\u0627\u0632\u062f\u0647\u06cc \u0628\u0647 \u0639\u0645\u0644\u06a9\u0631\u062f \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u060c \u0645\u0627 \u0631\u0627 \u062f\u0631 \u0628\u0647\u0628\u0648\u062f \u062e\u062f\u0645\u0627\u062a \u06cc\u0627\u0631\u06cc \u06a9\u0646\u06cc\u062f:<\/p>\r\n\r\n                <div class=\"vn-stars-lg\">\r\n                    <span v-for=\"i in 5\" :key=\"i\"\r\n                          class=\"dashicons\"\r\n                          :class=\"closeRating >= i ? 'dashicons-star-filled' : 'dashicons-star-empty'\"\r\n                          @mouseover=\"closeRating = i\"\r\n                          @click=\"closeRating = i\"\r\n                          style=\"cursor:pointer; font-size:35px; width:35px; height:35px; color:#dba617;\"><\/span>\r\n                <\/div>\r\n\r\n                <div style=\"margin-top:25px; display:flex; gap:10px; justify-content:center;\">\r\n                    <button @click=\"confirmCloseTicket\" class=\"vn-btn-danger\" :disabled=\"processing\">\r\n                        <span v-if=\"processing\" class=\"vn-spinner-sm\"><\/span>\r\n                        <span v-else>\u062b\u0628\u062a \u0627\u0645\u062a\u06cc\u0627\u0632 \u0648 \u0628\u0633\u062a\u0646 \u062a\u06cc\u06a9\u062a<\/span>\r\n                    <\/button>\r\n                    <button @click=\"showCloseModal = false\" class=\"vn-btn-cancel\">\u0627\u0646\u0635\u0631\u0627\u0641<\/button>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"vn-modal-overlay\" v-if=\"showPaymentModal\" @click=\"closePaymentModal\" style=\"display:flex;\">\r\n        <div class=\"vn-modal-content payment-result\" @click.stop>\r\n\r\n            <div v-if=\"paymentResult.status === 'success'\" class=\"vn-result-box success\">\r\n                <div class=\"vn-result-icon\">\r\n                    <span class=\"dashicons dashicons-yes\"><\/span>\r\n                <\/div>\r\n                <div class=\"vn-heading\">\u067e\u0631\u062f\u0627\u062e\u062a \u0645\u0648\u0641\u0642\u06cc\u062a\u200c\u0622\u0645\u06cc\u0632 \u0628\u0648\u062f!<\/div>\r\n                <p>\u06a9\u06cc\u0641 \u067e\u0648\u0644 \u0634\u0645\u0627 \u0628\u0627 \u0645\u0648\u0641\u0642\u06cc\u062a \u0634\u0627\u0631\u0698 \u0634\u062f.<\/p>\r\n\r\n                <div class=\"vn-result-details\">\r\n                    <div class=\"vn-row\">\r\n                        <span>\u0645\u0628\u0644\u063a \u0634\u0627\u0631\u0698:<\/span>\r\n                        <strong>{{ formatPrice(paymentResult.amount) }} \u062a\u0648\u0645\u0627\u0646<\/strong>\r\n                    <\/div>\r\n                    <div class=\"vn-row\">\r\n                        <span>\u06a9\u062f \u0631\u0647\u06af\u06cc\u0631\u06cc:<\/span>\r\n                        <code>{{ paymentResult.track_id }}<\/code>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <button @click=\"closePaymentModal\" class=\"vn-btn-primary full-width\">\u0645\u062a\u0648\u062c\u0647 \u0634\u062f\u0645<\/button>\r\n            <\/div>\r\n\r\n            <div v-else class=\"vn-result-box failed\">\r\n                <div class=\"vn-result-icon\">\r\n                    <span class=\"dashicons dashicons-no\"><\/span>\r\n                <\/div>\r\n                <div class=\"vn-heading\">\u067e\u0631\u062f\u0627\u062e\u062a \u0646\u0627\u0645\u0648\u0641\u0642<\/div>\r\n                <p>\u0645\u062a\u0627\u0633\u0641\u0627\u0646\u0647 \u0639\u0645\u0644\u06cc\u0627\u062a \u067e\u0631\u062f\u0627\u062e\u062a \u0627\u0646\u062c\u0627\u0645 \u0646\u0634\u062f.<\/p>\r\n\r\n                <div class=\"vn-result-error\">\r\n                    {{ paymentResult.message }}\r\n                <\/div>\r\n\r\n                <button @click=\"closePaymentModal\" class=\"vn-btn-outline full-width\">\u0628\u0627\u0632\u06af\u0634\u062a \u0648 \u062a\u0644\u0627\u0634 \u0645\u062c\u062f\u062f<\/button>\r\n            <\/div>\r\n\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div v-if=\"showAltModal\" class=\"vn-smart-overlay\">\r\n        <div class=\"vn-smart-modal\">\r\n\r\n            <div class=\"vn-smart-icon\">\r\n                <span class=\"dashicons dashicons-warning\"><\/span>\r\n            <\/div>\r\n\r\n            <div class=\"vn-smart-title\">\u0638\u0631\u0641\u06cc\u062a \u062a\u06a9\u0645\u06cc\u0644 \u0634\u062f!<\/div>\r\n            <p class=\"vn-smart-desc\">\r\n                \u0645\u062a\u0627\u0633\u0641\u0627\u0646\u0647 \u0645\u0648\u062c\u0648\u062f\u06cc \u0633\u0631\u0648\u0631 \u0627\u0646\u062a\u062e\u0627\u0628\u06cc \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u06a9\u0634\u0648\u0631 \u062f\u0631 \u0627\u06cc\u0646 \u0644\u062d\u0638\u0647 \u062a\u0645\u0627\u0645 \u0634\u062f.<br>\r\n                \u0633\u06cc\u0633\u062a\u0645 \u06cc\u06a9 <strong>\u0633\u0631\u0648\u0631 \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646<\/strong> \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u06a9\u0634\u0648\u0631 \u0628\u0627 \u0645\u0634\u062e\u0635\u0627\u062a \u0632\u06cc\u0631 \u067e\u06cc\u062f\u0627 \u06a9\u0631\u062f:\r\n            <\/p>\r\n\r\n            <div class=\"vn-smart-meta\">\r\n                <div class=\"vn-smart-meta-item\" v-if=\"activeServiceInfo\">\r\n                    <img :src=\"activeServiceInfo.icon\" class=\"vn-smart-meta-icon\">\r\n                    <span class=\"vn-smart-text\">{{ activeServiceInfo.name }}<\/span>\r\n                <\/div>\r\n\r\n                <span class=\"vn-smart-divider\" v-if=\"activeServiceInfo && currentAltOffer\">|<\/span>\r\n\r\n                <div class=\"vn-smart-meta-item\" v-if=\"currentAltOffer\">\r\n                    <img v-if=\"currentAltOffer.flag\" :src=\"currentAltOffer.flag\" class=\"vn-smart-meta-flag\">\r\n                    <span class=\"vn-smart-text\">{{ currentAltOffer.country_name }}<\/span>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"vn-smart-info-box\">\r\n                <div class=\"vn-smart-row\">\r\n                    <span class=\"vn-smart-label\">\u0642\u06cc\u0645\u062a \u062c\u062f\u06cc\u062f:<\/span>\r\n                    <span class=\"vn-smart-value price\">{{ currentAltOffer ? formatPrice(currentAltOffer.price) : 0 }} \u062a\u0648\u0645\u0627\u0646<\/span>\r\n                <\/div>\r\n                <div class=\"vn-smart-row\">\r\n                    <span class=\"vn-smart-label\">\u0645\u0648\u062c\u0648\u062f\u06cc \u0633\u0631\u0648\u0631:<\/span>\r\n                    <span class=\"vn-smart-value count\">{{ currentAltOffer ? formatNumber(currentAltOffer.count) : 0 }} \u0639\u062f\u062f<\/span>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"vn-smart-actions\">\r\n                <button @click=\"confirmAltBuy\" :disabled=\"processing\" type=\"button\" class=\"vn-btn-confirm\">\r\n                    <span v-if=\"processing\" class=\"dashicons dashicons-update vn-spin\"><\/span>\r\n                    \u062a\u0627\u06cc\u06cc\u062f \u0648 \u062e\u0631\u06cc\u062f\r\n                <\/button>\r\n                <button @click=\"cancelAltBuy\" type=\"button\" class=\"vn-btn-cancel\">\r\n                    \u0627\u0646\u0635\u0631\u0627\u0641\r\n                <\/button>\r\n            <\/div>\r\n\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div v-if=\"showAuthModal\" class=\"vn-modal-overlay\" @click=\"showAuthModal = false\">\r\n        <div class=\"vn-modal-content vn-auth-modal\" @click.stop>\r\n            <span class=\"vn-modal-close\" @click=\"showAuthModal = false\">&times;<\/span>\r\n\r\n            <div class=\"vn-auth-icon-wrap\">\r\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"36\" height=\"36\">\r\n                    <path d=\"M12,2C9.243,2,7,4.243,7,7v3H6c-1.103,0-2,0.897-2,2v8c0,1.103,0.897,2,2,2h12c1.103,0,2-0.897,2-2v-8 c0-1.103-0.897-2-2-2h-1V7C17,4.243,14.757,2,12,2z M12,17c-1.103,0-2-0.897-2-2s0.897-2,2-2s2,0.897,2,2S13.103,17,12,17z M9,10V7 c0-1.654,1.346-3,3-3s3,1.346,3,3v3H9z\"\/>\r\n                <\/svg>\r\n            <\/div>\r\n\r\n            <div class=\"vn-auth-title\">\u0646\u06cc\u0627\u0632 \u0628\u0647 \u0648\u0631\u0648\u062f<\/div>\r\n            <p class=\"vn-auth-desc\">\u0628\u0631\u0627\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a \u0634\u0645\u0627\u0631\u0647 \u0645\u062c\u0627\u0632\u06cc \u0648 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0633\u0641\u0627\u0631\u0634\u0627\u062a\u060c \u0627\u0628\u062a\u062f\u0627 \u0628\u0627\u06cc\u062f \u0648\u0627\u0631\u062f \u062d\u0633\u0627\u0628 \u06a9\u0627\u0631\u0628\u0631\u06cc \u062e\u0648\u062f \u0634\u0648\u06cc\u062f.<\/p>\r\n\r\n            <div class=\"vn-auth-buttons\">\r\n                <a :href=\"vn_obj.login_url\" class=\"vn-btn-full-login\">\r\n                    <span class=\"dashicons dashicons-admin-users\"><\/span> \u0648\u0631\u0648\u062f \u0628\u0647 \u062d\u0633\u0627\u0628\r\n                <\/a>\r\n                <a :href=\"vn_obj.register_url || vn_obj.login_url\" class=\"vn-btn-full-register\">\r\n                    <span class=\"dashicons dashicons-edit\"><\/span> \u062b\u0628\u062a\u200c\u0646\u0627\u0645 \u0631\u0627\u06cc\u06af\u0627\u0646\r\n                <\/a>\r\n            <\/div>\r\n\r\n            <div class=\"vn-auth-footer\">\r\n                \u062d\u0633\u0627\u0628 \u0646\u062f\u0627\u0631\u06cc\u062f\u061f <a :href=\"vn_obj.register_url\">\u0647\u0645\u06cc\u0646 \u0627\u0644\u0627\u0646 \u0628\u0633\u0627\u0632\u06cc\u062f<\/a>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n<\/div>\r\n\r\n<script type=\"text\/x-template\" id=\"active-order-template\">\r\n    <div class=\"vn-order-dashboard\">\r\n        <div class=\"vn-order-header\">\r\n            <span class=\"vn-status-badge\">\u0645\u0646\u062a\u0638\u0631 \u067e\u06cc\u0627\u0645\u06a9...<\/span>\r\n            <span style=\"font-size:12px; background:rgba(255,255,255,0.2); padding:3px 10px; border-radius:4px; margin-right:10px; color:#fff;\">\r\n                \u0634\u0646\u0627\u0633\u0647 \u0633\u0641\u0627\u0631\u0634: <strong>{{ order.order_id || order.id }}<\/strong>\r\n            <\/span>\r\n            <div class=\"vn-timer\">{{ timer }}<\/div>\r\n        <\/div>\r\n        <div class=\"vn-order-info-row\">\r\n            <div class=\"vn-info-item\">\r\n                <img :src=\"order.icon || vnDefaultIcon\">\r\n                <span>{{ order.service_name }}<\/span>\r\n            <\/div>\r\n            <div class=\"vn-info-item\">\r\n                <img :src=\"order.flag || vnDefaultIcon\">\r\n                <span>{{ order.country_name }}<\/span>\r\n            <\/div>\r\n        <\/div>\r\n        <div class=\"vn-info-box-modern\">\r\n            <label class=\"vn-lbl-small\">\u0634\u0645\u0627\u0631\u0647 \u0627\u062e\u062a\u0635\u0627\u0635\u06cc \u0634\u0645\u0627:<\/label>\r\n\r\n            <div class=\"vn-digital-display\" dir=\"ltr\">\r\n                <template v-if=\"order.prefix && order.number.startsWith(order.prefix)\">\r\n                    <div class=\"vn-dd-prefix\">\r\n                        <span class=\"vn-plus\">+<\/span>{{ order.prefix }}\r\n                    <\/div>\r\n                    <div class=\"vn-dd-body\">\r\n                        {{ order.number.substring(order.prefix.length) }}\r\n                    <\/div>\r\n                <\/template>\r\n\r\n                <template v-else>\r\n                    <div class=\"vn-dd-body full\">\r\n                        {{ order.number }}\r\n                    <\/div>\r\n                <\/template>\r\n            <\/div>\r\n\r\n            <div class=\"vn-copy-actions-modern\">\r\n                <button @click=\"$emit('copy-smart', order.number, order.prefix, 'no_code')\" class=\"vn-btn-copy-m vn-red\" title=\"\u06a9\u067e\u06cc \u0634\u0645\u0627\u0631\u0647 \u0628\u062f\u0648\u0646 \u06a9\u062f \u06a9\u0634\u0648\u0631\">\r\n                    <span class=\"dashicons dashicons-admin-page\"><\/span>\r\n                    <span>\u06a9\u067e\u06cc (\u0628\u062f\u0648\u0646 \u06a9\u062f)<\/span>\r\n                <\/button>\r\n                <button @click=\"$emit('copy-smart', order.number, order.prefix, 'plus')\" class=\"vn-btn-copy-m vn-blue\" title=\"\u06a9\u067e\u06cc \u0634\u0645\u0627\u0631\u0647 \u06a9\u0627\u0645\u0644 \u0628\u0627 +\">\r\n                    <span class=\"dashicons dashicons-plus\"><\/span>\r\n                    <span>\u06a9\u067e\u06cc (\u0628\u0627 \u06a9\u062f)<\/span>\r\n                <\/button>\r\n            <\/div>\r\n        <\/div>\r\n        <div class=\"vn-sms-box\" :class=\"{ 'received': smsCode }\">\r\n            <div v-if=\"!smsCode\" class=\"vn-waiting-anim\"><span><\/span><span><\/span><span><\/span> \u062f\u0631\u06cc\u0627\u0641\u062a \u067e\u06cc\u0627\u0645\u06a9<\/div>\r\n            <div v-else class=\"vn-code-display\" @click=\"$emit('copy', smsCode)\">{{ smsCode }}<\/div>\r\n        <\/div>\r\n        <div class=\"vn-actions\">\r\n            <button @click=\"$emit('cancel')\" class=\"vn-cancel-btn\" v-if=\"!smsCode\">\u0644\u063a\u0648<\/button>\r\n            <button @click=\"$emit('finish')\" class=\"vn-finish-btn\" v-if=\"smsCode\">\u067e\u0627\u06cc\u0627\u0646<\/button>\r\n        <\/div>\r\n    <\/div>\r\n<\/script>\r\n\r\n<style>\r\n    \/* ========== \u0627\u0633\u062a\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u062c\u062f\u06cc\u062f \u067e\u0631\u0648\u0641\u0627\u06cc\u0644 \u0648 \u0646\u0648\u06cc\u06af\u06cc\u0634\u0646 ========== *\/\r\n    .vn-nav-wrapper { margin-bottom: 20px; border-bottom: 1px solid #eee; padding-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }\r\n    .vn-nav-scroller { display: flex; overflow-x: auto; gap: 10px; padding-bottom: 5px; scrollbar-width: thin; }\r\n    .vn-nav-item { background: #fff; border: 1px solid #e2e4e7; padding: 10px 20px; border-radius: 12px; cursor: pointer; font-weight: 500; color: #50575e; display: flex; align-items: center; gap: 8px; white-space: nowrap; transition: all 0.2s; box-shadow: 0 2px 4px rgba(0,0,0,0.02); }\r\n    .vn-nav-item:hover { background: #f6f7f7 }\r\n    .vn-nav-item.active { background: #fff; border-color: #2271b1; color: #2271b1; box-shadow: 0 4px 10px rgba(34, 113, 177, 0.15); }\r\n\r\n    .vn-profile-layout { display: flex; gap: 20px; align-items: flex-start; }\r\n    .vn-profile-sidebar { flex: 0 0 250px; }\r\n    .vn-profile-content { flex: 1; min-width: 0; }\r\n\r\n    .vn-profile-menu button { display: block; width: 100%; text-align: right; padding: 15px; background: #fff; border: 1px solid #eee; border-bottom: none; cursor: pointer; display: flex; align-items: center; gap: 10px; transition: 0.2s; font-size: 14px; color: #555; }\r\n    .vn-profile-menu button:first-child { border-top-left-radius: 10px; border-top-right-radius: 10px; }\r\n    .vn-profile-menu button:last-child { border-bottom: 1px solid #eee; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }\r\n    .vn-profile-menu button:hover { background: #f9f9f9; color: #2271b1; }\r\n    .vn-profile-menu button.active { background: #fff; color: #2271b1; border-right: 3px solid #2271b1; font-weight: bold; }\r\n\r\n    .vn-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid #eee; }\r\n    .vn-btn-primary-outline { background: #fff; border: 1px solid #2271b1; color: #2271b1; padding: 5px 15px; border-radius: 5px; cursor: pointer; display: flex; align-items: center; gap: 5px; }\r\n    .vn-btn-primary-outline:hover { background: #f0f6fc; }\r\n\r\n    .vn-avatar-section { text-align: center; margin-bottom: 25px; }\r\n    .vn-user-avatar { width: 90px; height: 90px; border-radius: 50%; object-fit: cover; border: 3px solid #f0f0f1; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }\r\n\r\n    .vn-info-display-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }\r\n    .vn-info-card { background: #f9f9f9; padding: 12px; border-radius: 8px; border: 1px solid #eee; }\r\n    .vn-info-card label { font-size: 11px; color: #888; display: block; margin-bottom: 4px; }\r\n    .vn-info-card .vn-val { font-weight: bold; color: #333; font-size: 13px; }\r\n\r\n    \/* \u0627\u0633\u062a\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u0645\u0648\u062f\u0627\u0644 \u0648 \u0627\u06cc\u0646\u067e\u0648\u062a \u0645\u062f\u0631\u0646 *\/\r\n    .vn-input-modern { width: 100%; padding: 10px; border: 1px solid #e2e4e7; border-radius: 8px; font-family: inherit; transition: 0.2s; outline: none; box-sizing: border-box; }\r\n    .vn-input-modern:focus { border-color: #2271b1; box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.1); }\r\n    .vn-form-row { display: flex; gap: 15px; }\r\n    .vn-form-group { margin-bottom: 15px; flex: 1; }\r\n    .vn-form-group label { display: block; margin-bottom: 5px; font-weight: 500; font-size: 13px; }\r\n    .vn-form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }\r\n\r\n    .vn-api-box { background: #2c3338; color: #72aee6; padding: 15px; border-radius: 6px; font-family: monospace; text-align: center; margin: 20px 0; direction: ltr; }\r\n    .center-block { display: block; margin: 0 auto; }\r\n\r\n    .vn-referral-box { background: #f0f6fc; padding: 20px; border-radius: 10px; border: 1px dashed #2271b1; text-align: center; }\r\n    .vn-copy-box { display: flex; margin-top: 10px; }\r\n    .vn-copy-box input { flex: 1; border: 1px solid #ddd; border-radius: 0 6px 6px 0; padding: 8px; text-align: center; color: #555; }\r\n    .vn-copy-box button { background: #2271b1; color: #fff; border: none; border-radius: 6px 0 0 6px; padding: 0 15px; cursor: pointer; }\r\n    .vn-stats-row { display: flex; gap: 15px; margin-top: 20px; }\r\n    .vn-stat-card { flex: 1; padding: 15px; border-radius: 10px; text-align: center; color: #fff; }\r\n    .vn-stat-card.blue { background: #4fc3f7; }\r\n    .vn-stat-card.green { background: #81c784; }\r\n    .vn-stat-card h3 { margin: 10px 0 0 0; font-size: 20px; }\r\n\r\n    \/* \u0631\u06cc\u0633\u067e\u0627\u0646\u0633\u06cc\u0648 *\/\r\n    @media (max-width: 768px) {\r\n        .vn-profile-layout { flex-direction: column; }\r\n        .vn-profile-sidebar { width: 100%; overflow-x: auto; }\r\n        .vn-profile-menu { display: flex; border-radius: 10px; overflow: hidden; border: 1px solid #eee; }\r\n        .vn-profile-menu button { border: none; border-left: 1px solid #eee; padding: 10px; justify-content: center; white-space: nowrap; font-size: 12px; }\r\n        .vn-profile-menu button span.dashicons { margin: 0; }\r\n        .vn-profile-menu button.active { border-right: none; border-bottom: 3px solid #2271b1; }\r\n        .vn-info-display-grid { grid-template-columns: 1fr; }\r\n    }\r\n\r\n    \/* ========== \u0627\u0633\u062a\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u0645\u0648\u062c\u0648\u062f \u0648 \u0627\u0635\u0644\u06cc (\u062d\u0641\u0638 \u0634\u062f\u0647) ========== *\/\r\n    .vn-top-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }\r\n    .vn-layout-switcher button { background: #fff; border: 1px solid #ddd; padding: 5px 8px; cursor: pointer; border-radius: 4px; margin-left: 5px; color: #777; }\r\n    .vn-layout-switcher button.active { background: #2271b1; color: #fff; border-color: #2271b1; }\r\n    .vn-two-col-layout { display: flex; gap: 20px; flex-wrap: wrap; }\r\n    \/* \u062a\u063a\u06cc\u06cc\u0631 \u0646\u0633\u0628\u062a \u0628\u0647 \u06f6\u06f0 \u062f\u0631\u0635\u062f \u0648 \u06f4\u06f0 \u062f\u0631\u0635\u062f *\/\r\n    .vn-col-right { flex: 3; min-width: 300px; } \/* \u0633\u062a\u0648\u0646 \u0644\u06cc\u0633\u062a \u0633\u0631\u0648\u06cc\u0633\u200c\u0647\u0627 (\u06f6\u06f0\u066a) *\/\r\n    .vn-col-left { flex: 2; min-width: 300px; }  \/* \u0633\u062a\u0648\u0646 \u0634\u0645\u0627\u0631\u0647 \u0641\u0639\u0627\u0644 (\u06f4\u06f0\u066a) *\/\r\n    .vn-list-item {\r\n        border: 1px solid #eee;\r\n        border-top: none;\r\n    }\r\n    \/*.vn-list-item:last-child { border-bottom: none; }*\/\r\n    .vn-list-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 15px; cursor: pointer; background: #fff; transition: background 0.2s; }\r\n    .vn-list-head:hover { background: #f9f9f9; }\r\n    .vn-list-item.expanded .vn-list-head { background: #f0f6fc; font-weight: bold; border-left: 3px solid #2271b1; }\r\n    .vn-flex-start { display: flex; align-items: center; gap: 10px; }\r\n    .vn-list-icon { width: 24px; height: 24px; object-fit: contain; }\r\n    .vn-list-body { background: #fafafa; padding: 10px; border-top: 1px solid #eee; animation: vnFadeIn 0.3s; }\r\n    .vn-list-country-row { display: flex; justify-content: space-between; align-items: center; background: #fff; padding: 8px; margin-bottom: 5px; border-radius: 4px; border: 1px solid #eee; }\r\n    .vn-lc-info { display: flex; align-items: center; gap: 8px; font-size: 13px; flex: 0 0 40%; max-width: 40%; overflow: hidden; }\r\n    .vn-lc-info span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\r\n    .vn-lc-info img { width: 20px; height: 15px; object-fit: cover; border-radius: 2px; }\r\n    .vn-lc-meta-center { flex: 0 0 25%; max-width: 25%; display: flex; justify-content: center; }\r\n    .vn-lc-action { flex: 0 0 35%; max-width: 35%; display: flex; align-items: center; justify-content: flex-end; gap: 10px; }\r\n    .vn-lc-price { font-weight: bold; color: #2271b1; font-size: 13px; }\r\n    .vn-btn-xs { padding: 3px 10px; font-size: 11px; background: #00a32a; color: #fff; border: none; border-radius: 3px; cursor: pointer; transition: 0.2s; }\r\n    .vn-btn-xs:hover { background: #008c24; }\r\n    .vn-sticky-box { position: sticky; top: 20px; }\r\n    .vn-placeholder-box { text-align: center; padding: 40px 20px; color: #999; border: 2px dashed #e5e5e5; background: #fcfcfc; border-radius: 8px; }\r\n    .vn-panel-title { font-weight: bold; margin-bottom: 10px; border-bottom: 1px solid #eee; padding-bottom: 10px; }\r\n    [v-cloak] { display: none; }\r\n    @keyframes vnFadeIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }\r\n    .vn-load-more-container { text-align: center; margin: 20px 0; }\r\n    .vn-btn-secondary { background: #f0f0f1; border: 1px solid #c3c4c7; color: #2c3338; padding: 8px 15px; cursor: pointer; border-radius: 4px; transition: 0.2s; }\r\n    .vn-btn-secondary:hover { background: #fff; border-color: #2271b1; color: #2271b1; }\r\n    .vn-list-country-row .vn-count-badge { background: #e5f5fa; color: #008eb9; padding: 2px 8px; border-radius: 10px; font-size: 11px; display: inline-block; min-width: 60px; text-align: center; }\r\n    .vn-list-country-row .vn-zero-stock { background: #ffebeb; color: #d63638; }\r\n    .vn-dropdown-controls { margin-bottom: 15px; border-bottom: 1px solid #eee; padding-bottom: 10px; }\r\n    .vn-search-row { margin-bottom: 10px; }\r\n    .vn-input-full { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; }\r\n    .vn-filters-row { display: flex; justify-content: center; align-items: center; gap: 15px; font-size: 12px; flex-wrap: wrap; }\r\n    .vn-filter-label { color: #777; font-size: 11px; }\r\n    .vn-filters-row label { cursor: pointer; color: #555; display: flex; align-items: center; gap: 3px; }\r\n    .vn-filters-row label.active { color: #2271b1; font-weight: bold; background: #eef5fb; padding: 2px 8px; border-radius: 10px; }\r\n    .vn-copy-actions { display: flex; justify-content: center; gap: 10px; margin-top: 15px; }\r\n    .vn-btn-copy { border: none; border-radius: 50px; color: #fff; padding: 8px 20px; font-size: 13px; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: all 0.3s ease; box-shadow: 0 4px 6px rgba(0,0,0,0.1); font-weight: bold; }\r\n    .vn-btn-copy:active { transform: translateY(2px); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }\r\n    .vn-btn-red { background: linear-gradient(135deg, #cb2d3e 0%, #ef473a 100%); }\r\n    .vn-btn-red:hover { background: linear-gradient(135deg, #ef473a 0%, #cb2d3e 100%); box-shadow: 0 6px 12px rgba(239, 71, 58, 0.3); }\r\n    .vn-btn-blue { background: linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%); }\r\n    .vn-btn-blue:hover { background: linear-gradient(135deg, #6dd5ed 0%, #2193b0 100%); box-shadow: 0 6px 12px rgba(33, 147, 176, 0.3); }\r\n    .vn-order-info-row { display: flex; justify-content: space-between; align-items: center; background: #f0f6fc; padding: 10px 15px; border-radius: 8px; margin-bottom: 15px; border: 1px solid #e0e0e0; }\r\n    .vn-info-item { display: flex; align-items: center; gap: 8px; font-weight: bold; font-size: 13px; color: #333; }\r\n    .vn-info-item img { width: 20px; height: 20px; object-fit: contain; vertical-align: middle; }\r\n\r\n    \/* \u0627\u0633\u062a\u0627\u06cc\u0644 \u062a\u0646\u0638\u06cc\u0645\u0627\u062a *\/\r\n    .vn-setting-row { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid #eee; }\r\n    .vn-toggle-group { display: flex; background: #eee; padding: 3px; border-radius: 20px; }\r\n    .vn-toggle-group button { border: none; background: transparent; padding: 5px 15px; border-radius: 15px; cursor: pointer; font-size: 12px; transition: 0.2s; }\r\n    .vn-toggle-group button.active { background: #fff; color: #2271b1; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }\r\n\r\n    \/* \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0646\u0631\u0645 *\/\r\n    .vn-fade-in { animation: vnFadeIn 0.3s ease-out; }\r\n\r\n    @media (max-width: 600px) {\r\n        .vn-info-grid { grid-template-columns: 1fr; }\r\n    }\r\n\r\n    \/* \u06a9\u0627\u0646\u062a\u06cc\u0646\u0631 \u0627\u0635\u0644\u06cc \u0628\u0627 \u06af\u0631\u0627\u062f\u06cc\u0646\u062a \u0631\u0646\u06af\u06cc *\/\r\n    .vn-toggle-group {\r\n        display: flex;\r\n        \/* \u06af\u0631\u0627\u062f\u06cc\u0646\u062a \u0622\u0628\u06cc \u0622\u0633\u0645\u0627\u0646\u06cc \u062a\u0627 \u0641\u06cc\u0631\u0648\u0632\u0647\u200c\u0627\u06cc *\/\r\n        background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);\r\n        padding: 4px; \/* \u0641\u0627\u0635\u0644\u0647 \u062f\u0627\u062e\u0644\u06cc \u0628\u06cc\u0634\u062a\u0631 \u0628\u0631\u0627\u06cc \u0642\u0627\u0628 \u06af\u0631\u0641\u062a\u0646 *\/\r\n        border-radius: 30px; \/* \u06a9\u0627\u0645\u0644\u0627 \u06af\u0631\u062f *\/\r\n        box-shadow: 0 4px 15px rgba(0, 242, 254, 0.2); \/* \u0633\u0627\u06cc\u0647 \u0645\u0644\u0627\u06cc\u0645 \u0647\u0645\u0631\u0646\u06af *\/\r\n    }\r\n\r\n    \/* \u0627\u0633\u062a\u0627\u06cc\u0644 \u062f\u06a9\u0645\u0647\u200c\u0647\u0627 (\u062d\u0627\u0644\u062a \u0639\u0627\u062f\u06cc\/\u063a\u06cc\u0631\u0641\u0639\u0627\u0644) *\/\r\n    .vn-toggle-group button {\r\n        border: none;\r\n        background: transparent;\r\n        padding: 6px 20px;\r\n        border-radius: 25px;\r\n        cursor: pointer;\r\n        font-size: 13px;\r\n        font-weight: 500;\r\n        color: rgba(255, 255, 255, 0.9); \/* \u0633\u0641\u06cc\u062f \u06a9\u0645\u06cc \u0634\u0641\u0627\u0641 *\/\r\n        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);\r\n    }\r\n\r\n    \/* \u0647\u0627\u0648\u0631 \u0631\u0648\u06cc \u062f\u06a9\u0645\u0647\u200c\u0647\u0627\u06cc \u063a\u06cc\u0631\u0641\u0639\u0627\u0644 *\/\r\n    .vn-toggle-group button:hover {\r\n        color: #fff;\r\n        background: rgba(255, 255, 255, 0.15); \/* \u0647\u0627\u0644\u0647 \u0633\u0641\u06cc\u062f \u0647\u0646\u06af\u0627\u0645 \u0647\u0627\u0648\u0631 *\/\r\n    }\r\n\r\n    \/* \u0627\u0633\u062a\u0627\u06cc\u0644 \u062f\u06a9\u0645\u0647 \u0641\u0639\u0627\u0644 (\u0627\u0646\u062a\u062e\u0627\u0628 \u0634\u062f\u0647) *\/\r\n    .vn-toggle-group button.active {\r\n        background: #fff; \/* \u0632\u0645\u06cc\u0646\u0647 \u0633\u0641\u06cc\u062f *\/\r\n        color: #0093E9; \/* \u0645\u062a\u0646 \u0631\u0646\u06af\u06cc (\u0645\u062a\u0646\u0627\u0633\u0628 \u0628\u0627 \u06af\u0631\u0627\u062f\u06cc\u0646\u062a) *\/\r\n        box-shadow: 0 3px 8px rgba(0,0,0,0.15); \/* \u0633\u0627\u06cc\u0647 \u0628\u0631\u0627\u06cc \u0628\u0631\u062c\u0633\u062a\u06af\u06cc *\/\r\n        font-weight: bold;\r\n        transform: scale(1.05); \/* \u06a9\u0645\u06cc \u0628\u0632\u0631\u06af\u0646\u0645\u0627\u06cc\u06cc \u0628\u0631\u0627\u06cc \u062a\u0627\u06a9\u06cc\u062f *\/\r\n    }\r\n\r\n    \/* \u0627\u0633\u062a\u0627\u06cc\u0644 \u062f\u06a9\u0645\u0647 \u0627\u0646\u0635\u0631\u0627\u0641 \u0642\u0631\u0645\u0632 \u0645\u0644\u0627\u06cc\u0645 *\/\r\n    .vn-btn-cancel {\r\n        background: #fff0f0;\r\n        color: #d63638;\r\n        border: 1px solid #f0c1c5;\r\n        padding: 8px 20px;\r\n        border-radius: 6px;\r\n        cursor: pointer;\r\n        transition: 0.2s;\r\n        font-weight: 500;\r\n    }\r\n    .vn-btn-cancel:hover { background: #fbeaea; border-color: #d63638; }\r\n\r\n    \/* \u0644\u0648\u062f\u06cc\u0646\u06af \u062f\u0627\u062e\u0644 \u062f\u06a9\u0645\u0647 *\/\r\n    .vn-spinner-sm {\r\n        display: inline-block; width: 12px; height: 12px; border: 2px solid rgba(255,255,255,0.3);\r\n        border-top-color: #fff; border-radius: 50%; animation: vnSpin 1s linear infinite; margin-left: 5px;\r\n    }\r\n\r\n    \/* \u06af\u0631\u0627\u062f\u06cc\u0646\u062a \u0628\u0627\u06a9\u0633\u200c\u0647\u0627\u06cc \u0622\u0645\u0627\u0631 *\/\r\n    .vn-stat-card.blue { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); box-shadow: 0 4px 15px rgba(79, 172, 254, 0.4); }\r\n    .vn-stat-card.green { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); box-shadow: 0 4px 15px rgba(67, 233, 123, 0.4); }\r\n\r\n    \/* \u0627\u0633\u062a\u0627\u06cc\u0644 \u062a\u063a\u06cc\u06cc\u0631 \u0639\u06a9\u0633 *\/\r\n    .vn-avatar-wrapper { position: relative; display: inline-block; }\r\n    .vn-avatar-overlay { position: absolute; top:0; left:0; right:0; bottom:0; background: rgba(255,255,255,0.7); display: flex; align-items: center; justify-content: center; border-radius: 50%; }\r\n    .vn-change-avatar-box { margin-top: 10px; cursor: pointer; color: #2271b1; display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 13px; }\r\n    .vn-link-change:hover { text-decoration: underline; }\r\n\r\n    \/* \u0627\u0633\u062a\u0627\u06cc\u0644 \u0644\u06cc\u0633\u062a \u062a\u0631\u0627\u06a9\u0646\u0634\u200c\u0647\u0627 *\/\r\n    .vn-trans-list { display: flex; flex-direction: column; gap: 15px; }\r\n    .vn-trans-item {\r\n        display: flex; align-items: center; gap: 15px;\r\n        padding: 15px; background: #fff; border: 1px solid #f0f0f1;\r\n        border-radius: 12px; transition: 0.2s;\r\n    }\r\n    .vn-trans-item:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.03); border-color: #e0e0e0; }\r\n\r\n    \/* \u0628\u0627\u06a9\u0633 \u0622\u06cc\u06a9\u0648\u0646 *\/\r\n    .vn-trans-icon {\r\n        width: 45px; height: 45px; border-radius: 12px;\r\n        display: flex; align-items: center; justify-content: center;\r\n        color: #fff; font-size: 20px; flex-shrink: 0;\r\n        box-shadow: 0 4px 10px rgba(0,0,0,0.1);\r\n    }\r\n\r\n    \/* \u0631\u0646\u06af\u200c\u0628\u0646\u062f\u06cc \u06af\u0631\u0627\u062f\u06cc\u0646\u062a \u0622\u06cc\u06a9\u0648\u0646\u200c\u0647\u0627 *\/\r\n    .vn-trans-icon.purchase {\r\n        background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 99%, #fecfef 100%); \/* \u0642\u0631\u0645\u0632 \u0645\u0644\u0627\u06cc\u0645 *\/\r\n        background: linear-gradient(135deg, #FF512F 0%, #DD2476 100%); \/* \u06cc\u0627 \u0627\u06cc\u0646 \u0642\u0631\u0645\u0632 \u062c\u0630\u0627\u0628 *\/\r\n    }\r\n    .vn-trans-icon.refund {\r\n        background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); \/* \u0633\u0628\u0632 *\/\r\n    }\r\n    .vn-trans-icon.deposit {\r\n        background: linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%); \/* \u0622\u0628\u06cc *\/\r\n    }\r\n    .vn-trans-icon.default { background: #ccc; }\r\n\r\n    \/* \u062c\u0632\u0626\u06cc\u0627\u062a \u0645\u062a\u0646\u06cc *\/\r\n    .vn-trans-details { flex: 1; display: flex; flex-direction: column; gap: 3px; }\r\n    .vn-trans-title { font-weight: bold; color: #333; font-size: 14px; }\r\n    .vn-trans-desc { font-size: 12px; color: #666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }\r\n    .vn-trans-date { font-size: 11px; color: #999; margin-top: 2px; }\r\n\r\n    \/* \u0645\u0628\u0644\u063a *\/\r\n    .vn-trans-amount { font-weight: bold; font-size: 15px; text-align: left; min-width: 80px; }\r\n    .vn-trans-amount.negative { color: #d63638; } \/* \u0642\u0631\u0645\u0632 \u0628\u0631\u0627\u06cc \u06a9\u0633\u0631 *\/\r\n    .vn-trans-amount.positive { color: #00a32a; } \/* \u0633\u0628\u0632 \u0628\u0631\u0627\u06cc \u0627\u0641\u0632\u0627\u06cc\u0634\u06cc *\/\r\n    .vn-trans-amount small { font-size: 10px; font-weight: normal; color: #999; }\r\n\r\n    @media (max-width: 480px) {\r\n        .vn-trans-desc { display: none; } \/* \u0645\u062e\u0641\u06cc \u06a9\u0631\u062f\u0646 \u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u0637\u0648\u0644\u0627\u0646\u06cc \u062f\u0631 \u0645\u0648\u0628\u0627\u06cc\u0644 *\/\r\n    }\r\n\r\n    \/* \u0627\u0633\u062a\u0627\u06cc\u0644 \u0635\u0641\u062d\u0647\u200c\u0628\u0646\u062f\u06cc *\/\r\n    .vn-pagination-bar {\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        margin-top: 20px;\r\n        padding-top: 15px;\r\n        border-top: 1px solid #eee;\r\n        font-size: 13px;\r\n        color: #666;\r\n    }\r\n    .vn-pg-left { display: flex; align-items: center; gap: 8px; }\r\n    .vn-pg-select {\r\n        border: 1px solid #ddd;\r\n        border-radius: 6px;\r\n        padding: 4px 8px;\r\n        background: #fff;\r\n        outline: none;\r\n        cursor: pointer;\r\n    }\r\n    .vn-pg-btn {\r\n        background: #2271b1; \/* \u0631\u0646\u06af \u0622\u0628\u06cc \u0627\u0635\u0644\u06cc *\/\r\n        color: #fff;        \/* \u0622\u06cc\u06a9\u0648\u0646 \u0633\u0641\u06cc\u062f *\/\r\n        border: 1px solid #2271b1;\r\n        border-radius: 6px;\r\n        width: 32px;\r\n        height: 32px;\r\n        display: inline-flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        cursor: pointer;\r\n        transition: all 0.2s ease;\r\n        margin-left: 5px;\r\n        box-shadow: 0 2px 4px rgba(34, 113, 177, 0.2); \/* \u0633\u0627\u06cc\u0647 \u0645\u0644\u0627\u06cc\u0645 \u0622\u0628\u06cc *\/\r\n    }\r\n\r\n    \/* \u0647\u0627\u0648\u0631: \u0648\u0642\u062a\u06cc \u0645\u0648\u0633 \u0631\u0648\u06cc \u062f\u06a9\u0645\u0647 \u0645\u06cc\u200c\u0631\u0648\u062f *\/\r\n    .vn-pg-btn:hover:not(:disabled) {\r\n        background: #135e96; \/* \u0622\u0628\u06cc \u062a\u06cc\u0631\u0647\u200c\u062a\u0631 *\/\r\n        border-color: #135e96;\r\n        transform: translateY(-2px); \/* \u06a9\u0645\u06cc \u0628\u0627\u0644\u0627 \u0645\u06cc\u200c\u0631\u0648\u062f *\/\r\n        box-shadow: 0 4px 8px rgba(34, 113, 177, 0.3);\r\n    }\r\n\r\n    \/* \u063a\u06cc\u0631\u0641\u0639\u0627\u0644: \u0648\u0642\u062a\u06cc \u0635\u0641\u062d\u0647 \u0642\u0628\u0644 \u06cc\u0627 \u0628\u0639\u062f\u06cc \u0648\u062c\u0648\u062f \u0646\u062f\u0627\u0631\u062f *\/\r\n    .vn-pg-btn:disabled {\r\n        background: #f0f0f1; \/* \u062e\u0627\u06a9\u0633\u062a\u0631\u06cc \u0631\u0648\u0634\u0646 *\/\r\n        border-color: #ddd;\r\n        color: #a7aaad; \/* \u0622\u06cc\u06a9\u0648\u0646 \u062e\u0627\u06a9\u0633\u062a\u0631\u06cc *\/\r\n        cursor: default;\r\n        box-shadow: none;\r\n        opacity: 0.8;\r\n        transform: none;\r\n    }\r\n\r\n    @media (max-width: 480px) {\r\n        .vn-pagination-bar { flex-direction: column; gap: 15px; }\r\n        .vn-pg-center { order: -1; } \/* \u0635\u0641\u062d\u0647 \u0686\u0646\u062f \u0627\u0632 \u0686\u0646\u062f \u0628\u0627\u0644\u0627\u062a\u0631 \u0628\u0627\u0634\u062f *\/\r\n    }\r\n\r\n    \/* \u0627\u0633\u062a\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u062a\u0628 \u06a9\u06cc\u0641 \u067e\u0648\u0644 *\/\r\n    .vn-wallet-header { text-align: center; margin-bottom: 25px; }\r\n    .vn-wallet-icon-box {\r\n        width: 60px; height: 60px; background: #e6f7ff; color: #2271b1;\r\n        border-radius: 50%; display: flex; align-items: center; justify-content: center;\r\n        margin: 0 auto 10px auto; font-size: 30px;\r\n    }\r\n    .vn-wallet-header div.heading { margin: 0; font-size: 18px;color: #46484d;font-weight: 600; }\r\n    .vn-wallet-header p { color: #777; font-size: 13px; margin: 5px 0 0 0; }\r\n\r\n    .vn-heading{\r\n        font-size: 20px;color: #46484d;font-weight: 600;\r\n    }\r\n\r\n    .vn-input-amount {\r\n        width: 100%; padding: 15px; font-size: 20px; text-align: center;\r\n        border: 2px solid #eee; border-radius: 10px; font-weight: bold; color: #333;\r\n        outline: none; transition: 0.2s; box-sizing: border-box;\r\n    }\r\n    .vn-input-amount:focus { border-color: #2271b1; }\r\n\r\n    .vn-quick-amounts { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; justify-content: center; }\r\n    .vn-quick-amounts button {\r\n        background: #f9f9f9; border: 1px solid #eee; padding: 6px 12px;\r\n        border-radius: 20px; cursor: pointer; color: #555; font-size: 12px; transition: 0.2s;\r\n    }\r\n    .vn-quick-amounts button:hover { background: #eef5fb; color: #2271b1; border-color: #2271b1; }\r\n\r\n    .vn-gateways-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; margin-top: 10px; }\r\n    .vn-gateway-card {\r\n        border: 2px solid #f0f0f1; border-radius: 10px; padding: 15px;\r\n        display: flex; align-items: center; gap: 10px; cursor: pointer; position: relative; transition: 0.2s;\r\n    }\r\n    .vn-gateway-card:hover { border-color: #ccc; }\r\n    .vn-gateway-card.active { border-color: #2271b1; background: #f0f8ff; }\r\n\r\n    .vn-gw-icon { width: 40px; height: 40px; object-fit: contain; }\r\n    .vn-gw-info { display: flex; flex-direction: column; }\r\n    .vn-gw-title { font-weight: bold; font-size: 14px; }\r\n    .vn-gw-desc { font-size: 11px; color: #777; }\r\n    .vn-gw-check {\r\n        position: absolute; top: 10px; left: 10px; background: #2271b1;\r\n        color: #fff; border-radius: 50%; width: 20px; height: 20px;\r\n        display: flex; align-items: center; justify-content: center; font-size: 12px;\r\n    }\r\n\r\n    .vn-btn-pay {\r\n        width: 100%; background: #00a32a; color: #fff; border: none;\r\n        padding: 15px; border-radius: 10px; font-size: 16px; font-weight: bold;\r\n        margin-top: 25px; cursor: pointer; transition: 0.2s;\r\n    }\r\n    .vn-btn-pay:hover { background: #008c24; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,163,42,0.3); }\r\n    .vn-text-success { color: #00a32a !important; font-weight: bold; }\r\n\r\n\r\n    \/* \u0627\u0633\u062a\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u062a\u06cc\u06a9\u062a *\/\r\n    .vn-filter-chip { background: #eee; border:none; padding: 5px 12px; border-radius: 15px; margin-left: 5px; cursor: pointer; font-size: 12px; }\r\n    .vn-filter-chip.active { background: #2271b1; color: #fff; }\r\n\r\n    .vn-ticket-card { background: #fff; padding: 15px; border-radius: 8px; border: 1px solid #ddd; margin-bottom: 10px; cursor: pointer; transition: 0.2s; }\r\n    .vn-ticket-card:hover { border-color: #2271b1; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }\r\n    .vn-ticket-header { display: flex; justify-content: space-between; margin-bottom: 5px; font-weight: bold; }\r\n    .vn-ticket-meta { font-size: 12px; color: #777; display: flex; justify-content: space-between; }\r\n\r\n    .vn-status-badge { padding: 2px 8px; border-radius: 4px; font-size: 11px; color: #fff; background: #999; }\r\n    .vn-status-badge.open { background: #d63638; }\r\n    .vn-status-badge.closed { background: #00a32a; }\r\n    .vn-status-badge.answered { background: #2271b1; }\r\n    .vn-status-badge.investigating { background: #d46f15; }\r\n\r\n    .vn-smart-order-box { background: #e6f7ff; border: 1px solid #91d5ff; padding: 10px; border-radius: 5px; margin-bottom: 15px; }\r\n    .vn-mini-order-row { font-size: 12px; display: flex; justify-content: space-between; border-bottom: 1px dashed #ccc; padding: 3px 0; }\r\n\r\n    .vn-chat-area { background: #f9f9f9; padding: 15px; border-radius: 8px; max-height: 400px; overflow-y: auto; margin-bottom: 15px; border: 1px solid #eee; }\r\n    .vn-chat-bubble { padding: 10px; border-radius: 8px; margin-bottom: 10px; max-width: 85%; position: relative; }\r\n    .vn-chat-bubble.user { background: #dcf8c6; margin-right: auto; border-bottom-left-radius: 0; }\r\n    .vn-chat-bubble.admin { background: #fff; border: 1px solid #ddd; margin-left: auto; border-bottom-right-radius: 0; }\r\n    .vn-chat-meta { font-size: 10px; color: #666; margin-bottom: 3px; display: flex; justify-content: space-between; }\r\n\r\n    \/* --- \u0627\u0633\u062a\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u062c\u062f\u06cc\u062f \u0628\u062e\u0634 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc --- *\/\r\n\r\n    \/* \u0647\u062f\u0631 *\/\r\n    .vn-support-header {\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        margin-bottom: 25px;\r\n        border-bottom: 1px solid #f0f0f1;\r\n        padding-bottom: 15px;\r\n    }\r\n    .vn-sh-right h3 { margin: 0 0 5px 0; font-size: 18px; color: #333; }\r\n\r\n    \/* \u062f\u06a9\u0645\u0647 \u062a\u06cc\u06a9\u062a \u062c\u062f\u06cc\u062f *\/\r\n    .vn-btn-new-ticket {\r\n        background: #2271b1;\r\n        color: #fff;\r\n        border: none;\r\n        padding: 10px 20px;\r\n        border-radius: 8px;\r\n        cursor: pointer;\r\n        font-size: 13px;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 8px;\r\n        transition: all 0.3s ease;\r\n        box-shadow: 0 4px 10px rgba(34, 113, 177, 0.2);\r\n    }\r\n    .vn-btn-new-ticket:hover {\r\n        background: #135e96;\r\n        transform: translateY(-2px);\r\n        box-shadow: 0 6px 15px rgba(34, 113, 177, 0.3);\r\n    }\r\n\r\n    \/* \u0646\u0648\u0627\u0631 \u0641\u06cc\u0644\u062a\u0631 \u0645\u062f\u0631\u0646 *\/\r\n    .vn-filter-bar {\r\n        display: flex;\r\n        gap: 10px;\r\n        margin-bottom: 20px;\r\n        background: #f7f7f7;\r\n        padding: 5px;\r\n        border-radius: 10px;\r\n        display: inline-flex; \/* \u0639\u0631\u0636 \u0645\u062a\u0646\u0627\u0633\u0628 \u0628\u0627 \u0645\u062d\u062a\u0648\u0627 *\/\r\n    }\r\n    .vn-filter-tab {\r\n        background: transparent;\r\n        border: none;\r\n        padding: 8px 20px;\r\n        border-radius: 8px;\r\n        cursor: pointer;\r\n        color: #666;\r\n        font-size: 13px;\r\n        transition: all 0.2s;\r\n    }\r\n    .vn-filter-tab:hover { color: #333; background: rgba(0,0,0,0.05); }\r\n    .vn-filter-tab.active {\r\n        background: #fff;\r\n        color: #2271b1;\r\n        font-weight: bold;\r\n        box-shadow: 0 2px 5px rgba(0,0,0,0.05);\r\n    }\r\n\r\n    \/* \u0627\u0633\u062a\u0627\u06cc\u0644 Empty State (\u0632\u06cc\u0628\u0627\u0633\u0627\u0632\u06cc \u0634\u062f\u0647) *\/\r\n    .vn-empty-state-modern {\r\n        text-align: center;\r\n        padding: 50px 20px;\r\n        background: #fff;\r\n        border-radius: 12px;\r\n        border: 2px dashed #e5e5e5;\r\n        margin-top: 20px;\r\n    }\r\n    .vn-empty-icon {\r\n        width: 80px;\r\n        height: 80px;\r\n        background: #f0f6fc;\r\n        color: #2271b1;\r\n        border-radius: 50%;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        margin: 0 auto 20px auto;\r\n    }\r\n    .vn-empty-icon span { font-size: 40px; width: 40px; height: 40px; }\r\n    .vn-empty-state-modern h4 { margin: 0 0 10px 0; font-size: 16px; color: #333; }\r\n    .vn-empty-state-modern p { color: #777; font-size: 13px; margin: 0 0 20px 0; }\r\n\r\n    .vn-btn-outline {\r\n        background: transparent;\r\n        border: 1px solid #2271b1;\r\n        color: #2271b1;\r\n        padding: 8px 20px;\r\n        border-radius: 6px;\r\n        cursor: pointer;\r\n        font-size: 12px;\r\n        transition: 0.2s;\r\n    }\r\n    .vn-btn-outline:hover { background: #f0f6fc; }\r\n\r\n    \/* \u06a9\u0627\u0631\u062a \u062a\u06cc\u06a9\u062a (\u0628\u0647\u0628\u0648\u062f \u06cc\u0627\u0641\u062a\u0647) *\/\r\n    .vn-ticket-card {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 15px;\r\n        background: #fff;\r\n        padding: 15px;\r\n        border-radius: 12px;\r\n        border: 1px solid #f0f0f1;\r\n        margin-bottom: 10px;\r\n        cursor: pointer;\r\n        transition: 0.2s;\r\n    }\r\n    .vn-ticket-card:hover {\r\n        border-color: #2271b1;\r\n        transform: translateX(-3px);\r\n        box-shadow: 0 5px 15px rgba(0,0,0,0.03);\r\n    }\r\n    .vn-ticket-icon {\r\n        width: 45px;\r\n        height: 45px;\r\n        background: #f9f9f9;\r\n        border-radius: 10px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        color: #888;\r\n        font-size: 20px;\r\n    }\r\n    .vn-ticket-content { flex: 1; }\r\n    .vn-ticket-top { display: flex; justify-content: space-between; margin-bottom: 5px; }\r\n    .vn-ticket-subject { font-weight: bold; color: #333; font-size: 14px; }\r\n    .vn-ticket-date { font-size: 11px; color: #999; }\r\n\r\n    .vn-ticket-bottom { display: flex; justify-content: space-between; align-items: center; }\r\n    .vn-ticket-dept { font-size: 12px; color: #666; background: #eee; padding: 2px 8px; border-radius: 4px; }\r\n\r\n    \/* --- \u0627\u0633\u062a\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u0645\u062f\u0631\u0646 \u0686\u062a \u062a\u06cc\u06a9\u062a --- *\/\r\n    .vn-single-ticket-wrap {\r\n        display: flex;\r\n        flex-direction: column;\r\n        height: 600px; \/* \u0627\u0631\u062a\u0641\u0627\u0639 \u062b\u0627\u0628\u062a \u0628\u0631\u0627\u06cc \u062d\u0633 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 *\/\r\n        background: #fff;\r\n        border: 1px solid #e0e0e0;\r\n        border-radius: 12px;\r\n        overflow: hidden;\r\n    }\r\n\r\n    \/* \u0647\u062f\u0631 *\/\r\n    .vn-chat-header {\r\n        background: #fdfdfd;\r\n        padding: 15px;\r\n        border-bottom: 1px solid #eee;\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n    }\r\n    .vn-ch-info { display: flex; align-items: center; gap: 10px; }\r\n    .vn-btn-back-icon {\r\n        background: transparent; border: none; cursor: pointer; color: #666;\r\n        font-size: 20px; padding: 5px; border-radius: 50%; transition: 0.2s;\r\n        display: flex; align-items: center; justify-content: center;\r\n    }\r\n    .vn-btn-back-icon:hover { background: #eee; color: #2271b1; }\r\n    .vn-ch-title { margin: 0; font-size: 15px; color: #333; }\r\n    .vn-ch-status { font-size: 11px; padding: 2px 6px; border-radius: 4px; margin-top: 2px; display: inline-block; background: #eee; }\r\n    .vn-ch-status.open { color: #d63638; background: #ffebeb; }\r\n    .vn-ch-status.answered { color: #2271b1; background: #e6f7ff; }\r\n\r\n    \/* \u0646\u0627\u062d\u06cc\u0647 \u067e\u06cc\u0627\u0645\u200c\u0647\u0627 *\/\r\n    .vn-chat-area-modern {\r\n        flex: 1; \/* \u067e\u0631 \u06a9\u0631\u062f\u0646 \u0641\u0636\u0627\u06cc \u0628\u0627\u0642\u06cc\u200c\u0645\u0627\u0646\u062f\u0647 *\/\r\n        background: #f0f2f5; \/* \u0631\u0646\u06af \u067e\u0633\u200c\u0632\u0645\u06cc\u0646\u0647 \u0634\u0628\u06cc\u0647 \u062a\u0644\u06af\u0631\u0627\u0645\/\u0648\u0627\u062a\u0633\u0627\u067e *\/\r\n        padding: 20px;\r\n        overflow-y: auto;\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 10px;\r\n    }\r\n\r\n    .vn-bubble-row { display: flex; width: 100%; }\r\n    .vn-bubble-row.user-row { justify-content: flex-end; } \/* \u067e\u06cc\u0627\u0645 \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627\u0633\u062a (\u0641\u0627\u0631\u0633\u06cc) -> \u0686\u067e (CSS) *\/\r\n    .vn-bubble-row.admin-row { justify-content: flex-start; }\r\n\r\n    .vn-chat-bubble-modern {\r\n        max-width: 75%;\r\n        padding: 10px 15px;\r\n        border-radius: 15px;\r\n        position: relative;\r\n        box-shadow: 0 1px 2px rgba(0,0,0,0.1);\r\n        font-size: 14px;\r\n        line-height: 1.5;\r\n    }\r\n\r\n    \/* \u0631\u0646\u06af \u067e\u06cc\u0627\u0645\u200c\u0647\u0627 *\/\r\n    .vn-chat-bubble-modern.user {\r\n        background: #dcf8c6; \/* \u0633\u0628\u0632 \u0648\u0627\u062a\u0633\u0627\u067e\u06cc *\/\r\n        color: #000;\r\n        border-bottom-left-radius: 2px; \/* \u06af\u0648\u0634\u0647 \u062a\u06cc\u0632 \u0628\u0631\u0627\u06cc \u0632\u06cc\u0628\u0627\u06cc\u06cc *\/\r\n    }\r\n    .vn-chat-bubble-modern.admin {\r\n        background: #fff;\r\n        color: #000;\r\n        border-bottom-right-radius: 2px;\r\n    }\r\n\r\n    .vn-bubble-meta {\r\n        display: flex; justify-content: space-between; align-items: center;\r\n        margin-top: 5px; font-size: 10px; opacity: 0.6; gap: 10px;\r\n    }\r\n\r\n    .vn-bubble-attach {\r\n        margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(0,0,0,0.1);\r\n        font-size: 12px;\r\n    }\r\n    .vn-bubble-attach a { text-decoration: none; color: #2271b1; display: flex; align-items: center; gap: 5px; }\r\n\r\n    \/* \u0641\u0648\u062a\u0631 \u0627\u0631\u0633\u0627\u0644 \u067e\u06cc\u0627\u0645 *\/\r\n    .vn-reply-area-modern {\r\n        background: #fff;\r\n        padding: 10px 15px;\r\n        border-top: 1px solid #ddd;\r\n    }\r\n\r\n    .vn-reply-textarea {\r\n        width: 100%; border: none; resize: none; outline: none;\r\n        font-family: inherit; font-size: 14px; padding: 10px;\r\n        background: #f9f9f9; border-radius: 10px;\r\n        margin-bottom: 10px;\r\n        min-height: 50px;\r\n    }\r\n    .vn-reply-textarea:focus { background: #fff; box-shadow: 0 0 0 1px #ddd; }\r\n\r\n    .vn-reply-actions {\r\n        display: flex; justify-content: space-between; align-items: center;\r\n    }\r\n\r\n    \/* \u062f\u06a9\u0645\u0647 \u0622\u067e\u0644\u0648\u062f *\/\r\n    .vn-hidden-input { display: none; }\r\n    .vn-btn-attach {\r\n        font-size: 20px; color: #777; cursor: pointer;\r\n        padding: 8px; border-radius: 50%; transition: 0.2s;\r\n        display: flex; align-items: center; justify-content: center;\r\n    }\r\n    .vn-btn-attach:hover { background: #eee; color: #333; }\r\n\r\n    .vn-upload-wrapper { display: flex; align-items: center; gap: 10px; }\r\n    .vn-file-name-badge {\r\n        font-size: 11px; background: #e6f7ff; color: #2271b1;\r\n        padding: 3px 8px; border-radius: 10px; display: flex; align-items: center; gap: 5px;\r\n    }\r\n    .vn-remove-file { cursor: pointer; font-weight: bold; color: #d63638; }\r\n\r\n    \/* \u062f\u06a9\u0645\u0647 \u0627\u0631\u0633\u0627\u0644 *\/\r\n    .vn-btn-send-modern {\r\n        background: #2271b1; color: #fff; border: none;\r\n        width: 40px; height: 40px; border-radius: 50%;\r\n        display: flex; align-items: center; justify-content: center;\r\n        cursor: pointer; transition: 0.2s; box-shadow: 0 2px 5px rgba(34, 113, 177, 0.3);\r\n    }\r\n    .vn-btn-send-modern:hover:not(:disabled) { transform: scale(1.05); background: #135e96; }\r\n    .vn-btn-send-modern:disabled { background: #ccc; cursor: not-allowed; box-shadow: none; }\r\n    .vn-btn-send-modern span.dashicons { font-size: 20px; width: 20px; height: 20px; }\r\n\r\n    \/* \u0644\u0648\u062f\u06cc\u0646\u06af \u0686\u0631\u062e\u0634\u06cc *\/\r\n    .vn-spinner-sm {\r\n        width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.3);\r\n        border-top-color: #fff; border-radius: 50%;\r\n        animation: vnSpin 1s linear infinite;\r\n    }\r\n    @keyframes vnSpin { to { transform: rotate(360deg); } }\r\n\r\n    \/* \u062a\u063a\u06cc\u06cc\u0631 \u0631\u0646\u06af \u0622\u06cc\u06a9\u0648\u0646 \u0628\u0631 \u0627\u0633\u0627\u0633 \u0648\u0636\u0639\u06cc\u062a *\/\r\n    .vn-ticket-icon {\r\n        width: 45px;\r\n        height: 45px;\r\n        background: #f9f9f9; \/* \u067e\u06cc\u0634\u200c\u0641\u0631\u0636 *\/\r\n        border-radius: 10px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        color: #888;\r\n        font-size: 20px;\r\n        transition: all 0.3s ease;\r\n    }\r\n\r\n    \/* \u06f1. \u0648\u0636\u0639\u06cc\u062a \u0628\u0627\u0632 (\u0642\u0631\u0645\u0632 \u0645\u0644\u0627\u06cc\u0645) *\/\r\n    .vn-ticket-icon.status-open {\r\n        background: #ffebeb;\r\n        color: #d63638;\r\n    }\r\n\r\n    \/* \u06f2. \u067e\u0627\u0633\u062e \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 (\u0622\u0628\u06cc \u0645\u0644\u0627\u06cc\u0645 - \u0648\u0642\u062a\u06cc \u067e\u0634\u062a\u06cc\u0628\u0627\u0646 \u062c\u0648\u0627\u0628 \u062f\u0627\u062f\u0647) *\/\r\n    .vn-ticket-icon.status-answered {\r\n        background: #e6f7ff;\r\n        color: #2271b1;\r\n    }\r\n\r\n    \/* \u06f3. \u062f\u0631 \u062d\u0627\u0644 \u0628\u0631\u0631\u0633\u06cc (\u0646\u0627\u0631\u0646\u062c\u06cc \u0645\u0644\u0627\u06cc\u0645) *\/\r\n    .vn-ticket-icon.status-investigating {\r\n        background: #fff8e1;\r\n        color: #dba617;\r\n    }\r\n\r\n    \/* \u06f4. \u0628\u0633\u062a\u0647 \u0634\u062f\u0647 (\u0633\u0628\u0632 \u0645\u0644\u0627\u06cc\u0645) *\/\r\n    .vn-ticket-icon.status-closed {\r\n        background: #e6ffed;\r\n        color: #00a32a;\r\n    }\r\n\r\n    \/* \u0627\u0633\u062a\u0627\u06cc\u0644 \u0628\u0627\u06a9\u0633 \u0647\u0648\u0634\u0645\u0646\u062f \u0633\u0641\u0627\u0631\u0634\u0627\u062a *\/\r\n    .vn-smart-order-box {\r\n        background: #f0f7ff;\r\n        border: 1px solid #cce5ff;\r\n        border-radius: 12px;\r\n        padding: 15px;\r\n        margin-bottom: 20px;\r\n    }\r\n    .vn-sob-header {\r\n        font-weight: bold;\r\n        color: #004085;\r\n        font-size: 13px;\r\n        margin-bottom: 15px;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 5px;\r\n    }\r\n\r\n    \/* \u06af\u0631\u06cc\u062f \u06a9\u0627\u0631\u062a\u200c\u0647\u0627 (\u0627\u06af\u0631 \u0686\u0646\u062f \u0633\u0641\u0627\u0631\u0634 \u0628\u0648\u062f \u06a9\u0646\u0627\u0631 \u0647\u0645 \u0628\u0627\u0634\u0646\u062f) *\/\r\n    .vn-sob-grid {\r\n        display: grid;\r\n        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\r\n        gap: 15px;\r\n    }\r\n\r\n    \/* \u06a9\u0627\u0631\u062a \u062a\u06a9\u06cc *\/\r\n    .vn-sob-card {\r\n        background: #fff;\r\n        border: 1px solid #e0e0e0;\r\n        border-radius: 10px;\r\n        padding: 12px;\r\n        box-shadow: 0 2px 5px rgba(0,0,0,0.03);\r\n    }\r\n\r\n    .vn-sob-top {\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        margin-bottom: 10px;\r\n        padding-bottom: 8px;\r\n        border-bottom: 1px dashed #eee;\r\n    }\r\n    .vn-sob-id { font-weight: bold; color: #555; font-size: 12px; }\r\n\r\n    .vn-sob-info {\r\n        display: flex;\r\n        justify-content: space-between;\r\n        margin-bottom: 10px;\r\n        font-size: 12px;\r\n    }\r\n    .vn-sob-row { display: flex; align-items: center; gap: 5px; color: #333; }\r\n    .vn-mini-flag, .vn-mini-logo { width: 16px; height: 16px; object-fit: contain; }\r\n\r\n    .vn-sob-number-box {\r\n        background: #f9f9f9;\r\n        border-radius: 6px;\r\n        padding: 8px;\r\n        text-align: center;\r\n        margin-bottom: 10px;\r\n        font-family: monospace;\r\n        font-size: 14px;\r\n        display: flex;\r\n        justify-content: center;\r\n        align-items: center;\r\n        gap: 10px;\r\n    }\r\n    .vn-sob-phone { color: #333; }\r\n    .vn-sob-code {\r\n        background: #e6ffed;\r\n        color: #00a32a;\r\n        padding: 2px 6px;\r\n        border-radius: 4px;\r\n        font-weight: bold;\r\n        border: 1px solid #b7ebc5;\r\n    }\r\n\r\n    .vn-sob-footer {\r\n        display: flex;\r\n        justify-content: space-between;\r\n        font-size: 11px;\r\n        color: #999;\r\n    }\r\n    .vn-sob-price { color: #2271b1; font-weight: bold; }\r\n\r\n    \/* \u0628\u062c\u200c\u0647\u0627\u06cc \u0648\u0636\u0639\u06cc\u062a \u0633\u0641\u0627\u0631\u0634 *\/\r\n    .vn-badge-success { background: #e6ffed; color: #00a32a; }\r\n    .vn-badge-danger { background: #ffebeb; color: #d63638; }\r\n    .vn-badge-warning { background: #fff8e1; color: #dba617; }\r\n\r\n    \/* --- \u0633\u0627\u062e\u062a\u0627\u0631 \u06a9\u0644\u06cc \u0635\u0641\u062d\u0647 \u062a\u06cc\u06a9\u062a --- *\/\r\n    .vn-single-ticket-wrap {\r\n        display: flex;\r\n        flex-direction: column;\r\n        height: 600px;\r\n        background: #fff;\r\n        border: 1px solid #e0e0e0;\r\n        border-radius: 12px;\r\n        overflow: hidden;\r\n        position: relative;\r\n    }\r\n\r\n    \/* \u0627\u0633\u06a9\u0631\u0648\u0644\u200c\u0628\u0627\u0631 \u0641\u0642\u0637 \u0628\u0631\u0627\u06cc \u0646\u0627\u062d\u06cc\u0647 \u0648\u0633\u0637 (\u0633\u0641\u0627\u0631\u0634\u0627\u062a + \u0686\u062a) *\/\r\n    .vn-ticket-body-scroll {\r\n        flex: 1;\r\n        overflow-y: auto;\r\n        background: #f0f2f5;\r\n        padding: 15px;\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 15px;\r\n    }\r\n\r\n    \/* --- \u0644\u06cc\u0633\u062a \u0641\u0634\u0631\u062f\u0647 \u0633\u0641\u0627\u0631\u0634\u0627\u062a (Compact Order List) --- *\/\r\n    .vn-smart-order-list {\r\n        background: #fff;\r\n        border: 1px solid #cce5ff;\r\n        border-radius: 8px;\r\n        overflow: hidden;\r\n        box-shadow: 0 2px 4px rgba(0,0,0,0.02);\r\n    }\r\n    .vn-sol-title {\r\n        background: #e6f7ff;\r\n        color: #004085;\r\n        padding: 8px 12px;\r\n        font-size: 12px;\r\n        font-weight: bold;\r\n        border-bottom: 1px solid #cce5ff;\r\n        display: flex; align-items: center; gap: 5px;\r\n    }\r\n\r\n    .vn-order-compact-row {\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: space-between;\r\n        padding: 8px 12px;\r\n        border-bottom: 1px solid #eee;\r\n        font-size: 12px;\r\n        flex-wrap: wrap; \/* \u0628\u0631\u0627\u06cc \u0645\u0648\u0628\u0627\u06cc\u0644 *\/\r\n        gap: 10px;\r\n    }\r\n    .vn-order-compact-row:last-child { border-bottom: none; }\r\n\r\n    \/* \u0633\u062a\u0648\u0646\u200c\u0628\u0646\u062f\u06cc *\/\r\n    .vn-ocr-col { display: flex; flex-direction: column; justify-content: center; }\r\n    .vn-ocr-col.id { color: #888; width: 40px; }\r\n    .vn-ocr-col.info { flex: 2; min-width: 120px; }\r\n    .vn-ocr-col.number { flex: 1.5; align-items: center; font-family: monospace; font-size: 13px; }\r\n    .vn-ocr-col.meta { text-align: left; min-width: 80px; color: #666; }\r\n    .vn-ocr-col.status { min-width: 80px; text-align: left; }\r\n\r\n    .vn-ocr-item { display: flex; align-items: center; gap: 5px; margin-bottom: 2px; }\r\n    .vn-tiny-icon, .vn-tiny-flag { width: 14px; height: 14px; object-fit: contain; }\r\n\r\n    .vn-ocr-code {\r\n        background: #e6ffed; color: #00a32a; border: 1px solid #b7ebc5;\r\n        padding: 1px 5px; border-radius: 4px; font-weight: bold; margin-left: 5px;\r\n    }\r\n\r\n    \/* \u0631\u06cc\u0633\u067e\u0627\u0646\u0633\u06cc\u0648 \u0633\u0641\u0627\u0631\u0634\u0627\u062a \u062f\u0631 \u0645\u0648\u0628\u0627\u06cc\u0644 *\/\r\n    @media (max-width: 600px) {\r\n        .vn-order-compact-row { flex-direction: column; align-items: flex-start; gap: 8px; background: #fafafa; margin: 5px; border: 1px solid #eee; border-radius: 6px; }\r\n        .vn-ocr-col { width: 100%; flex-direction: row; justify-content: space-between; align-items: center; }\r\n        .vn-ocr-col.info { display: block; } \/* \u0646\u0627\u0645\u200c\u0647\u0627 \u0632\u06cc\u0631 \u0647\u0645 \u0628\u0627\u0634\u0646\u062f *\/\r\n    }\r\n\r\n    \/* --- \u0646\u0627\u062d\u06cc\u0647 \u0686\u062a (\u0645\u062b\u0644 \u0642\u0628\u0644) --- *\/\r\n    .vn-chat-messages { display: flex; flex-direction: column; gap: 10px; }\r\n\r\n    \/* \u0641\u06cc\u06a9\u0633 \u06a9\u0631\u062f\u0646 \u0627\u0631\u062a\u0641\u0627\u0639 textarea *\/\r\n    .vn-reply-textarea { min-height: 45px; max-height: 100px; }\r\n\r\n    .vn-rating-box { margin-top: 15px; border-top: 1px dashed #ccc; padding-top: 10px; }\r\n    .vn-stars { display: flex; justify-content: center; gap: 5px; cursor: pointer; }\r\n    .vn-stars .dashicons { font-size: 24px; width: 24px; height: 24px; transition: 0.2s; color: #dba617; }\r\n    .vn-stars .dashicons:hover { transform: scale(1.2); }\r\n\r\n    .vn-btn-close-ticket {\r\n        background: #fff; border: 1px solid #d63638; color: #d63638;\r\n        padding: 5px 12px; border-radius: 6px; font-size: 12px; cursor: pointer;\r\n        display: flex; align-items: center; gap: 5px; transition: 0.2s;\r\n    }\r\n    .vn-btn-close-ticket:hover { background: #d63638; color: #fff; }\r\n\r\n    .vn-btn-danger {\r\n        background: #d63638; color: #fff; border: none; padding: 10px 20px;\r\n        border-radius: 8px; cursor: pointer; font-weight: bold;\r\n    }\r\n    .vn-btn-danger:hover { background: #b32d2e; }\r\n\r\n    .vn-stars-lg .dashicons { transition: transform 0.2s; }\r\n    .vn-stars-lg .dashicons:hover { transform: scale(1.2); }\r\n\r\n\r\n    \/* \u0627\u0633\u062a\u0627\u06cc\u0644 \u0645\u0648\u062f\u0627\u0644 \u0646\u062a\u06cc\u062c\u0647 \u067e\u0631\u062f\u0627\u062e\u062a *\/\r\n    .vn-modal-content.payment-result { max-width: 400px; text-align: center; padding: 40px 30px; border-radius: 20px; }\r\n    .vn-result-icon {\r\n        width: 80px; height: 80px; margin: 0 auto 20px; border-radius: 50%;\r\n        display: flex; align-items: center; justify-content: center;\r\n        color: #fff; box-shadow: 0 10px 20px rgba(0,0,0,0.1);\r\n    }\r\n    .vn-result-icon .dashicons { font-size: 40px; width: 40px; height: 40px; }\r\n\r\n    \/* \u06af\u0631\u0627\u062f\u06cc\u0646\u062a \u0633\u0628\u0632 \u0628\u0631\u0627\u06cc \u0645\u0648\u0641\u0642 *\/\r\n    .vn-result-box.success .vn-result-icon {\r\n        background: linear-gradient(135deg, #00b09b, #96c93d);\r\n        box-shadow: 0 10px 20px rgba(150, 201, 61, 0.4);\r\n    }\r\n\r\n    \/* \u06af\u0631\u0627\u062f\u06cc\u0646\u062a \u0642\u0631\u0645\u0632 \u0628\u0631\u0627\u06cc \u0646\u0627\u0645\u0648\u0641\u0642 *\/\r\n    .vn-result-box.failed .vn-result-icon {\r\n        background: linear-gradient(135deg, #ff5f6d, #ffc371);\r\n        box-shadow: 0 10px 20px rgba(255, 95, 109, 0.4);\r\n    }\r\n\r\n    .vn-result-box h3 { font-size: 20px; margin-bottom: 10px; color: #333; }\r\n    .vn-result-box p { color: #777; margin-bottom: 25px; }\r\n\r\n    .vn-result-details { background: #f9f9f9; padding: 15px; border-radius: 10px; margin-bottom: 25px; border: 1px dashed #ddd; }\r\n    .vn-result-error { background: #fff5f5; color: #c53030; padding: 15px; border-radius: 10px; margin-bottom: 25px; border: 1px solid #fed7d7; }\r\n\r\n    .vn-row { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 14px; }\r\n    .vn-row:last-child { margin-bottom: 0; }\r\n\r\n    .vn-btn-outline { background: transparent; border: 2px solid #ddd; color: #555; padding: 10px; border-radius: 8px; width: 100%; cursor: pointer; transition: 0.2s; font-weight: bold; }\r\n    .vn-btn-outline:hover { border-color: #999; color: #333; }\r\n\r\n    \/* --- \u0627\u0633\u062a\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u0644\u0627\u06cc\u0647 \u067e\u0633\u200c\u0632\u0645\u06cc\u0646\u0647 \u0648 \u0642\u0631\u0627\u0631\u06af\u06cc\u0631\u06cc \u0645\u0648\u062f\u0627\u0644 --- *\/\r\n    .vn-modal-overlay {\r\n        position: fixed;\r\n        top: 0;\r\n        left: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        background-color: rgba(0, 0, 0, 0.6); \/* \u067e\u0633\u200c\u0632\u0645\u06cc\u0646\u0647 \u062a\u0627\u0631\u06cc\u06a9 \u0646\u06cc\u0645\u0647\u200c\u0634\u0641\u0627\u0641 *\/\r\n        \/* backdrop-filter: blur(4px); *\/ \/* \u0627\u06af\u0631 \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u062f \u067e\u0634\u062a \u0645\u0648\u062f\u0627\u0644 \u062a\u0627\u0631 \u0634\u0648\u062f\u060c \u0627\u06cc\u0646 \u062e\u0637 \u0631\u0627 \u0627\u0632 \u06a9\u0627\u0645\u0646\u062a \u062e\u0627\u0631\u062c \u06a9\u0646\u06cc\u062f *\/\r\n        z-index: 999999; \/* \u0627\u0648\u0644\u0648\u06cc\u062a \u0628\u0633\u06cc\u0627\u0631 \u0628\u0627\u0644\u0627 \u0628\u0631\u0627\u06cc \u0642\u0631\u0627\u0631 \u06af\u0631\u0641\u062a\u0646 \u0631\u0648\u06cc \u0647\u0645\u0647\u200c\u0686\u06cc\u0632 *\/\r\n        display: flex;\r\n        justify-content: center;\r\n        align-items: center;\r\n        padding: 20px;\r\n        box-sizing: border-box;\r\n        animation: vnFadeIn 0.3s ease-out; \/* \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0648\u0631\u0648\u062f \u0646\u0631\u0645 *\/\r\n    }\r\n\r\n    \/* \u0627\u0635\u0644\u0627\u062d \u0627\u0633\u062a\u0627\u06cc\u0644 \u0628\u0627\u06a9\u0633 \u0645\u0648\u062f\u0627\u0644 \u0628\u0631\u0627\u06cc \u0642\u0631\u0627\u0631\u06af\u06cc\u0631\u06cc \u0628\u0647\u062a\u0631 *\/\r\n    .vn-modal-content.payment-result {\r\n        background: #fff;\r\n        width: 100%;\r\n        max-width: 420px; \/* \u06a9\u0645\u06cc \u0639\u0631\u06cc\u0636\u200c\u062a\u0631 *\/\r\n        text-align: center;\r\n        padding: 40px 30px;\r\n        border-radius: 24px; \/* \u06af\u0648\u0634\u0647\u200c\u0647\u0627\u06cc \u06af\u0631\u062f\u062a\u0631 *\/\r\n        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); \/* \u0633\u0627\u06cc\u0647 \u0639\u0645\u06cc\u0642 \u0648 \u0632\u06cc\u0628\u0627 *\/\r\n        position: relative;\r\n        max-height: 90vh; \/* \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0627\u0632 \u0628\u06cc\u0631\u0648\u0646 \u0632\u062f\u0646 \u062f\u0631 \u0635\u0641\u062d\u0627\u062a \u06a9\u0648\u0686\u06a9 *\/\r\n        overflow-y: auto; \/* \u0627\u0633\u06a9\u0631\u0648\u0644 \u062f\u0631 \u0635\u0648\u0631\u062a \u0646\u06cc\u0627\u0632 *\/\r\n        animation: vnSlideUp 0.3s ease-out; \/* \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0628\u0627\u0644\u0627 \u0622\u0645\u062f\u0646 *\/\r\n    }\r\n\r\n    \/* \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\u200c\u0647\u0627\u06cc \u0648\u0631\u0648\u062f *\/\r\n    @keyframes vnFadeIn {\r\n        from { opacity: 0; }\r\n        to { opacity: 1; }\r\n    }\r\n    @keyframes vnSlideUp {\r\n        from { opacity: 0; transform: translateY(20px); }\r\n        to { opacity: 1; transform: translateY(0); }\r\n    }\r\n\r\n    .vn-spin { animation: vn-spin 1s infinite linear; display: inline-block; vertical-align: middle; margin-left: 5px; }\r\n    @keyframes vn-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }\r\n\r\n\r\n    .vn-ref-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }\r\n    .vn-btn-withdraw { background: #2271b1; color: #fff; border:none; padding:5px 15px; border-radius:5px; cursor:pointer; margin-right:10px; }\r\n    \/*.vn-referral-box-lg { background: #eef5fb; padding: 20px; border-radius: 10px; border: 2px dashed #2271b1; text-align: center; margin-bottom: 20px; }*\/\r\n    \/*.vn-link-row { display: flex; max-width: 500px; margin: 0 auto; }*\/\r\n    \/*.vn-link-row input { flex: 1; padding: 10px; border: 1px solid #ccc; border-radius: 0 5px 5px 0; text-align: center; direction: ltr; }*\/\r\n    \/*.vn-link-row button { border-radius: 5px 0 0 5px; }*\/\r\n    \/*.vn-campaign-maker { margin-top: 15px; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 12px; color: #666; }*\/\r\n    \/*.vn-inp-camp { padding: 5px; border: 1px solid #ddd; border-radius: 4px; width: 120px; }*\/\r\n    \/*.vn-stats-grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; }*\/\r\n    \/*.vn-stat-box { background: #fff; border: 1px solid #eee; padding: 15px; border-radius: 8px; text-align: center; box-shadow: 0 2px 5px rgba(0,0,0,0.03); }*\/\r\n    \/*.vn-stat-box .lbl { font-size: 11px; color: #888; display: block; }*\/\r\n    \/*.vn-stat-box .val { font-size: 18px; font-weight: bold; color: #333; margin-top: 5px; }*\/\r\n    \/*.vn-stat-box.green .val { color: #00a32a; }*\/\r\n    \/*.vn-stat-box.blue .val { color: #2271b1; }*\/\r\n\r\n\r\n    \/* --- \u0627\u0633\u062a\u0627\u06cc\u0644 \u0628\u0627\u06a9\u0633 \u0644\u06cc\u0646\u06a9 \u062f\u0639\u0648\u062a --- *\/\r\n    .vn-referral-box-lg {\r\n        background: #fff;\r\n        padding: 30px;\r\n        border-radius: 15px;\r\n        border: 1px solid #f0f0f1;\r\n        box-shadow: 0 10px 30px rgba(0,0,0,0.03);\r\n        text-align: center;\r\n        margin-bottom: 30px;\r\n        position: relative;\r\n        overflow: hidden;\r\n    }\r\n    \/* \u06cc\u06a9 \u0646\u0648\u0627\u0631 \u0631\u0646\u06af\u06cc \u0628\u0627\u0644\u0627\u06cc \u0628\u0627\u06a9\u0633 *\/\r\n    .vn-referral-box-lg::before {\r\n        content: ''; position: absolute; top:0; left:0; right:0; height: 4px;\r\n        background: linear-gradient(90deg, #2271b1, #00a32a);\r\n    }\r\n\r\n    .vn-link-row {\r\n        display: flex;\r\n        max-width: 600px;\r\n        margin: 0 auto;\r\n        box-shadow: 0 5px 15px rgba(0,0,0,0.05);\r\n        border-radius: 8px;\r\n        transition: transform 0.2s;\r\n    }\r\n    .vn-link-row:hover { transform: translateY(-2px); }\r\n\r\n    .vn-link-row input {\r\n        flex: 1;\r\n        padding: 12px 15px;\r\n        border: 1px solid #e0e0e0;\r\n        border-left: none; \/* \u0627\u062a\u0635\u0627\u0644 \u0628\u0647 \u062f\u06a9\u0645\u0647 *\/\r\n        border-radius: 0 8px 8px 0;\r\n        text-align: center;\r\n        direction: ltr;\r\n        font-family: monospace;\r\n        font-size: 15px;\r\n        color: #555;\r\n        background: #fdfdfd;\r\n        outline: none;\r\n    }\r\n    .vn-link-row input:focus { background: #fff; color: #2271b1; }\r\n\r\n    .vn-link-row button {\r\n        background: linear-gradient(135deg, #2271b1 0%, #0073aa 100%);\r\n        color: #fff;\r\n        border: none;\r\n        border-radius: 8px 0 0 8px; \/* \u06af\u0648\u0634\u0647\u200c\u0647\u0627\u06cc \u0686\u067e \u06af\u0631\u062f *\/\r\n        padding: 0 25px;\r\n        font-size: 14px;\r\n        cursor: pointer;\r\n        font-weight: bold;\r\n        transition: all 0.3s ease;\r\n    }\r\n    .vn-link-row button:hover {\r\n        background: linear-gradient(135deg, #135e96 0%, #005177 100%);\r\n        padding-right: 35px; \/* \u0627\u0641\u06a9\u062a \u062d\u0631\u06a9\u062a *\/\r\n    }\r\n\r\n    \/* \u0628\u0627\u06a9\u0633 \u0633\u0627\u0632\u0646\u062f\u0647 \u06a9\u0645\u067e\u06cc\u0646 *\/\r\n    .vn-campaign-maker {\r\n        margin-top: 20px;\r\n        display: inline-flex;\r\n        align-items: center;\r\n        gap: 10px;\r\n        background: #f9f9f9;\r\n        padding: 5px 15px;\r\n        border-radius: 50px;\r\n        border: 1px solid #eee;\r\n    }\r\n    .vn-inp-camp {\r\n         border-bottom: 1px dashed #ccc;\r\n        padding: 5px; width: 140px; text-align: center; outline: none; color: #2271b1;\r\n    }\r\n    .vn-inp-camp:focus { border-bottom-color: #2271b1; }\r\n\r\n\r\n    \/* --- \u0627\u0633\u062a\u0627\u06cc\u0644 \u0628\u0627\u06a9\u0633\u200c\u0647\u0627\u06cc \u0622\u0645\u0627\u0631 (\u06af\u0631\u0627\u062f\u06cc\u0646\u062a) --- *\/\r\n    .vn-stats-grid-4 {\r\n        display: grid;\r\n        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\r\n        gap: 20px;\r\n        margin-bottom: 30px;\r\n    }\r\n\r\n    .vn-stat-box {\r\n        padding: 20px;\r\n        border-radius: 12px;\r\n        text-align: right; \/* \u0631\u0627\u0633\u062a \u0686\u06cc\u0646 \u0628\u0631\u0627\u06cc \u0641\u0627\u0631\u0633\u06cc *\/\r\n        color: #fff;\r\n        position: relative;\r\n        overflow: hidden;\r\n        box-shadow: 0 10px 20px rgba(0,0,0,0.1);\r\n        transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n        border: none; \/* \u062d\u0630\u0641 \u0628\u0648\u0631\u062f\u0631 \u0642\u0628\u0644\u06cc *\/\r\n    }\r\n\r\n    .vn-stat-box:hover {\r\n        transform: translateY(-5px);\r\n        box-shadow: 0 15px 30px rgba(0,0,0,0.15);\r\n    }\r\n\r\n    .vn-stat-box .lbl {\r\n        font-size: 13px;\r\n        opacity: 0.9;\r\n        display: block;\r\n        margin-bottom: 5px;\r\n    }\r\n\r\n    .vn-stat-box .val {\r\n        font-size: 24px;\r\n        font-weight: 800;\r\n        margin-top: 5px;\r\n        text-shadow: 0 2px 4px rgba(0,0,0,0.1);\r\n    }\r\n\r\n    \/* \u0622\u06cc\u06a9\u0648\u0646 \u067e\u0633\u200c\u0632\u0645\u06cc\u0646\u0647 \u0645\u062d\u0648 *\/\r\n    .vn-stat-icon {\r\n        position: absolute;\r\n        left: 10px;\r\n        bottom: 10px;\r\n        font-size: 50px;\r\n        width: 50px;\r\n        height: 50px;\r\n        opacity: 0.2;\r\n        transform: rotate(-15deg);\r\n    }\r\n\r\n    \/* --- \u0631\u0646\u06af\u200c\u0628\u0646\u062f\u06cc \u06af\u0631\u0627\u062f\u06cc\u0646\u062a\u200c\u0647\u0627 --- *\/\r\n\r\n    \/* \u06f1. \u0628\u0646\u0641\u0634 (\u0632\u06cc\u0631\u0645\u062c\u0645\u0648\u0639\u0647\u200c\u0647\u0627) *\/\r\n    .vn-stat-box.purple {\r\n        background: linear-gradient(135deg, #8E2DE2 0%, #4A00E0 100%);\r\n        box-shadow: 0 10px 20px rgba(142, 45, 226, 0.3);\r\n    }\r\n\r\n    \/* \u06f2. \u0646\u0627\u0631\u0646\u062c\u06cc (\u0648\u0631\u0648\u062f\u06cc\u200c\u0647\u0627) *\/\r\n    .vn-stat-box.orange {\r\n        background: linear-gradient(135deg, #F2994A 0%, #F2C94C 100%);\r\n        box-shadow: 0 10px 20px rgba(242, 153, 74, 0.3);\r\n    }\r\n    \/* \u0627\u0635\u0644\u0627\u062d \u0631\u0646\u06af \u0645\u062a\u0646 \u0628\u0631\u0627\u06cc \u0646\u0627\u0631\u0646\u062c\u06cc \u0686\u0648\u0646 \u0631\u0648\u0634\u0646 \u0627\u0633\u062a *\/\r\n    .vn-stat-box.orange .val, .vn-stat-box.orange .lbl { text-shadow: none; color: #fff; }\r\n\r\n    \/* \u06f3. \u0633\u0628\u0632 (\u062f\u0631\u0622\u0645\u062f) *\/\r\n    .vn-stat-box.green {\r\n        background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);\r\n        box-shadow: 0 10px 20px rgba(17, 153, 142, 0.3);\r\n    }\r\n\r\n    \/* \u06f4. \u0622\u0628\u06cc (\u0633\u0641\u0627\u0631\u0634\u0627\u062a) *\/\r\n    .vn-stat-box.blue {\r\n        background: linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%);\r\n        box-shadow: 0 10px 20px rgba(33, 147, 176, 0.3);\r\n    }\r\n\r\n    \/* \u0627\u0633\u062a\u0627\u06cc\u0644 \u0627\u062e\u062a\u0635\u0627\u0635\u06cc \u0628\u0631\u0627\u06cc SweetAlert2 *\/\r\n    .vn-swal-popup {\r\n        font-family: inherit !important; \/* \u0627\u0631\u062b\u200c\u0628\u0631\u06cc \u0641\u0648\u0646\u062a \u0627\u0632 \u0633\u0627\u06cc\u062a *\/\r\n        border-radius: 15px !important;\r\n    }\r\n    .vn-swal-title {\r\n        font-size: 18px !important;\r\n        color: #333 !important;\r\n    }\r\n    .vn-swal-content {\r\n        font-size: 14px !important;\r\n        color: #666 !important;\r\n    }\r\n    \/* \u0631\u0627\u0633\u062a\u200c\u0686\u06cc\u0646 \u06a9\u0631\u062f\u0646 \u0645\u062a\u0646\u200c\u0647\u0627 \u0628\u0631\u0627\u06cc \u0641\u0627\u0631\u0633\u06cc *\/\r\n    div:where(.swal2-container) div:where(.swal2-popup) {\r\n        direction: rtl !important;\r\n        text-align: right !important;\r\n    }\r\n    \/* \u0622\u06cc\u06a9\u0648\u0646 Toast *\/\r\n    div:where(.swal2-container).swal2-top-end > .swal2-popup,\r\n    div:where(.swal2-container).swal2-top-right > .swal2-popup {\r\n        direction: rtl !important;\r\n        display: flex !important;\r\n    }\r\n\r\n    \/* \u0644\u0627\u06cc\u0647 \u0633\u06cc\u0627\u0647 \u067e\u0634\u062a \u0645\u0648\u062f\u0627\u0644 \u0628\u0627 \u0627\u0648\u0644\u0648\u06cc\u062a \u0628\u0627\u0644\u0627 *\/\r\n    .vn-smart-overlay {\r\n        position: fixed;\r\n        top: 0;\r\n        left: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        background: rgba(0, 0, 0, 0.6); \/* \u0633\u06cc\u0627\u0647\u06cc \u067e\u0634\u062a *\/\r\n        backdrop-filter: blur(2px); \/* \u06a9\u0645\u06cc \u062a\u0627\u0631\u06cc \u0628\u0631\u0627\u06cc \u0632\u06cc\u0628\u0627\u06cc\u06cc *\/\r\n        z-index: 999999; \/* \u0627\u0648\u0644\u0648\u06cc\u062a \u0628\u0633\u06cc\u0627\u0631 \u0628\u0627\u0644\u0627 *\/\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n    }\r\n\r\n    \/* \u0628\u0627\u06a9\u0633 \u0627\u0635\u0644\u06cc \u0645\u0648\u062f\u0627\u0644 (\u0633\u0641\u06cc\u062f) *\/\r\n    .vn-smart-modal {\r\n        background: #ffffff; \/* \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u06a9\u0627\u0645\u0644\u0627 \u0633\u0641\u06cc\u062f *\/\r\n        width: 90%;\r\n        max-width: 420px;\r\n        padding: 30px;\r\n        border-radius: 15px;\r\n        box-shadow: 0 15px 40px rgba(0,0,0,0.2);\r\n        text-align: center;\r\n        animation: vnFadeIn 0.3s ease-out;\r\n        position: relative;\r\n    }\r\n\r\n    \/* \u0622\u06cc\u06a9\u0648\u0646 \u0632\u0631\u062f \u0631\u0646\u06af *\/\r\n    .vn-smart-icon {\r\n        width: 70px;\r\n        height: 70px;\r\n        background: #fff8e1;\r\n        color: #f59e0b;\r\n        border-radius: 50%;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        margin: 0 auto 20px;\r\n    }\r\n    .vn-smart-icon .dashicons {\r\n        font-size: 35px;\r\n        width: 35px;\r\n        height: 35px;\r\n    }\r\n\r\n    \/* \u0645\u062a\u0648\u0646 *\/\r\n    .vn-smart-title { margin: 0 0 10px; color: #1f2937; font-size: 18px; font-weight: bold; }\r\n    .vn-smart-desc { color: #6b7280; font-size: 14px; line-height: 1.6; margin-bottom: 25px; }\r\n\r\n    \/* \u0628\u0627\u06a9\u0633 \u062c\u0632\u0626\u06cc\u0627\u062a (\u0642\u06cc\u0645\u062a \u0648 \u0645\u0648\u062c\u0648\u062f\u06cc) *\/\r\n    .vn-smart-info-box {\r\n        background: #f9fafb;\r\n        border: 1px dashed #d1d5db;\r\n        border-radius: 10px;\r\n        padding: 15px;\r\n        margin-bottom: 25px;\r\n    }\r\n    .vn-smart-row {\r\n        display: flex;\r\n        justify-content: space-between;\r\n        margin-bottom: 8px;\r\n        font-size: 14px;\r\n    }\r\n    .vn-smart-row:last-child { margin-bottom: 0; }\r\n    .vn-smart-label { color: #6b7280; }\r\n    .vn-smart-value { font-weight: bold; color: #111827; }\r\n    .vn-smart-value.price { color: #2563eb; }\r\n    .vn-smart-value.count { color: #059669; }\r\n\r\n    \/* \u062f\u06a9\u0645\u0647\u200c\u0647\u0627 *\/\r\n    .vn-smart-actions { display: flex; gap: 12px; }\r\n    .vn-btn-confirm {\r\n        flex: 1;\r\n        background: #2563eb;\r\n        color: #fff;\r\n        border: none;\r\n        padding: 12px;\r\n        border-radius: 8px;\r\n        cursor: pointer;\r\n        font-size: 14px;\r\n        transition: background 0.2s;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n    }\r\n    .vn-btn-confirm:hover { background: #1d4ed8; }\r\n\r\n    .vn-btn-cancel {\r\n        flex: 1;\r\n        background: #f3f4f6;\r\n        color: #374151;\r\n        border: 1px solid #e5e7eb;\r\n        padding: 12px;\r\n        border-radius: 8px;\r\n        cursor: pointer;\r\n        font-size: 14px;\r\n        transition: background 0.2s;\r\n    }\r\n    .vn-btn-cancel:hover { background: #e5e7eb; }\r\n\r\n    \/* \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0648\u0631\u0648\u062f *\/\r\n    @keyframes vnFadeIn {\r\n        from { opacity: 0; transform: translateY(10px); }\r\n        to { opacity: 1; transform: translateY(0); }\r\n    }\r\n\r\n    \/* \u0627\u0633\u062a\u0627\u06cc\u0644 \u0628\u062e\u0634 \u062c\u062f\u06cc\u062f: \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0633\u0631\u0648\u06cc\u0633 \u0648 \u06a9\u0634\u0648\u0631 *\/\r\n    .vn-smart-meta {\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: space-between !important;\r\n        gap: 15px;\r\n        margin-bottom: 20px;\r\n        background: #f3f4f6;\r\n        padding: 8px 15px;\r\n        border-radius: 8px;\r\n    }\r\n    .vn-smart-meta-item {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 6px;\r\n        font-size: 13px;\r\n        font-weight: 600;\r\n        color: #374151;\r\n    }\r\n    .vn-smart-meta-icon { width: 20px; height: 20px; object-fit: contain; }\r\n    .vn-smart-meta-flag { width: 20px; border-radius: 3px; box-shadow: 0 1px 2px rgba(0,0,0,0.1); }\r\n    .vn-smart-divider { color: #d1d5db; font-size: 14px; margin-top: -2px; }\r\n\r\n\r\n    \/* \u0627\u0633\u062a\u0627\u06cc\u0644 \u0628\u0627\u06a9\u0633 \u0645\u062f\u0631\u0646 \u0634\u0645\u0627\u0631\u0647 *\/\r\n    .vn-info-box-modern {\r\n        background: #fff;\r\n        border: 1px solid #e2e4e7;\r\n        border-radius: 12px;\r\n        padding: 20px 15px;\r\n        text-align: center;\r\n        margin-bottom: 20px;\r\n        box-shadow: 0 4px 6px rgba(0,0,0,0.02);\r\n    }\r\n\r\n    .vn-lbl-small {\r\n        display: block;\r\n        font-size: 12px;\r\n        color: #646970;\r\n        margin-bottom: 10px;\r\n        font-weight: 600;\r\n    }\r\n\r\n    \/* \u0646\u0645\u0627\u06cc\u0634\u06af\u0631 \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644 *\/\r\n    .vn-digital-display {\r\n        display: inline-flex;\r\n        align-items: stretch;\r\n        background: #f0f2f5;\r\n        border-radius: 10px;\r\n        overflow: hidden;\r\n        border: 1px solid #dcdcde;\r\n        margin-bottom: 15px;\r\n        direction: ltr; \/* \u0627\u062c\u0628\u0627\u0631 \u0686\u067e\u200c\u0686\u06cc\u0646 \u0628\u0631\u0627\u06cc \u0627\u0639\u062f\u0627\u062f *\/\r\n    }\r\n\r\n    \/* \u0628\u062e\u0634 \u067e\u06cc\u0634\u200c\u0634\u0645\u0627\u0631\u0647 (\u06a9\u062f \u06a9\u0634\u0648\u0631) *\/\r\n    .vn-dd-prefix {\r\n        background: #e6f7ff; \/* \u0622\u0628\u06cc \u062e\u06cc\u0644\u06cc \u0631\u0648\u0634\u0646 *\/\r\n        color: #2271b1;\r\n        font-weight: 800;\r\n        padding: 10px 15px;\r\n        font-size: 20px;\r\n        font-family: 'Courier New', monospace; \/* \u0641\u0648\u0646\u062a \u0645\u062e\u0635\u0648\u0635 \u0627\u0639\u062f\u0627\u062f *\/\r\n        display: flex;\r\n        align-items: center;\r\n        border-right: 1px solid #dcdcde; \/* \u062e\u0637 \u062c\u062f\u0627\u06a9\u0646\u0646\u062f\u0647 *\/\r\n    }\r\n    .vn-plus {\r\n        font-size: 16px;\r\n        margin-right: 2px;\r\n        opacity: 0.7;\r\n    }\r\n\r\n    \/* \u0628\u062e\u0634 \u0628\u062f\u0646\u0647 \u0634\u0645\u0627\u0631\u0647 *\/\r\n    .vn-dd-body {\r\n        padding: 10px 15px;\r\n        font-size: 24px;\r\n        font-weight: bold;\r\n        color: #1d2327;\r\n        font-family: 'Courier New', monospace;\r\n        letter-spacing: 1px; \/* \u0641\u0627\u0635\u0644\u0647 \u0628\u06cc\u0646 \u0627\u0639\u062f\u0627\u062f \u0628\u0631\u0627\u06cc \u062e\u0648\u0627\u0646\u0627\u06cc\u06cc *\/\r\n    }\r\n    .vn-dd-body.full {\r\n        width: 100%;\r\n        text-align: center;\r\n    }\r\n\r\n    \/* \u062f\u06a9\u0645\u0647\u200c\u0647\u0627\u06cc \u06a9\u067e\u06cc \u062c\u062f\u06cc\u062f *\/\r\n    .vn-copy-actions-modern {\r\n        display: flex;\r\n        justify-content: center;\r\n        gap: 12px;\r\n    }\r\n\r\n    .vn-btn-copy-m {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 6px;\r\n        padding: 8px 16px;\r\n        border-radius: 8px;\r\n        border: none;\r\n        cursor: pointer;\r\n        font-size: 12px;\r\n        font-weight: bold;\r\n        transition: all 0.2s ease;\r\n    }\r\n\r\n    .vn-btn-copy-m span.dashicons {\r\n        font-size: 16px;\r\n        width: 16px;\r\n        height: 16px;\r\n    }\r\n\r\n    .vn-btn-copy-m.vn-red {\r\n        background: rgba(214, 54, 56, 0.1);\r\n        color: #d63638;\r\n    }\r\n    .vn-btn-copy-m.vn-red:hover {\r\n        background: rgba(214, 54, 56, 0.2);\r\n    }\r\n\r\n    .vn-btn-copy-m.vn-blue {\r\n        background: rgba(34, 113, 177, 0.1);\r\n        color: #2271b1;\r\n    }\r\n    .vn-btn-copy-m.vn-blue:hover {\r\n        background: rgba(34, 113, 177, 0.2);\r\n    }\r\n\r\n    \/* \u0627\u0633\u062a\u0627\u06cc\u0644 \u062f\u06a9\u0645\u0647 \u0628\u06cc\u0634\u062a\u0631 \u062f\u0631 \u062d\u0627\u0644\u062a \u06af\u0631\u06cc\u062f *\/\r\n    .vn-load-more-card {\r\n        background-color: #f9f9f9;\r\n        border: 2px dashed #ccc; \/* \u062d\u0627\u0634\u06cc\u0647 \u062e\u0637\u200c\u0686\u06cc\u0646 *\/\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        justify-content: center;\r\n        cursor: pointer;\r\n        transition: all 0.3s ease;\r\n        min-height: 100px; \/* \u0627\u0631\u062a\u0641\u0627\u0639 \u0645\u062a\u0646\u0627\u0633\u0628 \u0628\u0627 \u0628\u0642\u06cc\u0647 \u06a9\u0627\u0631\u062a\u200c\u0647\u0627 *\/\r\n    }\r\n\r\n    .vn-load-more-card:hover {\r\n        background-color: #e6f7ff;\r\n        border-color: #2271b1;\r\n        transform: translateY(-3px);\r\n    }\r\n\r\n    .vn-load-more-card .vn-icon {\r\n        margin-bottom: 5px;\r\n        color: #777;\r\n    }\r\n\r\n    .vn-load-more-card:hover .vn-icon,\r\n    .vn-load-more-card:hover .vn-name {\r\n        color: #2271b1;\r\n        font-weight: bold;\r\n    }\r\n\r\n    .vn-load-more-card .dashicons {\r\n        font-size: 32px;\r\n        width: 32px;\r\n        height: 32px;\r\n    }\r\n\r\n    \/* \u0627\u0635\u0644\u0627\u062d \u0646\u0645\u0627\u06cc\u0634 \u0646\u0648\u0627\u0631 \u0628\u0627\u0644\u0627 \u062f\u0631 \u0645\u0648\u0628\u0627\u06cc\u0644 *\/\r\n    @media (max-width: 1200px) {\r\n        .vn-nav-wrapper {\r\n            flex-direction: column; \/* \u0686\u06cc\u062f\u0645\u0627\u0646 \u0633\u062a\u0648\u0646\u06cc (\u0632\u06cc\u0631 \u0647\u0645) *\/\r\n            align-items: stretch;   \/* \u06a9\u0634\u06cc\u062f\u0646 \u0639\u0631\u0636 *\/\r\n            gap: 10px;              \/* \u0641\u0627\u0635\u0644\u0647 \u0628\u06cc\u0646 \u062a\u0628\u200c\u0647\u0627 \u0648 \u062f\u06a9\u0645\u0647\u200c\u0647\u0627 *\/\r\n        }\r\n\r\n        .vn-nav-scroller {\r\n            width: 100%;            \/* \u062a\u0628\u200c\u0647\u0627 \u06a9\u0644 \u0639\u0631\u0636 \u0631\u0627 \u0628\u06af\u06cc\u0631\u0646\u062f *\/\r\n            border-bottom: 1px solid #f0f0f1; \/* \u062e\u0637 \u062c\u062f\u0627\u06a9\u0646\u0646\u062f\u0647 \u0638\u0631\u06cc\u0641 *\/\r\n            padding-bottom: 10px;\r\n        }\r\n\r\n        .vn-layout-switcher {\r\n            align-self: flex-end;   \/* \u062f\u06a9\u0645\u0647\u200c\u0647\u0627 \u0628\u0631\u0648\u0646\u062f \u0633\u0645\u062a \u0686\u067e (\u062f\u0631 RTL) *\/\r\n            margin-left: 5px;\r\n        }\r\n    }\r\n\r\n    \/* \u0627\u0633\u062a\u0627\u06cc\u0644 \u0646\u0627\u0645 \u0633\u0631\u0648\u06cc\u0633 (\u062d\u062f\u0627\u06a9\u062b\u0631 \u06f2 \u062e\u0637 + \u0633\u0647 \u0646\u0642\u0637\u0647) *\/\r\n    .vn-name {\r\n        font-size: 13px;\r\n        font-weight: bold;\r\n        color: #333;\r\n        margin-top: 8px;\r\n\r\n        \/* \u062a\u06a9\u0646\u06cc\u06a9 \u0645\u062d\u062f\u0648\u062f \u06a9\u0631\u062f\u0646 \u0628\u0647 \u06f2 \u062e\u0637 *\/\r\n        display: -webkit-box;\r\n        -webkit-line-clamp: 2; \/* \u062a\u0639\u062f\u0627\u062f \u062e\u0637\u0648\u0637 \u0645\u062c\u0627\u0632 *\/\r\n        -webkit-box-orient: vertical;\r\n        overflow: hidden;\r\n        text-overflow: ellipsis;\r\n\r\n        \/* \u062a\u0646\u0638\u06cc\u0645 \u0627\u0631\u062a\u0641\u0627\u0639 \u062b\u0627\u0628\u062a \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0647 \u0647\u0645\u0647 \u06a9\u0627\u0631\u062a\u200c\u0647\u0627 \u0647\u0645\u200c\u0627\u0646\u062f\u0627\u0632\u0647 \u0628\u0627\u0634\u0646\u062f *\/\r\n        line-height: 1.5;\r\n        height: 38px; \/* \u0627\u0631\u062a\u0641\u0627\u0639 \u062f\u0642\u06cc\u0642 \u0628\u0631\u0627\u06cc \u06f2 \u062e\u0637 *\/\r\n\r\n        \/* \u0648\u0633\u0637\u200c\u0686\u06cc\u0646 \u06a9\u0631\u062f\u0646 \u0645\u062a\u0646 *\/\r\n        text-align: center;\r\n        width: 100%;\r\n    }\r\n\r\n    \/* \u0627\u0633\u062a\u0627\u06cc\u0644 \u0628\u0627\u06a9\u0633 \u0645\u0648\u062c\u0648\u062f\u06cc *\/\r\n    .vn-balance-header {\r\n        margin-bottom: 20px;\r\n        display: flex;\r\n        justify-content: flex-start;\r\n    }\r\n    .vn-balance-card {\r\n        display: flex;\r\n        align-items: center;\r\n        background: linear-gradient(to left, #f8f9fa, #ffffff);\r\n        border: 1px solid #e2e4e7;\r\n        padding: 10px 20px;\r\n        border-radius: 12px;\r\n        box-shadow: 0 2px 8px rgba(0,0,0,0.03);\r\n        gap: 15px;\r\n    }\r\n    .vn-bal-icon {\r\n        background: #e6f7ff;\r\n        color: #2271b1;\r\n        width: 40px;\r\n        height: 40px;\r\n        border-radius: 50%;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n    }\r\n    .vn-bal-icon .dashicons {\r\n        font-size: 24px;\r\n        width: 24px;\r\n        height: 24px;\r\n    }\r\n    .vn-bal-info {\r\n        display: flex;\r\n        flex-direction: column;\r\n    }\r\n    .vn-bal-label {\r\n        font-size: 11px;\r\n        color: #777;\r\n    }\r\n    .vn-bal-amount {\r\n        font-size: 16px;\r\n        font-weight: bold;\r\n        color: #333;\r\n\r\n    }\r\n    .vn-bal-add-btn {\r\n        background: #2271b1;\r\n        color: #fff !important;\r\n        text-decoration: none;\r\n        font-size: 11px;\r\n        padding: 4px 10px;\r\n        border-radius: 4px;\r\n        margin-right: 10px;\r\n        transition: 0.2s;\r\n    }\r\n    .vn-bal-add-btn:hover {\r\n        background: #135e96;\r\n    }\r\n\r\n    .vn-guest-header {\r\n        background: #fff;\r\n        border: 1px solid #e2e4e7;\r\n        border-radius: 12px;\r\n        padding: 15px 20px;\r\n        margin-bottom: 25px; \/* \u0641\u0627\u0635\u0644\u0647 \u0627\u0632 \u067e\u0627\u06cc\u06cc\u0646 *\/\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        box-shadow: 0 4px 10px rgba(0,0,0,0.03);\r\n        animation: vnFadeIn 0.5s;\r\n        flex-wrap: wrap; \/* \u0628\u0631\u0627\u06cc \u0645\u0648\u0628\u0627\u06cc\u0644 *\/\r\n        gap: 15px;\r\n    }\r\n\r\n    .vn-gh-info {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 12px;\r\n    }\r\n\r\n    .vn-gh-icon {\r\n        width: 45px;\r\n        height: 45px;\r\n        background: #e6f7ff;\r\n        color: #2271b1;\r\n        border-radius: 50%;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n    }\r\n    .vn-gh-icon .dashicons {\r\n        font-size: 24px;\r\n        width: 24px;\r\n        height: 24px;\r\n    }\r\n\r\n    .vn-gh-text {\r\n        display: flex;\r\n        flex-direction: column;\r\n    }\r\n    .vn-gh-text strong {\r\n        font-size: 15px;\r\n        color: #333;\r\n    }\r\n    .vn-gh-text span {\r\n        font-size: 12px;\r\n        color: #777;\r\n    }\r\n\r\n    .vn-gh-actions {\r\n        display: flex;\r\n        gap: 10px;\r\n    }\r\n\r\n    \/* \u062f\u06a9\u0645\u0647\u200c\u0647\u0627\u06cc \u0647\u062f\u0631 *\/\r\n    .vn-btn-login-outline {\r\n        background: #fff;\r\n        color: #555;\r\n        border: 1px solid #ddd;\r\n        padding: 8px 20px;\r\n        border-radius: 8px;\r\n        text-decoration: none;\r\n        font-size: 13px;\r\n        font-weight: 500;\r\n        transition: 0.2s;\r\n    }\r\n    .vn-btn-login-outline:hover {\r\n        border-color: #999;\r\n        color: #333;\r\n    }\r\n\r\n    .vn-btn-register-primary {\r\n        background: #2271b1;\r\n        color: #fff !important;\r\n        border: 1px solid #2271b1;\r\n        padding: 8px 20px;\r\n        border-radius: 8px;\r\n        text-decoration: none;\r\n        font-size: 13px;\r\n        font-weight: bold;\r\n        transition: 0.2s;\r\n        box-shadow: 0 4px 6px rgba(34, 113, 177, 0.2);\r\n    }\r\n    .vn-btn-register-primary:hover {\r\n        background: #135e96;\r\n        transform: translateY(-2px);\r\n    }\r\n\r\n    \/* \u0631\u06cc\u0633\u067e\u0627\u0646\u0633\u06cc\u0648 \u0628\u0631\u0627\u06cc \u0645\u0648\u0628\u0627\u06cc\u0644 *\/\r\n    @media (max-width: 600px) {\r\n        .vn-guest-header {\r\n            flex-direction: column;\r\n            align-items: stretch;\r\n            text-align: center;\r\n        }\r\n        .vn-gh-info {\r\n            flex-direction: column;\r\n        }\r\n        .vn-gh-actions {\r\n            justify-content: center;\r\n            width: 100%;\r\n        }\r\n        .vn-gh-actions a {\r\n            flex: 1;\r\n            text-align: center;\r\n        }\r\n    }\r\n\r\n    \/* --- \u0627\u0633\u062a\u0627\u06cc\u0644 \u0645\u0648\u062f\u0627\u0644 \u0648\u0631\u0648\u062f (\u0627\u0635\u0644\u0627\u062d \u0634\u062f\u0647) --- *\/\r\n\r\n    \/* 2. \u0628\u0627\u06a9\u0633 \u0633\u0641\u06cc\u062f \u0645\u0648\u062f\u0627\u0644 *\/\r\n    .vn-auth-modal {\r\n        background-color: #ffffff !important; \/* <--- \u0627\u06cc\u0646 \u062e\u0637 \u0645\u0634\u06a9\u0644 \u0631\u0627 \u062d\u0644 \u0645\u06cc\u200c\u06a9\u0646\u062f *\/\r\n        width: 100%;\r\n        max-width: 420px !important;\r\n        text-align: center;\r\n        padding: 35px 30px !important;\r\n        border-radius: 24px !important;\r\n        box-shadow: 0 20px 60px rgba(0,0,0,0.2) !important; \/* \u0633\u0627\u06cc\u0647 \u0628\u0631\u0627\u06cc \u0628\u0631\u062c\u0633\u062a\u06af\u06cc *\/\r\n        position: relative;\r\n        border: 1px solid #f0f0f0;\r\n        animation: vnSlideUp 0.3s ease-out;\r\n    }\r\n\r\n    \/* \u062f\u06a9\u0645\u0647 \u0628\u0633\u062a\u0646 (\u0636\u0631\u0628\u062f\u0631) *\/\r\n    .vn-modal-close {\r\n        position: absolute;\r\n        top: 15px;\r\n        right: 15px;\r\n        font-size: 24px;\r\n        color: #aaa;\r\n        cursor: pointer;\r\n        width: 30px;\r\n        height: 30px;\r\n        line-height: 30px;\r\n        border-radius: 50%;\r\n        transition: 0.2s;\r\n    }\r\n    .vn-modal-close:hover {\r\n        background: #f5f5f5;\r\n        color: #d63638;\r\n    }\r\n\r\n    \/* \u0622\u06cc\u06a9\u0648\u0646 \u0642\u0641\u0644 *\/\r\n    .vn-auth-icon-wrap {\r\n        width: 80px;\r\n        height: 80px;\r\n        background: #fff0f1; \/* \u0642\u0631\u0645\u0632 \u062e\u06cc\u0644\u06cc \u0631\u0648\u0634\u0646 *\/\r\n        color: #e63946;      \/* \u0642\u0631\u0645\u0632 *\/\r\n        border-radius: 50%;\r\n        margin: 0 auto 20px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        box-shadow: 0 5px 15px rgba(230, 57, 70, 0.15);\r\n    }\r\n    .vn-auth-icon-wrap .dashicons {\r\n        font-size: 36px;\r\n        width: 36px;\r\n        height: 36px;\r\n    }\r\n\r\n    \/* \u0645\u062a\u0648\u0646 *\/\r\n    .vn-auth-title {\r\n        font-size: 22px;\r\n        font-weight: 800;\r\n        color: #2d3748;\r\n        margin: 0 0 10px 0;\r\n    }\r\n    .vn-auth-desc {\r\n        font-size: 14px;\r\n        color: #718096;\r\n        margin-bottom: 30px;\r\n        line-height: 1.7;\r\n        padding: 0 10px;\r\n    }\r\n\r\n    \/* \u062f\u06a9\u0645\u0647\u200c\u0647\u0627 *\/\r\n    .vn-auth-buttons {\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 15px;\r\n    }\r\n\r\n    .vn-btn-full-login {\r\n        background: #2271b1;\r\n        color: #fff !important;\r\n        padding: 14px;\r\n        border-radius: 12px;\r\n        text-decoration: none;\r\n        font-weight: bold;\r\n        font-size: 15px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        gap: 10px;\r\n        transition: 0.2s;\r\n        box-shadow: 0 4px 12px rgba(34, 113, 177, 0.25);\r\n    }\r\n    .vn-btn-full-login:hover {\r\n        background: #135e96;\r\n        transform: translateY(-2px);\r\n    }\r\n\r\n    .vn-btn-full-register {\r\n        background: #ffffff;\r\n        color: #2271b1 !important;\r\n        padding: 14px;\r\n        border-radius: 12px;\r\n        text-decoration: none;\r\n        font-weight: bold;\r\n        font-size: 15px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        gap: 10px;\r\n        border: 2px solid #e2e8f0;\r\n        transition: 0.2s;\r\n    }\r\n    .vn-btn-full-register:hover {\r\n        border-color: #2271b1;\r\n        background: #f8fbff;\r\n    }\r\n\r\n    .vn-auth-footer {\r\n        margin-top: 25px;\r\n        font-size: 13px;\r\n        color: #a0aec0;\r\n    }\r\n    .vn-auth-footer a {\r\n        color: #2271b1;\r\n        text-decoration: none;\r\n        font-weight: bold;\r\n    }\r\n\r\n    \/* \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\u200c\u0647\u0627 *\/\r\n    @keyframes vnFadeIn { from { opacity: 0; } to { opacity: 1; } }\r\n    @keyframes vnSlideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }\r\n<\/style><\/div>\n\t\t\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<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":47,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"vn-app-template.php","meta":{"footnotes":""},"class_list":["post-6751","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/followbegir.ir\/followbegir\/wp\/v2\/pages\/6751","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/followbegir.ir\/followbegir\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/followbegir.ir\/followbegir\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/followbegir.ir\/followbegir\/wp\/v2\/users\/47"}],"replies":[{"embeddable":true,"href":"https:\/\/followbegir.ir\/followbegir\/wp\/v2\/comments?post=6751"}],"version-history":[{"count":15,"href":"https:\/\/followbegir.ir\/followbegir\/wp\/v2\/pages\/6751\/revisions"}],"predecessor-version":[{"id":7910,"href":"https:\/\/followbegir.ir\/followbegir\/wp\/v2\/pages\/6751\/revisions\/7910"}],"wp:attachment":[{"href":"https:\/\/followbegir.ir\/followbegir\/wp\/v2\/media?parent=6751"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}