{"id":1658,"date":"2025-06-05T09:16:09","date_gmt":"2025-06-05T02:16:09","guid":{"rendered":"https:\/\/onthepapercard.com\/?page_id=1658"},"modified":"2025-06-17T15:08:39","modified_gmt":"2025-06-17T08:08:39","slug":"product","status":"publish","type":"page","link":"https:\/\/onthepapercard.com\/en\/product\/","title":{"rendered":"Product"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1658\" class=\"elementor elementor-1658\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-aad30d7 e-flex e-con-boxed elementor-invisible e-con e-parent\" data-id=\"aad30d7\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;animation&quot;:&quot;fadeIn&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-90f6e25 e-con-full e-flex elementor-invisible e-con e-child\" data-id=\"90f6e25\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;animation&quot;:&quot;fadeIn&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-04883e5 elementor-widget elementor-widget-shortcode\" data-id=\"04883e5\" data-element_type=\"widget\" data-e-type=\"widget\" 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\">\n    <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/nouislider@15.7.1\/dist\/nouislider.min.css\">\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/nouislider@15.7.1\/dist\/nouislider.min.js\"><\/script>\n\n    <div class=\"shop-filters-wrapper\">\n        <!-- Toggle Button for Mobile -->\n    <button id=\"toggle-filters\" class=\"block sm:hidden w-full text-left bg-[#F8A25F] text-white font-bold px-4 py-2 rounded mb-4\">\n        B\u1ed9 l\u1ecdc s\u1ea3n ph\u1ea9m \u25bc\n    <\/button>\n\n    <!-- Filter Content -->\n    <div id=\"filter-content\" class=\"hidden sm:block\">\n        <form id=\"shop-filter-form\">\n            <div class=\"main-title\">B\u1ed8 L\u1eccC S\u1ea2N PH\u1ea8M<\/div>\n\n                                <div class=\"filter-group\">\n                        <div class=\"filter-title\">Danh m\u1ee5c s\u1ea3n ph\u1ea9m<\/div>\n                                                    <label>\n                                <input type=\"checkbox\" name=\"danh-muc[]\" value=\"ccc\">\n                                ccc                            <\/label>\n                                                    <label>\n                                <input type=\"checkbox\" name=\"danh-muc[]\" value=\"cong-giao\">\n                                C\u00f4ng gi\u00e1o                            <\/label>\n                                                    <label>\n                                <input type=\"checkbox\" name=\"danh-muc[]\" value=\"hop-qua-3d\">\n                                H\u1ed9p qu\u00e0 3D                            <\/label>\n                                                    <label>\n                                <input type=\"checkbox\" name=\"danh-muc[]\" value=\"mo-hinh-kien-truc-giay\">\n                                M\u00f4 h\u00ecnh ki\u1ebfn tr\u00fac gi\u1ea5y                            <\/label>\n                                                    <label>\n                                <input type=\"checkbox\" name=\"danh-muc[]\" value=\"phat-giao\">\n                                Ph\u1eadt gi\u00e1o                            <\/label>\n                                                    <label>\n                                <input type=\"checkbox\" name=\"danh-muc[]\" value=\"qua-tang\">\n                                Qu\u00e0 t\u1eb7ng                            <\/label>\n                                                    <label>\n                                <input type=\"checkbox\" name=\"danh-muc[]\" value=\"qua-tang-doanh-nghiep\">\n                                Qu\u00e0 t\u1eb7ng doanh nghi\u1ec7p                            <\/label>\n                                                    <label>\n                                <input type=\"checkbox\" name=\"danh-muc[]\" value=\"san-pham-tich-hop-den-va-nhac\">\n                                S\u1ea3n ph\u1ea9m t\u00edch h\u1ee3p \u0111\u00e8n v\u00e0 nh\u1ea1c                            <\/label>\n                                                    <label>\n                                <input type=\"checkbox\" name=\"danh-muc[]\" value=\"thiep-noi-3d\">\n                                Thi\u1ec7p n\u1ed5i 3D                            <\/label>\n                                                    <label>\n                                <input type=\"checkbox\" name=\"danh-muc[]\" value=\"thiet-ke-theo-yeu-cau\">\n                                Thi\u1ebft k\u1ebf theo y\u00eau c\u1ea7u                            <\/label>\n                                            <\/div>\n                                    <div class=\"filter-group\">\n                        <div class=\"filter-title\">Ch\u1ee7 \u0111\u1ec1 s\u1ea3n ph\u1ea9m<\/div>\n                                                    <label>\n                                <input type=\"checkbox\" name=\"chu-de[]\" value=\"giang-sinh-nam-moi\">\n                                Gi\u00e1ng sinh\/N\u0103m m\u1edbi                            <\/label>\n                                                    <label>\n                                <input type=\"checkbox\" name=\"chu-de[]\" value=\"kien-truc-danh-lam-thang-canh\">\n                                Ki\u1ebfn tr\u00fac\/Danh lam th\u1eafng c\u1ea3nh                            <\/label>\n                                                    <label>\n                                <input type=\"checkbox\" name=\"chu-de[]\" value=\"le-tinh-nhan\">\n                                L\u1ec5 t\u00ecnh nh\u00e2n                            <\/label>\n                                                    <label>\n                                <input type=\"checkbox\" name=\"chu-de[]\" value=\"le-tot-nghiep\">\n                                L\u1ec5 t\u1ed1t nghi\u1ec7p                            <\/label>\n                                                    <label>\n                                <input type=\"checkbox\" name=\"chu-de[]\" value=\"phat-dan\">\n                                Ph\u1eadt \u0110\u1ea3n                            <\/label>\n                                                    <label>\n                                <input type=\"checkbox\" name=\"chu-de[]\" value=\"sinh-nhat\">\n                                Sinh nh\u1eadt                            <\/label>\n                                                    <label>\n                                <input type=\"checkbox\" name=\"chu-de[]\" value=\"su-kien-doanh-nghiep\">\n                                S\u1ef1 ki\u1ec7n doanh nghi\u1ec7p                            <\/label>\n                                                    <label>\n                                <input type=\"checkbox\" name=\"chu-de[]\" value=\"tet-nguyen-dan\">\n                                T\u1ebft Nguy\u00ean \u0110\u00e1n                            <\/label>\n                                                    <label>\n                                <input type=\"checkbox\" name=\"chu-de[]\" value=\"tri-an-cam-on\">\n                                Tri \u00e2n\/C\u1ea3m \u01a1n                            <\/label>\n                                                    <label>\n                                <input type=\"checkbox\" name=\"chu-de[]\" value=\"trung-thu\">\n                                Trung thu                            <\/label>\n                                                    <label>\n                                <input type=\"checkbox\" name=\"chu-de[]\" value=\"xxx\">\n                                xxx                            <\/label>\n                                            <\/div>\n                                    <div class=\"filter-group\">\n                        <div class=\"filter-title\">T\u00ednh n\u0103ng \u0111\u1eb7c bi\u1ec7t<\/div>\n                                                    <label>\n                                <input type=\"checkbox\" name=\"tinh-nang[]\" value=\"ca-nhan-hoa-in-ten-thong-diep\">\n                                C\u00e1 nh\u00e2n ho\u00e1 (in t\u00ean, th\u00f4ng \u0111i\u1ec7p)                            <\/label>\n                                                    <label>\n                                <input type=\"checkbox\" name=\"tinh-nang[]\" value=\"mo-thanh-mo-hinh-3d\">\n                                M\u1edf th\u00e0nh m\u00f4 h\u00ecnh 3D                            <\/label>\n                                                    <label>\n                                <input type=\"checkbox\" name=\"tinh-nang[]\" value=\"tich-hop-am-nhac\">\n                                T\u00edch h\u1ee3p \u00e2m nh\u1ea1c                            <\/label>\n                                                    <label>\n                                <input type=\"checkbox\" name=\"tinh-nang[]\" value=\"tich-hop-den-led\">\n                                T\u00edch h\u1ee3p \u0111\u00e8n led                            <\/label>\n                                            <\/div>\n                                    <div class=\"filter-group\">\n                        <div class=\"filter-title\">Ch\u1ea5t li\u1ec7u s\u1ea3n ph\u1ea9m<\/div>\n                                                    <label>\n                                <input type=\"checkbox\" name=\"chat-lieu[]\" value=\"giay\">\n                                Gi\u1ea5y                            <\/label>\n                                                    <label>\n                                <input type=\"checkbox\" name=\"chat-lieu[]\" value=\"go\">\n                                G\u1ed7                            <\/label>\n                                                    <label>\n                                <input type=\"checkbox\" name=\"chat-lieu[]\" value=\"mica\">\n                                Mica                            <\/label>\n                                                    <label>\n                                <input type=\"checkbox\" name=\"chat-lieu[]\" value=\"nhua-decal\">\n                                Nh\u1ef1a\/Decal                            <\/label>\n                                            <\/div>\n                \n            <div class=\"filter-group\">\n                <div class=\"filter-title\">M\u1ee9c gi\u00e1 s\u1ea3n ph\u1ea9m<\/div>\n                <div id=\"price-display\" class=\"price-display\">0 VN\u0110 \u2013 20.000.000 VN\u0110<\/div>\n                <div id=\"price-slider\" style=\"margin:1em 0;\"><\/div>\n                <input type=\"hidden\" id=\"price_min\" name=\"price_min\" value=\"0\">\n                <input type=\"hidden\" id=\"price_max\" name=\"price_max\" value=\"20000000\">\n            <\/div>\n\n            <button type=\"submit\" id=\"shop-apply-filter\">\u00c1p d\u1ee5ng b\u1ed9 l\u1ecdc<\/button>\n        <\/form>\n        <\/div>\n        <\/div>\n\n    <style>\n    \/* T\u00f9y ch\u1ec9nh h\u00ecnh \u1ea3nh SVG *\/\n    .noUi-connect {\n        background: url('https:\/\/onthepapercard.com\/wp-content\/plugins\/shop-plugin\/assets\/uploads\/filter-line.svg') repeat-x center;\n        background-size: contain;\n        height: 12px;\n        background-size: cover;\n        height: 100%;\n    }\n\n    .noUi-handle {\n        background: url('https:\/\/onthepapercard.com\/wp-content\/plugins\/shop-plugin\/assets\/uploads\/filter-circle1.svg') no-repeat center;\n        background-size: contain;\n        border: none;\n        width: 32px;\n        height: 32px;\n        box-shadow:none;\n    }\n    .noUi-handle:after, .noUi-handle:before {\n        display:none;\n    }\n\n    .noUi-horizontal .noUi-handle {\n        top: -9px;\n    }\n\n    \/* Responsive handle size *\/\n    @media (max-width: 480px) {\n        .noUi-handle {\n            width: 24px;\n            height: 24px;\n            top: -8px;\n        }\n    }\n    @media (max-width: 640px) {\n    #toggle-filters {\n        font-size: 1rem;\n    }\n\n    #filter-content {\n        padding: 1rem;\n        border: 1px solid #eee;\n        border-radius: 8px;\n        background-color: #fff;\n    }\n}\n\n    <\/style>\n\n    <script>\ndocument.addEventListener('DOMContentLoaded', function () {\n    var slider = document.getElementById('price-slider');\n    var priceDisplay = document.getElementById('price-display');\n\n    if (slider && typeof noUiSlider !== 'undefined') {\n        noUiSlider.create(slider, {\n            start: [0, 20000000],\n            connect: true,\n            step: 100000,\n            range: {\n                min: 0,\n                max: 20000000\n            },\n            tooltips: false, \/\/ \u1ea8n tooltip\n            format: {\n                to: function (value) {\n                    return Math.round(value);\n                },\n                from: function (value) {\n                    return Number(value);\n                }\n            }\n        });\n\n        var inputMin = document.getElementById('price_min');\n        var inputMax = document.getElementById('price_max');\n\n        function formatCurrency(value) {\n            return new Intl.NumberFormat('vi-VN').format(value) + ' VN\u0110';\n        }\n\n        slider.noUiSlider.on('update', function (values, handle) {\n            const min = Math.round(values[0]);\n            const max = Math.round(values[1]);\n\n            inputMin.value = min;\n            inputMax.value = max;\n\n            \/\/ C\u1eadp nh\u1eadt hi\u1ec3n th\u1ecb text ph\u00eda tr\u00ean\n            priceDisplay.textContent = ` ${formatCurrency(min)} \u2013 ${formatCurrency(max)}`;\n        });\n\n        inputMin.addEventListener('change', function () {\n            slider.noUiSlider.set([this.value, null]);\n        });\n        inputMax.addEventListener('change', function () {\n            slider.noUiSlider.set([null, this.value]);\n        });\n    }\n});\n\n<\/script>\n<script>\ndocument.addEventListener('DOMContentLoaded', function () {\n    const toggleBtn = document.getElementById('toggle-filters');\n    const filterContent = document.getElementById('filter-content');\n\n    if (toggleBtn && filterContent) {\n        toggleBtn.addEventListener('click', function () {\n            const isOpen = !filterContent.classList.contains('hidden');\n            filterContent.classList.toggle('hidden', isOpen);\n            toggleBtn.innerText = isOpen ? 'B\u1ed9 l\u1ecdc s\u1ea3n ph\u1ea9m \u25bc' : 'B\u1ed9 l\u1ecdc s\u1ea3n ph\u1ea9m \u25b2';\n        });\n    }\n});\n<\/script>\n\n\n\n\n\n\n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0414218 e-con-full e-flex e-con e-child\" data-id=\"0414218\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c8b8557 elementor-widget elementor-widget-shortcode\" data-id=\"c8b8557\" data-element_type=\"widget\" data-e-type=\"widget\" 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\">    \n    <!-- Tabs -->\n    \n    <!-- Main grid area -->\n    <div class=\"shop-grid-ajax-wrap w-full\">\n        <div id=\"product-grid-ajax\"><\/div>\n        <div id=\"shop-pagination-ajax\"><\/div>\n    <\/div>\n\n    <!-- AJAX v\u00e0 Modal -->\n    <script>\n    if (typeof window.CustomShopGridAjax === \"undefined\") {\n        window.CustomShopGridAjax = true;\n\n        document.addEventListener(\"DOMContentLoaded\", function () {\n            document.querySelectorAll(\".shop-tab\").forEach((btn) => {\n                btn.addEventListener(\"click\", function () {\n                    document.querySelectorAll(\".shop-tab\").forEach((t) => t.classList.remove(\"active\"));\n                    btn.classList.add(\"active\");\n                    loadProducts({ tab: btn.dataset.tab, page: 1, reset: true });\n                });\n            });\n\n            let filterForm = document.querySelector(\"#shop-filter-form\");\n            if (filterForm) {\n                filterForm.addEventListener(\"submit\", function (e) {\n                    e.preventDefault();\n                    loadProducts({ filter: new FormData(filterForm), page: 1, reset: true });\n                });\n            }\n\n            document.addEventListener(\"click\", function (e) {\n                if (e.target.closest(\".shop-pagination-btn\")) {\n                    let page = e.target.dataset.page;\n                    loadProducts({ page: page });\n                }\n            });\n\n            const urlParams = new URLSearchParams(window.location.search);\n            if (urlParams.has(\"san-pham\")) {\n                const keyword = urlParams.get(\"san-pham\");\n                let formData = new FormData();\n                formData.append(\"keyword\", keyword);\n                formData.append(\"price_min\", 0);\n                formData.append(\"price_max\", 20000000);\n                loadProducts({ filter: formData, page: 1, reset: true });\n            } else {\n                loadProducts({ tab: \"all\", page: 1, reset: true });\n            }\n\n            function loadProducts(options) {\n                let grid = document.getElementById(\"product-grid-ajax\");\n                let pag = document.getElementById(\"shop-pagination-ajax\");\n                let tab = options.tab || document.querySelector(\".shop-tab.active\")?.dataset.tab || \"all\";\n                let page = options.page || 1;\n\n                let formData = new FormData();\n                formData.append(\"action\", \"custom_shop_filter\");\n                formData.append(\"tab\", tab);\n                formData.append(\"page\", page);\n\n                if (options.filter instanceof FormData) {\n                    for (let [key, value] of options.filter.entries()) {\n                        formData.append(key, value);\n                    }\n                }\n\n                grid.innerHTML = '<div style=\"padding:60px 0;text-align:center;\">\u0110ang t\u1ea3i...<\/div>';\n                pag.innerHTML = '';\n\n                fetch('https:\/\/onthepapercard.com\/wp-admin\/admin-ajax.php', {\n                    method: 'POST',\n                    body: formData,\n                    credentials: 'same-origin'\n                })\n                .then((r) => r.text())\n                .then((html) => {\n                    let [htmlGrid, htmlPag] = html.split(\"<!--pagination-->\");\n                    grid.innerHTML = htmlGrid;\n                    pag.innerHTML = htmlPag;\n                    window.scrollTo({\n                        top: grid.getBoundingClientRect().top + window.scrollY - 120,\n                        behavior: \"smooth\",\n                    });\n                });\n            }\n        });\n    }\n    <\/script>\n\n    <!-- Zoom Modal -->\n    <script>\n    document.addEventListener('DOMContentLoaded', function() {\n        document.body.addEventListener('click', function(e){\n            let btn = e.target.closest('.btn-zoom');\n            if(btn){\n                let img = btn.dataset.img;\n                let modal = document.createElement('div');\n                modal.style = \"position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.65);z-index:9999;\";\n                modal.innerHTML = '<img decoding=\"async\" src=\"'+img+'\" style=\"max-width:90vw;max-height:90vh;display:block;margin:6vh auto;border-radius:12px;\">';\n                modal.addEventListener('click', ()=>modal.remove());\n                document.body.appendChild(modal);\n            }\n        });\n    });\n    <\/script>\n\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\"\/>\n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-1658","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/onthepapercard.com\/en\/wp-json\/wp\/v2\/pages\/1658","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/onthepapercard.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/onthepapercard.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/onthepapercard.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/onthepapercard.com\/en\/wp-json\/wp\/v2\/comments?post=1658"}],"version-history":[{"count":41,"href":"https:\/\/onthepapercard.com\/en\/wp-json\/wp\/v2\/pages\/1658\/revisions"}],"predecessor-version":[{"id":2136,"href":"https:\/\/onthepapercard.com\/en\/wp-json\/wp\/v2\/pages\/1658\/revisions\/2136"}],"wp:attachment":[{"href":"https:\/\/onthepapercard.com\/en\/wp-json\/wp\/v2\/media?parent=1658"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}