/* Công việc nhân sự (D389 Đợt 2): màn Quantri #/cong-viec (lớp cv-*) và cổng congviec.daothinhvuong.vn (body.cvc, lớp cvc-*).
   Dùng biến của dtv.css (--nhan, --xau, --tot, --vien, --bo...). Điện thoại trước: mặc định cho 375px, rộng hơn thì giãn. */

/* ---------- Danh sách ---------- */
.cv-dau-nut { margin-top: 10px; }
.cv-loc { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; }
.cv-loc select { min-height: 40px; padding: 6px 10px; border: 1px solid var(--vien); border-radius: 10px; background: var(--the); color: var(--chu); font: inherit; max-width: 100%; }
.cv-tuan { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cv-khoi { margin: 18px 0 8px; }
.cv-khoi-de { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 14px; font-weight: 700; margin: 0 0 6px; color: var(--chu); }
.cv-khoi-cho_duyet .cv-khoi-de, .cv-khoi-can_go .cv-khoi-de { color: var(--nhan); }
.cv-khoi-qua_han .cv-khoi-de, .cv-khoi-can_sua .cv-khoi-de { color: var(--xau); }
.cv-dem { font-size: 12px; font-weight: 600; color: var(--chu-phu); }
.cv-ds { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cv-dong { display: flex; gap: 10px; justify-content: space-between; align-items: flex-start; padding: 12px; min-height: 48px;
  border: 1px solid var(--vien); border-radius: var(--bo); background: var(--the); color: var(--chu); text-decoration: none; }
.cv-dong:hover { border-color: var(--nhan); }
.cv-dong:focus-visible { outline: 2px solid var(--nhan); outline-offset: 2px; }
.cv-dong-chu { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.cv-dong-chu strong { font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.cv-dong-phu { font-size: 12.5px; color: var(--chu-phu); line-height: 1.45; overflow-wrap: anywhere; }
.cv-dong-vuong { font-size: 12.5px; color: var(--xau); }
.cv-dong-co { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; align-items: center; flex-shrink: 0; max-width: 45%; }
.cv-chip { display: inline-block; font-size: 11.5px; font-weight: 600; line-height: 1; padding: 5px 8px; border-radius: 999px;
  background: var(--vien-mo); color: var(--chu); white-space: nowrap; }
.cv-chip.nhan, .cv-chip.tt-cho_duyet { background: var(--nhan-nhat); color: var(--nhan); }
.cv-chip.xau, .cv-chip.tt-can_sua { background: var(--xau-nhat); color: var(--xau); }
.cv-chip.tot, .cv-chip.tt-da_xong { background: var(--tot-nhat); color: var(--tot); }
.cv-chip.tt-da_huy { opacity: .6; }
.cv-rong { padding: 18px 14px; border: 1px dashed var(--vien); border-radius: var(--bo); color: var(--chu-phu); text-align: center; }
.cv-nguoi { margin: 18px 0; }
.cv-giai { margin: 10px 0 14px; }

/* ---------- Chi tiết ---------- */
.cv-quay { margin: 0 0 10px; }
.cv-quay a { color: var(--nhan); text-decoration: none; font-weight: 600; display: inline-block; padding: 8px 0; }
.cv-bao-tren { padding: 10px 12px; border-radius: 10px; background: var(--nhan-nhat); color: var(--nhan); font-weight: 600; margin: 0 0 12px; }
.cv-ct { display: grid; gap: 14px; }
.cv-ct-ma { margin: 0; font-size: 12.5px; color: var(--chu-phu); }
.cv-ct-ten { margin: 4px 0 8px; font-size: 20px; line-height: 1.3; overflow-wrap: anywhere; }
.cv-ct-dau .cv-dong-co { justify-content: flex-start; max-width: none; }
.cv-tt-ds { margin: 0; display: grid; gap: 6px; padding: 12px; border: 1px solid var(--vien); border-radius: var(--bo); background: var(--the); }
.cv-tt { display: grid; grid-template-columns: 110px 1fr; gap: 8px; font-size: 14px; }
.cv-tt dt { color: var(--chu-phu); }
.cv-tt dd { margin: 0; overflow-wrap: anywhere; }
.cv-ct h3, .cv-tieu-de-viec { font-size: 14px; margin: 0 0 6px; }
.cv-chu-dai { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.cv-links { margin: 6px 0 0; padding-left: 18px; }
.cv-links a { color: var(--nhan); overflow-wrap: anywhere; }
.cv-ban { padding: 10px 12px; border: 1px solid var(--vien); border-radius: var(--bo); background: var(--the); margin: 0 0 8px; }
.cv-ban-cho_duyet { border-color: var(--nhan); }
.cv-ban-tra_sua, .cv-ban-thay_the { opacity: .85; }
.cv-ban-dau { margin: 0 0 6px; font-size: 13px; }
.cv-ban-ly-do { margin: 6px 0 0; color: var(--chu-phu); font-size: 13.5px; }
.cv-ban-ly-do.xau { color: var(--xau); }
.cv-ct-ls summary { cursor: pointer; font-weight: 600; padding: 8px 0; }
.cv-ct-ls ol { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.6; }
.cv-ls-gio { font-family: var(--chu-ma); font-size: 12px; color: var(--chu-phu); }
.cv-tieu-de-viec { margin-top: 20px !important; }
.cv-viec { display: grid; gap: 8px; }
.cv-hd { border: 1px solid var(--vien); border-radius: var(--bo); background: var(--the); }
.cv-hd.chinh { border-color: var(--nhan); }
.cv-hd > summary { cursor: pointer; padding: 12px; font-weight: 600; min-height: 44px; list-style-position: inside; }
.cv-hd > summary:focus-visible { outline: 2px solid var(--nhan); outline-offset: -2px; border-radius: var(--bo); }
.cv-hd > .cv-form { padding: 0 12px 12px; }

/* ---------- Form ---------- */
.cv-form { display: grid; gap: 10px; max-width: 640px; }
.cv-form h3 { margin: 16px 0 0; font-size: 15px; }
.cv-hang { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cv-o { display: grid; gap: 4px; min-width: 0; }
.cv-o label { font-size: 13px; font-weight: 600; }
.cv-o input, .cv-o select, .cv-o textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--vien); border-radius: 10px;
  background: var(--nen); color: var(--chu); font: inherit; font-size: 16px; }
.cv-o textarea { resize: vertical; line-height: 1.45; }
.cv-o input:focus, .cv-o select:focus, .cv-o textarea:focus { outline: 2px solid var(--nhan); outline-offset: 0; border-color: var(--nhan); }
.cv-o-ghi { font-size: 12px; color: var(--chu-phu); }
.cv-o-loi { font-size: 12.5px; color: var(--xau); }
.cv-o-loi:empty { display: none; }
.cv-o.co-loi input, .cv-o.co-loi select, .cv-o.co-loi textarea { border-color: var(--xau); background: var(--xau-nhat); }
.cv-bao { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--xau-nhat); color: var(--xau); font-size: 14px; }
.cv-form-nut { display: flex; gap: 8px; flex-wrap: wrap; }
.nut[aria-busy="true"] { cursor: progress; }
.cv-tv { padding: 12px; border: 1px solid var(--vien); border-radius: var(--bo); background: var(--the); display: grid; gap: 8px; }
.cv-tv .cv-dong-co { justify-content: flex-start; max-width: none; }
.cv-link-moi { display: grid; gap: 6px; }
.cv-link-moi input { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid var(--nhan); border-radius: 10px; font-family: var(--chu-ma); font-size: 12px; background: var(--nen); color: var(--chu); }

/* ---------- Cổng nhân sự (cong-viec.html) ---------- */
body.cvc { margin: 0; background: var(--nen); color: var(--chu); font-family: var(--chu-giao-dien); min-height: 100vh; }
.cvc-dau[hidden], .cvc-duoi[hidden] { display: none; }
.cvc-bo-qua { position: absolute; left: -9999px; top: 0; }
.cvc-bo-qua:focus { left: 8px; top: 8px; z-index: 50; background: var(--the); padding: 8px 12px; border-radius: 8px; }
.cvc-dau { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 10px; padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top));
  background: var(--the); border-bottom: 1px solid var(--vien); }
.cvc-ten { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--chu); text-decoration: none; }
.cvc-ten img { border-radius: 6px; }
.cvc-nguoi { flex: 1; text-align: right; font-size: 13px; color: var(--chu-phu); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cvc-noi-dung { padding: 16px 16px 96px; max-width: 720px; margin: 0 auto; outline: none; }
.cvc-tieu-de h1 { margin: 0; font-size: 22px; }
.cvc-tieu-de { margin: 0 0 12px; }
.cvc-tuan { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 8px; }
.cvc-giua { min-height: calc(100vh - 32px); display: grid; place-items: center; }
.cvc-the { width: 100%; max-width: 400px; padding: 20px; border: 1px solid var(--vien); border-radius: var(--bo); background: var(--the); display: grid; gap: 12px; }
.cvc-nut-rong { width: 100%; min-height: 48px; font-size: 15px; justify-content: center; }
.cvc-viec { margin-top: 16px; }
.cvc-ghi { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--nhan-nhat); color: var(--nhan); }
.cvc-duoi { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--the); border-top: 1px solid var(--vien); padding-bottom: env(safe-area-inset-bottom); }
.cvc-duoi a { display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 6px 4px; font-size: 13px; font-weight: 600;
  color: var(--chu-phu); text-decoration: none; text-align: center; }
.cvc-duoi a[aria-current="page"] { color: var(--nhan); box-shadow: inset 0 3px 0 var(--nhan); }
.cvc-duoi a:focus-visible { outline: 2px solid var(--nhan); outline-offset: -2px; }
.cvc-duoi .cvc-them { color: var(--nhan); }
@media (max-width: 420px) {
  .cv-hang { grid-template-columns: 1fr; }
  .cv-dong { flex-direction: column; }
  .cv-dong-co { justify-content: flex-start; max-width: none; }
  .cv-tt { grid-template-columns: 96px 1fr; }
}
@media (prefers-reduced-motion: reduce) { .nut:active { transform: none; } }