{"id":6,"date":"2026-07-18T05:16:06","date_gmt":"2026-07-18T05:16:06","guid":{"rendered":"https:\/\/vattunlmt.click\/?page_id=6"},"modified":"2026-07-18T05:16:06","modified_gmt":"2026-07-18T05:16:06","slug":"6-2","status":"publish","type":"page","link":"https:\/\/vattunlmt.click\/?page_id=6","title":{"rendered":""},"content":{"rendered":"\n<meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>H\u1ec7 Th\u1ed1ng Qu\u1ea3n L\u00fd Kho H\u00e0ng &#8211; H\u00f9ng C\u01b0\u1eddng Solar<\/title>\n    <!-- Tailwind CSS CDN -->\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n    <!-- FontAwesome for Icons -->\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n    <!-- Chart.js for Statistics -->\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n    <!-- SheetJS for Excel Reading and Writing -->\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/xlsx\/0.18.5\/xlsx.full.min.js\"><\/script>\n    <style>\n        @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');\n        body {\n            font-family: 'Inter', sans-serif;\n        }\n        \/* Custom scrollbar *\/\n        ::-webkit-scrollbar {\n            width: 6px;\n            height: 6px;\n        }\n        ::-webkit-scrollbar-track {\n            background: #f1f1f1;\n        }\n        ::-webkit-scrollbar-thumb {\n            background: #cbd5e1;\n            border-radius: 4px;\n        }\n        ::-webkit-scrollbar-thumb:hover {\n            background: #94a3b8;\n        }\n        \/* Custom Print Styles *\/\n        @media print {\n            body * {\n                visibility: hidden;\n            }\n            #print-section, #print-section * {\n                visibility: visible;\n            }\n            #print-section {\n                position: absolute;\n                left: 0;\n                top: 0;\n                width: 100%;\n                background: white;\n                color: black;\n                padding: 10px;\n            }\n            .no-print {\n                display: none !important;\n            }\n        }\n    <\/style>\n\n\n\n    <!-- LOGIN OVERLAY -->\n    <div id=\"login-overlay\" class=\"fixed inset-0 bg-slate-950 z-50 flex items-center justify-center p-4\">\n        <div class=\"bg-white w-full max-w-md rounded-2xl shadow-2xl overflow-hidden border border-slate-200\">\n            <div class=\"bg-slate-900 text-white px-6 py-8 text-center relative\">\n                <div class=\"bg-amber-500 w-16 h-16 rounded-2xl flex items-center justify-center mx-auto shadow-lg shadow-amber-500\/20 mb-4\">\n                    <i class=\"fa-solid fa-solar-panel text-3xl text-slate-950\"><\/i>\n                <\/div>\n                <h2 class=\"text-2xl font-bold tracking-tight\">H\u00d9NG C\u01af\u1edcNG SOLAR<\/h2>\n                <p class=\"text-xs text-slate-400 mt-1\">H\u1ec7 th\u1ed1ng qu\u1ea3n l\u00fd kho th\u00f4ng minh t\u00edch h\u1ee3p<\/p>\n            <\/div>\n            <div class=\"p-6 space-y-4\">\n                <div id=\"login-error\" class=\"hidden bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-xl text-xs font-semibold flex items-center space-x-2\">\n                    <i class=\"fa-solid fa-triangle-exclamation\"><\/i>\n                    <span>T\u00e0i kho\u1ea3n ho\u1eb7c m\u1eadt kh\u1ea9u kh\u00f4ng ch\u00ednh x\u00e1c!<\/span>\n                <\/div>\n                <div>\n                    <label class=\"block text-xs font-bold text-slate-500 uppercase mb-1\">T\u00ean t\u00e0i kho\u1ea3n (Username)<\/label>\n                    <div class=\"relative\">\n                        <i class=\"fa-solid fa-user absolute left-3 top-1\/2 -translate-y-1\/2 text-slate-400 text-sm\"><\/i>\n                        <input type=\"text\" id=\"login-username\" placeholder=\"Nh\u1eadp t\u00e0i kho\u1ea3n...\" class=\"w-full pl-10 pr-4 py-2.5 rounded-xl border border-slate-200 text-sm focus:outline-none focus:ring-2 focus:ring-amber-500\/20 focus:border-amber-500\">\n                    <\/div>\n                <\/div>\n                <div>\n                    <label class=\"block text-xs font-bold text-slate-500 uppercase mb-1\">M\u1eadt kh\u1ea9u \u0111\u0103ng nh\u1eadp<\/label>\n                    <div class=\"relative\">\n                        <i class=\"fa-solid fa-lock absolute left-3 top-1\/2 -translate-y-1\/2 text-slate-400 text-sm\"><\/i>\n                        <input type=\"password\" id=\"login-password\" placeholder=\"\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\" class=\"w-full pl-10 pr-4 py-2.5 rounded-xl border border-slate-200 text-sm focus:outline-none focus:ring-2 focus:ring-amber-500\/20 focus:border-amber-500\">\n                    <\/div>\n                <\/div>\n                <button onclick=\"handleLogin()\" class=\"w-full bg-amber-500 hover:bg-amber-600 text-slate-950 py-3 rounded-xl font-bold text-sm shadow-lg shadow-amber-500\/10 transition flex items-center justify-center space-x-2\">\n                    <i class=\"fa-solid fa-right-to-bracket\"><\/i>\n                    <span>\u0110\u0103ng nh\u1eadp h\u1ec7 th\u1ed1ng<\/span>\n                <\/button>\n                \n                <div class=\"bg-slate-50 p-4 rounded-xl border border-slate-200\/60 mt-4\">\n                    <p class=\"text-[10px] text-slate-400 font-bold uppercase tracking-wider mb-2 flex items-center\">\n                        <i class=\"fa-solid fa-circle-info mr-1.5 text-amber-500\"><\/i> G\u1ee3i \u00fd t\u00e0i kho\u1ea3n demo\n                    <\/p>\n                    <div class=\"space-y-1 text-[11px] text-slate-600\">\n                        <p class=\"flex justify-between\"><span>C\u1ea5p 1 (Qu\u1ea3n tr\u1ecb):<\/span> <strong class=\"text-slate-800\">kimgioadmin \/ kimgio123!<\/strong><\/p>\n                        <p class=\"flex justify-between\"><span>C\u1ea5p 2 (Th\u1ee7 kho):<\/span> <strong class=\"text-slate-800\">thukho_nguyen \/ 123<\/strong><\/p>\n                        <p class=\"flex justify-between\"><span>C\u1ea5p 3 (K\u1ef9 thu\u1eadt):<\/span> <strong class=\"text-slate-800\">kythuat_tran \/ 123<\/strong><\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- CUSTOM CONFIRM & ALERT DIALOG MODAL -->\n    <div id=\"custom-dialog-modal\" class=\"fixed inset-0 bg-slate-950\/60 z-[100] flex items-center justify-center hidden p-4\">\n        <div class=\"bg-white w-full max-w-sm rounded-2xl shadow-2xl overflow-hidden border border-slate-200 animate-in fade-in zoom-in duration-150\">\n            <div id=\"dialog-header\" class=\"px-6 py-4 flex items-center space-x-3 text-slate-950 font-bold border-b border-slate-100\">\n                <i id=\"dialog-icon\" class=\"fa-solid fa-circle-info text-amber-500 text-lg\"><\/i>\n                <span id=\"dialog-title\">Th\u00f4ng b\u00e1o<\/span>\n            <\/div>\n            <div class=\"p-6\">\n                <p id=\"dialog-message\" class=\"text-sm text-slate-600 leading-relaxed font-medium\">N\u1ed9i dung th\u00f4ng b\u00e1o \u1edf \u0111\u00e2y&#8230;<\/p>\n            <\/div>\n            <div class=\"px-6 py-4 bg-slate-50 flex justify-end space-x-2.5 border-t border-slate-100\">\n                <button id=\"dialog-btn-cancel\" onclick=\"closeCustomDialog(false)\" class=\"px-4 py-2 text-xs font-semibold text-slate-600 border border-slate-200 bg-white rounded-xl hover:bg-slate-50 transition hidden\">H\u1ee7y b\u1ecf<\/button>\n                <button id=\"dialog-btn-ok\" onclick=\"closeCustomDialog(true)\" class=\"px-5 py-2 text-xs font-bold text-slate-950 bg-amber-500 hover:bg-amber-600 rounded-xl shadow-sm transition\">X\u00e1c nh\u1eadn<\/button>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- MAIN APPLICATION CONTAINER -->\n    <div id=\"app-container\" class=\"hidden flex-1 flex flex-col\">\n        <!-- TOP HEADER -->\n        <header class=\"bg-slate-900 text-white shadow-md px-6 py-4 flex flex-wrap justify-between items-center sticky top-0 z-40\">\n            <div class=\"flex items-center space-x-3\">\n                <div class=\"bg-amber-500 p-2 rounded-xl text-slate-950 shadow\">\n                    <i class=\"fa-solid fa-solar-panel text-lg\"><\/i>\n                <\/div>\n                <div>\n                    <h1 class=\"text-lg font-bold tracking-tight\">H\u00d9NG C\u01af\u1edcNG SOLAR<\/h1>\n                    <p class=\"text-[10px] text-slate-400\">T\u1ed5ng th\u1ea7u \u0111i\u1ec7n m\u1eb7t tr\u1eddi | H\u1ec7 th\u1ed1ng qu\u1ea3n l\u00fd kho \u0111a li\u00ean k\u1ebft<\/p>\n                <\/div>\n            <\/div>\n            <div class=\"flex items-center space-x-4 mt-2 sm:mt-0\">\n                <div class=\"text-right hidden md:block border-r pr-4 border-slate-800\">\n                    <p class=\"text-xs text-slate-400\">Hotline h\u1ed7 tr\u1ee3<\/p>\n                    <p class=\"text-sm font-bold text-amber-500\">0908 772 080<\/p>\n                <\/div>\n                <div class=\"text-right\">\n                    <p class=\"text-xs text-slate-300 font-semibold\" id=\"header-user-display\">Kim Gi\u1edd Admin<\/p>\n                    <p class=\"text-[10px] text-amber-500 font-bold uppercase tracking-wider\" id=\"header-role-display\">Ban Gi\u00e1m \u0110\u1ed1c (C\u1ea5p 1)<\/p>\n                <\/div>\n                <button onclick=\"handleLogout()\" class=\"bg-slate-800 hover:bg-red-900\/60 hover:text-red-300 text-slate-300 p-2.5 rounded-xl transition shadow\" title=\"\u0110\u0103ng xu\u1ea5t t\u00e0i kho\u1ea3n\">\n                    <i class=\"fa-solid fa-power-off\"><\/i>\n                <\/button>\n            <\/div>\n        <\/header>\n\n        <!-- MAIN CONTENT WRAPPER -->\n        <div class=\"flex flex-1 flex-col md:flex-row\">\n            <!-- SIDEBAR NAVIGATION -->\n            <aside class=\"w-full md:w-64 bg-white border-r border-slate-200 p-4 space-y-1.5 flex flex-row md:flex-col overflow-x-auto md:overflow-x-visible\">\n                <button onclick=\"switchTab('dashboard')\" id=\"btn-dashboard\" class=\"nav-btn w-full flex items-center space-x-3 px-4 py-3 rounded-xl transition text-sm font-semibold text-slate-600 hover:bg-slate-50 whitespace-nowrap\">\n                    <i class=\"fa-solid fa-chart-pie text-base\"><\/i>\n                    <span>B\u1ea3ng \u0111i\u1ec1u khi\u1ec3n<\/span>\n                <\/button>\n                <button onclick=\"switchTab('products')\" id=\"btn-products\" class=\"nav-btn w-full flex items-center space-x-3 px-4 py-3 rounded-xl transition text-sm font-semibold text-slate-600 hover:bg-slate-50 whitespace-nowrap\">\n                    <i class=\"fa-solid fa-boxes-packing text-base\"><\/i>\n                    <span>Danh m\u1ee5c thi\u1ebft b\u1ecb<\/span>\n                <\/button>\n                <button onclick=\"switchTab('import')\" id=\"btn-import\" class=\"nav-btn w-full flex items-center space-x-3 px-4 py-3 rounded-xl transition text-sm font-semibold text-slate-600 hover:bg-slate-50 whitespace-nowrap\">\n                    <i class=\"fa-solid fa-file-import text-base text-emerald-600\"><\/i>\n                    <span>T\u1ea1o phi\u1ebfu nh\u1eadp kho<\/span>\n                <\/button>\n                <button onclick=\"switchTab('export')\" id=\"btn-export\" class=\"nav-btn w-full flex items-center space-x-3 px-4 py-3 rounded-xl transition text-sm font-semibold text-slate-600 hover:bg-slate-50 whitespace-nowrap\">\n                    <i class=\"fa-solid fa-file-export text-base text-red-600\"><\/i>\n                    <span>T\u1ea1o phi\u1ebfu xu\u1ea5t kho<\/span>\n                <\/button>\n                <button onclick=\"switchTab('transactions')\" id=\"btn-transactions\" class=\"nav-btn w-full flex items-center space-x-3 px-4 py-3 rounded-xl transition text-sm font-semibold text-slate-600 hover:bg-slate-50 whitespace-nowrap relative\">\n                    <i class=\"fa-solid fa-file-signature text-base\"><\/i>\n                    <span>Ch\u1ee9ng t\u1eeb &amp; Ph\u00ea duy\u1ec7t<\/span>\n                    <span id=\"badge-pending-approvals\" class=\"hidden absolute right-3 top-1\/2 -translate-y-1\/2 bg-red-500 text-white text-[10px] w-5 h-5 rounded-full flex items-center justify-center font-bold animate-pulse\">0<\/span>\n                <\/button>\n                <button onclick=\"switchTab('reports')\" id=\"btn-reports\" class=\"nav-btn w-full flex items-center space-x-3 px-4 py-3 rounded-xl transition text-sm font-semibold text-slate-600 hover:bg-slate-50 whitespace-nowrap\">\n                    <i class=\"fa-solid fa-file-invoice-dollar text-base text-blue-600\"><\/i>\n                    <span>B\u00e1o c\u00e1o lu\u00e2n chuy\u1ec3n<\/span>\n                <\/button>\n                <button onclick=\"switchTab('warehouses')\" id=\"btn-warehouses\" class=\"nav-btn w-full flex items-center space-x-3 px-4 py-3 rounded-xl transition text-sm font-semibold text-slate-600 hover:bg-slate-50 whitespace-nowrap\">\n                    <i class=\"fa-solid fa-warehouse text-base text-indigo-600\"><\/i>\n                    <span>Qu\u1ea3n l\u00fd kho h\u00e0ng<\/span>\n                <\/button>\n                <button onclick=\"switchTab('suppliers')\" id=\"btn-suppliers\" class=\"nav-btn w-full flex items-center space-x-3 px-4 py-3 rounded-xl transition text-sm font-semibold text-slate-600 hover:bg-slate-50 whitespace-nowrap\">\n                    <i class=\"fa-solid fa-truck-field text-base text-teal-600\"><\/i>\n                    <span>Nh\u00e0 cung c\u1ea5p<\/span>\n                <\/button>\n                <button onclick=\"switchTab('brands')\" id=\"btn-brands\" class=\"nav-btn w-full flex items-center space-x-3 px-4 py-3 rounded-xl transition text-sm font-semibold text-slate-600 hover:bg-slate-50 whitespace-nowrap\">\n                    <i class=\"fa-solid fa-copyright text-base text-orange-600\"><\/i>\n                    <span>Th\u01b0\u01a1ng hi\u1ec7u \/ H\u00e3ng<\/span>\n                <\/button>\n                <button onclick=\"switchTab('users')\" id=\"btn-users\" class=\"nav-btn w-full flex items-center space-x-3 px-4 py-3 rounded-xl transition text-sm font-semibold text-slate-600 hover:bg-slate-50 whitespace-nowrap\">\n                    <i class=\"fa-solid fa-users-gear text-base text-purple-600\"><\/i>\n                    <span>Qu\u1ea3n l\u00fd nh\u00e2n s\u1ef1<\/span>\n                <\/button>\n            <\/aside>\n\n            <!-- MAIN CONTENT AREA -->\n            <main class=\"flex-1 p-4 md:p-8 overflow-y-auto\">\n                \n                <!-- TOAST MESSAGE CONTAINER -->\n                <div id=\"toast-container\" class=\"fixed top-20 right-6 z-50 space-y-2 pointer-events-none\"><\/div>\n\n                <!-- ================= TAB 1: DASHBOARD ================= -->\n                <section id=\"tab-dashboard\" class=\"tab-content space-y-6\">\n                    <!-- Stat Cards 6-Grid -->\n                    <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-6 gap-4\">\n                        <div class=\"bg-white p-4 rounded-2xl shadow-sm border border-slate-200\/80 flex flex-col justify-between\">\n                            <p class=\"text-xs text-slate-500 font-bold uppercase tracking-wider\">T\u1ed5ng m\u1eb7t h\u00e0ng<\/p>\n                            <div class=\"flex items-end justify-between mt-2\">\n                                <h3 id=\"stat-total-products\" class=\"text-xl font-black text-slate-900\">0<\/h3>\n                                <div class=\"bg-blue-50 text-blue-600 p-2 rounded-xl\"><i class=\"fa-solid fa-cubes text-sm\"><\/i><\/div>\n                            <\/div>\n                        <\/div>\n                        <div class=\"bg-white p-4 rounded-2xl shadow-sm border border-slate-200\/80 flex flex-col justify-between\">\n                            <p class=\"text-xs text-slate-500 font-bold uppercase tracking-wider\">T\u1ed5ng l\u01b0\u1ee3ng t\u1ed3n<\/p>\n                            <div class=\"flex items-end justify-between mt-2\">\n                                <h3 id=\"stat-total-stock\" class=\"text-xl font-black text-slate-900\">0<\/h3>\n                                <div class=\"bg-teal-50 text-teal-600 p-2 rounded-xl\"><i class=\"fa-solid fa-warehouse text-sm\"><\/i><\/div>\n                            <\/div>\n                        <\/div>\n                        <div class=\"bg-white p-4 rounded-2xl shadow-sm border border-slate-200\/80 flex flex-col justify-between\">\n                            <p class=\"text-xs text-slate-500 font-bold uppercase tracking-wider\">B\u00e1o \u0111\u1ed9ng t\u1ed1i thi\u1ec3u<\/p>\n                            <div class=\"flex items-end justify-between mt-2\">\n                                <h3 id=\"stat-low-stock\" class=\"text-xl font-black text-red-600\">0<\/h3>\n                                <div class=\"bg-red-50 text-red-600 p-2 rounded-xl animate-pulse\"><i class=\"fa-solid fa-bell text-sm\"><\/i><\/div>\n                            <\/div>\n                        <\/div>\n                        <div class=\"bg-white p-4 rounded-2xl shadow-sm border border-slate-200\/80 flex flex-col justify-between\">\n                            <p class=\"text-xs text-slate-500 font-bold uppercase tracking-wider\">Phi\u1ebfu nh\u1eadp \u0111\u00e3 duy\u1ec7t<\/p>\n                            <div class=\"flex items-end justify-between mt-2\">\n                                <h3 id=\"stat-total-import\" class=\"text-xl font-black text-slate-900\">0<\/h3>\n                                <div class=\"bg-emerald-50 text-emerald-600 p-2 rounded-xl\"><i class=\"fa-solid fa-file-circle-plus text-sm\"><\/i><\/div>\n                            <\/div>\n                        <\/div>\n                        <div class=\"bg-white p-4 rounded-2xl shadow-sm border border-slate-200\/80 flex flex-col justify-between\">\n                            <p class=\"text-xs text-slate-500 font-bold uppercase tracking-wider\">Phi\u1ebfu xu\u1ea5t \u0111\u00e3 duy\u1ec7t<\/p>\n                            <div class=\"flex items-end justify-between mt-2\">\n                                <h3 id=\"stat-total-export\" class=\"text-xl font-black text-slate-900\">0<\/h3>\n                                <div class=\"bg-red-50 text-red-600 p-2 rounded-xl\"><i class=\"fa-solid fa-file-circle-minus text-sm\"><\/i><\/div>\n                            <\/div>\n                        <\/div>\n                        <div class=\"bg-white p-4 rounded-2xl shadow-sm border border-amber-200 bg-amber-50\/10 flex flex-col justify-between\">\n                            <p class=\"text-xs text-amber-700 font-bold uppercase tracking-wider\">Ch\u1edd Duy\u1ec7t<\/p>\n                            <div class=\"flex items-end justify-between mt-2\">\n                                <h3 id=\"stat-pending\" class=\"text-xl font-black text-amber-600 animate-bounce\">0<\/h3>\n                                <div class=\"bg-amber-500 text-slate-950 p-2 rounded-xl\"><i class=\"fa-solid fa-clock text-sm\"><\/i><\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <!-- Charts & Low Stock Details Grid -->\n                    <div class=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n                        <!-- Chart section -->\n                        <div class=\"bg-white p-5 rounded-2xl shadow-sm border border-slate-200\/80 lg:col-span-2\">\n                            <h4 class=\"text-sm font-bold text-slate-950 mb-4 flex items-center justify-between\">\n                                <span>Bi\u1ec3u \u0111\u1ed3 ho\u1ea1t \u0111\u1ed9ng kho g\u1ea7n \u0111\u00e2y<\/span>\n                                <span class=\"text-xs text-slate-400 font-normal\">Ch\u1ec9 t\u00ednh giao d\u1ecbch \u0111\u00e3 ph\u00ea duy\u1ec7t<\/span>\n                            <\/h4>\n                            <div class=\"h-64 relative\">\n                                <canvas id=\"dashboardChart\"><\/canvas>\n                            <\/div>\n                        <\/div>\n\n                        <!-- Low Stock Warnings panel -->\n                        <div class=\"bg-white p-5 rounded-2xl shadow-sm border border-slate-200\/80 flex flex-col justify-between\">\n                            <div>\n                                <h4 class=\"text-sm font-bold text-red-600 mb-2 flex items-center\">\n                                    <i class=\"fa-solid fa-triangle-exclamation mr-2 animate-bounce\"><\/i> C\u1ea3nh b\u00e1o d\u01b0\u1edbi \u0111\u1ecbnh m\u1ee9c\n                                <\/h4>\n                                <p class=\"text-xs text-slate-500 mb-4\">C\u00e1c thi\u1ebft b\u1ecb c\u1ea7n c\u00e2n nh\u1eafc nh\u1eadp th\u00eam h\u00e0ng g\u1ea5p.<\/p>\n                            <\/div>\n                            <div id=\"low-stock-list\" class=\"space-y-3 overflow-y-auto max-h-[180px] flex-1 pr-1\">\n                                <!-- JS populated -->\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <!-- Pending Approval warning for level 1 only -->\n                    <div id=\"ceo-approval-alert\" class=\"hidden bg-amber-50 border border-amber-200 p-4 rounded-2xl flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4\">\n                        <div class=\"flex items-start space-x-3\">\n                            <div class=\"bg-amber-500 text-slate-950 p-2 rounded-xl\"><i class=\"fa-solid fa-circle-exclamation text-base\"><\/i><\/div>\n                            <div>\n                                <h4 class=\"text-sm font-bold text-slate-900\">Y\u00eau c\u1ea7u ch\u1edd duy\u1ec7t m\u1edbi t\u1eeb nh\u00e2n s\u1ef1<\/h4>\n                                <p class=\"text-xs text-slate-600 mt-0.5\">Nh\u1ea5n \u0111\u1ec3 duy\u1ec7t ch\u1ee9ng t\u1eeb nh\u1eadp ho\u1eb7c xu\u1ea5t kho.<\/p>\n                            <\/div>\n                        <\/div>\n                        <button onclick=\"switchTab('transactions')\" class=\"bg-slate-900 hover:bg-slate-800 text-white text-xs font-bold px-4 py-2.5 rounded-xl shadow transition whitespace-nowrap\">\u0110\u1ebfn danh s\u00e1ch ph\u00ea duy\u1ec7t<\/button>\n                    <\/div>\n\n                    <!-- Recent approved transactions -->\n                    <div class=\"bg-white p-5 rounded-2xl shadow-sm border border-slate-200\/80\">\n                        <h4 class=\"text-sm font-bold text-slate-950 mb-4\">C\u00e1c giao d\u1ecbch \u0111\u00e3 ph\u00ea duy\u1ec7t m\u1edbi nh\u1ea5t<\/h4>\n                        <div class=\"overflow-x-auto\">\n                            <table class=\"w-full text-left text-xs border-collapse\">\n                                <thead>\n                                    <tr class=\"text-slate-400 border-b border-slate-100 uppercase font-semibold text-[10px]\">\n                                        <th class=\"py-3 px-4\">M\u00e3 phi\u1ebfu<\/th>\n                                        <th class=\"py-3 px-4\">Lo\u1ea1i phi\u1ebfu<\/th>\n                                        <th class=\"py-3 px-4\">Kho ph\u00e1t sinh<\/th>\n                                        <th class=\"py-3 px-4\">Ng\u00e0y giao d\u1ecbch<\/th>\n                                        <th class=\"py-3 px-4\">Ng\u01b0\u1eddi l\u1eadp phi\u1ebfu<\/th>\n                                        <th class=\"py-3 px-4 text-right\">T\u1ed5ng th\u00e0nh ti\u1ec1n<\/th>\n                                        <th class=\"py-3 px-4 text-center\">In nhanh<\/th>\n                                    <\/tr>\n                                <\/thead>\n                                <tbody id=\"recent-transactions-list\">\n                                    <!-- JS populated -->\n                                <\/tbody>\n                            <\/table>\n                        <\/div>\n                    <\/div>\n                <\/section>\n\n                <!-- ================= TAB 2: DANH M\u1ee4C THI\u1ebeT B\u1eca ================= -->\n                <section id=\"tab-products\" class=\"tab-content hidden space-y-6\">\n                    <div class=\"flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4\">\n                        <div>\n                            <h2 class=\"text-lg font-bold text-slate-950\">Danh m\u1ee5c thi\u1ebft b\u1ecb &amp; V\u1eadt t\u01b0 Solar<\/h2>\n                            <p class=\"text-xs text-slate-500\">Xem v\u00e0 c\u1ea5u h\u00ecnh \u0111\u1ecbnh m\u1ee9c an to\u00e0n, t\u1ed3n kho th\u1ef1c t\u1ebf.<\/p>\n                        <\/div>\n                        <button id=\"btn-add-product-trigger\" onclick=\"openProductModal()\" class=\"bg-amber-500 text-slate-950 hover:bg-amber-600 px-4 py-2.5 rounded-xl text-xs font-bold flex items-center shadow transition-all\">\n                            <i class=\"fa-solid fa-plus mr-2\"><\/i> Th\u00eam v\u1eadt t\u01b0 m\u1edbi\n                        <\/button>\n                    <\/div>\n\n                    <!-- Filter Bar -->\n                    <div class=\"bg-white p-4 rounded-xl shadow-sm border border-slate-200\/80 flex flex-wrap gap-4 items-center\">\n                        <div class=\"flex-1 min-w-[240px] relative\">\n                            <i class=\"fa-solid fa-magnifying-glass absolute left-3.5 top-1\/2 -translate-y-1\/2 text-slate-400\"><\/i>\n                            <input type=\"text\" id=\"product-search\" oninput=\"filterProducts()\" placeholder=\"T\u00ecm ki\u1ebfm theo m\u00e3 SKU, t\u00ean s\u1ea3n ph\u1ea9m...\" class=\"w-full pl-10 pr-4 py-2.5 rounded-xl border border-slate-200 text-xs focus:outline-none\">\n                        <\/div>\n                        <div class=\"w-full sm:w-48\">\n                            <select id=\"product-filter-category\" onchange=\"filterProducts()\" class=\"w-full px-3 py-2.5 rounded-xl border border-slate-200 text-xs bg-white\">\n                                <option value=\"\">T\u1ea5t c\u1ea3 ph\u00e2n lo\u1ea1i<\/option>\n                            <\/select>\n                        <\/div>\n                        <div class=\"w-full sm:w-48\">\n                            <select id=\"product-filter-alert\" onchange=\"filterProducts()\" class=\"w-full px-3 py-2.5 rounded-xl border border-slate-200 text-xs bg-white\">\n                                <option value=\"\">T\u1ea5t c\u1ea3 tr\u1ea1ng th\u00e1i<\/option>\n                                <option value=\"safe\">T\u1ed3n an to\u00e0n<\/option>\n                                <option value=\"alert\">D\u01b0\u1edbi t\u1ed3n t\u1ed1i thi\u1ec3u<\/option>\n                            <\/select>\n                        <\/div>\n                    <\/div>\n\n                    <!-- Products Table Card -->\n                    <div class=\"bg-white rounded-2xl shadow-sm border border-slate-200\/80 overflow-hidden\">\n                        <div class=\"overflow-x-auto\">\n                            <table class=\"w-full text-left text-xs border-collapse\">\n                                <thead>\n                                    <tr class=\"bg-slate-50 text-slate-500 border-b border-slate-200 uppercase font-semibold text-[10px]\">\n                                        <th class=\"py-4 px-6\">M\u00e3 SKU<\/th>\n                                        <th class=\"py-4 px-6\">T\u00ean thi\u1ebft b\u1ecb solar<\/th>\n                                        <th class=\"py-4 px-6\">Ph\u00e2n lo\u1ea1i<\/th>\n                                        <th class=\"py-4 px-6 text-center\">\u0110VT<\/th>\n                                        <th class=\"py-4 px-6 text-right\">\u0110\u01a1n gi\u00e1 TB (L\u01b0u kho)<\/th>\n                                        <th class=\"py-4 px-6 text-center\">T\u1ed3n t\u1ed1i thi\u1ec3u<\/th>\n                                        <th class=\"py-4 px-6 text-center\">T\u1ed3n th\u1ef1c t\u1ebf<\/th>\n                                        <th id=\"th-product-actions\" class=\"py-4 px-6 text-center\">H\u00e0nh \u0111\u1ed9ng<\/th>\n                                    <\/tr>\n                                <\/thead>\n                                <tbody id=\"products-table-body\" class=\"divide-y divide-slate-100\">\n                                    <!-- JS populated -->\n                                <\/tbody>\n                            <\/table>\n                        <\/div>\n                    <\/div>\n                <\/section>\n\n                <!-- ================= TAB 3: T\u1ea0O PHI\u1ebeU NH\u1eacP KHO (HORIZONTAL LAYOUT) ================= -->\n                <section id=\"tab-import\" class=\"tab-content hidden space-y-6\">\n                    <div class=\"flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 border-b pb-4\">\n                        <div>\n                            <h2 class=\"text-xl font-extrabold text-slate-900 tracking-tight\">L\u1eadp phi\u1ebfu nh\u1eadp kho th\u00e0nh ph\u1ea9m<\/h2>\n                            <p class=\"text-xs text-slate-500\">Thi\u1ebft k\u1ebf d\u1ea1ng ngang li\u1ec1n m\u1ea1ch, thu\u1eadn ti\u1ec7n thao t\u00e1c tu\u1ea7n t\u1ef1.<\/p>\n                        <\/div>\n                        <div class=\"flex flex-wrap gap-2\">\n                            <button onclick=\"downloadExcelTemplate()\" class=\"bg-slate-100 hover:bg-slate-200 text-slate-700 px-3.5 py-2 rounded-xl text-xs font-bold border border-slate-200 flex items-center transition\">\n                                <i class=\"fa-solid fa-download mr-1.5 text-emerald-600\"><\/i> T\u1ea3i Excel m\u1eabu nh\u1eadp\n                            <\/button>\n                            <label class=\"bg-emerald-600 hover:bg-emerald-700 text-white px-3.5 py-2 rounded-xl text-xs font-bold shadow-sm flex items-center justify-center cursor-pointer transition\">\n                                <i class=\"fa-solid fa-file-excel mr-1.5\"><\/i> Nh\u1eadp kho b\u1eb1ng t\u1ec7p Excel\n                                <input type=\"file\" id=\"import-excel-file\" accept=\".xlsx, .xls\" class=\"hidden\" onchange=\"handleImportExcel(event)\">\n                            <\/label>\n                        <\/div>\n                    <\/div>\n\n                    <!-- STEP 1: General Info Card (Horizontal grid) -->\n                    <div class=\"bg-white p-5 rounded-2xl shadow-sm border border-slate-200\/80 space-y-4\">\n                        <h4 class=\"text-xs font-black uppercase text-slate-400 tracking-wider flex items-center\">\n                            <span class=\"w-5 h-5 bg-emerald-50 text-emerald-600 rounded-full flex items-center justify-center mr-2 text-[10px] font-black\">1<\/span>\n                            Th\u00f4ng tin chung phi\u1ebfu nh\u1eadp\n                        <\/h4>\n                        <div class=\"grid grid-cols-1 md:grid-cols-5 gap-4\">\n                            <div>\n                                <label class=\"block text-[10px] font-bold text-slate-500 uppercase mb-1\">M\u00e3 phi\u1ebfu t\u1ef1 sinh<\/label>\n                                <input type=\"text\" id=\"import-slip-code\" disabled=\"\" class=\"w-full px-3 py-2 bg-slate-50 border rounded-lg text-xs font-bold text-slate-600\">\n                            <\/div>\n                            <div>\n                                <label class=\"block text-[10px] font-bold text-slate-500 uppercase mb-1\">Ng\u01b0\u1eddi l\u1eadp phi\u1ebfu<\/label>\n                                <input type=\"text\" id=\"import-slip-creator\" class=\"w-full px-3 py-2 border rounded-lg text-xs bg-slate-50 focus:outline-none\" disabled=\"\">\n                            <\/div>\n                            <div>\n                                <label class=\"block text-[10px] font-bold text-slate-500 uppercase mb-1\">Ph\u00f2ng \u0111\u1ec1 xu\u1ea5t<\/label>\n                                <input type=\"text\" id=\"import-slip-dept\" value=\"V\u1eadt t\u01b0\" class=\"w-full px-3 py-2 border rounded-lg text-xs bg-white focus:outline-none focus:border-emerald-600\">\n                            <\/div>\n                            <div>\n                                <label class=\"block text-[10px] font-bold text-slate-500 uppercase mb-1\">Kho nh\u1eadn h\u00e0ng *<\/label>\n                                <select id=\"import-slip-warehouse\" class=\"w-full px-3 py-2 border rounded-lg text-xs bg-white font-bold text-slate-800 focus:outline-none focus:border-emerald-600\">\n                                    <!-- Dynamic Warehouses Populated -->\n                                <\/select>\n                            <\/div>\n                            <div>\n                                <label class=\"block text-[10px] font-bold text-slate-500 uppercase mb-1\">Ghi ch\u00fa phi\u1ebfu nh\u1eadp<\/label>\n                                <input type=\"text\" id=\"import-slip-note\" placeholder=\"Nh\u1eadp ghi ch\u00fa m\u1ee5c \u0111\u00edch nh\u1eadp kho...\" class=\"w-full px-3 py-2 border rounded-lg text-xs focus:outline-none focus:border-emerald-600\">\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <!-- STEP 2: Product Input Row (Horizontal aligned) -->\n                    <div class=\"bg-white p-5 rounded-2xl shadow-sm border border-slate-200\/80 space-y-4\">\n                        <h4 class=\"text-xs font-black uppercase text-slate-400 tracking-wider flex items-center\">\n                            <span class=\"w-5 h-5 bg-emerald-50 text-emerald-600 rounded-full flex items-center justify-center mr-2 text-[10px] font-black\">2<\/span>\n                            Th\u00eam thi\u1ebft b\u1ecb solar v\u00e0o phi\u1ebfu nh\u1eadp\n                        <\/h4>\n                        <div class=\"grid grid-cols-1 md:grid-cols-12 gap-3 items-end bg-slate-50 p-4 rounded-xl border border-slate-200\/60\">\n                            <div class=\"md:col-span-4\">\n                                <label class=\"block text-[10px] font-bold text-slate-500 uppercase mb-1\">Ch\u1ecdn thi\u1ebft b\u1ecb solar *<\/label>\n                                <select id=\"import-add-product\" class=\"w-full px-3 py-2 border rounded-lg text-xs bg-white focus:outline-none font-semibold text-slate-900\">\n                                    <!-- JS populated -->\n                                <\/select>\n                            <\/div>\n                            <div class=\"md:col-span-2\">\n                                <label class=\"block text-[10px] font-bold text-slate-500 uppercase mb-1\">Th\u01b0\u01a1ng hi\u1ec7u *<\/label>\n                                <select id=\"import-add-brand\" class=\"w-full px-3 py-2 border rounded-lg text-xs bg-white focus:outline-none\">\n                                    <!-- JS populated -->\n                                <\/select>\n                            <\/div>\n                            <div class=\"md:col-span-2\">\n                                <label class=\"block text-[10px] font-bold text-slate-500 uppercase mb-1\">Nh\u00e0 cung c\u1ea5p *<\/label>\n                                <select id=\"import-add-ncc\" class=\"w-full px-3 py-2 border rounded-lg text-xs bg-white focus:outline-none\">\n                                    <!-- JS populated -->\n                                <\/select>\n                            <\/div>\n                            <div class=\"md:col-span-1\">\n                                <label class=\"block text-[10px] font-bold text-slate-500 uppercase mb-1\">Thu\u1ebf su\u1ea5t<\/label>\n                                <select id=\"import-add-vat\" onchange=\"updateImportPrices('vat')\" class=\"w-full px-3 py-2 border rounded-lg text-xs bg-white focus:outline-none\">\n                                    <option value=\"10\" selected=\"\">10%<\/option>\n                                    <option value=\"8\">8%<\/option>\n                                    <option value=\"5\">5%<\/option>\n                                    <option value=\"0\">0%<\/option>\n                                <\/select>\n                            <\/div>\n                            <div class=\"md:col-span-1.5\">\n                                <label class=\"block text-[10px] font-bold text-slate-500 uppercase mb-1\">\u0110\u01a1n gi\u00e1 (ch\u01b0a VAT) *<\/label>\n                                <input type=\"number\" id=\"import-add-price\" oninput=\"updateImportPrices('price')\" placeholder=\"Gi\u00e1 ch\u01b0a VAT...\" class=\"w-full px-3 py-2 border rounded-lg text-xs bg-white focus:outline-none\">\n                            <\/div>\n                            <div class=\"md:col-span-1.5\">\n                                <label class=\"block text-[10px] font-bold text-slate-500 uppercase mb-1\">\u0110\u01a1n gi\u00e1 (sau VAT)<\/label>\n                                <input type=\"number\" id=\"import-add-price-vat\" oninput=\"updateImportPrices('vatprice')\" placeholder=\"T\u1ef1 t\u00ednh...\" class=\"w-full px-3 py-2 border rounded-lg text-xs bg-white focus:outline-none\">\n                            <\/div>\n                            <div class=\"md:col-span-1\">\n                                <label class=\"block text-[10px] font-bold text-slate-500 uppercase mb-1\">S\u1ed1 l\u01b0\u1ee3ng *<\/label>\n                                <input type=\"number\" id=\"import-add-qty\" min=\"1\" value=\"1\" class=\"w-full px-3 py-2 border rounded-lg text-xs bg-white font-bold text-center focus:outline-none\">\n                            <\/div>\n                            <div class=\"md:col-span-1 text-center\">\n                                <button onclick=\"addProductToImportList()\" class=\"bg-emerald-600 hover:bg-emerald-700 text-white w-full h-9 rounded-lg flex items-center justify-center shadow transition-all font-bold\">\n                                    <i class=\"fa-solid fa-plus mr-1\"><\/i> Th\u00eam\n                                <\/button>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <!-- STEP 3: Draft List & Submit row -->\n                    <div class=\"bg-white p-5 rounded-2xl shadow-sm border border-slate-200\/80 space-y-4\">\n                        <h4 class=\"text-xs font-black uppercase text-slate-400 tracking-wider flex items-center border-b pb-2\">\n                            <span class=\"w-5 h-5 bg-emerald-50 text-emerald-600 rounded-full flex items-center justify-center mr-2 text-[10px] font-black\">3<\/span>\n                            Danh s\u00e1ch s\u1ea3n ph\u1ea9m d\u1ef1 ki\u1ebfn nh\u1eadp kho\n                        <\/h4>\n                        \n                        <div class=\"overflow-x-auto\">\n                            <table class=\"w-full text-left text-xs border-collapse\">\n                                <thead>\n                                    <tr class=\"text-slate-400 border-b border-slate-200 uppercase font-bold text-[10px]\">\n                                        <th class=\"py-2.5\">M\u00e3 VT<\/th>\n                                        <th class=\"py-2.5\">T\u00ean s\u1ea3n ph\u1ea9m thi\u1ebft b\u1ecb<\/th>\n                                        <th class=\"py-2.5\">H\u00e3ng s\u1ea3n xu\u1ea5t<\/th>\n                                        <th class=\"py-2.5\">Nh\u00e0 cung c\u1ea5p<\/th>\n                                        <th class=\"py-2.5 text-center\">S\u1ed1 l\u01b0\u1ee3ng<\/th>\n                                        <th class=\"py-2.5 text-right\">\u0110\u01a1n gi\u00e1 (Ch\u01b0a VAT)<\/th>\n                                        <th class=\"py-2.5 text-right\">\u0110\u01a1n gi\u00e1 (G\u1ed3m VAT)<\/th>\n                                        <th class=\"py-2.5 text-right\">Th\u00e0nh ti\u1ec1n (+VAT)<\/th>\n                                        <th class=\"py-2.5 text-center\">X\u00f3a<\/th>\n                                    <\/tr>\n                                <\/thead>\n                                <tbody id=\"import-draft-tbody\" class=\"divide-y divide-slate-100\">\n                                    <!-- JS populated -->\n                                <\/tbody>\n                            <\/table>\n                        <\/div>\n\n                        <!-- Bottom summary panel inside import tab -->\n                        <div class=\"flex flex-col md:flex-row justify-between items-center bg-slate-50 p-4 rounded-xl border border-slate-200\/60 mt-4 gap-4\">\n                            <div class=\"flex items-center space-x-3\">\n                                <span class=\"text-xs text-slate-500 font-bold uppercase tracking-wider\">T\u1ed4NG TR\u1eca GI\u00c1 PHI\u1ebeU (G\u1ed3m VAT):<\/span>\n                                <span id=\"import-slip-total-view\" class=\"text-2xl font-black text-emerald-600\">0 VN\u0110<\/span>\n                            <\/div>\n                            <div class=\"flex space-x-2 w-full md:w-auto\">\n                                <button onclick=\"clearImportForm()\" class=\"flex-1 md:flex-initial px-6 py-2.5 border rounded-xl text-xs font-bold hover:bg-slate-100 bg-white transition\">X\u00f3a nh\u00e1p<\/button>\n                                <button onclick=\"submitImportSlip()\" class=\"flex-1 md:flex-initial px-8 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white rounded-xl text-xs font-extrabold shadow transition\">G\u1eedi ph\u00ea duy\u1ec7t<\/button>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/section>\n\n                <!-- ================= TAB 4: T\u1ea0O PHI\u1ebeU XU\u1ea4T KHO (HORIZONTAL LAYOUT) ================= -->\n                <section id=\"tab-export\" class=\"tab-content hidden space-y-6\">\n                    <div class=\"border-b pb-4\">\n                        <h2 class=\"text-xl font-extrabold text-slate-900 tracking-tight\">L\u1eadp phi\u1ebfu xu\u1ea5t kho b\u00e0n giao c\u00f4ng tr\u00ecnh<\/h2>\n                        <p class=\"text-xs text-slate-500\">Thi\u1ebft k\u1ebf d\u1ea1ng ngang li\u1ec1n m\u1ea1ch, t\u1ef1 \u0111\u1ed9ng ph\u00e2n ph\u1ed1i \u0111\u01a1n gi\u00e1 theo nguy\u00ean t\u1eafc FIFO.<\/p>\n                    <\/div>\n\n                    <!-- STEP 1: General Info Card (Horizontal grid) -->\n                    <div class=\"bg-white p-5 rounded-2xl shadow-sm border border-slate-200\/80 space-y-4\">\n                        <h4 class=\"text-xs font-black uppercase text-slate-400 tracking-wider flex items-center\">\n                            <span class=\"w-5 h-5 bg-red-50 text-red-600 rounded-full flex items-center justify-center mr-2 text-[10px] font-black\">1<\/span>\n                            Th\u00f4ng tin chung phi\u1ebfu xu\u1ea5t\n                        <\/h4>\n                        <div class=\"grid grid-cols-1 md:grid-cols-4 gap-4\">\n                            <div>\n                                <label class=\"block text-[10px] font-bold text-slate-500 uppercase mb-1\">M\u00e3 phi\u1ebfu xu\u1ea5t<\/label>\n                                <input type=\"text\" id=\"export-slip-code\" disabled=\"\" class=\"w-full px-3 py-2 bg-slate-50 border rounded-lg text-xs font-bold text-slate-600\">\n                            <\/div>\n                            <div>\n                                <label class=\"block text-[10px] font-bold text-slate-500 uppercase mb-1\">Ng\u01b0\u1eddi l\u1eadp phi\u1ebfu<\/label>\n                                <input type=\"text\" id=\"export-slip-creator\" class=\"w-full px-3 py-2 border rounded-lg text-xs bg-slate-50\" disabled=\"\">\n                            <\/div>\n                            <div>\n                                <label class=\"block text-[10px] font-bold text-slate-500 uppercase mb-1\">Kho xu\u1ea5t h\u00e0ng *<\/label>\n                                <select id=\"export-slip-warehouse\" class=\"w-full px-3 py-2 border rounded-lg text-xs bg-white font-bold text-slate-800 focus:outline-none focus:border-red-600\">\n                                    <!-- Dynamic Warehouses Populated -->\n                                <\/select>\n                            <\/div>\n                            <div>\n                                <label class=\"block text-[10px] font-bold text-slate-500 uppercase mb-1\">M\u1ee5c \u0111\u00edch xu\u1ea5t kho \/ L\u00fd do b\u00e0n giao<\/label>\n                                <input type=\"text\" id=\"export-slip-note\" placeholder=\"T\u00ean c\u00f4ng tr\u00ecnh, d\u1ef1 \u00e1n thi c\u00f4ng...\" class=\"w-full px-3 py-2 border rounded-lg text-xs focus:outline-none focus:border-red-600\">\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <!-- STEP 2: Product Input Row (Horizontal) -->\n                    <div class=\"bg-white p-5 rounded-2xl shadow-sm border border-slate-200\/80 space-y-4\">\n                        <h4 class=\"text-xs font-black uppercase text-slate-400 tracking-wider flex items-center\">\n                            <span class=\"w-5 h-5 bg-red-50 text-red-600 rounded-full flex items-center justify-center mr-2 text-[10px] font-black\">2<\/span>\n                            Th\u00eam thi\u1ebft b\u1ecb solar v\u00e0o phi\u1ebfu xu\u1ea5t\n                        <\/h4>\n                        <div class=\"grid grid-cols-1 md:grid-cols-12 gap-3 items-end bg-slate-50 p-4 rounded-xl border border-slate-200\/60\">\n                            <div class=\"md:col-span-6\">\n                                <label class=\"block text-[10px] font-bold text-slate-500 uppercase mb-1\">Ch\u1ecdn s\u1ea3n ph\u1ea9m c\u1ea7n xu\u1ea5t *<\/label>\n                                <select id=\"export-add-product\" onchange=\"onExportProductChange()\" class=\"w-full px-3 py-2 border rounded-lg text-xs bg-white focus:outline-none font-semibold text-slate-900\">\n                                    <!-- JS populated -->\n                                <\/select>\n                            <\/div>\n                            <div class=\"md:col-span-2\">\n                                <label class=\"block text-[10px] font-bold text-slate-500 uppercase mb-1 flex justify-between\">\n                                    <span>S\u1ed1 l\u01b0\u1ee3ng xu\u1ea5t *<\/span>\n                                    <span class=\"text-[9px] text-slate-400 font-normal\">T\u1ed3n kho: <strong id=\"export-available-stock\" class=\"text-red-600\">0<\/strong><\/span>\n                                <\/label>\n                                <input type=\"number\" id=\"export-add-qty\" min=\"1\" value=\"1\" oninput=\"validateExportQtyInput()\" class=\"w-full px-3 py-2 border rounded-lg text-xs bg-white font-bold text-center focus:outline-none\">\n                            <\/div>\n                            <div class=\"md:col-span-3\">\n                                <label class=\"block text-[10px] font-bold text-slate-500 uppercase mb-1\">Gi\u00e1 xu\u1ea5t (T\u1ef1 \u0111\u1ed9ng FIFO)<\/label>\n                                <div id=\"export-fifo-info\" class=\"w-full px-3 py-2 border rounded-lg text-[10px] bg-amber-50 text-amber-700 truncate font-semibold\">\n                                    T\u1ef1 \u0111\u1ed9ng d\u00f2 l\u00f4&#8230;\n                                <\/div>\n                            <\/div>\n                            <div class=\"md:col-span-1 text-center\">\n                                <button onclick=\"addProductToExportList()\" id=\"btn-export-add\" class=\"bg-red-600 text-white hover:bg-red-700 w-full h-9 rounded-lg flex items-center justify-center shadow transition-all font-bold\">\n                                    <i class=\"fa-solid fa-plus mr-1\"><\/i> Th\u00eam\n                                <\/button>\n                            <\/div>\n                        <\/div>\n\n                        <!-- Error alert inside block -->\n                        <div id=\"export-error-dock\" class=\"hidden bg-red-50 border border-red-200 p-4 rounded-xl flex items-start space-x-3 text-red-700\">\n                            <i class=\"fa-solid fa-triangle-exclamation text-base mt-0.5 animate-bounce\"><\/i>\n                            <div>\n                                <h5 class=\"text-xs font-bold uppercase\">C\u1ea3nh b\u00e1o: T\u1ed3n kho kh\u00f4ng \u0111\u00e1p \u1ee9ng!<\/h5>\n                                <p class=\"text-xs mt-0.5\" id=\"export-error-text\">S\u1ed1 l\u01b0\u1ee3ng y\u00eau c\u1ea7u v\u01b0\u1ee3t qu\u00e1 dung l\u01b0\u1ee3ng hi\u1ec7n t\u1ea1i trong kho.<\/p>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <!-- STEP 3: Draft Table & Bottom Bar -->\n                    <div class=\"bg-white p-5 rounded-2xl shadow-sm border border-slate-200\/80 space-y-4\">\n                        <h4 class=\"text-xs font-black uppercase text-slate-400 tracking-wider flex items-center border-b pb-2\">\n                            <span class=\"w-5 h-5 bg-red-50 text-red-600 rounded-full flex items-center justify-center mr-2 text-[10px] font-black\">3<\/span>\n                            Danh s\u00e1ch thi\u1ebft b\u1ecb xu\u1ea5t b\u00e0n giao\n                        <\/h4>\n\n                        <div class=\"overflow-x-auto\">\n                            <table class=\"w-full text-left text-xs border-collapse\">\n                                <thead>\n                                    <tr class=\"text-slate-400 border-b border-slate-200 uppercase font-bold text-[10px]\">\n                                        <th class=\"py-2.5\">M\u00e3 VT<\/th>\n                                        <th class=\"py-2.5\">T\u00ean s\u1ea3n ph\u1ea9m<\/th>\n                                        <th class=\"py-2.5 text-center\">S\u1ed1 l\u01b0\u1ee3ng xu\u1ea5t<\/th>\n                                        <th class=\"py-2.5 text-right\">\u0110\u01a1n gi\u00e1 xu\u1ea5t (FIFO)<\/th>\n                                        <th class=\"py-2.5 text-right\">Th\u00e0nh ti\u1ec1n<\/th>\n                                        <th class=\"py-2.5 text-center\">X\u00f3a<\/th>\n                                    <\/tr>\n                                <\/thead>\n                                <tbody id=\"export-draft-tbody\" class=\"divide-y divide-slate-100\">\n                                    <!-- JS populated -->\n                                <\/tbody>\n                            <\/table>\n                        <\/div>\n\n                        <!-- Bottom panel actions -->\n                        <div class=\"flex flex-col md:flex-row justify-between items-center bg-slate-50 p-4 rounded-xl border border-slate-200\/60 mt-4 gap-4\">\n                            <div class=\"flex items-center space-x-3\">\n                                <span class=\"text-xs text-slate-500 font-bold uppercase tracking-wider\">T\u1ed4NG TR\u1eca GI\u00c1 XU\u1ea4T (V\u1ed1n FIFO):<\/span>\n                                <span id=\"export-slip-total-view\" class=\"text-2xl font-black text-red-600\">0 VN\u0110<\/span>\n                            <\/div>\n                            <div class=\"flex space-x-2 w-full md:w-auto\">\n                                <button onclick=\"clearExportForm()\" class=\"flex-1 md:flex-initial px-6 py-2.5 border rounded-xl text-xs font-bold hover:bg-slate-100 bg-white transition\">X\u00f3a nh\u00e1p<\/button>\n                                <button onclick=\"submitExportSlip()\" id=\"btn-submit-export\" class=\"flex-1 md:flex-initial px-8 py-2.5 bg-red-600 hover:bg-red-700 text-white rounded-xl text-xs font-extrabold shadow transition\">G\u1eedi duy\u1ec7t xu\u1ea5t<\/button>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/section>\n\n                <!-- ================= TAB 5: CH\u1ee8NG T\u1eea & PH\u00ca DUY\u1ec6T ================= -->\n                <section id=\"tab-transactions\" class=\"tab-content hidden space-y-6\">\n                    <!-- Section A: CEO Approval Table (Visible to Level 1 only) -->\n                    <div id=\"ceo-approval-section\" class=\"hidden space-y-4 bg-amber-500\/5 p-6 rounded-3xl border-2 border-dashed border-amber-500\/20\">\n                        <div>\n                            <h3 class=\"text-base font-bold text-slate-900 flex items-center\">\n                                <span class=\"flex h-2.5 w-2.5 rounded-full bg-red-500 mr-2.5 animate-ping\"><\/span>\n                                CH\u1ee8NG T\u1eea \u0110ANG CH\u1edc BAN GI\u00c1M \u0110\u1ed0C DUY\u1ec6T (C\u1ea4P 1)\n                            <\/h3>\n                            <p class=\"text-xs text-slate-500 mt-0.5\">S\u1ed1 l\u01b0\u1ee3ng t\u1ed3n kho ch\u1ec9 thay \u0111\u1ed5i sau khi \u0111\u01b0\u1ee3c c\u1ea5p qu\u1ea3n tr\u1ecb ph\u00ea duy\u1ec7t.<\/p>\n                        <\/div>\n                        <div class=\"bg-white rounded-2xl shadow-sm border border-slate-200\/80 overflow-hidden\">\n                            <div class=\"overflow-x-auto\">\n                                <table class=\"w-full text-left text-xs border-collapse\">\n                                    <thead>\n                                        <tr class=\"bg-slate-50 text-slate-500 border-b border-slate-200 uppercase font-semibold text-[10px]\">\n                                            <th class=\"py-3 px-5\">M\u00e3 phi\u1ebfu<\/th>\n                                            <th class=\"py-3 px-5\">Ph\u00e2n lo\u1ea1i<\/th>\n                                            <th class=\"py-3 px-5\">Kho t\u00e1c \u0111\u1ed9ng<\/th>\n                                            <th class=\"py-3 px-5\">Ng\u01b0\u1eddi \u0111\u1ec1 xu\u1ea5t<\/th>\n                                            <th class=\"py-3 px-5\">Ng\u00e0y g\u1eedi<\/th>\n                                            <th class=\"py-3 px-5\">Ghi ch\u00fa<\/th>\n                                            <th class=\"py-3 px-5 text-right\">T\u1ed5ng c\u1ed9ng<\/th>\n                                            <th class=\"py-3 px-5 text-center\">H\u00e0nh \u0111\u1ed9ng quy\u1ebft \u0111\u1ecbnh<\/th>\n                                        <\/tr>\n                                    <\/thead>\n                                    <tbody id=\"pending-approval-tbody\" class=\"divide-y divide-slate-100\">\n                                        <!-- JS populated -->\n                                    <\/tbody>\n                                <\/table>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <!-- Section B: Archive of Approved Transactions -->\n                    <div class=\"space-y-4\">\n                        <div>\n                            <h2 class=\"text-lg font-bold text-slate-950\">L\u1ecbch s\u1eed ch\u1ee9ng t\u1eeb kho h\u00e0ng<\/h2>\n                            <p class=\"text-xs text-slate-500\">Tra c\u1ee9u c\u00e1c phi\u1ebfu xu\u1ea5t nh\u1eadp kho \u0111\u00e3 \u0111\u01b0\u1ee3c ph\u00ea duy\u1ec7t ch\u00ednh th\u1ee9c.<\/p>\n                        <\/div>\n\n                        <!-- Filter and search of transactions -->\n                        <div class=\"bg-white p-4 rounded-xl shadow-sm border border-slate-200\/80 flex flex-wrap gap-4 items-center\">\n                            <div class=\"flex-1 min-w-[240px] relative\">\n                                <i class=\"fa-solid fa-magnifying-glass absolute left-3.5 top-1\/2 -translate-y-1\/2 text-slate-400\"><\/i>\n                                <input type=\"text\" id=\"txn-search\" oninput=\"filterTransactions()\" placeholder=\"T\u00ecm ki\u1ebfm theo m\u00e3 ch\u1ee9ng t\u1eeb, ng\u01b0\u1eddi l\u1eadp...\" class=\"w-full pl-10 pr-4 py-2.5 rounded-xl border border-slate-200 text-xs focus:outline-none\">\n                            <\/div>\n                            <div class=\"w-full sm:w-48\">\n                                <select id=\"txn-filter-type\" onchange=\"filterTransactions()\" class=\"w-full px-3 py-2.5 rounded-xl border border-slate-200 text-xs bg-white\">\n                                    <option value=\"\">T\u1ea5t c\u1ea3 ph\u00e2n lo\u1ea1i<\/option>\n                                    <option value=\"import\">Phi\u1ebfu Nh\u1eadp (PN)<\/option>\n                                    <option value=\"export\">Phi\u1ebfu Xu\u1ea5t (PX)<\/option>\n                                <\/select>\n                            <\/div>\n                        <\/div>\n\n                        <div class=\"bg-white rounded-2xl shadow-sm border border-slate-200\/80 overflow-hidden\">\n                            <div class=\"overflow-x-auto\">\n                                <table class=\"w-full text-left text-xs border-collapse\">\n                                    <thead>\n                                        <tr class=\"bg-slate-50 text-slate-500 border-b border-slate-200 uppercase font-semibold text-[10px]\">\n                                            <th class=\"py-4 px-6\">M\u00e3 ch\u1ee9ng t\u1eeb<\/th>\n                                            <th class=\"py-4 px-6\">Lo\u1ea1i phi\u1ebfu<\/th>\n                                            <th class=\"py-4 px-6\">Kho ph\u00e1t sinh<\/th>\n                                            <th class=\"py-4 px-6\">Tr\u1ea1ng th\u00e1i<\/th>\n                                            <th class=\"py-4 px-6\">Th\u1eddi gian ghi nh\u1eadn<\/th>\n                                            <th class=\"py-4 px-6\">Ng\u01b0\u1eddi l\u1eadp<\/th>\n                                            <th class=\"py-4 px-6 text-right\">T\u1ed5ng th\u00e0nh ti\u1ec1n<\/th>\n                                            <th class=\"py-4 px-6\">Ghi ch\u00fa<\/th>\n                                            <th class=\"py-4 px-6 text-center\">H\u00e0nh \u0111\u1ed9ng<\/th>\n                                        <\/tr>\n                                    <\/thead>\n                                    <tbody id=\"txn-table-body\" class=\"divide-y divide-slate-100\">\n                                        <!-- JS populated -->\n                                    <\/tbody>\n                                <\/table>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/section>\n\n                <!-- ================= TAB 6: B\u00c1O C\u00c1O LU\u00c2N CHUY\u1ec2N ================= -->\n                <section id=\"tab-reports\" class=\"tab-content hidden space-y-6\">\n                    <div>\n                        <h2 class=\"text-lg font-bold text-slate-950\">B\u00e1o c\u00e1o lu\u00e2n chuy\u1ec3n \u0111\u1ecbnh k\u1ef3<\/h2>\n                        <p class=\"text-xs text-slate-500\">B\u00e1o c\u00e1o Nh\u1eadp &#8211; Xu\u1ea5t &#8211; T\u1ed3n \u0111\u1ea7u k\u1ef3 &amp; cu\u1ed1i k\u1ef3 chi ti\u1ebft.<\/p>\n                    <\/div>\n\n                    <!-- Filter \/ Parameter card -->\n                    <div class=\"bg-white p-5 rounded-2xl shadow-sm border border-slate-200\/80 space-y-4\">\n                        <h4 class=\"text-xs font-bold uppercase text-slate-400 tracking-wider flex items-center\">\n                            <i class=\"fa-solid fa-sliders mr-2 text-amber-500\"><\/i> B\u1ed9 l\u1ecdc k\u1ef3 b\u00e1o c\u00e1o\n                        <\/h4>\n                        <div class=\"grid grid-cols-1 sm:grid-cols-5 gap-4 items-end\">\n                            <div>\n                                <label class=\"block text-[10px] font-bold text-slate-500 uppercase mb-1\">Ki\u1ec3u b\u00e1o c\u00e1o *<\/label>\n                                <select id=\"report-category\" class=\"w-full px-3 py-2.5 border rounded-lg text-xs bg-white focus:outline-none\">\n                                    <option value=\"summary\" selected=\"\">B\u00e1o c\u00e1o t\u1ed5ng h\u1ee3p (NXT)<\/option>\n                                    <option value=\"import\">B\u00e1o c\u00e1o nh\u1eadp kho<\/option>\n                                    <option value=\"export\">B\u00e1o c\u00e1o xu\u1ea5t kho<\/option>\n                                <\/select>\n                            <\/div>\n                            <div>\n                                <label class=\"block text-[10px] font-bold text-slate-500 uppercase mb-1\">Lo\u1ea1i th\u1eddi gian<\/label>\n                                <select id=\"report-type\" onchange=\"toggleReportTimeSelectors()\" class=\"w-full px-3 py-2 border rounded-lg text-xs bg-white focus:outline-none\">\n                                    <option value=\"month\" selected=\"\">B\u00e1o c\u00e1o theo Th\u00e1ng<\/option>\n                                    <option value=\"quarter\">B\u00e1o c\u00e1o theo Qu\u00fd<\/option>\n                                    <option value=\"year\">B\u00e1o c\u00e1o theo N\u0103m<\/option>\n                                <\/select>\n                            <\/div>\n                            <div id=\"sel-report-month\">\n                                <label class=\"block text-[10px] font-bold text-slate-500 uppercase mb-1\">Ch\u1ecdn Th\u00e1ng<\/label>\n                                <select id=\"report-month\" class=\"w-full px-3 py-2 border rounded-lg text-xs bg-white focus:outline-none\">\n                                    <option value=\"1\">Th\u00e1ng 1<\/option>\n                                    <option value=\"2\">Th\u00e1ng 2<\/option>\n                                    <option value=\"3\">Th\u00e1ng 3<\/option>\n                                    <option value=\"4\">Th\u00e1ng 4<\/option>\n                                    <option value=\"5\">Th\u00e1ng 5<\/option>\n                                    <option value=\"6\">Th\u00e1ng 6<\/option>\n                                    <option value=\"7\" selected=\"\">Th\u00e1ng 7<\/option>\n                                    <option value=\"8\">Th\u00e1ng 8<\/option>\n                                    <option value=\"9\">Th\u00e1ng 9<\/option>\n                                    <option value=\"10\">Th\u00e1ng 10<\/option>\n                                    <option value=\"11\">Th\u00e1ng 11<\/option>\n                                    <option value=\"12\">Th\u00e1ng 12<\/option>\n                                <\/select>\n                            <\/div>\n                            <div id=\"sel-report-quarter\" class=\"hidden\">\n                                <label class=\"block text-[10px] font-bold text-slate-500 uppercase mb-1\">Ch\u1ecdn Qu\u00fd<\/label>\n                                <select id=\"report-quarter\" class=\"w-full px-3 py-2 border rounded-lg text-xs bg-white focus:outline-none\">\n                                    <option value=\"1\">Qu\u00fd I (T1 &#8211; T3)<\/option>\n                                    <option value=\"2\">Qu\u00fd II (T4 &#8211; T6)<\/option>\n                                    <option value=\"3\">Qu\u00fd III (T7 &#8211; T9)<\/option>\n                                    <option value=\"4\">Qu\u00fd IV (T10 &#8211; T12)<\/option>\n                                <\/select>\n                            <\/div>\n                            <div>\n                                <label class=\"block text-[10px] font-bold text-slate-500 uppercase mb-1\">N\u0103m t\u00e0i ch\u00ednh<\/label>\n                                <select id=\"report-year\" class=\"w-full px-3 py-2 border rounded-lg text-xs bg-white focus:outline-none\">\n                                    <option value=\"2026\" selected=\"\">2026<\/option>\n                                    <option value=\"2025\">2025<\/option>\n                                <\/select>\n                            <\/div>\n                            <div>\n                                <button onclick=\"generatePeriodicReport()\" class=\"w-full bg-amber-500 text-slate-950 hover:bg-amber-600 px-4 py-2 rounded-lg text-xs font-bold shadow transition flex items-center justify-center h-9\">\n                                    <i class=\"fa-solid fa-file-invoice mr-1.5\"><\/i> K\u1ebft xu\u1ea5t b\u00e1o c\u00e1o\n                                <\/button>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <!-- Generated report wrapper -->\n                    <div id=\"generated-report-card\" class=\"bg-white p-6 rounded-2xl shadow-sm border border-slate-200\/80 space-y-6 hidden\">\n                        <div class=\"flex flex-col sm:flex-row justify-between items-start sm:items-center border-b pb-4 gap-2\">\n                            <div>\n                                <h3 id=\"report-title-display\" class=\"text-base font-bold text-slate-900 uppercase\">B\u00c1O C\u00c1O NH\u1eacP XU\u1ea4T T\u1ed2N KHO V\u1eacT T\u01af SOLAR<\/h3>\n                                <p id=\"report-time-display\" class=\"text-xs text-slate-400 mt-1\">K\u1ef3 b\u00e1o c\u00e1o: &#8230;<\/p>\n                            <\/div>\n                            <button onclick=\"printGeneratedReport()\" class=\"bg-slate-900 hover:bg-slate-800 text-white px-4 py-2 rounded-xl text-xs font-bold flex items-center shadow transition\">\n                                <i class=\"fa-solid fa-print mr-1.5\"><\/i> In \/ L\u01b0u B\u00e1o C\u00e1o\n                            <\/button>\n                        <\/div>\n\n                        <!-- Stat summaries for report -->\n                        <div class=\"grid grid-cols-1 sm:grid-cols-3 gap-4\" id=\"report-stat-container\">\n                            <!-- Populated Dynamically -->\n                        <\/div>\n\n                        <!-- Main Report Table -->\n                        <div class=\"overflow-x-auto\">\n                            <table class=\"w-full text-left text-[11px] border-collapse\" id=\"report-main-table\">\n                                <!-- Populated dynamically based on report type selected -->\n                            <\/table>\n                        <\/div>\n                    <\/div>\n\n                    <div id=\"report-empty-state\" class=\"bg-white p-12 rounded-2xl border border-dashed border-slate-300 text-center text-slate-400\">\n                        <i class=\"fa-solid fa-file-lines text-5xl mb-3 block text-slate-300 animate-pulse\"><\/i>\n                        Vui l\u00f2ng ch\u1ecdn tham s\u1ed1 ph\u00eda tr\u00ean v\u00e0 b\u1ea5m &#8220;K\u1ebft xu\u1ea5t b\u00e1o c\u00e1o&#8221; \u0111\u1ec3 t\u1ed5ng h\u1ee3p d\u1eef li\u1ec7u.\n                    <\/div>\n                <\/section>\n\n                <!-- ================= TAB 7: QU\u1ea2N L\u00dd KHO H\u00c0NG (NEW MODULE) ================= -->\n                <section id=\"tab-warehouses\" class=\"tab-content hidden space-y-6\">\n                    <div class=\"flex justify-between items-center\">\n                        <div>\n                            <h2 class=\"text-lg font-bold text-slate-950\">Danh s\u00e1ch c\u00e1c kho ch\u1ee9a h\u00e0ng<\/h2>\n                            <p class=\"text-xs text-slate-500\">C\u1ea5u h\u00ecnh kho t\u1ed5ng, chi nh\u00e1nh ph\u00e2n ph\u1ed1i ph\u1ee5c v\u1ee5 l\u1eadp v\u00e0 qu\u1ea3n tr\u1ecb phi\u1ebfu nh\u1eadp xu\u1ea5t.<\/p>\n                        <\/div>\n                        <button onclick=\"openWarehouseModal()\" class=\"bg-indigo-600 text-white hover:bg-indigo-700 px-4 py-2.5 rounded-xl text-xs font-bold flex items-center shadow transition\">\n                            <i class=\"fa-solid fa-plus mr-1.5\"><\/i> Th\u00eam kho m\u1edbi\n                        <\/button>\n                    <\/div>\n\n                    <div class=\"bg-white rounded-2xl shadow-sm border border-slate-200\/80 overflow-hidden\">\n                        <div class=\"overflow-x-auto\">\n                            <table class=\"w-full text-left text-xs border-collapse\">\n                                <thead>\n                                    <tr class=\"bg-slate-50 text-slate-500 border-b border-slate-200 uppercase font-semibold text-[10px]\">\n                                        <th class=\"py-3 px-5\">M\u00e3 kho<\/th>\n                                        <th class=\"py-3 px-5\">T\u00ean kho ch\u1ee9a<\/th>\n                                        <th class=\"py-3 px-5\">\u0110\u1ecba \u0111i\u1ec3m \/ \u0110\u1ecba ch\u1ec9<\/th>\n                                        <th class=\"py-3 px-5\">Ng\u01b0\u1eddi ph\u1ee5 tr\u00e1ch<\/th>\n                                        <th class=\"py-3 px-5 text-center\">Tr\u1ea1ng th\u00e1i<\/th>\n                                        <th class=\"py-3 px-5 text-center\">H\u00e0nh \u0111\u1ed9ng<\/th>\n                                    <\/tr>\n                                <\/thead>\n                                <tbody id=\"warehouses-table-body\" class=\"divide-y divide-slate-100\">\n                                    <!-- JS populated -->\n                                <\/tbody>\n                            <\/table>\n                        <\/div>\n                    <\/div>\n                <\/section>\n\n                <!-- ================= TAB 8: QU\u1ea2N L\u00dd NH\u00c0 CUNG C\u1ea4P ================= -->\n                <section id=\"tab-suppliers\" class=\"tab-content hidden space-y-6\">\n                    <div class=\"flex justify-between items-center\">\n                        <div>\n                            <h2 class=\"text-lg font-bold text-slate-950\">Danh s\u00e1ch Nh\u00e0 cung c\u1ea5p (NCC)<\/h2>\n                            <p class=\"text-xs text-slate-500\">Khai b\u00e1o th\u00f4ng tin nh\u00e0 ph\u00e2n ph\u1ed1i ph\u1ee5c v\u1ee5 g\u00e1n \u0111\u01a1n gi\u00e1 nh\u1eadp kho.<\/p>\n                        <\/div>\n                        <button onclick=\"openSupplierModal()\" class=\"bg-teal-600 text-white hover:bg-teal-700 px-4 py-2.5 rounded-xl text-xs font-bold flex items-center shadow transition\">\n                            <i class=\"fa-solid fa-plus mr-1.5\"><\/i> Th\u00eam NCC m\u1edbi\n                        <\/button>\n                    <\/div>\n\n                    <div class=\"bg-white rounded-2xl shadow-sm border border-slate-200\/80 overflow-hidden\">\n                        <div class=\"overflow-x-auto\">\n                            <table class=\"w-full text-left text-xs border-collapse\">\n                                <thead>\n                                    <tr class=\"bg-slate-50 text-slate-500 border-b border-slate-200 uppercase font-semibold text-[10px]\">\n                                        <th class=\"py-3 px-5\">M\u00e3 NCC<\/th>\n                                        <th class=\"py-3 px-5\">T\u00ean doanh nghi\u1ec7p<\/th>\n                                        <th class=\"py-3 px-5\">M\u00e3 s\u1ed1 thu\u1ebf<\/th>\n                                        <th class=\"py-3 px-5\">Ng\u01b0\u1eddi li\u00ean h\u1ec7<\/th>\n                                        <th class=\"py-3 px-5\">S\u1ed1 \u0111i\u1ec7n tho\u1ea1i<\/th>\n                                        <th class=\"py-3 px-5\">Email<\/th>\n                                        <th class=\"py-3 px-5\">\u0110\u1ecba ch\u1ec9<\/th>\n                                        <th class=\"py-3 px-5 text-center\">H\u00e0nh \u0111\u1ed9ng<\/th>\n                                    <\/tr>\n                                <\/thead>\n                                <tbody id=\"suppliers-table-body\" class=\"divide-y divide-slate-100\">\n                                    <!-- JS populated -->\n                                <\/tbody>\n                            <\/table>\n                        <\/div>\n                    <\/div>\n                <\/section>\n\n                <!-- ================= TAB 9: QU\u1ea2N L\u00dd H\u00c3NG S\u1ea2N XU\u1ea4T ================= -->\n                <section id=\"tab-brands\" class=\"tab-content hidden space-y-6\">\n                    <div class=\"flex justify-between items-center\">\n                        <div>\n                            <h2 class=\"text-lg font-bold text-slate-950\">Qu\u1ea3n l\u00fd H\u00e3ng s\u1ea3n xu\u1ea5t (Th\u01b0\u01a1ng hi\u1ec7u)<\/h2>\n                            <p class=\"text-xs text-slate-500\">Khai b\u00e1o danh m\u1ee5c th\u01b0\u01a1ng hi\u1ec7u thi\u1ebft b\u1ecb Solar ph\u1ee5c v\u1ee5 l\u1ecdc, g\u00e1n v\u1eadt t\u01b0 l\u00fac t\u1ea1o phi\u1ebfu nh\u1eadp.<\/p>\n                        <\/div>\n                        <button onclick=\"openBrandModal()\" class=\"bg-orange-600 text-white hover:bg-orange-700 px-4 py-2.5 rounded-xl text-xs font-bold flex items-center shadow transition\">\n                            <i class=\"fa-solid fa-plus mr-1.5\"><\/i> Th\u00eam h\u00e3ng s\u1ea3n xu\u1ea5t m\u1edbi\n                        <\/button>\n                    <\/div>\n\n                    <div class=\"bg-white rounded-2xl shadow-sm border border-slate-200\/80 overflow-hidden\">\n                        <div class=\"overflow-x-auto\">\n                            <table class=\"w-full text-left text-xs border-collapse\">\n                                <thead>\n                                    <tr class=\"bg-slate-50 text-slate-500 border-b border-slate-200 uppercase font-semibold text-[10px]\">\n                                        <th class=\"py-3 px-5\">M\u00e3 H\u00e3ng<\/th>\n                                        <th class=\"py-3 px-5\">T\u00ean H\u00e3ng s\u1ea3n xu\u1ea5t<\/th>\n                                        <th class=\"py-3 px-5\">Qu\u1ed1c gia xu\u1ea5t x\u1ee9<\/th>\n                                        <th class=\"py-3 px-5\">Ghi ch\u00fa \u0111\u1eb7c tr\u01b0ng<\/th>\n                                        <th class=\"py-3 px-5 text-center\">H\u00e0nh \u0111\u1ed9ng<\/th>\n                                    <\/tr>\n                                <\/thead>\n                                <tbody id=\"brands-table-body\" class=\"divide-y divide-slate-100\">\n                                    <!-- JS populated -->\n                                <\/tbody>\n                            <\/table>\n                        <\/div>\n                    <\/div>\n                <\/section>\n\n                <!-- ================= TAB 10: QU\u1ea2N L\u00dd NH\u00c2N S\u1ef0 ================= -->\n                <section id=\"tab-users\" class=\"tab-content hidden space-y-6\">\n                    <div class=\"flex justify-between items-center\">\n                        <div>\n                            <h2 class=\"text-lg font-bold text-slate-950\">Danh s\u00e1ch t\u00e0i kho\u1ea3n nh\u00e2n s\u1ef1<\/h2>\n                            <p class=\"text-xs text-slate-500\">Gi\u00e1m \u0111\u1ed1c (C\u1ea5p 1) ch\u1ec9 \u0111\u1ecbnh quy\u1ec1n truy c\u1eadp c\u00e1c c\u1ea5p.<\/p>\n                        <\/div>\n                        <button onclick=\"openUserModal()\" class=\"bg-purple-600 text-white hover:bg-purple-700 px-4 py-2.5 rounded-xl text-xs font-bold flex items-center shadow transition\">\n                            <i class=\"fa-solid fa-user-plus mr-1.5\"><\/i> C\u1ea5p t\u00e0i kho\u1ea3n m\u1edbi\n                        <\/button>\n                    <\/div>\n\n                    <div class=\"bg-white rounded-2xl shadow-sm border border-slate-200\/80 overflow-hidden\">\n                        <div class=\"overflow-x-auto\">\n                            <table class=\"w-full text-left text-xs border-collapse\">\n                                <thead>\n                                    <tr class=\"bg-slate-50 text-slate-500 border-b border-slate-200 uppercase font-semibold text-[10px]\">\n                                        <th class=\"py-3 px-5\">Nh\u00e2n vi\u00ean<\/th>\n                                        <th class=\"py-3 px-5\">T\u00e0i kho\u1ea3n<\/th>\n                                        <th class=\"py-3 px-5\">M\u1eadt kh\u1ea9u<\/th>\n                                        <th class=\"py-3 px-5\">C\u1ea5p \u0111\u1ed9 ph\u00e2n quy\u1ec1n<\/th>\n                                        <th class=\"py-3 px-5\">Tr\u1ea1ng th\u00e1i<\/th>\n                                        <th class=\"py-3 px-5 text-center\">H\u00e0nh \u0111\u1ed9ng<\/th>\n                                    <\/tr>\n                                <\/thead>\n                                <tbody id=\"users-table-body\" class=\"divide-y divide-slate-100\">\n                                    <!-- JS populated -->\n                                <\/tbody>\n                            <\/table>\n                        <\/div>\n                    <\/div>\n                <\/section>\n\n            <\/main>\n        <\/div>\n    <\/div>\n\n    <!-- FOOTER -->\n    <footer class=\"bg-slate-100 border-t border-slate-200 py-4 px-6 text-center text-xs text-slate-500 no-print\">\n        \u00a9 2026 H\u00d9NG C\u01af\u1edcNG SOLAR. V\u0103n ph\u00f2ng: 27D \u0110. Kinh D\u01b0\u01a1ng V\u01b0\u01a1ng, Ph\u00fa L\u00e2m, H\u1ed3 Ch\u00ed Minh &#8211; Hotline: 0908 772 080. All rights reserved.\n    <\/footer>\n\n    <!-- ========================================== MODALS & POPUPS ========================================== -->\n\n    <!-- 1. PRODUCT ADD MODAL -->\n    <div id=\"product-modal\" class=\"fixed inset-0 bg-slate-950\/60 z-50 flex items-center justify-center hidden p-4\">\n        <div class=\"bg-white w-full max-w-sm rounded-2xl shadow-xl overflow-hidden animate-in fade-in zoom-in duration-150\">\n            <div class=\"bg-slate-900 text-white px-6 py-4 flex justify-between items-center\">\n                <h3 id=\"product-modal-title\" class=\"font-bold text-sm\">Th\u00eam thi\u1ebft b\u1ecb solar m\u1edbi<\/h3>\n                <button onclick=\"closeProductModal()\" class=\"text-white\/80 hover:text-white\"><i class=\"fa-solid fa-xmark text-base\"><\/i><\/button>\n            <\/div>\n            <div class=\"p-6 space-y-3.5\">\n                <input type=\"hidden\" id=\"modal-product-id\">\n                <div>\n                    <label class=\"block text-[10px] font-bold text-slate-500 uppercase mb-1\">T\u00ean thi\u1ebft b\u1ecb \/ V\u1eadt t\u01b0 solar *<\/label>\n                    <input type=\"text\" id=\"modal-product-name\" placeholder=\"VD: T\u1ea5m pin Canadian Solar 550W\" class=\"w-full px-3 py-2 border rounded-lg text-xs focus:outline-none bg-white\">\n                <\/div>\n                <div>\n                    <label class=\"block text-[10px] font-bold text-slate-500 uppercase mb-1\">H\u00e3ng s\u1ea3n xu\u1ea5t *<\/label>\n                    <select id=\"modal-product-brand\" class=\"w-full px-3 py-2 border rounded-lg text-xs focus:outline-none bg-white\">\n                        <!-- JS populated dynamically -->\n                    <\/select>\n                <\/div>\n                <div>\n                    <label class=\"block text-[10px] font-bold text-slate-500 uppercase mb-1\">Nh\u00e0 cung c\u1ea5p ch\u00ednh *<\/label>\n                    <select id=\"modal-product-ncc\" class=\"w-full px-3 py-2 border rounded-lg text-xs focus:outline-none bg-white\">\n                        <!-- JS populated dynamically -->\n                    <\/select>\n                <\/div>\n                <div>\n                    <label class=\"block text-[10px] font-bold text-slate-500 uppercase mb-1\">\u0110\u01a1n v\u1ecb t\u00ednh (\u0110VT) *<\/label>\n                    <input type=\"text\" id=\"modal-product-unit\" placeholder=\"VD: B\u1ed9, T\u1ea5m, M\u00e9t\" class=\"w-full px-3 py-2 border rounded-lg text-xs focus:outline-none bg-white\">\n                <\/div>\n                <div>\n                    <label class=\"block text-[10px] font-bold text-slate-500 uppercase mb-1\">S\u1ed1 l\u01b0\u1ee3ng t\u1ed3n t\u1ed1i thi\u1ec3u *<\/label>\n                    <input type=\"number\" id=\"modal-product-min-stock\" placeholder=\"C\u1ea3nh b\u00e1o khi th\u1ea5p h\u01a1n...\" class=\"w-full px-3 py-2 border rounded-lg text-xs focus:outline-none bg-white\">\n                <\/div>\n                <p class=\"text-[9px] text-slate-400 italic\">* H\u1ec7 th\u1ed1ng t\u1ef1 t\u1ea1o m\u00e3 SKU t\u1ef1 \u0111\u1ed9ng.<\/p>\n            <\/div>\n            <div class=\"px-6 py-4 bg-slate-50 flex justify-end space-x-2 border-t\">\n                <button onclick=\"closeProductModal()\" class=\"px-4 py-2 text-xs font-semibold border bg-white rounded-lg hover:bg-slate-50 transition\">H\u1ee7y<\/button>\n                <button onclick=\"saveProduct()\" class=\"px-5 py-2 text-xs font-bold bg-amber-500 hover:bg-amber-600 text-slate-950 rounded-lg shadow transition\">L\u01b0u l\u1ea1i<\/button>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- 1B. WAREHOUSE ADD\/EDIT MODAL -->\n    <div id=\"warehouse-modal\" class=\"fixed inset-0 bg-slate-950\/60 z-50 flex items-center justify-center hidden p-4\">\n        <div class=\"bg-white w-full max-w-sm rounded-2xl shadow-xl overflow-hidden animate-in fade-in zoom-in duration-150\">\n            <div class=\"bg-slate-900 text-white px-6 py-4 flex justify-between items-center\">\n                <h3 id=\"warehouse-modal-title\" class=\"font-bold text-sm\">Th\u00eam kho ch\u1ee9a h\u00e0ng m\u1edbi<\/h3>\n                <button onclick=\"closeWarehouseModal()\" class=\"text-white\/80 hover:text-white\"><i class=\"fa-solid fa-xmark text-base\"><\/i><\/button>\n            <\/div>\n            <div class=\"p-6 space-y-4\">\n                <input type=\"hidden\" id=\"modal-warehouse-id\">\n                <div>\n                    <label class=\"block text-[10px] font-bold text-slate-500 uppercase mb-1\">M\u00e3 Kho (Vi\u1ebft t\u1eaft vi\u1ebft li\u1ec1n kh\u00f4ng d\u1ea5u) *<\/label>\n                    <input type=\"text\" id=\"modal-warehouse-code\" placeholder=\"VD: KHO-SG\" class=\"w-full px-3 py-2 border rounded-lg text-xs bg-white focus:outline-none\">\n                <\/div>\n                <div>\n                    <label class=\"block text-[10px] font-bold text-slate-500 uppercase mb-1\">T\u00ean kho ch\u1ee9a *<\/label>\n                    <input type=\"text\" id=\"modal-warehouse-name\" placeholder=\"VD: Kho S\u00e0i G\u00f2n (Kho t\u1ed5ng)\" class=\"w-full px-3 py-2 border rounded-lg text-xs bg-white focus:outline-none\">\n                <\/div>\n                <div>\n                    <label class=\"block text-[10px] font-bold text-slate-500 uppercase mb-1\">\u0110\u1ecba \u0111i\u1ec3m \/ \u0110\u1ecba ch\u1ec9 kho *<\/label>\n                    <input type=\"text\" id=\"modal-warehouse-address\" placeholder=\"Nh\u1eadp \u0111\u1ecba \u0111i\u1ec3m th\u1ef1c t\u1ebf...\" class=\"w-full px-3 py-2 border rounded-lg text-xs bg-white focus:outline-none\">\n                <\/div>\n                <div>\n                    <label class=\"block text-[10px] font-bold text-slate-500 uppercase mb-1\">Th\u1ee7 kho ph\u1ee5 tr\u00e1ch *<\/label>\n                    <input type=\"text\" id=\"modal-warehouse-contact\" placeholder=\"T\u00ean ng\u01b0\u1eddi qu\u1ea3n l\u00fd...\" class=\"w-full px-3 py-2 border rounded-lg text-xs bg-white focus:outline-none\">\n                <\/div>\n            <\/div>\n            <div class=\"px-6 py-4 bg-slate-50 flex justify-end space-x-2 border-t\">\n                <button onclick=\"closeWarehouseModal()\" class=\"px-4 py-2 text-xs font-semibold border bg-white rounded-lg hover:bg-slate-50 transition\">H\u1ee7y<\/button>\n                <button onclick=\"saveWarehouse()\" class=\"px-5 py-2 text-xs font-bold bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg shadow transition\">L\u01b0u kho<\/button>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- 2. SUPPLIER ADD \/ EDIT MODAL -->\n    <div id=\"supplier-modal\" class=\"fixed inset-0 bg-slate-950\/60 z-50 flex items-center justify-center hidden p-4\">\n        <div class=\"bg-white w-full max-w-lg rounded-2xl shadow-xl overflow-hidden animate-in fade-in zoom-in duration-150\">\n            <div class=\"bg-slate-900 text-white px-6 py-4 flex justify-between items-center\">\n                <h3 id=\"supplier-modal-title\" class=\"font-bold text-sm\">Th\u00eam nh\u00e0 cung c\u1ea5p m\u1edbi<\/h3>\n                <button onclick=\"closeSupplierModal()\" class=\"text-white\/80 hover:text-white\"><i class=\"fa-solid fa-xmark text-base\"><\/i><\/button>\n            <\/div>\n            <div class=\"p-6 space-y-4\">\n                <input type=\"hidden\" id=\"modal-supplier-id\">\n                <div class=\"grid grid-cols-2 gap-4\">\n                    <div>\n                        <label class=\"block text-[10px] font-bold text-slate-500 uppercase mb-1\">M\u00e3 NCC (Kh\u00f4ng d\u1ea5u) *<\/label>\n                        <input type=\"text\" id=\"modal-supplier-code\" placeholder=\"VD: NCC-SG\" class=\"w-full px-3 py-2 border rounded-lg text-xs bg-white focus:outline-none\">\n                    <\/div>\n                    <div>\n                        <label class=\"block text-[10px] font-bold text-slate-500 uppercase mb-1\">M\u00e3 s\u1ed1 thu\u1ebf *<\/label>\n                        <input type=\"text\" id=\"modal-supplier-tax\" placeholder=\"M\u00e3 s\u1ed1 thu\u1ebf doanh nghi\u1ec7p...\" class=\"w-full px-3 py-2 border rounded-lg text-xs bg-white focus:outline-none\">\n                    <\/div>\n                <\/div>\n                <div>\n                    <label class=\"block text-[10px] font-bold text-slate-500 uppercase mb-1\">T\u00ean doanh nghi\u1ec7p (C\u00f4ng ty) *<\/label>\n                    <input type=\"text\" id=\"modal-supplier-company\" placeholder=\"Nh\u1eadp t\u00ean \u0111\u1ea7y \u0111\u1ee7...\" class=\"w-full px-3 py-2 border rounded-lg text-xs bg-white focus:outline-none\">\n                <\/div>\n                <div class=\"grid grid-cols-2 gap-4\">\n                    <div>\n                        <label class=\"block text-[10px] font-bold text-slate-500 uppercase mb-1\">Ng\u01b0\u1eddi \u0111\u1ea1i di\u1ec7n *<\/label>\n                        <input type=\"text\" id=\"modal-supplier-contact\" placeholder=\"H\u1ecd v\u00e0 t\u00ean...\" class=\"w-full px-3 py-2 border rounded-lg text-xs bg-white focus:outline-none\">\n                    <\/div>\n                    <div>\n                        <label class=\"block text-[10px] font-bold text-slate-500 uppercase mb-1\">S\u1ed1 \u0111i\u1ec7n tho\u1ea1i *<\/label>\n                        <input type=\"text\" id=\"modal-supplier-phone\" placeholder=\"S\u1ed1 li\u00ean h\u1ec7...\" class=\"w-full px-3 py-2 border rounded-lg text-xs bg-white focus:outline-none\">\n                    <\/div>\n                <\/div>\n                <div class=\"grid grid-cols-2 gap-4\">\n                    <div>\n                        <label class=\"block text-[10px] font-bold text-slate-500 uppercase mb-1\">\u0110\u1ecba ch\u1ec9 Email<\/label>\n                        <input type=\"email\" id=\"modal-supplier-email\" placeholder=\"example@company.com\" class=\"w-full px-3 py-2 border rounded-lg text-xs bg-white focus:outline-none\">\n                    <\/div>\n                    <div>\n                        <label class=\"block text-[10px] font-bold text-slate-500 uppercase mb-1\">V\u0103n ph\u00f2ng \/ \u0110\u1ecba ch\u1ec9 ch\u00ednh<\/label>\n                        <input type=\"text\" id=\"modal-supplier-address\" placeholder=\"\u0110\u1ecba ch\u1ec9 \u0111\u1ed1i t\u00e1c...\" class=\"w-full px-3 py-2 border rounded-lg text-xs bg-white focus:outline-none\">\n                    <\/div>\n                <\/div>\n            <\/div>\n            <div class=\"px-6 py-4 bg-slate-50 flex justify-end space-x-2 border-t\">\n                <button onclick=\"closeSupplierModal()\" class=\"px-4 py-2 text-xs font-semibold border bg-white rounded-lg hover:bg-slate-50 transition\">H\u1ee7y<\/button>\n                <button onclick=\"saveSupplier()\" class=\"px-5 py-2 text-xs font-bold bg-teal-600 hover:bg-teal-700 text-white rounded-lg shadow transition\">L\u01b0u NCC<\/button>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- 2B. BRAND ADD \/ EDIT MODAL -->\n    <div id=\"brand-modal\" class=\"fixed inset-0 bg-slate-950\/60 z-50 flex items-center justify-center hidden p-4\">\n        <div class=\"bg-white w-full max-w-sm rounded-2xl shadow-xl overflow-hidden animate-in fade-in zoom-in duration-150\">\n            <div class=\"bg-slate-900 text-white px-6 py-4 flex justify-between items-center\">\n                <h3 id=\"brand-modal-title\" class=\"font-bold text-sm\">Th\u00eam h\u00e3ng s\u1ea3n xu\u1ea5t m\u1edbi<\/h3>\n                <button onclick=\"closeBrandModal()\" class=\"text-white\/80 hover:text-white\"><i class=\"fa-solid fa-xmark text-base\"><\/i><\/button>\n            <\/div>\n            <div class=\"p-6 space-y-4\">\n                <input type=\"hidden\" id=\"modal-brand-id\">\n                <div>\n                    <label class=\"block text-[10px] font-bold text-slate-500 uppercase mb-1\">M\u00e3 H\u00e3ng (Ch\u1eef in vi\u1ebft t\u1eaft) *<\/label>\n                    <input type=\"text\" id=\"modal-brand-code\" placeholder=\"VD: HUAWEI, DEYE\" class=\"w-full px-3 py-2 border rounded-lg text-xs bg-white focus:outline-none\">\n                <\/div>\n                <div>\n                    <label class=\"block text-[10px] font-bold text-slate-500 uppercase mb-1\">T\u00ean th\u01b0\u01a1ng hi\u1ec7u *<\/label>\n                    <input type=\"text\" id=\"modal-brand-name\" placeholder=\"VD: Canadian Solar, Deye\" class=\"w-full px-3 py-2 border rounded-lg text-xs bg-white focus:outline-none\">\n                <\/div>\n                <div>\n                    <label class=\"block text-[10px] font-bold text-slate-500 uppercase mb-1\">Qu\u1ed1c gia xu\u1ea5t x\u1ee9 *<\/label>\n                    <input type=\"text\" id=\"modal-brand-country\" placeholder=\"VD: Canada, \u0110\u1ee9c, Trung Qu\u1ed1c...\" class=\"w-full px-3 py-2 border rounded-lg text-xs bg-white focus:outline-none\">\n                <\/div>\n                <div>\n                    <label class=\"block text-[10px] font-bold text-slate-500 uppercase mb-1\">Ghi ch\u00fa \u0111\u1eb7c tr\u01b0ng<\/label>\n                    <input type=\"text\" id=\"modal-brand-note\" placeholder=\"VD: Th\u01b0\u01a1ng hi\u1ec7u h\u00e0ng \u0111\u1ea7u d\u00f2ng pin...\" class=\"w-full px-3 py-2 border rounded-lg text-xs bg-white focus:outline-none\">\n                <\/div>\n            <\/div>\n            <div class=\"px-6 py-4 bg-slate-50 flex justify-end space-x-2 border-t\">\n                <button onclick=\"closeBrandModal()\" class=\"px-4 py-2 text-xs font-semibold border bg-white rounded-lg hover:bg-slate-50 transition\">H\u1ee7y<\/button>\n                <button onclick=\"saveBrand()\" class=\"px-5 py-2 text-xs font-bold bg-orange-600 hover:bg-orange-700 text-white rounded-lg shadow transition\">L\u01b0u h\u00e3ng<\/button>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- 3. USER MANAGEMENT MODAL -->\n    <div id=\"user-modal\" class=\"fixed inset-0 bg-slate-950\/60 z-50 flex items-center justify-center hidden p-4\">\n        <div class=\"bg-white w-full max-w-sm rounded-2xl shadow-xl overflow-hidden animate-in fade-in zoom-in duration-150\">\n            <div class=\"bg-slate-900 text-white px-6 py-4 flex justify-between items-center\">\n                <h3 id=\"user-modal-title\" class=\"font-bold text-sm\">C\u1ea5p t\u00e0i kho\u1ea3n m\u1edbi<\/h3>\n                <button onclick=\"closeUserModal()\" class=\"text-white\/80 hover:text-white\"><i class=\"fa-solid fa-xmark text-base\"><\/i><\/button>\n            <\/div>\n            <div class=\"p-6 space-y-4\">\n                <input type=\"hidden\" id=\"modal-user-id\">\n                <div>\n                    <label class=\"block text-[10px] font-bold text-slate-500 uppercase mb-1\">H\u1ecd v\u00e0 t\u00ean nh\u00e2n vi\u00ean *<\/label>\n                    <input type=\"text\" id=\"modal-user-fullname\" placeholder=\"VD: Nguy\u1ec5n V\u0103n A\" class=\"w-full px-3 py-2 border rounded-lg text-xs bg-white focus:outline-none\">\n                <\/div>\n                <div>\n                    <label class=\"block text-[10px] font-bold text-slate-500 uppercase mb-1\">T\u00e0i kho\u1ea3n (Username) *<\/label>\n                    <input type=\"text\" id=\"modal-user-username\" placeholder=\"Ch\u1eef th\u01b0\u1eddng vi\u1ebft li\u1ec1n kh\u00f4ng d\u1ea5u...\" class=\"w-full px-3 py-2 border rounded-lg text-xs bg-white focus:outline-none\">\n                <\/div>\n                <div>\n                    <label class=\"block text-[10px] font-bold text-slate-500 uppercase mb-1\">M\u1eadt kh\u1ea9u *<\/label>\n                    <input type=\"text\" id=\"modal-user-password\" placeholder=\"M\u1eadt kh\u1ea9u b\u1ea3o m\u1eadt...\" class=\"w-full px-3 py-2 border rounded-lg text-xs bg-white focus:outline-none\">\n                <\/div>\n                <div>\n                    <label class=\"block text-[10px] font-bold text-slate-500 uppercase mb-1\">Ph\u00e2n quy\u1ec1n ch\u1ee9c v\u1ee5 *<\/label>\n                    <select id=\"modal-user-level\" class=\"w-full px-3 py-2 border rounded-lg text-xs bg-white focus:outline-none\">\n                        <option value=\"1\">C\u1ea5p 1 &#8211; Ban Gi\u00e1m \u0110\u1ed1c (To\u00e0n quy\u1ec1n ph\u00ea duy\u1ec7t)<\/option>\n                        <option value=\"2\">C\u1ea5p 2 &#8211; Th\u1ee7 Kho \/ K\u1ebf To\u00e1n (\u0110\u01b0\u1ee3c t\u1ea1o phi\u1ebfu)<\/option>\n                        <option value=\"3\">C\u1ea5p 3 &#8211; K\u1ef9 Thu\u1eadt Vi\u00ean (Y\u00eau c\u1ea7u xu\u1ea5t kho)<\/option>\n                    <\/select>\n                <\/div>\n            <\/div>\n            <div class=\"px-6 py-4 bg-slate-50 flex justify-end space-x-2 border-t\">\n                <button onclick=\"closeUserModal()\" class=\"px-4 py-2 text-xs font-semibold border bg-white rounded-lg hover:bg-slate-50 transition\">H\u1ee7y<\/button>\n                <button onclick=\"saveUser()\" class=\"px-5 py-2 text-xs font-bold bg-purple-600 hover:bg-purple-700 text-white rounded-lg shadow transition\">C\u1ea5p t\u00e0i kho\u1ea3n<\/button>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- 4. DOCUMENT SLIP PRINT PREVIEW MODAL -->\n    <div id=\"print-modal\" class=\"fixed inset-0 bg-slate-950\/60 z-50 flex items-center justify-center hidden p-4 overflow-y-auto\">\n        <div class=\"bg-white w-full max-w-3xl rounded-2xl shadow-2xl my-8 overflow-hidden animate-in fade-in duration-200\">\n            <div class=\"bg-slate-900 text-white px-6 py-4 flex justify-between items-center no-print\">\n                <h3 class=\"font-bold text-sm\"><i class=\"fa-solid fa-eye mr-2 text-amber-500\"><\/i> Xem tr\u01b0\u1edbc &amp; In ch\u1ee9ng t\u1eeb<\/h3>\n                <button onclick=\"closePrintModal()\" class=\"text-white\/80 hover:text-white\"><i class=\"fa-solid fa-xmark text-base\"><\/i><\/button>\n            <\/div>\n            \n            <div id=\"print-section\" class=\"p-10 bg-white text-slate-950 text-xs\">\n                <!-- Header corporate block -->\n                <div class=\"flex justify-between items-start border-b-2 border-slate-900 pb-4\">\n                    <div>\n                        <h2 class=\"text-base font-black uppercase tracking-tight text-slate-900\">H\u00d9NG C\u01af\u1edcNG SOLAR<\/h2>\n                        <p class=\"text-[10px] text-slate-500 mt-1\">\u0110\/c: 27D \u0110. Kinh D\u01b0\u01a1ng V\u01b0\u01a1ng, Ph\u00fa L\u00e2m, H\u1ed3 Ch\u00ed Minh<\/p>\n                        <p class=\"text-[10px] text-slate-500\">S\u0110T: 0908 772 080 &#8211; T\u1ed5ng Th\u1ea7u \u0110i\u1ec7n M\u1eb7t Tr\u1eddi<\/p>\n                    <\/div>\n                    <div class=\"text-right\">\n                        <span id=\"print-title-badge\" class=\"bg-amber-100 text-amber-800 text-[10px] px-3 py-1 rounded font-black uppercase tracking-wider\">PHI\u1ebeU KHO<\/span>\n                        <h1 class=\"text-base font-bold mt-2 text-slate-900\" id=\"print-slip-code-display\">PN-00000<\/h1>\n                        <p class=\"text-[10px] text-slate-500\" id=\"print-slip-date\">Th\u1eddi gian: 18.07.2026<\/p>\n                    <\/div>\n                <\/div>\n\n                <div class=\"text-center my-6\">\n                    <h2 class=\"text-xl font-black uppercase tracking-wide text-slate-900\" id=\"print-main-title\">PHI\u1ebeU NH\u1eacP KHO TH\u00c0NH PH\u1ea8M<\/h2>\n                <\/div>\n\n                <div class=\"grid grid-cols-2 gap-y-1 text-[11px] bg-slate-50 p-4 rounded-xl border border-slate-200 mb-6\" id=\"print-meta-grid\">\n                    <!-- JS populated metadata -->\n                <\/div>\n\n                <table class=\"w-full text-[11px] text-left border-collapse border border-slate-400\">\n                    <thead>\n                        <tr class=\"bg-slate-100 text-slate-800 font-bold uppercase\">\n                            <th class=\"border border-slate-400 p-2 text-center w-10\">STT<\/th>\n                            <th class=\"border border-slate-400 p-2\">M\u00e3 SKU<\/th>\n                            <th class=\"border border-slate-400 p-2\">T\u00ean thi\u1ebft b\u1ecb \/ v\u1eadt t\u01b0 solar<\/th>\n                            <th class=\"border border-slate-400 p-2 text-center\">\u0110VT<\/th>\n                            <th class=\"border border-slate-400 p-2 text-center w-16\">SL<\/th>\n                            <th class=\"border border-slate-400 p-2 text-right\">\u0110\u01a1n gi\u00e1<\/th>\n                            <th class=\"border border-slate-400 p-2 text-right\">Th\u00e0nh ti\u1ec1n<\/th>\n                        <\/tr>\n                    <\/thead>\n                    <tbody id=\"print-table-body\">\n                        <!-- JS populated -->\n                    <\/tbody>\n                <\/table>\n\n                <div class=\"flex justify-end mt-4\">\n                    <div class=\"w-1\/2 text-right space-y-1.5 border-t pt-2 border-slate-100\">\n                        <div class=\"text-[10px]\">\n                            <span class=\"text-slate-500\">C\u1ed9ng th\u00e0nh ti\u1ec1n:<\/span>\n                            <span class=\"font-semibold text-slate-900 ml-4\" id=\"print-subtotal\">0 VN\u0110<\/span>\n                        <\/div>\n                        <div class=\"text-xs font-bold text-slate-900 border-t pt-1.5 flex justify-end\">\n                            <span>T\u1ed4NG THANH TO\u00c1N (+VAT):<\/span>\n                            <span class=\"text-red-600 ml-4\" id=\"print-grandtotal\">0 VN\u0110<\/span>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <div class=\"grid grid-cols-3 text-center text-[10px] mt-10 gap-4\">\n                    <div>\n                        <p class=\"font-bold uppercase text-slate-700\">Ng\u01b0\u1eddi l\u1eadp phi\u1ebfu<\/p>\n                        <p class=\"text-[9px] text-slate-400\">(K\u00fd, ghi r\u00f5 h\u1ecd t\u00ean)<\/p>\n                        <div class=\"h-16\"><\/div>\n                        <p class=\"font-bold text-slate-900\" id=\"print-sign-creator\">Admin<\/p>\n                    <\/div>\n                    <div>\n                        <p class=\"font-bold uppercase text-slate-700\">Th\u1ee7 kho b\u00e0n b\u00e0n giao<\/p>\n                        <p class=\"text-[9px] text-slate-400\">(K\u00fd, ghi r\u00f5 h\u1ecd t\u00ean)<\/p>\n                        <div class=\"h-16\"><\/div>\n                        <p class=\"font-bold text-slate-900\">B\u00f9i Xu\u00e2n Kho<\/p>\n                    <\/div>\n                    <div>\n                        <p class=\"font-bold uppercase text-slate-700\">Ban Gi\u00e1m \u0110\u1ed1c Ph\u00ea Duy\u1ec7t<\/p>\n                        <p class=\"text-[9px] text-slate-400\">(K\u00fd, \u0111\u00f3ng d\u1ea5u)<\/p>\n                        <div class=\"h-16\"><\/div>\n                        <p class=\"font-bold text-slate-900\">Kim Gi\u1edd Admin<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"px-6 py-4 bg-slate-50 flex justify-end space-x-2.5 no-print border-t\">\n                <button onclick=\"closePrintModal()\" class=\"px-4 py-2 text-xs font-semibold border bg-white rounded-lg hover:bg-slate-50 transition\">\u0110\u00f3ng<\/button>\n                <button onclick=\"window.print()\" class=\"px-5 py-2 text-xs font-bold bg-slate-900 hover:bg-slate-800 text-white rounded-lg shadow-md transition flex items-center\">\n                    <i class=\"fa-solid fa-print mr-2\"><\/i> In \/ Xu\u1ea5t PDF\n                <\/button>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- ========================================== JAVASCRIPT SYSTEM LOGIC ========================================== -->\n    <script>\n        \/\/ --- 1. CORE SYSTEM STATE ---\n        let products = [\n            { id: 1, sku: 'VT001', name: 'T\u1ea5m quang n\u0103ng Canadian Solar 550W', category: 'T\u1ea5m pin Solar', unit: 'B\u1ed9', price: 2900000, minStock: 30, stock: 45, brand: 'Canadian Solar', ncc: 'C\u00d4NG TY TNHH D\u1ecaCH V\u1ee4 VI\u1ec4N TH\u00d4NG \u0110\u1ee8C' },\n            { id: 2, sku: 'VT002', name: 'Bi\u1ebfn t\u1ea7n Inverter Hybrid Deye 8kW', category: 'Bi\u1ebfn t\u1ea7n', unit: 'B\u1ed9', price: 24500000, minStock: 10, stock: 8, brand: 'Deye', ncc: 'C\u00d4NG TY TNHH D\u1ecaCH V\u1ee4 VI\u1ec4N TH\u00d4NG \u0110\u1ee8C' },\n            { id: 3, sku: 'VT003', name: 'Pin l\u01b0u tr\u1eef Lithium Gigabox 5E', category: 'Pin l\u01b0u tr\u1eef', unit: 'B\u1ed9', price: 18500000, minStock: 15, stock: 22, brand: 'Gigabox', ncc: '\u0110\u1ea1i l\u00fd Pin Lithium S\u00e0i G\u00f2n' },\n            { id: 4, sku: 'VT004', name: 'C\u00e1p \u0111i\u1ec7n DC chuy\u00ean d\u1ee5ng 6mm \u0111\u1ecf', category: 'D\u00e2y c\u00e1p', unit: 'Cu\u1ed9n', price: 1200000, minStock: 20, stock: 12, brand: 'Cadivi', ncc: 'C\u00d4NG TY TNHH D\u1ecaCH V\u1ee4 VI\u1ec4N TH\u00d4NG \u0110\u1ee8C' },\n            { id: 5, sku: 'VT005', name: 'C\u00e1p \u0111i\u1ec7n AC Cadivi 2.5mm\u00b2', category: 'D\u00e2y c\u00e1p', unit: 'Cu\u1ed9n', price: 950000, minStock: 25, stock: 40, brand: 'Cadivi', ncc: 'Nh\u00e0 ph\u00e2n ph\u1ed1i Canadian Solar Vi\u1ec7t Nam' }\n        ];\n\n        \/\/ NEW MODULE STATE: WAREHOUSES\n        let warehouses = [\n            { id: 1, code: 'KHO-SG', name: 'S\u00c0I G\u00d2N (Kho t\u1ed5ng)', address: '27D \u0110. Kinh D\u01b0\u01a1ng V\u01b0\u01a1ng, Ph\u00fa L\u00e2m, H\u1ed3 Ch\u00ed Minh', contact: 'B\u00f9i Xu\u00e2n Kho', status: 'active' },\n            { id: 2, code: 'KHO-MT', name: 'MI\u1ec0N T\u00c2Y (Chi nh\u00e1nh)', address: 'Khu d\u00e2n c\u01b0 586, Qu\u1eadn C\u00e1i R\u0103ng, C\u1ea7n Th\u01a1', contact: 'L\u00ea Th\u1ee7 Kho', status: 'active' },\n            { id: 3, code: 'KHO-MTR', name: 'MI\u1ec0N TRUNG (Chi nh\u00e1nh)', address: 'H\u00f2a Vang, \u0110\u00e0 N\u1eb5ng', contact: 'Nguy\u1ec5n V\u0103n Trung', status: 'active' }\n        ];\n\n        let suppliers = [\n            { id: 1, code: 'NCC-SOLAR-SG', companyName: 'C\u00d4NG TY TNHH D\u1ecaCH V\u1ee4 VI\u1ec4N TH\u00d4NG \u0110\u1ee8C', contactName: 'Nguy\u1ec5n V\u0103n \u0110\u1ee9c', phone: '0901 234 567', taxCode: '0312345678', address: 'Qu\u1eadn 12, TP. H\u1ed3 Ch\u00ed Minh', email: 'duc@vienthongduc.com' },\n            { id: 2, code: 'NCC-LITHIUM', companyName: '\u0110\u1ea1i l\u00fd Pin Lithium S\u00e0i G\u00f2n', contactName: 'Tr\u1ea7n Minh Qu\u00e2n', phone: '0908 999 888', taxCode: '0109876543', address: 'Th\u1ee7 \u0110\u1ee9c, TP. H\u1ed3 Ch\u00ed Minh', email: 'quan.lithium@solarsg.vn' },\n            { id: 3, code: 'NCC-CANADIAN', companyName: 'Nh\u00e0 ph\u00e2n ph\u1ed1i Canadian Solar Vi\u1ec7t Nam', contactName: 'L\u00ea Th\u1ecb H\u1ed3ng', phone: '028 3333 4444', taxCode: '0205432109', address: 'KCN VSIP, B\u00ecnh D\u01b0\u01a1ng', email: 'sales@canadiansolar.vn' }\n        ];\n\n        let brands = [\n            { id: 1, code: 'CANADIAN', name: 'Canadian Solar', country: 'Canada', note: 'Th\u01b0\u01a1ng hi\u1ec7u t\u1ea5m quang n\u0103ng h\u00e0ng \u0111\u1ea7u' },\n            { id: 2, code: 'DEYE', name: 'Deye', country: 'Trung Qu\u1ed1c', note: 'Chuy\u00ean Inverter Hybrid v\u00e0 Micro' },\n            { id: 3, code: 'GIGABOX', name: 'Gigabox', country: 'Trung Qu\u1ed1c', note: 'Th\u01b0\u01a1ng hi\u1ec7u pin Lithium tin c\u1eady' },\n            { id: 4, code: 'CADIVI', name: 'Cadivi', country: 'Vi\u1ec7t Nam', note: 'D\u00e2y c\u00e1p \u0111i\u1ec7n ch\u1ea5t l\u01b0\u1ee3ng cao' },\n            { id: 5, code: 'SINO', name: 'Sino', country: 'Vi\u1ec7t Nam', note: 'Thi\u1ebft b\u1ecb t\u1ee7 \u0111i\u1ec7n ph\u1ee5 tr\u1ee3' },\n            { id: 6, code: 'HUAWEI', name: 'Huawei', country: 'Trung Qu\u1ed1c', note: 'Inverter cao c\u1ea5p cho d\u1ef1 \u00e1n l\u1edbn' }\n        ];\n\n        let users = [\n            { id: 1, fullname: 'Kim Gi\u1edd Admin', username: 'kimgioadmin', password: 'kimgio123!', level: 1, status: 'active' },\n            { id: 2, fullname: 'Nguy\u1ec5n Th\u1ee7 Kho', username: 'thukho_nguyen', password: '123', level: 2, status: 'active' },\n            { id: 3, fullname: 'Tr\u1ea7n K\u1ef9 Thu\u1eadt', username: 'kythuat_tran', password: '123', level: 3, status: 'active' }\n        ];\n\n        let transactions = [\n            {\n                id: 1,\n                code: 'PN-00001',\n                type: 'import',\n                status: 'approved',\n                date: '2026-07-10T10:00:00.000Z',\n                creator: 'Nguy\u1ec5n Th\u1ee7 Kho',\n                department: 'V\u1eadt t\u01b0',\n                warehouse: 'S\u00c0I G\u00d2N (Kho t\u1ed5ng)',\n                note: 'Nh\u1eadp kho l\u00f4 h\u00e0ng \u0111\u1ea7u th\u00e1ng t\u1eeb \u0111\u1ed1i t\u00e1c \u0110\u1ee9c',\n                items: [\n                    { id: 1, sku: 'VT001', name: 'T\u1ea5m quang n\u0103ng Canadian Solar 550W', brand: 'Canadian Solar', ncc: 'C\u00d4NG TY TNHH D\u1ecaCH V\u1ee4 VI\u1ec4N TH\u00d4NG \u0110\u1ee8C', qty: 20, price: 2900000, vatRate: 10, priceWithVat: 3190000, subtotal: 63800000 },\n                    { id: 3, sku: 'VT003', name: 'Pin l\u01b0u tr\u1eef Lithium Gigabox 5E', brand: 'Gigabox', ncc: '\u0110\u1ea1i l\u00fd Pin Lithium S\u00e0i G\u00f2n', qty: 10, price: 18500000, vatRate: 10, priceWithVat: 20350000, subtotal: 203500000 }\n                ],\n                total: 267300000\n            },\n            {\n                id: 2,\n                code: 'PX-00001',\n                type: 'export',\n                status: 'approved',\n                date: '2026-07-12T14:30:00.000Z',\n                creator: 'Tr\u1ea7n K\u1ef9 Thu\u1eadt',\n                department: 'Thi c\u00f4ng',\n                warehouse: 'S\u00c0I G\u00d2N (Kho t\u1ed5ng)',\n                note: 'Xu\u1ea5t b\u00e0n giao thi\u1ebft b\u1ecb l\u1eafp r\u00e1p cho c\u00f4ng tr\u00ecnh Qu\u1eadn 9',\n                items: [\n                    { id: 1, sku: 'VT001', name: 'T\u1ea5m quang n\u0103ng Canadian Solar 550W', qty: 10, price: 2900000, subtotal: 29000000 },\n                    { id: 2, sku: 'VT002', name: 'Bi\u1ebfn t\u1ea7n Inverter Hybrid Deye 8kW', qty: 2, price: 24500000, subtotal: 49000000 }\n                ],\n                total: 78000000\n            }\n        ];\n\n        \/\/ Temp Slip Creation state drafts\n        let importDraftItems = [];\n        let exportDraftItems = [];\n        let currentUser = null;\n        let dashboardChartInstance = null;\n\n        let currentDialogCallback = null;\n\n        \/\/ On window load\n        window.onload = function() {\n            const savedUser = localStorage.getItem('kimgio_user');\n            if (savedUser) {\n                currentUser = JSON.parse(savedUser);\n                completeLoginInit();\n            } else {\n                document.getElementById('login-overlay').classList.remove('hidden');\n                document.getElementById('app-container').classList.add('hidden');\n            }\n        }\n\n        \/\/ --- 2. AUTHENTICATION & LOGIN ---\n        function handleLogin() {\n            const userIn = document.getElementById('login-username').value.trim();\n            const passIn = document.getElementById('login-password').value;\n\n            const u = users.find(usr => usr.username === userIn && usr.password === passIn && usr.status === 'active');\n            if (u) {\n                currentUser = u;\n                localStorage.setItem('kimgio_user', JSON.stringify(currentUser));\n                document.getElementById('login-error').classList.add('hidden');\n                completeLoginInit();\n                showToast(`Ch\u00e0o m\u1eebng ${u.fullname} \u0111\u0103ng nh\u1eadp th\u00e0nh c\u00f4ng!`, 'success');\n            } else {\n                document.getElementById('login-error').classList.remove('hidden');\n            }\n        }\n\n        function handleLogout() {\n            customConfirm(\"B\u1ea1n c\u00f3 ch\u1eafc ch\u1eafn mu\u1ed1n \u0111\u0103ng xu\u1ea5t kh\u1ecfi h\u1ec7 th\u1ed1ng?\", function() {\n                localStorage.removeItem('kimgio_user');\n                currentUser = null;\n                document.getElementById('login-overlay').classList.remove('hidden');\n                document.getElementById('app-container').classList.add('hidden');\n                document.getElementById('login-password').value = \"\";\n            });\n        }\n\n        function completeLoginInit() {\n            document.getElementById('login-overlay').classList.add('hidden');\n            document.getElementById('app-container').classList.remove('hidden');\n\n            document.getElementById('header-user-display').innerText = currentUser.fullname;\n            let roleText = \"Ban Gi\u00e1m \u0110\u1ed1c (C\u1ea5p 1)\";\n            if (currentUser.level === 2) roleText = \"Th\u1ee7 Kho \/ K\u1ebf To\u00e1n (C\u1ea5p 2)\";\n            if (currentUser.level === 3) roleText = \"K\u1ef9 Thu\u1eadt Vi\u00ean (C\u1ea5p 3)\";\n            document.getElementById('header-role-display').innerText = roleText;\n\n            applyUserRolePermissions();\n            initApp();\n        }\n\n        function applyUserRolePermissions() {\n            const lvl = currentUser.level;\n\n            if (lvl === 1) {\n                document.querySelectorAll('.nav-btn').forEach(b => b.classList.remove('hidden'));\n                document.getElementById('btn-add-product-trigger').classList.remove('hidden');\n                document.getElementById('ceo-approval-section').classList.remove('hidden');\n                document.getElementById('th-product-actions').classList.remove('hidden');\n            } else if (lvl === 2) {\n                document.querySelectorAll('.nav-btn').forEach(b => b.classList.remove('hidden'));\n                document.getElementById('btn-users').classList.add('hidden'); \/\/ Hide users for non-CEOs\n                document.getElementById('btn-add-product-trigger').classList.remove('hidden');\n                document.getElementById('ceo-approval-section').classList.add('hidden');\n                document.getElementById('th-product-actions').classList.remove('hidden');\n            } else if (lvl === 3) {\n                document.getElementById('btn-dashboard').classList.remove('hidden');\n                document.getElementById('btn-products').classList.remove('hidden');\n                document.getElementById('btn-import').classList.add('hidden'); \/\/ Technicians cannot import\n                document.getElementById('btn-export').classList.remove('hidden');\n                document.getElementById('btn-transactions').classList.remove('hidden');\n                document.getElementById('btn-reports').classList.add('hidden');\n                document.getElementById('btn-warehouses').classList.add('hidden');\n                document.getElementById('btn-suppliers').classList.add('hidden');\n                document.getElementById('btn-brands').classList.add('hidden');\n                document.getElementById('btn-users').classList.add('hidden');\n                \n                document.getElementById('btn-add-product-trigger').classList.add('hidden');\n                document.getElementById('ceo-approval-section').classList.add('hidden');\n                document.getElementById('th-product-actions').classList.add('hidden');\n            }\n        }\n\n        \/\/ --- 3. CUSTOM DIALOG SYSTEM ---\n        function customAlert(message, title = \"Th\u00f4ng b\u00e1o\", type = \"info\") {\n            document.getElementById('dialog-title').innerText = title;\n            document.getElementById('dialog-message').innerText = message;\n            \n            const icon = document.getElementById('dialog-icon');\n            icon.className = \"fa-solid text-lg\";\n            if (type === 'error') {\n                icon.classList.add('fa-triangle-exclamation', 'text-red-500');\n            } else if (type === 'warning') {\n                icon.classList.add('fa-circle-exclamation', 'text-amber-500');\n            } else {\n                icon.classList.add('fa-circle-info', 'text-blue-500');\n            }\n\n            document.getElementById('dialog-btn-cancel').classList.add('hidden');\n            document.getElementById('dialog-btn-ok').innerText = \"\u0110\u00f3ng\";\n            document.getElementById('custom-dialog-modal').classList.remove('hidden');\n            currentDialogCallback = null;\n        }\n\n        function customConfirm(message, onConfirm, onCancel = null) {\n            document.getElementById('dialog-title').innerText = \"X\u00e1c nh\u1eadn thao t\u00e1c\";\n            document.getElementById('dialog-message').innerText = message;\n            \n            const icon = document.getElementById('dialog-icon');\n            icon.className = \"fa-solid fa-circle-question text-lg text-amber-500\";\n\n            document.getElementById('dialog-btn-cancel').classList.remove('hidden');\n            document.getElementById('dialog-btn-ok').innerText = \"X\u00e1c nh\u1eadn\";\n            document.getElementById('custom-dialog-modal').classList.remove('hidden');\n            \n            currentDialogCallback = { onConfirm, onCancel };\n        }\n\n        function closeCustomDialog(status) {\n            document.getElementById('custom-dialog-modal').classList.add('hidden');\n            if (currentDialogCallback) {\n                if (status && typeof currentDialogCallback.onConfirm === 'function') {\n                    currentDialogCallback.onConfirm();\n                } else if (!status && typeof currentDialogCallback.onCancel === 'function') {\n                    currentDialogCallback.onCancel();\n                }\n            }\n            currentDialogCallback = null;\n        }\n\n        \/\/ --- 4. TOAST NOTIFICATION SYSTEM ---\n        function showToast(message, type = 'success') {\n            const container = document.getElementById('toast-container');\n            const toast = document.createElement('div');\n            \n            let bgStyle = 'bg-emerald-600';\n            let icon = 'fa-circle-check';\n            if (type === 'error') {\n                bgStyle = 'bg-red-600';\n                icon = 'fa-triangle-exclamation';\n            } else if (type === 'warning') {\n                bgStyle = 'bg-amber-500 text-slate-950';\n                icon = 'fa-triangle-exclamation';\n            }\n\n            toast.className = `flex items-center space-x-3 px-4 py-3 text-white rounded-xl shadow-lg transition-all duration-300 transform translate-y-2 pointer-events-auto ${bgStyle}`;\n            toast.innerHTML = `\n                <i class=\"fa-solid ${icon} text-base\"><\/i>\n                <span class=\"text-xs font-semibold\">${message}<\/span>\n            `;\n            \n            container.appendChild(toast);\n            setTimeout(() => {\n                toast.classList.remove('translate-y-2');\n                toast.classList.add('opacity-0', '-translate-y-2');\n                setTimeout(() => toast.remove(), 300);\n            }, 3500);\n        }\n\n        function initApp() {\n            populateProductDropdowns();\n            populateSupplierDropdown();\n            populateBrandDropdown();\n            populateWarehouseDropdowns(); \/\/ Populate warehouses to selectors!\n            buildCategoryDropdownFilters();\n\n            refreshDashboard();\n            buildProductsTable();\n            buildTransactionsTable();\n            buildWarehousesTable();\n            buildSuppliersTable();\n            buildBrandsTable();\n            buildUsersTable();\n            buildPendingApprovalTable();\n\n            document.getElementById('import-slip-creator').value = currentUser.fullname;\n            document.getElementById('export-slip-creator').value = currentUser.fullname;\n\n            switchTab('dashboard');\n        }\n\n        \/\/ Utility helpers\n        function formatVND(number) {\n            return new Intl.NumberFormat('vi-VN', { style: 'currency', currency: 'VND' }).format(number);\n        }\n\n        function generateUniqueId() {\n            return Date.now() + Math.floor(Math.random() * 100);\n        }\n\n        function generateImportCode() {\n            const num = transactions.filter(t => t.type === 'import').length + 1;\n            const code = `PN-${String(num).padStart(5, '0')}`;\n            document.getElementById('import-slip-code').value = code;\n        }\n\n        function generateExportCode() {\n            const num = transactions.filter(t => t.type === 'export').length + 1;\n            const code = `PX-${String(num).padStart(5, '0')}`;\n            document.getElementById('export-slip-code').value = code;\n        }\n\n        \/\/ --- 5. SWITCH NAVIGATION TABS ---\n        function switchTab(tabName) {\n            document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));\n            \n            document.querySelectorAll('.nav-btn').forEach(btn => {\n                btn.className = \"nav-btn w-full flex items-center space-x-3 px-4 py-3 rounded-xl transition text-sm font-semibold text-slate-600 hover:bg-slate-50 whitespace-nowrap relative\";\n            });\n\n            const targetTab = document.getElementById(`tab-${tabName}`);\n            if (targetTab) {\n                targetTab.classList.remove('hidden');\n            }\n\n            const targetBtn = document.getElementById(`btn-${tabName}`);\n            if (targetBtn) {\n                targetBtn.className = \"nav-btn w-full flex items-center space-x-3 px-4 py-3 rounded-xl transition text-sm font-bold bg-amber-500\/10 text-amber-600 whitespace-nowrap relative\";\n            }\n\n            if (tabName === 'dashboard') {\n                refreshDashboard();\n                renderDashboardChart();\n            } else if (tabName === 'products') {\n                buildProductsTable();\n                buildCategoryDropdownFilters();\n            } else if (tabName === 'import') {\n                generateImportCode();\n                populateProductDropdowns();\n                populateWarehouseDropdowns();\n                populateBrandDropdown();\n                populateSupplierDropdown();\n            } else if (tabName === 'export') {\n                generateExportCode();\n                populateProductDropdowns();\n                populateWarehouseDropdowns();\n                onExportProductChange();\n            } else if (tabName === 'transactions') {\n                buildTransactionsTable();\n                buildPendingApprovalTable();\n            } else if (tabName === 'warehouses') {\n                buildWarehousesTable();\n            } else if (tabName === 'suppliers') {\n                buildSuppliersTable();\n            } else if (tabName === 'brands') {\n                buildBrandsTable();\n            } else if (tabName === 'users') {\n                buildUsersTable();\n            }\n        }\n\n        \/\/ --- 6. DASHBOARD FORMULATIONS & INDICATORS ---\n        function refreshDashboard() {\n            const totalProductsCount = products.length;\n            let totalStockQty = 0;\n            let lowStockCount = 0;\n            let lowStockHtml = '';\n\n            products.forEach(p => {\n                totalStockQty += p.stock;\n                \n                if (p.stock <= p.minStock) {\n                    lowStockCount++;\n                    const diff = p.minStock - p.stock;\n                    lowStockHtml += `\n                        <div class=\"flex items-center justify-between p-3 bg-red-50 rounded-xl border border-red-100\/80\">\n                            <div class=\"max-w-[70%]\">\n                                <h5 class=\"text-xs font-bold text-slate-800 truncate\">${p.name}<\/h5>\n                                <p class=\"text-[10px] text-slate-500 mt-0.5\">T\u1ed3n: <strong class=\"text-red-600 font-black\">${p.stock}<\/strong> ${p.unit} (\u0110\u1ecbnh m\u1ee9c: ${p.minStock})<\/p>\n                            <\/div>\n                            <span class=\"text-[10px] bg-red-100 text-red-800 px-2 py-0.5 rounded-full font-bold\">Thi\u1ebfu ${diff}<\/span>\n                        <\/div>\n                    `;\n                }\n            });\n\n            document.getElementById('stat-total-products').innerText = totalProductsCount;\n            document.getElementById('stat-total-stock').innerText = totalStockQty;\n            document.getElementById('stat-low-stock').innerText = lowStockCount;\n\n            const lowStockListContainer = document.getElementById('low-stock-list');\n            if (lowStockCount > 0) {\n                lowStockListContainer.innerHTML = lowStockHtml;\n            } else {\n                lowStockListContainer.innerHTML = `\n                    <div class=\"text-center py-8 text-slate-400 text-xs\">\n                        <i class=\"fa-solid fa-circle-check text-emerald-500 text-2xl mb-2 block\"><\/i>\n                        V\u1eadt t\u01b0 \u0111\u1ea7y \u0111\u1ee7 \u1edf m\u1ee9c an to\u00e0n!\n                    <\/div>\n                `;\n            }\n\n            const totalImports = transactions.filter(t => t.type === 'import' && t.status === 'approved').length;\n            const totalExports = transactions.filter(t => t.type === 'export' && t.status === 'approved').length;\n            const pendingApprovals = transactions.filter(t => t.status === 'pending').length;\n\n            document.getElementById('stat-total-import').innerText = totalImports;\n            document.getElementById('stat-total-export').innerText = totalExports;\n            document.getElementById('stat-pending').innerText = pendingApprovals;\n\n            const pendingBadge = document.getElementById('badge-pending-approvals');\n            const pendingAlertBanner = document.getElementById('ceo-approval-alert');\n            \n            if (pendingApprovals > 0) {\n                pendingBadge.innerText = pendingApprovals;\n                pendingBadge.classList.remove('hidden');\n                \n                if (currentUser.level === 1) {\n                    pendingAlertBanner.classList.remove('hidden');\n                } else {\n                    pendingAlertBanner.classList.add('hidden');\n                }\n            } else {\n                pendingBadge.classList.add('hidden');\n                pendingAlertBanner.classList.add('hidden');\n            }\n\n            const recentTbody = document.getElementById('recent-transactions-list');\n            recentTbody.innerHTML = '';\n            \n            const approvedList = transactions.filter(t => t.status === 'approved')\n                .sort((a,b) => new Date(b.date) - new Date(a.date))\n                .slice(0, 5);\n\n            if (approvedList.length === 0) {\n                recentTbody.innerHTML = `<tr><td colspan=\"7\" class=\"py-4 text-center text-slate-400\">Ch\u01b0a ghi nh\u1eadn giao d\u1ecbch n\u00e0o.<\/td><\/tr>`;\n            } else {\n                approvedList.forEach(t => {\n                    const badge = t.type === 'import' ? \n                        '<span class=\"bg-emerald-100 text-emerald-800 text-[9px] px-2 py-0.5 rounded font-bold uppercase\">Nh\u1eadp Kho<\/span>' : \n                        '<span class=\"bg-red-100 text-red-800 text-[9px] px-2 py-0.5 rounded font-bold uppercase\">Xu\u1ea5t Kho<\/span>';\n\n                    recentTbody.innerHTML += `\n                        <tr class=\"border-b border-slate-50 hover:bg-slate-50 text-xs\">\n                            <td class=\"py-2.5 px-4 font-bold text-slate-800\">${t.code}<\/td>\n                            <td class=\"py-2.5 px-4\">${badge}<\/td>\n                            <td class=\"py-2.5 px-4 font-semibold text-indigo-700\">${t.warehouse || 'KHO S\u00c0I G\u00d2N'}<\/td>\n                            <td class=\"py-2.5 px-4 text-slate-500\">${new Date(t.date).toLocaleDateString('vi-VN')}<\/td>\n                            <td class=\"py-2.5 px-4 text-slate-600\">${t.creator}<\/td>\n                            <td class=\"py-2.5 px-4 text-right font-semibold text-slate-900\">${formatVND(t.total)}<\/td>\n                            <td class=\"py-2.5 px-4 text-center\">\n                                <button onclick=\"openPrintPreview(${t.id})\" class=\"text-amber-500 hover:text-amber-600 text-sm\"><i class=\"fa-solid fa-print\"><\/i><\/button>\n                            <\/td>\n                        <\/tr>\n                    `;\n                });\n            }\n        }\n\n        function renderDashboardChart() {\n            const ctx = document.getElementById('dashboardChart').getContext('2d');\n            if (dashboardChartInstance) {\n                dashboardChartInstance.destroy();\n            }\n\n            const approvedHistory = transactions.filter(t => t.status === 'approved').slice(-8);\n            const labels = approvedHistory.map(t => t.code);\n            const dataTotals = approvedHistory.map(t => t.total \/ 1000000); \n            const barColors = approvedHistory.map(t => t.type === 'import' ? 'rgba(16, 185, 129, 0.7)' : 'rgba(239, 68, 68, 0.7)');\n            const borderColors = approvedHistory.map(t => t.type === 'import' ? 'rgb(16, 185, 129)' : 'rgb(239, 68, 68)');\n\n            dashboardChartInstance = new Chart(ctx, {\n                type: 'bar',\n                data: {\n                    labels: labels,\n                    datasets: [{\n                        label: 'Gi\u00e1 tr\u1ecb ch\u1ee9ng t\u1eeb (Tri\u1ec7u VN\u0110)',\n                        data: dataTotals,\n                        backgroundColor: barColors,\n                        borderColor: borderColors,\n                        borderWidth: 1.5,\n                        borderRadius: 6\n                    }]\n                },\n                options: {\n                    responsive: true,\n                    maintainAspectRatio: false,\n                    plugins: {\n                        legend: { display: false }\n                    },\n                    scales: {\n                        y: {\n                            beginAtZero: true,\n                            ticks: { callback: function(value) { return value + ' tr\u0111'; } }\n                        }\n                    }\n                }\n            });\n        }\n\n        \/\/ --- 7. WEIGHTED AVERAGE INVENTORY VALUATION ---\n        function getWeightedAveragePrice(sku) {\n            const p = products.find(prod => prod.sku === sku);\n            if (!p) return 0;\n\n            let totalVal = 0;\n            let totalQty = 0;\n\n            const approvedImports = transactions.filter(t => t.status === 'approved' && t.type === 'import');\n            approvedImports.forEach(tx => {\n                tx.items.forEach(item => {\n                    if (item.sku === sku) {\n                        totalVal += item.qty * item.priceWithVat;\n                        totalQty += item.qty;\n                    }\n                });\n            });\n\n            if (totalQty === 0) {\n                return p.price; \n            }\n\n            return Math.round(totalVal \/ totalQty);\n        }\n\n        \/\/ --- 8. FIFO ALGORITHM IMPLEMENTATION ---\n        function getAvailableBatches(sku) {\n            const p = products.find(prod => prod.sku === sku);\n            if (!p) return [];\n\n            let batches = [];\n\n            const approvedTx = transactions.filter(t => t.status === 'approved').sort((a,b) => new Date(a.date) - new Date(b.date));\n            approvedTx.forEach(tx => {\n                if (tx.type === 'import') {\n                    tx.items.forEach(item => {\n                        if (item.sku === sku) {\n                            batches.push({ price: item.priceWithVat, qty: item.qty, date: tx.date, slipCode: tx.code });\n                        }\n                    });\n                }\n            });\n\n            let sumImported = batches.reduce((sum, b) => sum + b.qty, 0);\n            let sumExported = 0;\n            approvedTx.forEach(tx => {\n                if (tx.type === 'export') {\n                    tx.items.forEach(item => {\n                        if (item.sku === sku) sumExported += item.qty;\n                    });\n                }\n            });\n\n            let assumedInitial = (p.stock + sumExported) - sumImported;\n            if (assumedInitial > 0) {\n                batches.unshift({ price: p.price, qty: assumedInitial, date: 'Ban \u0111\u1ea7u', slipCode: 'L\u00d4 \u0110\u1ea6U' });\n            }\n\n            approvedTx.forEach(tx => {\n                if (tx.type === 'export') {\n                    tx.items.forEach(item => {\n                        if (item.sku === sku) {\n                            let deduct = item.qty;\n                            for (let i = 0; i < batches.length &#038;&#038; deduct > 0; i++) {\n                                if (batches[i].qty > 0) {\n                                    let taken = Math.min(batches[i].qty, deduct);\n                                    batches[i].qty -= taken;\n                                    deduct -= taken;\n                                }\n                            }\n                        }\n                    });\n                }\n            });\n\n            return batches.filter(b => b.qty > 0);\n        }\n\n        \/\/ --- 9. PRODUCT MANAGEMENT CONTROLLER ---\n        function buildProductsTable(filterSku = '', filterCategory = '', filterAlert = '') {\n            const tbody = document.getElementById('products-table-body');\n            tbody.innerHTML = '';\n\n            let filtered = products;\n\n            if (filterSku) {\n                const s = filterSku.toLowerCase();\n                filtered = filtered.filter(p => p.sku.toLowerCase().includes(s) || p.name.toLowerCase().includes(s));\n            }\n            if (filterCategory) {\n                filtered = filtered.filter(p => p.category === filterCategory);\n            }\n            if (filterAlert) {\n                if (filterAlert === 'alert') filtered = filtered.filter(p => p.stock <= p.minStock);\n                else if (filterAlert === 'safe') filtered = filtered.filter(p => p.stock > p.minStock);\n            }\n\n            filtered.forEach(p => {\n                const isAlert = p.stock <= p.minStock;\n                const statusBadge = isAlert ? \n                    `<span class=\"bg-red-100 text-red-800 text-[9px] px-2 py-0.5 rounded-full font-bold inline-flex items-center\"><span class=\"w-1.5 h-1.5 bg-red-600 rounded-full mr-1 animate-ping\"><\/span>Thi\u1ebfu ${p.minStock - p.stock}<\/span>` : \n                    `<span class=\"bg-emerald-100 text-emerald-800 text-[9px] px-2 py-0.5 rounded-full font-bold\">An to\u00e0n<\/span>`;\n\n                const avgPrice = getWeightedAveragePrice(p.sku);\n\n                let minStockControl = `<span class=\"font-bold text-slate-800\">${p.minStock}<\/span>`;\n                if (currentUser.level <= 2) {\n                    minStockControl = `\n                        <input type=\"number\" value=\"${p.minStock}\" min=\"0\" onchange=\"quickUpdateMinStock(${p.id}, this.value)\" class=\"w-16 px-1.5 py-1 text-center border rounded font-bold text-slate-800 focus:outline-none focus:ring-1 focus:ring-amber-500\">\n                    `;\n                }\n\n                let actionBtns = `<span class=\"text-slate-400 text-[10px] italic\">Kh\u00f4ng kh\u1ea3 d\u1ee5ng<\/span>`;\n                if (currentUser.level === 1) {\n                    actionBtns = `\n                        <button onclick=\"editProduct(${p.id})\" class=\"text-blue-500 hover:text-blue-700 bg-blue-50 p-1.5 rounded-lg\"><i class=\"fa-solid fa-pen\"><\/i><\/button>\n                        <button onclick=\"deleteProduct(${p.id})\" class=\"text-red-500 hover:text-red-700 bg-red-50 p-1.5 rounded-lg\"><i class=\"fa-solid fa-trash\"><\/i><\/button>\n                    `;\n                }\n\n                tbody.innerHTML += `\n                    <tr class=\"hover:bg-slate-50 transition colors text-xs border-b border-slate-100\">\n                        <td class=\"py-3 px-6 font-bold text-slate-800\">\n                            <span class=\"bg-slate-100 border border-slate-200 px-2.5 py-1 rounded-lg text-[10px] font-mono\">${p.sku}<\/span>\n                        <\/td>\n                        <td class=\"py-3 px-6\">\n                            <div class=\"font-bold text-slate-900\">${p.name}<\/div>\n                            <div class=\"mt-1 flex items-center space-x-2\">\n                                ${statusBadge}\n                            <\/div>\n                        <\/td>\n                        <td class=\"py-3 px-6 text-slate-500 font-medium\">${p.category}<\/td>\n                        <td class=\"py-3 px-6 text-center text-slate-500 font-bold\">${p.unit}<\/td>\n                        <td class=\"py-3 px-6 text-right font-bold text-amber-700 bg-amber-50\/20\">${formatVND(avgPrice)}<\/td>\n                        <td class=\"py-3 px-6 text-center\">${minStockControl}<\/td>\n                        <td class=\"py-3 px-6 text-center\">\n                            <span class=\"text-sm font-black ${isAlert ? 'text-red-600' : 'text-slate-900'}\">${p.stock}<\/span>\n                        <\/td>\n                        <td class=\"py-3 px-6 text-center space-x-1\">${actionBtns}<\/td>\n                    <\/tr>\n                `;\n            });\n        }\n\n        function filterProducts() {\n            const skuVal = document.getElementById('product-search').value;\n            const catVal = document.getElementById('product-filter-category').value;\n            const alertVal = document.getElementById('product-filter-alert').value;\n            buildProductsTable(skuVal, catVal, alertVal);\n        }\n\n        function quickUpdateMinStock(id, newVal) {\n            const p = products.find(prod => prod.id == id);\n            if (p) {\n                const val = parseInt(newVal) || 0;\n                p.minStock = val;\n                showToast(`\u0110\u00e3 l\u01b0u \u0111\u1ecbnh m\u1ee9c t\u1ed3n t\u1ed1i thi\u1ec3u m\u1edbi cho ${p.sku}!`);\n                refreshDashboard();\n                filterProducts();\n            }\n        }\n\n        function buildCategoryDropdownFilters() {\n            const categories = [...new Set(products.map(p => p.category))];\n            const selectFilter = document.getElementById('product-filter-category');\n            if (selectFilter) {\n                selectFilter.innerHTML = '<option value=\"\">T\u1ea5t c\u1ea3 ph\u00e2n lo\u1ea1i<\/option>';\n                categories.forEach(cat => {\n                    selectFilter.innerHTML += `<option value=\"${cat}\">${cat}<\/option>`;\n                });\n            }\n        }\n\n        function populateProductDropdowns() {\n            const importSel = document.getElementById('import-add-product');\n            const exportSel = document.getElementById('export-add-product');\n\n            if (importSel) {\n                importSel.innerHTML = '';\n                products.forEach(p => {\n                    importSel.innerHTML += `<option value=\"${p.sku}\">${p.sku} - ${p.name}<\/option>`;\n                });\n            }\n            if (exportSel) {\n                exportSel.innerHTML = '';\n                products.forEach(p => {\n                    exportSel.innerHTML += `<option value=\"${p.sku}\">${p.sku} - ${p.name} (T\u1ed3n: ${p.stock})<\/option>`;\n                });\n            }\n        }\n\n        function populateWarehouseDropdowns() {\n            const importWhSel = document.getElementById('import-slip-warehouse');\n            const exportWhSel = document.getElementById('export-slip-warehouse');\n\n            if (importWhSel) {\n                importWhSel.innerHTML = '';\n                warehouses.forEach(w => {\n                    if (w.status === 'active') {\n                        importWhSel.innerHTML += `<option value=\"${w.name}\">${w.name}<\/option>`;\n                    }\n                });\n            }\n            if (exportWhSel) {\n                exportWhSel.innerHTML = '';\n                warehouses.forEach(w => {\n                    if (w.status === 'active') {\n                        exportWhSel.innerHTML += `<option value=\"${w.name}\">${w.name}<\/option>`;\n                    }\n                });\n            }\n        }\n\n        function populateSupplierDropdown() {\n            const sel = document.getElementById('import-add-ncc');\n            if (sel) {\n                sel.innerHTML = '';\n                suppliers.forEach(s => {\n                    sel.innerHTML += `<option value=\"${s.companyName}\">${s.companyName}<\/option>`;\n                });\n            }\n        }\n\n        function populateBrandDropdown() {\n            const sel = document.getElementById('import-add-brand');\n            if (sel) {\n                sel.innerHTML = '';\n                brands.forEach(b => {\n                    sel.innerHTML += `<option value=\"${b.name}\">${b.name}<\/option>`;\n                });\n            }\n        }\n\n        function populateProductModalDropdowns() {\n            const brandSel = document.getElementById('modal-product-brand');\n            const nccSel = document.getElementById('modal-product-ncc');\n            if (brandSel) {\n                brandSel.innerHTML = '';\n                brands.forEach(b => {\n                    brandSel.innerHTML += `<option value=\"${b.name}\">${b.name}<\/option>`;\n                });\n            }\n            if (nccSel) {\n                nccSel.innerHTML = '';\n                suppliers.forEach(s => {\n                    nccSel.innerHTML += `<option value=\"${s.companyName}\">${s.companyName}<\/option>`;\n                });\n            }\n        }\n\n        function openProductModal() {\n            populateProductModalDropdowns();\n            document.getElementById('product-modal-title').innerText = \"Th\u00eam thi\u1ebft b\u1ecb solar m\u1edbi\";\n            document.getElementById('modal-product-id').value = \"\";\n            document.getElementById('modal-product-name').value = \"\";\n            document.getElementById('modal-product-unit').value = \"B\u1ed9\";\n            document.getElementById('modal-product-min-stock').value = \"10\";\n            document.getElementById('product-modal').classList.remove('hidden');\n        }\n\n        function closeProductModal() {\n            document.getElementById('product-modal').classList.add('hidden');\n        }\n\n        function saveProduct() {\n            const idVal = document.getElementById('modal-product-id').value;\n            const name = document.getElementById('modal-product-name').value.trim();\n            const brand = document.getElementById('modal-product-brand').value;\n            const ncc = document.getElementById('modal-product-ncc').value;\n            const unit = document.getElementById('modal-product-unit').value.trim();\n            const minStock = parseInt(document.getElementById('modal-product-min-stock').value) || 0;\n\n            if (!name || !unit) {\n                customAlert(\"Vui l\u00f2ng \u0111i\u1ec1n \u0111\u1ea7y \u0111\u1ee7 c\u00e1c th\u00f4ng tin b\u1eaft bu\u1ed9c!\", \"L\u1ed7i nh\u1eadp li\u1ec7u\", \"error\");\n                return;\n            }\n\n            if (idVal === \"\") {\n                const nextNum = products.length + 1;\n                const sku = `VT${String(nextNum).padStart(3, '0')}`;\n                \n                let category = \"Kh\u00e1c\";\n                if (name.toLowerCase().includes(\"pin\")) category = \"Pin l\u01b0u tr\u1eef\";\n                else if (name.toLowerCase().includes(\"bi\u1ebfn t\u1ea7n\") || name.toLowerCase().includes(\"inverter\")) category = \"Bi\u1ebfn t\u1ea7n\";\n                else if (name.toLowerCase().includes(\"t\u1ea5m\") || name.toLowerCase().includes(\"solar\") || name.toLowerCase().includes(\"quang n\u0103ng\")) category = \"T\u1ea5m pin Solar\";\n                else if (name.toLowerCase().includes(\"c\u00e1p\") || name.toLowerCase().includes(\"d\u00e2y\")) category = \"D\u00e2y c\u00e1p\";\n\n                products.push({\n                    id: generateUniqueId(),\n                    sku: sku,\n                    name: name,\n                    category: category,\n                    unit: unit,\n                    price: 2500000, \n                    minStock: minStock,\n                    stock: 0,\n                    brand: brand,\n                    ncc: ncc\n                });\n                showToast(`\u0110\u00e3 th\u00eam m\u1edbi thi\u1ebft b\u1ecb th\u00e0nh c\u00f4ng v\u1edbi m\u00e3 SKU ${sku}!`);\n            } else {\n                const p = products.find(prod => prod.id == idVal);\n                if (p) {\n                    p.name = name;\n                    p.unit = unit;\n                    p.minStock = minStock;\n                    p.brand = brand;\n                    p.ncc = ncc;\n                    showToast(`C\u1eadp nh\u1eadt th\u00f4ng tin ${p.sku} th\u00e0nh c\u00f4ng!`);\n                }\n            }\n\n            closeProductModal();\n            refreshDashboard();\n            buildProductsTable();\n            populateProductDropdowns();\n        }\n\n        function editProduct(id) {\n            const p = products.find(prod => prod.id == id);\n            if (p) {\n                populateProductModalDropdowns();\n                document.getElementById('product-modal-title').innerText = `Ch\u1ec9nh s\u1eeda th\u00f4ng tin ${p.sku}`;\n                document.getElementById('modal-product-id').value = p.id;\n                document.getElementById('modal-product-name').value = p.name;\n                document.getElementById('modal-product-brand').value = p.brand || (brands[0] ? brands[0].name : \"Kh\u00e1c\");\n                document.getElementById('modal-product-ncc').value = p.ncc || (suppliers[0] ? suppliers[0].companyName : \"N\u1ed9i b\u1ed9\");\n                document.getElementById('modal-product-unit').value = p.unit;\n                document.getElementById('modal-product-min-stock').value = p.minStock;\n                document.getElementById('product-modal').classList.remove('hidden');\n            }\n        }\n\n        function deleteProduct(id) {\n            const p = products.find(prod => prod.id == id);\n            if (p) {\n                customConfirm(`B\u1ea1n c\u00f3 ch\u1eafc ch\u1eafn mu\u1ed1n x\u00f3a v\u0129nh vi\u1ec5n thi\u1ebft b\u1ecb ${p.sku}?`, function() {\n                    products = products.filter(prod => prod.id != id);\n                    showToast(`\u0110\u00e3 x\u00f3a thi\u1ebft b\u1ecb ${p.sku}!`, 'warning');\n                    refreshDashboard();\n                    buildProductsTable();\n                    populateProductDropdowns();\n                });\n            }\n        }\n\n        \/\/ --- 10. IMPORT WAREHOUSE IMPLEMENTATIONS ---\n        function updateImportPrices(changedField) {\n            const vatSelect = document.getElementById('import-add-vat');\n            const priceNoVatInput = document.getElementById('import-add-price');\n            const priceWithVatInput = document.getElementById('import-add-price-vat');\n\n            const vatPct = parseFloat(vatSelect.value) \/ 100;\n\n            if (changedField === 'price' || changedField === 'vat') {\n                const priceNoVat = parseFloat(priceNoVatInput.value) || 0;\n                const calculatedVat = Math.round(priceNoVat * (1 + vatPct));\n                priceWithVatInput.value = calculatedVat;\n            } else if (changedField === 'vatprice') {\n                const priceWithVat = parseFloat(priceWithVatInput.value) || 0;\n                const calculatedNoVat = Math.round(priceWithVat \/ (1 + vatPct));\n                priceNoVatInput.value = calculatedNoVat;\n            }\n        }\n\n        function addProductToImportList() {\n            const sku = document.getElementById('import-add-product').value;\n            const brand = document.getElementById('import-add-brand').value;\n            const ncc = document.getElementById('import-add-ncc').value;\n            const vatRate = parseInt(document.getElementById('import-add-vat').value);\n            const price = parseFloat(document.getElementById('import-add-price').value) || 0;\n            const priceWithVat = parseFloat(document.getElementById('import-add-price-vat').value) || 0;\n            const qty = parseInt(document.getElementById('import-add-qty').value) || 0;\n\n            if (qty <= 0 || price <= 0) {\n                customAlert(\"S\u1ed1 l\u01b0\u1ee3ng nh\u1eadp v\u00e0 \u0111\u01a1n gi\u00e1 ch\u01b0a VAT ph\u1ea3i l\u1edbn h\u01a1n 0!\", \"Nh\u1eadp thi\u1ebfu\", \"error\");\n                return;\n            }\n\n            const p = products.find(prod => prod.sku === sku);\n            if (!p) return;\n\n            const duplicateIndex = importDraftItems.findIndex(i => i.sku === sku && i.price === price && i.vatRate === vatRate);\n            if (duplicateIndex !== -1) {\n                importDraftItems[duplicateIndex].qty += qty;\n                importDraftItems[duplicateIndex].subtotal = importDraftItems[duplicateIndex].qty * importDraftItems[duplicateIndex].priceWithVat;\n            } else {\n                importDraftItems.push({\n                    id: p.id,\n                    sku: p.sku,\n                    name: p.name,\n                    brand: brand,\n                    ncc: ncc,\n                    qty: qty,\n                    price: price,\n                    vatRate: vatRate,\n                    priceWithVat: priceWithVat,\n                    subtotal: qty * priceWithVat\n                });\n            }\n\n            document.getElementById('import-add-qty').value = \"1\";\n            document.getElementById('import-add-price').value = \"\";\n            document.getElementById('import-add-price-vat').value = \"\";\n\n            renderImportDraftTable();\n        }\n\n        function renderImportDraftTable() {\n            const tbody = document.getElementById('import-draft-tbody');\n            tbody.innerHTML = '';\n            let total = 0;\n\n            if (importDraftItems.length === 0) {\n                tbody.innerHTML = `<tr><td colspan=\"9\" class=\"text-center py-6 text-slate-400 italic\">Ch\u01b0a c\u00f3 s\u1ea3n ph\u1ea9m nh\u00e1p \u0111\u01b0\u1ee3c ch\u1ecdn.<\/td><\/tr>`;\n            } else {\n                importDraftItems.forEach((item, idx) => {\n                    total += item.subtotal;\n                    tbody.innerHTML += `\n                        <tr class=\"hover:bg-slate-50 text-xs border-b border-slate-100\">\n                            <td class=\"py-2.5 font-bold\">${item.sku}<\/td>\n                            <td class=\"py-2.5 font-semibold text-slate-900\">${item.name}<\/td>\n                            <td class=\"py-2.5\">${item.brand}<\/td>\n                            <td class=\"py-2.5 truncate max-w-[120px]\" title=\"${item.ncc}\">${item.ncc}<\/td>\n                            <td class=\"py-2.5 text-center font-bold text-slate-900\">${item.qty}<\/td>\n                            <td class=\"py-2.5 text-right text-slate-500\">${formatVND(item.price)}<\/td>\n                            <td class=\"py-2.5 text-right font-semibold text-slate-800\">${formatVND(item.priceWithVat)} <span class=\"text-[9px] text-amber-500 font-bold\">(${item.vatRate}%)<\/span><\/td>\n                            <td class=\"py-2.5 text-right font-extrabold text-emerald-600\">${formatVND(item.subtotal)}<\/td>\n                            <td class=\"py-2.5 text-center\">\n                                <button onclick=\"removeImportDraftItem(${idx})\" class=\"text-red-500 hover:text-red-700 text-sm\"><i class=\"fa-solid fa-trash\"><\/i><\/button>\n                            <\/td>\n                        <\/tr>\n                    `;\n                });\n            }\n\n            document.getElementById('import-slip-total-view').innerText = formatVND(total);\n        }\n\n        function removeImportDraftItem(index) {\n            importDraftItems.splice(index, 1);\n            renderImportDraftTable();\n        }\n\n        function clearImportForm() {\n            importDraftItems = [];\n            document.getElementById('import-slip-note').value = \"\";\n            renderImportDraftTable();\n        }\n\n        function submitImportSlip() {\n            if (importDraftItems.length === 0) {\n                customAlert(\"Vui l\u00f2ng b\u1ed5 sung \u00edt nh\u1ea5t m\u1ed9t v\u1eadt t\u01b0 v\u00e0o danh s\u00e1ch nh\u00e1p!\", \"Danh s\u00e1ch r\u1ed7ng\", \"warning\");\n                return;\n            }\n\n            const code = document.getElementById('import-slip-code').value;\n            const creator = document.getElementById('import-slip-creator').value;\n            const department = document.getElementById('import-slip-dept').value.trim() || \"V\u1eadt t\u01b0\";\n            const warehouse = document.getElementById('import-slip-warehouse').value;\n            const note = document.getElementById('import-slip-note').value.trim() || \"Nh\u1eadp kho lu\u00e2n chuy\u1ec3n\";\n\n            const grandTotal = importDraftItems.reduce((sum, i) => sum + i.subtotal, 0);\n            const autoApprove = currentUser.level === 1;\n\n            const newTx = {\n                id: generateUniqueId(),\n                code: code,\n                type: 'import',\n                status: autoApprove ? 'approved' : 'pending',\n                date: new Date().toISOString(),\n                creator: creator,\n                department: department,\n                warehouse: warehouse,\n                note: note,\n                items: [...importDraftItems],\n                total: grandTotal\n            };\n\n            transactions.push(newTx);\n\n            if (autoApprove) {\n                importDraftItems.forEach(item => {\n                    const prod = products.find(p => p.sku === item.sku);\n                    if (prod) prod.stock += item.qty;\n                });\n                showToast(`\u0110\u00e3 duy\u1ec7t th\u00e0nh c\u00f4ng phi\u1ebfu nh\u1eadp ${code}!`);\n                openPrintPreview(newTx.id);\n            } else {\n                showToast(`Phi\u1ebfu nh\u1eadp ${code} \u0111\u00e3 \u0111\u01b0\u1ee3c g\u1eedi l\u00ean Ban Gi\u00e1m \u0110\u1ed1c \u0111\u1ee3i ph\u00ea duy\u1ec7t!`);\n            }\n\n            clearImportForm();\n            generateImportCode();\n            refreshDashboard();\n        }\n\n        \/\/ --- 11. EXCEL TEMPLATE ENGINE ---\n        function downloadExcelTemplate() {\n            const headerRow = [\"STT\", \"S\u1ed0 PHI\u1ebeU\", \"NG\u00c0Y NH\u1eacP H\u00c0NG\", \"T\u00caN S\u1ea2N PH\u1ea8M\", \"\u0110\u01a0N V\u1eca\", \"H\u00c3NG S\u1ea2N XU\u1ea4T\", \"NCC\", \"KHO\", \"M\u00c3 VT\", \"\u0110\u01a0N GI\u00c1 (ch\u01b0a VAT)\", \"THU\u1ebe VAT (%)\", \"S\u1ed0 L\u01af\u1ee2NG\", \"GHI CH\u00da\"];\n            const dataRows = [\n                [1, \"00001\", \"7\/18\/2026\", \"T\u1ea5m quang n\u0103ng Canadian Solar 550W\", \"B\u1ed9\", \"Canadian Solar\", \"C\u00d4NG TY TNHH D\u1ecaCH V\u1ee4 VI\u1ec4N TH\u00d4NG \u0110\u1ee8C\", \"S\u00c0I G\u00d2N (Kho t\u1ed5ng)\", \"VT001\", 2900000, 10, 22, \"Nh\u1eadp d\u1ef1 \u00e1n m\u1edbi S\u00e0i G\u00f2n\"],\n                [2, \"00001\", \"7\/18\/2026\", \"Bi\u1ebfn t\u1ea7n Inverter Hybrid Deye 8kW\", \"B\u1ed9\", \"Deye\", \"C\u00d4NG TY TNHH D\u1ecaCH V\u1ee4 VI\u1ec4N TH\u00d4NG \u0110\u1ee8C\", \"S\u00c0I G\u00d2N (Kho t\u1ed5ng)\", \"VT002\", 24500000, 10, 15, \"Nh\u1eadp d\u1ef1 \u00e1n m\u1edbi S\u00e0i G\u00f2n\"]\n            ];\n\n            const wb = XLSX.utils.book_new();\n            const ws = XLSX.utils.aoa_to_sheet([headerRow, ...dataRows]);\n\n            ws['!cols'] = [\n                { wch: 5 }, { wch: 10 }, { wch: 15 }, { wch: 30 }, { wch: 8 }, { wch: 15 }, { wch: 35 }, { wch: 20 }, { wch: 10 }, { wch: 18 }, { wch: 12 }, { wch: 10 }, { wch: 20 }\n            ];\n\n            XLSX.utils.book_append_sheet(wb, ws, \"Mau_Nhap_Kho\");\n            XLSX.writeFile(wb, \"Mau_Nhap_Kho_Hung_Cuong_Solar.xlsx\");\n            showToast(\"\u0110\u00e3 t\u1ea3i xu\u1ed1ng file Excel m\u1eabu!\");\n        }\n\n        function handleImportExcel(event) {\n            const file = event.target.files[0];\n            if (!file) return;\n\n            const reader = new FileReader();\n            reader.onload = function(e) {\n                const data = new Uint8Array(e.target.result);\n                const workbook = XLSX.read(data, { type: 'array' });\n                const firstSheet = workbook.SheetNames[0];\n                const worksheet = workbook.Sheets[firstSheet];\n                \n                const rows = XLSX.utils.sheet_to_json(worksheet, { header: 1 });\n                if (rows.length < 2) {\n                    customAlert(\"T\u1ec7p Excel r\u1ed7ng ho\u1eb7c sai c\u1ea5u tr\u00fac \u0111\u1ecbnh d\u1ea1ng!\", \"L\u1ed7i file Excel\", \"error\");\n                    return;\n                }\n\n                const headers = rows[0].map(h => String(h).trim().toUpperCase());\n                const idxSku = headers.findIndex(h => h.includes(\"M\u00c3\") || h.includes(\"SKU\") || h.includes(\"VT\"));\n                const idxName = headers.findIndex(h => h.includes(\"T\u00caN\"));\n                const idxBrand = headers.findIndex(h => h.includes(\"H\u00c3NG\"));\n                const idxNcc = headers.findIndex(h => h.includes(\"NCC\") || h.includes(\"CUNG C\u1ea4P\"));\n                const idxVat = headers.findIndex(h => h.includes(\"VAT\") || h.includes(\"THU\u1ebe\"));\n                const idxPrice = headers.findIndex(h => h.includes(\"\u0110\u01a0N GI\u00c1\") && !h.includes(\"SAU\"));\n                const idxQty = headers.findIndex(h => h.includes(\"S\u1ed0 L\u01af\u1ee2NG\") || h.includes(\"SL\"));\n\n                if (idxSku === -1 || idxQty === -1 || idxPrice === -1) {\n                    customAlert(\"Thi\u1ebfu c\u00e1c c\u1ed9t b\u1eaft bu\u1ed9c: M\u00e3 VT\/SKU, S\u1ed1 l\u01b0\u1ee3ng, \u0110\u01a1n gi\u00e1 ch\u01b0a VAT!\", \"L\u1ed7i file Excel\", \"error\");\n                    return;\n                }\n\n                let importedCount = 0;\n\n                for (let r = 1; r < rows.length; r++) {\n                    const row = rows[r];\n                    if (!row || row.length === 0) continue;\n\n                    const sku = String(row[idxSku] || \"\").trim().toUpperCase();\n                    const qty = parseInt(row[idxQty]) || 0;\n                    const price = parseFloat(row[idxPrice]) || 0;\n                    \n                    if (!sku || qty <= 0 || price <= 0) continue;\n\n                    const p = products.find(prod => prod.sku === sku);\n                    if (p) {\n                        const brand = idxBrand !== -1 ? String(row[idxBrand] || \"Kh\u00e1c\").trim() : \"Kh\u00e1c\";\n                        const ncc = idxNcc !== -1 ? String(row[idxNcc] || \"N\u1ed9i b\u1ed9\").trim() : \"N\u1ed9i b\u1ed9\";\n                        const vatRate = idxVat !== -1 ? parseInt(row[idxVat]) || 10 : 10;\n                        const priceWithVat = Math.round(price * (1 + (vatRate \/ 100)));\n\n                        importDraftItems.push({\n                            id: p.id,\n                            sku: p.sku,\n                            name: p.name,\n                            brand: brands.some(b => b.name === brand) ? brand : (brands[0]?.name || \"Canadian Solar\"),\n                            ncc: suppliers.some(s => s.companyName === ncc) ? ncc : (suppliers[0]?.companyName || \"N\u1ed9i b\u1ed9\"),\n                            qty: qty,\n                            price: price,\n                            vatRate: vatRate,\n                            priceWithVat: priceWithVat,\n                            subtotal: qty * priceWithVat\n                        });\n                        importedCount++;\n                    }\n                }\n\n                if (importedCount > 0) {\n                    showToast(`\u0110\u00e3 n\u1ea1p th\u00e0nh c\u00f4ng ${importedCount} d\u00f2ng thi\u1ebft b\u1ecb t\u1eeb file Excel!`);\n                    renderImportDraftTable();\n                } else {\n                    customAlert(\"Kh\u00f4ng c\u00f3 d\u00f2ng n\u00e0o kh\u1edbp m\u00e3 SKU v\u1eadt t\u01b0 trong danh m\u1ee5c. H\u00e3y \u0111\u1ed1i chi\u1ebfu ch\u00ednh x\u00e1c m\u00e3 SKU!\", \"L\u1ed7i li\u00ean k\u1ebft\", \"error\");\n                }\n\n                document.getElementById('import-excel-file').value = \"\";\n            }\n            reader.readAsArrayBuffer(file);\n        }\n\n        \/\/ --- 12. EXPORT WAREHOUSE CONTROLLERS (FIFO) ---\n        function onExportProductChange() {\n            const sku = document.getElementById('export-add-product').value;\n            const p = products.find(prod => prod.sku === sku);\n            \n            if (p) {\n                document.getElementById('export-available-stock').innerText = p.stock;\n                \n                let availableLots = getAvailableBatches(sku);\n\n                let currentDraftMatch = exportDraftItems.filter(item => item.sku === sku);\n                currentDraftMatch.forEach(draftItem => {\n                    let draftQty = draftItem.qty;\n                    for (let lot of availableLots) {\n                        if (lot.qty > 0 && draftQty > 0) {\n                            let taken = Math.min(lot.qty, draftQty);\n                            lot.qty -= taken;\n                            draftQty -= taken;\n                        }\n                    }\n                });\n                availableLots = availableLots.filter(l => l.qty > 0);\n\n                let infoText = \"H\u1ebft h\u00e0ng t\u1ed3n\";\n                if (availableLots.length > 0) {\n                    infoText = availableLots.map(l => `${l.qty} @ ${formatVND(l.price)}`).join(\" | \");\n                }\n                document.getElementById('export-fifo-info').innerText = infoText;\n                document.getElementById('export-fifo-info').title = \"Ph\u00e2n r\u00e3 FIFO: \" + infoText;\n\n                validateExportQtyInput();\n            }\n        }\n\n        function validateExportQtyInput() {\n            const sku = document.getElementById('export-add-product').value;\n            const qty = parseInt(document.getElementById('export-add-qty').value) || 0;\n            const p = products.find(prod => prod.sku === sku);\n\n            const errDock = document.getElementById('export-error-dock');\n            const btnAdd = document.getElementById('btn-export-add');\n\n            if (!p) return true;\n\n            let writtenDraftQty = exportDraftItems.filter(i => i.sku === sku).reduce((sum, i) => sum + i.qty, 0);\n            let totalRequested = qty + writtenDraftQty;\n\n            if (totalRequested > p.stock) {\n                errDock.classList.remove('hidden');\n                document.getElementById('export-error-text').innerHTML = `S\u1ea3n ph\u1ea9m <strong>${p.name}<\/strong> ch\u1ec9 c\u00f2n <strong>${p.stock}<\/strong> c\u00e1i trong kho. B\u1ea1n y\u00eau c\u1ea7u t\u1ed5ng xu\u1ea5t <strong>${totalRequested}<\/strong> c\u00e1i (\u0110\u00e3 g\u1ed3m nh\u00e1p).`;\n                \n                btnAdd.disabled = true;\n                btnAdd.classList.add('opacity-40', 'cursor-not-allowed');\n                return false;\n            } else {\n                errDock.classList.add('hidden');\n                btnAdd.disabled = false;\n                btnAdd.classList.remove('opacity-40', 'cursor-not-allowed');\n                return true;\n            }\n        }\n\n        function addProductToExportList() {\n            if (!validateExportQtyInput()) {\n                customAlert(\"H\u1ec7 th\u1ed1ng ph\u00e1t hi\u1ec7n v\u01b0\u1ee3t s\u1ed1 l\u01b0\u1ee3ng h\u00e0ng t\u1ed3n kho. Vui l\u00f2ng gi\u1ea3m s\u1ed1 l\u01b0\u1ee3ng!\", \"V\u01b0\u1ee3t t\u1ed3n kho\", \"error\");\n                return;\n            }\n\n            const sku = document.getElementById('export-add-product').value;\n            const qtyRequested = parseInt(document.getElementById('export-add-qty').value) || 0;\n\n            if (qtyRequested <= 0) {\n                customAlert(\"S\u1ed1 l\u01b0\u1ee3ng xu\u1ea5t kho ph\u1ea3i l\u1edbn h\u01a1n 0!\", \"L\u1ed7i nh\u1eadp\", \"error\");\n                return;\n            }\n\n            const p = products.find(prod => prod.sku === sku);\n            if (!p) return;\n\n            let availableLots = getAvailableBatches(sku);\n\n            let writtenDrafts = exportDraftItems.filter(i => i.sku === sku);\n            writtenDrafts.forEach(draftItem => {\n                let dq = draftItem.qty;\n                for (let lot of availableLots) {\n                    if (lot.qty > 0 && dq > 0) {\n                        let taken = Math.min(lot.qty, dq);\n                        lot.qty -= taken;\n                        dq -= taken;\n                    }\n                }\n            });\n            availableLots = availableLots.filter(l => l.qty > 0);\n\n            let qtyToDeduct = qtyRequested;\n\n            for (let lot of availableLots) {\n                if (qtyToDeduct <= 0) break;\n\n                let taken = Math.min(lot.qty, qtyToDeduct);\n\n                const matchIndex = exportDraftItems.findIndex(i => i.sku === sku && i.price === lot.price);\n                if (matchIndex !== -1) {\n                    exportDraftItems[matchIndex].qty += taken;\n                    exportDraftItems[matchIndex].subtotal = exportDraftItems[matchIndex].qty * exportDraftItems[matchIndex].price;\n                } else {\n                    exportDraftItems.push({\n                        id: p.id,\n                        sku: p.sku,\n                        name: p.name,\n                        qty: taken,\n                        price: lot.price,\n                        subtotal: taken * lot.price\n                    });\n                }\n\n                qtyToDeduct -= taken;\n            }\n\n            document.getElementById('export-add-qty').value = \"1\";\n            renderExportDraftTable();\n            onExportProductChange();\n        }\n\n        function renderExportDraftTable() {\n            const tbody = document.getElementById('export-draft-tbody');\n            tbody.innerHTML = '';\n            let total = 0;\n\n            if (exportDraftItems.length === 0) {\n                tbody.innerHTML = `<tr><td colspan=\"6\" class=\"text-center py-6 text-slate-400 italic\">Ch\u01b0a ch\u1ecdn thi\u1ebft b\u1ecb n\u00e0o xu\u1ea5t kho.<\/td><\/tr>`;\n            } else {\n                exportDraftItems.forEach((item, idx) => {\n                    total += item.subtotal;\n                    tbody.innerHTML += `\n                        <tr class=\"hover:bg-slate-50 text-xs border-b border-slate-100\">\n                            <td class=\"py-2.5 font-bold\">${item.sku}<\/td>\n                            <td class=\"py-2.5 font-semibold text-slate-900\">${item.name}<\/td>\n                            <td class=\"py-2.5 text-center font-bold text-slate-900\">${item.qty}<\/td>\n                            <td class=\"py-2.5 text-right font-semibold text-slate-700\">${formatVND(item.price)}<\/td>\n                            <td class=\"py-2.5 text-right font-extrabold text-red-600\">${formatVND(item.subtotal)}<\/td>\n                            <td class=\"py-2.5 text-center\">\n                                <button onclick=\"removeExportDraftItem(${idx})\" class=\"text-red-500 hover:text-red-700 text-sm\"><i class=\"fa-solid fa-trash\"><\/i><\/button>\n                            <\/td>\n                        <\/tr>\n                    `;\n                });\n            }\n\n            document.getElementById('export-slip-total-view').innerText = formatVND(total);\n        }\n\n        function removeExportDraftItem(index) {\n            exportDraftItems.splice(index, 1);\n            renderExportDraftTable();\n            onExportProductChange();\n        }\n\n        function clearExportForm() {\n            exportDraftItems = [];\n            document.getElementById('export-slip-note').value = \"\";\n            renderExportDraftTable();\n            onExportProductChange();\n        }\n\n        function submitExportSlip() {\n            if (exportDraftItems.length === 0) {\n                customAlert(\"Vui l\u00f2ng b\u1ed5 sung \u00edt nh\u1ea5t m\u1ed9t v\u1eadt t\u01b0 v\u00e0o danh s\u00e1ch xu\u1ea5t kho!\", \"L\u1eadp phi\u1ebfu tr\u1ed1ng\", \"warning\");\n                return;\n            }\n\n            const code = document.getElementById('export-slip-code').value;\n            const creator = document.getElementById('export-slip-creator').value;\n            const warehouse = document.getElementById('export-slip-warehouse').value;\n            const note = document.getElementById('export-slip-note').value.trim() || \"Xu\u1ea5t kho thi c\u00f4ng d\u1ef1 \u00e1n\";\n\n            let failed = false;\n            let errMsg = \"\";\n            \n            exportDraftItems.forEach(item => {\n                const prod = products.find(p => p.sku === item.sku);\n                if (!prod || prod.stock < item.qty) {\n                    failed = true;\n                    errMsg += `V\u1eadt t\u01b0 ${item.sku} kh\u00f4ng \u0111\u1ee7 s\u1ed1 l\u01b0\u1ee3ng \u0111\u1ec3 xu\u1ea5t (${item.qty} c\u00e1i). \\n`;\n                }\n            });\n\n            if (failed) {\n                customAlert(errMsg, \"T\u1ed3n kho kh\u00f4ng \u0111\u00e1p \u1ee9ng\", \"error\");\n                return;\n            }\n\n            const grandTotal = exportDraftItems.reduce((sum, i) => sum + i.subtotal, 0);\n            const autoApprove = currentUser.level === 1;\n\n            const newTx = {\n                id: generateUniqueId(),\n                code: code,\n                type: 'export',\n                status: autoApprove ? 'approved' : 'pending',\n                date: new Date().toISOString(),\n                creator: creator,\n                department: currentUser.level === 3 ? \"Thi c\u00f4ng\" : \"V\u1eadt t\u01b0\",\n                warehouse: warehouse,\n                note: note,\n                items: [...exportDraftItems],\n                total: grandTotal\n            };\n\n            transactions.push(newTx);\n\n            if (autoApprove) {\n                exportDraftItems.forEach(item => {\n                    const prod = products.find(p => p.sku === item.sku);\n                    if (prod) prod.stock -= item.qty;\n                });\n                showToast(`\u0110\u00e3 duy\u1ec7t th\u00e0nh c\u00f4ng phi\u1ebfu xu\u1ea5t ${code}!`);\n                openPrintPreview(newTx.id);\n            } else {\n                showToast(`Phi\u1ebfu xu\u1ea5t kho ${code} \u0111\u00e3 \u0111\u01b0\u1ee3c g\u1eedi l\u00ean Ban Gi\u00e1m \u0110\u1ed1c \u0111\u1ee3i ph\u00ea duy\u1ec7t!`);\n            }\n\n            clearExportForm();\n            generateExportCode();\n            refreshDashboard();\n        }\n\n        \/\/ --- 13. TRANSACTION APPROVAL & ARCHIVE MANAGEMENT ---\n        function buildPendingApprovalTable() {\n            const tbody = document.getElementById('pending-approval-tbody');\n            tbody.innerHTML = '';\n\n            if (currentUser.level !== 1) return;\n\n            const pendingList = transactions.filter(t => t.status === 'pending');\n            if (pendingList.length === 0) {\n                tbody.innerHTML = `<tr><td colspan=\"8\" class=\"text-center py-6 text-slate-400 font-semibold\">Kh\u00f4ng c\u00f3 phi\u1ebfu y\u00eau c\u1ea7u n\u00e0o \u0111ang ch\u1edd duy\u1ec7t.<\/td><\/tr>`;\n                return;\n            }\n\n            pendingList.forEach(t => {\n                const isImport = t.type === 'import';\n                const badge = isImport ? \n                    '<span class=\"bg-emerald-100 text-emerald-800 text-[9px] px-2.5 py-1 rounded-full font-bold uppercase\">Nh\u1eadp kho<\/span>' : \n                    '<span class=\"bg-red-100 text-red-800 text-[9px] px-2.5 py-1 rounded-full font-bold uppercase\">Xu\u1ea5t kho<\/span>';\n\n                tbody.innerHTML += `\n                    <tr class=\"hover:bg-slate-50 text-xs border-b border-slate-100\">\n                        <td class=\"py-3 px-5 font-bold text-amber-600\">${t.code}<\/td>\n                        <td class=\"py-3 px-5\">${badge}<\/td>\n                        <td class=\"py-3 px-5 font-bold text-indigo-700\">${t.warehouse || 'N\/A'}<\/td>\n                        <td class=\"py-3 px-5 text-slate-800 font-bold\">${t.creator}<\/td>\n                        <td class=\"py-3 px-5 text-slate-400\">${new Date(t.date).toLocaleString('vi-VN')}<\/td>\n                        <td class=\"py-3 px-5 text-slate-500 italic max-w-[140px] truncate\" title=\"${t.note}\">${t.note}<\/td>\n                        <td class=\"py-3 px-5 text-right font-black text-slate-900\">${formatVND(t.total)}<\/td>\n                        <td class=\"py-3 px-5 text-center space-x-2\">\n                            <button onclick=\"approveTransaction(${t.id})\" class=\"bg-emerald-600 hover:bg-emerald-700 text-white px-3 py-1.5 rounded-lg text-[10px] font-bold shadow transition\">Duy\u1ec7t<\/button>\n                            <button onclick=\"rejectTransaction(${t.id})\" class=\"bg-slate-200 hover:bg-red-100 hover:text-red-700 text-slate-600 px-3 py-1.5 rounded-lg text-[10px] font-semibold transition\">T\u1eeb Ch\u1ed1i<\/button>\n                        <\/td>\n                    <\/tr>\n                `;\n            });\n        }\n\n        function approveTransaction(id) {\n            const tx = transactions.find(t => t.id == id);\n            if (!tx) return;\n\n            if (tx.type === 'export') {\n                let checkFailed = false;\n                let checkErrMsg = \"\";\n                \n                tx.items.forEach(item => {\n                    const prod = products.find(p => p.sku === item.sku);\n                    if (!prod || prod.stock < item.qty) {\n                        checkFailed = true;\n                        checkErrMsg += `M\u00e3 ${item.sku} hi\u1ec7n t\u1ea1i ch\u1ec9 c\u00f2n ${prod ? prod.stock : 0} trong kho (Y\u00eau c\u1ea7u xu\u1ea5t ${item.qty} c\u00e1i).\\n`;\n                    }\n                });\n\n                if (checkFailed) {\n                    customAlert(\"Duy\u1ec7t phi\u1ebfu xu\u1ea5t kho th\u1ea5t b\u1ea1i v\u00ec h\u00e0ng h\u00f3a t\u1ed3n th\u1ef1c t\u1ebf kh\u00f4ng \u0111\u00e1p \u1ee9ng:\\n\" + checkErrMsg, \"Kh\u00f4ng \u0111\u1ee7 h\u00e0ng t\u1ed3n\", \"error\");\n                    return;\n                }\n\n                tx.items.forEach(item => {\n                    const prod = products.find(p => p.sku === item.sku);\n                    if (prod) prod.stock -= item.qty;\n                });\n            } else if (tx.type === 'import') {\n                tx.items.forEach(item => {\n                    const prod = products.find(p => p.sku === item.sku);\n                    if (prod) prod.stock += item.qty;\n                });\n            }\n\n            tx.status = 'approved';\n            tx.date = new Date().toISOString(); \n\n            showToast(`Ch\u1ee9ng t\u1eeb ${tx.code} \u0111\u00e3 \u0111\u01b0\u1ee3c Ban Gi\u00e1m \u0110\u1ed1c ph\u00ea duy\u1ec7t ch\u00ednh th\u1ee9c!`);\n            refreshDashboard();\n            buildPendingApprovalTable();\n            buildProductsTable();\n\n            openPrintPreview(tx.id);\n        }\n\n        function rejectTransaction(id) {\n            const tx = transactions.find(t => t.id == id);\n            if (!tx) return;\n\n            customConfirm(`B\u1ea1n c\u00f3 ch\u1eafc ch\u1eafn mu\u1ed1n B\u00c1C B\u1ece phi\u1ebfu ${tx.code}?`, function() {\n                transactions = transactions.filter(t => t.id != id);\n                showToast(`\u0110\u00e3 b\u00e1c b\u1ecf phi\u1ebfu ${tx.code}`, 'warning');\n                refreshDashboard();\n                buildPendingApprovalTable();\n            });\n        }\n\n        function buildTransactionsTable(filterSearch = '', filterType = '') {\n            const tbody = document.getElementById('txn-table-body');\n            tbody.innerHTML = '';\n\n            let filtered = transactions;\n\n            if (filterSearch) {\n                const s = filterSearch.toLowerCase();\n                filtered = filtered.filter(t => t.code.toLowerCase().includes(s) || t.creator.toLowerCase().includes(s));\n            }\n            if (filterType) {\n                filtered = filtered.filter(t => t.type === filterType);\n            }\n\n            const displayList = [...filtered].sort((a,b) => new Date(b.date) - new Date(a.date));\n\n            if (displayList.length === 0) {\n                tbody.innerHTML = `<tr><td colspan=\"9\" class=\"text-center py-6 text-slate-400 italic\">Kh\u00f4ng t\u00ecm th\u1ea5y ch\u1ee9ng t\u1eeb ph\u00f9 h\u1ee3p.<\/td><\/tr>`;\n                return;\n            }\n\n            displayList.forEach(t => {\n                const isApproved = t.status === 'approved';\n                const statusBadge = isApproved ? \n                    `<span class=\"bg-emerald-100 text-emerald-800 text-[9px] px-2 py-0.5 rounded-full font-bold\">\u0110\u00e3 Duy\u1ec7t<\/span>` : \n                    `<span class=\"bg-amber-100 text-amber-800 text-[9px] px-2 py-0.5 rounded-full font-bold animate-pulse\">Ch\u1edd Duy\u1ec7t<\/span>`;\n\n                const typeBadge = t.type === 'import' ? \n                    `<span class=\"bg-teal-50 text-teal-800 text-[9px] px-2 py-0.5 rounded font-bold uppercase\">Nh\u1eadp kho<\/span>` : \n                    `<span class=\"bg-red-50 text-red-800 text-[9px] px-2 py-0.5 rounded font-bold uppercase\">Xu\u1ea5t kho<\/span>`;\n\n                tbody.innerHTML += `\n                    <tr class=\"hover:bg-slate-50 text-xs border-b border-slate-100\">\n                        <td class=\"py-3 px-6 font-black text-slate-900\">${t.code}<\/td>\n                        <td class=\"py-3 px-6\">${typeBadge}<\/td>\n                        <td class=\"py-3 px-6 font-bold text-indigo-700\">${t.warehouse || 'N\/A'}<\/td>\n                        <td class=\"py-3 px-6\">${statusBadge}<\/td>\n                        <td class=\"py-3 px-6 text-slate-400\">${new Date(t.date).toLocaleString('vi-VN')}<\/td>\n                        <td class=\"py-3 px-6 font-semibold text-slate-800\">${t.creator}<\/td>\n                        <td class=\"py-3 px-6 text-right font-black text-slate-900\">${formatVND(t.total)}<\/td>\n                        <td class=\"py-3 px-6 text-slate-400 italic max-w-[130px] truncate\" title=\"${t.note}\">${t.note}<\/td>\n                        <td class=\"py-3 px-6 text-center\">\n                            <button onclick=\"openPrintPreview(${t.id})\" class=\"bg-slate-100 hover:bg-slate-200 text-slate-700 px-2.5 py-1 rounded-lg text-[10px] font-bold flex items-center justify-center mx-auto shadow-sm\">\n                                <i class=\"fa-solid fa-print mr-1\"><\/i> Xem \/ In\n                            <\/button>\n                        <\/td>\n                    <\/tr>\n                `;\n            });\n        }\n\n        function filterTransactions() {\n            const searchVal = document.getElementById('txn-search').value;\n            const typeVal = document.getElementById('txn-filter-type').value;\n            buildTransactionsTable(searchVal, typeVal);\n        }\n\n        \/\/ --- 14. DOCUMENT SLIP PRINT PREVIEW DRAWER ---\n        function openPrintPreview(id) {\n            const tx = transactions.find(t => t.id == id);\n            if (!tx) return;\n\n            const isImport = tx.type === 'import';\n\n            document.getElementById('print-slip-code-display').innerText = tx.code;\n            document.getElementById('print-slip-date').innerText = \"Th\u1eddi gian l\u1eadp: \" + new Date(tx.date).toLocaleString('vi-VN');\n            document.getElementById('print-sign-creator').innerText = tx.creator;\n            \n            if (isImport) {\n                document.getElementById('print-title-badge').className = \"bg-emerald-100 text-emerald-800 text-[10px] px-3 py-1 rounded font-black uppercase tracking-wider\";\n                document.getElementById('print-title-badge').innerText = \"Phi\u1ebfu Nh\u1eadp Kho\";\n                document.getElementById('print-main-title').innerText = \"PHI\u1ebeU NH\u1eacP KHO V\u1eacT T\u01af SOLAR\";\n\n                document.getElementById('print-meta-grid').innerHTML = `\n                    <div><span class=\"font-bold text-slate-500\">Ph\u00f2ng \u0111\u1ec1 xu\u1ea5t:<\/span> <span class=\"font-semibold text-slate-800\">${tx.department || \"V\u1eadt t\u01b0\"}<\/span><\/div>\n                    <div><span class=\"font-bold text-slate-500\">Ng\u01b0\u1eddi l\u1eadp phi\u1ebfu:<\/span> <span class=\"font-semibold text-slate-800\">${tx.creator}<\/span><\/div>\n                    <div><span class=\"font-bold text-slate-500\">Kho nh\u1eadn h\u00e0ng:<\/span> <span class=\"font-semibold text-slate-800 text-indigo-700\">${tx.warehouse || \"S\u00c0I G\u00d2N\"}<\/span><\/div>\n                    <div class=\"col-span-2\"><span class=\"font-bold text-slate-500\">Ghi ch\u00fa phi\u1ebfu:<\/span> <span class=\"italic text-slate-600\">${tx.note || \"N\/A\"}<\/span><\/div>\n                `;\n            } else {\n                document.getElementById('print-title-badge').className = \"bg-red-100 text-red-800 text-[10px] px-3 py-1 rounded font-black uppercase tracking-wider\";\n                document.getElementById('print-title-badge').innerText = \"Phi\u1ebfu Xu\u1ea5t Kho\";\n                document.getElementById('print-main-title').innerText = \"PHI\u1ebeU XU\u1ea4T KHO V\u00c0 B\u00c0N GIAO C\u00d4NG TR\u00ccNH\";\n\n                document.getElementById('print-meta-grid').innerHTML = `\n                    <div><span class=\"font-bold text-slate-500\">Ph\u00e2n h\u1ec7 \u0111\u1ec1 xu\u1ea5t:<\/span> <span class=\"font-semibold text-slate-800\">${tx.department || \"Thi c\u00f4ng\"}<\/span><\/div>\n                    <div><span class=\"font-bold text-slate-500\">K\u1ef9 thu\u1eadt b\u00e0n giao:<\/span> <span class=\"font-semibold text-slate-800\">${tx.creator}<\/span><\/div>\n                    <div><span class=\"font-bold text-slate-500\">Kho xu\u1ea5t h\u00e0ng:<\/span> <span class=\"font-semibold text-slate-800 text-indigo-700\">${tx.warehouse || \"S\u00c0I G\u00d2N\"}<\/span><\/div>\n                    <div class=\"col-span-2\"><span class=\"font-bold text-slate-500\">M\u1ee5c \u0111\u00edch b\u00e0n giao:<\/span> <span class=\"italic text-slate-600\">${tx.note || \"N\/A\"}<\/span><\/div>\n                `;\n            }\n\n            const tbody = document.getElementById('print-table-body');\n            tbody.innerHTML = '';\n            \n            tx.items.forEach((item, index) => {\n                const prod = products.find(p => p.sku === item.sku);\n                const unit = prod ? prod.unit : 'B\u1ed9';\n                const priceToDisplay = isImport ? item.priceWithVat : item.price; \n\n                tbody.innerHTML += `\n                    <tr class=\"text-xs\">\n                        <td class=\"border border-slate-400 p-2 text-center font-bold\">${index + 1}<\/td>\n                        <td class=\"border border-slate-400 p-2 font-mono font-bold text-slate-800\">${item.sku}<\/td>\n                        <td class=\"border border-slate-400 p-2 font-semibold\">${item.name}<\/td>\n                        <td class=\"border border-slate-400 p-2 text-center font-bold\">${unit}<\/td>\n                        <td class=\"border border-slate-400 p-2 text-center font-black text-slate-900\">${item.qty}<\/td>\n                        <td class=\"border border-slate-400 p-2 text-right\">${formatVND(priceToDisplay)}<\/td>\n                        <td class=\"border border-slate-400 p-2 text-right font-bold text-slate-900\">${formatVND(item.subtotal)}<\/td>\n                    <\/tr>\n                `;\n            });\n\n            document.getElementById('print-subtotal').innerText = formatVND(tx.total);\n            document.getElementById('print-grandtotal').innerText = formatVND(tx.total);\n\n            document.getElementById('print-modal').classList.remove('hidden');\n        }\n\n        function closePrintModal() {\n            document.getElementById('print-modal').classList.add('hidden');\n        }\n\n        \/\/ --- 15. PERIODIC REPORTS CONTROLLER ---\n        function toggleReportTimeSelectors() {\n            const type = document.getElementById('report-type').value;\n            const monthDiv = document.getElementById('sel-report-month');\n            const quarterDiv = document.getElementById('sel-report-quarter');\n\n            if (type === 'month') {\n                monthDiv.classList.remove('hidden');\n                quarterDiv.classList.add('hidden');\n            } else if (type === 'quarter') {\n                monthDiv.classList.add('hidden');\n                quarterDiv.classList.remove('hidden');\n            } else if (type === 'year') {\n                monthDiv.classList.add('hidden');\n                quarterDiv.classList.add('hidden');\n            }\n        }\n\n        function generatePeriodicReport() {\n            const category = document.getElementById('report-category').value;\n            const type = document.getElementById('report-type').value;\n            const year = parseInt(document.getElementById('report-year').value);\n\n            let filteredTx = [];\n            let timeLabel = \"\";\n\n            if (type === 'month') {\n                const month = parseInt(document.getElementById('report-month').value);\n                timeLabel = `Th\u00e1ng ${month} n\u0103m ${year}`;\n                filteredTx = transactions.filter(t => {\n                    const d = new Date(t.date);\n                    return t.status === 'approved' && d.getFullYear() === year && (d.getMonth() + 1) === month;\n                });\n            } else if (type === 'quarter') {\n                const quarter = parseInt(document.getElementById('report-quarter').value);\n                let months = [];\n                if (quarter === 1) months = [1, 2, 3];\n                else if (quarter === 2) months = [4, 5, 6];\n                else if (quarter === 3) months = [7, 8, 9];\n                else if (quarter === 4) months = [10, 11, 12];\n                timeLabel = `Qu\u00fd ${quarter} n\u0103m ${year}`;\n                filteredTx = transactions.filter(t => {\n                    const d = new Date(t.date);\n                    return t.status === 'approved' && d.getFullYear() === year && months.includes(d.getMonth() + 1);\n                });\n            } else if (type === 'year') {\n                timeLabel = `N\u0103m t\u00e0i ch\u00ednh ${year}`;\n                filteredTx = transactions.filter(t => {\n                    return t.status === 'approved' && new Date(t.date).getFullYear() === year;\n                });\n            }\n\n            const rTable = document.getElementById('report-main-table');\n            const reportCard = document.getElementById('generated-report-card');\n            const emptyState = document.getElementById('report-empty-state');\n\n            if (category === 'summary') {\n                document.getElementById('report-title-display').innerText = `B\u00c1O C\u00c1O T\u1ed4NG H\u1ee2P NH\u1eacP XU\u1ea4T T\u1ed2N KHO - ${timeLabel.toUpperCase()}`;\n                document.getElementById('report-stat-container').className = \"grid grid-cols-1 sm:grid-cols-3 gap-4\";\n                document.getElementById('report-stat-container').innerHTML = `\n                    <div class=\"bg-slate-50 p-4 rounded-xl border border-slate-200\/60\">\n                        <p class=\"text-[10px] text-slate-400 font-bold uppercase tracking-wider\">T\u1ed5ng nh\u1eadp ph\u00e1t sinh<\/p>\n                        <h4 id=\"rep-stat-qty-in\" class=\"text-lg font-black mt-1 text-emerald-600\">0<\/h4>\n                    <\/div>\n                    <div class=\"bg-slate-50 p-4 rounded-xl border border-slate-200\/60\">\n                        <p class=\"text-[10px] text-slate-400 font-bold uppercase tracking-wider\">T\u1ed5ng xu\u1ea5t ph\u00e1t sinh<\/p>\n                        <h4 id=\"rep-stat-qty-out\" class=\"text-lg font-black mt-1 text-red-600\">0<\/h4>\n                    <\/div>\n                    <div class=\"bg-slate-50 p-4 rounded-xl border border-slate-200\/60\">\n                        <p class=\"text-[10px] text-slate-400 font-bold uppercase tracking-wider\">Gi\u00e1 tr\u1ecb lu\u00e2n chuy\u1ec3n r\u00f2ng<\/p>\n                        <h4 id=\"rep-stat-val-flow\" class=\"text-lg font-black mt-1 text-slate-900\">0\u0111<\/h4>\n                    <\/div>\n                `;\n\n                const reportRows = products.map(prod => {\n                    let qtyIn = 0;\n                    let valIn = 0;\n                    let qtyOut = 0;\n                    let valOut = 0;\n\n                    filteredTx.forEach(tx => {\n                        const item = tx.items.find(i => i.sku === prod.sku);\n                        if (item) {\n                            if (tx.type === 'import') {\n                                qtyIn += item.qty;\n                                valIn += item.subtotal;\n                            } else if (tx.type === 'export') {\n                                qtyOut += item.qty;\n                                valOut += item.subtotal;\n                            }\n                        }\n                    });\n\n                    const endStock = prod.stock;\n                    const startStock = Math.max(0, endStock - qtyIn + qtyOut);\n                    const avgPrice = getWeightedAveragePrice(prod.sku);\n\n                    const startVal = startStock * avgPrice;\n                    const endVal = endStock * avgPrice;\n\n                    return {\n                        sku: prod.sku,\n                        name: prod.name,\n                        unit: prod.unit,\n                        warehouse: \"KHO T\u1ed4NG\",\n                        brand: prod.brand || \"Canadian Solar\",\n                        ncc: prod.ncc || \"N\u1ed9i b\u1ed9\",\n                        avgPrice: avgPrice,\n                        startStock,\n                        startVal,\n                        qtyIn,\n                        valIn,\n                        qtyOut,\n                        valOut,\n                        endStock,\n                        endVal\n                    };\n                });\n\n                rTable.innerHTML = `\n                    <thead>\n                        <tr class=\"bg-slate-100 text-slate-800 font-bold border-b border-slate-300\">\n                            <th class=\"border border-slate-300 p-2 text-center\" rowspan=\"2\">STT<\/th>\n                            <th class=\"border border-slate-300 p-2\" rowspan=\"2\">T\u00caN S\u1ea2N PH\u1ea8M THI\u1ebeT B\u1eca<\/th>\n                            <th class=\"border border-slate-300 p-2 text-center\" rowspan=\"2\">\u0110VT<\/th>\n                            <th class=\"border border-slate-300 p-2\" rowspan=\"2\">H\u00c3NG<\/th>\n                            <th class=\"border border-slate-300 p-2 font-mono text-center\" rowspan=\"2\">SKU<\/th>\n                            <th class=\"border border-slate-300 p-2 text-center\" colspan=\"2\">T\u1ed2N \u0110\u1ea6U K\u1ef2<\/th>\n                            <th class=\"border border-slate-300 p-2 text-center bg-emerald-50\/50 text-emerald-800\" colspan=\"2\">NH\u1eacP TRONG K\u1ef2<\/th>\n                            <th class=\"border border-slate-300 p-2 text-center bg-red-50\/50 text-red-800\" colspan=\"2\">XU\u1ea4T TRONG K\u1ef2<\/th>\n                            <th class=\"border border-slate-300 p-2 text-center\" colspan=\"2\">T\u1ed2N CU\u1ed0I K\u1ef2<\/th>\n                        <\/tr>\n                        <tr class=\"bg-slate-50 text-slate-700 font-bold text-[10px]\">\n                            <th class=\"border border-slate-300 p-1 text-center\">SL<\/th>\n                            <th class=\"border border-slate-300 p-1 text-right\">GI\u00c1 TR\u1eca<\/th>\n                            <th class=\"border border-slate-300 p-1 text-center bg-emerald-50\/50\">SL<\/th>\n                            <th class=\"border border-slate-300 p-1 text-right bg-emerald-50\/50\">GI\u00c1 TR\u1eca<\/th>\n                            <th class=\"border border-slate-300 p-1 text-center bg-red-50\/50\">SL<\/th>\n                            <th class=\"border border-slate-300 p-1 text-right bg-red-50\/50\">GI\u00c1 TR\u1eca<\/th>\n                            <th class=\"border border-slate-300 p-1 text-center\">SL<\/th>\n                            <th class=\"border border-slate-300 p-1 text-right\">GI\u00c1 TR\u1eca<\/th>\n                        <\/tr>\n                    <\/thead>\n                    <tbody id=\"report-tbody\"><\/tbody>\n                `;\n\n                const tbody = document.getElementById('report-tbody');\n                let sumStartQty = 0, sumStartVal = 0, sumInQty = 0, sumInVal = 0, sumOutQty = 0, sumOutVal = 0, sumEndQty = 0, sumEndVal = 0;\n\n                reportRows.forEach((r, idx) => {\n                    sumStartQty += r.startStock;\n                    sumStartVal += r.startVal;\n                    sumInQty += r.qtyIn;\n                    sumInVal += r.valIn;\n                    sumOutQty += r.qtyOut;\n                    sumOutVal += r.valOut;\n                    sumEndQty += r.endStock;\n                    sumEndVal += r.endVal;\n\n                    tbody.innerHTML += `\n                        <tr class=\"hover:bg-slate-50 border-b border-slate-200\">\n                            <td class=\"border border-slate-300 p-2 text-center font-bold\">${idx + 1}<\/td>\n                            <td class=\"border border-slate-300 p-2 font-bold text-slate-800\">${r.name}<\/td>\n                            <td class=\"border border-slate-300 p-2 text-center\">${r.unit}<\/td>\n                            <td class=\"border border-slate-300 p-2\">${r.brand}<\/td>\n                            <td class=\"border border-slate-300 p-2 font-mono text-center font-semibold text-slate-600\">${r.sku}<\/td>\n                            \n                            <td class=\"border border-slate-300 p-1 text-center\">${r.startStock}<\/td>\n                            <td class=\"border border-slate-300 p-1 text-right text-slate-600\">${formatVND(r.startVal)}<\/td>\n                            \n                            <td class=\"border border-slate-300 p-1 text-center bg-emerald-50\/30 text-emerald-800 font-bold\">${r.qtyIn > 0 ? '+' + r.qtyIn : '0'}<\/td>\n                            <td class=\"border border-slate-300 p-1 text-right bg-emerald-50\/30 text-emerald-800 font-semibold\">${formatVND(r.valIn)}<\/td>\n                            \n                            <td class=\"border border-slate-300 p-1 text-center bg-red-50\/30 text-red-800 font-bold\">${r.qtyOut > 0 ? '-' + r.qtyOut : '0'}<\/td>\n                            <td class=\"border border-slate-300 p-1 text-right bg-red-50\/30 text-red-800 font-semibold\">${formatVND(r.valOut)}<\/td>\n                            \n                            <td class=\"border border-slate-300 p-1 text-center font-bold text-slate-900\">${r.endStock}<\/td>\n                            <td class=\"border border-slate-300 p-1 text-right font-black text-slate-900\">${formatVND(r.endVal)}<\/td>\n                        <\/tr>\n                    `;\n                });\n\n                tbody.innerHTML += `\n                    <tr class=\"bg-slate-100 font-bold border-t-2 border-slate-800 border-b-4 border-double\">\n                        <td class=\"border border-slate-300 p-2 text-center\" colspan=\"5\">T\u1ed4NG C\u1ed8NG<\/td>\n                        <td class=\"border border-slate-300 p-1 text-center font-bold\">${sumStartQty}<\/td>\n                        <td class=\"border border-slate-300 p-1 text-right font-black\">${formatVND(sumStartVal)}<\/td>\n                        <td class=\"border border-slate-300 p-1 text-center bg-emerald-50 text-emerald-900 font-bold\">${sumInQty}<\/td>\n                        <td class=\"border border-slate-300 p-1 text-right bg-emerald-50 text-emerald-900 font-black\">${formatVND(sumInVal)}<\/td>\n                        <td class=\"border border-slate-300 p-1 text-center bg-red-50 text-red-900 font-bold\">${sumOutQty}<\/td>\n                        <td class=\"border border-slate-300 p-1 text-right bg-red-50 text-red-900 font-black\">${formatVND(sumOutVal)}<\/td>\n                        <td class=\"border border-slate-300 p-1 text-center font-bold\">${sumEndQty}<\/td>\n                        <td class=\"border border-slate-300 p-1 text-right font-black text-red-600\">${formatVND(sumEndVal)}<\/td>\n                    <\/tr>\n                `;\n\n                document.getElementById('rep-stat-qty-in').innerText = sumInQty;\n                document.getElementById('rep-stat-qty-out').innerText = sumOutQty;\n                const netValue = sumInVal - sumOutVal;\n                document.getElementById('rep-stat-val-flow').innerText = (netValue >= 0 ? '+' : '') + formatVND(netValue);\n                document.getElementById('rep-stat-val-flow').className = netValue >= 0 ? \"text-lg font-black mt-1 text-emerald-600\" : \"text-lg font-black mt-1 text-red-600\";\n\n            } else if (category === 'import') {\n                document.getElementById('report-title-display').innerText = `B\u00c1O C\u00c1O CHI TI\u1ebeT NH\u1eacP KHO V\u1eacT T\u01af - ${timeLabel.toUpperCase()}`;\n                document.getElementById('report-stat-container').className = \"grid grid-cols-1 sm:grid-cols-2 gap-4\";\n                document.getElementById('report-stat-container').innerHTML = `\n                    <div class=\"bg-slate-50 p-4 rounded-xl border border-slate-200\/60\">\n                        <p class=\"text-[10px] text-slate-400 font-bold uppercase tracking-wider\">T\u1ed5ng kh\u1ed1i l\u01b0\u1ee3ng thi\u1ebft b\u1ecb nh\u1eadp<\/p>\n                        <h4 id=\"rep-stat-import-qty\" class=\"text-lg font-black mt-1 text-emerald-600\">0<\/h4>\n                    <\/div>\n                    <div class=\"bg-slate-50 p-4 rounded-xl border border-slate-200\/60\">\n                        <p class=\"text-[10px] text-slate-400 font-bold uppercase tracking-wider\">T\u1ed5ng tr\u1ecb gi\u00e1 nh\u1eadp kho \u0111\u00e3 VAT<\/p>\n                        <h4 id=\"rep-stat-import-val\" class=\"text-lg font-black mt-1 text-slate-900\">0\u0111<\/h4>\n                    <\/div>\n                `;\n\n                rTable.innerHTML = `\n                    <thead>\n                        <tr class=\"bg-slate-100 text-slate-800 font-bold border-b border-slate-300\">\n                            <th class=\"border border-slate-300 p-2 text-center\">STT<\/th>\n                            <th class=\"border border-slate-300 p-2\">M\u00e3 Phi\u1ebfu<\/th>\n                            <th class=\"border border-slate-300 p-2\">Ng\u00e0y Nh\u1eadp<\/th>\n                            <th class=\"border border-slate-300 p-2 font-mono text-center\">SKU<\/th>\n                            <th class=\"border border-slate-300 p-2\">T\u00ean s\u1ea3n ph\u1ea9m thi\u1ebft b\u1ecb<\/th>\n                            <th class=\"border border-slate-300 p-2 text-center\">\u0110VT<\/th>\n                            <th class=\"border border-slate-300 p-2\">Kho nh\u1eadn<\/th>\n                            <th class=\"border border-slate-300 p-2 text-center\">SL<\/th>\n                            <th class=\"border border-slate-300 p-2 text-right\">\u0110\u01a1n gi\u00e1 (+VAT)<\/th>\n                            <th class=\"border border-slate-300 p-2 text-right\">Th\u00e0nh ti\u1ec1n (+VAT)<\/th>\n                        <\/tr>\n                    <\/thead>\n                    <tbody id=\"report-tbody\"><\/tbody>\n                `;\n\n                const tbody = document.getElementById('report-tbody');\n                const importSlips = filteredTx.filter(t => t.type === 'import');\n                \n                let sumQty = 0, sumVal = 0, count = 1;\n\n                importSlips.forEach(tx => {\n                    tx.items.forEach(item => {\n                        sumQty += item.qty;\n                        sumVal += item.subtotal;\n\n                        tbody.innerHTML += `\n                            <tr class=\"hover:bg-slate-50 border-b border-slate-100\">\n                                <td class=\"border border-slate-300 p-2 text-center\">${count++}<\/td>\n                                <td class=\"border border-slate-300 p-2 font-bold text-amber-600\">${tx.code}<\/td>\n                                <td class=\"border border-slate-300 p-2 text-slate-400\">${new Date(tx.date).toLocaleDateString('vi-VN')}<\/td>\n                                <td class=\"border border-slate-300 p-2 font-mono text-center font-bold text-slate-500\">${item.sku}<\/td>\n                                <td class=\"border border-slate-300 p-2 font-bold text-slate-800\">${item.name}<\/td>\n                                <td class=\"border border-slate-300 p-2 text-center\">${products.find(p => p.sku === item.sku)?.unit || \"B\u1ed9\"}<\/td>\n                                <td class=\"border border-slate-300 p-2 text-center font-bold text-indigo-700\">${tx.warehouse || 'N\/A'}<\/td>\n                                <td class=\"border border-slate-300 p-2 text-center font-bold\">${item.qty}<\/td>\n                                <td class=\"border border-slate-300 p-2 text-right\">${formatVND(item.priceWithVat)}<\/td>\n                                <td class=\"border border-slate-300 p-2 text-right font-black text-emerald-600\">${formatVND(item.subtotal)}<\/td>\n                            <\/tr>\n                        `;\n                    });\n                });\n\n                tbody.innerHTML += `\n                    <tr class=\"bg-slate-100 font-bold border-t-2 border-slate-800 border-b-4 border-double\">\n                        <td class=\"border border-slate-300 p-2 text-center\" colspan=\"7\">T\u1ed4NG C\u1ed8NG PH\u00c1T SINH NH\u1eacP KHO<\/td>\n                        <td class=\"border border-slate-300 p-2 text-center font-black\">${sumQty}<\/td>\n                        <td class=\"border border-slate-300 p-2\"><\/td>\n                        <td class=\"border border-slate-300 p-2 text-right font-black text-red-600\">${formatVND(sumVal)}<\/td>\n                    <\/tr>\n                `;\n\n                document.getElementById('rep-stat-import-qty').innerText = sumQty;\n                document.getElementById('rep-stat-import-val').innerText = formatVND(sumVal);\n\n            } else if (category === 'export') {\n                document.getElementById('report-title-display').innerText = `B\u00c1O C\u00c1O CHI TI\u1ebeT XU\u1ea4T KHO V\u1eacT T\u01af - ${timeLabel.toUpperCase()}`;\n                document.getElementById('report-stat-container').className = \"grid grid-cols-1 sm:grid-cols-2 gap-4\";\n                document.getElementById('report-stat-container').innerHTML = `\n                    <div class=\"bg-slate-50 p-4 rounded-xl border border-slate-200\/60\">\n                        <p class=\"text-[10px] text-slate-400 font-bold uppercase tracking-wider\">T\u1ed5ng kh\u1ed1i l\u01b0\u1ee3ng xu\u1ea5t thi c\u00f4ng<\/p>\n                        <h4 id=\"rep-stat-export-qty\" class=\"text-lg font-black mt-1 text-red-600\">0<\/h4>\n                    <\/div>\n                    <div class=\"bg-slate-50 p-4 rounded-xl border border-slate-200\/60\">\n                        <p class=\"text-[10px] text-slate-400 font-bold uppercase tracking-wider\">T\u1ed5ng tr\u1ecb gi\u00e1 v\u1ed1n h\u00e0ng xu\u1ea5t (FIFO)<\/p>\n                        <h4 id=\"rep-stat-export-val\" class=\"text-lg font-black mt-1 text-slate-900\">0\u0111<\/h4>\n                    <\/div>\n                `;\n\n                rTable.innerHTML = `\n                    <thead>\n                        <tr class=\"bg-slate-100 text-slate-800 font-bold border-b border-slate-300\">\n                            <th class=\"border border-slate-300 p-2 text-center\">STT<\/th>\n                            <th class=\"border border-slate-300 p-2\">M\u00e3 Phi\u1ebfu<\/th>\n                            <th class=\"border border-slate-300 p-2\">Ng\u00e0y Xu\u1ea5t<\/th>\n                            <th class=\"border border-slate-300 p-2 font-mono text-center\">SKU<\/th>\n                            <th class=\"border border-slate-300 p-2\">T\u00ean s\u1ea3n ph\u1ea9m thi\u1ebft b\u1ecb<\/th>\n                            <th class=\"border border-slate-300 p-2 text-center\">\u0110VT<\/th>\n                            <th class=\"border border-slate-300 p-2\">Kho xu\u1ea5t<\/th>\n                            <th class=\"border border-slate-300 p-2 text-center\">SL<\/th>\n                            <th class=\"border border-slate-300 p-2 text-right\">\u0110\u01a1n gi\u00e1 v\u1ed1n<\/th>\n                            <th class=\"border border-slate-300 p-2 text-right\">Gi\u00e1 tr\u1ecb xu\u1ea5t<\/th>\n                        <\/tr>\n                    <\/thead>\n                    <tbody id=\"report-tbody\"><\/tbody>\n                `;\n\n                const tbody = document.getElementById('report-tbody');\n                const exportSlips = filteredTx.filter(t => t.type === 'export');\n                \n                let sumQty = 0, sumVal = 0, count = 1;\n\n                exportSlips.forEach(tx => {\n                    tx.items.forEach(item => {\n                        sumQty += item.qty;\n                        sumVal += item.subtotal;\n\n                        tbody.innerHTML += `\n                            <tr class=\"hover:bg-slate-50 border-b border-slate-100\">\n                                <td class=\"border border-slate-300 p-2 text-center\">${count++}<\/td>\n                                <td class=\"border border-slate-300 p-2 font-bold text-red-600\">${tx.code}<\/td>\n                                <td class=\"border border-slate-300 p-2 text-slate-400\">${new Date(tx.date).toLocaleDateString('vi-VN')}<\/td>\n                                <td class=\"border border-slate-300 p-2 font-mono text-center font-bold text-slate-500\">${item.sku}<\/td>\n                                <td class=\"border border-slate-300 p-2 font-bold text-slate-800\">${item.name}<\/td>\n                                <td class=\"border border-slate-300 p-2 text-center\">${products.find(p => p.sku === item.sku)?.unit || \"B\u1ed9\"}<\/td>\n                                <td class=\"border border-slate-300 p-2 text-center font-bold text-indigo-700\">${tx.warehouse || 'N\/A'}<\/td>\n                                <td class=\"border border-slate-300 p-2 text-center font-bold\">${item.qty}<\/td>\n                                <td class=\"border border-slate-300 p-2 text-right\">${formatVND(item.price)}<\/td>\n                                <td class=\"border border-slate-300 p-2 text-right font-black text-red-600\">${formatVND(item.subtotal)}<\/td>\n                            <\/tr>\n                        `;\n                    });\n                });\n\n                tbody.innerHTML += `\n                    <tr class=\"bg-slate-100 font-bold border-t-2 border-slate-800 border-b-4 border-double\">\n                        <td class=\"border border-slate-300 p-2 text-center\" colspan=\"7\">T\u1ed4NG C\u1ed8NG PH\u00c1T SINH XU\u1ea4T KHO<\/td>\n                        <td class=\"border border-slate-300 p-2 text-center font-black\">${sumQty}<\/td>\n                        <td class=\"border border-slate-300 p-2 text-right\"><\/td>\n                        <td class=\"border border-slate-300 p-2 text-right font-black text-red-600\">${formatVND(sumVal)}<\/td>\n                    <\/tr>\n                `;\n\n                document.getElementById('rep-stat-export-qty').innerText = sumQty;\n                document.getElementById('rep-stat-export-val').innerText = formatVND(sumVal);\n            }\n\n            document.getElementById('report-time-display').innerText = `K\u1ef3 b\u00e1o c\u00e1o: ${timeLabel} | Xu\u1ea5t l\u00fac: ${new Date().toLocaleString('vi-VN')}`;\n            reportCard.classList.remove('hidden');\n            emptyState.classList.add('hidden');\n            showToast(\"\u0110\u00e3 t\u1ed5ng h\u1ee3p b\u00e1o c\u00e1o th\u00e0nh c\u00f4ng!\");\n        }\n\n        function printGeneratedReport() {\n            const reportHtml = document.getElementById('generated-report-card').innerHTML;\n            const backupContent = document.getElementById('print-section').innerHTML;\n\n            document.getElementById('print-section').innerHTML = `\n                <div class=\"text-center mb-6 border-b pb-4\">\n                    <h1 class=\"text-lg font-black uppercase\">C\u00d4NG TY C\u1ed4 PH\u1ea6N H\u00d9NG C\u01af\u1edcNG SOLAR<\/h1>\n                    <p class=\"text-[9px] text-slate-500\">Ph\u00f2ng k\u1ebf to\u00e1n v\u1eadt t\u01b0 - B\u00e1o c\u00e1o lu\u00e2n chuy\u1ec3n n\u1ed9i b\u1ed9<\/p>\n                <\/div>\n                ${reportHtml}\n                <div class=\"grid grid-cols-2 text-center text-[10px] mt-12 gap-4\">\n                    <div>\n                        <p class=\"font-bold\">Ng\u01b0\u1eddi l\u1eadp b\u00e1o c\u00e1o<\/p>\n                        <p class=\"text-[9px] text-slate-400\">(K\u00fd, ghi r\u00f5 h\u1ecd t\u00ean)<\/p>\n                        <div class=\"h-16\"><\/div>\n                        <p class=\"font-bold text-slate-900\">${currentUser.fullname}<\/p>\n                    <\/div>\n                    <div>\n                        <p class=\"font-bold\">Ban Gi\u00e1m \u0110\u1ed1c Ph\u00ea Duy\u1ec7t<\/p>\n                        <p class=\"text-[9px] text-slate-400\">(K\u00fd, \u0111\u00f3ng d\u1ea5u)<\/p>\n                        <div class=\"h-16\"><\/div>\n                        <p class=\"font-bold text-slate-900\">Kim Gi\u1edd Admin<\/p>\n                    <\/div>\n                <\/div>\n            `;\n\n            const insideBtn = document.getElementById('print-section').querySelector('button');\n            if (insideBtn) insideBtn.remove();\n\n            document.getElementById('print-modal').classList.remove('hidden');\n\n            window.addEventListener('afterprint', function() {\n                document.getElementById('print-section').innerHTML = backupContent;\n            }, { once: true });\n        }\n\n        \/\/ --- 16. WAREHOUSE MANAGEMENT CONTROLLERS ---\n        function buildWarehousesTable() {\n            const tbody = document.getElementById('warehouses-table-body');\n            if (!tbody) return;\n            tbody.innerHTML = '';\n            warehouses.forEach(w => {\n                const statusBadge = w.status === 'active' ? \n                    `<span class=\"bg-green-100 text-green-800 text-[10px] px-2 py-0.5 rounded-full font-bold\">Ho\u1ea1t \u0111\u1ed9ng<\/span>` :\n                    `<span class=\"bg-slate-100 text-slate-800 text-[10px] px-2 py-0.5 rounded-full font-bold\">Ng\u1eebng ho\u1ea1t \u0111\u1ed9ng<\/span>`;\n\n                tbody.innerHTML += `\n                    <tr class=\"hover:bg-slate-50 text-xs border-b border-slate-100\">\n                        <td class=\"py-2.5 px-5 font-mono font-bold text-slate-800\">${w.code}<\/td>\n                        <td class=\"py-2.5 px-5 font-bold text-indigo-700 text-sm\">${w.name}<\/td>\n                        <td class=\"py-2.5 px-5 font-medium text-slate-600\">${w.address}<\/td>\n                        <td class=\"py-2.5 px-5 font-bold text-slate-800\">${w.contact}<\/td>\n                        <td class=\"py-2.5 px-5 text-center\">${statusBadge}<\/td>\n                        <td class=\"py-2.5 px-5 text-center space-x-1\">\n                            <button onclick=\"editWarehouse(${w.id})\" class=\"text-blue-500 hover:text-blue-700 bg-blue-50 p-1.5 rounded-lg\"><i class=\"fa-solid fa-pen\"><\/i><\/button>\n                            <button onclick=\"deleteWarehouse(${w.id})\" class=\"text-red-500 hover:text-red-700 bg-red-50 p-1.5 rounded-lg\"><i class=\"fa-solid fa-trash\"><\/i><\/button>\n                        <\/td>\n                    <\/tr>\n                `;\n            });\n        }\n\n        function openWarehouseModal() {\n            document.getElementById('warehouse-modal-title').innerText = \"Th\u00eam kho ch\u1ee9a h\u00e0ng m\u1edbi\";\n            document.getElementById('modal-warehouse-id').value = \"\";\n            document.getElementById('modal-warehouse-code').value = \"\";\n            document.getElementById('modal-warehouse-name').value = \"\";\n            document.getElementById('modal-warehouse-address').value = \"\";\n            document.getElementById('modal-warehouse-contact').value = \"\";\n            document.getElementById('warehouse-modal').classList.remove('hidden');\n        }\n\n        function closeWarehouseModal() {\n            document.getElementById('warehouse-modal').classList.add('hidden');\n        }\n\n        function saveWarehouse() {\n            const idVal = document.getElementById('modal-warehouse-id').value;\n            const code = document.getElementById('modal-warehouse-code').value.trim().toUpperCase();\n            const name = document.getElementById('modal-warehouse-name').value.trim();\n            const address = document.getElementById('modal-warehouse-address').value.trim();\n            const contact = document.getElementById('modal-warehouse-contact').value.trim();\n\n            if (!code || !name || !address || !contact) {\n                customAlert(\"Vui l\u00f2ng nh\u1eadp \u0111\u1ea7y \u0111\u1ee7 c\u00e1c tr\u01b0\u1eddng th\u00f4ng tin kho h\u00e0ng!\", \"Thi\u1ebfu th\u00f4ng tin\", \"error\");\n                return;\n            }\n\n            if (idVal === \"\") {\n                if (warehouses.some(w => w.code === code)) {\n                    customAlert(\"M\u00e3 kho n\u00e0y \u0111\u00e3 t\u1ed3n t\u1ea1i!\", \"Tr\u00f9ng m\u00e3 kho\", \"error\");\n                    return;\n                }\n                warehouses.push({\n                    id: generateUniqueId(),\n                    code, name, address, contact, status: 'active'\n                });\n                showToast(`\u0110\u00e3 th\u00eam m\u1edbi kho ${name} th\u00e0nh c\u00f4ng!`);\n            } else {\n                const w = warehouses.find(wh => wh.id == idVal);\n                if (w) {\n                    w.code = code;\n                    w.name = name;\n                    w.address = address;\n                    w.contact = contact;\n                    showToast(`C\u1eadp nh\u1eadt th\u00f4ng tin kho ${name} th\u00e0nh c\u00f4ng!`);\n                }\n            }\n\n            closeWarehouseModal();\n            buildWarehousesTable();\n            populateWarehouseDropdowns(); \/\/ Rebuild select options in real-time!\n        }\n\n        function editWarehouse(id) {\n            const w = warehouses.find(wh => wh.id == id);\n            if (w) {\n                document.getElementById('warehouse-modal-title').innerText = \"Ch\u1ec9nh s\u1eeda kho \" + w.code;\n                document.getElementById('modal-warehouse-id').value = w.id;\n                document.getElementById('modal-warehouse-code').value = w.code;\n                document.getElementById('modal-warehouse-name').value = w.name;\n                document.getElementById('modal-warehouse-address').value = w.address;\n                document.getElementById('modal-warehouse-contact').value = w.contact;\n                document.getElementById('warehouse-modal').classList.remove('hidden');\n            }\n        }\n\n        function deleteWarehouse(id) {\n            const w = warehouses.find(wh => wh.id == id);\n            if (w) {\n                customConfirm(`B\u1ea1n c\u00f3 ch\u1eafc ch\u1eafn mu\u1ed1n x\u00f3a kho ${w.name}? C\u00e1c d\u1eef li\u1ec7u c\u0169 c\u00f3 li\u00ean quan s\u1ebd t\u1ea1m gi\u1eef t\u00ean c\u0169.`, function() {\n                    warehouses = warehouses.filter(wh => wh.id != id);\n                    showToast(`\u0110\u00e3 x\u00f3a kho ${w.code}!`, 'warning');\n                    buildWarehousesTable();\n                    populateWarehouseDropdowns();\n                });\n            }\n        }\n\n        \/\/ --- 17. SUPPLIER & BRANDS & USER TABLES BUILDERS ---\n        function buildSuppliersTable() {\n            const tbody = document.getElementById('suppliers-table-body');\n            tbody.innerHTML = '';\n            suppliers.forEach(s => {\n                tbody.innerHTML += `\n                    <tr class=\"hover:bg-slate-50 text-xs border-b border-slate-100\">\n                        <td class=\"py-2 px-5 font-bold text-slate-900\">${s.code}<\/td>\n                        <td class=\"py-2 px-5 font-bold text-teal-800\">${s.companyName}<\/td>\n                        <td class=\"py-2 px-5 font-mono text-slate-500\">${s.taxCode}<\/td>\n                        <td class=\"py-2 px-5 font-semibold\">${s.contactName}<\/td>\n                        <td class=\"py-2 px-5\">${s.phone}<\/td>\n                        <td class=\"py-2 px-5 text-slate-500\">${s.email}<\/td>\n                        <td class=\"py-2 px-5 text-slate-400 truncate max-w-[120px]\" title=\"${s.address}\">${s.address}<\/td>\n                        <td class=\"py-2 px-5 text-center\">\n                            <button onclick=\"editSupplier(${s.id})\" class=\"text-blue-500 hover:text-blue-700 mx-1\"><i class=\"fa-solid fa-pen\"><\/i><\/button>\n                            <button onclick=\"deleteSupplier(${s.id})\" class=\"text-red-500 hover:text-red-700 mx-1\"><i class=\"fa-solid fa-trash\"><\/i><\/button>\n                        <\/td>\n                    <\/tr>\n                `;\n            });\n        }\n\n        function openSupplierModal() {\n            document.getElementById('supplier-modal-title').innerText = \"Th\u00eam nh\u00e0 cung c\u1ea5p m\u1edbi\";\n            document.getElementById('modal-supplier-id').value = \"\";\n            document.getElementById('modal-supplier-code').value = \"\";\n            document.getElementById('modal-supplier-tax').value = \"\";\n            document.getElementById('modal-supplier-company').value = \"\";\n            document.getElementById('modal-supplier-contact').value = \"\";\n            document.getElementById('modal-supplier-phone').value = \"\";\n            document.getElementById('modal-supplier-email').value = \"\";\n            document.getElementById('modal-supplier-address').value = \"\";\n            document.getElementById('supplier-modal').classList.remove('hidden');\n        }\n\n        function closeSupplierModal() {\n            document.getElementById('supplier-modal').classList.add('hidden');\n        }\n\n        function saveSupplier() {\n            const idVal = document.getElementById('modal-supplier-id').value;\n            const code = document.getElementById('modal-supplier-code').value.trim().toUpperCase();\n            const taxCode = document.getElementById('modal-supplier-tax').value.trim();\n            const companyName = document.getElementById('modal-supplier-company').value.trim();\n            const contactName = document.getElementById('modal-supplier-contact').value.trim();\n            const phone = document.getElementById('modal-supplier-phone').value.trim();\n            const email = document.getElementById('modal-supplier-email').value.trim();\n            const address = document.getElementById('modal-supplier-address').value.trim();\n\n            if (!code || !taxCode || !companyName || !contactName || !phone) {\n                customAlert(\"Vui l\u00f2ng \u0111i\u1ec1n \u0111\u1ea7y \u0111\u1ee7 c\u00e1c th\u00f4ng tin b\u1eaft bu\u1ed9c!\", \"Thi\u1ebfu th\u00f4ng tin\", \"error\");\n                return;\n            }\n\n            if (idVal === \"\") {\n                if (suppliers.some(s => s.code === code)) {\n                    customAlert(\"M\u00e3 \u0111\u1ed1i t\u00e1c n\u00e0y \u0111\u00e3 t\u1ed3n t\u1ea1i!\", \"Tr\u00f9ng m\u00e3\", \"error\");\n                    return;\n                }\n                suppliers.push({\n                    id: generateUniqueId(),\n                    code, taxCode, companyName, contactName, phone, email, address\n                });\n                showToast(\"Th\u00eam m\u1edbi nh\u00e0 cung c\u1ea5p th\u00e0nh c\u00f4ng!\");\n            } else {\n                const s = suppliers.find(sup => sup.id == idVal);\n                if (s) {\n                    const oldName = s.companyName;\n                    s.taxCode = taxCode;\n                    s.companyName = companyName;\n                    s.contactName = contactName;\n                    s.phone = phone;\n                    s.email = email;\n                    s.address = address;\n\n                    products.forEach(p => {\n                        if (p.ncc === oldName) p.ncc = companyName;\n                    });\n\n                    showToast(\"C\u1eadp nh\u1eadt th\u00f4ng tin NCC th\u00e0nh c\u00f4ng!\");\n                }\n            }\n\n            closeSupplierModal();\n            buildSuppliersTable();\n            populateSupplierDropdown();\n            buildProductsTable();\n        }\n\n        function editSupplier(id) {\n            const s = suppliers.find(sup => sup.id == id);\n            if (s) {\n                document.getElementById('supplier-modal-title').innerText = \"Ch\u1ec9nh s\u1eeda th\u00f4ng tin NCC \" + s.code;\n                document.getElementById('modal-supplier-id').value = s.id;\n                document.getElementById('modal-supplier-code').value = s.code;\n                document.getElementById('modal-supplier-tax').value = s.taxCode;\n                document.getElementById('modal-supplier-company').value = s.companyName;\n                document.getElementById('modal-supplier-contact').value = s.contactName;\n                document.getElementById('modal-supplier-phone').value = s.phone;\n                document.getElementById('modal-supplier-email').value = s.email;\n                document.getElementById('modal-supplier-address').value = s.address;\n                document.getElementById('supplier-modal').classList.remove('hidden');\n            }\n        }\n\n        function deleteSupplier(id) {\n            const s = suppliers.find(sup => sup.id == id);\n            if (s) {\n                customConfirm(`B\u1ea1n c\u00f3 ch\u1eafc ch\u1eafn mu\u1ed1n x\u00f3a nh\u00e0 cung c\u1ea5p ${s.companyName}?`, function() {\n                    suppliers = suppliers.filter(sup => sup.id != id);\n                    showToast(`\u0110\u00e3 x\u00f3a NCC ${s.code}!`, 'warning');\n                    buildSuppliersTable();\n                    populateSupplierDropdown();\n                });\n            }\n        }\n\n        \/\/ --- 18. BRAND MANAGEMENT CONTROLLERS ---\n        function buildBrandsTable() {\n            const tbody = document.getElementById('brands-table-body');\n            if (!tbody) return;\n            tbody.innerHTML = '';\n            \n            brands.forEach(b => {\n                tbody.innerHTML += `\n                    <tr class=\"hover:bg-slate-50 text-xs border-b border-slate-100\">\n                        <td class=\"py-2.5 px-5 font-bold text-slate-800\">\n                            <span class=\"bg-slate-100 border border-slate-200 px-2.5 py-1 rounded-lg text-[10px] font-mono\">${b.code}<\/span>\n                        <\/td>\n                        <td class=\"py-2.5 px-5 font-bold text-orange-600 text-sm\">${b.name}<\/td>\n                        <td class=\"py-2.5 px-5 font-semibold text-slate-700\">${b.country}<\/td>\n                        <td class=\"py-2.5 px-5 text-slate-500 italic max-w-[200px] truncate\" title=\"${b.note || ''}\">${b.note || 'N\/A'}<\/td>\n                        <td class=\"py-2.5 px-5 text-center space-x-1\">\n                            <button onclick=\"editBrand(${b.id})\" class=\"text-blue-500 hover:text-blue-700 bg-blue-50 p-1.5 rounded-lg\"><i class=\"fa-solid fa-pen\"><\/i><\/button>\n                            <button onclick=\"deleteBrand(${b.id})\" class=\"text-red-500 hover:text-red-700 bg-red-50 p-1.5 rounded-lg\"><i class=\"fa-solid fa-trash\"><\/i><\/button>\n                        <\/td>\n                    <\/tr>\n                `;\n            });\n        }\n\n        function openBrandModal() {\n            document.getElementById('brand-modal-title').innerText = \"Th\u00eam h\u00e3ng s\u1ea3n xu\u1ea5t m\u1edbi\";\n            document.getElementById('modal-brand-id').value = \"\";\n            document.getElementById('modal-brand-code').value = \"\";\n            document.getElementById('modal-brand-name').value = \"\";\n            document.getElementById('modal-brand-country').value = \"\";\n            document.getElementById('modal-brand-note').value = \"\";\n            document.getElementById('brand-modal').classList.remove('hidden');\n        }\n\n        function closeBrandModal() {\n            document.getElementById('brand-modal').classList.add('hidden');\n        }\n\n        function saveBrand() {\n            const idVal = document.getElementById('modal-brand-id').value;\n            const code = document.getElementById('modal-brand-code').value.trim().toUpperCase();\n            const name = document.getElementById('modal-brand-name').value.trim();\n            const country = document.getElementById('modal-brand-country').value.trim();\n            const note = document.getElementById('modal-brand-note').value.trim();\n\n            if (!code || !name || !country) {\n                customAlert(\"Vui l\u00f2ng \u0111i\u1ec1n \u0111\u1ea7y \u0111\u1ee7 c\u00e1c th\u00f4ng tin b\u1eaft bu\u1ed9c!\", \"L\u1ed7i nh\u1eadp li\u1ec7u\", \"error\");\n                return;\n            }\n\n            if (idVal === \"\") {\n                if (brands.some(b => b.code === code)) {\n                    customAlert(\"M\u00e3 th\u01b0\u01a1ng hi\u1ec7u n\u00e0y \u0111\u00e3 t\u1ed3n t\u1ea1i!\", \"Tr\u00f9ng m\u00e3\", \"error\");\n                    return;\n                }\n                brands.push({\n                    id: generateUniqueId(),\n                    code, name, country, note\n                });\n                showToast(`\u0110\u00e3 th\u00eam m\u1edbi h\u00e3ng ${name}!`);\n            } else {\n                const b = brands.find(brand => brand.id == idVal);\n                if (b) {\n                    const oldName = b.name;\n                    b.code = code;\n                    b.name = name;\n                    b.country = country;\n                    b.note = note;\n\n                    products.forEach(p => {\n                        if (p.brand === oldName) p.brand = name;\n                    });\n\n                    showToast(`C\u1eadp nh\u1eadt h\u00e3ng ${name} th\u00e0nh c\u00f4ng!`);\n                }\n            }\n\n            closeBrandModal();\n            buildBrandsTable();\n            populateBrandDropdown();\n            buildProductsTable();\n        }\n\n        function editBrand(id) {\n            const b = brands.find(brand => brand.id == id);\n            if (b) {\n                document.getElementById('brand-modal-title').innerText = \"Ch\u1ec9nh s\u1eeda h\u00e3ng \" + b.code;\n                document.getElementById('modal-brand-id').value = b.id;\n                document.getElementById('modal-brand-code').value = b.code;\n                document.getElementById('modal-brand-name').value = b.name;\n                document.getElementById('modal-brand-country').value = b.country;\n                document.getElementById('modal-brand-note').value = b.note;\n                document.getElementById('brand-modal').classList.remove('hidden');\n            }\n        }\n\n        function deleteBrand(id) {\n            const b = brands.find(brand => brand.id == id);\n            if (b) {\n                customConfirm(`B\u1ea1n c\u00f3 ch\u1eafc ch\u1eafn mu\u1ed1n x\u00f3a h\u00e3ng ${b.name}?`, function() {\n                    brands = brands.filter(brand => brand.id != id);\n                    showToast(`\u0110\u00e3 x\u00f3a h\u00e3ng ${b.code}!`, 'warning');\n                    buildBrandsTable();\n                    populateBrandDropdown();\n                });\n            }\n        }\n\n        \/\/ --- 19. USER ACCOUNT MANAGEMENT CONTROLLERS ---\n        function buildUsersTable() {\n            const tbody = document.getElementById('users-table-body');\n            tbody.innerHTML = '';\n            users.forEach(u => {\n                let badge = `<span class=\"bg-purple-100 text-purple-800 text-[10px] px-2.5 py-1 rounded-full font-bold\">C\u1ea5p 1 - Gi\u00e1m \u0111\u1ed1c<\/span>`;\n                if (u.level === 2) badge = `<span class=\"bg-blue-100 text-blue-800 text-[10px] px-2.5 py-1 rounded-full font-bold\">C\u1ea5p 2 - Th\u1ee7 Kho<\/span>`;\n                if (u.level === 3) badge = `<span class=\"bg-slate-100 text-slate-800 text-[10px] px-2.5 py-1 rounded-full font-bold\">C\u1ea5p 3 - K\u1ef9 Thu\u1eadt<\/span>`;\n\n                tbody.innerHTML += `\n                    <tr class=\"hover:bg-slate-50 text-xs border-b border-slate-100\">\n                        <td class=\"py-3 px-5 font-bold text-slate-800\">${u.fullname}<\/td>\n                        <td class=\"py-3 px-5 font-bold text-indigo-600\">${u.username}<\/td>\n                        <td class=\"py-3 px-5 font-mono text-slate-400\">\n                            <span class=\"password-text hidden mr-2\">${u.password}<\/span>\n                            <span class=\"password-masked font-black\">\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022<\/span>\n                            <button onclick=\"togglePasswordVisibility(this)\" class=\"text-slate-400 hover:text-slate-600 ml-2\"><i class=\"fa-solid fa-eye-slash\"><\/i><\/button>\n                        <\/td>\n                        <td class=\"py-3 px-5\">${badge}<\/td>\n                        <td class=\"py-3 px-5\"><span class=\"bg-green-100 text-green-800 text-[9px] px-2 py-0.5 rounded-full font-bold\">\u0110ang ho\u1ea1t \u0111\u1ed9ng<\/span><\/td>\n                        <td class=\"py-3 px-5 text-center\">\n                            <button onclick=\"editUser(${u.id})\" class=\"text-blue-500 hover:text-blue-700 mx-1\"><i class=\"fa-solid fa-pen\"><\/i><\/button>\n                            <button onclick=\"deleteUser(${u.id})\" class=\"text-red-500 hover:text-red-700 mx-1\"><i class=\"fa-solid fa-trash\"><\/i><\/button>\n                        <\/td>\n                    <\/tr>\n                `;\n            });\n        }\n\n        function togglePasswordVisibility(btn) {\n            const row = btn.parentElement;\n            const plain = row.querySelector('.password-text');\n            const masked = row.querySelector('.password-masked');\n            const icon = btn.querySelector('i');\n\n            if (plain.classList.contains('hidden')) {\n                plain.classList.remove('hidden');\n                masked.classList.add('hidden');\n                icon.className = \"fa-solid fa-eye text-slate-600\";\n            } else {\n                plain.classList.add('hidden');\n                masked.classList.remove('hidden');\n                icon.className = \"fa-solid fa-eye-slash text-slate-400\";\n            }\n        }\n\n        function openUserModal() {\n            document.getElementById('user-modal-title').innerText = \"C\u1ea5p t\u00e0i kho\u1ea3n m\u1edbi\";\n            document.getElementById('modal-user-id').value = \"\";\n            document.getElementById('modal-user-fullname').value = \"\";\n            document.getElementById('modal-user-username').value = \"\";\n            document.getElementById('modal-user-password').value = \"\";\n            document.getElementById('user-modal').classList.remove('hidden');\n        }\n\n        function closeUserModal() {\n            document.getElementById('user-modal').classList.add('hidden');\n        }\n\n        function saveUser() {\n            const idVal = document.getElementById('modal-user-id').value;\n            const fullname = document.getElementById('modal-user-fullname').value.trim();\n            const username = document.getElementById('modal-user-username').value.trim().toLowerCase();\n            const password = document.getElementById('modal-user-password').value;\n            const level = parseInt(document.getElementById('modal-user-level').value);\n\n            if (!fullname || !username || !password) {\n                customAlert(\"Vui l\u00f2ng \u0111i\u1ec1n \u0111\u1ea7y \u0111\u1ee7 c\u00e1c tr\u01b0\u1eddng!\", \"Thi\u1ebfu th\u00f4ng tin\", \"error\");\n                return;\n            }\n\n            if (idVal === \"\") {\n                if (users.some(u => u.username === username)) {\n                    customAlert(\"T\u00ean t\u00e0i kho\u1ea3n n\u00e0y \u0111\u00e3 \u0111\u01b0\u1ee3c c\u1ea5p cho nh\u00e2n vi\u00ean kh\u00e1c!\", \"Tr\u00f9ng t\u00e0i kho\u1ea3n\", \"error\");\n                    return;\n                }\n                users.push({\n                    id: generateUniqueId(),\n                    fullname, username, password, level, status: 'active'\n                });\n                showToast(\"C\u1ea5p t\u00e0i kho\u1ea3n m\u1edbi th\u00e0nh c\u00f4ng!\");\n            } else {\n                const u = users.find(usr => usr.id == idVal);\n                if (u) {\n                    u.fullname = fullname;\n                    u.password = password;\n                    u.level = level;\n                    showToast(\"C\u1eadp nh\u1eadt t\u00e0i kho\u1ea3n th\u00e0nh c\u00f4ng!\");\n                }\n            }\n\n            closeUserModal();\n            buildUsersTable();\n        }\n\n        function editUser(id) {\n            const u = users.find(usr => usr.id == id);\n            if (u) {\n                document.getElementById('user-modal-title').innerText = \"Ch\u1ec9nh s\u1eeda t\u00e0i kho\u1ea3n \" + u.username;\n                document.getElementById('modal-user-id').value = u.id;\n                document.getElementById('modal-user-fullname').value = u.fullname;\n                document.getElementById('modal-user-username').value = u.username;\n                document.getElementById('modal-user-password').value = u.password;\n                document.getElementById('modal-user-level').value = u.level;\n                document.getElementById('user-modal').classList.remove('hidden');\n            }\n        }\n\n        function deleteUser(id) {\n            const u = users.find(usr => usr.id == id);\n            if (u) {\n                if (u.username === 'kimgioadmin') {\n                    customAlert(\"T\u00e0i kho\u1ea3n Qu\u1ea3n tr\u1ecb ch\u00ednh kimgioadmin kh\u00f4ng th\u1ec3 b\u1ecb x\u00f3a!\", \"B\u1ecb t\u1eeb ch\u1ed1i\", \"error\");\n                    return;\n                }\n                customConfirm(`B\u1ea1n c\u00f3 ch\u1eafc ch\u1eafn mu\u1ed1n x\u00f3a t\u00e0i kho\u1ea3n c\u1ee7a nh\u00e2n vi\u00ean ${u.fullname}?`, function() {\n                    users = users.filter(usr => usr.id != id);\n                    showToast(`\u0110\u00e3 x\u00f3a t\u00e0i kho\u1ea3n ${u.fullname}!`, 'warning');\n                    buildUsersTable();\n                });\n            }\n        }\n    <\/script>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>H\u1ec7 Th\u1ed1ng Qu\u1ea3n L\u00fd Kho H\u00e0ng &#8211; H\u00f9ng C\u01b0\u1eddng Solar H\u00d9NG C\u01af\u1edcNG SOLAR H\u1ec7 th\u1ed1ng qu\u1ea3n l\u00fd kho th\u00f4ng minh t\u00edch h\u1ee3p T\u00e0i kho\u1ea3n ho\u1eb7c m\u1eadt kh\u1ea9u kh\u00f4ng ch\u00ednh x\u00e1c! T\u00ean t\u00e0i kho\u1ea3n (Username) M\u1eadt kh\u1ea9u \u0111\u0103ng nh\u1eadp \u0110\u0103ng nh\u1eadp h\u1ec7 th\u1ed1ng G\u1ee3i \u00fd t\u00e0i kho\u1ea3n demo C\u1ea5p 1 (Qu\u1ea3n tr\u1ecb): kimgioadmin \/ kimgio123! C\u1ea5p [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-6","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/vattunlmt.click\/index.php?rest_route=\/wp\/v2\/pages\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vattunlmt.click\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/vattunlmt.click\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/vattunlmt.click\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vattunlmt.click\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6"}],"version-history":[{"count":1,"href":"https:\/\/vattunlmt.click\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":8,"href":"https:\/\/vattunlmt.click\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions\/8"}],"wp:attachment":[{"href":"https:\/\/vattunlmt.click\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}