/* Trang chu Ho so (/, manh /trang-chu/danh-sach). Dung lai theo mau noi-bo/giao-dien/mau-ux (muc b)
   bang thanh phan va token cua app.css (lane uxtrangchu, dot UX 05/10/2026). Khong hex: chu do chi
   cho may dung (loi-hs) va chan; mot mau nhan cho tien trinh; xanh la cho hoso vua doc xong. */

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

/* dau trang: tieu de, tom tat, mot nut chinh (nut chinh dung phai theo .dau-trang cua khung).
   Canh bao sao luu va o dia chi hien o bang vang ngay duoi, khong lap lai chu o goc phai. */
.tc-dau { margin-bottom: var(--s4); }
.tc > .bao { margin-bottom: var(--s3); }
.tc-dau .btn[disabled] { background: var(--surface-3); border-color: var(--line-strong); color: var(--muted); text-shadow: none; opacity: 1; filter: none; }

/* Việc nên làm tiếp (bộ thiết kế tong-hop/pa-1): một thẻ nền nhạt, số lớn bên trái, câu chữ giữa, nút CHÍNH
   duy nhất của trang bên phải. Số lớn là số dòng cần xem có sẵn của hồ sơ. Lỗi máy dừng thì thẻ đỏ nhạt. */
.viec-tiep {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s5); align-items: center;
  margin-bottom: var(--s5); padding: var(--s4) var(--s5);
  background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--r-box);
}
.viec-tiep.loi-hs { background: var(--danger-soft); border-color: var(--danger-line); }
.vt-so { min-width: 112px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.vt-so b { font-size: 44px; line-height: 1; font-weight: var(--fw-dam-nhat); letter-spacing: -.02em; color: var(--accent-deep); }
.vt-so span { margin-top: 4px; font-size: var(--fs-sm); font-weight: var(--fw-dam); color: var(--accent); }
.vt-ic { width: 52px; height: 52px; background: var(--accent); -webkit-mask: var(--ic-tep) center / contain no-repeat; mask: var(--ic-tep) center / contain no-repeat; }
.viec-tiep.loi-hs .vt-ic { background: var(--danger); -webkit-mask-image: var(--ic-canh-tron); mask-image: var(--ic-canh-tron); }
.vt-than { min-width: 0; }
.vt-nhan { font-size: var(--fs-xs); font-weight: var(--fw-dam); color: var(--accent); }
.viec-tiep.loi-hs .vt-nhan { color: var(--danger); }
.vt-than h2 { margin: 2px 0 4px; font-size: var(--fs-xl); line-height: var(--lh-tieu-de); overflow-wrap: anywhere; }
.vt-than p { margin: 0; max-width: 64ch; color: var(--ink-2); font-size: var(--fs-md); }
.vt-hd { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.vt-hd form { margin: 0; }
.vt-hd .btn { height: 40px; padding: 0 var(--s5); font-size: var(--fs-lg); }
.vt-hd small { color: var(--muted); font-size: var(--fs-xs); }

/* nhom ho so: tieu de nho, mot khung trang chua cac dong */
.nhom-hs { margin-bottom: 18px; }
.nhom-hs > h2 {
  font-size: var(--fs-sm); font-weight: var(--fw-dam); color: var(--ink-2); margin: 0 0 6px 2px; display: flex; gap: var(--s2); align-items: center;
}
/* so ho so cua nhom: huy hieu tron nho, khong con la chu tron */
.dem {
  display: inline-grid; place-items: center; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 9px;
  background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent);
  font-size: var(--fs-xs); font-weight: var(--fw-dam); line-height: 1; font-family: var(--font-num);
}
.ds-hs { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-box); overflow: hidden; box-shadow: var(--shadow-card); }

/* mot dong ho so: ten, buoc, viec ke tiep, lan cap nhat, mot nut */
.hs {
  display: grid; grid-template-columns: minmax(220px, 1.5fr) 168px minmax(240px, 1.6fr) 128px 132px; gap: var(--s4); align-items: center;
  padding: 11px 14px; border-top: 1px solid var(--line); transition: background-color var(--t-nhanh) var(--ease);
}
.hs:first-child { border-top: 0; }
.hs:hover { background: var(--surface-2); }
.hs.moi-xong, .hs.moi-xong:hover { background: var(--ok-soft); }
.hs .ten { min-width: 0; }
.hs .ten b { display: block; font-weight: var(--fw-dam); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs .ten small { display: block; color: var(--muted); font-size: var(--fs-sm); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* bon vach buoc + ten buoc */
.bac { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.bac .vach { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
.bac .vach i { height: 4px; border-radius: 2px; background: var(--surface-3); }
.bac .vach i.x { background: var(--ok); }
.bac .vach i.d { background: linear-gradient(180deg, var(--accent-hi), var(--sel-bar)); }
.bac .vach i.l { background: var(--danger); }
.bac > span:last-child { font-size: var(--fs-sm); color: var(--ink-2); white-space: nowrap; }

/* viec ke tiep: mot cau tieu de dam, mot cau phu */
.viec-con { font-size: var(--fs-md); line-height: var(--lh-dong); min-width: 0; }
.viec-con b { font-weight: var(--fw-dam); }
.viec-con .phu { display: block; color: var(--muted); font-size: var(--fs-sm); }
.viec-con.loi-hs .phu { color: var(--ink-2); }
/* tình trạng = nhãn viên thuốc (lớp nhan của app.css) cắt đuôi bằng dấu ba chấm; loại do template chọn:
   chan, can, xong, cho, ghi. Nhãn "cho" (chờ Ban quản lý) dùng biểu tượng thông tin, xanh dương. */
.viec-con b.nhan {
  display: inline-block; position: relative; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: top;
  line-height: 22px; padding: 0 8px 0 24px;
}
.viec-con b.nhan::before { position: absolute; left: 5px; top: 4px; }
.nhan.cho { --m: var(--thong-tin); --n: var(--thong-tin-nhat); --ic: var(--ic-thong-tin); }
.viec-con .nhan + .phu { margin-top: 3px; }
.viec-con .tien { display: flex; align-items: center; margin-top: 4px; }
.viec-con .thanh { display: block; flex: 1; max-width: 220px; height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.viec-con .thanh i { display: block; height: 100%; width: 100%; background: var(--accent); transform-origin: left; }

/* lan cap nhat: nhan nho tren, gia tri duoi (doc tu tren xuong: "May doc xong luc" roi "07:45 hom qua") */
.cap-nhat { white-space: nowrap; line-height: var(--lh-dong); }
.cap-nhat small { display: block; color: var(--muted); font-size: var(--fs-xs); }
.cap-nhat b { display: block; color: var(--ink-2); font-size: var(--fs-sm); font-weight: var(--fw-vua); font-family: var(--font-num); }
.hs .hd { display: flex; justify-content: flex-end; gap: var(--s2); }
.hs .hd form { margin: 0; }

/* nhom da xuat: gap lai */
.gap-hs summary {
  cursor: pointer; list-style: none; font-size: var(--fs-sm); font-weight: var(--fw-dam); color: var(--ink-2); margin: 0 0 6px 2px;
  display: inline-flex; gap: var(--s2); align-items: center; border-radius: var(--r-ctl);
}
.gap-hs summary::-webkit-details-marker { display: none; }
.gap-hs summary::before { content: ""; width: 0; height: 0; border-left: 5px solid var(--muted); border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform var(--t-nhanh) var(--ease); }
.gap-hs[open] summary::before { transform: rotate(90deg); }

.trong-kq { background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--r-box); }

/* chan trang: so khuon va ghi chu sao luu */
.chan-trang {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: var(--fs-sm); color: var(--muted);
}

.chan-trang .suc-khoe { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.chan-trang .suc-khoe .canh-bao { display: none; }

/* trang viec nen (/hoso/{ma}/v{n}/viec-nen): ten ho so + 4 buoc, mot khung tien do, nut di tiep.
   Manh banner (job_banner.html) giu nguyen ma; o day chi phong chu cho de doc tren trang rieng. */
.vn-dau { display: flex; align-items: flex-end; gap: var(--s5); flex-wrap: wrap; margin-bottom: var(--s4); }
.vn-ten { min-width: 0; }
.vn-ten h1 { overflow-wrap: anywhere; }
.vn-meta { margin-top: 2px; font-size: var(--fs-sm); color: var(--muted); }
.vn-dau .buoc { margin-left: auto; }
.vn-khung { max-width: 760px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-box); padding: var(--s4) var(--s5) var(--s5); }
.vn-khung h2 { font-size: var(--fs-sm); font-weight: var(--fw-dam); color: var(--ink-2); margin-bottom: var(--s3); }
.vn-khung .viec-nen { font-size: var(--fs-lg); gap: var(--s3); }
.vn-khung .viec-nen > p:not(.thong-bao) { font-size: var(--fs-xl); font-weight: var(--fw-dam); color: var(--ink); }
.vn-khung .danh-sach-pha { flex-direction: column; gap: var(--s2); font-size: var(--fs-md); }
.vn-khung .viec-nen form { margin-top: var(--s1); }
.vn-khung .viec-nen .btn.nho { padding: 8px 16px; font-size: var(--fs-md); }
.vn-tiep { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line); }
.vn-tiep[hidden] { display: none; }
.vn-ghi { color: var(--muted); font-size: var(--fs-sm); }
.vn-chan { max-width: 760px; margin-top: var(--s4); font-size: var(--fs-sm); color: var(--muted); }

@media (max-width: 1100px) {
  .hs { grid-template-columns: minmax(180px, 1.4fr) 150px minmax(200px, 1.5fr) 112px 118px; gap: var(--s3); }
}
@media (max-width: 860px) {
  .viec-tiep { grid-template-columns: minmax(0, 1fr); text-align: left; }
  .vt-so { flex-direction: row; gap: 8px; align-items: baseline; justify-content: flex-start; min-width: 0; }
  .vt-hd { align-items: flex-start; }
  .hs { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--s2); }
  .hs .bac, .hs .viec-con { grid-column: 1 / -1; }
  .hs .cap-nhat { grid-row: 1; grid-column: 2; text-align: right; }
  .hs .hd { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ---------------------------------------------------------------- chuyen dong (dot UI 29/10/2026, bo MOTION.md)
   Thoi luong, easing, khoang nang lay tu bien chuyen-dong.css (lane uithongbao): --cd-nhan, --cd-e-vao, --cd-nang;
   du phong la token cua mau chuyen-dong pa-2 (--tg-cham, --cong-ra) va 8px. Giam chuyen dong: luat chung o app.css. */

/* Motion Prompt No.081 · MIT License (c) 2026 Shohei Ohtaki · showheyohtaki.github.io/motion-prompt
   Hover lift: the "Viec nen lam tiep" nhac len khi re chuot (bong do 6 -> 22 px, lech 2 -> 12 px, dam 0,08 -> 0,22); dong ho so nhac
   nhe mot phan tu khoang nang (hang trong danh sach, khong de lech xuong dong ke). Khung danh sach khong cat nua de dong nhac len
   duoc, nen goc bo tron chuyen xuong dong dau va dong cuoi. */
.viec-tiep { box-shadow: var(--shadow-card); transition: transform var(--tg-nhanh) var(--cong-ra), box-shadow var(--tg-nhanh) var(--cong-ra); }
.viec-tiep:hover { transform: translateY(calc(var(--cd-nang, 8px) * -1)); box-shadow: var(--shadow-pop); }
.ds-hs { overflow: visible; }
.ds-hs > .hs:first-child { border-radius: var(--r-box) var(--r-box) 0 0; }
.ds-hs > .hs:last-child { border-radius: 0 0 var(--r-box) var(--r-box); }
.ds-hs > .hs:only-child { border-radius: var(--r-box); }
.hs { position: relative; transition: background-color var(--t-nhanh) var(--ease), transform var(--tg-nhanh) var(--cong-ra), box-shadow var(--tg-nhanh) var(--cong-ra); }
.hs:hover { z-index: 1; transform: translateY(calc(var(--cd-nang, 8px) * -.25)); box-shadow: var(--shadow-pop); border-radius: var(--r-ctl); background: var(--surface); }

/* Motion Prompt No.068 · MIT License (c) 2026 Shohei Ohtaki · showheyohtaki.github.io/motion-prompt
   Step indicator o dong ho so: vach buoc xong lon ra tu trai (JS), buoc ke tiep hien sau; hinh cuoi la CSS san co o tren. */
.bac .vach i { transform-origin: left center; }

/* Motion Prompt No.079 · MIT License (c) 2026 Shohei Ohtaki · showheyohtaki.github.io/motion-prompt
   Progress bar: thanh dong ho so cao 4 px, phan day = dong da xong tren tong dong (scaleX tu mep trai). */
.bac .tl-soat { display: block; height: 4px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.bac .tl-soat > i { display: block; height: 100%; background: var(--accent); border-radius: 2px; transform-origin: left center; }
.bac .tl-soat.day > i { background: var(--ok); }

/* Motion Prompt No.072 · MIT License (c) 2026 Shohei Ohtaki · showheyohtaki.github.io/motion-prompt
   Empty state: hien dan va nang 8 px trong 350 ms tuyen tinh; hinh khay thu ve net xanh; nut toi viec ke tiep. */
.trong-kq .tk-hinh { display: block; margin: 0 auto 10px; fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.trong-kq { animation: cd-trong var(--tg-cham) var(--cong-ra) both; }
.trong-kq .tk-nut { margin-top: 14px; }
@keyframes cd-trong { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }