:root {
  --navy: #0a3d6b; --xanh: #0f6cbd; --xanh2: #1e88e5; --nhan: #22a3e6; --nen: #f2f8fd; --nhat: #e7f2fc; --vien: #cfe3f5;
  --chu: #18324a; --mo: #5b738a; --trang: #fff; --do: #d64545; --cam: #e08a1e; --xanhla: #1f9d6b;
  --bo: 14px; --bong: 0 2px 10px rgba(15, 108, 189, .08);
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--nen); color: var(--chu); font: 14.5px/1.55 'Be Vietnam Pro', system-ui, 'Segoe UI', sans-serif; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--xanh); }
h1, h2, h3, h4 { color: var(--navy); margin: 0 0 .5em; line-height: 1.3; }
h2 { font-size: 20px; } h3 { font-size: 16.5px; } h4 { font-size: 14.5px; }

/* đầu trang */
.dau { background: var(--trang); border-bottom: 1px solid var(--vien); position: sticky; top: 0; z-index: 20; }
.dau-trong { max-width: 1320px; margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; gap: 16px; }
.dau img { height: 42px; cursor: pointer; }
.dau .ten-app { border-left: 2px solid var(--vien); padding-left: 14px; }
.dau .ten-app b { display: block; color: var(--navy); font-size: 16px; letter-spacing: .2px; }
.dau .ten-app span { color: var(--mo); font-size: 12.5px; }
.dau .phai { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.vien-ai { font-size: 12.5px; padding: 4px 10px; border-radius: 99px; background: var(--nhat); color: var(--xanh); border: 1px solid var(--vien); white-space: nowrap; }
.vien-ai.tat { background: #fff4e6; color: #a35a00; border-color: #f3d3a6; }
.trang-thai-luu { font-size: 12.5px; color: var(--mo); min-width: 70px; text-align: right; }

/* thanh bước */
.buoc { background: linear-gradient(90deg, var(--navy), #0d5592); }
.buoc-trong { max-width: 1320px; margin: 0 auto; padding: 0 20px; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.buoc button { background: none; border: 0; color: #cfe6fb; padding: 12px 14px; cursor: pointer; white-space: nowrap; border-bottom: 3px solid transparent; font-weight: 500; }
.buoc button .so { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.15); margin-right: 6px; font-size: 12px; }
.buoc button.chon { color: #fff; border-bottom-color: var(--nhan); }
.buoc button.chon .so { background: var(--nhan); color: var(--navy); }
.buoc button:hover { color: #fff; }

main { max-width: 1320px; margin: 0 auto; padding: 22px 20px 60px; }
.the { background: var(--trang); border: 1px solid var(--vien); border-radius: var(--bo); padding: 18px 20px; box-shadow: var(--bong); margin-bottom: 16px; }
.the.nhat { background: var(--nhat); }
.luoi { display: grid; gap: 16px; }
.luoi-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.luoi-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.luoi-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .luoi-2, .luoi-3, .luoi-4 { grid-template-columns: 1fr; } }
.hang { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gian { flex: 1; }
.mo { color: var(--mo); } .nho { font-size: 12.5px; }
.tieu-de { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.tieu-de p { margin: 2px 0 0; color: var(--mo); }

/* nút & ô nhập */
.nut { border: 1px solid var(--xanh); background: var(--xanh); color: #fff; padding: 8px 16px; border-radius: 10px; cursor: pointer; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.nut:hover { background: #0b5ba1; }
.nut.phu { background: #fff; color: var(--xanh); }
.nut.phu:hover { background: var(--nhat); }
.nut.nhe { background: none; border-color: transparent; color: var(--xanh); padding: 6px 8px; font-weight: 500; }
.nut.nhe:hover { background: var(--nhat); }
.nut.nguy { color: var(--do); }
.nut.lon { padding: 11px 22px; font-size: 15.5px; }
.nut:disabled { opacity: .5; cursor: not-allowed; }
label.o { display: block; margin-bottom: 10px; }
label.o > span { display: block; font-size: 12.5px; color: var(--mo); margin-bottom: 3px; font-weight: 500; }
[hidden] { display: none !important; }
input[type=text], input[type=number], input[type=password], select, textarea { width: 100%; border: 1px solid var(--vien); border-radius: 9px; padding: 7px 10px; background: #fff; outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--xanh2); box-shadow: 0 0 0 3px rgba(30, 136, 229, .13); }
textarea { resize: vertical; min-height: 64px; line-height: 1.5; }
.sua { border-color: transparent !important; background: transparent; padding: 3px 6px !important; border-radius: 7px; }
.sua:hover { border-color: var(--vien) !important; background: #fff; }
.sua:focus { background: #fff; border-color: var(--xanh2) !important; }

/* thẻ dự án trang chủ */
.anh-hero { background: linear-gradient(120deg, #0a3d6b 0%, #0f6cbd 60%, #22a3e6 100%); color: #fff; border-radius: 20px; padding: 34px 36px; margin-bottom: 22px; position: relative; overflow: hidden; }
.anh-hero h1 { color: #fff; font-size: 28px; margin-bottom: 8px; }
.anh-hero p { max-width: 760px; color: #dceefe; margin: 0 0 18px; font-size: 15px; }
.anh-hero .nut { background: #fff; color: var(--navy); border-color: #fff; }
.anh-hero .nut.phu { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.anh-hero .chuoi { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 20px; }
.anh-hero .chuoi span { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); padding: 5px 12px; border-radius: 99px; font-size: 13px; }
.anh-hero .chuoi i { font-style: normal; opacity: .7; }
.du-an { cursor: pointer; transition: transform .12s, border-color .12s; }
.du-an:hover { transform: translateY(-2px); border-color: var(--xanh2); }
.du-an h3 { margin-bottom: 4px; }

/* vùng thả tệp */
.tha { border: 2px dashed #9cc8ec; border-radius: 16px; background: #f7fbff; padding: 30px; text-align: center; cursor: pointer; transition: .15s; }
.tha.keo { background: var(--nhat); border-color: var(--xanh2); }
.tha-nho { padding: 12px 16px; text-align: left; margin-bottom: 10px; }
.tha-nho b { font-size: 14.5px; }
.tha .bieu { font-size: 34px; }
.tha b { color: var(--navy); font-size: 16px; }

/* bảng */
table.bang { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.bang th { background: var(--nhat); color: var(--navy); text-align: left; font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--vien); position: sticky; top: 0; }
.bang td { padding: 7px 10px; border-bottom: 1px solid #e6eff8; vertical-align: top; }
.bang tr.bo td { color: #9aaabb; text-decoration: line-through; }
.bang .so { text-align: right; white-space: nowrap; }
.cuon { max-height: 460px; overflow: auto; border: 1px solid var(--vien); border-radius: 10px; }

/* nhãn */
.nhan { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--nhat); color: var(--xanh); border: 1px solid var(--vien); white-space: nowrap; }
.nhan.ma { font-family: ui-monospace, Consolas, monospace; background: #fff; }
.nhan.ok { background: #e6f6ef; color: var(--xanhla); border-color: #bfe6d4; }
.nhan.canh { background: #fff4e6; color: #a35a00; border-color: #f3d3a6; }
.nhan.loi { background: #fdecec; color: var(--do); border-color: #f5c2c2; }
.nhan.cg { background: #0a3d6b; color: #fff; border-color: #0a3d6b; }
.nhom-0 { --mau: #0f6cbd; } .nhom-1 { --mau: #1f9d6b; } .nhom-2 { --mau: #7a4fd0; }
.nhan.nhom { background: color-mix(in srgb, var(--mau) 12%, #fff); color: var(--mau); border-color: color-mix(in srgb, var(--mau) 30%, #fff); }

/* bố cục kết quả */
.bo-cuc { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 1000px) { .bo-cuc { grid-template-columns: 1fr; } }
.ds-vt { position: sticky; top: 120px; max-height: calc(100vh - 140px); overflow: auto; padding: 10px; }
.ds-vt .muc { padding: 9px 11px; border-radius: 10px; cursor: pointer; border: 1px solid transparent; margin-bottom: 4px; }
.ds-vt .muc:hover { background: var(--nhat); }
.ds-vt .muc.chon { background: var(--nhat); border-color: var(--vien); }
.ds-vt .muc b { display: block; font-size: 13.5px; color: var(--navy); }
.o-so { background: var(--nhat); border: 1px solid var(--vien); border-radius: 12px; padding: 12px 14px; }
.o-so b { display: block; font-size: 24px; color: var(--navy); line-height: 1.2; }
.o-so span { font-size: 12.5px; color: var(--mo); }
.thanh { height: 7px; background: #e1edf8; border-radius: 9px; overflow: hidden; margin-top: 6px; }
.thanh i { display: block; height: 100%; background: linear-gradient(90deg, var(--xanh), var(--nhan)); border-radius: 9px; }
.tab-con { display: flex; gap: 4px; border-bottom: 1px solid var(--vien); margin: 6px 0 14px; flex-wrap: wrap; }
.tab-con button { background: none; border: 0; padding: 9px 14px; cursor: pointer; color: var(--mo); border-bottom: 2px solid transparent; font-weight: 500; }
.tab-con button.chon { color: var(--xanh); border-bottom-color: var(--xanh); }

/* thẻ năng lực */
.nl { border: 1px solid var(--vien); border-left: 4px solid var(--mau); border-radius: 12px; background: #fff; margin-bottom: 10px; }
.nl-dau { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; padding: 10px 12px; }
.nl-dau .ten { flex: 1 1 260px; min-width: 0; }
.nl-dau .ten input { min-width: 0; }
.nl-dau select { flex: 0 0 auto; }
.nl-dau .ten input { font-weight: 600; color: var(--navy); font-size: 15px; }
.nl-than { padding: 4px 16px 14px; border-top: 1px dashed var(--vien); }
.nl-than h4 { font-size: 12.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--mo); margin: 12px 0 4px; }
.giai-thich { background: var(--nhat); border-radius: 10px; padding: 2px; }
.giai-thich textarea { background: transparent; border-color: transparent; }
.cap { display: inline-flex; gap: 3px; }
.cap button { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--vien); background: #fff; cursor: pointer; font-size: 11px; color: var(--mo); padding: 0; }
.cap button.dat { background: var(--mau, var(--xanh)); border-color: var(--mau, var(--xanh)); color: #fff; }
.trong-so { text-align: right; min-width: 74px; }
.trong-so b { font-size: 16px; color: var(--navy); }
.kpi-dong { display: grid; grid-template-columns: minmax(170px, 2fr) minmax(0, 3fr) auto; gap: 8px; align-items: start; margin-bottom: 6px; }
.kpi-dong .ten-kpi { font-size: 13px; }
.chon-tn { display: flex; flex-wrap: wrap; gap: 6px; }
.chon-tn label { font-size: 12.5px; border: 1px solid var(--vien); border-radius: 99px; padding: 3px 10px; cursor: pointer; background: #fff; }
.chon-tn label.co { background: var(--nhat); border-color: var(--xanh2); color: var(--navy); }
.chon-tn input { display: none; }
.canh-bao { background: #fff8ec; border: 1px solid #f3d3a6; border-radius: 10px; padding: 10px 14px; font-size: 13px; color: #7a4a00; margin-bottom: 12px; }
.ma-tran td.co { background: #cfe6fb; text-align: center; color: var(--navy); font-weight: 700; }
.ma-tran td.khong { text-align: center; color: #c5d4e2; }
.ma-tran th.doc { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; max-height: 190px; font-size: 12px; padding: 8px 4px; }
.xoay { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--vien); border-top-color: var(--xanh); border-radius: 50%; animation: xoay .8s linear infinite; vertical-align: -2px; }
@keyframes xoay { to { transform: rotate(360deg); } }
.hop-thoai { position: fixed; inset: 0; background: rgba(10, 30, 50, .45); display: grid; place-items: center; z-index: 50; padding: 20px; }
.hop-thoai .the { width: min(900px, 100%); max-height: 88vh; overflow: auto; margin: 0; }
pre.goi { white-space: pre-wrap; font-size: 12px; background: var(--nen); padding: 12px; border-radius: 10px; max-height: 60vh; overflow: auto; }
.thong-bao { position: fixed; right: 20px; bottom: 20px; background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 10px; z-index: 60; box-shadow: 0 6px 20px rgba(0,0,0,.2); max-width: 420px; }
.thong-bao.loi { background: var(--do); }
details > summary { cursor: pointer; color: var(--xanh); font-weight: 500; }

/* ================= BÁO CÁO (xem trước + in PDF) ================= */
.bao-cao { background: #fff; color: #1b2f44; }
.xem-truoc { background: #dfe9f3; padding: 20px; border-radius: var(--bo); }
.xem-truoc .trang-a4 { width: 210mm; min-height: 297mm; margin: 0 auto 18px; background: #fff; box-shadow: 0 4px 18px rgba(0,0,0,.12); padding: 16mm 15mm; }
.bc h1 { font-size: 22px; } .bc h2 { font-size: 17px; border-bottom: 2px solid var(--xanh); padding-bottom: 5px; margin-top: 6px; }
.bc h3 { font-size: 14.5px; margin: 14px 0 6px; }
.bc p, .bc li { font-size: 12.5px; }
.bc table.bang { font-size: 11.5px; }
.bc .bang th { position: static; }
.bc .bang td, .bc .bang th { padding: 5px 7px; }
.bia { display: flex; flex-direction: column; min-height: 265mm; }
.bia .dai { background: linear-gradient(120deg, #0a3d6b, #0f6cbd 65%, #22a3e6); color: #fff; border-radius: 14px; padding: 34px 30px; margin: 40mm 0 18mm; }
.bia .dai h1 { color: #fff; font-size: 30px; margin: 0 0 8px; }
.bia .dai p { color: #dceefe; font-size: 14px; margin: 0; }
.bia .khach { font-size: 22px; font-weight: 700; color: var(--navy); }
.bia .chan { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; color: var(--mo); font-size: 12.5px; border-top: 1px solid var(--vien); padding-top: 10px; }
.chuoi-logic { display: flex; align-items: stretch; gap: 0; margin: 10px 0; }
.chuoi-logic div { flex: 1; background: var(--nhat); border: 1px solid var(--vien); padding: 8px; font-size: 11.5px; text-align: center; position: relative; }
.chuoi-logic div b { display: block; color: var(--navy); font-size: 12px; }
.chuoi-logic div + div { border-left: 0; }
.chuoi-logic div:not(:last-child)::after { content: '▶'; position: absolute; right: -8px; top: 50%; transform: translateY(-50%); color: var(--xanh); font-size: 11px; z-index: 1; }
.nl-in { border: 1px solid var(--vien); border-left: 4px solid var(--mau); border-radius: 8px; padding: 8px 12px; margin: 8px 0; break-inside: avoid; }
.nl-in .dau-nl { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.nl-in .dau-nl b { color: var(--navy); font-size: 13.5px; }
.nl-in p { margin: 4px 0; }
.nl-in .nhan-in { font-size: 11px; color: var(--mo); }
.nl-in ul { margin: 3px 0 3px 18px; padding: 0; }
.diem-cap { letter-spacing: 1px; color: var(--mau); }
.chan-trang { display: none; }

@media print {
  @page { size: A4; margin: 13mm 13mm 15mm; }
  html, body { background: #fff; }
  .khong-in, .dau, .buoc, .thong-bao { display: none !important; }
  main { padding: 0; max-width: none; }
  .xem-truoc { background: none; padding: 0; }
  .xem-truoc .trang-a4 { width: auto; min-height: 0; margin: 0; box-shadow: none; padding: 0; break-after: page; }
  .xem-truoc .trang-a4:last-child { break-after: auto; }
  .bia { min-height: 260mm; }
  .bc h2, .bc h3 { break-after: avoid; }
  .bc tr { break-inside: avoid; }
  .chan-trang { display: block; position: fixed; bottom: -9mm; left: 0; right: 0; font-size: 9.5px; color: #7b8fa3; display: flex; justify-content: space-between; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}