:root{
  --red:#b91c1c;--red-dark:#8f1414;--nav:#b91c1c;--nav-2:#7f1d1d;
  --bg:#f3f6f9;--card:#fff;--muted:#64748b;--border:#dbe3ec;
  --green:#16803c;--orange:#c66a00;--blue:#1769aa;--shadow:0 8px 24px rgba(15,23,42,.07)
}
*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:"Segoe UI",Arial,sans-serif;background:var(--bg);color:#243243;font-size:15px}
a{color:var(--blue);text-decoration:none}a:hover{text-decoration:underline}
.layout{display:grid;grid-template-columns:265px minmax(0,1fr);min-height:100vh}.sidebar{background:linear-gradient(180deg,var(--nav),var(--nav-2));color:#fff;padding:22px 16px;position:sticky;top:0;height:100vh;overflow:auto}.brand{text-align:center;font-weight:800;line-height:1.45;color:#fff;border-bottom:1px solid rgba(255,255,255,.16);padding-bottom:18px}.brand-mark{width:62px;height:62px;border-radius:50%;background:#fff;color:var(--red);display:grid;place-items:center;margin:0 auto 10px;font-size:18px;font-weight:900;border:4px solid #f3d1d1}.user-card{text-align:center;padding:18px 8px;border-bottom:1px solid rgba(255,255,255,.16)}.user-card strong{display:block;color:#fde68a;font-size:16px}.user-card small{display:block;color:#cbd5e1;margin-top:4px}.nav-title{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:#91a4b8;margin:20px 10px 7px}.nav-link{display:flex;gap:10px;align-items:center;color:#d7e0e9;padding:11px 12px;border-radius:8px;margin:3px 0}.nav-link:hover,.nav-link.active{background:rgba(255,255,255,.1);color:#fff;text-decoration:none}.nav-link .badge{margin-left:auto}.main{min-width:0}.topbar{min-height:72px;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:flex-start;gap:14px;padding:8px 26px;position:sticky;top:0;z-index:10}.topbar-title{flex:1;text-align:center;font-size:21px;line-height:1.25;font-weight:800;color:#8f1414;letter-spacing:.01em}.content{padding:26px;max-width:1600px;margin:0 auto}.page-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}.page-head h1{font-size:24px;margin:0;color:#8f1414}.page-head p{margin:5px 0 0;color:var(--muted)}
.card{background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:20px}.card+.card{margin-top:18px}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.stat{background:#fff;border:1px solid var(--border);border-left:5px solid var(--blue);border-radius:10px;padding:18px;box-shadow:var(--shadow)}.stat.green{border-left-color:var(--green)}.stat.red{border-left-color:var(--red)}.stat.orange{border-left-color:var(--orange)}.stat small{color:var(--muted)}.stat strong{display:block;font-size:28px;margin-top:8px}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.form-grid .full{grid-column:1/-1}.field label{display:block;font-weight:650;margin-bottom:6px;color:#334155}.field input,.field select,.field textarea,form input,form select,form textarea{width:100%;padding:10px 11px;border:1px solid #cbd5e1;border-radius:7px;background:#fff;font:inherit}.field textarea,form textarea{resize:vertical}.helptext{display:block;color:var(--muted);font-size:12px;margin-top:4px}.errorlist{margin:5px 0;padding-left:20px;color:var(--red)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 15px;border-radius:7px;border:1px solid transparent;cursor:pointer;font-weight:650;font:inherit;text-decoration:none}.btn:hover{text-decoration:none;filter:brightness(.97)}.btn-primary{background:var(--red);color:#fff}.btn-secondary{background:#475569;color:#fff}.btn-success{background:var(--green);color:#fff}.btn-warning{background:#f59e0b;color:#1f2937}.btn-danger{background:#dc2626;color:#fff}.btn-light{background:#fff;color:#334155;border-color:#cbd5e1}.btn-sm{padding:6px 10px;font-size:13px}.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse;min-width:760px}.table th,.table td{padding:11px 10px;border-bottom:1px solid #e5eaf0;text-align:left;vertical-align:top}.table th{background:#f8fafc;color:#475569;font-size:13px;white-space:nowrap}.table tbody tr:hover{background:#f8fbff}.table .num{text-align:right}.table .center{text-align:center}
.badge{display:inline-block;border-radius:999px;padding:4px 9px;font-size:12px;font-weight:700;background:#e2e8f0;color:#334155}.badge.red{background:#fee2e2;color:#991b1b}.badge.green{background:#dcfce7;color:#166534}.badge.blue{background:#dbeafe;color:#1e40af}.badge.orange{background:#ffedd5;color:#9a3412}.badge.gray{background:#e2e8f0;color:#475569}.progress{height:8px;background:#e2e8f0;border-radius:99px;overflow:hidden}.progress span{display:block;height:100%;background:var(--green)}
.alert{padding:12px 15px;border-radius:8px;border:1px solid;margin-bottom:14px}.alert-success{background:#ecfdf3;border-color:#86efac;color:#166534}.alert-danger{background:#fef2f2;border-color:#fecaca;color:#991b1b}.alert-warning{background:#fffbeb;border-color:#fde68a;color:#92400e}.alert-info{background:#eff6ff;border-color:#bfdbfe;color:#1e40af}.muted{color:var(--muted)}.text-red{color:var(--red)}.text-green{color:var(--green)}.nowrap{white-space:nowrap}.mt{margin-top:18px}.mb{margin-bottom:18px}.divider{border:0;border-top:1px solid var(--border);margin:20px 0}
.timeline{border-left:3px solid #dbeafe;margin-left:9px;padding-left:20px}.timeline-item{position:relative;margin-bottom:18px}.timeline-item:before{content:"";position:absolute;width:11px;height:11px;border-radius:50%;background:var(--blue);left:-27px;top:5px}.timeline-item strong{display:block}.timeline-item small{color:var(--muted)}
.filter-bar{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:10px;align-items:end}.login-body{min-height:100vh;background:#e3f2fd;display:grid;place-items:center;padding:24px}.login-box{background:#fdf5e6;width:880px;max-width:96vw;padding:46px;border-radius:14px;box-shadow:0 14px 36px rgba(15,23,42,.12);display:grid;grid-template-columns:1.2fr 1fr;gap:42px}.login-brand{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.login-brand h1{font-size:20px;line-height:1.55;color:#b91c1c}.login-logo{width:145px;height:145px;border-radius:50%;display:grid;place-items:center;border:8px solid #b91c1c;color:#b91c1c;background:#fff;font-size:28px;font-weight:900;box-shadow:inset 0 0 0 4px #f4c7c7}.login-form{display:flex;flex-direction:column;justify-content:center}.login-form h2{font-size:22px;margin:0 0 20px}.login-form .remember{display:flex;gap:8px;align-items:center;margin:14px 0}.login-form .remember input{width:auto}.login-form .btn{width:100%;padding:11px}
.mobile-menu{display:none}.empty{text-align:center;color:var(--muted);padding:38px 10px}.score-input{width:90px!important;text-align:right}.section-title{font-size:17px;color:#334155;margin:0 0 14px}.detail-list{display:grid;grid-template-columns:180px 1fr;gap:9px 16px}.detail-list dt{font-weight:700;color:#475569}.detail-list dd{margin:0}.kpi-group{border-top:4px solid var(--blue)}.kpi-group.group-II{border-top-color:var(--green)}.kpi-group.group-III{border-top-color:var(--orange)}
@media(max-width:1100px){.stats{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:1fr}.filter-bar{grid-template-columns:1fr 1fr}.filter-bar>div:first-child{grid-column:1/-1}}
@media(max-width:800px){.layout{display:block}.sidebar{position:fixed;left:-280px;width:265px;z-index:30;transition:left .2s}.sidebar.open{left:0}.mobile-menu{display:inline-flex}.topbar{padding:8px 14px}.topbar-title{font-size:15px;text-align:left}.content{padding:16px}.grid-2,.form-grid,.login-box{grid-template-columns:1fr}.login-box{padding:28px}.login-logo{width:100px;height:100px}.stats{grid-template-columns:1fr}.page-head{align-items:flex-start;flex-direction:column}.detail-list{grid-template-columns:1fr}.detail-list dt{margin-top:6px}}
.stats-5{grid-template-columns:repeat(5,minmax(0,1fr))}.result-text{font-size:17px!important;line-height:1.25}.sheet-heading{display:flex;justify-content:space-between;gap:20px;align-items:center}.sheet-heading h2{margin:4px 0}.compact{min-width:620px}.compact th,.compact td{padding:8px}.criteria-table{min-width:900px}.criteria-table .group-row td{background:#eef2f7;color:#334155}.mini-score{width:82px!important;text-align:right}.center input[type=checkbox]{width:20px;height:20px}.score-breakdown{display:grid;grid-template-columns:1fr auto;gap:10px 16px;margin:0}.score-breakdown dt{color:#475569}.score-breakdown dd{margin:0;text-align:right}.confirm-box{display:block;margin-top:16px;padding:14px;border:1px solid #f59e0b;background:#fffbeb;border-radius:8px}.confirm-box input{width:auto;margin-right:8px}.conversion-review{display:grid;grid-template-columns:2fr 1.2fr auto auto;gap:12px;align-items:center;padding:12px;border:1px solid var(--border);border-radius:8px;margin-top:8px}.conversion-review label{white-space:nowrap}.conversion-review input{width:auto}.hidden-form{display:none}.kpi-group{margin-top:18px;border:1px solid var(--border);border-top:4px solid var(--blue);border-radius:8px;padding:12px}.kpi-group h3{margin:0 0 10px}.kpi-group.group-II{border-top-color:var(--green)}.kpi-group.group-III{border-top-color:var(--orange)}
@media(max-width:1300px){.stats-5{grid-template-columns:repeat(3,1fr)}}@media(max-width:800px){.stats-5{grid-template-columns:1fr}.sheet-heading{align-items:flex-start;flex-direction:column}.conversion-review{grid-template-columns:1fr}}

/* V1.2.10 - chế độ test và tiêu chí dạng thu gọn */
.test-mode-alert{border-width:2px}.test-mode-badge{display:inline-block;background:#b45309;color:#fff;border-radius:999px;padding:5px 10px;font-size:11px;font-weight:800;letter-spacing:.06em}.test-login-panel{border:2px solid #f59e0b;background:#fffbeb;border-radius:10px;padding:16px}.test-login-panel h2{margin:10px 0 6px}.test-login-panel p{color:#78350f;font-size:13px;line-height:1.45}.login-box-test{width:980px}.password-login-details{margin-top:16px;border-top:1px solid #d6d3d1;padding-top:12px}.password-login-details summary{cursor:pointer;color:#475569;font-weight:650}.criteria-accordion-list{display:grid;gap:10px}.criteria-accordion{border:1px solid var(--border);border-radius:9px;background:#fff;overflow:hidden}.criteria-accordion summary{cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 15px;background:#eef4f8;color:#334155;font-weight:750;list-style:revert}.criteria-accordion summary:hover{background:#e5eef5}.criteria-accordion summary small{font-weight:500;color:var(--muted)}.criteria-accordion[open] summary{border-bottom:1px solid var(--border)}.criteria-accordion .table-wrap{padding:0 10px 8px}.criteria-accordion .criteria-table{min-width:820px}.criteria-accordion .mini-score{width:120px!important;text-align:left;padding:7px}.criteria-accordion .table th{background:#fafcfe}
@media(max-width:800px){.criteria-accordion summary{align-items:flex-start;flex-direction:column}.login-box-test{width:96vw}}

/* V1.2.11 - bố cục rộng, xếp loại tháng và thanh menu đỏ */
.sidebar{background:linear-gradient(180deg,var(--nav),var(--nav-2));color:#fff}
.user-card strong,.user-card small,.nav-title,.nav-link{color:#fff}
.user-card small,.nav-title{opacity:.88}
.nav-link:hover,.nav-link.active{background:rgba(255,255,255,.18);color:#fff}
.sidebar .badge.red{background:#fff;color:var(--red-dark)}
.dashboard-grid{display:grid;grid-template-columns:minmax(0,2.35fr) minmax(280px,.75fr);gap:18px}
.dashboard-task-card,.dashboard-kpi-card{min-width:0}
.dashboard-task-table{min-width:720px}
.dashboard-task-table th:first-child,.dashboard-task-table td:first-child{width:64%}
.dashboard-task-table th:nth-child(2),.dashboard-task-table td:nth-child(2){width:20%}
.dashboard-task-table th:nth-child(3),.dashboard-task-table td:nth-child(3){width:16%}
.compact-detail-list{grid-template-columns:135px 1fr;gap:8px 10px}
.kpi-summary-grid{display:grid;grid-template-columns:minmax(0,3.2fr) minmax(245px,.8fr);gap:18px;align-items:start}
.kpi-workload-panel,.kpi-score-panel{min-width:0}
.kpi-workload-panel .compact{min-width:760px}
.kpi-score-panel{border-left:1px solid var(--border);padding-left:18px}
.kpi-score-panel .score-breakdown{grid-template-columns:minmax(0,1fr) auto;gap:8px 10px}
.kpi-score-panel .score-breakdown dt{font-size:13px}
.kpi-score-panel .score-breakdown dd{white-space:nowrap;font-weight:700}
.kpi-page-actions{flex-wrap:nowrap;align-items:stretch}
.kpi-page-actions .btn{white-space:nowrap;min-height:40px}
.ranking-table{min-width:1040px}
.ranking-table .rank-number{font-size:17px;font-weight:800;color:var(--red-dark);text-align:center}
.ranking-condition{max-width:330px}
.ranking-filter{display:flex;gap:12px;align-items:end;flex-wrap:wrap}
.ranking-filter .field{min-width:120px}
.ranking-summary{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1200px){.dashboard-grid{grid-template-columns:minmax(0,1.8fr) minmax(270px,1fr)}.kpi-summary-grid{grid-template-columns:minmax(0,2.4fr) minmax(240px,1fr)}}
@media(max-width:900px){.dashboard-grid,.kpi-summary-grid{grid-template-columns:1fr}.kpi-score-panel{border-left:0;border-top:1px solid var(--border);padding-left:0;padding-top:18px}.kpi-page-actions{flex-wrap:wrap}.ranking-summary{grid-template-columns:1fr}}


/* V1.2.12: xác nhận nhiệm vụ KPI ngoài danh mục */
.outside-task-review{margin-top:10px;padding:10px;border:1px solid #f59e0b;border-radius:8px;background:#fffbeb;display:grid;gap:8px;min-width:280px}
.outside-task-review>strong{color:#92400e}
.outside-task-review label{display:grid;gap:4px;font-size:13px}
.outside-task-review label:first-of-type{display:flex;align-items:center;gap:7px}
.outside-task-review select,.outside-task-review textarea{width:100%}

/* V1.3.0 - KPI lãnh đạo Ban */
.leader-filter{display:grid;grid-template-columns:110px 130px minmax(280px,1fr) auto;gap:12px;align-items:end}.leader-select{min-width:300px}.leader-components-table{min-width:1040px}.return-inline{display:flex;gap:7px;min-width:330px}.return-inline input{min-width:230px}.leader-criteria-group{padding:12px 10px}.leader-criteria-group h3{font-size:14px;color:#1f4e78;margin:0 0 8px}.leader-criteria-table{min-width:1120px}.leader-criteria-table th:nth-child(2),.leader-criteria-table td:nth-child(2){min-width:430px}.leader-criteria-table td:last-child input{min-width:260px}.leader-penalty-grid{padding:18px}.leader-lock-card{border:2px solid #16803c;background:#f0fdf4}.leader-score-form .criteria-accordion summary{background:#f3f6fa}
@media(max-width:900px){.leader-filter{grid-template-columns:1fr}.leader-select{min-width:0}.return-inline{min-width:0;flex-direction:column}.leader-criteria-table td:last-child input{min-width:200px}}

/* V1.4.12 - bộ lọc ngày danh sách công việc */
.task-filter-bar{grid-template-columns:minmax(260px,2fr) repeat(5,minmax(145px,1fr)) auto}
@media(max-width:1400px){.task-filter-bar{grid-template-columns:repeat(3,minmax(0,1fr))}.task-filter-bar>div:first-child{grid-column:1/-1}}
@media(max-width:900px){.task-filter-bar{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.task-filter-bar{grid-template-columns:1fr}.task-filter-bar>div:first-child{grid-column:auto}}

/* V1.4.13 - thông báo nội bộ */
.notification-list{padding:0;overflow:hidden}.notification-item{display:flex;gap:14px;padding:16px 18px;border-bottom:1px solid var(--border);color:inherit;text-decoration:none;background:#fff}.notification-item:last-child{border-bottom:0}.notification-item:hover{background:#f8fbff;text-decoration:none}.notification-item.unread{background:#fff7ed;border-left:4px solid var(--red)}.notification-icon{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#eef2f7;font-size:18px;flex:0 0 auto}.notification-body{min-width:0;flex:1}.notification-title{display:flex;align-items:center;justify-content:space-between;gap:10px}.notification-body p{margin:5px 0;color:#475569}.notification-body small{color:var(--muted)}
.product-report-filter{display:grid;grid-template-columns:110px 130px 165px 165px minmax(240px,1fr) auto;gap:12px;align-items:end}.product-report-filter label{display:grid;gap:6px;font-weight:650;color:#334155}.product-summary-table{min-width:1180px}.product-summary-table thead tr:first-child th{background:#eaf1f7}.mt-sm{margin-top:10px}@media(max-width:1250px){.product-report-filter{grid-template-columns:repeat(3,minmax(0,1fr))}.product-report-filter .actions{grid-column:1/-1}}@media(max-width:800px){.product-report-filter{grid-template-columns:1fr}}
.product-stats{grid-template-columns:repeat(6,minmax(0,1fr))}@media(max-width:1400px){.product-stats{grid-template-columns:repeat(3,1fr)}}@media(max-width:800px){.product-stats{grid-template-columns:1fr}}


/* Logo co quan - V1.4.14b */
.brand-logo{
  display:block;
  width:96px;
  height:96px;
  object-fit:contain;
  margin:0 auto 10px;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.2));
}
.brand-name{
  color:#fff;
  font-size:14px;
  font-weight:800;
  line-height:1.45;
  text-align:center;
}
.login-logo-image{
  display:block;
  width:180px;
  height:180px;
  object-fit:contain;
  margin:14px auto 0;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.16));
}
@media(max-width:800px){
  .brand-logo{width:78px;height:78px}
  .login-logo-image{width:132px;height:132px}
}