{"id":11728,"date":"2026-06-13T08:57:04","date_gmt":"2026-06-13T01:57:04","guid":{"rendered":"https:\/\/abcchem.com\/?page_id=11728"},"modified":"2026-06-15T14:10:08","modified_gmt":"2026-06-15T07:10:08","slug":"import-export-data","status":"publish","type":"page","link":"https:\/\/abcchem.com\/vi\/import-export-data\/","title":{"rendered":"Import &#038; Export Data"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"11728\" class=\"elementor elementor-11728\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"wd-negative-gap elementor-element elementor-element-80156b5 e-flex e-con-boxed e-con e-parent\" data-id=\"80156b5\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-11501ec elementor-widget elementor-widget-shortcode\" data-id=\"11501ec\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">    \n    <link rel=\"stylesheet\" type=\"text\/css\" href=\"https:\/\/cdn.datatables.net\/1.13.6\/css\/jquery.dataTables.min.css\">\n    <script src=\"https:\/\/code.jquery.com\/jquery-3.7.0.min.js\"><\/script>\n    <script src=\"https:\/\/cdn.datatables.net\/1.13.6\/js\/jquery.dataTables.min.js\"><\/script>\n\n    <style>\n        @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');\n\n        .xnk-dashboard { \n            font-family: 'Inter', 'Segoe UI', Arial, sans-serif; \n            background: #f8fafc; \n            padding: 30px; \n            border-radius: 12px; \n        }\n        \n        \/* ----- GIAO DI\u1ec6N AI DIGITAL ANALYTIC CHO KPI CARDS ----- *\/\n        .xnk-kpis { \n            display: grid; \n            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); \n            gap: 24px; \n            margin-bottom: 35px; \n        }\n        \n        .kpi-card { \n            background: #ffffff;\n            padding: 35px 20px; \n            border-radius: 16px; \n            box-shadow: 0 10px 40px -10px rgba(0,0,0,0.06); \n            display: flex; \n            flex-direction: column; \n            align-items: center; \n            justify-content: center; \n            position: relative;\n            overflow: hidden;\n            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n            border: 1px solid #f1f5f9;\n            z-index: 1;\n        }\n\n        .kpi-card::before {\n            content: '';\n            position: absolute;\n            top: 0; left: 0; right: 0; \n            height: 4px;\n            background: linear-gradient(90deg, #f37021, #ff5e62);\n            z-index: 2;\n        }\n\n        .kpi-card:hover {\n            transform: translateY(-8px); \n            box-shadow: 0 20px 40px -10px rgba(243, 112, 33, 0.15); \n            border-color: rgba(243, 112, 33, 0.1);\n        }\n\n        .kpi-value { \n            font-size: 46px; \n            font-weight: 900; \n            background: linear-gradient(135deg, #f37021 0%, #ff5e62 100%);\n            -webkit-background-clip: text;\n            -webkit-text-fill-color: transparent;\n            line-height: 1.1;\n            margin-bottom: 12px;\n            letter-spacing: -1.5px;\n            filter: drop-shadow(0px 4px 8px rgba(243, 112, 33, 0.15));\n        }\n\n        .kpi-title { \n            font-size: 13px; \n            color: #64748b; \n            text-transform: uppercase; \n            font-weight: 700; \n            letter-spacing: 1.5px; \n            text-align: center;\n            display: flex;\n            align-items: center;\n            gap: 8px;\n        }\n\n        .kpi-title::before {\n            content: '';\n            display: inline-block;\n            width: 8px; height: 8px;\n            background-color: #10b981;\n            border-radius: 50%;\n            box-shadow: 0 0 8px #10b981;\n            animation: pulse-green 2s infinite;\n        }\n\n        @keyframes pulse-green {\n            0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); }\n            70% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }\n            100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }\n        }\n\n        \/* ----- CSS B\u1ed8 L\u1eccC T\u00ccM KI\u1ebeM ----- *\/\n        .xnk-search-bar { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 25px; background: #fff; padding: 18px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); align-items: center; border: 1px solid #f1f5f9; }\n        .xnk-search-bar > * { margin: 0 !important; }\n        .xnk-search-bar select, .xnk-search-bar input[type=\"text\"] { padding: 0 14px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 14px; outline: none; height: 42px; box-sizing: border-box; max-width: 100%; transition: 0.3s; color: #334155; }\n        .xnk-search-bar select:focus, .xnk-search-bar input[type=\"text\"]:focus { border-color: #f37021; box-shadow: 0 0 0 3px rgba(243, 112, 33, 0.1); }\n        .xnk-search-bar select { width: 160px; background-color: #f8fafc; font-weight: 600; cursor: pointer; }\n        .xnk-search-bar input[type=\"text\"] { flex: 1; min-width: 200px; }\n        \n        .xnk-date-wrap { display: flex; align-items: center; gap: 8px; background: #f8fafc; padding: 0 12px; border: 1px solid #e2e8f0; border-radius: 8px; height: 42px; box-sizing: border-box; transition: 0.3s; }\n        .xnk-date-wrap:focus-within { border-color: #f37021; box-shadow: 0 0 0 3px rgba(243, 112, 33, 0.1); }\n        .xnk-date-wrap span { font-size: 13px; color: #64748b; white-space: nowrap; font-weight: 600; }\n        .xnk-date-wrap input[type=\"date\"] { border: none; background: transparent; padding: 0; height: 38px; color: #334155; width: 115px; outline: none; font-weight: 600; cursor: pointer; }\n        \n        .xnk-search-bar button { height: 42px; padding: 0 28px; background: linear-gradient(135deg, #f37021, #e35d10); color: white; border: none; border-radius: 8px; font-weight: 800; cursor: pointer; transition: 0.3s; white-space: nowrap; line-height: 42px; font-size: 14px; letter-spacing: 0.5px; box-shadow: 0 4px 10px rgba(243, 112, 33, 0.3); }\n        .xnk-search-bar button:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(243, 112, 33, 0.4); }\n\n        \/* ----- CSS B\u1ea2NG D\u1eee LI\u1ec6U (T\u1ed0I \u01afU H\u00d3A CH\u1ed0NG TR\u00c0N H\u00c0NG) ----- *\/\n        .xnk-table-section { \n            background: #fff; \n            padding: 24px; \n            border-radius: 16px; \n            box-shadow: 0 4px 20px -2px rgba(0,0,0,0.04); \n            width: 100%; \n            box-sizing: border-box; \n            border: 1px solid #f1f5f9; \n            \/* G\u1ee1 b\u1ecf overflow-x \u0111\u1ec3 \u00e9p b\u1ea3ng co gi\u00e3n theo khung giao di\u1ec7n *\/\n            overflow-x: visible; \n        }\n        \n        #xnkTableData { \n            width: 100% !important; \n            border-collapse: separate; \n            border-spacing: 0;\n            \/* \u0110\u1eb7t layout c\u1ed1 \u0111\u1ecbnh gi\u00fap ki\u1ec3m so\u00e1t width c\u1ee7a t\u1eebng c\u1ed9t ch\u00ednh x\u00e1c *\/\n            table-layout: fixed; \n        }\n\n        \/* Ti\u00eau \u0111\u1ec1 b\u1ea3ng *\/\n        table.dataTable thead th { \n            background-color: #f8fafc; \n            color: #64748b; \n            font-weight: 700; \n            text-transform: uppercase; \n            font-size: 11px; \/* Gi\u1ea3m nh\u1eb9 font size title *\/\n            letter-spacing: 0.5px; \n            padding: 12px 8px; \n            border-bottom: 2px solid #e2e8f0; \n            text-align: left;\n            word-wrap: break-word;\n            white-space: normal !important;\n        }\n\n        \/* N\u1ed9i dung \u00f4 t\u1ed5ng qu\u00e1t *\/\n        table.dataTable tbody td { \n            padding: 10px 6px; \n            vertical-align: top; \n            color: #334155; \n            border-bottom: 1px solid #f1f5f9; \n            font-size: 12px; \/* Gi\u1ea3m c\u1ee1 ch\u1eef xu\u1ed1ng 12px gi\u00fap ch\u1ee9a nhi\u1ec1u text h\u01a1n *\/\n            line-height: 1.4;\n            transition: background-color 0.2s ease;\n            \/* Cho ph\u00e9p xu\u1ed1ng d\u00f2ng t\u1ef1 \u0111\u1ed9ng \u1edf m\u1ecdi \u00f4 *\/\n            white-space: normal !important; \n            word-break: break-word; \n        }\n\n        \/* Hi\u1ec7u \u1ee9ng Hover v\u00e0o h\u00e0ng *\/\n        table.dataTable tbody tr { transition: all 0.2s ease; }\n        table.dataTable tbody tr:hover td { \n            background-color: #fcfcfd !important; \n        }\n        table.dataTable tbody tr:hover td:first-child {\n            box-shadow: inset 4px 0 0 #f37021; \n        }\n\n        \/* T\u00d9Y CH\u1ec8NH K\u00cdCH TH\u01af\u1edaC CHI TI\u1ebeT T\u1eeaNG C\u1ed8T *\/\n        \n        \/* C\u1ed9t ng\u00e0y th\u00e1ng: Thu nh\u1ecf t\u1ed1i \u0111a v\u1eeba \u0111\u1ee7 hi\u1ec3n th\u1ecb d\u1ea1ng YYYY-MM-DD *\/\n        #xnkTableData th:nth-child(1),\n        #xnkTableData td:nth-child(1) {\n            width: 75px !important;\n        }\n\n        \/* C\u1ed9t HS Code *\/\n        #xnkTableData th:nth-child(2),\n        #xnkTableData td:nth-child(2) {\n            width: 65px !important;\n        }\n\n        \/* C\u1ed9t Origin & Dest (Qu\u1ed1c gia) *\/\n        #xnkTableData th:nth-child(3),\n        #xnkTableData td:nth-child(3),\n        #xnkTableData th:nth-child(5),\n        #xnkTableData td:nth-child(5) {\n            width: 60px !important;\n        }\n\n        \/* C\u1ed9t Exporter & Importer (T\u00ean c\u00f4ng ty) *\/\n        #xnkTableData th:nth-child(4),\n        #xnkTableData td:nth-child(4),\n        #xnkTableData th:nth-child(6),\n        #xnkTableData td:nth-child(6) {\n            width: 140px !important; \n        }\n\n        \/* C\u1ed9t Qty, Price, Amount (S\u1ed1 l\u01b0\u1ee3ng, gi\u00e1) - Thu nh\u1ecf k\u00edch th\u01b0\u1edbc, cho r\u1edbt h\u00e0ng ch\u1eef \u0110\u01a1n v\u1ecb *\/\n        #xnkTableData th:nth-child(8),\n        #xnkTableData td:nth-child(8),\n        #xnkTableData th:nth-child(9),\n        #xnkTableData td:nth-child(9),\n        #xnkTableData th:nth-child(10),\n        #xnkTableData td:nth-child(10) {\n            width: 70px !important;\n            font-size: 11.5px !important;\n        }\n\n        \/* C\u1ed9t Product Desc: Nh\u1eadn ph\u1ea7n di\u1ec7n t\u00edch c\u00f2n l\u1ea1i *\/\n        #xnkTableData th:nth-child(7),\n        #xnkTableData td:nth-child(7) {\n            width: auto !important;\n        }\n\n        \/* Helper Classes b\u1ed5 tr\u1ee3 *\/\n        .font-medium { font-weight: 600; color: #1e293b; }\n        .text-muted { color: #64748b; font-size: 11.5px; } \n        .font-number { font-variant-numeric: tabular-nums; font-family: 'Inter', monospace; }\n        .highlight-amount { font-weight: 700; color: #059669; } \n\n        \/* ----- T\u00d9Y CH\u1ec8NH THANH C\u00d4NG C\u1ee4 DATATABLES ----- *\/\n        .dataTables_wrapper .dataTables_info {\n            color: #64748b !important;\n            font-size: 13px;\n            margin-bottom: 15px;\n            margin-top: 10px;\n        }\n\n        .dataTables_wrapper .dataTables_length {\n            margin-bottom: 15px;\n            margin-top: 5px;\n        }\n        \n        .dataTables_wrapper .dataTables_length label {\n            display: flex !important; \n            align-items: center;\n            gap: 8px; \n            font-size: 13px;\n            color: #64748b;\n            font-weight: 500;\n            margin: 0;\n            white-space: nowrap;\n        }\n        \n        .dataTables_wrapper .dataTables_length select {\n            border: 1px solid #e2e8f0;\n            border-radius: 6px;\n            padding: 0 8px;\n            height: 32px; \n            width: 70px !important; \n            outline: none;\n            color: #1e293b;\n            background-color: #fff;\n            cursor: pointer;\n            font-size: 13px;\n        }\n\n        \/* Ph\u00e2n trang *\/\n        .dataTables_wrapper .dataTables_paginate {\n            margin-top: 15px !important;\n        }\n\n        .dataTables_wrapper .dataTables_paginate .paginate_button {\n            border: none !important;\n            background: #f1f5f9 !important;\n            border-radius: 8px !important;\n            color: #475569 !important;\n            margin: 0 4px;\n            padding: 6px 14px;\n            font-weight: 600;\n            font-size: 13px;\n            transition: all 0.3s ease;\n        }\n\n        .dataTables_wrapper .dataTables_paginate .paginate_button:hover {\n            background: #e2e8f0 !important;\n            color: #1e293b !important;\n            box-shadow: 0 2px 5px rgba(0,0,0,0.05);\n        }\n\n        .dataTables_wrapper .dataTables_paginate .paginate_button.current, \n        .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {\n            background: linear-gradient(135deg, #f37021, #e35d10) !important;\n            color: white !important;\n            box-shadow: 0 4px 10px rgba(243, 112, 33, 0.3) !important;\n        }\n        \n        .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {\n            opacity: 0.5; cursor: not-allowed;\n        }\n    <\/style>\n\n    <div class=\"xnk-dashboard\">\n        <div class=\"xnk-kpis\">\n            <div class=\"kpi-card\">\n                <div class=\"kpi-value\" id=\"kpi-shipments\">0+<\/div>\n                <div class=\"kpi-title\">Total Trade Records<\/div>\n            <\/div>\n            <div class=\"kpi-card\">\n                <div class=\"kpi-value\" id=\"kpi-exporters\">0+<\/div>\n                <div class=\"kpi-title\">Total Exporters<\/div>\n            <\/div>\n            <div class=\"kpi-card\">\n                <div class=\"kpi-value\" id=\"kpi-importers\">0+<\/div>\n                <div class=\"kpi-title\">Total Importers<\/div>\n            <\/div>\n            <div class=\"kpi-card\">\n                <div class=\"kpi-value\" id=\"kpi-origins\">0+<\/div>\n                <div class=\"kpi-title\">Total Countries Covered<\/div>\n            <\/div>\n        <\/div>\n\n        <div class=\"xnk-search-bar\">\n            <input type=\"text\" id=\"xnkKeyword\" placeholder=\"Enter search keyword...\">\n            \n            <select id=\"xnkSearchType\">\n                <option value=\"product\">Product (Default)<\/option>\n                <option value=\"hscode\">HS Code<\/option>\n                <option value=\"origin\">Origin Country<\/option>\n                <option value=\"exporter\">Exporter<\/option>\n                <option value=\"importer\">Importer<\/option>\n            <\/select>\n            \n            <div class=\"xnk-date-wrap\">\n                <span>From:<\/span>\n                <input type=\"date\" id=\"xnkStartDate\" title=\"From date\">\n            <\/div>\n            <div class=\"xnk-date-wrap\">\n                <span>To:<\/span>\n                <input type=\"date\" id=\"xnkEndDate\" title=\"To date\">\n            <\/div>\n            <button type=\"button\" id=\"xnkBtnSearch\">FILTER DATA<\/button>\n        <\/div>\n\n        <div class=\"xnk-table-section\">\n            <table id=\"xnkTableData\" class=\"display\">\n                <thead>\n                    <tr>\n                        <th>Ng\u00e0y<\/th>\n                        <th>HS Code<\/th>\n                        <th>Xu\u1ea5t x\u1ee9<\/th>\n                        <th>Exporter<\/th>\n                        <th>Dest<\/th>\n                        <th>Importer<\/th>\n                        <th>Product Desc<\/th>\n                        <th>Qty<\/th>\n                        <th>Price<\/th>\n                        <th>Amount<\/th>\n                    <\/tr>\n                <\/thead>\n            <\/table>\n        <\/div>\n    <\/div>\n\n    <script>\n    var xnkLang = {\"loading\":\"Loading data...\",\"lengthMenu\":\"Show _MENU_ entries\",\"zeroRecords\":\"No matching records found\",\"info\":\"Page _PAGE_ of _PAGES_\",\"infoEmpty\":\"No data available in table\",\"first\":\"First\",\"last\":\"Last\",\"next\":\"Next\",\"prev\":\"Previous\",\"others\":\"Others\",\"shipments\":\"Shipments\"};\n\n    jQuery(document).ready(function($) {\n        \n        function formatNumber(num) { return parseFloat(num).toLocaleString('en-US', { minimumFractionDigits: 0, maximumFractionDigits: 0 }); }\n\n        function buildApiUrl(basePath) {\n            var keyword = encodeURIComponent($('#xnkKeyword').val());\n            var type = encodeURIComponent($('#xnkSearchType').val());\n            var start = encodeURIComponent($('#xnkStartDate').val());\n            var end = encodeURIComponent($('#xnkEndDate').val());\n            return `https:\/\/dataxnk.abcchem.com${basePath}?keyword=${keyword}&type=${type}&start=${start}&end=${end}`;\n        }\n\n        var table = $('#xnkTableData').DataTable({\n            \"processing\": true, \"serverSide\": true, \"searching\": false, \"ordering\": false, \"scrollX\": false, \"pageLength\": 10,\n            \"ajax\": function (data, callback, settings) {\n                var page = (data.start \/ data.length) + 1;\n                var limit = data.length;\n                var apiUrl = buildApiUrl('\/api\/search') + `&page=${page}&limit=${limit}`;\n\n                $.ajax({\n                    url: apiUrl, type: 'GET',\n                    success: function(res) {\n                        if(res.status === 'success') { callback({ draw: data.draw, recordsTotal: res.total, recordsFiltered: res.total, data: res.data }); }\n                        else { callback({ draw: data.draw, recordsTotal: 0, recordsFiltered: 0, data: [] }); }\n                    },\n                    error: function() { callback({ draw: data.draw, recordsTotal: 0, recordsFiltered: 0, data: [] }); }\n                });\n            },\n            \"columns\": [\n                { \"data\": \"Date\", \"className\": \"font-number text-muted\" }, \n                { \"data\": \"HS Code\", \"className\": \"font-number\" }, \n                { \"data\": \"Country of Origin\", \"className\": \"\" }, \n                { \"data\": \"Exporter\", \"className\": \"font-medium\" },\n                { \"data\": \"Destination Country\", \"className\": \"\" }, \n                { \"data\": \"Importer\", \"className\": \"font-medium\" },\n                { \"data\": \"Product Description\", \"className\": \"text-muted\", \"render\": function(data) { return data && data.length > 90 ? data.substr(0, 90) + '\u2026' : data; } },\n                { \"data\": \"Quantity\", \"className\": \"font-number\" },\n                { \"data\": \"Quantity Unit Price\", \"className\": \"font-number\", \"render\": function(data) {\n                    if(!data) return ''; var p = data.trim().split(' ');\n                    return (p.length > 0 && !isNaN(p[0])) ? parseFloat(p[0]).toFixed(2) + ' ' + p.slice(1).join(' ') : data;\n                }},\n                { \"data\": \"Amount\", \"className\": \"font-number highlight-amount\" }\n            ],\n            \"language\": {\n                \"processing\": xnkLang.loading,\n                \"lengthMenu\": xnkLang.lengthMenu,\n                \"zeroRecords\": xnkLang.zeroRecords,\n                \"info\": xnkLang.info,\n                \"infoEmpty\": xnkLang.infoEmpty,\n                \"paginate\": { \"first\": xnkLang.first, \"last\": xnkLang.last, \"next\": xnkLang.next, \"previous\": xnkLang.prev }\n            }\n        });\n\n        function updateDashboardWidgets() {\n            $.get(buildApiUrl('\/api\/kpi'), function(res) {\n                if(res.status === 'success' && res.data) {\n                    $('#kpi-shipments').text(formatNumber(res.data.total_shipments) + '+');\n                    $('#kpi-exporters').text(formatNumber(res.data.total_exporters) + '+');\n                    $('#kpi-importers').text(formatNumber(res.data.total_importers) + '+');\n                    $('#kpi-origins').text(formatNumber(res.data.total_origins) + '+');\n                } else {\n                    $('#kpi-shipments, #kpi-exporters, #kpi-importers, #kpi-origins').text('0+');\n                }\n            }).fail(function() {\n                $('#kpi-shipments, #kpi-exporters, #kpi-importers, #kpi-origins').text('0+');\n            });\n        }\n\n        $('#xnkBtnSearch').on('click', function(e) { \n            e.preventDefault(); \n            $('#xnkKeyword').val($('#xnkKeyword').val().trim()); \n            table.page(0).draw(false); \n            updateDashboardWidgets(); \n        });\n\n        $('#xnkKeyword').on('keypress', function(e) { \n            if (e.which == 13) { \n                e.preventDefault(); \n                $('#xnkKeyword').val($(this).val().trim());\n                table.page(0).draw(false); \n                updateDashboardWidgets(); \n            } \n        });\n\n        updateDashboardWidgets();\n    });\n    <\/script>\n\n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-11728","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/abcchem.com\/vi\/wp-json\/wp\/v2\/pages\/11728","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/abcchem.com\/vi\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/abcchem.com\/vi\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/abcchem.com\/vi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/abcchem.com\/vi\/wp-json\/wp\/v2\/comments?post=11728"}],"version-history":[{"count":0,"href":"https:\/\/abcchem.com\/vi\/wp-json\/wp\/v2\/pages\/11728\/revisions"}],"wp:attachment":[{"href":"https:\/\/abcchem.com\/vi\/wp-json\/wp\/v2\/media?parent=11728"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}