:root{--green:#198c3b;--green-dark:#116f2d;--green-soft:#edf8f0;--orange:#f27a00;--blue:#2584d8;--red:#dc1724;--bg:#f4f7fa;--text:#18342a;--muted:#6e7d76;--line:#dfe8e2;--sidebar:#f8faf9}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#1d2c26;font-family:"Segoe UI",Arial,sans-serif;font-size:15px}.app-shell{display:flex;min-height:100vh}.sidebar{width:295px;background:var(--sidebar);display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;border-right:1px solid #e4ebe7;z-index:20}.brand{height:112px;background:#fff;display:flex;align-items:center;justify-content:center;border-bottom:1px solid #e5ebe7}.brand img{width:150px;max-height:82px;object-fit:contain}.sidebar nav{padding:22px 13px}.sidebar nav a{display:flex;align-items:center;gap:18px;color:#405148;text-decoration:none;padding:16px 23px;border-radius:8px;margin:4px 0;font-size:17px;border-left:4px solid transparent}.sidebar nav a i{width:18px;color:var(--green);font-size:18px}.sidebar nav a:hover{background:#f0f6f2;color:var(--green)}.sidebar nav a.active{background:#fff1e3;color:#146f31;font-weight:700;border-left-color:#21a64b}.sidebar nav a.active i{color:var(--orange)}.sidebar-foot{margin-top:auto;border-top:1px solid #e2e9e5;text-align:center;padding:27px 20px;color:#718077}.sidebar-foot span,.sidebar-foot strong{display:block}.sidebar-foot strong{color:var(--green);letter-spacing:4px;font-size:13px;margin-top:9px}.main{margin-left:295px;width:calc(100% - 295px)}.topbar{height:112px;background:#fff;border-bottom:1px solid #e2e8e4;padding:0 34px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:10;box-shadow:0 2px 6px rgba(15,58,34,.03)}.app-title{font-size:21px;font-weight:700;color:#177b35}.top-user{display:flex;align-items:center;gap:14px}.avatar{width:49px;height:49px;border-radius:50%;background:#eaf6ed;border:1px solid #cfe6d5;color:#167737;display:grid;place-items:center;font-size:21px;font-weight:700}.user-info b,.user-info span{display:block}.user-info b{font-size:16px}.user-info span{color:#77847d}.circle-btn{width:48px;height:48px;border:1px solid #e0e8e3;border-radius:50%;display:grid;place-items:center;background:#fff;color:#4e6157;text-decoration:none;font-size:19px}.circle-btn:hover{background:#f2f8f4;color:var(--green)}.content{padding:30px 36px}.page-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}.page-heading h1{margin:0;color:#167334;font-size:33px;font-weight:700}.page-heading p{margin:5px 0 0;color:#66766e;font-size:17px}.btn-add{background:#1c963f;border-color:#1c963f;padding:12px 20px;font-weight:700;font-size:16px}.menu-toggle{display:none;border:0;background:none;font-size:25px}.btn-primary,.btn-success{background:var(--green);border-color:var(--green)}.btn-primary:hover,.btn-success:hover{background:var(--green-dark);border-color:var(--green-dark)}.panel{background:#fff;border:1px solid #e0e8e3;border-radius:12px;padding:22px;box-shadow:0 4px 12px rgba(26,72,45,.035)}.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:17px}.panel-head h3{font-size:18px;color:#146f31;margin:0;font-weight:700}.panel-head p{color:var(--muted);margin:4px 0 0}.kpi-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-bottom:24px}.kpi-card{background:#fff;border:1px solid #e0e8e3;border-radius:11px;padding:21px 18px;display:flex;justify-content:space-between;align-items:center;min-height:112px;border-left:5px solid var(--green);box-shadow:0 3px 10px rgba(26,72,45,.035)}.kpi-card:nth-child(2){border-left-color:var(--red)}.kpi-card:nth-child(3){border-left-color:var(--blue)}.kpi-card:nth-child(4){border-left-color:var(--green)}.kpi-card:nth-child(5){border-left-color:var(--orange)}.kpi-card:nth-child(6){border-left-color:#7c4dcc}.kpi-card span{display:block;color:#66776f;margin-bottom:7px}.kpi-card strong{font-size:22px;color:#16382a}.kpi-card>i{font-size:23px;color:var(--green);background:var(--green-soft);width:48px;height:48px;border-radius:12px;display:grid;place-items:center}.table{margin:0}.table thead th{background:#f8faf9;color:#203b2f;font-weight:700;border-bottom:1px solid #d6e1da;white-space:nowrap;padding:14px 12px}.table td{border-bottom-color:#e5ece8;padding:14px 12px;vertical-align:middle}.project-link{text-decoration:none;color:#1f3029}.project-link b,.project-link small{display:block}.project-link b{color:#173d2a}.project-link small,.table small{color:var(--muted)}.badge-soft{display:inline-block;background:#edf4f0;color:#456257;border-radius:6px;padding:6px 9px;font-size:12px;font-weight:600}.progress{height:10px;background:#e5ebe7;border-radius:8px;margin-bottom:4px}.progress-bar{background:var(--green);border-radius:8px}.filter-bar{display:flex;gap:15px;margin-bottom:20px;align-items:end}.filter-bar>.form-control{max-width:380px}.filter-bar>.form-select{max-width:240px}.form-control,.form-select{border-color:#d5e0da;border-radius:8px;min-height:48px}.form-control:focus,.form-select:focus{border-color:#61b879;box-shadow:0 0 0 .2rem rgba(25,140,59,.12)}.form-panel label,.modal label,.filter-bar label{font-weight:700;margin-bottom:7px;color:#243d32}.section-title{font-size:16px;font-weight:700;color:#146f31;margin:10px 0 14px;padding-bottom:10px;border-bottom:1px solid var(--line)}.section-title:not(:first-child){margin-top:28px}.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}.project-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.project-header h2{font-size:26px;color:#146f31;margin:0}.project-header p{color:var(--muted);margin:6px 0 0}.status-pill{border-radius:6px;padding:7px 10px;font-size:12px;font-weight:700}.status-in_progress{background:#e8f6ec;color:#1b873d}.status-completed{background:#e9f3fc;color:#2575b9}.status-paused{background:#fff1d9;color:#a76b00}.status-cancelled{background:#fde9eb;color:#bf2631}.project-kpis{margin-bottom:18px}.project-tabs{border:0;margin-bottom:14px}.project-tabs .nav-link{border:0;border-radius:7px;color:#68776f;margin-right:6px}.project-tabs .nav-link.active{background:#eaf6ed;color:var(--green);font-weight:700}.detail-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}.detail-grid span,.detail-grid b{display:block}.detail-grid span{color:var(--muted);font-size:12px;margin-bottom:6px}.detail-grid .span-2{grid-column:span 2}.timeline{padding:10px 22px}.stage-row{display:flex;gap:15px;align-items:flex-start;padding:17px 0;border-bottom:1px solid var(--line)}.stage-row:last-child{border:0}.stage-dot{width:36px;height:36px;border-radius:50%;background:#eff3f1;color:#9ca8a1;display:grid;place-items:center;flex:none}.stage-dot.done{background:#e6f6eb;color:#1d9444}.stage-dot.doing{background:#fff0df;color:#e67000}.stage-main{flex:1}.stage-head{display:flex;justify-content:space-between}.stage-head b,.stage-head small{display:block}.stage-head small{color:var(--muted);margin-top:4px}.stage-meta{display:flex;gap:24px;color:var(--muted);margin-top:9px;font-size:12px}.stage-result{margin:8px 0 0;color:#555d72}.login-page{min-height:100vh;display:grid;place-items:center;background:#f4f7f5}.login-card{width:min(430px,calc(100% - 30px));background:#fff;padding:38px;border-radius:16px;box-shadow:0 18px 45px rgba(21,73,42,.12);border-top:5px solid var(--green)}.login-brand{display:block;width:160px;height:90px;object-fit:contain;margin:0 auto 15px}.login-card h2{text-align:center;color:#147032;font-size:24px}.login-card p{text-align:center;color:var(--muted);margin-bottom:25px}.login-card label{font-weight:700;margin:12px 0 6px}.login-card button{margin:22px 0 14px;min-height:48px;font-weight:700}.login-card>small{display:block;text-align:center;color:var(--muted)}@media(max-width:1250px){.kpi-grid{grid-template-columns:repeat(3,1fr)}.detail-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:850px){.sidebar{transform:translateX(-100%);transition:.2s}.sidebar.open{transform:translateX(0)}.main{margin-left:0;width:100%}.topbar{height:76px;padding:0 16px}.app-title{font-size:15px}.top-user .user-info,.top-user .circle-btn:first-of-type{display:none}.menu-toggle{display:block}.content{padding:18px}.page-heading h1{font-size:26px}.page-heading p{font-size:14px}.kpi-grid{grid-template-columns:1fr 1fr}.filter-bar{flex-wrap:wrap}.detail-grid{grid-template-columns:1fr}.detail-grid .span-2{grid-column:auto}.project-header{align-items:flex-start}.stage-meta{flex-direction:column;gap:5px}}@media(max-width:560px){.kpi-grid{grid-template-columns:1fr}.page-heading{align-items:flex-start;gap:14px}.page-heading .btn{white-space:nowrap}.app-title{display:none}}@media print{.sidebar,.topbar,.page-heading .btn,.filter-bar,.btn{display:none!important}.main{margin:0;width:100%}.content{padding:0}.panel{box-shadow:none;border:0}}

/* Version 1.0.4 - Compact UI aligned with QL Cong Viec */
body{font-size:13px}
.sidebar{width:236px}
.brand{height:88px}
.brand img{width:120px;max-height:64px}
.sidebar nav{padding:17px 10px}
.sidebar nav a{gap:14px;padding:12px 18px;margin:3px 0;font-size:14px;border-radius:7px;border-left-width:3px}
.sidebar nav a i{width:16px;font-size:15px}
.sidebar-foot{padding:21px 16px}
.sidebar-foot strong{font-size:11px;margin-top:7px}
.main{margin-left:236px;width:calc(100% - 236px)}
.topbar{height:88px;padding:0 27px}
.app-title{font-size:17px}
.top-user{gap:11px}
.avatar{width:40px;height:40px;font-size:17px}
.user-info b{font-size:14px}
.user-info span{font-size:13px}
.circle-btn{width:40px;height:40px;font-size:16px}
.content{padding:24px 29px}
.page-heading{margin-bottom:18px}
.page-heading h1{font-size:27px}
.page-heading p{font-size:14px;margin-top:4px}
.btn-add{padding:10px 16px;font-size:14px}
.panel{border-radius:10px;padding:18px}
.panel-head{margin-bottom:14px}
.panel-head h3{font-size:16px}
.kpi-grid{gap:13px;margin-bottom:19px}
.kpi-card{border-radius:9px;padding:17px 14px;min-height:90px;border-left-width:4px}
.kpi-card span{margin-bottom:5px}
.kpi-card strong{font-size:18px}
.kpi-card>i{font-size:19px;width:39px;height:39px;border-radius:10px}
.table thead th{padding:11px 10px}
.table td{padding:11px 10px}
.badge-soft{padding:5px 7px;font-size:11px}
.filter-bar{gap:12px;margin-bottom:16px}
.form-control,.form-select{min-height:39px;border-radius:7px;font-size:13px}
.form-panel label,.modal label,.filter-bar label{margin-bottom:5px}
.section-title{font-size:14px;margin:8px 0 11px;padding-bottom:8px}
.form-actions{margin-top:19px}
.project-header{margin-bottom:13px}
.project-header h2{font-size:21px}
.project-header p{margin-top:5px}
.status-pill{padding:6px 8px;font-size:11px}
.detail-grid{gap:18px}
.timeline{padding:8px 18px}
.stage-row{gap:12px;padding:14px 0}
.stage-dot{width:29px;height:29px}
.stage-meta{gap:19px;margin-top:7px;font-size:11px}
.login-card{width:min(390px,calc(100% - 30px));padding:30px}
.login-brand{width:128px;height:72px;margin-bottom:12px}
.login-card h2{font-size:20px}
.login-card p{margin-bottom:20px}
.login-card label{margin:10px 0 5px}
.login-card button{margin:18px 0 11px;min-height:39px}
@media(max-width:850px){.topbar{height:68px}.content{padding:16px}.page-heading h1{font-size:23px}}

/* Version 1.0.5 - Project form layout */
.project-form{padding:0;overflow:hidden}
.project-form .form-section{padding:20px 22px;border-bottom:1px solid var(--line)}
.project-form .form-section:last-of-type{border-bottom:0}
.form-section-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:18px}
.form-section-icon{width:34px;height:34px;flex:0 0 34px;border-radius:8px;background:var(--green-soft);color:var(--green);display:grid;place-items:center;font-size:16px}
.form-section-head h3{margin:1px 0 2px;color:#146f31;font-size:16px;font-weight:700}
.form-section-head p{margin:0;color:var(--muted);font-size:12px}
.project-form label{display:block;font-size:13px;font-weight:700;margin-bottom:6px;color:#243d32}
.project-form .required{color:var(--red)}
.project-form .input-group-text{background:#f7faf8;border-color:#d5e0da;color:#607168;font-size:13px;min-width:39px;justify-content:center}
.project-form textarea.form-control{min-height:92px;resize:vertical}
.project-form .sticky-actions{margin:0;padding:16px 22px;background:#fbfcfb;border-top:1px solid var(--line);position:sticky;bottom:0;z-index:2}
.project-form .sticky-actions .btn{min-width:118px}
@media(max-width:850px){.project-form .form-section{padding:17px}.form-section-head p{display:none}.project-form .sticky-actions{padding:14px 17px}}

/* Version 1.1.1 - Refined finance modal forms */
.finance-modal .modal-dialog{max-width:760px}
.finance-modal .modal-dialog.modal-xl{max-width:980px}
.finance-form{border:0;border-radius:14px;overflow:hidden;box-shadow:0 22px 60px rgba(20,58,37,.2)}
.finance-modal-header{padding:17px 21px;background:#fff;border-bottom:1px solid var(--line)}
.finance-modal-header .modal-title{margin:0;color:#183b2a;font-size:19px;font-weight:750}
.finance-modal-header p{margin:3px 0 0;color:var(--muted);font-size:12px}
.finance-modal-icon{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:#eaf7ee;color:var(--green);font-size:18px;flex:0 0 40px}
.finance-modal-icon.expense{background:#fff2e5;color:var(--orange)}
.finance-form .modal-body{padding:0;background:#fbfcfb}
.finance-section{padding:17px 21px;background:#fff;border-bottom:1px solid var(--line)}
.finance-section-last{border-bottom:0}
.finance-section-title{display:flex;align-items:center;gap:8px;margin-bottom:13px;color:#146f31;font-size:13px;font-weight:750;text-transform:none}
.finance-section-title i{width:27px;height:27px;border-radius:7px;display:grid;place-items:center;background:var(--green-soft);font-size:13px}
.finance-form label{font-size:12.5px;margin-bottom:5px;color:#243d32}
.finance-form .required{color:var(--red)}
.finance-form .form-control,.finance-form .form-select{min-height:40px;background:#fff}
.finance-form textarea.form-control{min-height:76px;resize:vertical}
.finance-form .input-group-text{min-width:38px;justify-content:center;background:#f6f9f7;border-color:#d5e0da;color:#67766e;font-weight:600}
.finance-modal-footer{padding:13px 21px;background:#f8faf9;border-top:1px solid var(--line);gap:8px}
.finance-modal-footer .btn{min-width:108px;min-height:39px;font-weight:650}
.finance-modal-footer .btn-light{border:1px solid #d9e3dd;background:#fff;color:#43554b}
.finance-modal-footer .btn-light:hover{background:#f1f5f2}
.finance-modal .btn-close{box-shadow:none}
@media(max-width:850px){.finance-modal .modal-dialog,.finance-modal .modal-dialog.modal-xl{max-width:none;margin:12px}.finance-modal-header,.finance-section,.finance-modal-footer{padding-left:16px;padding-right:16px}.finance-modal-header p{display:none}}

/* Version 1.1.2 - KPI dashboard riêng cho nhân viên triển khai */
.kpi-grid.kpi-grid-service{grid-template-columns:repeat(4,minmax(0,1fr));}
@media (max-width:1100px){.kpi-grid.kpi-grid-service{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:640px){.kpi-grid.kpi-grid-service{grid-template-columns:1fr;}}