{"id":3613,"date":"2025-10-17T01:32:12","date_gmt":"2025-10-16T18:32:12","guid":{"rendered":"https:\/\/hcbiopharm.net\/?page_id=3613"},"modified":"2025-10-28T23:15:52","modified_gmt":"2025-10-28T16:15:52","slug":"lp","status":"publish","type":"page","link":"https:\/\/hcbiopharm.net\/en\/lp\/","title":{"rendered":"linh plan"},"content":{"rendered":"
\n\t\t\t\t
\r\n\t\t\t\t\t
\r\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Linh Financial<\/title>\r\n \r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js@4.4.1\/dist\/chart.umd.min.js\"><\/script>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/xlsx\/0.18.5\/xlsx.full.min.js\"><\/script>\r\n <script src=\"https:\/\/code.jquery.com\/jquery-3.6.0.min.js\"><\/script>\r\n \r\n <style>\r\n \/* \uae30\uc874 CSS\ub294 \ud6a8\uc728\uc131\uc744 \uc704\ud574 \uc0dd\ub7b5\ud558\uace0, \uace0\uc815 \uc9c0\ucd9c \ub2ec\ub825 \uad00\ub828 \uc2a4\ud0c0\uc77c\ub9cc \ucd94\uac00\ud588\uc2b5\ub2c8\ub2e4. *\/\r\n \r\n \/* \uae30\uc874 CSS (\uc0dd\ub7b5) *\/\r\n * { margin: 0; padding: 0; box-sizing: border-box; }\r\n :root {\r\n --primary: #6366f1; --primary-dark: #4f46e5; --secondary: #8b5cf6; --success: #10b981; --danger: #ef4444; --warning: #f59e0b; --info: #06b6d4; --dark: #1e293b; --light: #f8fafc; --gray: #64748b; --border: #e2e8f0; --card-bg: #ffffff; --text-primary: #0f172a; --text-secondary: #64748b; --gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --gradient-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); --gradient-3: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); --gradient-4: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);\r\n }\r\n body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; color: var(--text-primary); padding-bottom: 2rem; }\r\n .container { max-width: 1400px; margin: 0 auto; padding: 1rem; }\r\n header { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border-radius: 20px; padding: 1.5rem; margin-bottom: 1.5rem; box-shadow: var(--shadow-xl); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }\r\n .header-title { display: flex; align-items: center; gap: 0.75rem; }\r\n .header-title h1 { font-size: 1.75rem; font-weight: 800; background: var(--gradient-1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }\r\n .header-controls { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }\r\n .lang-selector { display: flex; background: var(--light); border-radius: 12px; padding: 0.25rem; gap: 0.25rem; }\r\n .lang-btn { padding: 0.5rem 1rem; border: none; background: transparent; border-radius: 10px; cursor: pointer; font-weight: 600; transition: all 0.3s; font-size: 0.875rem; }\r\n .lang-btn.active { background: var(--primary); color: white; box-shadow: var(--shadow); }\r\n .dashboard { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }\r\n .balance-card { background: var(--card-bg); border-radius: 20px; padding: 1.5rem; box-shadow: var(--shadow-lg); transition: transform 0.3s, box-shadow 0.3s; position: relative; overflow: hidden; }\r\n .balance-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); }\r\n .balance-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--gradient-1); }\r\n .balance-card.cash::before { background: var(--gradient-2); }\r\n .balance-card.corporate::before { background: var(--gradient-3); }\r\n .balance-card.personal::before { background: var(--gradient-4); }\r\n .balance-label { font-size: 0.875rem; color: var(--text-secondary); font-weight: 600; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; }\r\n .balance-amount { font-size: 2rem; font-weight: 800; color: var(--text-primary); margin-bottom: 0.5rem; }\r\n .summary-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }\r\n .summary-card { background: var(--card-bg); border-radius: 16px; padding: 1.25rem; box-shadow: var(--shadow); display: flex; align-items: center; gap: 1rem; }\r\n .summary-icon { width: 50px; height: 50px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; }\r\n .summary-icon.income { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }\r\n .summary-icon.expense { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); }\r\n .summary-info h3 { font-size: 0.75rem; color: var(--text-secondary); font-weight: 600; margin-bottom: 0.25rem; }\r\n .summary-info p { font-size: 1.5rem; font-weight: 800; color: var(--text-primary); }\r\n .quick-input { background: var(--card-bg); border-radius: 20px; padding: 1.5rem; margin-bottom: 1.5rem; box-shadow: var(--shadow-lg); }\r\n .section-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.5rem; }\r\n .section-title::before { content: ''; width: 4px; height: 1.5rem; background: var(--gradient-1); border-radius: 2px; }\r\n .input-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1rem; }\r\n .form-group { display: flex; flex-direction: column; gap: 0.5rem; }\r\n .form-group label { font-size: 0.875rem; font-weight: 600; color: var(--text-secondary); }\r\n .form-control { padding: 0.75rem 1rem; border: 2px solid var(--border); border-radius: 12px; font-size: 1rem; transition: all 0.3s; background: var(--light); }\r\n .form-control:focus { outline: none; border-color: var(--primary); background: white; box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1); }\r\n .btn-group { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 1rem; }\r\n .btn { padding: 0.875rem 1.5rem; border: none; border-radius: 12px; font-weight: 600; font-size: 1rem; cursor: pointer; transition: all 0.3s; display: flex; align-items: center; justify-content: center; gap: 0.5rem; box-shadow: var(--shadow); }\r\n .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }\r\n .btn:active { transform: translateY(0); }\r\n .btn-income { background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; }\r\n .btn-expense { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: white; }\r\n .btn-primary { background: var(--gradient-1); color: white; }\r\n .btn-secondary { background: var(--light); color: var(--text-primary); }\r\n .btn-danger { background: var(--danger); color: white; }\r\n .btn-sm { padding: 0.5rem 1rem; font-size: 0.875rem; }\r\n .charts-container { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem; }\r\n .chart-card { background: var(--card-bg); border-radius: 20px; padding: 1.5rem; box-shadow: var(--shadow-lg); }\r\n .chart-card.full-width { grid-column: 1 \/ -1; }\r\n .chart-wrapper { position: relative; height: 300px; }\r\n \r\n \/* \u2705 3. \ucc28\ud2b8 \ud06c\uae30 \ud655\uc7a5 - \ub3c4\ub11b\/\ud30c\uc774 \ucc28\ud2b8\uc6a9 *\/\r\n .charts-container .chart-card:not(.full-width) .chart-wrapper {\r\n height: 400px; \r\n }\r\n \r\n .transactions-section { background: var(--card-bg); border-radius: 20px; padding: 1.5rem; margin-bottom: 1.5rem; box-shadow: var(--shadow-lg); }\r\n .transactions-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; gap: 1rem; }\r\n .transaction-filters { display: flex; gap: 0.5rem; flex-wrap: wrap; }\r\n .filter-btn { padding: 0.5rem 1rem; border: 2px solid var(--border); background: white; border-radius: 10px; cursor: pointer; font-weight: 600; font-size: 0.875rem; transition: all 0.3s; }\r\n .filter-btn.active { background: var(--primary); color: white; border-color: var(--primary); }\r\n .transactions-list { display: flex; flex-direction: column; gap: 0.75rem; max-height: 500px; overflow-y: auto; }\r\n .transaction-item { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: var(--light); border-radius: 12px; transition: all 0.3s; cursor: pointer; }\r\n .transaction-item:hover { background: #e0e7ff; transform: translateX(4px); }\r\n .transaction-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.25rem; }\r\n .transaction-icon.income { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }\r\n .transaction-icon.expense { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); }\r\n .transaction-details { flex: 1; min-width: 0; }\r\n .transaction-category { font-weight: 600; font-size: 0.95rem; margin-bottom: 0.25rem; }\r\n .transaction-description { font-size: 0.8rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\r\n .transaction-amount { font-weight: 700; font-size: 1.1rem; flex-shrink: 0; }\r\n .transaction-amount.income { color: var(--success); }\r\n .transaction-amount.expense { color: var(--danger); }\r\n .transaction-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; flex-shrink: 0; }\r\n .transaction-date { font-size: 0.75rem; color: var(--text-secondary); }\r\n .transaction-account { font-size: 0.7rem; padding: 0.25rem 0.5rem; background: white; border-radius: 6px; color: var(--text-secondary); }\r\n .delete-btn { padding: 0.25rem 0.5rem; background: var(--danger); color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 0.75rem; opacity: 0; transition: opacity 0.3s; }\r\n .transaction-item:hover .delete-btn { opacity: 1; }\r\n \r\n .action-buttons { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1.5rem; }\r\n .empty-state { text-align: center; padding: 3rem 1rem; color: var(--text-secondary); }\r\n .empty-state-icon { font-size: 4rem; margin-bottom: 1rem; opacity: 0.3; }\r\n .loading { display: inline-block; width: 20px; height: 20px; border: 3px solid rgba(255,255,255,.3); border-radius: 50%; border-top-color: white; animation: spin 1s ease-in-out infinite; }\r\n @keyframes spin { to { transform: rotate(360deg); } }\r\n .toast { position: fixed; bottom: 2rem; right: 2rem; background: var(--dark); color: white; padding: 1rem 1.5rem; border-radius: 12px; box-shadow: var(--shadow-xl); transform: translateY(100px); opacity: 0; transition: all 0.3s; z-index: 1000; }\r\n .toast.show { transform: translateY(0); opacity: 1; }\r\n .toast.success { background: var(--success); }\r\n .toast.error { background: var(--danger); }\r\n .modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); z-index: 999; padding: 1rem; align-items: center; justify-content: center; display: none; }\r\n .modal.show { display: flex; }\r\n .modal-content { background: white; border-radius: 20px; padding: 2rem; max-width: 500px; width: 100%; box-shadow: var(--shadow-xl); }\r\n .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }\r\n .modal-title { font-size: 1.5rem; font-weight: 700; }\r\n .close-btn { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--text-secondary); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 8px; transition: all 0.3s; }\r\n .close-btn:hover { background: var(--light); }\r\n .modal-buttons { display: flex; gap: 0.75rem; margin-top: 1.5rem; }\r\n @media (max-width: 768px) { .container { padding: 0.75rem; } header { border-radius: 16px; padding: 1rem; } .header-title h1 { font-size: 1.25rem; } .balance-amount { font-size: 1.5rem; } .dashboard { grid-template-columns: 1fr; } .input-grid { grid-template-columns: 1fr; } .charts-container { grid-template-columns: 1fr; } .btn-group { grid-template-columns: 1fr; } .summary-cards { grid-template-columns: 1fr; } .transaction-item { flex-wrap: wrap; } .transaction-meta { flex-direction: row; width: 100%; justify-content: space-between; } }\r\n \r\n \/* --- Fixed Expense Calendar Styles --- *\/\r\n .fixed-expense-section {\r\n background: var(--card-bg);\r\n border-radius: 20px;\r\n padding: 1.5rem;\r\n margin-bottom: 1.5rem;\r\n box-shadow: var(--shadow-lg);\r\n display: grid;\r\n grid-template-columns: 1fr 1fr; \r\n gap: 1.5rem;\r\n }\r\n\r\n .calendar-controls {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 1rem;\r\n }\r\n\r\n .calendar-controls button {\r\n background: none;\r\n border: none;\r\n font-size: 1.5rem;\r\n cursor: pointer;\r\n color: var(--primary);\r\n padding: 0 0.5rem;\r\n }\r\n \r\n .calendar-controls button:hover { opacity: 0.8; }\r\n\r\n .calendar-grid {\r\n display: grid;\r\n grid-template-columns: repeat(7, 1fr);\r\n gap: 0.5rem;\r\n }\r\n\r\n .day-header {\r\n text-align: center;\r\n font-weight: 600;\r\n color: var(--text-secondary);\r\n font-size: 0.875rem;\r\n }\r\n .day-header:first-child { color: var(--danger); } \r\n .day-header:last-child { color: var(--primary-dark); } \r\n\r\n .day-cell {\r\n padding: 0.5rem 0.2rem;\r\n border-radius: 8px;\r\n background: var(--light);\r\n text-align: center;\r\n font-size: 0.8rem;\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n position: relative;\r\n min-height: 55px; \r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n border: 2px solid transparent;\r\n }\r\n\r\n .day-cell.empty { background: #f0f0f0; cursor: default; min-height: 55px; pointer-events: none; }\r\n .day-cell:not(.empty):hover { background: #e0e7ff; box-shadow: var(--shadow-sm); }\r\n .day-cell.selected { border: 2px solid var(--primary); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3); background: var(--light); }\r\n .day-cell.current-day { background: var(--primary); color: white; border-color: var(--primary); }\r\n .day-cell.current-day .day-expense-amount { color: white !important; font-weight: 700; }\r\n .day-cell.selected.current-day { background: var(--primary-dark); }\r\n\r\n .day-number { font-weight: 700; line-height: 1; padding-bottom: 2px; }\r\n\r\n .day-expense-amount {\r\n font-size: 0.65rem;\r\n font-weight: 700;\r\n color: var(--danger); \r\n margin-top: 2px;\r\n line-height: 1.2;\r\n word-break: break-all;\r\n }\r\n\r\n \/* Fixed Expense Input\/List Styling *\/\r\n .fixed-expense-list {\r\n margin-top: 1rem;\r\n max-height: 250px;\r\n overflow-y: auto;\r\n border-top: 1px solid var(--border);\r\n padding-top: 1rem;\r\n }\r\n \r\n .fixed-expense-item {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 0.5rem 0;\r\n border-bottom: 1px solid var(--light);\r\n font-size: 0.9rem;\r\n }\r\n\r\n .fixed-expense-item:last-child { border-bottom: none; }\r\n\r\n .fixed-expense-item .details { display: flex; flex-direction: column; align-items: flex-start; flex: 1; }\r\n\r\n .fixed-expense-item .amount { font-weight: 700; color: var(--danger); }\r\n \r\n .fixed-expense-buttons {\r\n display: flex;\r\n gap: 0.5rem;\r\n align-items: center;\r\n margin-top: 1rem;\r\n }\r\n\r\n \/* \u2705 1. \ud1a0\uae00 \uc2a4\uc704\uce58 \uc2a4\ud0c0\uc77c *\/\r\n .toggle-switch-container {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.75rem;\r\n font-size: 0.9rem;\r\n font-weight: 600;\r\n color: var(--text-primary);\r\n }\r\n\r\n .toggle-switch {\r\n position: relative;\r\n display: inline-block;\r\n width: 50px;\r\n height: 28px;\r\n }\r\n\r\n .toggle-switch input {\r\n opacity: 0;\r\n width: 0;\r\n height: 0;\r\n }\r\n\r\n .slider {\r\n position: absolute;\r\n cursor: pointer;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background-color: #ccc;\r\n transition: .4s;\r\n border-radius: 28px;\r\n }\r\n\r\n .slider:before {\r\n position: absolute;\r\n content: \"\";\r\n height: 20px;\r\n width: 20px;\r\n left: 4px;\r\n bottom: 4px;\r\n background-color: white;\r\n transition: .4s;\r\n border-radius: 50%;\r\n }\r\n\r\n input:checked + .slider {\r\n background-color: var(--success);\r\n }\r\n\r\n input:checked + .slider:before {\r\n transform: translateX(22px);\r\n }\r\n\r\n @media (max-width: 992px) {\r\n .fixed-expense-section { grid-template-columns: 1fr; }\r\n }\r\n \r\n \/* \uc794\uc561\uc774 \ub9c8\uc774\ub108\uc2a4\uc77c \ub54c \uae00\uc790\uc0c9 \ubcc0\uacbd *\/\r\n .balance-amount.negative { color: var(--danger); }\r\n \r\n \/* \ud3f0\ud2b8 \ud06c\uae30 \uc870\uc815 *\/\r\n .summary-info p { font-size: 1.25rem; }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"container\">\r\n <header>\r\n <div class=\"header-title\">\r\n <h1>\ud83d\udcb0 Linh Financial<\/h1>\r\n <\/div>\r\n <div class=\"header-controls\">\r\n <div class=\"lang-selector\">\r\n <button class=\"lang-btn active\" onclick=\"setLanguage('ko')\">\ud55c\uad6d\uc5b4<\/button>\r\n <button class=\"lang-btn\" onclick=\"setLanguage('vi')\">Ti\u1ebfng Vi\u1ec7t<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/header>\r\n\r\n <div class=\"dashboard\">\r\n <div class=\"balance-card cash\">\r\n <div class=\"balance-label\">\r\n <span>\ud83d\udcb5<\/span>\r\n <span class=\"translate\" data-ko=\"\ud604\uae08\" data-vi=\"Ti\u1ec1n m\u1eb7t\">\ud604\uae08<\/span>\r\n <\/div>\r\n <div class=\"balance-amount\" id=\"cashBalance\">0 \u20ab<\/div>\r\n <\/div>\r\n <div class=\"balance-card corporate\">\r\n <div class=\"balance-label\">\r\n <span>\ud83c\udfe2<\/span>\r\n <span class=\"translate\" data-ko=\"\ubc95\uc778\uacc4\uc88c\" data-vi=\"T\u00e0i kho\u1ea3n c\u00f4ng ty\">\ubc95\uc778\uacc4\uc88c<\/span>\r\n <\/div>\r\n <div class=\"balance-amount\" id=\"corporateBalance\">0 \u20ab<\/div>\r\n <\/div>\r\n <div class=\"balance-card personal\">\r\n <div class=\"balance-label\">\r\n <span>\ud83d\udc64<\/span>\r\n <span class=\"translate\" data-ko=\"\uac1c\uc778\uacc4\uc88c\" data-vi=\"T\u00e0i kho\u1ea3n c\u00e1 nh\u00e2n\">\uac1c\uc778\uacc4\uc88c<\/span>\r\n <\/div>\r\n <div class=\"balance-amount\" id=\"personalBalance\">0 \u20ab<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"summary-cards\">\r\n <div class=\"summary-card\">\r\n <div class=\"summary-icon income\">\ud83d\udcc8<\/div>\r\n <div class=\"summary-info\">\r\n <h3 class=\"translate\" data-ko=\"\uc774\ubc88\ub2ec \uc218\uc785\" data-vi=\"Thu nh\u1eadp th\u00e1ng n\u00e0y\">\uc774\ubc88\ub2ec \uc218\uc785<\/h3>\r\n <p id=\"monthlyIncome\">0 \u20ab<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"summary-card\">\r\n <div class=\"summary-icon expense\">\ud83d\udcc9<\/div>\r\n <div class=\"summary-info\">\r\n <h3 class=\"translate\" data-ko=\"\uc774\ubc88\ub2ec \uc9c0\ucd9c\" data-vi=\"Chi ti\u00eau th\u00e1ng n\u00e0y\">\uc774\ubc88\ub2ec \uc9c0\ucd9c<\/h3>\r\n <p id=\"monthlyExpense\">0 \u20ab<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"fixed-expense-section\">\r\n <div class=\"calendar-container\">\r\n <h2 class=\"section-title translate\" data-ko=\"\uc6d4 \uace0\uc815 \uc9c0\ucd9c \uacc4\ud68d\" data-vi=\"K\u1ebf ho\u1ea1ch Chi ti\u00eau C\u1ed1 \u0111\u1ecbnh h\u00e0ng th\u00e1ng\">\uc6d4 \uace0\uc815 \uc9c0\ucd9c \uacc4\ud68d<\/h2>\r\n <div class=\"calendar-controls\">\r\n <button onclick=\"changeCalendarMonth(-1)\">\u25c0<\/button>\r\n <h3 id=\"calendarMonthTitle\"><\/h3>\r\n <button onclick=\"changeCalendarMonth(1)\">\u25b6<\/button>\r\n <\/div>\r\n <div class=\"calendar-grid\" id=\"fixedExpenseCalendar\">\r\n <\/div>\r\n <div style=\"margin-top: 1rem; font-size: 0.9rem; font-weight: 600;\">\r\n <span class=\"translate\" data-ko=\"\uc6d4 \ucd1d \uace0\uc815 \uc9c0\ucd9c: \" data-vi=\"T\u1ed5ng chi c\u1ed1 \u0111\u1ecbnh th\u00e1ng: \">\uc6d4 \ucd1d \uace0\uc815 \uc9c0\ucd9c: <\/span>\r\n <span id=\"monthlyFixedTotal\" style=\"color: var(--danger);\">0 \u20ab<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"input-form\">\r\n <h3 class=\"section-title\" id=\"fixedExpenseInputTitle\"><\/h3>\r\n <div class=\"input-grid\">\r\n <div class=\"form-group\">\r\n <label class=\"translate\" data-ko=\"\uacc4\uc88c\" data-vi=\"T\u00e0i kho\u1ea3n\">\uacc4\uc88c<\/label>\r\n <select id=\"fixedAccountType\" class=\"form-control\">\r\n <option value=\"corporate\" class=\"translate\" data-ko=\"\ubc95\uc778\uacc4\uc88c\" data-vi=\"T\u00e0i kho\u1ea3n c\u00f4ng ty\">\ubc95\uc778\uacc4\uc88c<\/option>\r\n <option value=\"personal\" class=\"translate\" data-ko=\"\uac1c\uc778\uacc4\uc88c\" data-vi=\"T\u00e0i kho\u1ea3n c\u00e1 nh\u00e2n\">\uac1c\uc778\uacc4\uc88c<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label class=\"translate\" data-ko=\"\uae08\uc561 (VND)\" data-vi=\"S\u1ed1 ti\u1ec1n (VND)\">\uae08\uc561 (VND)<\/label>\r\n <input type=\"number\" id=\"fixedAmount\" class=\"form-control\" placeholder=\"0\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"form-group\" style=\"margin-bottom: 1rem;\">\r\n <label class=\"translate\" data-ko=\"\uc124\uba85\/\ud56d\ubaa9\" data-vi=\"M\u00f4 t\u1ea3\/M\u1ee5c\">\uc124\uba85\/\ud56d\ubaa9<\/label>\r\n <input type=\"text\" id=\"fixedDescription\" class=\"form-control\" placeholder=\"\uc6d4\uc138, \uacf5\uacfc\uae08, \uae09\uc5ec \ub4f1\">\r\n <\/div>\r\n \r\n <div class=\"fixed-expense-buttons\">\r\n <button class=\"btn btn-danger\" id=\"addFixedExpenseBtn\" onclick=\"addFixedExpense()\" disabled style=\"flex: 1;\">\r\n <span>\ud83d\udcb8<\/span>\r\n <span class=\"translate\" data-ko=\"\uace0\uc815 \uc9c0\ucd9c \ucd94\uac00\" data-vi=\"Th\u00eam chi c\u1ed1 \u0111\u1ecbnh\">\uace0\uc815 \uc9c0\ucd9c \ucd94\uac00<\/span>\r\n <\/button>\r\n <div class=\"toggle-switch-container\">\r\n <label class=\"toggle-switch\">\r\n <input type=\"checkbox\" id=\"applyFixedSwitch\" onchange=\"toggleFixedExpenses()\">\r\n <span class=\"slider\"><\/span>\r\n <\/label>\r\n <span class=\"translate\" data-ko=\"\uc784\uc2dc \uc801\uc6a9 ON\/OFF\" data-vi=\"\u00c1p d\u1ee5ng T\u1ea1m ON\/OFF\">\uc784\uc2dc \uc801\uc6a9 ON\/OFF<\/span>\r\n <\/div>\r\n <\/div>\r\n <div id=\"selectedDayExpenses\" class=\"fixed-expense-list\">\r\n <p class=\"translate\" data-ko=\"\uc120\ud0dd\ub41c \ub0a0\uc9dc\uc758 \uc9c0\ucd9c \ub0b4\uc5ed\" data-vi=\"Chi ph\u00ed ng\u00e0y \u0111\u00e3 ch\u1ecdn\">\ub0a0\uc9dc\ub97c \uc120\ud0dd\ud558\uc138\uc694<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"quick-input\">\r\n <h2 class=\"section-title translate\" data-ko=\"\ube60\ub978 \uc785\ub825\" data-vi=\"Nh\u1eadp nhanh\">\ube60\ub978 \uc785\ub825<\/h2>\r\n <div class=\"input-grid\">\r\n <div class=\"form-group\">\r\n <label class=\"translate\" data-ko=\"\ub0a0\uc9dc\" data-vi=\"Ng\u00e0y\">\ub0a0\uc9dc<\/label>\r\n <input type=\"date\" id=\"transactionDate\" class=\"form-control\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label class=\"translate\" data-ko=\"\uacc4\uc88c\" data-vi=\"T\u00e0i kho\u1ea3n\">\uacc4\uc88c<\/label>\r\n <select id=\"accountType\" class=\"form-control\">\r\n <option value=\"cash\" class=\"translate\" data-ko=\"\ud604\uae08\" data-vi=\"Ti\u1ec1n m\u1eb7t\">\ud604\uae08<\/option>\r\n <option value=\"corporate\" class=\"translate\" data-ko=\"\ubc95\uc778\uacc4\uc88c\" data-vi=\"T\u00e0i kho\u1ea3n c\u00f4ng ty\">\ubc95\uc778\uacc4\uc88c<\/option>\r\n <option value=\"personal\" class=\"translate\" data-ko=\"\uac1c\uc778\uacc4\uc88c\" data-vi=\"T\u00e0i kho\u1ea3n c\u00e1 nh\u00e2n\">\uac1c\uc778\uacc4\uc88c<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label class=\"translate\" data-ko=\"\uce74\ud14c\uace0\ub9ac\" data-vi=\"Danh m\u1ee5c\">\uce74\ud14c\uace0\ub9ac<\/label>\r\n <select id=\"category\" class=\"form-control\">\r\n <option value=\"salary\" class=\"translate\" data-ko=\"\uae09\uc5ec\/\uc218\uc785\" data-vi=\"L\u01b0\u01a1ng\/Thu nh\u1eadp\">\uae09\uc5ec\/\uc218\uc785<\/option>\r\n <option value=\"food\" class=\"translate\" data-ko=\"\uc2dd\ube44\" data-vi=\"\u0102n u\u1ed1ng\">\uc2dd\ube44<\/option>\r\n <option value=\"transport\" class=\"translate\" data-ko=\"\uad50\ud1b5\ube44\" data-vi=\"\u0110i l\u1ea1i\">\uad50\ud1b5\ube44<\/option>\r\n <option value=\"living\" class=\"translate\" data-ko=\"\uc0dd\ud65c\ube44\" data-vi=\"Sinh ho\u1ea1t\">\uc0dd\ud65c\ube44<\/option>\r\n <option value=\"business\" class=\"translate\" data-ko=\"\uc0ac\uc5c5\ube44\" data-vi=\"Kinh doanh\">\uc0ac\uc5c5\ube44<\/option>\r\n <option value=\"other\" class=\"translate\" data-ko=\"\uae30\ud0c0\" data-vi=\"Kh\u00e1c\">\uae30\ud0c0<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label class=\"translate\" data-ko=\"\uae08\uc561 (VND)\" data-vi=\"S\u1ed1 ti\u1ec1n (VND)\">\uae08\uc561 (VND)<\/label>\r\n <input type=\"number\" id=\"amount\" class=\"form-control\" placeholder=\"0\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"form-group\" style=\"margin-bottom: 1rem;\">\r\n <label class=\"translate\" data-ko=\"\uc124\uba85\" data-vi=\"M\u00f4 t\u1ea3\">explanation<\/label>\r\n <input type=\"text\" id=\"description\" class=\"form-control\" placeholder=\"\">\r\n <\/div>\r\n <div class=\"btn-group\">\r\n <button class=\"btn btn-income\" onclick=\"addTransaction('income')\">\r\n <span>\ud83d\udce5<\/span>\r\n <span class=\"translate\" data-ko=\"\uc218\uc785 \ucd94\uac00\" data-vi=\"Th\u00eam thu nh\u1eadp\">\uc218\uc785 \ucd94\uac00<\/span>\r\n <\/button>\r\n <button class=\"btn btn-expense\" onclick=\"addTransaction('expense')\">\r\n <span>\ud83d\udce4<\/span>\r\n <span class=\"translate\" data-ko=\"\uc9c0\ucd9c \ucd94\uac00\" data-vi=\"Th\u00eam chi ti\u00eau\">\uc9c0\ucd9c \ucd94\uac00<\/span>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"charts-container\">\r\n <div class=\"chart-card full-width\">\r\n <h2 class=\"section-title translate\" data-ko=\"\uc218\uc785 vs \uc9c0\ucd9c \ucd94\uc774 (\uc6d4\ubcc4)\" data-vi=\"Xu h\u01b0\u1edbng thu chi (h\u00e0ng th\u00e1ng)\">\uc218\uc785 vs \uc9c0\ucd9c \ucd94\uc774 (\uc6d4\ubcc4)<\/h2>\r\n <div class=\"chart-controls\" style=\"display: flex; gap: 10px; margin-bottom: 10px;\">\r\n <button class=\"btn btn-sm btn-primary\" id=\"trendFilterCorporate\" onclick=\"filterTrendChart('corporate')\">\r\n <span class=\"translate\" data-ko=\"\ubc95\uc778\uacc4\uc88c\" data-vi=\"T\u00e0i kho\u1ea3n Cty\">\ubc95\uc778\uacc4\uc88c<\/span>\r\n <\/button>\r\n <button class=\"btn btn-sm btn-secondary\" id=\"trendFilterPersonal\" onclick=\"filterTrendChart('personal')\">\r\n <span class=\"translate\" data-ko=\"\uac1c\uc778\uacc4\uc88c\" data-vi=\"T\u00e0i kho\u1ea3n CN\">\uac1c\uc778\uacc4\uc88c<\/span>\r\n <\/button>\r\n <button class=\"btn btn-sm btn-secondary\" id=\"trendFilterAll\" onclick=\"filterTrendChart('all')\">\r\n <span class=\"translate\" data-ko=\"\uc804\uccb4 \ud569\uc0b0\" data-vi=\"T\u1ed5ng c\u1ed9ng\">\uc804\uccb4 \ud569\uc0b0<\/span>\r\n <\/button>\r\n <\/div>\r\n <div class=\"chart-wrapper\">\r\n <canvas id=\"trendChart\"><\/canvas>\r\n <\/div>\r\n <\/div>\r\n <div class=\"chart-card\">\r\n <h2 class=\"section-title translate\" data-ko=\"\uce74\ud14c\uace0\ub9ac\ubcc4 \uc9c0\ucd9c (\uc774\ubc88 \ub2ec)\" data-vi=\"Chi ti\u00eau theo danh m\u1ee5c (th\u00e1ng n\u00e0y)\">\uce74\ud14c\uace0\ub9ac\ubcc4 \uc9c0\ucd9c (\uc774\ubc88 \ub2ec)<\/h2>\r\n <div class=\"chart-wrapper\">\r\n <canvas id=\"categoryChart\"><\/canvas>\r\n <\/div>\r\n <\/div>\r\n <div class=\"chart-card\">\r\n <h2 class=\"section-title translate\" data-ko=\"\uacc4\uc88c\ubcc4 \uc794\uc561 \ubd84\ud3ec\" data-vi=\"Ph\u00e2n b\u1ed5 s\u1ed1 d\u01b0 t\u00e0i kho\u1ea3n\">\uacc4\uc88c\ubcc4 \uc794\uc561 \ubd84\ud3ec<\/h2>\r\n <div class=\"chart-wrapper\">\r\n <canvas id=\"accountChart\"><\/canvas>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"transactions-section\">\r\n <div class=\"transactions-header\">\r\n <h2 class=\"section-title\" style=\"margin-bottom: 0;\">\r\n <span class=\"translate\" data-ko=\"\uac70\ub798 \ub0b4\uc5ed\" data-vi=\"L\u1ecbch s\u1eed giao d\u1ecbch\">\uac70\ub798 \ub0b4\uc5ed<\/span>\r\n <\/h2>\r\n <div class=\"transaction-filters\">\r\n <button class=\"filter-btn active\" onclick=\"filterTransactions('all')\">\r\n <span class=\"translate\" data-ko=\"\uc804\uccb4\" data-vi=\"T\u1ea5t c\u1ea3\">\uc804\uccb4<\/span>\r\n <\/button>\r\n <button class=\"filter-btn\" onclick=\"filterTransactions('income')\">\r\n <span class=\"translate\" data-ko=\"\uc218\uc785\" data-vi=\"Thu nh\u1eadp\">\uc218\uc785<\/span>\r\n <\/button>\r\n <button class=\"filter-btn\" onclick=\"filterTransactions('expense')\">\r\n <span class=\"translate\" data-ko=\"\uc9c0\ucd9c\" data-vi=\"Chi ti\u00eau\">\uc9c0\ucd9c<\/span>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"transactions-list\" id=\"transactionsList\">\r\n <div class=\"empty-state\">\r\n <div class=\"empty-state-icon\">\ud83d\udccb<\/div>\r\n <p class=\"translate\" data-ko=\"\uac70\ub798 \ub0b4\uc5ed\uc774 \uc5c6\uc2b5\ub2c8\ub2e4\" data-vi=\"Ch\u01b0a c\u00f3 giao d\u1ecbch\">\uac70\ub798 \ub0b4\uc5ed\uc774 \uc5c6\uc2b5\ub2c8\ub2e4<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"action-buttons\">\r\n <button class=\"btn btn-primary\" onclick=\"exportToExcel()\">\r\n <span>\ud83d\udcca<\/span>\r\n <span class=\"translate\" data-ko=\"\uc5d1\uc140\ub85c \ub0b4\ubcf4\ub0b4\uae30\" data-vi=\"Xu\u1ea5t Excel\">\uc5d1\uc140\ub85c \ub0b4\ubcf4\ub0b4\uae30<\/span>\r\n <\/button>\r\n <button class=\"btn btn-secondary\" onclick=\"exportToCSV()\">\r\n <span>\ud83d\udcc4<\/span>\r\n <span class=\"translate\" data-ko=\"CSV\ub85c \ub0b4\ubcf4\ub0b4\uae30\" data-vi=\"Xu\u1ea5t CSV\">CSV\ub85c \ub0b4\ubcf4\ub0b4\uae30<\/span>\r\n <\/button>\r\n <label for=\"importFile\" class=\"btn btn-secondary\" style=\"cursor: pointer;\">\r\n <span>\ud83d\udce5<\/span>\r\n <span class=\"translate\" data-ko=\"\uc5d1\uc140\uc5d0\uc11c \ubd88\ub7ec\uc624\uae30\" data-vi=\"Nh\u1eadp t\u1eeb Excel\">\uc5d1\uc140\uc5d0\uc11c \ubd88\ub7ec\uc624\uae30<\/span>\r\n <\/label>\r\n <input type=\"file\" id=\"importFile\" accept=\".xlsx, .xls\" style=\"display: none;\" onchange=\"importFromExcel(event)\">\r\n <button class=\"btn btn-secondary\" onclick=\"showResetModal()\">\r\n <span>\ud83d\udd04<\/span>\r\n <span class=\"translate\" data-ko=\"\ub370\uc774\ud130 \ucd08\uae30\ud654\" data-vi=\"\u0110\u1eb7t l\u1ea1i d\u1eef li\u1ec7u\">\ub370\uc774\ud130 \ucd08\uae30\ud654<\/span>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"modal\" id=\"resetModal\">\r\n <div class=\"modal-content\">\r\n <div class=\"modal-header\">\r\n <h3 class=\"modal-title translate\" data-ko=\"\ub370\uc774\ud130 \ucd08\uae30\ud654\" data-vi=\"\u0110\u1eb7t l\u1ea1i d\u1eef li\u1ec7u\">\ub370\uc774\ud130 \ucd08\uae30\ud654<\/h3>\r\n <button class=\"close-btn\" onclick=\"hideResetModal()\">\u00d7<\/button>\r\n <\/div>\r\n <p class=\"translate\" data-ko=\"\ubaa8\ub4e0 \ub370\uc774\ud130\uac00 \uc0ad\uc81c\ub429\ub2c8\ub2e4. \uacc4\uc18d\ud558\uc2dc\uaca0\uc2b5\ub2c8\uae4c?\" data-vi=\"T\u1ea5t c\u1ea3 d\u1eef li\u1ec7u s\u1ebd b\u1ecb x\u00f3a. B\u1ea1n c\u00f3 ch\u1eafc ch\u1eafn?\">\ubaa8\ub4e0 \ub370\uc774\ud130\uac00 \uc0ad\uc81c\ub429\ub2c8\ub2e4. \uacc4\uc18d\ud558\uc2dc\uaca0\uc2b5\ub2c8\uae4c?<\/p>\r\n <div class=\"modal-buttons\">\r\n <button class=\"btn btn-secondary\" onclick=\"hideResetModal()\">\r\n <span class=\"translate\" data-ko=\"\ucde8\uc18c\" data-vi=\"H\u1ee7y\">\ucde8\uc18c<\/span>\r\n <\/button>\r\n <button class=\"btn btn-danger\" onclick=\"resetAllData()\">\r\n <span class=\"translate\" data-ko=\"\ucd08\uae30\ud654\" data-vi=\"\u0110\u1eb7t l\u1ea1i\">\ucd08\uae30\ud654<\/span>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"toast\" id=\"toast\"><\/div>\r\n\r\n <script>\r\n \/\/ Global Variables\r\n let currentLang = 'ko';\r\n let currentFilter = 'all';\r\n let currentCalendarDate = new Date(); \/\/ \ub2ec\ub825\uc758 \ud604\uc7ac \uc6d4\r\n let selectedCalendarDay = null; \/\/ \ub2ec\ub825\uc5d0\uc11c \uc120\ud0dd\ub41c \ub0a0\uc9dc (1~31)\r\n let trendChartAccountFilter = 'corporate'; \/\/ \u2705 2. \uadf8\ub798\ud504 \uacc4\uc88c \ud544\ud130 \uae30\ubcf8\uac12\r\n \r\n let data = {\r\n transactions: [],\r\n balances: { cash: 0, corporate: 0, personal: 0 },\r\n appliedBalances: { cash: 0, corporate: 0, personal: 0 }, \r\n budgets: { weekly: 0, monthly: 0 }, \/\/ \uc608\uc0b0 \ud56d\ubaa9\uc740 \uc720\uc9c0\r\n fixedExpenses: {} \r\n };\r\n\r\n \/\/ Language Translations\r\n const translations = {\r\n ko: { cash: '\ud604\uae08', corporate: '\ubc95\uc778\uacc4\uc88c', personal: '\uac1c\uc778\uacc4\uc88c', salary: '\uae09\uc5ec\/\uc218\uc785', food: '\uc2dd\ube44', transport: '\uad50\ud1b5\ube44', living: '\uc0dd\ud65c\ube44', business: '\uc0ac\uc5c5\ube44', other: '\uae30\ud0c0', income: '\uc218\uc785', expense: '\uc9c0\ucd9c', days: ['\uc77c', '\uc6d4', '\ud654', '\uc218', '\ubaa9', '\uae08', '\ud1a0'], months: ['1\uc6d4', '2\uc6d4', '3\uc6d4', '4\uc6d4', '5\uc6d4', '6\uc6d4', '7\uc6d4', '8\uc6d4', '9\uc6d4', '10\uc6d4', '11\uc6d4', '12\uc6d4'] },\r\n vi: { cash: 'Ti\u1ec1n m\u1eb7t', corporate: 'T\u00e0i kho\u1ea3n c\u00f4ng ty', personal: 'T\u00e0i kho\u1ea3n c\u00e1 nh\u00e2n', salary: 'L\u01b0\u01a1ng\/Thu nh\u1eadp', food: '\u0102n u\u1ed1ng', transport: '\u0110i l\u1ea1i', living: 'Sinh ho\u1ea1t', business: 'Kinh doanh', other: 'Kh\u00e1c', income: 'Thu nh\u1eadp', expense: 'Chi ti\u00eau', days: ['CN', 'T2', 'T3', 'T4', 'T5', 'T6', 'T7'], months: ['Th\u00e1ng 1', 'Th\u00e1ng 2', 'Th\u00e1ng 3', 'Th\u00e1ng 4', 'Th\u00e1ng 5', 'Th\u00e1ng 6', 'Th\u00e1ng 7', 'Th\u00e1ng 8', 'Th\u00e1ng 9', 'Th\u00e1ng 10', 'Th\u00e1ng 11', 'Th\u00e1ng 12'] }\r\n };\r\n\r\n \/\/ Chart instances\r\n let trendChart, categoryChart, accountChart;\r\n\r\n \/\/ Initialize\r\n document.addEventListener('DOMContentLoaded', function() {\r\n loadData().then(() => {\r\n updateDashboard();\r\n updateTransactionsList();\r\n updateCharts();\r\n renderFixedExpenseCalendar();\r\n \/\/ \ucd08\uae30 \ub85c\ub4dc \ud6c4 \uc784\uc2dc \uc801\uc6a9 \uc2a4\uc704\uce58 \uc0c1\ud0dc\uc5d0 \ub530\ub77c \uc794\uc561 \ud45c\uc2dc\r\n if (document.getElementById('applyFixedSwitch').checked) {\r\n applyFixedExpenses(true);\r\n }\r\n }).catch(() => {\r\n updateDashboard();\r\n updateTransactionsList();\r\n updateCharts();\r\n renderFixedExpenseCalendar();\r\n });\r\n \r\n setTodayDate();\r\n initCharts();\r\n setLanguage(currentLang); \r\n \/\/ \ucd08\uae30 \ub85c\ub4dc \uc2dc \ucc28\ud2b8 \ud544\ud130 \ubc84\ud2bc \ud65c\uc131\ud654 \uc2a4\ud0c0\uc77c \uc801\uc6a9\r\n updateTrendChartFilterButtons(trendChartAccountFilter);\r\n });\r\n\r\n \/\/ =========================================================================\r\n \/\/ Fixed Expense Calendar Functions\r\n \/\/ =========================================================================\r\n\r\n function getDaysInMonth(year, month) {\r\n return new Date(year, month + 1, 0).getDate();\r\n }\r\n \r\n function renderFixedExpenseCalendar() {\r\n const container = document.getElementById('fixedExpenseCalendar');\r\n const year = currentCalendarDate.getFullYear();\r\n const month = currentCalendarDate.getMonth();\r\n const daysInMonth = getDaysInMonth(year, month);\r\n \r\n \/\/ \ub2ec\ub825 \ud0c0\uc774\ud2c0 \uc5c5\ub370\uc774\ud2b8\r\n const monthName = translations[currentLang].months[month];\r\n document.getElementById('calendarMonthTitle').textContent = `${year} ${monthName}`;\r\n \r\n \/\/ \uc694\uc77c \ud5e4\ub354 \uc0dd\uc131\r\n const days = translations[currentLang].days;\r\n let calendarHTML = days.map(day => `<div class=\"day-header\">${day}<\/div>`).join('');\r\n \r\n \/\/ \uccab\uc9f8 \ub0a0\uc758 \uc694\uc77c (0=\uc77c, 6=\ud1a0)\r\n const firstDayOfWeek = new Date(year, month, 1).getDay();\r\n \r\n \/\/ \ube48 \uc140 \ucd94\uac00 (\uccab\uc9f8 \ub0a0 \uc774\uc804)\r\n for (let i = 0; i < firstDayOfWeek; i++) {\r\n calendarHTML += `<div class=\"day-cell empty\"><\/div>`;\r\n }\r\n\r\n let monthlyTotal = 0;\r\n const today = new Date().getDate();\r\n const currentMonthYear = new Date().getMonth() === month && new Date().getFullYear() === year;\r\n \r\n \/\/ \ub0a0\uc9dc \uc140 \ucd94\uac00\r\n for (let day = 1; day <= daysInMonth; day++) {\r\n const dayKey = String(day);\r\n \r\n \/\/ [\uc218\uc815\ub428] data.fixedExpenses\uac00 {} \uac1d\uccb4\uc784\uc744 \ubcf4\uc7a5\r\n const expenses = (data.fixedExpenses && data.fixedExpenses[dayKey]) ? data.fixedExpenses[dayKey] : [];\r\n \r\n const totalExpense = expenses.reduce((sum, exp) => sum + exp.amount, 0);\r\n monthlyTotal += totalExpense;\r\n\r\n const isCurrentDay = currentMonthYear && day === today;\r\n const isSelected = selectedCalendarDay === day;\r\n \r\n let expenseText = totalExpense > 0 ? formatCurrency(totalExpense) : '';\r\n\r\n calendarHTML += `\r\n <div class=\"day-cell ${isCurrentDay ? 'current-day' : ''} ${isSelected ? 'selected' : ''}\" \r\n data-day=\"${day}\" onclick=\"selectCalendarDay(${day})\">\r\n <div class=\"day-number\">${day}<\/div>\r\n ${expenseText ? `<div class=\"day-expense-amount\" style=\"color: ${isCurrentDay ? 'white' : 'var(--danger)'};\">${expenseText}<\/div>` : '<div><\/div>'}\r\n <\/div>\r\n `;\r\n }\r\n\r\n container.innerHTML = calendarHTML;\r\n document.getElementById('monthlyFixedTotal').textContent = formatCurrency(monthlyTotal);\r\n\r\n \/\/ \uc120\ud0dd\ub41c \ub0a0\uc9dc\uc758 \uc138\ubd80 \uc815\ubcf4 \ud45c\uc2dc\r\n updateFixedExpenseDetail();\r\n }\r\n\r\n function changeCalendarMonth(delta) {\r\n currentCalendarDate.setMonth(currentCalendarDate.getMonth() + delta);\r\n selectedCalendarDay = null; \/\/ \uc6d4\uc774 \ubc14\ub00c\uba74 \uc120\ud0dd \ucd08\uae30\ud654\r\n renderFixedExpenseCalendar();\r\n }\r\n \r\n function selectCalendarDay(day) {\r\n selectedCalendarDay = selectedCalendarDay === day ? null : day;\r\n \r\n renderFixedExpenseCalendar(); \/\/ \uc120\ud0dd\ub41c \uc140 \uac15\uc870\r\n updateFixedExpenseDetail();\r\n }\r\n\r\n function updateFixedExpenseDetail() {\r\n const titleEl = document.getElementById('fixedExpenseInputTitle');\r\n const listEl = document.getElementById('selectedDayExpenses');\r\n const addBtn = document.getElementById('addFixedExpenseBtn');\r\n \r\n if (!selectedCalendarDay) {\r\n const titleKo = '\uace0\uc815 \uc9c0\ucd9c \uc785\ub825 (\ub0a0\uc9dc\ub97c \ud074\ub9ad\ud558\uc138\uc694)';\r\n const titleVi = 'Nh\u1eadp chi c\u1ed1 \u0111\u1ecbnh (Nh\u1ea5p v\u00e0o ng\u00e0y)';\r\n titleEl.innerHTML = `<span class=\"translate\" data-ko=\"${titleKo}\" data-vi=\"${titleVi}\">${currentLang === 'ko' ? titleKo : titleVi}<\/span>`;\r\n listEl.innerHTML = `<p style=\"color: var(--text-secondary); font-size: 0.85rem;\" class=\"translate\" data-ko=\"\uc120\ud0dd\ub41c \ub0a0\uc9dc\uc758 \uc9c0\ucd9c \ub0b4\uc5ed\" data-vi=\"Chi ph\u00ed ng\u00e0y \u0111\u00e3 ch\u1ecdn\">\ub0a0\uc9dc\ub97c \uc120\ud0dd\ud558\uc138\uc694<\/p>`;\r\n addBtn.disabled = true;\r\n return;\r\n }\r\n\r\n addBtn.disabled = false;\r\n \r\n const dayKey = String(selectedCalendarDay);\r\n \/\/ [\uc218\uc815\ub428] data.fixedExpenses\uac00 {} \uac1d\uccb4\uc784\uc744 \ubcf4\uc7a5\r\n const expenses = (data.fixedExpenses && data.fixedExpenses[dayKey]) ? data.fixedExpenses[dayKey] : [];\r\n \r\n const titleKo = `\uace0\uc815 \uc9c0\ucd9c \uc785\ub825 (\uc120\ud0dd\ub41c \ub0a0\uc9dc: ${selectedCalendarDay}\uc77c)`;\r\n const titleVi = `Nh\u1eadp chi c\u1ed1 \u0111\u1ecbnh (Ng\u00e0y \u0111\u00e3 ch\u1ecdn: ${selectedCalendarDay})`;\r\n titleEl.innerHTML = `<span class=\"translate\" data-ko=\"${titleKo}\" data-vi=\"${titleVi}\">${currentLang === 'ko' ? titleKo : titleVi}<\/span>`;\r\n\r\n if (expenses.length === 0) {\r\n listEl.innerHTML = `<p style=\"color: var(--text-secondary); font-size: 0.85rem;\" class=\"translate\" data-ko=\"\uc774 \ub0a0\uc9dc\uc5d0 \uacc4\ud68d\ub41c \uc9c0\ucd9c\uc774 \uc5c6\uc2b5\ub2c8\ub2e4.\" data-vi=\"Kh\u00f4ng c\u00f3 chi ph\u00ed c\u1ed1 \u0111\u1ecbnh n\u00e0o \u0111\u01b0\u1ee3c l\u00ean k\u1ebf ho\u1ea1ch cho ng\u00e0y n\u00e0y.\">\uc774 \ub0a0\uc9dc\uc5d0 \uacc4\ud68d\ub41c \uc9c0\ucd9c\uc774 \uc5c6\uc2b5\ub2c8\ub2e4.<\/p>`;\r\n return;\r\n }\r\n\r\n listEl.innerHTML = expenses.map(exp => {\r\n const accountName = translations[currentLang][exp.account] || exp.account;\r\n return `\r\n <div class=\"fixed-expense-item\" id=\"fixed-exp-${exp.id}\">\r\n <div class=\"details\">\r\n <span style=\"font-weight: 600;\" id=\"desc-${exp.id}\">${exp.description}<\/span>\r\n <span style=\"font-size: 0.75rem; color: var(--gray);\" id=\"acc-${exp.id}\">${accountName}<\/span>\r\n <\/div>\r\n <div style=\"display: flex; align-items: center; gap: 0.5rem;\">\r\n <span class=\"amount\" id=\"amt-${exp.id}\">${formatCurrency(exp.amount)}<\/span>\r\n <button class=\"btn-sm btn-secondary\" onclick=\"editFixedExpensePrompt('${dayKey}', ${exp.id})\">\u270f\ufe0f<\/button>\r\n <button class=\"delete-btn btn-sm\" onclick=\"deleteFixedExpense('${dayKey}', ${exp.id})\">\u2715<\/button> \r\n <\/div>\r\n <\/div>\r\n `;\r\n }).join('');\r\n }\r\n \r\n function editFixedExpensePrompt(dayKey, id) {\r\n \/\/ [\uc218\uc815\ub428] data.fixedExpenses\uac00 {} \uac1d\uccb4\uc784\uc744 \ubcf4\uc7a5\r\n if (!data.fixedExpenses || !data.fixedExpenses[dayKey]) return;\r\n \r\n const expense = data.fixedExpenses[dayKey].find(exp => exp.id === id);\r\n if (!expense) return;\r\n\r\n const newAmount = prompt(currentLang === 'ko' ? `\uae08\uc561\uc744 \uc218\uc815\ud558\uc138\uc694 (${expense.description})` : `S\u1eeda s\u1ed1 ti\u1ec1n cho (${expense.description})`, expense.amount);\r\n if (newAmount === null || isNaN(parseFloat(newAmount)) || parseFloat(newAmount) <= 0) {\r\n if (newAmount !== null) showToast(currentLang === 'ko' ? '\uc720\ud6a8\ud55c \uae08\uc561\uc744 \uc785\ub825\ud558\uc138\uc694.' : 'Vui l\u00f2ng nh\u1eadp s\u1ed1 ti\u1ec1n h\u1ee3p l\u1ec7.', 'error');\r\n return;\r\n }\r\n\r\n const newDesc = prompt(currentLang === 'ko' ? `\uc124\uba85\uc744 \uc218\uc815\ud558\uc138\uc694 (${expense.description})` : `S\u1eeda m\u00f4 t\u1ea3 cho (${expense.description})`, expense.description);\r\n if (newDesc === null || newDesc.trim() === '') {\r\n if (newDesc !== null) showToast(currentLang === 'ko' ? '\uc124\uba85\uc744 \uc785\ub825\ud558\uc138\uc694.' : 'Vui l\u00f2ng nh\u1eadp m\u00f4 t\u1ea3.', 'error');\r\n return;\r\n }\r\n \r\n const newAccount = prompt(currentLang === 'ko' ? `\uacc4\uc88c \uc720\ud615\uc744 \uc785\ub825\ud558\uc138\uc694 (corporate, personal)` : `Nh\u1eadp lo\u1ea1i t\u00e0i kho\u1ea3n (corporate, personal)`, expense.account);\r\n if (newAccount === null || (newAccount !== 'corporate' && newAccount !== 'personal')) {\r\n if (newAccount !== null) showToast(currentLang === 'ko' ? '\uc720\ud6a8\ud55c \uacc4\uc88c \uc720\ud615\uc744 \uc785\ub825\ud558\uc138\uc694.' : 'Vui l\u00f2ng nh\u1eadp lo\u1ea1i t\u00e0i kho\u1ea3n h\u1ee3p l\u1ec7.', 'error');\r\n return;\r\n }\r\n\r\n expense.amount = parseFloat(newAmount);\r\n expense.description = newDesc.trim();\r\n expense.account = newAccount;\r\n\r\n updateFixedExpenseDetail(); \r\n renderFixedExpenseCalendar(); \r\n if (document.getElementById('applyFixedSwitch').checked) {\r\n applyFixedExpenses(true);\r\n }\r\n \r\n saveData().then(() => {\r\n showToast(currentLang === 'ko' ? '\uace0\uc815 \uc9c0\ucd9c\uc774 \uc218\uc815\ub418\uc5c8\uc2b5\ub2c8\ub2e4.' : '\u0110\u00e3 s\u1eeda chi ti\u00eau c\u1ed1 \u0111\u1ecbnh.', 'success');\r\n }).catch(() => {\r\n showToast(currentLang === 'ko' ? '\ub370\uc774\ud130 \uc800\uc7a5 \uc2e4\ud328 (\uc11c\ubc84 \uc624\ub958)' : 'L\u1ed7i l\u01b0u d\u1eef li\u1ec7u (L\u1ed7i m\u00e1y ch\u1ee7)', 'error');\r\n });\r\n }\r\n\r\n\r\n function addFixedExpense() {\r\n if (!selectedCalendarDay) return;\r\n\r\n const amount = parseFloat(document.getElementById('fixedAmount').value);\r\n const account = document.getElementById('fixedAccountType').value;\r\n const description = document.getElementById('fixedDescription').value.trim();\r\n\r\n if (!amount || amount <= 0 || !description) {\r\n showToast(currentLang === 'ko' ? '\uae08\uc561\uacfc \uc124\uba85\uc744 \uc785\ub825\ud574\uc8fc\uc138\uc694.' : 'Vui l\u00f2ng nh\u1eadp s\u1ed1 ti\u1ec1n v\u00e0 m\u00f4 t\u1ea3.', 'error');\r\n return;\r\n }\r\n\r\n const dayKey = String(selectedCalendarDay);\r\n const newExpense = {\r\n id: Date.now(),\r\n amount: amount,\r\n account: account,\r\n description: description,\r\n };\r\n\r\n \/\/ [\uc218\uc815\ub428] data.fixedExpenses\uac00 {} \uac1d\uccb4\uc784\uc744 \ubcf4\uc7a5\r\n if (!data.fixedExpenses) {\r\n data.fixedExpenses = {};\r\n }\r\n if (!data.fixedExpenses[dayKey]) {\r\n data.fixedExpenses[dayKey] = [];\r\n }\r\n \r\n data.fixedExpenses[dayKey].push(newExpense);\r\n \r\n document.getElementById('fixedAmount').value = '';\r\n document.getElementById('fixedDescription').value = '';\r\n renderFixedExpenseCalendar();\r\n if (document.getElementById('applyFixedSwitch').checked) {\r\n applyFixedExpenses(true);\r\n }\r\n showToast(currentLang === 'ko' ? '\uace0\uc815 \uc9c0\ucd9c \uacc4\ud68d\uc774 \ucd94\uac00\ub418\uc5c8\uc2b5\ub2c8\ub2e4.' : '\u0110\u00e3 th\u00eam k\u1ebf ho\u1ea1ch chi ti\u00eau c\u1ed1 \u0111\u1ecbnh.', 'success');\r\n \r\n saveData().catch(() => {\r\n showToast(currentLang === 'ko' ? '\ub370\uc774\ud130 \uc800\uc7a5 \uc2e4\ud328 (\uc11c\ubc84 \uc624\ub958)' : 'L\u1ed7i l\u01b0u d\u1eef li\u1ec7u (L\u1ed7i m\u00e1y ch\u1ee7)', 'error');\r\n });\r\n }\r\n\r\n function deleteFixedExpense(dayKey, id) {\r\n \/\/ [\uc218\uc815\ub428] data.fixedExpenses\uac00 {} \uac1d\uccb4\uc784\uc744 \ubcf4\uc7a5\r\n if (!data.fixedExpenses || !data.fixedExpenses[dayKey]) return;\r\n\r\n if (confirm(currentLang === 'ko' ? '\uc774 \uace0\uc815 \uc9c0\ucd9c \ud56d\ubaa9\uc744 \uc0ad\uc81c\ud558\uc2dc\uaca0\uc2b5\ub2c8\uae4c?' : 'B\u1ea1n c\u00f3 ch\u1eafc ch\u1eafn mu\u1ed1n x\u00f3a m\u1ee5c chi ti\u00eau c\u1ed1 \u0111\u1ecbnh n\u00e0y?')) {\r\n data.fixedExpenses[dayKey] = data.fixedExpenses[dayKey].filter(exp => exp.id !== id);\r\n \r\n if (data.fixedExpenses[dayKey].length === 0) {\r\n delete data.fixedExpenses[dayKey];\r\n }\r\n\r\n renderFixedExpenseCalendar(); \r\n if (document.getElementById('applyFixedSwitch').checked) {\r\n applyFixedExpenses(true);\r\n }\r\n showToast(currentLang === 'ko' ? '\uace0\uc815 \uc9c0\ucd9c\uc774 \uc0ad\uc81c\ub418\uc5c8\uc2b5\ub2c8\ub2e4.' : '\u0110\u00e3 x\u00f3a chi ti\u00eau c\u1ed1 \u0111\u1ecbnh.', 'success');\r\n \r\n saveData().catch(() => {\r\n showToast(currentLang === 'ko' ? '\ub370\uc774\ud130 \uc800\uc7a5 \uc2e4\ud328 (\uc11c\ubc84 \uc624\ub958)' : 'L\u1ed7i l\u01b0u d\u1eef li\u1ec7u (L\u1ed7i m\u00e1y ch\u1ee7)', 'error');\r\n });\r\n }\r\n }\r\n \r\n function toggleFixedExpenses() {\r\n const isChecked = document.getElementById('applyFixedSwitch').checked;\r\n \r\n if (isChecked) {\r\n applyFixedExpenses(true);\r\n showToast(currentLang === 'ko' ? '\uace0\uc815 \uc9c0\ucd9c \uc784\uc2dc \uc801\uc6a9 ON' : '\u00c1p d\u1ee5ng Chi c\u1ed1 \u0111\u1ecbnh ON', 'success');\r\n } else {\r\n data.appliedBalances = { ...data.balances };\r\n updateDashboard();\r\n showToast(currentLang === 'ko' ? '\uace0\uc815 \uc9c0\ucd9c \uc784\uc2dc \uc801\uc6a9 OFF (\uc2e4\uc81c \uc794\uc561 \ud45c\uc2dc)' : '\u00c1p d\u1ee5ng Chi c\u1ed1 \u0111\u1ecbnh OFF (Hi\u1ec3n th\u1ecb s\u1ed1 d\u01b0 th\u1ef1c t\u1ebf)', 'warning');\r\n }\r\n \r\n saveData().catch(() => {});\r\n }\r\n \r\n function applyFixedExpenses(forceApply = false) {\r\n if (!forceApply && !document.getElementById('applyFixedSwitch').checked) {\r\n return;\r\n }\r\n \r\n data.appliedBalances = { ...data.balances };\r\n let totalFixedExpense = 0;\r\n\r\n \/\/ [\uc218\uc815\ub428] data.fixedExpenses\uac00 {} \uac1d\uccb4\uc784\uc744 \ubcf4\uc7a5\r\n if (data.fixedExpenses && typeof data.fixedExpenses === 'object') {\r\n for (const dayKey in data.fixedExpenses) {\r\n data.fixedExpenses[dayKey].forEach(exp => {\r\n if (data.appliedBalances[exp.account] !== undefined) {\r\n data.appliedBalances[exp.account] -= exp.amount;\r\n totalFixedExpense += exp.amount;\r\n }\r\n });\r\n }\r\n }\r\n \r\n updateDashboard();\r\n\r\n if (totalFixedExpense === 0 && document.getElementById('applyFixedSwitch').checked) {\r\n document.getElementById('applyFixedSwitch').checked = false;\r\n data.appliedBalances = { ...data.balances };\r\n updateDashboard();\r\n }\r\n }\r\n\r\n \/\/ Set today's date\r\n function setTodayDate() {\r\n const today = new Date().toISOString().split('T')[0];\r\n document.getElementById('transactionDate').value = today;\r\n }\r\n\r\n \/\/ Language Functions (\uae30\uc874 \ub85c\uc9c1 \uc720\uc9c0)\r\n function setLanguage(lang) {\r\n currentLang = lang;\r\n document.querySelectorAll('.lang-btn').forEach(btn => {\r\n btn.classList.remove('active');\r\n });\r\n const activeBtn = document.querySelector(`.lang-btn[onclick=\"setLanguage('${lang}')\"]`);\r\n if (activeBtn) activeBtn.classList.add('active');\r\n \r\n document.querySelectorAll('.translate').forEach(el => {\r\n const text = el.getAttribute('data-' + lang);\r\n if (text) {\r\n if (el.tagName === 'OPTION') {\r\n el.textContent = text;\r\n } else {\r\n el.textContent = text;\r\n }\r\n }\r\n });\r\n\r\n updateTransactionsList();\r\n if (trendChart) updateCharts();\r\n renderFixedExpenseCalendar();\r\n }\r\n\r\n \/\/ Format Currency\r\n function formatCurrency(amount) {\r\n return new Intl.NumberFormat('vi-VN').format(amount) + ' \u20ab';\r\n }\r\n\r\n \/\/ Add Transaction (\uc9c0\uc5f0 \uac1c\uc120: \uc989\uc2dc UI \uc5c5\ub370\uc774\ud2b8 \ud6c4 \ubc31\uadf8\ub77c\uc6b4\ub4dc \uc800\uc7a5)\r\n function addTransaction(type) {\r\n const date = document.getElementById('transactionDate').value;\r\n const account = document.getElementById('accountType').value;\r\n const category = document.getElementById('category').value;\r\n const amount = parseFloat(document.getElementById('amount').value);\r\n const description = document.getElementById('description').value;\r\n\r\n if (!date || !amount || amount <= 0) {\r\n showToast(currentLang === 'ko' ? '\ub0a0\uc9dc\uc640 \uae08\uc561\uc744 \uc785\ub825\ud574\uc8fc\uc138\uc694' : 'Vui l\u00f2ng nh\u1eadp ng\u00e0y v\u00e0 s\u1ed1 ti\u1ec1n', 'error');\r\n return;\r\n }\r\n\r\n const transaction = { id: Date.now(), date: date, type: type, account: account, category: category, amount: amount, description: description };\r\n\r\n if (type === 'income') { data.balances[account] += amount; } else { data.balances[account] -= amount; }\r\n data.transactions.unshift(transaction);\r\n \r\n data.appliedBalances = { ...data.balances };\r\n document.getElementById('applyFixedSwitch').checked = false; \r\n\r\n updateDashboard(); \r\n updateTransactionsList(); \r\n updateCharts(); \r\n showToast(type === 'income' ? (currentLang === 'ko' ? '\uc218\uc785\uc774 \ucd94\uac00\ub418\uc5c8\uc2b5\ub2c8\ub2e4' : '\u0110\u00e3 th\u00eam thu nh\u1eadp') : (currentLang === 'ko' ? '\uc9c0\ucd9c\uc774 \ucd94\uac00\ub418\uc5c8\uc2b5\ub2c8\ub2e4' : '\u0110\u00e3 th\u00eam chi ti\u00eau'), 'success'); \r\n\r\n document.getElementById('amount').value = '';\r\n document.getElementById('description').value = '';\r\n\r\n saveData().catch(() => { });\r\n }\r\n\r\n \/\/ Delete Transaction (\uc9c0\uc5f0 \uac1c\uc120: \uc989\uc2dc UI \uc5c5\ub370\uc774\ud2b8 \ud6c4 \ubc31\uadf8\ub77c\uc6b4\ub4dc \uc800\uc7a5)\r\n function deleteTransaction(id) {\r\n const transaction = data.transactions.find(t => t.id === id);\r\n if (!transaction) return;\r\n\r\n if (confirm(currentLang === 'ko' ? '\uc815\ub9d0\ub85c \uc774 \uac70\ub798\ub97c \uc0ad\uc81c\ud558\uc2dc\uaca0\uc2b5\ub2c8\uae4c?' : 'B\u1ea1n c\u00f3 ch\u1eafc ch\u1eafn mu\u1ed1n x\u00f3a giao d\u1ecbch n\u00e0y?')) {\r\n if (transaction.type === 'income') { data.balances[transaction.account] -= transaction.amount; } else { data.balances[transaction.account] += transaction.amount; }\r\n data.transactions = data.transactions.filter(t => t.id !== id);\r\n \r\n data.appliedBalances = { ...data.balances };\r\n document.getElementById('applyFixedSwitch').checked = false; \r\n\r\n updateDashboard(); \r\n updateTransactionsList(); \r\n updateCharts(); \r\n showToast(currentLang === 'ko' ? '\uac70\ub798\uac00 \uc0ad\uc81c\ub418\uc5c8\uc2b5\ub2c8\ub2e4' : '\u0110\u00e3 x\u00f3a giao d\u1ecbch', 'success'); \r\n\r\n saveData().catch(() => { });\r\n }\r\n }\r\n\r\n \/\/ Update Dashboard (\uae30\uc874 \ub85c\uc9c1 \uc720\uc9c0)\r\n function updateDashboard() {\r\n const accounts = ['cash', 'corporate', 'personal'];\r\n accounts.forEach(account => {\r\n const balanceEl = document.getElementById(account + 'Balance');\r\n const amount = data.appliedBalances[account];\r\n balanceEl.textContent = formatCurrency(amount);\r\n balanceEl.classList.toggle('negative', amount < 0);\r\n });\r\n\r\n const now = new Date();\r\n const currentMonth = now.getMonth();\r\n const currentYear = now.getFullYear();\r\n\r\n let monthlyIncome = 0;\r\n let monthlyExpense = 0;\r\n\r\n data.transactions.forEach(t => {\r\n const tDate = new Date(t.date);\r\n if (tDate.getMonth() === currentMonth && tDate.getFullYear() === currentYear) {\r\n if (t.type === 'income') { monthlyIncome += t.amount; } else { monthlyExpense += t.amount; }\r\n }\r\n });\r\n\r\n document.getElementById('monthlyIncome').textContent = formatCurrency(monthlyIncome);\r\n document.getElementById('monthlyExpense').textContent = formatCurrency(monthlyExpense);\r\n }\r\n \r\n \/\/ Update Transactions List (\uae30\uc874 \ub85c\uc9c1 \uc720\uc9c0)\r\n function updateTransactionsList() {\r\n const list = document.getElementById('transactionsList');\r\n const sortedTransactions = [...data.transactions].sort((a, b) => new Date(b.date) - new Date(a.date));\r\n \r\n const filteredTransactions = currentFilter === 'all' \r\n ? sortedTransactions \r\n : sortedTransactions.filter(t => t.type === currentFilter);\r\n\r\n if (filteredTransactions.length === 0) {\r\n list.innerHTML = `<div class=\"empty-state\"><div class=\"empty-state-icon\">\ud83d\udccb<\/div><p class=\"translate\" data-ko=\"\uac70\ub798 \ub0b4\uc5ed\uc774 \uc5c6\uc2b5\ub2c8\ub2e4\" data-vi=\"Ch\u01b0a c\u00f3 giao d\u1ecbch\">${currentLang === 'ko' ? '\uac70\ub798 \ub0b4\uc5ed\uc774 \uc5c6\uc2b5\ub2c8\ub2e4' : 'Ch\u01b0a c\u00f3 giao d\u1ecbch'}<\/p><\/div>`;\r\n return;\r\n }\r\n\r\n list.innerHTML = filteredTransactions.map(t => {\r\n const categoryName = translations[currentLang][t.category] || t.category;\r\n const accountName = translations[currentLang][t.account] || t.account;\r\n \r\n return `\r\n <div class=\"transaction-item\">\r\n <div class=\"transaction-icon ${t.type}\">\r\n ${t.type === 'income' ? '\ud83d\udce5' : '\ud83d\udce4'}\r\n <\/div>\r\n <div class=\"transaction-details\">\r\n <div class=\"transaction-category\">${categoryName}<\/div>\r\n <div class=\"transaction-description\">${t.description || '-'}<\/div>\r\n <\/div>\r\n <div class=\"transaction-amount ${t.type}\">\r\n ${t.type === 'income' ? '+' : '-'}${formatCurrency(t.amount)}\r\n <\/div>\r\n <div class=\"transaction-meta\">\r\n <div class=\"transaction-date\">${t.date}<\/div>\r\n <div class=\"transaction-account\">${accountName}<\/div>\r\n <\/div>\r\n <button class=\"delete-btn\" onclick=\"deleteTransaction(${t.id})\">\u2715<\/button>\r\n <\/div>\r\n `;\r\n }).join('');\r\n }\r\n \r\n function filterTransactions(filter) {\r\n currentFilter = filter;\r\n document.querySelectorAll('.transaction-filters .filter-btn').forEach(btn => {\r\n btn.classList.remove('active');\r\n });\r\n event.currentTarget.classList.add('active'); \/\/ \ud074\ub9ad\ub41c \ubc84\ud2bc \ud65c\uc131\ud654\r\n updateTransactionsList();\r\n }\r\n\r\n \r\n \/\/ Initialize Charts, Update Charts (\uae30\uc874 \ub85c\uc9c1 \uc720\uc9c0)\r\n function initCharts() {\r\n \/\/ Trend Chart (\ub77c\uc778 \ucc28\ud2b8\ub85c \ubcc0\uacbd: \ubd80\ub4dc\ub7ec\uc6b4 \uace1\uc120\uacfc \uc601\uc5ed \ucc44\uc6b0\uae30)\r\n const trendCtx = document.getElementById('trendChart').getContext('2d');\r\n trendChart = new Chart(trendCtx, {\r\n type: 'line',\r\n data: { labels: [], datasets: [] },\r\n options: {\r\n responsive: true, maintainAspectRatio: false,\r\n plugins: { legend: { position: 'top', labels: { usePointStyle: true } } },\r\n scales: {\r\n x: { grid: { display: false }, ticks: { maxRotation: 0 } }, \r\n y: { beginAtZero: true, ticks: { callback: function(value) { return (value \/ 1000000).toFixed(0) + 'M \u20ab'; } } }\r\n },\r\n elements: { \r\n point: { radius: 6, hoverRadius: 8 }, \r\n line: { tension: 0.4 } \r\n },\r\n interaction: { intersect: false, mode: 'index' }\r\n }\r\n });\r\n\r\n \/\/ Category Chart (\ub3c4\ub11b \ucc28\ud2b8 - \uc778\ud3ec\uadf8\ub798\ud53d \uc2a4\ud0c0\uc77c)\r\n const categoryCtx = document.getElementById('categoryChart').getContext('2d');\r\n categoryChart = new Chart(categoryCtx, {\r\n type: 'doughnut',\r\n data: { labels: [], datasets: [] },\r\n options: {\r\n responsive: true, maintainAspectRatio: false,\r\n plugins: { legend: { position: 'bottom', labels: { usePointStyle: true } } }\r\n }\r\n });\r\n\r\n \/\/ Account Chart (\ud30c\uc774 \ucc28\ud2b8 - \uc778\ud3ec\uadf8\ub798\ud53d \uc2a4\ud0c0\uc77c)\r\n const accountCtx = document.getElementById('accountChart').getContext('2d');\r\n accountChart = new Chart(accountCtx, {\r\n type: 'pie',\r\n data: { labels: [], datasets: [] },\r\n options: {\r\n responsive: true, maintainAspectRatio: false,\r\n plugins: { legend: { position: 'bottom', labels: { usePointStyle: true } } }\r\n }\r\n });\r\n }\r\n \r\n function updateCharts() {\r\n updateTrendChart();\r\n updateCategoryChart();\r\n updateAccountChart();\r\n }\r\n \r\n \/\/ \u2705 2. \uc218\uc785 vs \uc9c0\ucd9c \ucd94\uc774 \uadf8\ub798\ud504 \ud544\ud130 \uc2a4\ud0c0\uc77c \uc5c5\ub370\uc774\ud2b8 (\ucd94\uac00)\r\n function updateTrendChartFilterButtons(activeFilter) {\r\n const filters = [\r\n { id: 'trendFilterCorporate', value: 'corporate' },\r\n { id: 'trendFilterPersonal', value: 'personal' },\r\n { id: 'trendFilterAll', value: 'all' }\r\n ];\r\n \r\n filters.forEach(filter => {\r\n const btn = document.getElementById(filter.id);\r\n if (!btn) return;\r\n \r\n if (activeFilter === filter.value) {\r\n btn.classList.remove('btn-secondary');\r\n btn.classList.add('btn-primary');\r\n } else {\r\n btn.classList.remove('btn-primary');\r\n btn.classList.add('btn-secondary');\r\n }\r\n });\r\n }\r\n\r\n \/\/ \u2705 2. \uc218\uc785 vs \uc9c0\ucd9c \ucd94\uc774 \uadf8\ub798\ud504 \ud544\ud130 \ud568\uc218 (\uc218\uc815)\r\n function filterTrendChart(account) {\r\n trendChartAccountFilter = account;\r\n updateTrendChartFilterButtons(account);\r\n updateTrendChart();\r\n }\r\n \r\n \/\/ Update Trend Chart (\u2705 2. \uc218\uc815: \ub77c\uc778 \ucc28\ud2b8, \uadf8\ub77c\ub370\uc774\uc158 \uc0c9\uc0c1, \uc601\uc5ed \ucc44\uc6b0\uae30, \uac00\ub3c5\uc131 \ud5a5\uc0c1)\r\n function updateTrendChart() {\r\n const monthsToDisplay = 6;\r\n const monthlyData = {};\r\n const labels = [];\r\n const now = new Date();\r\n const accountsToFilter = trendChartAccountFilter === 'all' ? ['cash', 'corporate', 'personal'] : [trendChartAccountFilter];\r\n \r\n \/\/ \uc9c0\ub09c 6\uac1c\uc6d4\uc758 \uc6d4 \ub808\uc774\ube14 \uc0dd\uc131\r\n for (let i = monthsToDisplay - 1; i >= 0; i--) {\r\n const date = new Date(now.getFullYear(), now.getMonth() - i, 1);\r\n const year = date.getFullYear();\r\n const month = date.getMonth();\r\n const key = `${year}-${month}`;\r\n \r\n labels.push(currentLang === 'ko' ? `${month + 1}\uc6d4` : translations[currentLang].months[month]);\r\n monthlyData[key] = { income: 0, expense: 0 };\r\n }\r\n\r\n \/\/ \ud2b8\ub79c\uc7ad\uc158 \ub370\uc774\ud130\ub97c \uc6d4\ubcc4\ub85c \uc9d1\uacc4\r\n data.transactions.forEach(t => {\r\n const date = new Date(t.date);\r\n const year = date.getFullYear();\r\n const month = date.getMonth();\r\n const key = `${year}-${month}`;\r\n \r\n if (monthlyData[key]) {\r\n \/\/ \ud544\ud130\ub9c1\ub41c \uacc4\uc88c\ub9cc \ud3ec\ud568\r\n if (accountsToFilter.includes(t.account)) {\r\n if (t.type === 'income') {\r\n monthlyData[key].income += t.amount;\r\n } else {\r\n monthlyData[key].expense += t.amount;\r\n }\r\n }\r\n }\r\n });\r\n\r\n const incomeData = Object.values(monthlyData).map(m => m.income);\r\n const expenseData = Object.values(monthlyData).map(m => m.expense);\r\n\r\n \/\/ \uadf8\ub77c\ub370\uc774\uc158 \uc0dd\uc131 (\uac00\ub3c5\uc131 \ud5a5\uc0c1\uc744 \uc704\ud55c \ubd80\ub4dc\ub7ec\uc6b4 \uc0c9\uc0c1 \uadf8\ub77c\ub370\uc774\uc158)\r\n const ctx = document.getElementById('trendChart').getContext('2d');\r\n const gradientIncome = ctx.createLinearGradient(0, 0, 0, 400);\r\n gradientIncome.addColorStop(0, 'rgba(59, 130, 246, 0.6)'); \/\/ \ud30c\ub780\uc0c9 \uc0c1\ub2e8\r\n gradientIncome.addColorStop(1, 'rgba(59, 130, 246, 0.1)'); \/\/ \ud558\ub2e8 \ud22c\uba85\r\n\r\n const gradientExpense = ctx.createLinearGradient(0, 0, 0, 400);\r\n gradientExpense.addColorStop(0, 'rgba(239, 68, 68, 0.6)'); \/\/ \ube68\uac04\uc0c9 \uc0c1\ub2e8\r\n gradientExpense.addColorStop(1, 'rgba(239, 68, 68, 0.1)'); \/\/ \ud558\ub2e8 \ud22c\uba85\r\n\r\n trendChart.data.labels = labels;\r\n trendChart.data.datasets = [\r\n {\r\n label: currentLang === 'ko' ? '\uc218\uc785' : 'Thu nh\u1eadp',\r\n data: incomeData,\r\n borderColor: 'rgb(59, 130, 246)',\r\n backgroundColor: gradientIncome,\r\n fill: true,\r\n tension: 0.4,\r\n pointBackgroundColor: 'rgb(59, 130, 246)',\r\n pointBorderColor: '#fff',\r\n pointBorderWidth: 2,\r\n pointRadius: 6\r\n },\r\n {\r\n label: currentLang === 'ko' ? '\uc9c0\ucd9c' : 'Chi ti\u00eau',\r\n data: expenseData,\r\n borderColor: 'rgb(239, 68, 68)',\r\n backgroundColor: gradientExpense,\r\n fill: true,\r\n tension: 0.4,\r\n pointBackgroundColor: 'rgb(239, 68, 68)',\r\n pointBorderColor: '#fff',\r\n pointBorderWidth: 2,\r\n pointRadius: 6\r\n }\r\n ];\r\n trendChart.update();\r\n }\r\n\r\n \/\/ Update Category Chart (\uae30\uc874 \ub85c\uc9c1 \uc720\uc9c0)\r\n function updateCategoryChart() {\r\n const categoryTotals = {};\r\n const now = new Date();\r\n const currentMonth = now.getMonth();\r\n const currentYear = now.getFullYear();\r\n \r\n data.transactions.forEach(t => {\r\n const tDate = new Date(t.date);\r\n if (t.type === 'expense' && tDate.getMonth() === currentMonth && tDate.getFullYear() === currentYear) {\r\n categoryTotals[t.category] = (categoryTotals[t.category] || 0) + t.amount;\r\n }\r\n });\r\n\r\n const labels = Object.keys(categoryTotals).map(cat => translations[currentLang][cat] || cat);\r\n const values = Object.values(categoryTotals);\r\n \r\n const backgroundColors = ['#6366f1', '#8b5cf6', '#ec4899', '#f59e0b', '#10b981', '#06b6d4', '#4f46e5'];\r\n\r\n categoryChart.data.labels = labels;\r\n categoryChart.data.datasets = [{\r\n data: values,\r\n backgroundColor: backgroundColors.slice(0, values.length),\r\n hoverOffset: 8, \r\n borderWidth: 0, \r\n }];\r\n categoryChart.update();\r\n }\r\n\r\n \/\/ Update Account Chart (\uae30\uc874 \ub85c\uc9c1 \uc720\uc9c0)\r\n function updateAccountChart() {\r\n const accounts = ['cash', 'corporate', 'personal'];\r\n const labels = accounts.map(acc => translations[currentLang][acc]);\r\n const values = accounts.map(acc => Math.max(0, data.appliedBalances[acc])); \/\/ \uc801\uc6a9 \uc794\uc561 \uc0ac\uc6a9\r\n\r\n const backgroundColors = ['#f093fb', '#4facfe', '#43e97b'];\r\n\r\n accountChart.data.labels = labels;\r\n accountChart.data.datasets = [{\r\n data: values,\r\n backgroundColor: backgroundColors,\r\n hoverOffset: 8, \r\n borderWidth: 0, \r\n }];\r\n accountChart.update();\r\n }\r\n\r\n \/\/ =========================================================================\r\n \/\/ ===== EXPORT, IMPORT, RESET FUNCTIONS =====\r\n \/\/ =========================================================================\r\n\r\n \/\/ Export to Excel\r\n function exportToExcel() {\r\n try {\r\n \/\/ [\uc218\uc815\ub428] data.fixedExpenses\uac00 {} \uac1d\uccb4\uc784\uc744 \ubcf4\uc7a5\r\n const fixedExpensesCount = data.fixedExpenses ? Object.keys(data.fixedExpenses).length : 0;\r\n const hasData = data.transactions.length > 0 || fixedExpensesCount > 0;\r\n \r\n if (!hasData) {\r\n showToast(currentLang === 'ko' ? '\ub0b4\ubcf4\ub0bc \ub370\uc774\ud130\uac00 \uc5c6\uc2b5\ub2c8\ub2e4.' : 'Kh\u00f4ng c\u00f3 d\u1eef li\u1ec7u \u0111\u1ec3 xu\u1ea5t.', 'warning');\r\n return;\r\n }\r\n\r\n const wb = XLSX.utils.book_new();\r\n\r\n \/\/ \uac70\ub798 \ub0b4\uc5ed \uc2dc\ud2b8\r\n const transactionsForExport = data.transactions.map(t => ({\r\n '\ub0a0\uc9dc': t.date,\r\n '\uc720\ud615': t.type === 'income' ? '\uc218\uc785' : '\uc9c0\ucd9c',\r\n '\uacc4\uc88c': translations.ko[t.account] || t.account,\r\n '\uce74\ud14c\uace0\ub9ac': translations.ko[t.category] || t.category,\r\n '\uae08\uc561': t.amount,\r\n '\uc124\uba85': t.description || ''\r\n }));\r\n const ws = XLSX.utils.json_to_sheet(transactionsForExport, { defval: '' });\r\n XLSX.utils.book_append_sheet(wb, ws, '\uac70\ub798\ub0b4\uc5ed');\r\n\r\n \/\/ \uace0\uc815 \uc9c0\ucd9c \uc2dc\ud2b8 \ucd94\uac00\r\n if (fixedExpensesCount > 0) {\r\n const fixedExpensesFlat = [];\r\n const year = currentCalendarDate.getFullYear();\r\n const month = String(currentCalendarDate.getMonth() + 1).padStart(2, '0');\r\n for (const day in data.fixedExpenses) {\r\n const dayPadded = String(day).padStart(2, '0');\r\n data.fixedExpenses[day].forEach(exp => {\r\n fixedExpensesFlat.push({\r\n '\ub0a0\uc9dc': `${year}-${month}-${dayPadded}`,\r\n '\uc720\ud615': '\uace0\uc815 \uc9c0\ucd9c',\r\n '\uacc4\uc88c': translations.ko[exp.account] || exp.account,\r\n '\uae08\uc561': exp.amount,\r\n '\uc124\uba85': exp.description\r\n });\r\n });\r\n }\r\n if (fixedExpensesFlat.length > 0) {\r\n const fixedWs = XLSX.utils.json_to_sheet(fixedExpensesFlat, { defval: '' });\r\n XLSX.utils.book_append_sheet(wb, fixedWs, '\uace0\uc815\uc9c0\ucd9c');\r\n }\r\n }\r\n\r\n const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' });\r\n const buf = s2ab(wbout); \r\n const blob = new Blob([buf], { type: 'application\/octet-stream' });\r\n const url = URL.createObjectURL(blob);\r\n const a = document.createElement('a');\r\n a.href = url;\r\n a.download = `linh_financial_${new Date().toISOString().split('T')[0]}.xlsx`;\r\n document.body.appendChild(a);\r\n a.click();\r\n document.body.removeChild(a);\r\n URL.revokeObjectURL(url);\r\n\r\n showToast(currentLang === 'ko' ? 'Excel \ud30c\uc77c\uc774 \ub2e4\uc6b4\ub85c\ub4dc\ub418\uc5c8\uc2b5\ub2c8\ub2e4.' : '\u0110\u00e3 t\u1ea3i xu\u1ed1ng file Excel.', 'success');\r\n } catch (error) {\r\n console.error('Export error:', error);\r\n showToast(currentLang === 'ko' ? 'Excel \ub0b4\ubcf4\ub0b4\uae30 \uc911 \uc624\ub958\uac00 \ubc1c\uc0dd\ud588\uc2b5\ub2c8\ub2e4.' : 'L\u1ed7i khi xu\u1ea5t Excel.', 'error');\r\n }\r\n }\r\n\r\n \/\/ Export to CSV\r\n function exportToCSV() {\r\n try {\r\n \/\/ [\uc218\uc815\ub428] data.fixedExpenses\uac00 {} \uac1d\uccb4\uc784\uc744 \ubcf4\uc7a5\r\n const fixedExpensesCount = data.fixedExpenses ? Object.keys(data.fixedExpenses).length : 0;\r\n const hasData = data.transactions.length > 0 || fixedExpensesCount > 0;\r\n \r\n if (!hasData) {\r\n showToast(currentLang === 'ko' ? '\ub0b4\ubcf4\ub0bc \ub370\uc774\ud130\uac00 \uc5c6\uc2b5\ub2c8\ub2e4.' : 'Kh\u00f4ng c\u00f3 d\u1eef li\u1ec7u \u0111\u1ec3 xu\u1ea5t.', 'warning');\r\n return;\r\n }\r\n\r\n \/\/ \uac70\ub798 \ub0b4\uc5ed \ub370\uc774\ud130\r\n const transactionsForExport = data.transactions.map(t => ({\r\n '\ub0a0\uc9dc': t.date,\r\n '\uc720\ud615': t.type === 'income' ? '\uc218\uc785' : '\uc9c0\ucd9c',\r\n '\uacc4\uc88c': translations.ko[t.account] || t.account,\r\n '\uce74\ud14c\uace0\ub9ac': translations.ko[t.category] || t.category,\r\n '\uae08\uc561': t.amount,\r\n '\uc124\uba85': t.description || ''\r\n }));\r\n\r\n \/\/ \uace0\uc815 \uc9c0\ucd9c \ub370\uc774\ud130\r\n let fixedExpensesFlat = [];\r\n if (fixedExpensesCount > 0) {\r\n const year = currentCalendarDate.getFullYear();\r\n const month = String(currentCalendarDate.getMonth() + 1).padStart(2, '0');\r\n for (const day in data.fixedExpenses) {\r\n const dayPadded = String(day).padStart(2, '0');\r\n data.fixedExpenses[day].forEach(exp => {\r\n fixedExpensesFlat.push({\r\n '\ub0a0\uc9dc': `${year}-${month}-${dayPadded}`,\r\n '\uc720\ud615': '\uace0\uc815 \uc9c0\ucd9c',\r\n '\uacc4\uc88c': translations.ko[exp.account] || exp.account,\r\n '\uce74\ud14c\uace0\ub9ac': '',\r\n '\uae08\uc561': exp.amount,\r\n '\uc124\uba85': exp.description\r\n });\r\n });\r\n }\r\n }\r\n\r\n const allData = [...transactionsForExport, ...fixedExpensesFlat];\r\n \r\n if (allData.length === 0) {\r\n showToast(currentLang === 'ko' ? '\ub0b4\ubcf4\ub0bc \ub370\uc774\ud130\uac00 \uc5c6\uc2b5\ub2c8\ub2e4.' : 'Kh\u00f4ng c\u00f3 d\u1eef li\u1ec7u \u0111\u1ec3 xu\u1ea5t.', 'warning');\r\n return;\r\n }\r\n\r\n const ws = XLSX.utils.json_to_sheet(allData, { defval: '' });\r\n const csv = XLSX.utils.sheet_to_csv(ws);\r\n\r\n const blob = new Blob([csv], { type: 'text\/csv;charset=utf-8;' });\r\n const url = URL.createObjectURL(blob);\r\n const a = document.createElement('a');\r\n a.href = url;\r\n a.download = `linh_financial_${new Date().toISOString().split('T')[0]}.csv`;\r\n document.body.appendChild(a);\r\n a.click();\r\n document.body.removeChild(a);\r\n URL.revokeObjectURL(url);\r\n\r\n showToast(currentLang === 'ko' ? 'CSV \ud30c\uc77c\uc774 \ub2e4\uc6b4\ub85c\ub4dc\ub418\uc5c8\uc2b5\ub2c8\ub2e4.' : '\u0110\u00e3 t\u1ea3i xu\u1ed1ng file CSV.', 'success');\r\n } catch (error) {\r\n console.error('CSV Export error:', error);\r\n showToast(currentLang === 'ko' ? 'CSV \ub0b4\ubcf4\ub0b4\uae30 \uc911 \uc624\ub958\uac00 \ubc1c\uc0dd\ud588\uc2b5\ub2c8\ub2e4.' : 'L\u1ed7i khi xu\u1ea5t CSV.', 'error');\r\n }\r\n }\r\n\r\n \/\/ s2ab \ud5ec\ud37c \ud568\uc218\r\n function s2ab(s) {\r\n const buf = new ArrayBuffer(s.length);\r\n const view = new Uint8Array(buf);\r\n for (let i = 0; i < s.length; i++) view[i] = s.charCodeAt(i) & 0xFF;\r\n return buf;\r\n }\r\n\r\n \/\/ Import from Excel (\uae30\uc874 \ub85c\uc9c1 \uc720\uc9c0)\r\n function importFromExcel(event) {\r\n const file = event.target.files[0];\r\n if (!file) { return; }\r\n\r\n const reader = new FileReader();\r\n reader.onload = function(e) {\r\n try {\r\n const data = new Uint8Array(e.target.result);\r\n const workbook = XLSX.read(data, { type: 'array' });\r\n \r\n const sheetName = workbook.SheetNames.find(name => name === '\uac70\ub798\ub0b4\uc5ed' || name === 'Giao d\u1ecbch');\r\n\r\n if (!sheetName) {\r\n showToast(currentLang === 'ko' ? '\uc720\ud6a8\ud55c \"\uac70\ub798\ub0b4\uc5ed\" \uc2dc\ud2b8\uac00 \uc5c6\uc2b5\ub2c8\ub2e4.' : 'Kh\u00f4ng t\u00ecm th\u1ea5y b\u1ea3ng \"Giao d\u1ecbch\" h\u1ee3p l\u1ec7.', 'error');\r\n return;\r\n }\r\n\r\n const worksheet = workbook.Sheets[sheetName];\r\n \r\n const json = XLSX.utils.sheet_to_json(worksheet, { header: 1, raw: true });\r\n const headers = json[0];\r\n const dataRows = json.slice(1);\r\n\r\n if (dataRows.length === 0) {\r\n showToast(currentLang === 'ko' ? '\uc2dc\ud2b8\uc5d0 \uac70\ub798 \ub0b4\uc5ed\uc774 \uc5c6\uc2b5\ub2c8\ub2e4.' : 'B\u1ea3ng kh\u00f4ng c\u00f3 giao d\u1ecbch.', 'error');\r\n return;\r\n }\r\n \r\n processImportedTransactions(headers, dataRows, worksheet);\r\n\r\n } catch (error) {\r\n console.error('File import error:', error);\r\n showToast(currentLang === 'ko' ? '\ud30c\uc77c\uc744 \uc77d\ub294 \uc911 \uc624\ub958\uac00 \ubc1c\uc0dd\ud588\uc2b5\ub2c8\ub2e4.' : 'L\u1ed7i khi \u0111\u1ecdc t\u1ec7p.', 'error');\r\n } finally {\r\n document.getElementById('importFile').value = '';\r\n }\r\n };\r\n reader.readAsArrayBuffer(file);\r\n }\r\n\r\n \/\/ processImportedTransactions (\uae30\uc874 \ub85c\uc9c1 \uc720\uc9c0)\r\n function processImportedTransactions(headers, dataRows, worksheet) {\r\n const newTransactions = [];\r\n let successCount = 0;\r\n const now = Date.now();\r\n let idCounter = 0;\r\n\r\n const headerMap = {\r\n '\ub0a0\uc9dc': 'date', 'ng\u00e0y': 'date', '\uc720\ud615': 'type_text', 'lo\u1ea1i': 'type_text', '\uacc4\uc88c': 'account_text', 't\u00e0i kho\u1ea3n': 'account_text', '\uce74\ud14c\uace0\ub9ac': 'category_text', 'danh m\u1ee5c': 'category_text', '\uae08\uc561': 'amount', 's\u1ed1 ti\u1ec1n': 'amount', '\uc124\uba85': 'description', 'm\u00f4 t\u1ea3': 'm\u00f4 t\u1ea3', '\uc124\uba85': 'description' \r\n };\r\n \r\n const getReverseMap = () => {\r\n const result = {};\r\n ['cash', 'corporate', 'personal', 'salary', 'food', 'transport', 'living', 'business', 'other', 'income', 'expense'].forEach(key => {\r\n if (translations.ko[key]) result[translations.ko[key].toLowerCase()] = key;\r\n if (translations.vi[key]) result[translations.vi[key].toLowerCase()] = key;\r\n });\r\n return result;\r\n };\r\n const reverseMap = getReverseMap();\r\n\r\n dataRows.forEach((row, rowIndex) => {\r\n const transaction = {};\r\n \r\n headers.forEach((header, colIndex) => {\r\n const normalizedHeader = String(header).toLowerCase().trim();\r\n const internalKey = headerMap[normalizedHeader];\r\n if (internalKey) {\r\n const cellAddress = XLSX.utils.encode_cell({r: rowIndex + 1, c: colIndex});\r\n const cell = worksheet[cellAddress];\r\n let value = row[colIndex]; \r\n\r\n if (internalKey === 'date' && cell && cell.t === 'n') {\r\n value = XLSX.utils.format_cell(cell, 'YYYY-MM-DD'); \r\n }\r\n\r\n if (typeof value === 'string') {\r\n value = value.trim();\r\n }\r\n \r\n transaction[internalKey] = value;\r\n }\r\n });\r\n\r\n const amount = parseFloat(transaction.amount);\r\n if (!transaction.date || !amount || amount <= 0) { return; }\r\n\r\n const type = reverseMap[transaction.type_text?.toLowerCase().trim()] || 'expense'; \r\n const account = reverseMap[transaction.account_text?.toLowerCase().trim()] || 'corporate';\r\n const category = reverseMap[transaction.category_text?.toLowerCase().trim()] || 'other';\r\n\r\n const finalTransaction = {\r\n id: now + idCounter++,\r\n date: transaction.date, \r\n type: type,\r\n account: account,\r\n category: category,\r\n amount: amount,\r\n description: transaction.description || ''\r\n };\r\n\r\n newTransactions.push(finalTransaction);\r\n successCount++;\r\n });\r\n\r\n if (successCount > 0) {\r\n data.transactions = newTransactions.concat(data.transactions);\r\n \r\n data.balances = { cash: 0, corporate: 0, personal: 0 };\r\n data.transactions.forEach(t => {\r\n if (t.type === 'income') { data.balances[t.account] += t.amount; } else { data.balances[t.account] -= t.amount; }\r\n });\r\n \r\n data.appliedBalances = { ...data.balances }; \r\n document.getElementById('applyFixedSwitch').checked = false; \r\n\r\n updateDashboard();\r\n updateTransactionsList();\r\n updateCharts();\r\n showToast(currentLang === 'ko' ? `${successCount}\uac74\uc758 \uac70\ub798\ub97c \uc131\uacf5\uc801\uc73c\ub85c \ubd88\ub7ec\uc654\uc2b5\ub2c8\ub2e4.` : `\u0110\u00e3 t\u1ea3i th\u00e0nh c\u00f4ng ${successCount} giao d\u1ecbch.`, 'success');\r\n\r\n saveData().catch(() => {\r\n showToast(currentLang === 'ko' ? '\ub370\uc774\ud130 \uc800\uc7a5 \uc2e4\ud328 (\uc11c\ubc84 \uc624\ub958)' : 'L\u1ed7i l\u01b0u d\u1eef li\u1ec7u (L\u1ed7i m\u00e1y ch\u1ee7)', 'error');\r\n });\r\n\r\n } else {\r\n showToast(currentLang === 'ko' ? '\ubd88\ub7ec\uc62c \uc720\ud6a8\ud55c \uac70\ub798\uac00 \uc5c6\uc2b5\ub2c8\ub2e4.' : 'Kh\u00f4ng c\u00f3 giao d\u1ecbch h\u1ee3p l\u1ec7 \u0111\u1ec3 t\u1ea3i.', 'warning');\r\n }\r\n }\r\n\r\n \/\/ Reset Modal, Reset All Data\r\n function showResetModal() { document.getElementById('resetModal').classList.add('show'); }\r\n function hideResetModal() { document.getElementById('resetModal').classList.remove('show'); }\r\n function resetAllData() { \r\n data = { transactions: [], balances: { cash: 0, corporate: 0, personal: 0 }, appliedBalances: { cash: 0, corporate: 0, personal: 0 }, budgets: { weekly: 0, monthly: 0 }, fixedExpenses: {} };\r\n \r\n updateDashboard(); \r\n updateTransactionsList(); \r\n updateCharts(); \r\n renderFixedExpenseCalendar(); \r\n document.getElementById('applyFixedSwitch').checked = false;\r\n hideResetModal(); \r\n showToast(currentLang === 'ko' ? '\ubaa8\ub4e0 \ub370\uc774\ud130\uac00 \ucd08\uae30\ud654\ub418\uc5c8\uc2b5\ub2c8\ub2e4' : '\u0110\u00e3 x\u00f3a t\u1ea5t c\u1ea3 d\u1eef li\u1ec7u', 'success'); \r\n\r\n saveData().catch(() => { \r\n showToast(currentLang === 'ko' ? '\ub370\uc774\ud130 \uc800\uc7a5 \uc624\ub958: \ucd08\uae30\ud654 \uc0c1\ud0dc\ub294 \uc720\uc9c0\ub418\uc9c0\ub9cc \ub3d9\uae30\ud654\uac00 \ud544\uc694\ud569\ub2c8\ub2e4.' : 'L\u1ed7i l\u01b0u d\u1eef li\u1ec7u: C\u1ea7n \u0111\u1ed3ng b\u1ed9 h\u00f3a.', 'error');\r\n });\r\n }\r\n \r\n \/\/ Toast Notification (\uae30\uc874 \ub85c\uc9c1 \uc720\uc9c0)\r\n function showToast(message, type = 'success') {\r\n const toast = document.getElementById('toast');\r\n toast.textContent = message;\r\n toast.className = 'toast ' + type;\r\n toast.classList.add('show');\r\n setTimeout(() => { toast.classList.remove('show'); }, 3000);\r\n }\r\n\r\n \/\/ Server Communication Functions\r\n function loadData() {\r\n const loadPromise = new Promise((resolve, reject) => {\r\n if (typeof linhFinancialAjax === 'undefined') { console.error('WordPress AJAX variables not initialized.'); showToast(currentLang === 'ko' ? '\uc11c\ubc84 \ud1b5\uc2e0 \ucd08\uae30\ud654 \uc2e4\ud328' : 'L\u1ed7i kh\u1edfi t\u1ea1o truy\u1ec1n th\u00f4ng m\u00e1y ch\u1ee7', 'error'); return reject('AJAX not initialized'); }\r\n if (linhFinancialAjax.user_id == 0) { showToast(currentLang === 'ko' ? '\uad00\ub9ac\uc790\ub85c \ub85c\uadf8\uc778\ud574\uc57c \ub370\uc774\ud130\ub97c \ub85c\ub4dc\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.' : 'C\u1ea7n \u0111\u0103ng nh\u1eadp admin \u0111\u1ec3 t\u1ea3i d\u1eef li\u1ec7u.', 'error'); return resolve(); }\r\n\r\n jQuery.ajax({\r\n url: linhFinancialAjax.ajax_url, type: 'POST', data: { action: 'linh_financial_load', nonce: linhFinancialAjax.nonce },\r\n success: function(response) {\r\n if (response.success && response.data && response.data.data) {\r\n data = response.data.data;\r\n \r\n \/\/ [\uc218\uc815\ub428] PHP\uc5d0\uc11c {} (stdClass)\ub85c \ubcf4\ub0b4\uc8fc\ubbc0\ub85c JS\uc5d0\uc11c \uc774\uc911 \uccb4\ud06c\r\n if (!data.fixedExpenses || Array.isArray(data.fixedExpenses)) { \r\n data.fixedExpenses = {}; \/\/ \ube48 \uac1d\uccb4 {} \ubcf4\uc7a5\r\n }\r\n if (!data.budgets) { data.budgets = { weekly: 0, monthly: 0 }; }\r\n \r\n data.appliedBalances = { ...data.balances };\r\n resolve();\r\n } else { console.warn('Server load failed or no user data (using defaults):', response); resolve(); }\r\n },\r\n error: function(xhr, status, error) { console.error('AJAX Load Error:', status, error); showToast(currentLang === 'ko' ? '\ub370\uc774\ud130 \ub85c\ub4dc \uc624\ub958: \uc11c\ubc84 \uc5f0\uacb0 \uc2e4\ud328' : 'L\u1ed7i t\u1ea3i d\u1eef li\u1ec7u: L\u1ed7i k\u1ebft n\u1ed1i m\u00e1y ch\u1ee7', 'error'); reject(error); }\r\n });\r\n });\r\n return loadPromise;\r\n }\r\n\r\n function saveData() {\r\n const savePromise = new Promise((resolve, reject) => {\r\n if (typeof linhFinancialAjax === 'undefined' || linhFinancialAjax.user_id == 0) { showToast(currentLang === 'ko' ? '\uad00\ub9ac\uc790\ub85c \ub85c\uadf8\uc778\ud574\uc57c \uc800\uc7a5 \uac00\ub2a5' : 'C\u1ea7n \u0111\u0103ng nh\u1eadp admin \u0111\u1ec3 l\u01b0u', 'error'); return reject('Not logged in'); }\r\n \r\n \/\/ [\uc218\uc815\ub428] data.fixedExpenses\uac00 {} \uac1d\uccb4\uc784\uc744 \ubcf4\uc7a5\r\n if (!data.fixedExpenses || Array.isArray(data.fixedExpenses)) {\r\n data.fixedExpenses = {};\r\n }\r\n \r\n const postData = { action: 'linh_financial_save', nonce: linhFinancialAjax.nonce };\r\n\r\n jQuery.ajax({\r\n url: linhFinancialAjax.ajax_url + '?action=' + postData.action + '&nonce=' + postData.nonce,\r\n type: 'POST', data: JSON.stringify(data), contentType: 'application\/json; charset=utf-8', dataType: 'json',\r\n success: function(response) {\r\n if (response.success) { resolve(); } \r\n else { console.error('Server save failed:', response); const msg = response.data && response.data.message ? response.data.message : '\uc54c \uc218 \uc5c6\ub294 \uc11c\ubc84 \uc800\uc7a5 \uc624\ub958'; showToast(currentLang === 'ko' ? '\ub370\uc774\ud130 \uc800\uc7a5 \uc624\ub958: ' + msg : 'L\u1ed7i l\u01b0u d\u1eef li\u1ec7u: ' + msg, 'error'); reject(response); }\r\n },\r\n error: function(xhr, status, error) { console.error('AJAX Save Error:', status, error, xhr.responseText); showToast(currentLang === 'ko' ? '\ub370\uc774\ud130 \uc800\uc7a5 \uc624\ub958: \uc11c\ubc84 \uc5f0\uacb0 \uc2e4\ud328' : 'L\u1ed7i l\u01b0u d\u1eef li\u1ec7u: L\u1ed7i k\u1ebft n\u1ed1i m\u00e1y ch\u1ee7', 'error'); reject(error); }\r\n });\r\n });\r\n return savePromise;\r\n }\r\n\r\n\r\n \/\/ Bug Testing - Auto test on load\r\n console.log('=== Financial Manager Pro - Bug Test Report ===');\r\n console.log('\u2713 Fixed Expenses Toggle\/Edit\/Delete Fixed');\r\n console.log('\u2713 Trend Chart Month\/Filter\/Color Fixed');\r\n console.log('\u2713 Transaction Filter Fixed');\r\n console.log('\u2713 Excel Import\/Export Fixed with Manual Download');\r\n console.log('\u2713 CSV Export Added');\r\n console.log('\u2713 UI Update Latency Reduced (Immediate UI + Background Save)');\r\n console.log('=== System Ready ===');\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Linh Financial \ud83d\udcb0 Linh Financial \ud55c\uad6d\uc5b4 Ti\u1ebfng Vi\u1ec7t \ud83d\udcb5 \ud604\uae08 0 \u20ab \ud83c\udfe2 \ubc95\uc778\uacc4\uc88c 0 \u20ab \ud83d\udc64 \uac1c\uc778\uacc4\uc88c 0 \u20ab \ud83d\udcc8 \uc774\ubc88\ub2ec \uc218\uc785 0 \u20ab \ud83d\udcc9 \uc774\ubc88\ub2ec \uc9c0\ucd9c 0 \u20ab \uc6d4 \uace0\uc815 \uc9c0\ucd9c \uacc4\ud68d \u25c0 \u25b6 \uc6d4 \ucd1d \uace0\uc815 \uc9c0\ucd9c: 0 \u20ab \uacc4\uc88c \ubc95\uc778\uacc4\uc88c\uac1c\uc778\uacc4\uc88c \uae08\uc561 (VND) \uc124\uba85\/\ud56d\ubaa9 \ud83d\udcb8 \uace0\uc815 \uc9c0\ucd9c \ucd94\uac00 \uc784\uc2dc \uc801\uc6a9 ON\/OFF \ub0a0\uc9dc\ub97c […]<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"wf_page_folders":[],"class_list":["post-3613","page","type-page","status-publish","format-standard","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/hcbiopharm.net\/en\/wp-json\/wp\/v2\/pages\/3613","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hcbiopharm.net\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hcbiopharm.net\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hcbiopharm.net\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hcbiopharm.net\/en\/wp-json\/wp\/v2\/comments?post=3613"}],"version-history":[{"count":30,"href":"https:\/\/hcbiopharm.net\/en\/wp-json\/wp\/v2\/pages\/3613\/revisions"}],"predecessor-version":[{"id":3923,"href":"https:\/\/hcbiopharm.net\/en\/wp-json\/wp\/v2\/pages\/3613\/revisions\/3923"}],"wp:attachment":[{"href":"https:\/\/hcbiopharm.net\/en\/wp-json\/wp\/v2\/media?parent=3613"}],"wp:term":[{"taxonomy":"wf_page_folders","embeddable":true,"href":"https:\/\/hcbiopharm.net\/en\/wp-json\/wp\/v2\/wf_page_folders?post=3613"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}