Ch\u1ea5m B\u1ea3ng L\u01b0\u01a1ng Nh\u00e2n Vi\u00ean<\/title>\n <style>\n * { margin: 0; padding: 0; box-sizing: border-box; }\n body {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n min-height: 100vh;\n padding: 20px;\n }\n .container { max-width: 1200px; margin: 0 auto; }\n h1 { text-align: center; color: white; margin-bottom: 20px; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); }\n .nav-tabs { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; justify-content: center; }\n .nav-tab {\n padding: 12px 25px; background: rgba(255,255,255,0.2); color: white; border: none;\n border-radius: 10px 10px 0 0; cursor: pointer; font-size: 16px; font-weight: 600; transition: all 0.3s;\n }\n .nav-tab:hover { background: rgba(255,255,255,0.3); }\n .nav-tab.active { background: white; color: #5a67d8; }\n .tab-content { display: none; }\n .tab-content.active { display: block; }\n .card { background: white; border-radius: 15px; padding: 25px; margin-bottom: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }\n .card h2 { color: #5a67d8; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid #e2e8f0; }\n .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 15px; }\n .form-group { display: flex; flex-direction: column; position: relative; }\n .form-group label { font-weight: 600; color: #4a5568; margin-bottom: 5px; font-size: 14px; }\n .form-group input, .form-group select {\n padding: 12px; border: 2px solid #e2e8f0; border-radius: 8px; font-size: 14px; transition: border-color 0.3s;\n }\n .form-group input:focus, .form-group select:focus { outline: none; border-color: #5a67d8; }\n .suggestions { position: absolute; top: 100%; left: 0; right: 0; background: white; border: 2px solid #e2e8f0; border-top: none; border-radius: 0 0 8px 8px; max-height: 150px; overflow-y: auto; z-index: 100; display: none; }\n .suggestions.show { display: block; }\n .suggestion-item { padding: 10px 12px; cursor: pointer; border-bottom: 1px solid #e2e8f0; }\n .suggestion-item:hover { background: #f7fafc; }\n .btn { padding: 12px 30px; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s; margin: 5px; }\n .btn-primary { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; }\n .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4); }\n .btn-danger { background: #e53e3e; color: white; }\n .btn-success { background: #38a169; color: white; }\n .btn-secondary { background: #718096; color: white; }\n .btn-group { text-align: center; margin-top: 20px; }\n table { width: 100%; border-collapse: collapse; margin-top: 15px; }\n th, td { padding: 12px; text-align: left; border-bottom: 1px solid #e2e8f0; }\n th { background: #5a67d8; color: white; font-weight: 600; }\n tr:hover { background: #f7fafc; }\n .salary-breakdown { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px; margin-top: 15px; }\n .breakdown-item { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 15px; border-radius: 10px; text-align: center; }\n .breakdown-item h3 { font-size: 13px; opacity: 0.9; margin-bottom: 8px; }\n .breakdown-item .amount { font-size: 18px; font-weight: bold; }\n .total-salary { background: linear-gradient(135deg, #38a169 0%, #2f855a 100%); }\n .deduction { background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%); }\n .action-btn { padding: 6px 12px; border: none; border-radius: 5px; cursor: pointer; font-size: 12px; margin: 2px; }\n .view-btn { background: #4299e1; color: white; }\n .edit-btn { background: #ed8936; color: white; }\n .delete-btn { background: #e53e3e; color: white; }\n .empty-message { text-align: center; color: #718096; padding: 40px; font-style: italic; }\n .summary-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; margin-bottom: 20px; }\n .stat-item { background: #f7fafc; padding: 15px; border-radius: 10px; text-align: center; }\n .stat-item h4 { color: #718096; font-size: 12px; margin-bottom: 5px; }\n .stat-item .value { color: #5a67d8; font-size: 18px; font-weight: bold; }\n .search-box { display: flex; gap: 10px; margin-bottom: 15px; }\n .search-box input { flex: 1; padding: 12px; border: 2px solid #e2e8f0; border-radius: 8px; font-size: 14px; }\n .filter-group { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 15px; }\n .filter-group select { padding: 10px 15px; border: 2px solid #e2e8f0; border-radius: 8px; font-size: 14px; }\n .chart-container { background: #f7fafc; border-radius: 10px; padding: 20px; margin-bottom: 20px; }\n .bar-chart { display: flex; align-items: flex-end; gap: 20px; height: 200px; padding: 20px 0; }\n .bar-item { flex: 1; display: flex; flex-direction: column; align-items: center; }\n .bar { width: 100%; max-width: 60px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 5px 5px 0 0; }\n .bar-label { margin-top: 10px; font-size: 11px; color: #4a5568; text-align: center; }\n .bar-value { font-size: 10px; color: #718096; margin-bottom: 5px; }\n .section-title { font-size: 14px; font-weight: 600; color: #5a67d8; margin: 15px 0 10px 0; padding-bottom: 5px; border-bottom: 1px solid #e2e8f0; }\n @media print { body { background: white; padding: 0; } .nav-tabs, .btn-group, .action-btn, .search-box, .filter-group { display: none !important; } .card { box-shadow: none; border: 1px solid #e2e8f0; } }\n @media (max-width: 768px) { .form-row { grid-template-columns: 1fr; } .nav-tab { padding: 10px 15px; font-size: 14px; } }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <h1>Ch\u1ea5m B\u1ea3ng L\u01b0\u01a1ng Nh\u00e2n Vi\u00ean<\/h1>\n <div class=\"nav-tabs\">\n <button class=\"nav-tab active\" onclick=\"chuyenTab('chamLuong')\">Ch\u1ea5m L\u01b0\u01a1ng<\/button>\n <button class=\"nav-tab\" onclick=\"chuyenTab('danhSach')\">Danh S\u00e1ch Nh\u00e2n Vi\u00ean<\/button>\n <button class=\"nav-tab\" onclick=\"chuyenTab('baoCao')\">B\u00e1o C\u00e1o<\/button>\n <\/div>\n\n <div id=\"chamLuong\" class=\"tab-content active\">\n <div class=\"card\">\n <h2>Th\u00f4ng Tin Nh\u00e2n Vi\u00ean<\/h2>\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label>M\u00e3 Nh\u00e2n Vi\u00ean<\/label>\n <input type=\"text\" id=\"maNV\" placeholder=\"VD: NV001\" oninput=\"goiYNhanVien('maNV')\">\n <div class=\"suggestions\" id=\"maNV_suggestions\"><\/div>\n <\/div>\n <div class=\"form-group\">\n <label>H\u1ecd v\u00e0 T\u00ean<\/label>\n <input type=\"text\" id=\"hoTen\" placeholder=\"Nh\u1eadp h\u1ecd t\u00ean\" oninput=\"goiYNhanVien('hoTen')\">\n <div class=\"suggestions\" id=\"hoTen_suggestions\"><\/div>\n <\/div>\n <div class=\"form-group\">\n <label>Ch\u1ee9c V\u1ee5<\/label>\n <select id=\"chucVu\">\n <option value=\"nhan_vien\">Nh\u00e2n vi\u00ean<\/option>\n <option value=\"truong_nhom\">Tr\u01b0\u1edfng nh\u00f3m<\/option>\n <option value=\"pho_phong\">Ph\u00f3 ph\u00f2ng<\/option>\n <option value=\"truong_phong\">Tr\u01b0\u1edfng ph\u00f2ng<\/option>\n <option value=\"giam_doc\">Gi\u00e1m \u0111\u1ed1c<\/option>\n <\/select>\n <\/div>\n <div class=\"form-group\">\n <label>Ph\u00f2ng Ban<\/label>\n <select id=\"phongBan\">\n <option value=\"kinh_doanh\">Kinh doanh<\/option>\n <option value=\"ke_toan\">K\u1ebf to\u00e1n<\/option>\n <option value=\"nhan_su\">Nh\u00e2n s\u1ef1<\/option>\n <option value=\"ky_thuat\">K\u1ef9 thu\u1eadt<\/option>\n <option value=\"marketing\">Marketing<\/option>\n <option value=\"san_xuat\">S\u1ea3n xu\u1ea5t<\/option>\n <\/select>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"card\">\n <h2>Th\u00f4ng Tin Ch\u1ea5m C\u00f4ng & L\u01b0\u01a1ng<\/h2>\n <div class=\"section-title\">L\u01b0\u01a1ng c\u01a1 b\u1ea3n & Ng\u00e0y c\u00f4ng<\/div>\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label>L\u01b0\u01a1ng C\u01a1 B\u1ea3n (VN\u0110)<\/label>\n <input type=\"number\" id=\"luongCoBan\" value=\"10000000\">\n <\/div>\n <div class=\"form-group\">\n <label>S\u1ed1 Ng\u00e0y C\u00f4ng Chu\u1ea9n<\/label>\n <input type=\"number\" id=\"ngayCongChuan\" value=\"26\" min=\"1\" max=\"31\">\n <\/div>\n <div class=\"form-group\">\n <label>S\u1ed1 Ng\u00e0y C\u00f4ng Th\u1ef1c T\u1ebf<\/label>\n <input type=\"number\" id=\"ngayCong\" value=\"26\" min=\"0\" max=\"31\">\n <\/div>\n <div class=\"form-group\">\n <label>S\u1ed1 Gi\u1edd L\u00e0m Th\u00eam<\/label>\n <input type=\"number\" id=\"gioLamThem\" value=\"0\" min=\"0\">\n <\/div>\n <\/div>\n\n <div class=\"section-title\">C\u00e1c Kho\u1ea3n Ph\u1ee5 C\u1ea5p<\/div>\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label>Ph\u1ee5 C\u1ea5p Ch\u1ee9c V\u1ee5 (VN\u0110)<\/label>\n <input type=\"number\" id=\"phuCapChucVu\" value=\"0\">\n <\/div>\n <div class=\"form-group\">\n <label>Ph\u1ee5 C\u1ea5p \u0102n Tr\u01b0a (VN\u0110)<\/label>\n <input type=\"number\" id=\"phuCapAn\" value=\"730000\">\n <\/div>\n <div class=\"form-group\">\n <label>Ph\u1ee5 C\u1ea5p X\u0103ng Xe (VN\u0110)<\/label>\n <input type=\"number\" id=\"phuCapXe\" value=\"500000\">\n <\/div>\n <div class=\"form-group\">\n <label>Ph\u1ee5 C\u1ea5p \u0110i\u1ec7n Tho\u1ea1i (VN\u0110)<\/label>\n <input type=\"number\" id=\"phuCapDienThoai\" value=\"200000\">\n <\/div>\n <\/div>\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label>Ph\u1ee5 C\u1ea5p Nh\u00e0 \u1ede (VN\u0110)<\/label>\n <input type=\"number\" id=\"phuCapNhaO\" value=\"0\">\n <\/div>\n <div class=\"form-group\">\n <label>Ph\u1ee5 C\u1ea5p \u0110\u1ed9c H\u1ea1i (VN\u0110)<\/label>\n <input type=\"number\" id=\"phuCapDocHai\" value=\"0\">\n <\/div>\n <div class=\"form-group\">\n <label>Th\u01b0\u1edfng \/ Ph\u1ee5 C\u1ea5p Kh\u00e1c (VN\u0110)<\/label>\n <input type=\"number\" id=\"thuongKhac\" value=\"0\">\n <\/div>\n <\/div>\n\n <div class=\"section-title\">C\u00e1c Kho\u1ea3n Kh\u1ea5u Tr\u1eeb<\/div>\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label>BHXH (% l\u01b0\u01a1ng \u0111\u00f3ng BH)<\/label>\n <input type=\"number\" id=\"bhxh\" value=\"8\" step=\"0.1\">\n <\/div>\n <div class=\"form-group\">\n <label>BHYT (% l\u01b0\u01a1ng \u0111\u00f3ng BH)<\/label>\n <input type=\"number\" id=\"bhyt\" value=\"1.5\" step=\"0.1\">\n <\/div>\n <div class=\"form-group\">\n <label>BHTN (% l\u01b0\u01a1ng \u0111\u00f3ng BH)<\/label>\n <input type=\"number\" id=\"bhtn\" value=\"1\" step=\"0.1\">\n <\/div>\n <div class=\"form-group\">\n <label>L\u01b0\u01a1ng \u0110\u00f3ng B\u1ea3o Hi\u1ec3m (VN\u0110)<\/label>\n <input type=\"number\" id=\"luongDongBH\" value=\"10000000\">\n <\/div>\n <\/div>\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label>S\u1ed1 Ng\u01b0\u1eddi Ph\u1ee5 Thu\u1ed9c<\/label>\n <input type=\"number\" id=\"nguoiPhuThuoc\" value=\"0\" min=\"0\">\n <\/div>\n <div class=\"form-group\">\n <label>T\u1ea1m \u1ee8ng (VN\u0110)<\/label>\n <input type=\"number\" id=\"tamUng\" value=\"0\">\n <\/div>\n <div class=\"form-group\">\n <label>Kh\u1ea5u Tr\u1eeb Kh\u00e1c (VN\u0110)<\/label>\n <input type=\"number\" id=\"khauTruKhac\" value=\"0\">\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"btn-group\">\n <button class=\"btn btn-primary\" onclick=\"tinhLuong()\">T\u00ednh L\u01b0\u01a1ng<\/button>\n <button class=\"btn btn-success\" onclick=\"themNhanVien()\">Th\u00eam V\u00e0o Danh S\u00e1ch<\/button>\n <button class=\"btn btn-danger\" onclick=\"xoaForm()\">X\u00f3a Form<\/button>\n <\/div>\n\n <div class=\"card\" id=\"ketQuaCard\" style=\"display: none;\">\n <h2>K\u1ebft Qu\u1ea3 T\u00ednh L\u01b0\u01a1ng<\/h2>\n <div class=\"salary-breakdown\" id=\"ketQuaLuong\"><\/div>\n <\/div>\n <\/div>\n\n <div id=\"danhSach\" class=\"tab-content\">\n <div class=\"card\">\n <h2>Danh S\u00e1ch Nh\u00e2n Vi\u00ean<\/h2>\n <div class=\"search-box\">\n <input type=\"text\" id=\"timKiem\" placeholder=\"T\u00ecm ki\u1ebfm theo m\u00e3 NV ho\u1eb7c h\u1ecd t\u00ean...\" oninput=\"timKiemNhanVien()\">\n <\/div>\n <div class=\"summary-stats\">\n <div class=\"stat-item\"><h4>T\u1ed5ng Nh\u00e2n Vi\u00ean<\/h4><div class=\"value\" id=\"tongNV\">0<\/div><\/div>\n <div class=\"stat-item\"><h4>T\u1ed5ng L\u01b0\u01a1ng Chi Tr\u1ea3<\/h4><div class=\"value\" id=\"tongLuong\">0 \u0111<\/div><\/div>\n <div class=\"stat-item\"><h4>L\u01b0\u01a1ng Trung B\u00ecnh<\/h4><div class=\"value\" id=\"luongTB\">0 \u0111<\/div><\/div>\n <div class=\"stat-item\"><h4>L\u01b0\u01a1ng Cao Nh\u1ea5t<\/h4><div class=\"value\" id=\"luongMax\">0 \u0111<\/div><\/div>\n <div class=\"stat-item\"><h4>L\u01b0\u01a1ng Th\u1ea5p Nh\u1ea5t<\/h4><div class=\"value\" id=\"luongMin\">0 \u0111<\/div><\/div>\n <\/div>\n <div id=\"danhSachNV\"><p class=\"empty-message\">Ch\u01b0a c\u00f3 nh\u00e2n vi\u00ean n\u00e0o trong danh s\u00e1ch<\/p><\/div>\n <\/div>\n <\/div>\n\n <div id=\"baoCao\" class=\"tab-content\">\n <div class=\"card\">\n <h2>B\u00e1o C\u00e1o T\u1ed5ng H\u1ee3p<\/h2>\n <div class=\"filter-group\">\n <select id=\"locPhongBan\" onchange=\"capNhatBaoCao()\">\n <option value=\"\">T\u1ea5t c\u1ea3 ph\u00f2ng ban<\/option>\n <option value=\"Kinh doanh\">Kinh doanh<\/option>\n <option value=\"K\u1ebf to\u00e1n\">K\u1ebf to\u00e1n<\/option>\n <option value=\"Nh\u00e2n s\u1ef1\">Nh\u00e2n s\u1ef1<\/option>\n <option value=\"K\u1ef9 thu\u1eadt\">K\u1ef9 thu\u1eadt<\/option>\n <option value=\"Marketing\">Marketing<\/option>\n <option value=\"S\u1ea3n xu\u1ea5t\">S\u1ea3n xu\u1ea5t<\/option>\n <\/select>\n <button class=\"btn btn-secondary\" onclick=\"inBaoCao()\">In B\u00e1o C\u00e1o<\/button>\n <button class=\"btn btn-primary\" onclick=\"xuatCSV()\">Xu\u1ea5t CSV<\/button>\n <\/div>\n <div class=\"chart-container\">\n <h3 style=\"margin-bottom: 15px; color: #4a5568;\">Bi\u1ec3u \u0111\u1ed3 l\u01b0\u01a1ng theo ph\u00f2ng ban<\/h3>\n <div class=\"bar-chart\" id=\"bieuDoPhongBan\"><\/div>\n <\/div>\n <div class=\"summary-stats\">\n <div class=\"stat-item\"><h4>T\u1ed5ng Nh\u00e2n Vi\u00ean<\/h4><div class=\"value\" id=\"baoCaoTongNV\">0<\/div><\/div>\n <div class=\"stat-item\"><h4>T\u1ed5ng Chi Ph\u00ed L\u01b0\u01a1ng<\/h4><div class=\"value\" id=\"baoCaoTongLuong\">0 \u0111<\/div><\/div>\n <div class=\"stat-item\"><h4>T\u1ed5ng B\u1ea3o Hi\u1ec3m<\/h4><div class=\"value\" id=\"baoCaoTongBH\">0 \u0111<\/div><\/div>\n <\/div>\n <div id=\"bangBaoCao\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n let danhSachNhanVien = [];\n let danhSachNhanVienDaLuu = [];\n const GIAM_TRU_BAN_THAN = 11000000;\n const GIAM_TRU_PHU_THUOC = 4400000;\n\n function escapeHtml(text) {\n const div = document.createElement('div');\n div.textContent = text;\n return div.innerHTML;\n }\n function formatTien(so) { return new Intl.NumberFormat('vi-VN').format(Math.round(so)) + ' \u0111'; }\n function layGiaTri(id) { return parseFloat(document.getElementById(id).value) || 0; }\n function layText(id) { return document.getElementById(id).value.trim(); }\n function laySelectedText(id) { const s = document.getElementById(id); return s.options[s.selectedIndex].text; }\n\n function chuyenTab(tabId) {\n document.querySelectorAll('.tab-content').forEach(t => t.classList.remove('active'));\n document.querySelectorAll('.nav-tab').forEach(b => b.classList.remove('active'));\n document.getElementById(tabId).classList.add('active');\n event.target.classList.add('active');\n if (tabId === 'baoCao') capNhatBaoCao();\n }\n\n function goiYNhanVien(fieldId) {\n const input = document.getElementById(fieldId);\n const value = input.value.toLowerCase().trim();\n const suggestionsDiv = document.getElementById(fieldId + '_suggestions');\n if (!value) { suggestionsDiv.classList.remove('show'); return; }\n let matches = danhSachNhanVienDaLuu.filter(nv => \n fieldId === 'maNV' ? nv.maNV.toLowerCase().includes(value) : nv.hoTen.toLowerCase().includes(value)\n );\n if (matches.length > 0) {\n suggestionsDiv.innerHTML = matches.map(nv => `<div class=\"suggestion-item\" onclick=\"chonNhanVien('${escapeHtml(nv.maNV)}')\"><strong>${escapeHtml(nv.maNV)}<\/strong> - ${escapeHtml(nv.hoTen)}<\/div>`).join('');\n suggestionsDiv.classList.add('show');\n } else { suggestionsDiv.classList.remove('show'); }\n }\n\n function chonNhanVien(maNV) {\n const nv = danhSachNhanVienDaLuu.find(n => n.maNV === maNV);\n if (nv) {\n document.getElementById('maNV').value = nv.maNV;\n document.getElementById('hoTen').value = nv.hoTen;\n document.getElementById('luongCoBan').value = nv.luongCoBan;\n document.getElementById('luongDongBH').value = nv.luongDongBH || nv.luongCoBan;\n const chucVuSelect = document.getElementById('chucVu');\n for (let i = 0; i < chucVuSelect.options.length; i++) {\n if (chucVuSelect.options[i].text === nv.chucVu) { chucVuSelect.selectedIndex = i; break; }\n }\n const phongBanSelect = document.getElementById('phongBan');\n for (let i = 0; i < phongBanSelect.options.length; i++) {\n if (phongBanSelect.options[i].text === nv.phongBan) { phongBanSelect.selectedIndex = i; break; }\n }\n }\n document.querySelectorAll('.suggestions').forEach(s => s.classList.remove('show'));\n }\n\n document.addEventListener('click', function(e) {\n if (!e.target.closest('.form-group')) document.querySelectorAll('.suggestions').forEach(s => s.classList.remove('show'));\n });\n\n function kiemTraDuLieu() {\n const ngayCongChuan = layGiaTri('ngayCongChuan');\n if (ngayCongChuan <= 0) { alert('S\u1ed1 ng\u00e0y c\u00f4ng chu\u1ea9n ph\u1ea3i l\u1edbn h\u01a1n 0!'); return false; }\n return true;\n }\n\n function tinhLuong() {\n if (!kiemTraDuLieu()) return null;\n\n const luongCoBan = layGiaTri('luongCoBan');\n const ngayCongChuan = layGiaTri('ngayCongChuan');\n const ngayCong = layGiaTri('ngayCong');\n const gioLamThem = layGiaTri('gioLamThem');\n \n const phuCapChucVu = layGiaTri('phuCapChucVu');\n const phuCapAn = layGiaTri('phuCapAn');\n const phuCapXe = layGiaTri('phuCapXe');\n const phuCapDienThoai = layGiaTri('phuCapDienThoai');\n const phuCapNhaO = layGiaTri('phuCapNhaO');\n const phuCapDocHai = layGiaTri('phuCapDocHai');\n const thuongKhac = layGiaTri('thuongKhac');\n \n const bhxhRate = layGiaTri('bhxh') \/ 100;\n const bhytRate = layGiaTri('bhyt') \/ 100;\n const bhtnRate = layGiaTri('bhtn') \/ 100;\n const luongDongBH = layGiaTri('luongDongBH');\n const nguoiPhuThuoc = layGiaTri('nguoiPhuThuoc');\n const tamUng = layGiaTri('tamUng');\n const khauTruKhac = layGiaTri('khauTruKhac');\n\n const luongTheoNgay = (luongCoBan \/ ngayCongChuan) * ngayCong;\n const luongGio = luongCoBan \/ ngayCongChuan \/ 8;\n const luongLamThem = gioLamThem * luongGio * 1.5;\n const tongPhuCap = phuCapChucVu + phuCapAn + phuCapXe + phuCapDienThoai + phuCapNhaO + phuCapDocHai + thuongKhac;\n const tongThuNhap = luongTheoNgay + luongLamThem + tongPhuCap;\n \n const bhxh = luongDongBH * bhxhRate;\n const bhyt = luongDongBH * bhytRate;\n const bhtn = luongDongBH * bhtnRate;\n const tongBaoHiem = bhxh + bhyt + bhtn;\n \n const thuNhapChiuThue = tongThuNhap - tongBaoHiem - GIAM_TRU_BAN_THAN - (nguoiPhuThuoc * GIAM_TRU_PHU_THUOC);\n let thueTNCN = 0;\n if (thuNhapChiuThue > 0) {\n if (thuNhapChiuThue <= 5000000) thueTNCN = thuNhapChiuThue * 0.05;\n else if (thuNhapChiuThue <= 10000000) thueTNCN = 250000 + (thuNhapChiuThue - 5000000) * 0.1;\n else if (thuNhapChiuThue <= 18000000) thueTNCN = 750000 + (thuNhapChiuThue - 10000000) * 0.15;\n else if (thuNhapChiuThue <= 32000000) thueTNCN = 1950000 + (thuNhapChiuThue - 18000000) * 0.2;\n else if (thuNhapChiuThue <= 52000000) thueTNCN = 4750000 + (thuNhapChiuThue - 32000000) * 0.25;\n else if (thuNhapChiuThue <= 80000000) thueTNCN = 9750000 + (thuNhapChiuThue - 52000000) * 0.3;\n else thueTNCN = 18150000 + (thuNhapChiuThue - 80000000) * 0.35;\n }\n \n const tongKhauTru = tongBaoHiem + thueTNCN + tamUng + khauTruKhac;\n const luongThucNhan = tongThuNhap - tongKhauTru;\n\n const ketQua = { luongTheoNgay, luongLamThem, tongPhuCap, tongThuNhap, bhxh, bhyt, bhtn, tongBaoHiem, thuNhapChiuThue, thueTNCN, tamUng, khauTruKhac, tongKhauTru, luongThucNhan, luongDongBH, ngayCong, gioLamThem };\n hienThiKetQua(ketQua);\n return ketQua;\n }\n\n function hienThiKetQua(kq) {\n document.getElementById('ketQuaLuong').innerHTML = `\n <div class=\"breakdown-item\"><h3>L\u01b0\u01a1ng Theo Ng\u00e0y C\u00f4ng<\/h3><div class=\"amount\">${formatTien(kq.luongTheoNgay)}<\/div><\/div>\n <div class=\"breakdown-item\"><h3>L\u01b0\u01a1ng L\u00e0m Th\u00eam<\/h3><div class=\"amount\">${formatTien(kq.luongLamThem)}<\/div><\/div>\n <div class=\"breakdown-item\"><h3>T\u1ed5ng Ph\u1ee5 C\u1ea5p<\/h3><div class=\"amount\">${formatTien(kq.tongPhuCap)}<\/div><\/div>\n <div class=\"breakdown-item\"><h3>T\u1ed5ng Thu Nh\u1eadp<\/h3><div class=\"amount\">${formatTien(kq.tongThuNhap)}<\/div><\/div>\n <div class=\"breakdown-item deduction\"><h3>B\u1ea3o Hi\u1ec3m (${((kq.tongBaoHiem\/kq.luongDongBH)*100).toFixed(1)}%)<\/h3><div class=\"amount\">-${formatTien(kq.tongBaoHiem)}<\/div><\/div>\n <div class=\"breakdown-item deduction\"><h3>Thu\u1ebf TNCN<\/h3><div class=\"amount\">-${formatTien(kq.thueTNCN)}<\/div><\/div>\n <div class=\"breakdown-item deduction\"><h3>T\u1ea1m \u1ee8ng & Kh\u1ea5u Tr\u1eeb Kh\u00e1c<\/h3><div class=\"amount\">-${formatTien(kq.tamUng + kq.khauTruKhac)}<\/div><\/div>\n <div class=\"breakdown-item total-salary\"><h3>L\u01af\u01a0NG TH\u1ef0C NH\u1eacN<\/h3><div class=\"amount\">${formatTien(kq.luongThucNhan)}<\/div><\/div>\n `;\n document.getElementById('ketQuaCard').style.display = 'block';\n }\n\n function themNhanVien() {\n const maNV = layText('maNV'), hoTen = layText('hoTen');\n if (!maNV || !hoTen) { alert('Vui l\u00f2ng nh\u1eadp \u0111\u1ea7y \u0111\u1ee7 M\u00e3 NV v\u00e0 H\u1ecd T\u00ean!'); return; }\n const ketQua = tinhLuong();\n if (!ketQua) return;\n \n const nhanVien = {\n maNV, hoTen, chucVu: laySelectedText('chucVu'), phongBan: laySelectedText('phongBan'),\n luongCoBan: layGiaTri('luongCoBan'), luongDongBH: layGiaTri('luongDongBH'),\n ngayCong: ketQua.ngayCong, gioLamThem: ketQua.gioLamThem,\n tongThuNhap: ketQua.tongThuNhap, tongBaoHiem: ketQua.tongBaoHiem,\n thueTNCN: ketQua.thueTNCN, luongThucNhan: ketQua.luongThucNhan, ketQua\n };\n\n let index = danhSachNhanVien.findIndex(nv => nv.maNV === maNV);\n if (index >= 0) danhSachNhanVien[index] = nhanVien; else danhSachNhanVien.push(nhanVien);\n \n let savedIndex = danhSachNhanVienDaLuu.findIndex(nv => nv.maNV === maNV);\n if (savedIndex >= 0) danhSachNhanVienDaLuu[savedIndex] = nhanVien; else danhSachNhanVienDaLuu.push(nhanVien);\n\n luuDuLieu(); capNhatDanhSach(); xoaForm();\n alert('\u0110\u00e3 th\u00eam\/c\u1eadp nh\u1eadt nh\u00e2n vi\u00ean th\u00e0nh c\u00f4ng!');\n }\n\n function xoaNhanVienByIndex(index) {\n if (confirm('B\u1ea1n c\u00f3 ch\u1eafc mu\u1ed1n x\u00f3a nh\u00e2n vi\u00ean n\u00e0y?')) {\n danhSachNhanVien.splice(index, 1); luuDuLieu(); capNhatDanhSach();\n }\n }\n\n function suaNhanVienByIndex(index) {\n const nv = danhSachNhanVien[index];\n if (nv) { chonNhanVien(nv.maNV); document.getElementById('ngayCong').value = nv.ngayCong; chuyenTab('chamLuong'); document.querySelector('.nav-tab').click(); }\n }\n\n function xemChiTietByIndex(index) {\n const nv = danhSachNhanVien[index];\n if (nv) { chuyenTab('chamLuong'); document.querySelector('.nav-tab').click(); hienThiKetQua(nv.ketQua); document.getElementById('ketQuaCard').scrollIntoView({ behavior: 'smooth' }); }\n }\n\n function timKiemNhanVien() { capNhatDanhSach(document.getElementById('timKiem').value.toLowerCase().trim()); }\n\n function capNhatDanhSach(tuKhoa = '') {\n const container = document.getElementById('danhSachNV');\n let ds = tuKhoa ? danhSachNhanVien.filter(nv => nv.maNV.toLowerCase().includes(tuKhoa) || nv.hoTen.toLowerCase().includes(tuKhoa)) : danhSachNhanVien;\n \n if (ds.length === 0) { container.innerHTML = '<p class=\"empty-message\">Kh\u00f4ng t\u00ecm th\u1ea5y nh\u00e2n vi\u00ean n\u00e0o<\/p>'; }\n else {\n let html = `<table><thead><tr><th>M\u00e3 NV<\/th><th>H\u1ecd T\u00ean<\/th><th>Ch\u1ee9c V\u1ee5<\/th><th>Ph\u00f2ng Ban<\/th><th>Ng\u00e0y C\u00f4ng<\/th><th>T\u1ed5ng Thu Nh\u1eadp<\/th><th>L\u01b0\u01a1ng Th\u1ef1c Nh\u1eadn<\/th><th>Thao T\u00e1c<\/th><\/tr><\/thead><tbody>`;\n ds.forEach((nv, i) => {\n const realIndex = danhSachNhanVien.indexOf(nv);\n html += `<tr><td>${escapeHtml(nv.maNV)}<\/td><td>${escapeHtml(nv.hoTen)}<\/td><td>${escapeHtml(nv.chucVu)}<\/td><td>${escapeHtml(nv.phongBan)}<\/td><td>${nv.ngayCong}<\/td><td>${formatTien(nv.tongThuNhap)}<\/td><td>${formatTien(nv.luongThucNhan)}<\/td><td><button class=\"action-btn view-btn\" onclick=\"xemChiTietByIndex(${realIndex})\">Xem<\/button><button class=\"action-btn edit-btn\" onclick=\"suaNhanVienByIndex(${realIndex})\">S\u1eeda<\/button><button class=\"action-btn delete-btn\" onclick=\"xoaNhanVienByIndex(${realIndex})\">X\u00f3a<\/button><\/td><\/tr>`;\n });\n html += '<\/tbody><\/table>';\n container.innerHTML = html;\n }\n\n const tongNV = danhSachNhanVien.length;\n const tongLuong = danhSachNhanVien.reduce((s, nv) => s + nv.luongThucNhan, 0);\n document.getElementById('tongNV').textContent = tongNV;\n document.getElementById('tongLuong').textContent = formatTien(tongLuong);\n document.getElementById('luongTB').textContent = formatTien(tongNV > 0 ? tongLuong \/ tongNV : 0);\n document.getElementById('luongMax').textContent = formatTien(tongNV > 0 ? Math.max(...danhSachNhanVien.map(nv => nv.luongThucNhan)) : 0);\n document.getElementById('luongMin').textContent = formatTien(tongNV > 0 ? Math.min(...danhSachNhanVien.map(nv => nv.luongThucNhan)) : 0);\n }\n\n function capNhatBaoCao() {\n const locPhongBan = document.getElementById('locPhongBan').value;\n let ds = locPhongBan ? danhSachNhanVien.filter(nv => nv.phongBan === locPhongBan) : danhSachNhanVien;\n\n const tongNV = ds.length;\n const tongLuong = ds.reduce((s, nv) => s + nv.luongThucNhan, 0);\n const tongBH = ds.reduce((s, nv) => s + nv.tongBaoHiem, 0);\n\n document.getElementById('baoCaoTongNV').textContent = tongNV;\n document.getElementById('baoCaoTongLuong').textContent = formatTien(tongLuong);\n document.getElementById('baoCaoTongBH').textContent = formatTien(tongBH);\n\n const luongTheoPhongBan = {};\n danhSachNhanVien.forEach(nv => { luongTheoPhongBan[nv.phongBan] = (luongTheoPhongBan[nv.phongBan] || 0) + nv.luongThucNhan; });\n const maxLuong = Math.max(...Object.values(luongTheoPhongBan), 1);\n const bieuDoContainer = document.getElementById('bieuDoPhongBan');\n \n if (Object.keys(luongTheoPhongBan).length > 0) {\n bieuDoContainer.innerHTML = Object.entries(luongTheoPhongBan).map(([pb, luong]) => {\n const height = (luong \/ maxLuong) * 150;\n return `<div class=\"bar-item\"><div class=\"bar-value\">${formatTien(luong)}<\/div><div class=\"bar\" style=\"height: ${height}px;\"><\/div><div class=\"bar-label\">${escapeHtml(pb)}<\/div><\/div>`;\n }).join('');\n } else { bieuDoContainer.innerHTML = '<p style=\"text-align:center;color:#718096;\">Ch\u01b0a c\u00f3 d\u1eef li\u1ec7u<\/p>'; }\n\n const bangBaoCao = document.getElementById('bangBaoCao');\n if (ds.length > 0) {\n let html = `<table><thead><tr><th>STT<\/th><th>M\u00e3 NV<\/th><th>H\u1ecd T\u00ean<\/th><th>Ph\u00f2ng Ban<\/th><th>T\u1ed5ng Thu Nh\u1eadp<\/th><th>B\u1ea3o Hi\u1ec3m<\/th><th>Thu\u1ebf TNCN<\/th><th>Th\u1ef1c Nh\u1eadn<\/th><\/tr><\/thead><tbody>`;\n ds.forEach((nv, i) => {\n html += `<tr><td>${i + 1}<\/td><td>${escapeHtml(nv.maNV)}<\/td><td>${escapeHtml(nv.hoTen)}<\/td><td>${escapeHtml(nv.phongBan)}<\/td><td>${formatTien(nv.tongThuNhap)}<\/td><td>${formatTien(nv.tongBaoHiem)}<\/td><td>${formatTien(nv.thueTNCN)}<\/td><td>${formatTien(nv.luongThucNhan)}<\/td><\/tr>`;\n });\n html += `<tr style=\"font-weight:bold;background:#e2e8f0;\"><td colspan=\"4\">T\u1ed4NG C\u1ed8NG<\/td><td>${formatTien(ds.reduce((s,nv)=>s+nv.tongThuNhap,0))}<\/td><td>${formatTien(tongBH)}<\/td><td>${formatTien(ds.reduce((s,nv)=>s+nv.thueTNCN,0))}<\/td><td>${formatTien(tongLuong)}<\/td><\/tr><\/tbody><\/table>`;\n bangBaoCao.innerHTML = html;\n } else { bangBaoCao.innerHTML = '<p class=\"empty-message\">Kh\u00f4ng c\u00f3 d\u1eef li\u1ec7u<\/p>'; }\n }\n\n function inBaoCao() { window.print(); }\n\n function xuatCSV() {\n if (danhSachNhanVien.length === 0) { alert('Kh\u00f4ng c\u00f3 d\u1eef li\u1ec7u!'); return; }\n let csv = '\\uFEFF' + 'STT,M\u00e3 NV,H\u1ecd T\u00ean,Ch\u1ee9c V\u1ee5,Ph\u00f2ng Ban,L\u01b0\u01a1ng C\u01a1 B\u1ea3n,Ng\u00e0y C\u00f4ng,T\u1ed5ng Thu Nh\u1eadp,B\u1ea3o Hi\u1ec3m,Thu\u1ebf TNCN,L\u01b0\u01a1ng Th\u1ef1c Nh\u1eadn\\n';\n danhSachNhanVien.forEach((nv, i) => {\n csv += `${i+1},\"${nv.maNV}\",\"${nv.hoTen}\",\"${nv.chucVu}\",\"${nv.phongBan}\",${nv.luongCoBan},${nv.ngayCong},${Math.round(nv.tongThuNhap)},${Math.round(nv.tongBaoHiem)},${Math.round(nv.thueTNCN)},${Math.round(nv.luongThucNhan)}\\n`;\n });\n const blob = new Blob([csv], { type: 'text\/csv;charset=utf-8;' });\n const link = document.createElement('a');\n link.href = URL.createObjectURL(blob);\n link.download = 'bang_luong_' + new Date().toISOString().slice(0,10) + '.csv';\n link.click();\n }\n\n function xoaForm() {\n document.getElementById('maNV').value = '';\n document.getElementById('hoTen').value = '';\n document.getElementById('chucVu').selectedIndex = 0;\n document.getElementById('phongBan').selectedIndex = 0;\n document.getElementById('luongCoBan').value = '10000000';\n document.getElementById('ngayCongChuan').value = '26';\n document.getElementById('ngayCong').value = '26';\n document.getElementById('gioLamThem').value = '0';\n document.getElementById('phuCapChucVu').value = '0';\n document.getElementById('phuCapAn').value = '730000';\n document.getElementById('phuCapXe').value = '500000';\n document.getElementById('phuCapDienThoai').value = '200000';\n document.getElementById('phuCapNhaO').value = '0';\n document.getElementById('phuCapDocHai').value = '0';\n document.getElementById('thuongKhac').value = '0';\n document.getElementById('bhxh').value = '8';\n document.getElementById('bhyt').value = '1.5';\n document.getElementById('bhtn').value = '1';\n document.getElementById('luongDongBH').value = '10000000';\n document.getElementById('nguoiPhuThuoc').value = '0';\n document.getElementById('tamUng').value = '0';\n document.getElementById('khauTruKhac').value = '0';\n document.getElementById('ketQuaCard').style.display = 'none';\n }\n\n function luuDuLieu() {\n localStorage.setItem('danhSachNhanVien', JSON.stringify(danhSachNhanVien));\n localStorage.setItem('danhSachNhanVienDaLuu', JSON.stringify(danhSachNhanVienDaLuu));\n }\n\n function taiDuLieu() {\n const saved = localStorage.getItem('danhSachNhanVien');\n const savedAll = localStorage.getItem('danhSachNhanVienDaLuu');\n if (saved) danhSachNhanVien = JSON.parse(saved);\n if (savedAll) danhSachNhanVienDaLuu = JSON.parse(savedAll);\n }\n\n taiDuLieu();\n capNhatDanhSach();\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Ch\u1ea5m B\u1ea3ng L\u01b0\u01a1ng Nh\u00e2n Vi\u00ean Ch\u1ea5m B\u1ea3ng L\u01b0\u01a1ng Nh\u00e2n Vi\u00ean Ch\u1ea5m L\u01b0\u01a1ng Danh S\u00e1ch Nh\u00e2n Vi\u00ean B\u00e1o C\u00e1o Th\u00f4ng Tin Nh\u00e2n Vi\u00ean M\u00e3 Nh\u00e2n Vi\u00ean H\u1ecd v\u00e0 T\u00ean Ch\u1ee9c V\u1ee5 Nh\u00e2n vi\u00eanTr\u01b0\u1edfng nh\u00f3mPh\u00f3 ph\u00f2ngTr\u01b0\u1edfng ph\u00f2ngGi\u00e1m \u0111\u1ed1c Ph\u00f2ng Ban Kinh doanhK\u1ebf to\u00e1nNh\u00e2n s\u1ef1K\u1ef9 thu\u1eadtMarketingS\u1ea3n xu\u1ea5t Th\u00f4ng Tin Ch\u1ea5m C\u00f4ng & L\u01b0\u01a1ng L\u01b0\u01a1ng c\u01a1 b\u1ea3n & Ng\u00e0y<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-10124","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/midar.vn\/vi\/wp-json\/wp\/v2\/pages\/10124","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/midar.vn\/vi\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/midar.vn\/vi\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/midar.vn\/vi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/midar.vn\/vi\/wp-json\/wp\/v2\/comments?post=10124"}],"version-history":[{"count":1,"href":"https:\/\/midar.vn\/vi\/wp-json\/wp\/v2\/pages\/10124\/revisions"}],"predecessor-version":[{"id":10125,"href":"https:\/\/midar.vn\/vi\/wp-json\/wp\/v2\/pages\/10124\/revisions\/10125"}],"wp:attachment":[{"href":"https:\/\/midar.vn\/vi\/wp-json\/wp\/v2\/media?parent=10124"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":10124,"date":"2025-12-26T14:05:40","date_gmt":"2025-12-26T07:05:40","guid":{"rendered":"https:\/\/midar.vn\/?page_id=10124"},"modified":"2025-12-26T14:05:40","modified_gmt":"2025-12-26T07:05:40","slug":"luong-nhan-vien-lite","status":"publish","type":"page","link":"https:\/\/midar.vn\/vi\/luong-nhan-vien-lite\/","title":{"rendered":"Luong Nhan Vien (lite)"},"content":{"rendered":"\n\n\n\n \n \n Ch\u1ea5m B\u1ea3ng L\u01b0\u01a1ng Nh\u00e2n Vi\u00ean<\/title>\n <style>\n * { margin: 0; padding: 0; box-sizing: border-box; }\n body {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n min-height: 100vh;\n padding: 20px;\n }\n .container { max-width: 1200px; margin: 0 auto; }\n h1 { text-align: center; color: white; margin-bottom: 20px; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); }\n .nav-tabs { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; justify-content: center; }\n .nav-tab {\n padding: 12px 25px; background: rgba(255,255,255,0.2); color: white; border: none;\n border-radius: 10px 10px 0 0; cursor: pointer; font-size: 16px; font-weight: 600; transition: all 0.3s;\n }\n .nav-tab:hover { background: rgba(255,255,255,0.3); }\n .nav-tab.active { background: white; color: #5a67d8; }\n .tab-content { display: none; }\n .tab-content.active { display: block; }\n .card { background: white; border-radius: 15px; padding: 25px; margin-bottom: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }\n .card h2 { color: #5a67d8; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid #e2e8f0; }\n .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 15px; }\n .form-group { display: flex; flex-direction: column; position: relative; }\n .form-group label { font-weight: 600; color: #4a5568; margin-bottom: 5px; font-size: 14px; }\n .form-group input, .form-group select {\n padding: 12px; border: 2px solid #e2e8f0; border-radius: 8px; font-size: 14px; transition: border-color 0.3s;\n }\n .form-group input:focus, .form-group select:focus { outline: none; border-color: #5a67d8; }\n .suggestions { position: absolute; top: 100%; left: 0; right: 0; background: white; border: 2px solid #e2e8f0; border-top: none; border-radius: 0 0 8px 8px; max-height: 150px; overflow-y: auto; z-index: 100; display: none; }\n .suggestions.show { display: block; }\n .suggestion-item { padding: 10px 12px; cursor: pointer; border-bottom: 1px solid #e2e8f0; }\n .suggestion-item:hover { background: #f7fafc; }\n .btn { padding: 12px 30px; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s; margin: 5px; }\n .btn-primary { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; }\n .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4); }\n .btn-danger { background: #e53e3e; color: white; }\n .btn-success { background: #38a169; color: white; }\n .btn-secondary { background: #718096; color: white; }\n .btn-group { text-align: center; margin-top: 20px; }\n table { width: 100%; border-collapse: collapse; margin-top: 15px; }\n th, td { padding: 12px; text-align: left; border-bottom: 1px solid #e2e8f0; }\n th { background: #5a67d8; color: white; font-weight: 600; }\n tr:hover { background: #f7fafc; }\n .salary-breakdown { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px; margin-top: 15px; }\n .breakdown-item { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 15px; border-radius: 10px; text-align: center; }\n .breakdown-item h3 { font-size: 13px; opacity: 0.9; margin-bottom: 8px; }\n .breakdown-item .amount { font-size: 18px; font-weight: bold; }\n .total-salary { background: linear-gradient(135deg, #38a169 0%, #2f855a 100%); }\n .deduction { background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%); }\n .action-btn { padding: 6px 12px; border: none; border-radius: 5px; cursor: pointer; font-size: 12px; margin: 2px; }\n .view-btn { background: #4299e1; color: white; }\n .edit-btn { background: #ed8936; color: white; }\n .delete-btn { background: #e53e3e; color: white; }\n .empty-message { text-align: center; color: #718096; padding: 40px; font-style: italic; }\n .summary-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; margin-bottom: 20px; }\n .stat-item { background: #f7fafc; padding: 15px; border-radius: 10px; text-align: center; }\n .stat-item h4 { color: #718096; font-size: 12px; margin-bottom: 5px; }\n .stat-item .value { color: #5a67d8; font-size: 18px; font-weight: bold; }\n .search-box { display: flex; gap: 10px; margin-bottom: 15px; }\n .search-box input { flex: 1; padding: 12px; border: 2px solid #e2e8f0; border-radius: 8px; font-size: 14px; }\n .filter-group { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 15px; }\n .filter-group select { padding: 10px 15px; border: 2px solid #e2e8f0; border-radius: 8px; font-size: 14px; }\n .chart-container { background: #f7fafc; border-radius: 10px; padding: 20px; margin-bottom: 20px; }\n .bar-chart { display: flex; align-items: flex-end; gap: 20px; height: 200px; padding: 20px 0; }\n .bar-item { flex: 1; display: flex; flex-direction: column; align-items: center; }\n .bar { width: 100%; max-width: 60px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 5px 5px 0 0; }\n .bar-label { margin-top: 10px; font-size: 11px; color: #4a5568; text-align: center; }\n .bar-value { font-size: 10px; color: #718096; margin-bottom: 5px; }\n .section-title { font-size: 14px; font-weight: 600; color: #5a67d8; margin: 15px 0 10px 0; padding-bottom: 5px; border-bottom: 1px solid #e2e8f0; }\n @media print { body { background: white; padding: 0; } .nav-tabs, .btn-group, .action-btn, .search-box, .filter-group { display: none !important; } .card { box-shadow: none; border: 1px solid #e2e8f0; } }\n @media (max-width: 768px) { .form-row { grid-template-columns: 1fr; } .nav-tab { padding: 10px 15px; font-size: 14px; } }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <h1>Ch\u1ea5m B\u1ea3ng L\u01b0\u01a1ng Nh\u00e2n Vi\u00ean<\/h1>\n <div class=\"nav-tabs\">\n <button class=\"nav-tab active\" onclick=\"chuyenTab('chamLuong')\">Ch\u1ea5m L\u01b0\u01a1ng<\/button>\n <button class=\"nav-tab\" onclick=\"chuyenTab('danhSach')\">Danh S\u00e1ch Nh\u00e2n Vi\u00ean<\/button>\n <button class=\"nav-tab\" onclick=\"chuyenTab('baoCao')\">B\u00e1o C\u00e1o<\/button>\n <\/div>\n\n <div id=\"chamLuong\" class=\"tab-content active\">\n <div class=\"card\">\n <h2>Th\u00f4ng Tin Nh\u00e2n Vi\u00ean<\/h2>\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label>M\u00e3 Nh\u00e2n Vi\u00ean<\/label>\n <input type=\"text\" id=\"maNV\" placeholder=\"VD: NV001\" oninput=\"goiYNhanVien('maNV')\">\n <div class=\"suggestions\" id=\"maNV_suggestions\"><\/div>\n <\/div>\n <div class=\"form-group\">\n <label>H\u1ecd v\u00e0 T\u00ean<\/label>\n <input type=\"text\" id=\"hoTen\" placeholder=\"Nh\u1eadp h\u1ecd t\u00ean\" oninput=\"goiYNhanVien('hoTen')\">\n <div class=\"suggestions\" id=\"hoTen_suggestions\"><\/div>\n <\/div>\n <div class=\"form-group\">\n <label>Ch\u1ee9c V\u1ee5<\/label>\n <select id=\"chucVu\">\n <option value=\"nhan_vien\">Nh\u00e2n vi\u00ean<\/option>\n <option value=\"truong_nhom\">Tr\u01b0\u1edfng nh\u00f3m<\/option>\n <option value=\"pho_phong\">Ph\u00f3 ph\u00f2ng<\/option>\n <option value=\"truong_phong\">Tr\u01b0\u1edfng ph\u00f2ng<\/option>\n <option value=\"giam_doc\">Gi\u00e1m \u0111\u1ed1c<\/option>\n <\/select>\n <\/div>\n <div class=\"form-group\">\n <label>Ph\u00f2ng Ban<\/label>\n <select id=\"phongBan\">\n <option value=\"kinh_doanh\">Kinh doanh<\/option>\n <option value=\"ke_toan\">K\u1ebf to\u00e1n<\/option>\n <option value=\"nhan_su\">Nh\u00e2n s\u1ef1<\/option>\n <option value=\"ky_thuat\">K\u1ef9 thu\u1eadt<\/option>\n <option value=\"marketing\">Marketing<\/option>\n <option value=\"san_xuat\">S\u1ea3n xu\u1ea5t<\/option>\n <\/select>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"card\">\n <h2>Th\u00f4ng Tin Ch\u1ea5m C\u00f4ng & L\u01b0\u01a1ng<\/h2>\n <div class=\"section-title\">L\u01b0\u01a1ng c\u01a1 b\u1ea3n & Ng\u00e0y c\u00f4ng<\/div>\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label>L\u01b0\u01a1ng C\u01a1 B\u1ea3n (VN\u0110)<\/label>\n <input type=\"number\" id=\"luongCoBan\" value=\"10000000\">\n <\/div>\n <div class=\"form-group\">\n <label>S\u1ed1 Ng\u00e0y C\u00f4ng Chu\u1ea9n<\/label>\n <input type=\"number\" id=\"ngayCongChuan\" value=\"26\" min=\"1\" max=\"31\">\n <\/div>\n <div class=\"form-group\">\n <label>S\u1ed1 Ng\u00e0y C\u00f4ng Th\u1ef1c T\u1ebf<\/label>\n <input type=\"number\" id=\"ngayCong\" value=\"26\" min=\"0\" max=\"31\">\n <\/div>\n <div class=\"form-group\">\n <label>S\u1ed1 Gi\u1edd L\u00e0m Th\u00eam<\/label>\n <input type=\"number\" id=\"gioLamThem\" value=\"0\" min=\"0\">\n <\/div>\n <\/div>\n\n <div class=\"section-title\">C\u00e1c Kho\u1ea3n Ph\u1ee5 C\u1ea5p<\/div>\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label>Ph\u1ee5 C\u1ea5p Ch\u1ee9c V\u1ee5 (VN\u0110)<\/label>\n <input type=\"number\" id=\"phuCapChucVu\" value=\"0\">\n <\/div>\n <div class=\"form-group\">\n <label>Ph\u1ee5 C\u1ea5p \u0102n Tr\u01b0a (VN\u0110)<\/label>\n <input type=\"number\" id=\"phuCapAn\" value=\"730000\">\n <\/div>\n <div class=\"form-group\">\n <label>Ph\u1ee5 C\u1ea5p X\u0103ng Xe (VN\u0110)<\/label>\n <input type=\"number\" id=\"phuCapXe\" value=\"500000\">\n <\/div>\n <div class=\"form-group\">\n <label>Ph\u1ee5 C\u1ea5p \u0110i\u1ec7n Tho\u1ea1i (VN\u0110)<\/label>\n <input type=\"number\" id=\"phuCapDienThoai\" value=\"200000\">\n <\/div>\n <\/div>\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label>Ph\u1ee5 C\u1ea5p Nh\u00e0 \u1ede (VN\u0110)<\/label>\n <input type=\"number\" id=\"phuCapNhaO\" value=\"0\">\n <\/div>\n <div class=\"form-group\">\n <label>Ph\u1ee5 C\u1ea5p \u0110\u1ed9c H\u1ea1i (VN\u0110)<\/label>\n <input type=\"number\" id=\"phuCapDocHai\" value=\"0\">\n <\/div>\n <div class=\"form-group\">\n <label>Th\u01b0\u1edfng \/ Ph\u1ee5 C\u1ea5p Kh\u00e1c (VN\u0110)<\/label>\n <input type=\"number\" id=\"thuongKhac\" value=\"0\">\n <\/div>\n <\/div>\n\n <div class=\"section-title\">C\u00e1c Kho\u1ea3n Kh\u1ea5u Tr\u1eeb<\/div>\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label>BHXH (% l\u01b0\u01a1ng \u0111\u00f3ng BH)<\/label>\n <input type=\"number\" id=\"bhxh\" value=\"8\" step=\"0.1\">\n <\/div>\n <div class=\"form-group\">\n <label>BHYT (% l\u01b0\u01a1ng \u0111\u00f3ng BH)<\/label>\n <input type=\"number\" id=\"bhyt\" value=\"1.5\" step=\"0.1\">\n <\/div>\n <div class=\"form-group\">\n <label>BHTN (% l\u01b0\u01a1ng \u0111\u00f3ng BH)<\/label>\n <input type=\"number\" id=\"bhtn\" value=\"1\" step=\"0.1\">\n <\/div>\n <div class=\"form-group\">\n <label>L\u01b0\u01a1ng \u0110\u00f3ng B\u1ea3o Hi\u1ec3m (VN\u0110)<\/label>\n <input type=\"number\" id=\"luongDongBH\" value=\"10000000\">\n <\/div>\n <\/div>\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label>S\u1ed1 Ng\u01b0\u1eddi Ph\u1ee5 Thu\u1ed9c<\/label>\n <input type=\"number\" id=\"nguoiPhuThuoc\" value=\"0\" min=\"0\">\n <\/div>\n <div class=\"form-group\">\n <label>T\u1ea1m \u1ee8ng (VN\u0110)<\/label>\n <input type=\"number\" id=\"tamUng\" value=\"0\">\n <\/div>\n <div class=\"form-group\">\n <label>Kh\u1ea5u Tr\u1eeb Kh\u00e1c (VN\u0110)<\/label>\n <input type=\"number\" id=\"khauTruKhac\" value=\"0\">\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"btn-group\">\n <button class=\"btn btn-primary\" onclick=\"tinhLuong()\">T\u00ednh L\u01b0\u01a1ng<\/button>\n <button class=\"btn btn-success\" onclick=\"themNhanVien()\">Th\u00eam V\u00e0o Danh S\u00e1ch<\/button>\n <button class=\"btn btn-danger\" onclick=\"xoaForm()\">X\u00f3a Form<\/button>\n <\/div>\n\n <div class=\"card\" id=\"ketQuaCard\" style=\"display: none;\">\n <h2>K\u1ebft Qu\u1ea3 T\u00ednh L\u01b0\u01a1ng<\/h2>\n <div class=\"salary-breakdown\" id=\"ketQuaLuong\"><\/div>\n <\/div>\n <\/div>\n\n <div id=\"danhSach\" class=\"tab-content\">\n <div class=\"card\">\n <h2>Danh S\u00e1ch Nh\u00e2n Vi\u00ean<\/h2>\n <div class=\"search-box\">\n <input type=\"text\" id=\"timKiem\" placeholder=\"T\u00ecm ki\u1ebfm theo m\u00e3 NV ho\u1eb7c h\u1ecd t\u00ean...\" oninput=\"timKiemNhanVien()\">\n <\/div>\n <div class=\"summary-stats\">\n <div class=\"stat-item\"><h4>T\u1ed5ng Nh\u00e2n Vi\u00ean<\/h4><div class=\"value\" id=\"tongNV\">0<\/div><\/div>\n <div class=\"stat-item\"><h4>T\u1ed5ng L\u01b0\u01a1ng Chi Tr\u1ea3<\/h4><div class=\"value\" id=\"tongLuong\">0 \u0111<\/div><\/div>\n <div class=\"stat-item\"><h4>L\u01b0\u01a1ng Trung B\u00ecnh<\/h4><div class=\"value\" id=\"luongTB\">0 \u0111<\/div><\/div>\n <div class=\"stat-item\"><h4>L\u01b0\u01a1ng Cao Nh\u1ea5t<\/h4><div class=\"value\" id=\"luongMax\">0 \u0111<\/div><\/div>\n <div class=\"stat-item\"><h4>L\u01b0\u01a1ng Th\u1ea5p Nh\u1ea5t<\/h4><div class=\"value\" id=\"luongMin\">0 \u0111<\/div><\/div>\n <\/div>\n <div id=\"danhSachNV\"><p class=\"empty-message\">Ch\u01b0a c\u00f3 nh\u00e2n vi\u00ean n\u00e0o trong danh s\u00e1ch<\/p><\/div>\n <\/div>\n <\/div>\n\n <div id=\"baoCao\" class=\"tab-content\">\n <div class=\"card\">\n <h2>B\u00e1o C\u00e1o T\u1ed5ng H\u1ee3p<\/h2>\n <div class=\"filter-group\">\n <select id=\"locPhongBan\" onchange=\"capNhatBaoCao()\">\n <option value=\"\">T\u1ea5t c\u1ea3 ph\u00f2ng ban<\/option>\n <option value=\"Kinh doanh\">Kinh doanh<\/option>\n <option value=\"K\u1ebf to\u00e1n\">K\u1ebf to\u00e1n<\/option>\n <option value=\"Nh\u00e2n s\u1ef1\">Nh\u00e2n s\u1ef1<\/option>\n <option value=\"K\u1ef9 thu\u1eadt\">K\u1ef9 thu\u1eadt<\/option>\n <option value=\"Marketing\">Marketing<\/option>\n <option value=\"S\u1ea3n xu\u1ea5t\">S\u1ea3n xu\u1ea5t<\/option>\n <\/select>\n <button class=\"btn btn-secondary\" onclick=\"inBaoCao()\">In B\u00e1o C\u00e1o<\/button>\n <button class=\"btn btn-primary\" onclick=\"xuatCSV()\">Xu\u1ea5t CSV<\/button>\n <\/div>\n <div class=\"chart-container\">\n <h3 style=\"margin-bottom: 15px; color: #4a5568;\">Bi\u1ec3u \u0111\u1ed3 l\u01b0\u01a1ng theo ph\u00f2ng ban<\/h3>\n <div class=\"bar-chart\" id=\"bieuDoPhongBan\"><\/div>\n <\/div>\n <div class=\"summary-stats\">\n <div class=\"stat-item\"><h4>T\u1ed5ng Nh\u00e2n Vi\u00ean<\/h4><div class=\"value\" id=\"baoCaoTongNV\">0<\/div><\/div>\n <div class=\"stat-item\"><h4>T\u1ed5ng Chi Ph\u00ed L\u01b0\u01a1ng<\/h4><div class=\"value\" id=\"baoCaoTongLuong\">0 \u0111<\/div><\/div>\n <div class=\"stat-item\"><h4>T\u1ed5ng B\u1ea3o Hi\u1ec3m<\/h4><div class=\"value\" id=\"baoCaoTongBH\">0 \u0111<\/div><\/div>\n <\/div>\n <div id=\"bangBaoCao\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n let danhSachNhanVien = [];\n let danhSachNhanVienDaLuu = [];\n const GIAM_TRU_BAN_THAN = 11000000;\n const GIAM_TRU_PHU_THUOC = 4400000;\n\n function escapeHtml(text) {\n const div = document.createElement('div');\n div.textContent = text;\n return div.innerHTML;\n }\n function formatTien(so) { return new Intl.NumberFormat('vi-VN').format(Math.round(so)) + ' \u0111'; }\n function layGiaTri(id) { return parseFloat(document.getElementById(id).value) || 0; }\n function layText(id) { return document.getElementById(id).value.trim(); }\n function laySelectedText(id) { const s = document.getElementById(id); return s.options[s.selectedIndex].text; }\n\n function chuyenTab(tabId) {\n document.querySelectorAll('.tab-content').forEach(t => t.classList.remove('active'));\n document.querySelectorAll('.nav-tab').forEach(b => b.classList.remove('active'));\n document.getElementById(tabId).classList.add('active');\n event.target.classList.add('active');\n if (tabId === 'baoCao') capNhatBaoCao();\n }\n\n function goiYNhanVien(fieldId) {\n const input = document.getElementById(fieldId);\n const value = input.value.toLowerCase().trim();\n const suggestionsDiv = document.getElementById(fieldId + '_suggestions');\n if (!value) { suggestionsDiv.classList.remove('show'); return; }\n let matches = danhSachNhanVienDaLuu.filter(nv => \n fieldId === 'maNV' ? nv.maNV.toLowerCase().includes(value) : nv.hoTen.toLowerCase().includes(value)\n );\n if (matches.length > 0) {\n suggestionsDiv.innerHTML = matches.map(nv => `<div class=\"suggestion-item\" onclick=\"chonNhanVien('${escapeHtml(nv.maNV)}')\"><strong>${escapeHtml(nv.maNV)}<\/strong> - ${escapeHtml(nv.hoTen)}<\/div>`).join('');\n suggestionsDiv.classList.add('show');\n } else { suggestionsDiv.classList.remove('show'); }\n }\n\n function chonNhanVien(maNV) {\n const nv = danhSachNhanVienDaLuu.find(n => n.maNV === maNV);\n if (nv) {\n document.getElementById('maNV').value = nv.maNV;\n document.getElementById('hoTen').value = nv.hoTen;\n document.getElementById('luongCoBan').value = nv.luongCoBan;\n document.getElementById('luongDongBH').value = nv.luongDongBH || nv.luongCoBan;\n const chucVuSelect = document.getElementById('chucVu');\n for (let i = 0; i < chucVuSelect.options.length; i++) {\n if (chucVuSelect.options[i].text === nv.chucVu) { chucVuSelect.selectedIndex = i; break; }\n }\n const phongBanSelect = document.getElementById('phongBan');\n for (let i = 0; i < phongBanSelect.options.length; i++) {\n if (phongBanSelect.options[i].text === nv.phongBan) { phongBanSelect.selectedIndex = i; break; }\n }\n }\n document.querySelectorAll('.suggestions').forEach(s => s.classList.remove('show'));\n }\n\n document.addEventListener('click', function(e) {\n if (!e.target.closest('.form-group')) document.querySelectorAll('.suggestions').forEach(s => s.classList.remove('show'));\n });\n\n function kiemTraDuLieu() {\n const ngayCongChuan = layGiaTri('ngayCongChuan');\n if (ngayCongChuan <= 0) { alert('S\u1ed1 ng\u00e0y c\u00f4ng chu\u1ea9n ph\u1ea3i l\u1edbn h\u01a1n 0!'); return false; }\n return true;\n }\n\n function tinhLuong() {\n if (!kiemTraDuLieu()) return null;\n\n const luongCoBan = layGiaTri('luongCoBan');\n const ngayCongChuan = layGiaTri('ngayCongChuan');\n const ngayCong = layGiaTri('ngayCong');\n const gioLamThem = layGiaTri('gioLamThem');\n \n const phuCapChucVu = layGiaTri('phuCapChucVu');\n const phuCapAn = layGiaTri('phuCapAn');\n const phuCapXe = layGiaTri('phuCapXe');\n const phuCapDienThoai = layGiaTri('phuCapDienThoai');\n const phuCapNhaO = layGiaTri('phuCapNhaO');\n const phuCapDocHai = layGiaTri('phuCapDocHai');\n const thuongKhac = layGiaTri('thuongKhac');\n \n const bhxhRate = layGiaTri('bhxh') \/ 100;\n const bhytRate = layGiaTri('bhyt') \/ 100;\n const bhtnRate = layGiaTri('bhtn') \/ 100;\n const luongDongBH = layGiaTri('luongDongBH');\n const nguoiPhuThuoc = layGiaTri('nguoiPhuThuoc');\n const tamUng = layGiaTri('tamUng');\n const khauTruKhac = layGiaTri('khauTruKhac');\n\n const luongTheoNgay = (luongCoBan \/ ngayCongChuan) * ngayCong;\n const luongGio = luongCoBan \/ ngayCongChuan \/ 8;\n const luongLamThem = gioLamThem * luongGio * 1.5;\n const tongPhuCap = phuCapChucVu + phuCapAn + phuCapXe + phuCapDienThoai + phuCapNhaO + phuCapDocHai + thuongKhac;\n const tongThuNhap = luongTheoNgay + luongLamThem + tongPhuCap;\n \n const bhxh = luongDongBH * bhxhRate;\n const bhyt = luongDongBH * bhytRate;\n const bhtn = luongDongBH * bhtnRate;\n const tongBaoHiem = bhxh + bhyt + bhtn;\n \n const thuNhapChiuThue = tongThuNhap - tongBaoHiem - GIAM_TRU_BAN_THAN - (nguoiPhuThuoc * GIAM_TRU_PHU_THUOC);\n let thueTNCN = 0;\n if (thuNhapChiuThue > 0) {\n if (thuNhapChiuThue <= 5000000) thueTNCN = thuNhapChiuThue * 0.05;\n else if (thuNhapChiuThue <= 10000000) thueTNCN = 250000 + (thuNhapChiuThue - 5000000) * 0.1;\n else if (thuNhapChiuThue <= 18000000) thueTNCN = 750000 + (thuNhapChiuThue - 10000000) * 0.15;\n else if (thuNhapChiuThue <= 32000000) thueTNCN = 1950000 + (thuNhapChiuThue - 18000000) * 0.2;\n else if (thuNhapChiuThue <= 52000000) thueTNCN = 4750000 + (thuNhapChiuThue - 32000000) * 0.25;\n else if (thuNhapChiuThue <= 80000000) thueTNCN = 9750000 + (thuNhapChiuThue - 52000000) * 0.3;\n else thueTNCN = 18150000 + (thuNhapChiuThue - 80000000) * 0.35;\n }\n \n const tongKhauTru = tongBaoHiem + thueTNCN + tamUng + khauTruKhac;\n const luongThucNhan = tongThuNhap - tongKhauTru;\n\n const ketQua = { luongTheoNgay, luongLamThem, tongPhuCap, tongThuNhap, bhxh, bhyt, bhtn, tongBaoHiem, thuNhapChiuThue, thueTNCN, tamUng, khauTruKhac, tongKhauTru, luongThucNhan, luongDongBH, ngayCong, gioLamThem };\n hienThiKetQua(ketQua);\n return ketQua;\n }\n\n function hienThiKetQua(kq) {\n document.getElementById('ketQuaLuong').innerHTML = `\n <div class=\"breakdown-item\"><h3>L\u01b0\u01a1ng Theo Ng\u00e0y C\u00f4ng<\/h3><div class=\"amount\">${formatTien(kq.luongTheoNgay)}<\/div><\/div>\n <div class=\"breakdown-item\"><h3>L\u01b0\u01a1ng L\u00e0m Th\u00eam<\/h3><div class=\"amount\">${formatTien(kq.luongLamThem)}<\/div><\/div>\n <div class=\"breakdown-item\"><h3>T\u1ed5ng Ph\u1ee5 C\u1ea5p<\/h3><div class=\"amount\">${formatTien(kq.tongPhuCap)}<\/div><\/div>\n <div class=\"breakdown-item\"><h3>T\u1ed5ng Thu Nh\u1eadp<\/h3><div class=\"amount\">${formatTien(kq.tongThuNhap)}<\/div><\/div>\n <div class=\"breakdown-item deduction\"><h3>B\u1ea3o Hi\u1ec3m (${((kq.tongBaoHiem\/kq.luongDongBH)*100).toFixed(1)}%)<\/h3><div class=\"amount\">-${formatTien(kq.tongBaoHiem)}<\/div><\/div>\n <div class=\"breakdown-item deduction\"><h3>Thu\u1ebf TNCN<\/h3><div class=\"amount\">-${formatTien(kq.thueTNCN)}<\/div><\/div>\n <div class=\"breakdown-item deduction\"><h3>T\u1ea1m \u1ee8ng & Kh\u1ea5u Tr\u1eeb Kh\u00e1c<\/h3><div class=\"amount\">-${formatTien(kq.tamUng + kq.khauTruKhac)}<\/div><\/div>\n <div class=\"breakdown-item total-salary\"><h3>L\u01af\u01a0NG TH\u1ef0C NH\u1eacN<\/h3><div class=\"amount\">${formatTien(kq.luongThucNhan)}<\/div><\/div>\n `;\n document.getElementById('ketQuaCard').style.display = 'block';\n }\n\n function themNhanVien() {\n const maNV = layText('maNV'), hoTen = layText('hoTen');\n if (!maNV || !hoTen) { alert('Vui l\u00f2ng nh\u1eadp \u0111\u1ea7y \u0111\u1ee7 M\u00e3 NV v\u00e0 H\u1ecd T\u00ean!'); return; }\n const ketQua = tinhLuong();\n if (!ketQua) return;\n \n const nhanVien = {\n maNV, hoTen, chucVu: laySelectedText('chucVu'), phongBan: laySelectedText('phongBan'),\n luongCoBan: layGiaTri('luongCoBan'), luongDongBH: layGiaTri('luongDongBH'),\n ngayCong: ketQua.ngayCong, gioLamThem: ketQua.gioLamThem,\n tongThuNhap: ketQua.tongThuNhap, tongBaoHiem: ketQua.tongBaoHiem,\n thueTNCN: ketQua.thueTNCN, luongThucNhan: ketQua.luongThucNhan, ketQua\n };\n\n let index = danhSachNhanVien.findIndex(nv => nv.maNV === maNV);\n if (index >= 0) danhSachNhanVien[index] = nhanVien; else danhSachNhanVien.push(nhanVien);\n \n let savedIndex = danhSachNhanVienDaLuu.findIndex(nv => nv.maNV === maNV);\n if (savedIndex >= 0) danhSachNhanVienDaLuu[savedIndex] = nhanVien; else danhSachNhanVienDaLuu.push(nhanVien);\n\n luuDuLieu(); capNhatDanhSach(); xoaForm();\n alert('\u0110\u00e3 th\u00eam\/c\u1eadp nh\u1eadt nh\u00e2n vi\u00ean th\u00e0nh c\u00f4ng!');\n }\n\n function xoaNhanVienByIndex(index) {\n if (confirm('B\u1ea1n c\u00f3 ch\u1eafc mu\u1ed1n x\u00f3a nh\u00e2n vi\u00ean n\u00e0y?')) {\n danhSachNhanVien.splice(index, 1); luuDuLieu(); capNhatDanhSach();\n }\n }\n\n function suaNhanVienByIndex(index) {\n const nv = danhSachNhanVien[index];\n if (nv) { chonNhanVien(nv.maNV); document.getElementById('ngayCong').value = nv.ngayCong; chuyenTab('chamLuong'); document.querySelector('.nav-tab').click(); }\n }\n\n function xemChiTietByIndex(index) {\n const nv = danhSachNhanVien[index];\n if (nv) { chuyenTab('chamLuong'); document.querySelector('.nav-tab').click(); hienThiKetQua(nv.ketQua); document.getElementById('ketQuaCard').scrollIntoView({ behavior: 'smooth' }); }\n }\n\n function timKiemNhanVien() { capNhatDanhSach(document.getElementById('timKiem').value.toLowerCase().trim()); }\n\n function capNhatDanhSach(tuKhoa = '') {\n const container = document.getElementById('danhSachNV');\n let ds = tuKhoa ? danhSachNhanVien.filter(nv => nv.maNV.toLowerCase().includes(tuKhoa) || nv.hoTen.toLowerCase().includes(tuKhoa)) : danhSachNhanVien;\n \n if (ds.length === 0) { container.innerHTML = '<p class=\"empty-message\">Kh\u00f4ng t\u00ecm th\u1ea5y nh\u00e2n vi\u00ean n\u00e0o<\/p>'; }\n else {\n let html = `<table><thead><tr><th>M\u00e3 NV<\/th><th>H\u1ecd T\u00ean<\/th><th>Ch\u1ee9c V\u1ee5<\/th><th>Ph\u00f2ng Ban<\/th><th>Ng\u00e0y C\u00f4ng<\/th><th>T\u1ed5ng Thu Nh\u1eadp<\/th><th>L\u01b0\u01a1ng Th\u1ef1c Nh\u1eadn<\/th><th>Thao T\u00e1c<\/th><\/tr><\/thead><tbody>`;\n ds.forEach((nv, i) => {\n const realIndex = danhSachNhanVien.indexOf(nv);\n html += `<tr><td>${escapeHtml(nv.maNV)}<\/td><td>${escapeHtml(nv.hoTen)}<\/td><td>${escapeHtml(nv.chucVu)}<\/td><td>${escapeHtml(nv.phongBan)}<\/td><td>${nv.ngayCong}<\/td><td>${formatTien(nv.tongThuNhap)}<\/td><td>${formatTien(nv.luongThucNhan)}<\/td><td><button class=\"action-btn view-btn\" onclick=\"xemChiTietByIndex(${realIndex})\">Xem<\/button><button class=\"action-btn edit-btn\" onclick=\"suaNhanVienByIndex(${realIndex})\">S\u1eeda<\/button><button class=\"action-btn delete-btn\" onclick=\"xoaNhanVienByIndex(${realIndex})\">X\u00f3a<\/button><\/td><\/tr>`;\n });\n html += '<\/tbody><\/table>';\n container.innerHTML = html;\n }\n\n const tongNV = danhSachNhanVien.length;\n const tongLuong = danhSachNhanVien.reduce((s, nv) => s + nv.luongThucNhan, 0);\n document.getElementById('tongNV').textContent = tongNV;\n document.getElementById('tongLuong').textContent = formatTien(tongLuong);\n document.getElementById('luongTB').textContent = formatTien(tongNV > 0 ? tongLuong \/ tongNV : 0);\n document.getElementById('luongMax').textContent = formatTien(tongNV > 0 ? Math.max(...danhSachNhanVien.map(nv => nv.luongThucNhan)) : 0);\n document.getElementById('luongMin').textContent = formatTien(tongNV > 0 ? Math.min(...danhSachNhanVien.map(nv => nv.luongThucNhan)) : 0);\n }\n\n function capNhatBaoCao() {\n const locPhongBan = document.getElementById('locPhongBan').value;\n let ds = locPhongBan ? danhSachNhanVien.filter(nv => nv.phongBan === locPhongBan) : danhSachNhanVien;\n\n const tongNV = ds.length;\n const tongLuong = ds.reduce((s, nv) => s + nv.luongThucNhan, 0);\n const tongBH = ds.reduce((s, nv) => s + nv.tongBaoHiem, 0);\n\n document.getElementById('baoCaoTongNV').textContent = tongNV;\n document.getElementById('baoCaoTongLuong').textContent = formatTien(tongLuong);\n document.getElementById('baoCaoTongBH').textContent = formatTien(tongBH);\n\n const luongTheoPhongBan = {};\n danhSachNhanVien.forEach(nv => { luongTheoPhongBan[nv.phongBan] = (luongTheoPhongBan[nv.phongBan] || 0) + nv.luongThucNhan; });\n const maxLuong = Math.max(...Object.values(luongTheoPhongBan), 1);\n const bieuDoContainer = document.getElementById('bieuDoPhongBan');\n \n if (Object.keys(luongTheoPhongBan).length > 0) {\n bieuDoContainer.innerHTML = Object.entries(luongTheoPhongBan).map(([pb, luong]) => {\n const height = (luong \/ maxLuong) * 150;\n return `<div class=\"bar-item\"><div class=\"bar-value\">${formatTien(luong)}<\/div><div class=\"bar\" style=\"height: ${height}px;\"><\/div><div class=\"bar-label\">${escapeHtml(pb)}<\/div><\/div>`;\n }).join('');\n } else { bieuDoContainer.innerHTML = '<p style=\"text-align:center;color:#718096;\">Ch\u01b0a c\u00f3 d\u1eef li\u1ec7u<\/p>'; }\n\n const bangBaoCao = document.getElementById('bangBaoCao');\n if (ds.length > 0) {\n let html = `<table><thead><tr><th>STT<\/th><th>M\u00e3 NV<\/th><th>H\u1ecd T\u00ean<\/th><th>Ph\u00f2ng Ban<\/th><th>T\u1ed5ng Thu Nh\u1eadp<\/th><th>B\u1ea3o Hi\u1ec3m<\/th><th>Thu\u1ebf TNCN<\/th><th>Th\u1ef1c Nh\u1eadn<\/th><\/tr><\/thead><tbody>`;\n ds.forEach((nv, i) => {\n html += `<tr><td>${i + 1}<\/td><td>${escapeHtml(nv.maNV)}<\/td><td>${escapeHtml(nv.hoTen)}<\/td><td>${escapeHtml(nv.phongBan)}<\/td><td>${formatTien(nv.tongThuNhap)}<\/td><td>${formatTien(nv.tongBaoHiem)}<\/td><td>${formatTien(nv.thueTNCN)}<\/td><td>${formatTien(nv.luongThucNhan)}<\/td><\/tr>`;\n });\n html += `<tr style=\"font-weight:bold;background:#e2e8f0;\"><td colspan=\"4\">T\u1ed4NG C\u1ed8NG<\/td><td>${formatTien(ds.reduce((s,nv)=>s+nv.tongThuNhap,0))}<\/td><td>${formatTien(tongBH)}<\/td><td>${formatTien(ds.reduce((s,nv)=>s+nv.thueTNCN,0))}<\/td><td>${formatTien(tongLuong)}<\/td><\/tr><\/tbody><\/table>`;\n bangBaoCao.innerHTML = html;\n } else { bangBaoCao.innerHTML = '<p class=\"empty-message\">Kh\u00f4ng c\u00f3 d\u1eef li\u1ec7u<\/p>'; }\n }\n\n function inBaoCao() { window.print(); }\n\n function xuatCSV() {\n if (danhSachNhanVien.length === 0) { alert('Kh\u00f4ng c\u00f3 d\u1eef li\u1ec7u!'); return; }\n let csv = '\\uFEFF' + 'STT,M\u00e3 NV,H\u1ecd T\u00ean,Ch\u1ee9c V\u1ee5,Ph\u00f2ng Ban,L\u01b0\u01a1ng C\u01a1 B\u1ea3n,Ng\u00e0y C\u00f4ng,T\u1ed5ng Thu Nh\u1eadp,B\u1ea3o Hi\u1ec3m,Thu\u1ebf TNCN,L\u01b0\u01a1ng Th\u1ef1c Nh\u1eadn\\n';\n danhSachNhanVien.forEach((nv, i) => {\n csv += `${i+1},\"${nv.maNV}\",\"${nv.hoTen}\",\"${nv.chucVu}\",\"${nv.phongBan}\",${nv.luongCoBan},${nv.ngayCong},${Math.round(nv.tongThuNhap)},${Math.round(nv.tongBaoHiem)},${Math.round(nv.thueTNCN)},${Math.round(nv.luongThucNhan)}\\n`;\n });\n const blob = new Blob([csv], { type: 'text\/csv;charset=utf-8;' });\n const link = document.createElement('a');\n link.href = URL.createObjectURL(blob);\n link.download = 'bang_luong_' + new Date().toISOString().slice(0,10) + '.csv';\n link.click();\n }\n\n function xoaForm() {\n document.getElementById('maNV').value = '';\n document.getElementById('hoTen').value = '';\n document.getElementById('chucVu').selectedIndex = 0;\n document.getElementById('phongBan').selectedIndex = 0;\n document.getElementById('luongCoBan').value = '10000000';\n document.getElementById('ngayCongChuan').value = '26';\n document.getElementById('ngayCong').value = '26';\n document.getElementById('gioLamThem').value = '0';\n document.getElementById('phuCapChucVu').value = '0';\n document.getElementById('phuCapAn').value = '730000';\n document.getElementById('phuCapXe').value = '500000';\n document.getElementById('phuCapDienThoai').value = '200000';\n document.getElementById('phuCapNhaO').value = '0';\n document.getElementById('phuCapDocHai').value = '0';\n document.getElementById('thuongKhac').value = '0';\n document.getElementById('bhxh').value = '8';\n document.getElementById('bhyt').value = '1.5';\n document.getElementById('bhtn').value = '1';\n document.getElementById('luongDongBH').value = '10000000';\n document.getElementById('nguoiPhuThuoc').value = '0';\n document.getElementById('tamUng').value = '0';\n document.getElementById('khauTruKhac').value = '0';\n document.getElementById('ketQuaCard').style.display = 'none';\n }\n\n function luuDuLieu() {\n localStorage.setItem('danhSachNhanVien', JSON.stringify(danhSachNhanVien));\n localStorage.setItem('danhSachNhanVienDaLuu', JSON.stringify(danhSachNhanVienDaLuu));\n }\n\n function taiDuLieu() {\n const saved = localStorage.getItem('danhSachNhanVien');\n const savedAll = localStorage.getItem('danhSachNhanVienDaLuu');\n if (saved) danhSachNhanVien = JSON.parse(saved);\n if (savedAll) danhSachNhanVienDaLuu = JSON.parse(savedAll);\n }\n\n taiDuLieu();\n capNhatDanhSach();\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Ch\u1ea5m B\u1ea3ng L\u01b0\u01a1ng Nh\u00e2n Vi\u00ean Ch\u1ea5m B\u1ea3ng L\u01b0\u01a1ng Nh\u00e2n Vi\u00ean Ch\u1ea5m L\u01b0\u01a1ng Danh S\u00e1ch Nh\u00e2n Vi\u00ean B\u00e1o C\u00e1o Th\u00f4ng Tin Nh\u00e2n Vi\u00ean M\u00e3 Nh\u00e2n Vi\u00ean H\u1ecd v\u00e0 T\u00ean Ch\u1ee9c V\u1ee5 Nh\u00e2n vi\u00eanTr\u01b0\u1edfng nh\u00f3mPh\u00f3 ph\u00f2ngTr\u01b0\u1edfng ph\u00f2ngGi\u00e1m \u0111\u1ed1c Ph\u00f2ng Ban Kinh doanhK\u1ebf to\u00e1nNh\u00e2n s\u1ef1K\u1ef9 thu\u1eadtMarketingS\u1ea3n xu\u1ea5t Th\u00f4ng Tin Ch\u1ea5m C\u00f4ng & L\u01b0\u01a1ng L\u01b0\u01a1ng c\u01a1 b\u1ea3n & Ng\u00e0y<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-10124","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/midar.vn\/vi\/wp-json\/wp\/v2\/pages\/10124","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/midar.vn\/vi\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/midar.vn\/vi\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/midar.vn\/vi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/midar.vn\/vi\/wp-json\/wp\/v2\/comments?post=10124"}],"version-history":[{"count":1,"href":"https:\/\/midar.vn\/vi\/wp-json\/wp\/v2\/pages\/10124\/revisions"}],"predecessor-version":[{"id":10125,"href":"https:\/\/midar.vn\/vi\/wp-json\/wp\/v2\/pages\/10124\/revisions\/10125"}],"wp:attachment":[{"href":"https:\/\/midar.vn\/vi\/wp-json\/wp\/v2\/media?parent=10124"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}