/* Man Nop ho so (/hoso/nop) va khung "may dang lam" dung chung voi man Ke hoach nhap (.tien-do).
   Dung lai theo mau noi-bo/giao-dien/mau-ux (muc c) bang thanh phan va token cua app.css (lane
   uxtrangchu, dot UX 05/10/2026). Khong hex; do chi cho tep hong; xanh la cho nhom da du. */

/* canh trai theo le trang cua cac man khac (le 32px) thay vi can giua: o 1920 tieu de khong nhay vi
   tri khi chuyen man (soat dep 05/10, L1a) */
.khung-trang.nop-man { margin: 0; max-width: 1400px; padding: 20px var(--s6) 40px; }

/* ------------------------------------------------------------------ dau man: duong dan + tieu de */
.nop-dau { margin-bottom: var(--s3); }
.nop-man > .bao { margin-bottom: var(--s3); }
.ds-bao { margin: 6px 0 0; padding-left: 18px; }
.ds-bao li + li { margin-top: 3px; }
.bao > div > p { margin-top: 6px; }

/* ------------------------------------------------------------------ bo cuc hai cot */
.nop { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.nop-trai { min-width: 0; }

/* o tha chung: khung net dut co hai viec tach bach. Ben trai la nhan bam/tha tep (chiem het chieu cao,
   bam o dau cung duoc); ben phai la nut vien "Chon ca thu muc" (khong con la lien ket gach chan dinh
   sat day khung, soat dep 05/10, V9). Keo tha gan o khung ngoai. */
.vung-tha {
  display: flex; align-items: center; gap: var(--s4);
  border: 2px dashed var(--line-strong); border-radius: var(--r-box); background: var(--surface);
  transition: border-color var(--t-nhanh) var(--ease), background-color var(--t-nhanh) var(--ease);
}
.vung-tha:hover, .vung-tha.keo { border-color: var(--accent); background: var(--accent-soft); }
.tha-chinh {
  flex: 1; min-width: 0; align-self: stretch; display: flex; align-items: center; gap: 18px; padding: 18px 0 18px 20px;
  cursor: pointer; border-radius: calc(var(--r-box) - 2px);
}
.tha-chinh:focus-visible { outline-offset: -4px; }
.tha-nut { flex: none; display: flex; align-items: center; gap: var(--s2); padding-right: 20px; }
.vung-tha .bieu-tha {
  flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center;
}
.vung-tha.keo .bieu-tha { background: var(--surface); }
.vung-tha .chu-tha { min-width: 0; }
.vung-tha .chu-tha b { display: block; font-size: var(--fs-xl); font-weight: var(--fw-dam); }
.vung-tha .chu-tha > span { display: block; color: var(--muted); font-size: var(--fs-sm); margin-top: 2px; }
.vung-tha.gon .tha-chinh { padding: 10px 0 10px 14px; }
.vung-tha.gon .tha-nut { padding-right: 14px; }
.vung-tha.gon .bieu-tha { width: 32px; height: 32px; }
.vung-tha.gon .chu-tha b { font-size: var(--fs-md); }

/* bon o tep */
.o-tep { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: var(--s3); }
.o1 {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-box); padding: 10px 12px;
  min-height: 92px; display: flex; flex-direction: column; gap: 6px; min-width: 0;
}
.o1-dau { display: flex; align-items: center; gap: var(--s2); }
.o1-dau h2 { font-size: var(--fs-md); font-weight: var(--fw-dam); margin: 0; }
.o1-dau .cho { margin-left: auto; font-size: var(--fs-xs); color: var(--muted); text-align: right; }
.dau-tick {
  flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: grid; place-items: center;
  font-size: var(--fs-2xs); color: transparent;
}
.o1.du .dau-tick { background: var(--ok); border-color: var(--ok); color: var(--on-fill); }
.o1.loi-o1 .dau-tick { background: var(--danger); border-color: var(--danger); color: var(--on-fill); }
.o1 .trong { color: var(--muted); font-size: var(--fs-sm); }
.o1-ds, .o1-moi { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.o1 > .small { margin-top: -2px; }
.o1.loi-o1 { grid-column: 1 / -1; }
.o1.loi-o1 .o1-dau .cho { font-size: var(--fs-xs); }

/* mot tep */
.tep {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: var(--s2); align-items: center; padding: 5px 6px 5px 5px;
  border-radius: var(--r-ctl); background: var(--surface-2); border: 1px solid var(--line);
}
.tep .duoi {
  height: 20px; display: grid; place-items: center; border-radius: 3px; background: var(--surface-3); color: var(--ink-2);
  font-size: var(--fs-3xs); font-weight: var(--fw-dam-nhat); font-family: var(--font-num); letter-spacing: .02em;
}
.tep .tt { min-width: 0; }
.tep .tt b { display: block; font-weight: var(--fw-vua); font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tep .tt small { display: block; font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tep select { height: var(--h-ctl-nho); font-size: var(--fs-xs); padding: 0 28px 0 var(--k2); max-width: 140px; }
.tep.da-luu { grid-template-columns: 30px minmax(0, 1fr); }
.tep.moi .tt small .doi { color: var(--accent); }
.tep.hong { background: var(--danger-soft); border-color: var(--danger-line); }
.tep.hong .tt small { color: var(--danger); white-space: normal; }
.tep.hong .duoi { background: var(--danger-line); }

/* ------------------------------------------------------------------ cot phai: ten ho so, tong so nhom, nut
   Cot phai mo dau bang o "Ten ho so" (cung cot voi nut Doc, khong con lo lung goc phai dau trang).
   Bang kiem chi con TONG ("2/4 nhom" + bon vach); tung nhom da co o rieng ben trai. */
.nop-ben {
  position: sticky; top: var(--s3); display: flex; flex-direction: column; gap: var(--s3); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-box); padding: 14px;
}
.nop-ben h2 { font-size: var(--fs-xl); font-weight: var(--fw-dam-nhat); margin: 0; }
.nop-kiem { display: flex; flex-direction: column; gap: var(--s3); }
.nop-ben.dang-gui .nop-kiem { display: none; }
.nop-ben .ten-co { font-size: var(--fs-lg); font-weight: var(--fw-dam); overflow-wrap: anywhere; }
.kiem-tong { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); padding-top: var(--s3); border-top: 1px solid var(--line); }
.kiem-dem { color: var(--muted); font-size: var(--fs-sm); font-family: var(--font-num); white-space: nowrap; }
.kiem-vach { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; margin-top: calc(-1 * var(--s1)); }
.kiem-vach i { height: 4px; border-radius: 2px; background: var(--surface-3); }
.kiem-vach i.x { background: var(--ok); }
.nop-ben .ghi { font-size: var(--fs-sm); color: var(--muted); line-height: var(--lh-van); margin: 0; }
.nop-ben .kiem-hong { font-size: var(--fs-sm); color: var(--danger); line-height: var(--lh-van); margin: 0; }
.nop-ben .kiem-hong[hidden] { display: none; }

/* ------------------------------------------------------------------ may dang lam (dung chung) */
.tien-do { display: flex; flex-direction: column; gap: var(--s2); font-size: var(--fs-sm); }
.tien-do[hidden] { display: none; }
.tien-do p, .tien-do div { margin: 0; }
.tien-do .tien-do-tieu-de { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-lg); font-weight: var(--fw-dam-nhat); margin: 0; }
.tien-do .tien-do-tieu-de .xoay { color: var(--accent); }
.tien-do .tien-do-buoc { color: var(--ink); }
.tien-do .ghi-chu { color: var(--muted); }
.tien-do progress { width: 100%; height: 6px; border: 0; border-radius: 3px; background: var(--surface-3); accent-color: var(--accent); overflow: hidden; }
.tien-do progress::-webkit-progress-bar { background: var(--surface-3); border-radius: 3px; }
.tien-do progress::-webkit-progress-value { background: var(--accent); border-radius: 3px; }
.tien-do progress::-moz-progress-bar { background: var(--accent); border-radius: 3px; }

@media (max-width: 900px) {
  .nop { grid-template-columns: minmax(0, 1fr); }
  .nop-ben { position: static; }
  .o-tep { grid-template-columns: minmax(0, 1fr); }
  .vung-tha { flex-wrap: wrap; }
  .tha-chinh { flex-basis: 100%; padding-right: 14px; }
  .tha-nut { padding: 0 14px 12px; }
}