/* ============================================================
   hoso-theme.css — giao diện chung của toàn hệ thống.

   ⚠️ Từ 29/9/2026 file này ĐẶT TRÊN Bootstrap 5.3 (nạp bootstrap.min.css TRƯỚC, file này
   SAU — xem _Layout.cshtml). Ba điều phải nhớ:
     1. Tên class trùng Bootstrap sẽ bị Bootstrap tác động. Đã phải đổi tên 2 chỗ ở thanh
        bên: .nav -> .sidebar-nav (Bootstrap biến .nav thành hàng NGANG) và .mark ->
        .brand-mark (Bootstrap tô nền vàng highlight). Đặt class mới thì tra
        Content/bootstrap.css trước.
     2. .btn / .badge chỉnh qua BIẾN CSS của Bootstrap (--bs-btn-*, --bs-badge-*), đừng ghi
        đè thẳng background/color — nếu không trạng thái :hover/:active của Bootstrap đè ngược.
     3. Màu/phông/bo góc khai 1 lần ở :root, đồng thời nối vào biến --bs-* để component
        Bootstrap (form-control, alert, table...) cùng tông với phần tự viết.
   ============================================================ */

:root{
  /* Xanh than — màu thương hiệu: thanh bên, nút chính, tiêu đề. */
  --ink:#12344D;
  --ink-2:#1E4A68;
  --ink-3:#0B2436;
  --sidebar:#0F2B40;
  --paper:#F2F4F7;
  --surface:#FFFFFF;
  --surface-2:#F8FAFC;              /* đầu bảng, khối lồng trong khối */
  --line:#DCE3EA;
  --line-strong:#C3CDD8;            /* viền ô nhập — đậm hơn để thấy ngay ô nào nhập được */
  --line-soft:#EDF1F5;
  --text:#1B2733;
  --text-muted:#5A6878;             /* 5,7:1 trên nền trắng — vẫn đạt chuẩn đọc AA */
  --gold:#C28A2C;
  --gold-soft:#FBF1DD;
  --green:#2E7650;
  --green-soft:#E3F2E9;
  --blue:#1F62A8;
  --blue-soft:#E4EEF9;
  --red:#B42318;
  --red-soft:#FDECEA;
  --grey-soft:#EEF1F4;
  --focus:rgba(31,98,168,.28);
  --radius:6px;
  --radius-lg:10px;
  --shadow-sm:0 1px 2px rgba(16,24,40,.05);
  --shadow:0 1px 3px rgba(16,24,40,.08),0 1px 2px rgba(16,24,40,.04);
  --shadow-lg:0 10px 28px rgba(16,24,40,.12);
  /* Be Vietnam Pro để sẵn ở Content/fonts (không CDN); lùi về Segoe UI của Windows. */
  --sans:'Be Vietnam Pro','Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
  /* Giữ tên --serif vì nhiều rule/view còn dùng cho TIÊU ĐỀ — nay tiêu đề cũng là chữ không chân. */
  --serif:var(--sans);
  --mono:ui-monospace,'Cascadia Mono',Consolas,'Courier New',monospace;

  /* ---- Nối vào Bootstrap 5.3 ---- */
  --bs-body-font-family:var(--sans);
  --bs-body-font-size:14px;
  --bs-body-line-height:1.55;
  --bs-body-color:var(--text);
  --bs-body-bg:var(--paper);
  --bs-secondary-color:var(--text-muted);
  --bs-emphasis-color:var(--ink);
  --bs-heading-color:var(--ink);
  --bs-border-color:var(--line);
  --bs-border-radius:var(--radius);
  --bs-border-radius-sm:4px;
  --bs-border-radius-lg:var(--radius-lg);
  --bs-primary:#12344D;
  --bs-primary-rgb:18,52,77;
  --bs-link-color:var(--blue);
  --bs-link-color-rgb:31,98,168;
  --bs-link-hover-color:var(--ink);
  --bs-link-hover-color-rgb:18,52,77;
  --bs-focus-ring-color:var(--focus);
  --bs-font-monospace:var(--mono);
  --bs-danger:#B42318;
  --bs-danger-rgb:180,35,24;
  --bs-success:#2E7650;
  --bs-success-rgb:46,118,80;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--text);
  font-size:14px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;}
/* Bootstrap reboot đặt h1–h4 theo vw (to dần theo màn hình) — quá to cho màn hình nghiệp vụ
   dày chữ. Chốt cỡ cố định; nơi nào cần khác đã có rule riêng (.topbar h2, .section-head h3...). */
h1,h2,h3,h4,h5,h6{font-family:var(--sans);color:var(--ink);font-weight:700;line-height:1.3;letter-spacing:-.005em;}
h1{font-size:24px;}
h2{font-size:20px;}
h3{font-size:16px;}
h4{font-size:14.5px;}
h5,h6{font-size:13.5px;}
/* ⚠️ PHIẾU IN (.phieu = Phiếu công việc tuần, .pkt = Phiếu kiểm tra hồ sơ) đặt Times New Roman +
   chữ đen ở KHUNG NGOÀI, tiêu đề bên trong chỉ thừa hưởng. Rule h1–h6 ở trên (và
   --bs-heading-color của Bootstrap) gán thẳng lên thẻ nên thắng thừa hưởng -> tiêu đề phiếu in
   thành chữ không chân màu xanh. Trả tiêu đề phiếu về đúng phông/màu của phiếu.
   Dùng :where() cho độ ưu tiên chỉ bằng thẻ h1 — class riêng của phiếu (.phieu-ten có
   letter-spacing riêng...) vẫn phải thắng rule này. */
:where(.phieu,.pkt) :is(h1,h2,h3,h4,h5,h6){font-family:inherit;color:inherit;letter-spacing:normal;line-height:inherit;}
code{font-family:var(--mono);color:var(--ink-2);background:var(--grey-soft);padding:1px 5px;border-radius:4px;}
hr{border-color:var(--line);opacity:1;}
::selection{background:#CFE0F3;}
.app{display:flex;min-height:100vh;}

/* ---------- SIDEBAR ---------- */
/* Dính theo màn hình (sticky, cao đúng 100vh): trước 29/9/2026 thanh bên dài theo trang nên
   ở form nhập hồ sơ dài, khối người dùng + nút Đăng xuất trôi tuốt xuống đáy trang, menu thì
   cuộn mất. Nay menu luôn thấy, phần menu dài tự cuộn bên trong (.sidebar-nav overflow). */
.sidebar{
  width:236px;
  flex-shrink:0;
  background:var(--sidebar);
  background-image:linear-gradient(180deg,#123049 0%,var(--sidebar) 42%,#0C2334 100%);
  color:#DCE6EE;
  display:flex;
  flex-direction:column;
  position:sticky;
  top:0;
  height:100vh;
  z-index:40;
  box-shadow:1px 0 0 rgba(0,0,0,.08);
}
/* Hàng đầu: [logo -> trang chủ] [tên] [nút thu gọn]. Logo TRƯỚC ĐÂY chỉ là hình trang trí,
   người dùng tưởng nút hỏng -> nay là link thật. */
.sidebar-brand{
  padding:16px 14px;border-bottom:1px solid rgba(255,255,255,0.09);
  display:flex;align-items:center;gap:11px;
}
/* ⚠️ Tên cũ là .mark — trùng class .mark của Bootstrap (tô nền vàng highlight) nên đổi tên. */
.brand-mark{
  width:36px;height:36px;flex-shrink:0;border:1.5px solid #C9D7E2;border-radius:9px;
  position:relative;display:block;text-decoration:none;background:rgba(255,255,255,0.04);
  transition:border-color .15s,background-color .15s;
}
.brand-mark:hover{border-color:var(--gold);background:rgba(194,138,44,0.12);}
.brand-mark::before,.brand-mark::after{content:"";position:absolute;background:#C9D7E2;border-radius:1px;}
.brand-mark::before{left:50%;top:6px;bottom:6px;width:1.5px;transform:translateX(-50%);}
.brand-mark::after{top:50%;left:6px;right:6px;height:1.5px;transform:translateY(-50%);}
.brand-mark:hover::before,.brand-mark:hover::after{background:var(--gold);}
.brand-chu{flex:1;min-width:0;}
.sidebar-brand h1{font-family:var(--sans);font-weight:700;font-size:16.5px;line-height:1.2;margin:0;color:#FFFFFF;white-space:nowrap;letter-spacing:-.01em;}
.sidebar-brand p{margin:2px 0 0;font-size:12px;color:#94ABBE;white-space:nowrap;}

/* ⚠️ Tên cũ là .nav — Bootstrap biến .nav thành hàng NGANG (display:flex; flex-wrap:wrap),
   menu dọc vỡ hết. Đổi tên thành .sidebar-nav. */
.sidebar-nav{flex:1;padding:14px 12px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent;}
.sidebar-nav a{
  display:flex;align-items:center;gap:11px;position:relative;
  padding:9px 12px;border-radius:8px;color:#C8D6E2;
  text-decoration:none;font-size:14px;font-weight:500;margin-bottom:2px;cursor:pointer;
  white-space:nowrap;transition:background-color .12s,color .12s;
}
.sidebar-nav a:hover{background:rgba(255,255,255,0.07);color:#FFFFFF;}
/* Mục đang mở: nền sáng hơn + vạch vàng bên trái (vẽ bằng ::before để không xê dịch chữ). */
.sidebar-nav a.active{background:rgba(255,255,255,0.12);color:#FFFFFF;font-weight:600;}
.sidebar-nav a.active::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--gold);}
.sidebar-nav .section-label{font-size:11.5px;font-weight:600;color:#86A0B5;margin:18px 12px 6px;text-transform:uppercase;letter-spacing:.07em;}
.sidebar-nav .section-label:first-child{margin-top:0;}
.mi-icon{flex-shrink:0;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;}
.mi-icon svg{width:18px;height:18px;}
.mi-chu{min-width:0;overflow:hidden;text-overflow:ellipsis;}

.sidebar-cta{
  margin:10px 0 6px;background:var(--gold);color:#241A05;border:none;
  padding:10px 12px;border-radius:8px;font-weight:700;font-size:14px;
  cursor:pointer;text-decoration:none;
  display:flex;align-items:center;gap:11px;
  box-shadow:0 1px 2px rgba(0,0,0,.25);transition:background-color .12s;
}
.sidebar-cta:hover{background:#D29A3B;color:#241A05;}
.sidebar-cta .mi-icon svg{stroke-width:2.2;}

/* Khối người đăng nhập: họ tên · vai trò · Tài khoản · Đăng xuất */
.sidebar-user{
  padding:12px 14px;border-top:1px solid rgba(255,255,255,0.09);font-size:13px;color:#94ABBE;
  display:flex;flex-direction:column;gap:8px;background:rgba(0,0,0,0.12);
}
.user-dong{display:flex;align-items:center;gap:10px;min-width:0;}
.sidebar-user strong{display:block;color:#F1F5F9;font-weight:600;font-size:13.5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px;}
.user-email{display:block;font-size:12px;color:#8FA6B9;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px;}
.user-tat{
  flex-shrink:0;width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,0.14);color:#F1F5F9;
  display:none;align-items:center;justify-content:center;font-weight:700;font-size:13.5px;
}
.user-chu{min-width:0;}

.user-vaitro{display:flex;flex-wrap:wrap;gap:4px;}
.vaitro-chip{
  font-size:11.5px;font-weight:500;padding:2px 8px;border-radius:999px;white-space:nowrap;
  background:rgba(255,255,255,0.08);color:#C9D7E2;border:1px solid rgba(255,255,255,0.14);
}

.user-nut{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.user-nut form{display:inline;margin:0;}
.user-lien{
  font-size:12.5px;font-weight:500;color:#C0D0DD;text-decoration:none;cursor:pointer;
  background:none;padding:4px 10px;border-radius:6px;
  border:1px solid rgba(255,255,255,0.16);font-family:var(--sans);line-height:1.4;
}
.user-lien:hover{background:rgba(255,255,255,0.09);color:#FFFFFF;border-color:rgba(255,255,255,0.32);}
.user-thoat:hover{background:rgba(180,35,24,0.28);color:#FFD9D5;border-color:#E0766C;}

/* ---------- MAIN ---------- */
.main{flex:1;min-width:0;display:flex;flex-direction:column;position:relative;}

/* ---------- THU GỌN THANH BÊN ----------
   Class đặt trên <html> để script ở <head> khôi phục được trạng thái TRƯỚC khi trang vẽ
   (đặt trên .app thì mỗi lần đổi trang sidebar hiện ra rồi mới thu lại -> nháy giật).

   ⚠️ Thu về THANH RAY 60px, KHÔNG thu về 0: nút thu gọn nằm trong chính thanh bên (theo yêu
   cầu người dùng), thu về 0 là mất luôn nút, không còn cách nào mở lại. Vì vậy mọi mục menu
   BẮT BUỘC có icon + thuộc tính title (tooltip). */
.sidebar{transition:width .16s ease;}
.nut-thu-gon{
  flex-shrink:0;width:28px;height:28px;padding:0;line-height:1;
  border:1px solid rgba(255,255,255,0.18);border-radius:7px;
  background:transparent;color:#A9BDCD;cursor:pointer;font-size:14px;
}
.nut-thu-gon:hover{border-color:var(--gold);color:var(--gold);}
.nut-thu-gon .khi-gon{display:none;}

html.sidebar-thu-gon .sidebar{width:60px;}
html.sidebar-thu-gon .sidebar-brand{flex-direction:column;gap:8px;padding:14px 8px;}
html.sidebar-thu-gon .brand-chu,
html.sidebar-thu-gon .sidebar-nav .section-label,
html.sidebar-thu-gon .mi-chu,
html.sidebar-thu-gon .user-chu,
html.sidebar-thu-gon .nut-thu-gon .khi-mo{display:none;}
html.sidebar-thu-gon .nut-thu-gon .khi-gon{display:inline;}
html.sidebar-thu-gon .user-tat{display:inline-flex;}
/* Chế độ ray: chỉ còn chữ cái đầu; vai trò và 2 nút ẩn đi cho khỏi tràn. */
html.sidebar-thu-gon .user-vaitro,
html.sidebar-thu-gon .user-nut{display:none;}
html.sidebar-thu-gon .user-dong{justify-content:center;}
html.sidebar-thu-gon .sidebar-nav{padding:12px 8px;}
html.sidebar-thu-gon .sidebar-nav a,
html.sidebar-thu-gon .sidebar-cta{justify-content:center;padding:10px 0;gap:0;}
html.sidebar-thu-gon .sidebar-nav a.active::before{display:none;}
html.sidebar-thu-gon .sidebar-nav a.active{box-shadow:inset 0 0 0 1.5px var(--gold);}
html.sidebar-thu-gon .sidebar-cta{margin:10px 0;}
html.sidebar-thu-gon .sidebar-user{justify-content:center;padding:12px 8px;}
.topbar{
  background:var(--surface);border-bottom:1px solid var(--line);padding:18px 28px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  box-shadow:var(--shadow-sm);
}
.topbar .crumb{font-size:12.5px;font-weight:500;color:var(--text-muted);margin-bottom:3px;}
.topbar h2{margin:0;font-family:var(--sans);font-weight:700;font-size:22px;line-height:1.25;color:var(--ink);letter-spacing:-.015em;}
.topbar-actions{display:flex;gap:8px;flex-shrink:0;flex-wrap:wrap;}
/* Không giới hạn bề ngang: trước đây max-width:1180px làm màn hình rộng bỏ trống hẳn một
   mảng bên phải trong khi form nhập hồ sơ lại chật. */
.content{padding:24px 28px 60px;max-width:none;}

/* ---------- NÚT ----------
   ⚠️ Chỉnh qua BIẾN --bs-btn-* của Bootstrap 5.3, KHÔNG ghi đè thẳng background/color: rule
   .btn:hover/.btn:active của Bootstrap đọc các biến này, ghi đè thẳng thì rê chuột vào nút là
   nền biến mất (Bootstrap đặt background-color theo biến hover chưa khai). */
.btn{
  --bs-btn-padding-x:15px;--bs-btn-padding-y:7px;
  --bs-btn-font-family:var(--sans);--bs-btn-font-size:13.5px;--bs-btn-font-weight:600;--bs-btn-line-height:1.45;
  --bs-btn-color:var(--ink);--bs-btn-bg:var(--surface);--bs-btn-border-color:var(--line-strong);
  --bs-btn-border-radius:var(--radius);
  --bs-btn-hover-color:var(--ink);--bs-btn-hover-bg:var(--surface-2);--bs-btn-hover-border-color:#94A6B8;
  --bs-btn-active-color:var(--ink);--bs-btn-active-bg:var(--grey-soft);--bs-btn-active-border-color:#94A6B8;
  --bs-btn-disabled-color:var(--text-muted);--bs-btn-disabled-bg:var(--surface);--bs-btn-disabled-border-color:var(--line);
  --bs-btn-disabled-opacity:.55;
  --bs-btn-focus-box-shadow:0 0 0 3px var(--focus);
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  text-decoration:none;box-shadow:var(--shadow-sm);
}
.btn-primary{
  --bs-btn-color:#fff;--bs-btn-bg:var(--ink);--bs-btn-border-color:var(--ink);
  --bs-btn-hover-color:#fff;--bs-btn-hover-bg:var(--ink-2);--bs-btn-hover-border-color:var(--ink-2);
  --bs-btn-active-color:#fff;--bs-btn-active-bg:var(--ink-3);--bs-btn-active-border-color:var(--ink-3);
  --bs-btn-disabled-color:#fff;--bs-btn-disabled-bg:var(--ink);--bs-btn-disabled-border-color:var(--ink);
}
.btn-gold{
  --bs-btn-color:#241A05;--bs-btn-bg:var(--gold);--bs-btn-border-color:#B27C22;
  --bs-btn-hover-color:#241A05;--bs-btn-hover-bg:#D29A3B;--bs-btn-hover-border-color:#B27C22;
  --bs-btn-active-color:#241A05;--bs-btn-active-bg:#B27C22;--bs-btn-active-border-color:#9C6C1C;
}
.btn-ghost{
  --bs-btn-bg:transparent;--bs-btn-border-color:transparent;
  --bs-btn-hover-bg:var(--grey-soft);--bs-btn-hover-border-color:transparent;
  --bs-btn-active-bg:var(--line);--bs-btn-active-border-color:transparent;
  box-shadow:none;
}
.btn-sm{--bs-btn-padding-y:5px;--bs-btn-padding-x:10px;--bs-btn-font-size:13px;--bs-btn-border-radius:var(--radius);}
.btn-danger-outline{
  --bs-btn-color:var(--red);--bs-btn-border-color:#F1B8B2;
  --bs-btn-hover-color:#fff;--bs-btn-hover-bg:var(--red);--bs-btn-hover-border-color:var(--red);
  --bs-btn-active-color:#fff;--bs-btn-active-bg:#912018;--bs-btn-active-border-color:#912018;
}
/* btn-outline-dark còn ở các trang Tài khoản (mẫu ASP.NET) — cho cùng dáng nút mặc định. */
.btn-outline-dark{
  --bs-btn-color:var(--ink);--bs-btn-border-color:var(--line-strong);
  --bs-btn-hover-color:#fff;--bs-btn-hover-bg:var(--ink);--bs-btn-hover-border-color:var(--ink);
}
.btn-link{box-shadow:none;}
/* Bootstrap đặt pointer-events:none cho nút bị khóa -> mất luôn tooltip (title) giải thích vì
   sao khóa và mất con trỏ "cấm". Trả lại như trước — chỉ cho <button>/<input>: thẻ <a> bị khóa
   vẫn phải chặn click bằng pointer-events:none như Bootstrap. */
button.btn:disabled,input.btn:disabled{pointer-events:auto;cursor:not-allowed;box-shadow:none;}

/* ---------- BADGES ---------- */
/* Bootstrap mặc định chữ badge màu TRẮNG — badge không có class màu sẽ tàng hình trên nền
   sáng, nên đặt lại màu chữ gốc. */
.badge{
  --bs-badge-color:var(--text);
  display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;line-height:1.45;
  padding:3px 10px 3px 8px;border-radius:999px;border:1px solid transparent;white-space:nowrap;
  color:var(--text);vertical-align:middle;
}
.badge::before{content:"";width:7px;height:7px;border-radius:50%;flex-shrink:0;}
/* 4 trạng thái hồ sơ (chốt 7/9/2026) — xem Services.TrangThaiHoSo.Css */
.badge-dangthuchien{background:var(--blue-soft);color:#174B80;border-color:#C9DCF1;}
.badge-dangthuchien::before{background:var(--blue);}
.badge-daxong{background:var(--green-soft);color:#1F5A3B;border-color:#C3E3CF;}
.badge-daxong::before{background:var(--green);}
.badge-dahuy{background:var(--red-soft);color:#8F1D14;border-color:#F4C7C1;}
.badge-dahuy::before{background:var(--red);}
.badge-tamdung{background:var(--gold-soft);color:#7D5410;border-color:#F0DDB5;}
.badge-tamdung::before{background:var(--gold);}

/* 4 class cũ (TiepNhan/ThamDinh/KyDuyet/TraKetQua) giữ lại vì nhật ký cũ vẫn có thể in ra. */
.badge-tiepnhan{background:var(--grey-soft);color:#4B5563;border-color:var(--line);}
.badge-tiepnhan::before{background:#8A96A3;}
.badge-thamdinh{background:var(--gold-soft);color:#7D5410;}
.badge-thamdinh::before{background:var(--gold);}
.badge-kyduyet{background:var(--blue-soft);color:#174B80;}
.badge-kyduyet::before{background:var(--blue);}
.badge-trakq{background:var(--green-soft);color:#1F5A3B;}
.badge-trakq::before{background:var(--green);}
.badge-type{display:inline-block;font-size:12.5px;font-weight:500;line-height:1.45;padding:3px 9px;border-radius:var(--radius);border:1px solid var(--line);color:var(--ink-2);background:var(--surface-2);}
/* Badge BƯỚC quy trình 05 bước: màu lấy từ DM_Buoc.Mau qua biến --mau đặt inline,
   nên thêm/đổi bước chỉ cần sửa CSDL, không phải thêm class CSS mới. */
.badge-buoc{background:#fff;border-color:var(--mau,#8A96A3);color:var(--mau,#4B5563);}
.badge-buoc::before{background:var(--mau,#8A96A3);}
.badge-buoc-trong{background:var(--grey-soft);border-color:transparent;color:#667085;}
.badge-buoc-trong::before{background:#A9B4C0;}

/* ---------- LIST VIEW ---------- */
.filter-bar{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:16px 18px;display:flex;flex-wrap:wrap;gap:12px 14px;align-items:flex-end;margin-bottom:18px;box-shadow:var(--shadow-sm);}
.field{display:flex;flex-direction:column;gap:5px;}
.field label{font-size:12.5px;font-weight:600;color:var(--ink-2);margin:0;}
.field select,.field input{font-family:var(--sans);padding:7px 10px;border:1px solid var(--line-strong);border-radius:var(--radius);font-size:13.5px;line-height:1.45;background:#fff;color:var(--text);min-width:150px;transition:border-color .12s,box-shadow .12s;}
/* Chốt CỨNG 38px cho mọi ô trong thanh lọc (select thường, ô gõ, select2, nút "Lọc" — nút đó
   đặt inline height:38px trong view) — đo thật 29/9/2026: để trình duyệt tự tính thì select
   34px, input 35px, select2 37px, lệch nhau thấy rõ. Loại trừ checkbox/radio (.cv-tick). */
.field select,.field input:not([type=checkbox]):not([type=radio]){height:38px;}
.field.search input{min-width:230px;}
/* Viền sáng + vòng mờ thay cho outline đen dày — nhìn rõ ô đang gõ mà không gắt. */
.field select:focus,.field input:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--focus);}

/* ---- select2 (ô chọn có tìm kiếm, class .chon2) ----
   Chiều cao phải khớp ô nhập thường bên cạnh trong .filter-bar (37px), select2 mặc định cao
   28px nên đứng cạnh là lệch hẳn một bậc. */
.select2-container--default .select2-selection--single{
  height:38px;border:1px solid var(--line-strong);border-radius:var(--radius);background:#fff;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height:36px;padding-left:10px;padding-right:34px;font-size:13.5px;color:var(--text);
}
.select2-container--default .select2-selection--single .select2-selection__arrow{height:36px;}
.select2-container--default .select2-selection--single .select2-selection__placeholder{color:var(--text-muted);}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single{border-color:var(--blue);box-shadow:0 0 0 3px var(--focus);}
.select2-dropdown{border-color:var(--line-strong);border-radius:var(--radius);font-size:13.5px;box-shadow:var(--shadow-lg);overflow:hidden;}
.select2-container--default .select2-results__group{
  font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);
  padding:8px 10px 4px;
}
.select2-container--default .select2-results__option--highlighted[aria-selected]{background:var(--ink-2);}
.select2-container--default .select2-search--dropdown .select2-search__field{
  border:1px solid var(--line-strong);border-radius:var(--radius);padding:6px 8px;
}

.table-wrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);}
table{width:100%;border-collapse:collapse;font-size:14px;}
thead th{text-align:left;font-weight:600;font-size:12.5px;color:#475467;padding:11px 16px;border-bottom:1px solid var(--line);background:var(--surface-2);}
tbody td{padding:12px 16px;border-bottom:1px solid var(--line-soft);vertical-align:middle;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:#F6F9FC;}

/* Bảng "Danh sách hồ sơ" (HoSo/Index) — 9 cột, ÉP table-layout:fixed để cân đối bề rộng
   (14/9/2026, theo phản ánh người dùng: "table head không tương thích với table body").
   ⚠️ Nguyên nhân: bảng `table{...}` dùng chung cho MỌI bảng trong app không có
   table-layout, nên mặc định là AUTO — dưới auto-layout, các cột chứa BADGE
   (.badge/.badge-type có white-space:nowrap CỐ Ý để badge không tự vỡ chữ) bị trình duyệt
   coi là "không co giãn được" nên luôn được ưu tiên đủ chỗ TRƯỚC, dồn hết phần hẹp còn lại
   cho cột chữ thường (Số hồ sơ, Tên hồ sơ) — 2 cột đó bị bóp gần như về 0, chữ vỡ dòng liên
   tục dù nội dung rất ngắn ("HS-045" vỡ thành "HS-" / "045"). Đã thấy thật bằng bản HTML
   tĩnh dùng đúng CSS này trước khi sửa. Scope riêng bằng .ds-hoso, KHÔNG sửa `table{}` gốc
   vì rất nhiều bảng khác trong app dùng chung selector đó (.dm-bang, .bl-bang, .cc-bang...
   đã tự xử lý bề rộng riêng theo cách khác, không nên đổi hành vi mặc định của chúng). */
.ds-hoso{table-layout:fixed;}
.ds-hoso .c-so      {width:8%;}
.ds-hoso .c-ten     {width:18%;}
.ds-hoso .c-loai    {width:12%;}
.ds-hoso .c-thua    {width:22%;}
.ds-hoso .c-ngay    {width:8%;}
.ds-hoso .c-hen     {width:9%;}
.ds-hoso .c-buoc    {width:14%;}
.ds-hoso .c-thaotac {width:9%;}
/* Tổng: 8+18+12+22+8+9+14+9 = 100. Bỏ cột "Chủ SDĐ chính" (c-chu, 12%) 14/9/2026 theo yêu
   cầu người dùng, dồn phần rộng vào Thửa đất (+8%) và Bước (+4%) — 2 cột hay bị tràn/khó đọc.
   c-thaotac 7%→9% (bớt 1% từ c-so, 1% từ c-hen) cùng ngày, phối hợp với flex-wrap:wrap ở
   .row-actions — cột 7% cũ không đủ chỗ cho 2 nút "Xem"+"Sửa" nằm cùng hàng, nút "Sửa" bị
   overflow:hidden của .table-wrap cắt đứt mất hẳn (không phải chỉ hiển thị xấu). */

/* Badge TRONG BẢNG NÀY được phép xuống dòng nếu quá dài (VD "Chuyển nhượng / Mua bán /
   Tặng cho") — khác với .badge/.badge-type toàn cục luôn nowrap (dùng khắp app, không sửa
   rule gốc). Cột đã có bề rộng cố định rồi, thà badge xuống 2 dòng còn hơn tràn ra khỏi cột. */
.ds-hoso .badge,.ds-hoso .badge-type{white-space:normal;}
/* Badge xuống 2–3 dòng mà vẫn bo "viên thuốc" 999px thì thành cục méo — bo vừa phải thôi. */
.ds-hoso .badge{border-radius:10px;text-align:left;}

.mono{font-family:var(--mono);font-size:13px;color:var(--ink-2);}
/* ⚠️ flex-wrap:wrap thêm 14/9/2026 (phản ánh người dùng: nút "Sửa" ở cột Thao tác của
   Danh sách hồ sơ bị "chèn khuyết" — thực ra là bị CẮT MẤT hoàn toàn). Nguyên nhân: cột
   Thao tác (.ds-hoso .c-thaotac) hẹp, table-layout:fixed khóa cứng bề rộng, mà .table-wrap
   có overflow:hidden nên nút "Sửa" tràn ra ngoài bị cắt đứt luôn chứ không co lại. Đã kiểm
   chứng bằng bản HTML tĩnh dùng đúng CSS thật (zoom vào cột Thao tác: chỉ thấy "Xem", "Sửa"
   biến mất hẳn). flex-wrap:wrap cho 2 nút tự xuống dòng khi không đủ chỗ thay vì bị cắt —
   sửa chung ở đây vì .row-actions dùng lại ở nhiều bảng khác (NguoiDung, DanhMuc, NhanSu). */
.row-actions{display:flex;flex-wrap:wrap;gap:6px;}
.pagination{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-top:1px solid var(--line);font-size:13px;color:var(--text-muted);flex-wrap:wrap;gap:8px;margin:0;}
.pagination .pages{display:flex;gap:4px;}
.pagination .pages a,.pagination .pages span{min-width:32px;height:32px;padding:0 6px;border:1px solid var(--line);background:#fff;border-radius:var(--radius);cursor:pointer;font-size:13px;font-weight:500;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;color:var(--text);}
.pagination .pages a:hover{border-color:var(--line-strong);background:var(--surface-2);}
.pagination .pages a.current,.pagination .pages span.current{background:var(--ink);color:#fff;border-color:var(--ink);font-weight:700;}

/* ---------- FORM VIEW ---------- */
.section{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px 22px;margin-bottom:16px;box-shadow:var(--shadow-sm);}
.section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--line-soft);flex-wrap:wrap;gap:6px;}
.section-head h3{margin:0;font-family:var(--sans);font-weight:700;font-size:16px;color:var(--ink);letter-spacing:-.01em;}
.section-head .hint{font-size:12.5px;color:var(--text-muted);}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px 18px;}
@media (max-width:900px){.grid-2,.grid-3{grid-template-columns:1fr;}}
.form-field{display:flex;flex-direction:column;gap:5px;margin-bottom:2px;}
.form-field label{font-size:13px;color:var(--ink-2);font-weight:600;margin:0;}
.form-field label .req{color:var(--red);margin-left:2px;}
.form-field input,.form-field select,.form-field textarea{font-family:var(--sans);padding:8px 11px;border:1px solid var(--line-strong);border-radius:var(--radius);font-size:14px;line-height:1.45;color:var(--text);background:#fff;width:100%;transition:border-color .12s,box-shadow .12s;}
.form-field input:hover,.form-field select:hover,.form-field textarea:hover{border-color:#A9B7C6;}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--focus);}
/* Ô bị khóa/chỉ đọc phải NHÌN RA là không sửa được — trước đây trông y hệt ô thường. */
.form-field input:disabled,.form-field select:disabled,.form-field textarea:disabled,
.form-field input[readonly],.form-field textarea[readonly]{background:var(--grey-soft);color:var(--text-muted);}
.form-field input::placeholder,.form-field textarea::placeholder{color:#98A2B3;}
.form-field textarea{resize:vertical;min-height:64px;font-family:var(--sans);}
.form-field.mono-field input{font-family:var(--mono);}
.form-field .note{font-size:12px;color:var(--text-muted);}
.form-field .field-validation-error{font-size:12px;font-weight:500;color:var(--red);}
.input-validation-error{border-color:var(--red) !important;background:var(--red-soft);}
/* Rule .form-field input (nền trắng) cụ thể hơn rule trên nên trước đây ô lỗi trong form chỉ có
   viền đỏ, nền vẫn trắng — thêm độ ưu tiên để nền hồng báo lỗi hiện đúng. */
.form-field .input-validation-error{background:var(--red-soft);}
/* ⚠️ Html.ValidationSummary VẪN render thẻ <div> kể cả khi KHÔNG có lỗi (chỉ đổi class
   thành validation-summary-valid), mà class đỏ thì gắn cứng trong view -> đầu form nhập
   hồ sơ hiện ra một khung đỏ RỖNG. Phải ẩn hẳn trường hợp không lỗi. */
.validation-summary-valid{display:none;}
.validation-summary-errors{background:var(--red-soft);border:1px solid #F1B8B2;border-left:4px solid var(--red);color:#8F1D14;border-radius:var(--radius);padding:12px 14px;margin-bottom:16px;font-size:13.5px;}
.validation-summary-errors ul{margin:4px 0 0;padding-left:18px;}

.entity-grid{border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:8px;}
.entity-grid .erow{display:flex;gap:10px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--line-soft);background:#fff;}
.entity-grid .erow:last-child{border-bottom:none;}
.entity-grid .erow.header-row{background:var(--surface-2);font-size:12.5px;color:#475467;font-weight:600;padding:8px 12px;}
.erow .col{flex:1;min-width:0;}
.erow .col-narrow{flex:0 0 110px;}
.erow input,.erow select{width:100%;padding:6px 9px;border:1px solid var(--line-strong);border-radius:var(--radius);font-size:13.5px;line-height:1.45;}
.erow input:focus,.erow select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--focus);}
.erow .chip{display:flex;align-items:center;justify-content:space-between;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:7px 10px;font-size:13.5px;}
.add-row-btn{border:1.5px dashed var(--line-strong);background:transparent;color:var(--ink-2);width:100%;padding:9px;border-radius:var(--radius);font-size:13.5px;cursor:pointer;font-weight:600;transition:border-color .12s,background-color .12s;}
.add-row-btn:hover{border-color:var(--blue);background:var(--blue-soft);color:var(--ink);}
.icon-btn{border:none;background:transparent;color:var(--text-muted);cursor:pointer;font-size:15px;padding:2px 6px;border-radius:var(--radius);}
.icon-btn:hover{background:var(--red-soft);color:var(--red);}

/* autocomplete dropdown (dùng cho tìm Con người / Thửa đất / File "gắn với") */
.acbox{position:relative;flex:1;}
.acbox .ac-results{
  position:absolute;left:0;right:0;top:100%;z-index:20;background:#fff;
  border:1px solid var(--line);border-top:none;border-radius:0 0 var(--radius) var(--radius);
  max-height:220px;overflow:auto;box-shadow:0 6px 14px rgba(22,48,63,0.12);display:none;
}
.acbox .ac-results.show{display:block;}
.acbox .ac-item{padding:8px 11px;font-size:13.5px;cursor:pointer;border-bottom:1px solid var(--line-soft);}
.acbox .ac-item:hover,.acbox .ac-item.hi{background:var(--line-soft);}
.acbox .ac-empty{padding:8px 11px;font-size:13px;color:var(--text-muted);}
.acbox .ac-new{color:var(--ink-2);font-weight:600;}
.acbox .ac-results.show-lg{max-height:460px;}
.ac-quickcreate{padding:10px 11px;}
.ac-quickcreate .form-field{margin-bottom:8px;}
.ac-quickcreate .form-field label{font-size:12.5px;}
.ac-quickcreate .qc-actions{margin-top:4px;}

/* "+ Hồ sơ này còn liên quan tới thửa đất khác?" — link thu gọn/mở rộng mục phụ */
.collapse-toggle{margin-top:10px;font-size:13.5px;color:var(--ink-2);font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:2px;}
.collapse-toggle:hover{color:var(--ink);}

/* type selector chips for Loai Ho So */
.type-select{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px;}
.type-chip{border:1px solid var(--line-strong);background:#fff;padding:8px 14px;border-radius:999px;font-size:13.5px;font-weight:500;cursor:pointer;color:var(--ink-2);transition:border-color .12s,background-color .12s;}
.type-chip:hover{border-color:var(--ink-2);background:var(--surface-2);}
.type-chip.active{background:var(--ink);color:#fff;border-color:var(--ink);font-weight:600;}

/* ------------------------------------------------------------
   Sơ đồ gia phả (mục E4) — cây dọc bằng HTML/CSS thuần, không dùng thư viện JS
   để in ra giấy vẫn đúng và không phụ thuộc CDN.
   Đường nối vẽ bằng border của ::before/::after trên từng <li>.
   ------------------------------------------------------------ */
.giapha{border:1px solid var(--line-soft);border-radius:var(--radius);padding:16px 12px;background:var(--surface-2);overflow-x:auto;}
.giapha-empty{color:var(--text-muted);font-size:13.5px;text-align:center;padding:8px;}

.giapha ul{list-style:none;margin:0;padding-top:18px;position:relative;display:flex;justify-content:center;gap:14px;}
.giapha ul.giapha-tree{padding-top:0;}
.giapha li{list-style:none;position:relative;padding:18px 8px 0;text-align:center;}

/* đường dọc đi lên từ mỗi nút con */
.giapha li::before,.giapha li::after{content:"";position:absolute;top:0;right:50%;width:50%;height:18px;border-top:1px solid var(--line);}
.giapha li::after{right:auto;left:50%;border-left:1px solid var(--line);}
.giapha li:only-child::before,.giapha li:only-child::after{display:none;}
.giapha li:only-child{padding-top:18px;}
.giapha li:first-child::before,.giapha li:last-child::after{border:0 none;}
.giapha li:last-child::before{border-right:1px solid var(--line);border-radius:0 6px 0 0;}
.giapha li:first-child::after{border-radius:6px 0 0 0;}
/* đường dọc nối xuống nhóm con */
.giapha ul ul::before{content:"";position:absolute;top:0;left:50%;height:18px;border-left:1px solid var(--line);}
.giapha ul.giapha-tree > li::before,.giapha ul.giapha-tree > li::after{display:none;}

.giapha-node{display:inline-block;border:1px solid var(--line);background:#fff;border-radius:var(--radius);
    padding:7px 12px;font-size:13.5px;white-space:nowrap;}
.giapha-goc{background:var(--ink);color:#fff;border-color:var(--ink);font-weight:600;}
.giapha-mat{background:#F3F1EC;color:var(--ink-2);border-style:dashed;}
.giapha-luuy{border-color:#B3261E;}
.giapha-phu{display:block;font-size:12px;color:var(--text-muted);font-weight:400;margin-top:2px;}
.giapha-goc .giapha-phu{color:#E8E4DA;}

.giapha-warn{border:1px solid #E9C46A;background:#FDF6E3;color:#7A5C00;border-radius:var(--radius);
    padding:8px 12px;font-size:13px;margin-bottom:8px;}
.giapha-warn div + div{margin-top:4px;}

/* Sơ đồ phân chia di sản (tab Gia phả, hồ sơ Cấp lần đầu) — vẽ bằng SVG thuần, không rasterize. */
.thuake-wrap{border:1px solid var(--line-soft);border-radius:var(--radius);padding:14px 10px;background:var(--surface);overflow-x:auto;}
.thuake-svg{display:block;}
.thuake-box{stroke-width:1.4;}
.thuake-box.tk-goc{fill:var(--ink);stroke:var(--ink);}
.thuake-box.tk-huong{fill:var(--green-soft);stroke:var(--green);}
.thuake-box.tk-mat{fill:var(--grey-soft);stroke:var(--text-muted);stroke-dasharray:5 4;}
.thuake-box.tk-solid{fill:var(--grey-soft);stroke:var(--ink-2);}
.thuake-box.tk-chuyentiep{fill:var(--gold-soft);stroke:var(--gold);}
.thuake-txt-ten{font-weight:600;font-size:12px;font-family:var(--sans);}
.thuake-txt-tt{font-size:9.5px;font-style:italic;font-family:var(--sans);}
.thuake-txt-tl{font-size:10.5px;font-weight:600;font-family:var(--mono);}
.thuake-t-goc{fill:#fff;}
.thuake-t-huong{fill:#1F3D2A;}
.thuake-t-mat{fill:var(--ink-2);}
.thuake-t-solid{fill:var(--ink-2);}
.thuake-t-chuyentiep{fill:#5C4212;}
.thuake-conn{stroke:var(--line);stroke-width:1.4;fill:none;}
.thuake-legend-text{fill:var(--text-muted);font-size:11px;font-family:var(--sans);}
.thuake-legend-title{fill:var(--text);font-size:11.5px;font-weight:600;}
.thuake-note{margin-top:10px;font-size:12.5px;color:var(--text-muted);line-height:1.6;}
.thuake-note b{color:var(--text);font-weight:600;}
.thuake-note div + div{margin-top:4px;}
.thuake-canhbao{border:1px solid #E9C46A;background:#FDF6E3;color:#7A5C00;border-radius:var(--radius);
    padding:8px 10px;font-size:13px;margin-bottom:10px;}
.thuake-canhbao div + div{margin-top:4px;}

.quick-rel{display:flex;gap:6px;flex-wrap:wrap;}

/* ===== Tab Tiến độ — quy trình 05 bước ===== */
/* Thanh 5 bước: mỗi bước lấy màu riêng qua biến --mau (đặt inline theo DM_Buoc.Mau). */
.tiendo-stepper{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;}
.tiendo-buoc{border:1px solid var(--line);border-top:4px solid var(--mau);border-radius:var(--radius);
    padding:10px 12px;background:#fff;}
.tiendo-buoc.chua{opacity:.5;}
.tiendo-buoc.dang{box-shadow:0 0 0 2px var(--mau) inset;}
.tiendo-buoc.xong{background:#F7FAF7;}
.tiendo-buoc-ten{font-weight:600;font-size:13.5px;line-height:1.3;}
.tiendo-buoc-so{font-size:12px;color:var(--text-muted);margin-top:3px;}
.tiendo-thanh{height:4px;border-radius:2px;background:var(--line-soft);margin-top:7px;overflow:hidden;}
.tiendo-thanh span{display:block;height:100%;background:var(--mau);}

.tiendo-den{display:inline-block;margin-left:8px;padding:2px 9px;border-radius:999px;
    font-size:12px;font-weight:600;}
.tiendo-den-vang{background:#FDF6E3;color:#7A5C00;border:1px solid #E9C46A;}
.tiendo-den-do{background:#FDF1F0;color:#8A2018;border:1px solid #E3A9A3;}

.tiendo-nhom .section-head h3{font-size:15px;}
.tiendo-dong{display:flex;gap:12px;align-items:flex-start;padding:10px 0;
    border-bottom:1px solid var(--line-soft);}
.tiendo-dong:last-child{border-bottom:0;}
.tiendo-dong.da-xong .tiendo-ten{color:var(--text-muted);}
.tiendo-dong.khong-ap-dung{opacity:.55;}
.tiendo-ma{width:38px;flex-shrink:0;font-family:var(--mono);font-size:12.5px;color:var(--text-muted);
    padding-top:2px;}
.tiendo-noidung{flex:1;min-width:0;}
.tiendo-ten{font-size:14px;line-height:1.45;}
.tiendo-nhan{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;font-size:11.5px;
    font-weight:600;vertical-align:middle;}
.tiendo-nhan-hop{background:#FDF1F0;color:#8A2018;border:1px solid #E3A9A3;}
.tiendo-nhan-kpi{background:#F5EDFA;color:#6B3E86;border:1px solid #D4BCE3;}
.tiendo-vanban{margin-top:6px;display:flex;flex-direction:column;gap:4px;}
.tiendo-vb{font-size:13px;color:var(--ink-2);}
.tiendo-vb em{color:var(--text-muted);font-style:italic;}
.tiendo-ketqua{margin-top:5px;font-size:12.5px;color:var(--text-muted);}
.tiendo-ghichu{margin-top:3px;color:var(--ink-2);white-space:pre-wrap;}
.tiendo-thaotac{flex-shrink:0;display:flex;gap:6px;align-items:center;}
.tiendo-form{display:flex;gap:6px;align-items:center;}
.tiendo-o-ghichu{width:210px;}
/* Tiêu đề bước bấm được để mở/thu gọn checklist của bước đó. */
.tiendo-nhom-dau{cursor:pointer;user-select:none;}

/* ---- Tài liệu đính kèm theo từng việc (tải lên bằng AJAX, xem tiendo.js) ---- */
.tiendo-file{margin-top:7px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.tiendo-file-ds{display:flex;flex-wrap:wrap;gap:6px;}
.tiendo-file-the{display:inline-flex;align-items:center;gap:4px;max-width:280px;
    padding:2px 4px 2px 2px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:12.5px;}
.tiendo-file-the a{display:inline-flex;align-items:center;gap:5px;min-width:0;
    color:var(--ink-2);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tiendo-file-the a:hover{text-decoration:underline;}
.tiendo-file-duoi{flex-shrink:0;padding:1px 6px;border-radius:999px;background:var(--grey-soft);
    font-size:11px;font-weight:600;text-transform:uppercase;color:#4B5563;}
.tiendo-file-xoa{flex-shrink:0;width:16px;height:16px;line-height:14px;padding:0;
    border:0;border-radius:50%;background:transparent;color:var(--text-muted);cursor:pointer;font-size:14px;}
.tiendo-file-xoa:hover{background:#FDF1F0;color:#8A2018;}
.tiendo-them-file{padding:2px 9px;font-size:12px;}
.tiendo-file-tienTrinh{display:inline-block;width:90px;height:4px;border-radius:2px;
    background:var(--line-soft);overflow:hidden;}
.tiendo-file-tienTrinh i{display:block;width:0;height:100%;background:var(--blue);transition:width .15s;}

/* Đang gọi server: khóa dòng lại để không bấm hai lần. */
.tiendo-dong.tiendo-dang-luu{opacity:.6;}
/* Kéo file thả thẳng vào dòng việc. */
.tiendo-dong.tiendo-keo-vao{background:var(--blue-soft);border-radius:var(--radius);
    box-shadow:0 0 0 2px var(--blue) inset;}

@media (max-width:1100px){
    .tiendo-stepper{grid-template-columns:repeat(2,1fr);}
    .tiendo-form,.tiendo-thaotac{flex-wrap:wrap;justify-content:flex-end;}
    .tiendo-o-ghichu{width:100%;}
}

/* ---------- NỘP MỘT CỬA & ĐƠN THƯ (bước 4) ---------- */
/* Cảnh báo quá hạn / đơn thư chưa được trả lời. Quy tắc sinh cảnh báo nằm ở
   NopMotCuaService — CSS chỉ lo màu. */
.canhbao{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;
  border:1px solid var(--line);border-left-width:4px;border-radius:var(--radius);
  padding:11px 14px;margin-bottom:10px;font-size:13.5px;
}
.canhbao strong{font-weight:600;}
.canhbao span{color:var(--text-muted);}
.canhbao-do{background:#FDF1F0;border-color:#E3A9A3;border-left-color:#B3261E;color:#8A2018;}
.canhbao-do span{color:#A5493F;}
.canhbao-vang{background:#FDF6E3;border-color:#E9C46A;border-left-color:#C9942F;color:#7A5C00;}
.canhbao-vang span{color:#8A6D1F;}
.canhbao-xanh{background:#EFF8F0;border-color:#A9D9AE;border-left-color:#2E7D32;color:#1E5C22;}
.canhbao-xanh span{color:#2E7D32;}
.canhbao-toi{margin-left:auto;font-size:13px;color:inherit;font-weight:600;white-space:nowrap;}

/* Chấm báo trên đầu tab — thấy được cảnh báo kể cả khi đang ở tab khác. */
.tab-cham{display:inline-block;width:7px;height:7px;border-radius:50%;margin-left:5px;vertical-align:middle;}
.tab-cham-do{background:#B3261E;}
.tab-cham-vang{background:var(--gold);}

.mc-lannop{border:1px solid var(--line);border-radius:var(--radius-lg);padding:14px 16px;margin-bottom:14px;background:#fff;}
.mc-lannop.qua-han{border-left:4px solid #B3261E;}
.mc-dau{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px;}
.mc-tieude{font-size:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.mc-nut{display:flex;gap:6px;flex-shrink:0;}
.mc-thongtin{margin-bottom:6px;}

.mc-donthu{margin-top:12px;border-top:1px dashed var(--line);padding-top:10px;}
.mc-donthu-dau{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;}
.mc-donthu-dau h4{margin:0;font-size:13.5px;font-weight:600;color:var(--ink-2);}
.mc-donthu-trong{font-size:13px;color:var(--text-muted);padding:6px 0;}
.mc-donthu-trong strong{color:#8A2018;}

.mc-don{border:1px solid var(--line-soft);border-radius:var(--radius);padding:10px 12px;margin-bottom:8px;background:var(--surface);}
.mc-don.da-tra-loi{background:#F7FAF7;}
.mc-don-dau{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13.5px;}
.mc-ngay{color:var(--text-muted);font-size:12.5px;}
.mc-don-nut{margin-left:auto;display:flex;gap:6px;}
.mc-don-meta{margin-top:4px;font-size:13px;color:var(--ink-2);}

.mc-file{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:7px;}
.mc-file-nhan{font-size:12px;color:var(--text-muted);min-width:104px;}
.mc-file-ds{display:flex;flex-wrap:wrap;gap:6px;}

/* Form nhập trong hộp thoại SweetAlert2 */
.mc-form{text-align:left;display:flex;flex-direction:column;gap:10px;}
.mc-o{display:flex;flex-direction:column;gap:4px;}
.mc-o>span{font-size:12.5px;color:var(--text-muted);}
.mc-o input,.mc-o select,.mc-o textarea{
  font-family:var(--sans);font-size:13.5px;padding:8px 10px;
  border:1px solid var(--line);border-radius:var(--radius);background:#fff;color:var(--text);
}
.mc-o textarea{resize:vertical;}

/* Ô quét OCR phiếu hẹn ở đầu hộp thoại "Thêm lần nộp" (mục 22 CLAUDE.md, 18/9/2026) — dòng
   trạng thái nhỏ ngay dưới ô chọn file, không tự tách khối riêng để không phá layout 1 cột. */
.mc-gh-trangthai{font-size:12.5px;color:var(--text-muted);margin:-4px 0 4px;min-height:14px;}

/* Bố cục 2 CỘT cho form nhiều ô (VD "Thêm công việc", 8 ô — chốt 14/9/2026). Modifier RIÊNG
   cho .mc-form, không sửa .mc-form gốc — các form ít ô hơn (nộp một cửa, chấm công…) vẫn giữ
   1 cột như cũ. Ô cần chiếm TRỌN cả 2 cột (tên việc, mô tả, gắn hồ sơ, kết quả) gắn thêm
   class "mc-o-full". */
.mc-form-2cot{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;}
.mc-form-2cot .mc-o-full{grid-column:1 / -1;}
@media (max-width:600px){
  .mc-form-2cot{grid-template-columns:1fr;}
}

/* ---------- VIỆC CỦA TÔI ---------- */
.cv-tomtat{display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap;}
.cv-so{flex:0 0 auto;min-width:120px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:12px 16px;}
.cv-so b{display:block;font-size:24px;font-family:var(--serif);color:var(--ink);line-height:1.1;}
.cv-so span{font-size:12.5px;color:var(--text-muted);}
.cv-so-do{border-color:#E3A9A3;background:#FDF1F0;}
.cv-so-do b{color:#8A2018;}

.cv-tick{flex-direction:row;gap:14px;align-items:center;flex-wrap:wrap;}
.cv-check{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--ink-2);cursor:pointer;}
.cv-check input{width:auto;min-width:0;}

.cv-nhom{border-left:4px solid var(--line);}
.cv-nhom-do{border-left-color:#B3261E;}
.cv-nhom-vang{border-left-color:var(--gold);}

.cv-viec{display:flex;gap:10px;align-items:flex-start;padding:10px 0;
  border-bottom:1px solid var(--line-soft);}
.cv-viec:last-child{border-bottom:0;}
.cv-viec.cv-khep{opacity:.55;}
/* Vạch màu độ ưu tiên bên trái — quét mắt là thấy việc gấp. */
.cv-uutien{flex-shrink:0;width:4px;align-self:stretch;border-radius:2px;background:var(--line);}
.cv-ut-gap{background:#B3261E;}
.cv-ut-cao{background:var(--gold);}
.cv-ut-binhthuong{background:var(--line);}
.cv-ut-thap{background:var(--line-soft);}

.cv-noidung{flex:1;min-width:0;}
.cv-ten{font-size:14px;line-height:1.5;display:flex;flex-wrap:wrap;align-items:center;gap:6px;}
.cv-mota{margin-top:3px;font-size:13px;color:var(--ink-2);white-space:pre-wrap;}
.cv-meta{margin-top:4px;font-size:12.5px;color:var(--text-muted);display:flex;flex-wrap:wrap;gap:5px;}
.cv-hoso{color:var(--blue);text-decoration:none;font-weight:500;}
.cv-hoso:hover{text-decoration:underline;}
.cv-ketqua{margin-top:4px;font-size:13px;color:#2A4C36;}
.cv-thaotac{flex-shrink:0;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;align-items:center;}
/* Ô chọn đổi trạng thái nhanh — dựng dáng NHƯ CHÍNH badge trạng thái (pill bo tròn), tô màu
   bằng đúng các class .badge-* đã có sẵn (badge-dangthuchien/badge-daxong/...) nên không phải
   bịa thêm bảng màu mới; .cv-select-tt chỉ thêm phần riêng của <select> (bỏ chrome mặc định
   của trình duyệt, thêm mũi tên xổ xuống, con trỏ tay). Khớp cỡ chữ 12px với .badge thường. */
.cv-select-tt{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  font-family:var(--sans);font-size:12.5px;font-weight:600;line-height:1.3;
  padding:4px 24px 4px 10px;border-radius:20px;cursor:pointer;
  background-repeat:no-repeat;background-position:right 8px center;background-size:9px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23555' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.cv-select-tt:hover{filter:brightness(0.95);}
.cv-select-tt:focus{outline:2px solid var(--ink);outline-offset:1px;}

/* Ô chọn hồ sơ (select2) — mỗi dòng 2 tầng: số+tên hồ sơ, rồi thửa đất + địa chỉ. */
.cv-hs-ten{font-size:13.5px;color:var(--text);}
.cv-hs-dc{font-size:12px;color:var(--text-muted);margin-top:1px;}

/* ---------- BÁO CÁO CÔNG VIỆC ---------- */
.bc-dau{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px;}
.bc-so{flex:1 1 130px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:12px 16px;}
.bc-so b{display:block;font-size:24px;font-family:var(--serif);color:var(--ink);line-height:1.1;}
.bc-so span{font-size:12.5px;color:var(--text-muted);}
.bc-so-do{border-color:#E3A9A3;background:#FDF1F0;}
.bc-so-do b{color:#8A2018;}
.bc-so-xanh{border-color:#A9C6B0;background:var(--green-soft);}
.bc-so-xanh b{color:#2A4C36;}

.bc-phan{margin-bottom:18px;}
.bc-phan h3{font-family:var(--serif);font-size:16px;margin:0 0 2px;color:var(--ink);}
.bc-phan .bc-dan{font-size:12.5px;color:var(--text-muted);margin-bottom:8px;}
.bc-trong{font-size:13px;color:var(--text-muted);font-style:italic;padding:4px 0;}

.bc-dong{display:flex;gap:8px;align-items:flex-start;padding:7px 0;
  border-bottom:1px solid var(--line-soft);font-size:13.5px;}
.bc-dong:last-child{border-bottom:0;}
.bc-cham{flex-shrink:0;width:6px;height:6px;border-radius:50%;margin-top:6px;background:var(--line);}
.bc-cham-xong{background:var(--green);}
.bc-cham-lam{background:var(--blue);}
.bc-cham-tre{background:#B3261E;}
.bc-cham-ke{background:var(--gold);}
.bc-noidung{flex:1;min-width:0;}
.bc-meta{font-size:12px;color:var(--text-muted);margin-top:2px;}
/* Mô tả / kết quả của dòng lấy từ công việc — pre-line giữ xuống dòng người dùng gõ. */
.bc-chitiet{font-size:12.5px;color:var(--text);margin-top:2px;white-space:pre-line;}
.bc-chitiet .bc-nhan{color:var(--text-muted);font-style:italic;}
.bc-gon .bc-chitiet{font-size:12px;}
.bc-nguon{display:inline-block;font-size:11.5px;padding:1px 6px;border-radius:999px;
  background:var(--grey-soft);color:#4B5563;margin-left:5px;}

/* Chế độ GỌN — thu nhỏ khoảng cách, ẩn bộ lọc/dòng giải thích/mục rỗng, để báo cáo vừa 1
   màn hình, tiện chụp ảnh gửi quản lý (9/9/2026). Khác với CSS in ấn bên dưới: cái này áp
   dụng NGAY TRÊN MÀN HÌNH (chụp ảnh trực tiếp), không cần bấm "In báo cáo". */
.bc-gon .filter-bar{display:none;}
.bc-gon .bc-dau{gap:6px;margin-bottom:10px;}
.bc-gon .bc-so{flex:1 1 88px;padding:8px 10px;}
.bc-gon .bc-so b{font-size:18px;}
.bc-gon .bc-so span{font-size:11px;}
.bc-gon .section{padding:10px 14px;margin-bottom:8px;}
.bc-gon .section-head{margin-bottom:6px;padding-bottom:6px;}
.bc-gon .bc-phan{margin-bottom:0;}
.bc-gon .bc-phan .bc-dan{display:none;}
/* Mục KHÔNG có dữ liệu ẩn hẳn ở chế độ gọn — báo cáo hành chính đầy đủ cần đủ mục (xem
   _PhanBaoCao.cshtml), nhưng ảnh chụp gửi nhanh thì mục rỗng chỉ chiếm chỗ vô ích. */
.bc-gon .bc-phan[data-trong="true"]{display:none;}
.bc-gon .bc-dong{padding:4px 0;gap:6px;font-size:13px;}
.bc-gon .bc-meta{font-size:11.5px;}

/* ---------- THỐNG KÊ HOẠT ĐỘNG (mục 21 CLAUDE.md) ---------- */
/* <details>/<summary> gốc để lồng Nhân viên → Hồ sơ → Việc, không cần JS thu/mở. */
.hd-nv{border:1px solid var(--line);border-radius:var(--radius-lg);margin-bottom:10px;
  background:var(--surface);overflow:hidden;}
.hd-nv summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:10px;
  padding:12px 16px;font-size:14px;}
.hd-nv summary::-webkit-details-marker{display:none;}
.hd-nv summary::before{content:"▸";display:inline-block;margin-right:2px;color:var(--text-muted);
  transition:transform .15s;}
.hd-nv[open] summary::before{transform:rotate(90deg);}
.hd-nv summary:hover{background:#F6F9FC;}
.hd-nv-noidung{padding:0 16px 12px;}
.hd-hoso{padding:8px 0;border-top:1px solid var(--line-soft);}
.hd-hoso:first-child{border-top:0;}
.hd-hoso-ten{font-size:13.5px;font-weight:600;margin-bottom:4px;}
.hd-nv table{margin:0;}
.hd-nv thead th{background:transparent;padding:8px 16px;}
.hd-nv tbody td{padding:9px 16px;}

/* Bản in: bỏ thanh bên, bộ lọc và nút — chỉ còn nội dung báo cáo. */
@media print {
  .sidebar, .topbar-actions, .filter-bar, .nut-thu-gon, .hs-toc { display:none !important; }
  .app { display:block; }
  .content { padding:0; }
  .bc-dong { break-inside:avoid; }
  a[href]:after { content:""; }
}

/* ---------- NHÂN SỰ: CHẤM CÔNG & LƯƠNG ---------- */
.chonky{display:inline-flex;gap:6px;}
.chonky select{font-family:var(--sans);font-size:13.5px;padding:8px 10px;border:1px solid var(--line);
  border-radius:var(--radius);background:#fff;color:var(--text);}

/* Lưới chấm công: 31 cột ngày nên bảng phải tự cuộn ngang, KHÔNG để tràn ra trang — nhờ vậy
   được TỰ DO nới rộng cột ngày mà không lo tràn trang (chốt 9/9/2026). */
.cc-cuon{overflow-x:auto;}
.cc-bang{border-collapse:collapse;font-size:12.5px;}
.cc-bang th,.cc-bang td{border:1px solid var(--line-soft);text-align:center;padding:0;}
.cc-bang thead th{background:var(--grey-soft);font-weight:600;height:36px;font-size:12px;color:var(--ink-2);}
/* Cột ngày TO HƠN (26→34px) để ô bấm đủ lớn, đỡ chấm nhầm sang người/ngày bên cạnh — đúng
   phàn nàn đã nhận (9/9/2026): cột Nhân viên quá to trong khi cột ngày quá bé. */
.cc-bang th.cc-ngay{width:34px;min-width:34px;}
/* Nhãn T7/CN dưới số ngày — chữ nhỏ, không cần hover mới biết là cuối tuần. */
.cc-thu{display:block;font-weight:500;font-size:9px;line-height:1;margin-top:2px;color:var(--text-muted);}
/* Chủ Nhật và Thứ Bảy PHẢI khác màu nhau và khác ngày thường — trước đây chỉ Chủ Nhật có
   màu, Thứ Bảy trông y hệt ngày thường nên rất dễ chấm nhầm khi cuộn nhanh (9/9/2026). */
.cc-bang th.cn,.cc-bang td.cn{background:#ECEFF4;}
.cc-bang th.t7,.cc-bang td.t7{background:var(--gold-soft);}
.cc-bang th.cc-ten,.cc-bang td.cc-ten{
  text-align:left;padding:5px 8px;width:88px;max-width:88px;position:sticky;left:0;z-index:2;
  background:#fff;border-right:2px solid var(--line);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;font-size:13px;
}
.cc-bang thead th.cc-ten{background:var(--grey-soft);z-index:3;}
/* Vằn xen kẽ theo dòng CHỈ ở cột Nhân viên + cột tổng — cột ngày có màu riêng theo trạng
   thái nên vằn ở đó không hiện ra được (span buổi phủ kín ô bằng nền riêng), vô ích. Vằn
   ở đây để mắt bám đúng dòng khi kéo ngang qua 31 cột ngày. */
.cc-bang tbody tr:nth-child(even) td.cc-ten,
.cc-bang tbody tr:nth-child(even) td.cc-tong{background:#F4F6F9;}
.cc-bang tbody tr td{border-bottom-color:var(--line);}
.cc-bang td.cc-o{width:34px;height:44px;font-weight:600;user-select:none;vertical-align:top;position:relative;}
/* Có ghi chú của quản lý: chấm XANH góc dưới-trái ô ngày (khác góc/màu với chấm đỏ "muộn"
   ở trên-phải mỗi nửa buổi, mục cc-nua.cc-muon — 2 việc độc lập, cần phân biệt được cùng lúc
   nếu 1 ngày vừa muộn vừa có ghi chú giải thích). Thêm 14/9/2026 — mục 13.6 CLAUDE.md. */
.cc-bang td.cc-o.co-ghichu::before{content:"";position:absolute;bottom:1px;left:1px;width:5px;height:5px;
  border-radius:50%;background:#2F5F8F;}
.cc-bang td.dang-luu{opacity:.4;}
.cc-bang th.cc-tong,.cc-bang td.cc-tong{width:38px;min-width:38px;font-weight:600;background:#F8FAFC;}
.cc-bang td.td-buoimuon.co-muon{color:#8A2018;background:#FDF1F0;}

/* Ô ngày chia ĐÔI: nửa trên buổi sáng, nửa dưới buổi chiều. Đường kẻ giữa phải nhạt hơn
   viền ô, nếu không nhìn xa sẽ tưởng là 2 ngày khác nhau. Cao hơn hẳn bản cũ (16→22px) để
   ngón tay/con trỏ bấm trúng đúng buổi, đúng dòng. */
.cc-nua{display:block;height:22px;line-height:22px;cursor:pointer;position:relative;font-size:12.5px;}
.cc-nua + .cc-nua{border-top:1px dotted var(--line-soft);}
.cc-nua:hover{outline:2px solid var(--ink-2);outline-offset:-2px;z-index:1;}
/* Đi muộn: chấm đỏ góc trên-phải. Dùng chấm chứ không đổi nền — nền đang mang nghĩa
   "trạng thái buổi", đổi nền là mất một trong hai thông tin. */
.cc-nua.cc-muon::after{content:"";position:absolute;top:1px;right:1px;width:5px;height:5px;
  border-radius:50%;background:#C5221F;}

.cc-thanhcheDo{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:10px;}
.cc-thanhcheDo .cc-nhan{font-size:13px;color:var(--ink-2);}
.cc-che-do{display:inline-flex;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
.cc-che-do .btn{border:0;border-radius:0;background:#fff;}
.cc-che-do .btn + .btn{border-left:1px solid var(--line);}
.cc-che-do .btn.dang-chon{background:var(--ink-2);color:#fff;}
.cc-cham-muon{display:inline-block;width:6px;height:6px;border-radius:50%;background:#C5221F;
  vertical-align:middle;}

/* Màu công — giữ đúng bảng màu hệ cũ (green / yellowgreen / gray / red).
   4 lớp cấp NGÀY vẫn giữ cho bảng lương và bản in; 3 lớp cấp BUỔI dùng cho lưới chấm công. */
.cc-cangay{background:var(--green-soft);color:#2A4C36;}
.cc-nuangay{background:var(--gold-soft);color:#8A5F14;}
.cc-nghicophep{background:var(--grey-soft);color:#4B5563;}
.cc-nghikhongphep{background:#FDF1F0;color:#8A2018;}
.cc-dilam{background:#fff;color:#2A4C36;}

.cc-chugiai{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:10px;font-size:13px;color:var(--ink-2);}
.cc-chu{display:inline-flex;align-items:center;gap:6px;}
.cc-chu i.cc-mau{width:22px;height:22px;line-height:22px;text-align:center;font-style:normal;
  font-weight:600;font-size:12.5px;border:1px solid var(--line-soft);border-radius:3px;position:relative;}
.cc-chu i.cc-mau.cc-muon::after{content:"";position:absolute;top:1px;right:1px;width:5px;height:5px;
  border-radius:50%;background:#C5221F;}
.cc-chu i.cc-mau.co-ghichu::after{content:"";position:absolute;bottom:1px;left:1px;width:5px;height:5px;
  border-radius:50%;background:#2F5F8F;}

/* ============================================================================
   TRANG CHỦ — bảng điều khiển
   ============================================================================ */

/* Dải chấm công hôm nay: mảnh, nằm trên cùng, luôn thấy mà không chiếm chỗ. */
.db-chamcong{display:flex;flex-wrap:wrap;align-items:center;gap:18px;
  border:1px solid var(--line);border-radius:var(--radius-lg);padding:12px 18px;
  background:#fff;margin-bottom:16px;box-shadow:var(--shadow-sm);}
.db-cc-chu{display:flex;flex-direction:column;line-height:1.3;}
.db-cc-chu span{font-size:12.5px;color:var(--text-muted);}
.db-cc-buoi{display:flex;align-items:baseline;gap:7px;}
.db-cc-nhan{font-size:13px;color:var(--text-muted);}
.db-cc-gio{font-size:19px;font-weight:600;font-variant-numeric:tabular-nums;}
.db-cc-chua{font-size:13.5px;color:var(--text-muted);font-style:italic;}
.db-cc-muon{font-size:13px;font-weight:600;color:#8A2018;}
.db-chamcong .btn{margin-left:auto;}

/* 4 ô số liệu. Cả ô là link — bấm số nào cũng phải đi tới được chỗ xử lý số đó. */
.db-luoi-o{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:18px;}
.db-o{display:flex;flex-direction:column;gap:2px;padding:15px 17px;text-decoration:none;color:inherit;
  border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff;
  box-shadow:var(--shadow-sm);transition:border-color .12s,box-shadow .12s,transform .12s;}
.db-o:hover{border-color:#94A6B8;box-shadow:var(--shadow);transform:translateY(-1px);}
.db-o-so{font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums;}
.db-o-nhan{font-size:13.5px;font-weight:500;}
.db-o-phu{font-size:12.5px;color:var(--text-muted);}
/* Chỉ tô màu khi con số THỰC SỰ cần chú ý — tô hết thì không còn gì nổi bật. */
.db-o-do{background:#FDF1F0;border-color:#E3A9A3;}
.db-o-do .db-o-so{color:#8A2018;}
.db-o-vang{background:#FDF6E3;border-color:#E9C46A;}
.db-o-vang .db-o-so{color:#7A5C00;}

.db-hai-cot{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:16px;align-items:start;}

/* Danh sách việc: mỗi dòng là 1 link tới đúng hồ sơ / đúng việc. */
.db-ds{display:flex;flex-direction:column;}
.db-dong{display:flex;align-items:center;gap:10px;padding:11px 12px;text-decoration:none;color:inherit;
  border-bottom:1px solid var(--line-soft);border-left:3px solid transparent;}
.db-dong:last-child{border-bottom:0;}
.db-dong:hover{background:var(--line-soft);}
.db-dong-do{border-left-color:#B3261E;}
.db-dong-vang{border-left-color:#C9942F;}
.db-dong-chu{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
.db-dong-chu strong{font-size:14px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.db-dong-phu{font-size:12.5px;color:var(--text-muted);}
.db-nhan-nguon{font-size:12px;color:var(--text-muted);background:var(--grey-soft);
  padding:2px 8px;border-radius:999px;white-space:nowrap;}

/* Phân bố hồ sơ theo 5 bước — thanh ngang, màu lấy từ DM_Buoc.Mau qua biến --mau. */
.db-buoc{display:flex;flex-direction:column;gap:8px;}
.db-buoc-dong{display:grid;grid-template-columns:190px 1fr 44px;align-items:center;gap:12px;
  text-decoration:none;color:inherit;padding:3px 2px;border-radius:var(--radius);}
.db-buoc-dong:hover{background:var(--line-soft);}
.db-buoc-ten{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.db-buoc-thanh{height:12px;background:var(--grey-soft);border-radius:999px;overflow:hidden;}
.db-buoc-day{display:block;height:100%;background:var(--mau,#4B5563);border-radius:999px;min-width:2px;}
.db-buoc-so{font-size:13.5px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums;}

@media (max-width:620px){
  .db-buoc-dong{grid-template-columns:120px 1fr 36px;}
  .db-chamcong .btn{margin-left:0;width:100%;}
}

/* Chấm công của tôi — 2 thẻ buổi to, bấm là chấm. Cố ý làm TO và ÍT CHỮ: đây là thao tác
   người dùng làm mỗi ngày 2 lần, phải bấm trúng ngay không cần đọc. */
.cct-hai-buoi{display:flex;flex-wrap:wrap;gap:16px;}
.cct-the{flex:1 1 260px;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:18px 20px;background:#fff;}
.cct-the.noi-bat{border-color:var(--ink);box-shadow:0 0 0 3px var(--line-soft);}
.cct-the.da-cham{background:#F7FAF7;border-color:var(--green);}
.cct-the-dau{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px;}
.cct-the-dau h3{margin:0;font-size:16px;}
.cct-chuan{font-size:12.5px;color:var(--text-muted);white-space:nowrap;}
.cct-gio{font-size:34px;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums;}
.cct-chua{font-size:20px;color:var(--text-muted);margin-bottom:12px;}
.cct-dunggio{color:#2A4C36;font-size:13.5px;margin-bottom:12px;}
.cct-muon{color:#8A2018;font-weight:600;font-size:13.5px;}
.cct-lydo{font-size:13px;color:var(--ink-2);margin-bottom:12px;}
.cct-lydo span{color:var(--text-muted);}
.cct-khoa{font-size:13px;color:var(--text-muted);border-top:1px dashed var(--line);
  padding-top:10px;margin-top:4px;}
.cct-the .btn{width:100%;margin-top:4px;}

/* Thống kê đi muộn */
.dm-bang{width:100%;border-collapse:collapse;font-size:13.5px;}
.dm-bang th,.dm-bang td{padding:8px 10px;border-bottom:1px solid var(--line-soft);text-align:left;}
.dm-bang thead th{background:var(--grey-soft);font-weight:600;font-size:12.5px;color:var(--ink-2);white-space:nowrap;}
.dm-bang td.so,.dm-bang th.so{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
.dm-bang tr.dm-nang td{background:#FDF1F0;}
.dm-chitiet{display:flex;flex-wrap:wrap;gap:6px;}
/* Mỗi buổi muộn: 2 dòng trong 1 "viên" — giờ vào ở trên, lý do ở dưới. Lý do luôn HIỆN SẴN
   (không chỉ trong tooltip) vì đây là dữ liệu quản lý cần đọc lướt để đánh giá tổng hợp. */
.dm-buoi{display:inline-flex;flex-direction:column;gap:1px;padding:4px 9px;border-radius:10px;
  font-size:12px;background:var(--grey-soft);color:var(--ink-2);max-width:230px;}
.dm-buoi-gio{white-space:nowrap;}
.dm-buoi-lydo{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.78;}
.dm-buoi.dm-buoi-nang{background:#FDF1F0;color:#8A2018;}
/* Buổi KHÔNG có lý do (quản lý chấm hộ) — viền đứt để phân biệt với buổi đã giải trình. */
.dm-buoi.dm-buoi-thieulydo{border:1px dashed var(--red);}
.dm-buoi-lydo.dm-thieu{color:var(--red);font-style:italic;opacity:1;}

/* Tổng hợp lý do đi muộn — thanh ngang theo số lần, cùng kiểu với biểu đồ phân bố bước
   trên trang chủ (.db-buoc*) để nhất quán trong toàn bộ hệ thống. */
.dm-lydo-list{display:flex;flex-direction:column;gap:8px;}
.dm-lydo-dong{display:grid;grid-template-columns:220px 1fr 64px;align-items:center;gap:12px;}
.dm-lydo-ten{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dm-lydo-thanh{height:12px;background:var(--grey-soft);border-radius:999px;overflow:hidden;}
.dm-lydo-day{display:block;height:100%;background:#4B5563;border-radius:999px;min-width:2px;}
.dm-lydo-so{font-size:13.5px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
.dm-lydo-canhbao .dm-lydo-ten{color:#8A2018;font-weight:600;}
.dm-lydo-canhbao .dm-lydo-day{background:#B3261E;}
@media (max-width:620px){
  .dm-lydo-dong{grid-template-columns:130px 1fr 52px;}
}

/* Bảng lương */
.bl-bang{width:100%;border-collapse:collapse;font-size:13.5px;}
.bl-bang th,.bl-bang td{padding:8px 10px;border-bottom:1px solid var(--line-soft);}
.bl-bang thead th{background:var(--grey-soft);font-weight:600;font-size:12.5px;color:var(--ink-2);white-space:nowrap;}
.bl-bang td.so,.bl-bang th.so{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
.bl-bang td.tong{background:#F7FAF7;}
.bl-bang td.canh-bao{color:#8A2018;font-weight:600;}
.bl-bang tfoot td{border-top:2px solid var(--line);background:var(--grey-soft);font-weight:600;}
.bl-chitiet td{padding-top:0;border-bottom:1px solid var(--line-soft);}
.bl-kt{display:inline-flex;align-items:center;gap:5px;margin:0 6px 4px 0;padding:2px 8px;
  border:1px solid var(--line);border-radius:999px;background:#fff;font-size:12.5px;}
.bl-kt em{color:var(--text-muted);font-style:normal;font-size:12px;}

.mc-ghichu{font-size:12.5px;color:var(--text-muted);line-height:1.5;}
.mc-o-ngang{flex-direction:row;align-items:center;gap:8px;}
.mc-o-ngang input{width:auto;}

/* Thẻ GƯƠNG ở tab Gia phả: người đã khai ở mục D, tại đây chỉ tick vai trò + khai quan hệ.
   Toàn bộ ô nhập thông tin người bị ẩn (class .nlq-nguoi) — mục D là nơi soạn thảo duy nhất. */
.nlq-badge{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;
    background:#EDF3EC;color:#2F5D3A;border:1px solid #C9DCC9;font-size:12px;font-weight:600;
    text-transform:none;letter-spacing:0;vertical-align:middle;}
.nlq-tomtat{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
    padding:8px 12px;margin-bottom:8px;border-radius:var(--radius);
    background:var(--surface-2);border:1px dashed var(--line);}
.nlq-tomtat-ten{font-size:14px;}
.nlq-tomtat-phu{font-size:13px;color:var(--text-muted);}

/* Mục E4 — 2 tab con (Nguồn gốc / Gia phả). Chỉ ẩn hiện bằng CSS, input vẫn được gửi lên. */
.e4-tabs{margin-bottom:12px;}
.e4-panel{display:none;}
.e4-panel.active{display:block;}

/* Mục D — mỗi chủ sử dụng nhập mới là 1 thẻ riêng, thêm/xóa được */
.csd-card{border:1px solid var(--line);border-radius:var(--radius-lg);padding:14px 16px;margin-bottom:12px;background:var(--surface-2);}
.csd-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.csd-card-title{font-size:13.5px;font-weight:600;color:var(--ink);}

.subblock{border:1px solid var(--line);border-radius:var(--radius-lg);padding:14px 16px;margin-top:12px;background:var(--surface-2);}
.subblock-title{font-size:13.5px;font-weight:600;color:var(--ink);margin:0 0 10px;}

.warn-line{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--green);background:var(--green-soft);border:1px solid transparent;padding:8px 12px;border-radius:var(--radius);margin-top:8px;}
.warn-line.over{color:var(--red);background:var(--red-soft);}
.warn-line::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0;}

.checkline{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink);cursor:pointer;margin:2px 0 4px;}
.checkline input{width:16px;height:16px;}

.heir-row{border:1px solid var(--line);border-radius:var(--radius);padding:12px;margin-bottom:10px;background:#fff;}
.heir-row .erow{padding:0;border:none;background:none;margin-bottom:8px;}
.heir-nested{margin-left:22px;margin-top:10px;padding-left:14px;border-left:2px solid var(--gold-soft);}
.heir-nested .heir-row{background:var(--surface-2);}
.collapse-toggle{font-size:12.5px;color:var(--ink-2);background:none;border:none;cursor:pointer;text-decoration:underline;padding:0;}

.upload-zone{border:1.5px dashed var(--line-strong);border-radius:var(--radius-lg);padding:28px;text-align:center;color:var(--text-muted);font-size:13.5px;background:var(--surface-2);margin-bottom:14px;cursor:pointer;}
.upload-zone strong{color:var(--ink-2);font-weight:600;}
.upload-zone.dragover{border-color:var(--gold);background:var(--gold-soft);}
.file-list .erow{background:#fff;}
.file-list select{max-width:180px;}

.action-bar{position:sticky;bottom:0;background:var(--surface);border-top:1px solid var(--line);padding:14px 22px;display:flex;justify-content:flex-end;gap:10px;margin:0 -22px -20px;border-radius:0 0 var(--radius-lg) var(--radius-lg);}
.action-bar.floating{margin:24px 0 0;border-radius:var(--radius-lg);border:1px solid var(--line);box-shadow:0 -4px 16px rgba(16,24,40,0.06);}

/* ============================================================
   FORM NHẬP HỒ SƠ — bố cục 6 mục A–F (làm lại 30/9/2026)
   Người dùng: "các block A–F phân biệt không rõ ràng, miên man khó hiểu". Trước đó 6 mục là 6
   thẻ trắng y hệt nhau cách nhau 16px, tiêu đề nhóm con cỡ chữ bằng nhãn ô.
   ⚠️ Mọi rule ở đây GÓI trong .hs-toc / .hs-form / .hs-sec: .section, .section-head,
   .subblock-title, .csd-card còn dùng ở trang Chi tiết, Việc của tôi, Trang chủ, Phiếu kiểm tra
   — sửa thẳng rule gốc là đổi giao diện cả những trang đó.
   ============================================================ */

/* MỖI MỤC MỘT MÀU (30/9/2026, người dùng: "mỗi mục 1 màu tiêu đề nhìn cho dễ"). Khai 1 lần
   theo data-muc — cả nút trên thanh mục lục lẫn chính mục đó cùng đọc bộ biến này, nên nhìn
   thanh mục lục là biết màu nào ứng với mục nào. 3 biến:
     --muc       màu chính: ô chữ cái (chữ trắng), viền trái, tiêu đề nhóm con, viền thẻ
     --muc-nhat  nền nhạt: dải đầu mục, ô chữ cái trên thanh mục lục
     --muc-dam   sắc đậm: chữ tiêu đề đặt trên nền nhạt
   Đã đo tương phản trong trình duyệt: chữ trắng trên --muc ≥ 4,92:1 (thấp nhất là E),
   --muc-dam trên --muc-nhat ≥ 6,7:1, mô tả xám trên --muc-nhat ≥ 4,9:1 — đều qua mức AA 4,5:1.
   ĐỎ cố ý KHÔNG dùng cho mục nào — đỏ đang mang nghĩa "Bắt buộc" và chấm "có lỗi".
   E đổi từ --gold (#C28A2C, chữ trắng chỉ 2,9:1) sang hổ phách tối hơn cho đủ tương phản. */
.hs-toc-item[data-muc="A"],.hs-sec[data-muc="A"]{--muc:#1F62A8;--muc-nhat:#EAF2FB;--muc-dam:#154A82;}  /* xanh dương — thông tin chung */
.hs-toc-item[data-muc="B"],.hs-sec[data-muc="B"]{--muc:#2E7650;--muc-nhat:#E8F5EC;--muc-dam:#1F5A3B;}  /* xanh lá — thửa đất */
.hs-toc-item[data-muc="C"],.hs-sec[data-muc="C"]{--muc:#6941C6;--muc-nhat:#F1ECFC;--muc-dam:#53309E;}  /* tím — giấy chứng nhận */
.hs-toc-item[data-muc="D"],.hs-sec[data-muc="D"]{--muc:#BE185D;--muc-nhat:#FCEBF3;--muc-dam:#9D174D;}  /* hồng đậm — chủ sử dụng */
.hs-toc-item[data-muc="E"],.hs-sec[data-muc="E"]{--muc:#A16207;--muc-nhat:#FDF3E1;--muc-dam:#7C4A03;}  /* hổ phách — theo loại hồ sơ */
.hs-toc-item[data-muc="F"],.hs-sec[data-muc="F"]{--muc:#475467;--muc-nhat:#EEF1F5;--muc-dam:#344054;}  /* xám xanh — file đính kèm */

/* Thanh mục lục dính: là con trực tiếp của <main> (nằm NGOÀI .content) để sticky có tác dụng
   suốt chiều dài trang; nối liền ngay dưới .topbar như một thanh công cụ thứ hai. */
.hs-toc{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:4px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
  background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);
  box-shadow:0 3px 10px rgba(16,24,40,.06);padding:8px 28px;
}
.hs-toc-item{
  display:inline-flex;align-items:center;gap:7px;flex-shrink:0;
  padding:5px 12px 5px 5px;border-radius:999px;border:1px solid transparent;
  font-size:13px;font-weight:600;color:var(--ink-2);text-decoration:none;white-space:nowrap;
  transition:background-color .12s,border-color .12s,color .12s;
}
.hs-toc-item:hover{background:var(--muc-nhat,var(--surface-2));border-color:var(--muc-nhat,var(--line));color:var(--muc-dam,var(--ink));}
.hs-toc-chu{
  width:22px;height:22px;border-radius:50%;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;background:var(--muc-nhat,var(--grey-soft));color:var(--muc-dam,var(--ink));
  box-shadow:inset 0 0 0 1px var(--muc,transparent);
}
.hs-toc-ten{max-width:220px;overflow:hidden;text-overflow:ellipsis;}
/* Mục đang xem: cả nút đổi sang màu của mục đó. */
.hs-toc-item.active{background:var(--muc,var(--ink));border-color:var(--muc,var(--ink));color:#fff;}
.hs-toc-item.active .hs-toc-chu{background:#fff;color:var(--muc-dam,var(--ink));box-shadow:none;}
.hs-toc-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--line-strong);}
.hs-toc-dot.co{background:var(--green);}
.hs-toc-dot.loi{background:var(--red);box-shadow:0 0 0 3px var(--red-soft);}
.hs-toc-item.active .hs-toc-dot{box-shadow:0 0 0 2px #fff;}
.hs-toc-chuthich{
  margin-left:auto;padding-left:14px;flex-shrink:0;white-space:nowrap;
  display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--text-muted);
}
.hs-toc-chuthich .hs-toc-dot{margin-left:8px;box-shadow:none;}
/* Màn hẹp: thanh vẫn cuộn ngang được (JS tự kéo mục đang sáng vào tầm nhìn) nhưng giấu vạch
   cuộn — vạch cuộn nằm dưới đáy thanh trông như lỗi vỡ khung. */
.hs-toc::-webkit-scrollbar{display:none;}
/* Chú thích màu chấm chỉ hiện khi đủ chỗ — đo ở 1366px (thanh bên mở) 6 mục đã chiếm ~890px,
   thêm chú thích 224px là tràn. Thiếu chú thích vẫn có tooltip "Mục B — còn trống" trên mỗi mục. */
@media (max-width:1499px){.hs-toc-chuthich{display:none;}}
@media (min-width:1400px){html.sidebar-thu-gon .hs-toc-chuthich{display:inline-flex;}}
@media (max-width:900px){.hs-toc{padding:8px 12px;}}

/* Mỗi mục: viền trái + DẢI ĐẦU MỤC tô màu của mục + ô chữ cái + tiêu đề + nhãn + 1 câu mô tả. */
.hs-form .hs-sec{margin-bottom:28px;border-left:4px solid var(--muc,var(--ink));scroll-margin-top:72px;}
/* Dải đầu mục kéo tràn ra sát viền mục (margin âm = đúng padding 20px 22px của .section).
   ⚠️ KHÔNG đặt overflow:hidden lên .section để cắt góc: danh sách gợi ý autocomplete
   (.ac-results, position:absolute) sẽ bị cắt cụt theo. Thay vào đó bo góc chính dải này theo
   bán kính TRONG của khung: ngang 10−4 (viền trái 4px) = 6px, dọc 10−1 = 9px.
   flex-wrap + tiêu đề tối thiểu 320px: không đủ chỗ thì NÚT (quét GCN/CCCD) rơi xuống dòng
   dưới, chứ không bóp tiêu đề còn vài chữ một dòng (đã đo ở 820px có thanh bên). Dùng bề rộng
   thật của mục thay cho @media vì thanh bên mở/thu làm bề rộng khả dụng lệch nhau ~180px. */
.hs-form .hs-sec-head{
  align-items:flex-start;justify-content:flex-start;flex-wrap:wrap;gap:10px 14px;
  margin:-20px -22px 20px;padding:16px 22px 14px;
  background:var(--muc-nhat,var(--surface-2));border-bottom:1px solid rgba(16,24,40,.07);
  border-radius:6px 9px 0 0 / 9px 9px 0 0;
}
.hs-sec-chu{
  width:34px;height:34px;border-radius:9px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--muc,var(--ink));color:#fff;font-size:17px;font-weight:700;line-height:1;
}
.hs-sec-tieude{flex:1 1 320px;min-width:0;}
.hs-form .hs-sec-tieude h3{font-size:17px;display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;line-height:1.35;color:var(--muc-dam,var(--ink));}
/* Nền trắng để nhãn vẫn tách khỏi dải màu nhạt phía sau (nền xám cũ gần trùng dải). */
.hs-sec-nhan{
  display:inline-block;padding:2px 9px;border-radius:999px;
  font-size:11.5px;font-weight:600;letter-spacing:0;line-height:1.5;
  background:#fff;color:var(--text-muted);border:1px solid rgba(16,24,40,.08);
}
.hs-sec-nhan.bat-buoc{background:var(--red-soft);color:var(--red);}
.hs-sec-mota{margin:4px 0 0;font-size:13px;line-height:1.5;color:var(--text-muted);}
.hs-sec-lienket{margin-left:6px;font-weight:600;color:var(--blue);text-decoration:none;white-space:nowrap;}
.hs-sec-lienket:hover{text-decoration:underline;}
.hs-sec-congcu{flex-shrink:0;align-self:center;display:flex;gap:8px;}
.hs-nut-phu{
  font-family:var(--sans);font-size:13px;font-weight:600;line-height:1.45;white-space:nowrap;
  padding:6px 12px;border:1px solid var(--line-strong);border-radius:var(--radius);
  background:#fff;color:var(--ink-2);cursor:pointer;transition:border-color .12s,background-color .12s;
}
.hs-nut-phu:hover{border-color:var(--blue);background:var(--blue-soft);color:var(--ink);}
.hs-nut-phu:disabled{opacity:.6;cursor:wait;}

/* Nhóm con trong 1 mục: tiêu đề IN HOA nhỏ theo MÀU CỦA MỤC + đường kẻ kéo dài — phải khác
   hẳn nhãn ô nhập (13px, đậm, xanh than) thì mắt mới tách được nhóm. .subblock-title cũ bên
   trong form (E2, E4) cũng khoác kiểu này. */
.hs-form .hs-nhom + .hs-nhom{margin-top:26px;}
.hs-nhom-tieude,
.hs-form .subblock-title{
  display:flex;align-items:center;gap:10px;margin:0 0 12px;
  font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muc,var(--blue));
}
.hs-nhom-tieude::after,
.hs-form .subblock-title::after{content:"";flex:1;height:1px;background:var(--line);}

/* Thẻ lặp (chủ sử dụng, bên nhận, người liên quan, thửa con): nền trắng + viền trái theo màu
   của mục chứa nó + bóng nhẹ để nổi khỏi nền mục. Trong thẻ chia nhóm nhỏ bằng .hs-the-nhom. */
.hs-form .csd-card{background:#fff;border-left:3px solid var(--muc,var(--blue));box-shadow:var(--shadow-sm);padding:14px 18px 16px;}
.hs-form .csd-card-head{margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--line-soft);}
.hs-form .csd-card-title{font-size:14px;font-weight:700;}
.hs-the-nhom,
.hs-form .csd-card .subblock-title{
  display:block;margin:14px 0 8px;padding-top:12px;border-top:1px dashed var(--line);
  font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);
}
.hs-form .csd-card .subblock-title::after{display:none;}
/* Nhóm ĐẦU của thẻ nằm ngay dưới đầu thẻ (có thể xen 1 input hidden) — không kẻ thêm vạch. */
.csd-card-head + .hs-the-nhom,
.csd-card-head + input + .hs-the-nhom{margin-top:0;padding-top:0;border-top:none;}

/* Lưới 4 cột cho những cụm đúng 4 ô (giấy tờ tùy thân, địa chỉ thường trú) — trước đây nhét
   vào lưới 3 cột nên ô thứ 4 rơi lạc xuống một hàng riêng. */
.hs-grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 18px;}
@media (max-width:1200px){.hs-grid-4{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:900px){.hs-grid-4{grid-template-columns:1fr;}}

/* ---------- DETAIL VIEW ---------- */
.detail-header{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px 22px;margin-bottom:18px;box-shadow:var(--shadow-sm);}
.detail-header-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;}
.detail-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px;}
.detail-title .mono{font-size:16.5px;font-weight:700;color:var(--ink);}
.detail-meta{display:flex;gap:24px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--line-soft);}
.detail-meta div{font-size:13px;}
.detail-meta .k{color:var(--text-muted);margin-bottom:2px;}
.detail-meta .v{color:var(--text);font-weight:600;}

.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:18px;flex-wrap:wrap;}
/* margin-bottom:-1px để vạch của tab đang chọn ĐÈ lên đường kẻ chung, không nằm lơ lửng trên. */
.tab{padding:10px 16px;margin-bottom:-1px;font-size:14px;color:var(--text-muted);cursor:pointer;border-bottom:2.5px solid transparent;font-weight:500;background:none;border-top:none;border-left:none;border-right:none;font-family:var(--sans);transition:color .12s,border-color .12s;}
.tab:hover{color:var(--ink);border-bottom-color:var(--line-strong);}
.tab.active{color:var(--ink);border-bottom-color:var(--ink);font-weight:700;}
.tabpanel{display:none;}
.tabpanel.active{display:block;}

.kv-table{width:100%;border-collapse:collapse;}
.kv-table td{padding:9px 4px;font-size:14px;border-bottom:1px solid var(--line-soft);}
.kv-table td:first-child{color:var(--text-muted);width:220px;}
.kv-table td:last-child{color:var(--text);font-weight:500;}

.doc-card{display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px solid var(--line);border-radius:var(--radius-lg);padding:12px 14px;margin-bottom:8px;background:#fff;}
.doc-card .name{font-weight:600;font-size:14px;color:var(--ink);}
.doc-card .meta{font-size:12.5px;color:var(--text-muted);margin-top:2px;}
.doc-card .doc-ngay{color:var(--ink-2);font-weight:500;font-variant-numeric:tabular-nums;}

.log-item{display:flex;gap:14px;padding:11px 0;border-bottom:1px solid var(--line-soft);font-size:13.5px;}
.log-item .when{width:130px;flex-shrink:0;color:var(--text-muted);font-size:12.5px;}
.log-item .who{font-weight:600;color:var(--ink-2);}
/* Giá trị cũ mờ + gạch ngang, giá trị mới đậm — liếc qua là thấy đổi từ gì sang gì. */
.log-item .log-cu{color:var(--text-muted);text-decoration:line-through;}
.log-item .log-moi{font-weight:600;}

.empty-state{text-align:center;padding:48px 20px;color:var(--text-muted);background:var(--surface);border:1.5px dashed var(--line-strong);border-radius:var(--radius-lg);font-size:13.5px;}

.alert-banner{border-radius:var(--radius);padding:12px 16px;margin-bottom:16px;font-size:14px;font-weight:500;border:1px solid transparent;border-left-width:4px;}
.alert-info{background:var(--blue-soft);color:#174B80;border-color:#C9DCF1;border-left-color:var(--blue);}
.alert-warn{background:var(--gold-soft);color:#7D5410;border-color:#F0DDB5;border-left-color:var(--gold);}

/* ============================================================================
   ĐO VẼ — tab trong trang Chi tiết hồ sơ (mục 16)
   ============================================================================ */

/* Thanh tiến độ 7 bước */
.dove-thanh{height:8px;background:var(--grey-soft);border-radius:999px;overflow:hidden;}
.dove-thanh span{display:block;height:100%;background:var(--green);border-radius:999px;
  transition:width .25s;}

/* Khối thông tin chung — lưới 2 cột, ô dài thì chiếm trọn hàng. */
.dove-luoi{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px 16px;}
.dove-luoi .dove-rong{grid-column:1/-1;}
.dove-luoi .dove-rong2{grid-column:1/-1;}
.dove-thaotac-luu{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}

/* Bảng so sánh diện tích */
.dove-bang{width:100%;border-collapse:collapse;font-size:13.5px;}
.dove-bang th,.dove-bang td{padding:8px 10px;border-bottom:1px solid var(--line-soft);text-align:left;}
.dove-bang thead th{background:var(--grey-soft);font-weight:600;font-size:12.5px;color:var(--ink-2);white-space:nowrap;}
.dove-bang td.so,.dove-bang th.so{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
/* Lệch diện tích tô nền nhạt — đây là thứ người đo vẽ cần thấy ngay. */
.dove-bang tr.dove-lech td{background:#FDF6E3;}
.dove-phantram{font-size:12px;color:var(--text-muted);margin-left:4px;}
.dove-canhbao-lech{color:#8A5F14;margin-top:8px;}

/* Một bước trong checklist 7 bước */
.dove-buoc{border:1px solid var(--line);border-radius:var(--radius-lg);margin-bottom:10px;background:#fff;}
.dove-buoc.dang-lam{border-color:var(--ink);box-shadow:0 0 0 3px var(--line-soft);}
.dove-buoc.da-xong{background:#F7FAF7;}
.dove-buoc.khong-ap-dung{opacity:.65;}
.dove-buoc.dang-luu{opacity:.5;}

.dove-buoc-dau{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;}
.dove-buoc-dau:hover{background:var(--line-soft);}
.dove-ma{flex-shrink:0;font-weight:600;font-size:13px;color:var(--ink-2);
  background:var(--grey-soft);border-radius:var(--radius);padding:2px 8px;}
.dove-ten{flex:1;font-size:14px;font-weight:500;}
.dove-tinhtrang{font-size:12.5px;color:var(--text-muted);white-space:nowrap;}
.dove-nhan-dang{display:inline-block;font-size:11.5px;padding:1px 7px;border-radius:999px;
  background:var(--blue-soft);color:#204765;margin-left:6px;}
.dove-nhan-viec{display:inline-block;font-size:11.5px;padding:1px 7px;border-radius:999px;
  background:var(--gold-soft);color:#8A5F14;margin-left:6px;}

/* Tài liệu của bước — luôn hiện ngay dưới tiêu đề, không nằm trong phần thu gọn. */
.dove-buoc-file.tiendo-file{margin-top:0;padding:0 14px 10px;}
.dove-buoc.dove-keo-vao{border-color:var(--blue);box-shadow:0 0 0 2px var(--blue) inset;
  background:var(--blue-soft);}

.dove-buoc-than{padding:0 14px 14px;border-top:1px solid var(--line-soft);}

/* Yêu cầu / Nhiệm vụ — 2 cột, đọc từ DM_HoatDong chứ không cứng trong view như hệ cũ. */
.dove-huongdan{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;
  margin:12px 0;}
.dove-cot h4{margin:0 0 4px;font-size:12.5px;text-transform:uppercase;letter-spacing:.4px;
  color:var(--text-muted);font-weight:600;}
.dove-cot ul{margin:0;padding-left:18px;font-size:13px;line-height:1.6;}

/* Việc đã giao cho bước */
.dove-viec{margin-top:12px;border-top:1px dashed var(--line);padding-top:10px;}
.dove-viec-dau{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px;}
.dove-viec-ds{margin:0;padding:0;list-style:none;}
.dove-viec-ds li{padding:5px 0;border-bottom:1px solid var(--line-soft);font-size:13px;}
.dove-viec-ds li:last-child{border-bottom:0;}
.dove-viec-ds li.xong .dove-viec-ten{text-decoration:line-through;color:var(--text-muted);}
.dove-viec-ten{font-weight:500;}
.dove-viec-meta{display:block;font-size:12px;color:var(--text-muted);margin-top:1px;}
.dove-tre{color:#8A2018;font-weight:600;margin-left:5px;}

.dove-thaotac{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px;}
.dove-ghichu-hien{margin-top:8px;font-size:13px;color:var(--ink-2);
  background:var(--grey-soft);border-radius:var(--radius);padding:6px 10px;}

/* ---------- Chủ sử dụng đất ở tab Tổng quan (bổ sung CCCD + thường trú) ---------- */
.csd-ds{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px;}
.csd-the{border:1px solid var(--line);border-radius:var(--radius-lg);padding:12px 14px;background:#fff;}
.csd-dau{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-bottom:8px;font-size:14px;}
.csd-nhan{font-size:11.5px;padding:1px 7px;border-radius:999px;background:var(--green-soft);color:#2A4C36;}
.csd-nhan.csd-nhan-ho{background:var(--blue-soft);color:#204765;}
.csd-dong{display:flex;gap:8px;font-size:13px;line-height:1.5;margin-top:3px;}
.csd-nhan-o{flex-shrink:0;width:76px;color:var(--text-muted);}
.csd-phu{color:var(--ink-2);}
/* Thiếu dữ liệu thì nói thẳng "chưa khai" — ô trống trơn khiến người dùng tưởng lỗi hiển thị. */
.csd-thieu{color:var(--text-muted);}

/* ============================================================================
   TRANG KHÔNG ĐĂNG NHẬP & TRANG TÀI KHOẢN (29/9/2026)
   ============================================================================ */

/* Khách (chưa đăng nhập): _Layout KHÔNG vẽ thanh bên — mọi mục menu đều đòi đăng nhập, hiện
   ra chỉ để bấm vào rồi bị đá về trang đăng nhập. */
.app-khach .main{align-items:stretch;}

/* Trang đăng nhập: 1 thẻ giữa màn hình. */
.dn-trang{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px 16px;
  background:radial-gradient(1200px 600px at 10% -10%,#DCE8F4 0%,transparent 60%),
             radial-gradient(900px 500px at 110% 110%,#F3E6CC 0%,transparent 55%),var(--paper);}
.dn-the{width:100%;max-width:420px;background:var(--surface);border:1px solid var(--line);
  border-radius:16px;box-shadow:var(--shadow-lg);padding:32px 32px 28px;}
.dn-thuonghieu{display:flex;align-items:center;gap:12px;margin-bottom:26px;}
.dn-thuonghieu .brand-mark{background:var(--ink);border-color:var(--ink);}
.dn-thuonghieu .brand-mark::before,.dn-thuonghieu .brand-mark::after{background:#E8C98F;}
.dn-thuonghieu strong{display:block;font-size:17px;font-weight:700;color:var(--ink);line-height:1.2;}
.dn-thuonghieu span{display:block;font-size:12.5px;color:var(--text-muted);}
.dn-the h2{font-size:22px;margin:0 0 4px;letter-spacing:-.015em;}
.dn-phu{color:var(--text-muted);font-size:13.5px;margin:0 0 20px;}
.dn-the .form-label{font-weight:600;font-size:13px;color:var(--ink-2);margin-bottom:6px;}
.dn-the .btn-primary{width:100%;--bs-btn-padding-y:10px;--bs-btn-font-size:14.5px;margin-top:6px;}
.dn-the .field-validation-error{display:block;font-size:12.5px;margin-top:4px;}
.dn-chan{margin-top:22px;padding-top:16px;border-top:1px solid var(--line-soft);font-size:12.5px;color:var(--text-muted);text-align:center;}

/* Trang mẫu ASP.NET (quên mật khẩu, 2 lớp xác thực...) chưa dựng lại theo topbar/content:
   chúng render thẳng <main> vào .main — cho lề và bề ngang dễ đọc thay vì dính mép trái. */
.main > main{padding:28px 28px 60px;max-width:880px;}
.main > main > h2{margin-bottom:16px;}

/* Component Bootstrap còn dùng ở các trang Tài khoản — cùng tông với ô nhập tự viết. */
/* Nền TRẮNG tường minh: Bootstrap lấy nền ô nhập từ --bs-body-bg, mà biến đó đã đặt = màu nền
   trang (xám) ở :root -> ô nhập bị xám như đang khóa. */
.form-control,.form-select{background-color:#fff;border-color:var(--line-strong);font-size:14px;padding:8px 11px;line-height:1.45;}
.form-check-input{background-color:#fff;border-color:#98A6B5;}
.form-control:focus,.form-select:focus{background-color:#fff;border-color:var(--blue);box-shadow:0 0 0 3px var(--focus);}
/* Ô lỗi (jquery.validate gắn .input-validation-error) — phải đặt SAU .form-control, không thì
   nền trắng/viền xám của .form-control đè mất màu báo lỗi. */
.form-control.input-validation-error,.form-select.input-validation-error{border-color:var(--red);background-color:var(--red-soft);}
.form-control.input-validation-error:focus{box-shadow:0 0 0 3px rgba(180,35,24,.2);}
.form-check-input:checked{background-color:var(--ink);border-color:var(--ink);}
.form-check-input:focus{box-shadow:0 0 0 3px var(--focus);border-color:var(--blue);}
.form-check-label{cursor:pointer;}
.table{--bs-table-bg:var(--surface);--bs-table-hover-bg:#F6F9FC;}

/* Trang Tài khoản của tôi (Manage/Index). */
.tk-dong{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line-soft);flex-wrap:wrap;}
.tk-dong:last-child{border-bottom:0;padding-bottom:0;}
.tk-dong:first-child{padding-top:0;}
.tk-nhan{font-weight:600;color:var(--ink);}
.tk-phu{font-size:12.5px;color:var(--text-muted);margin-top:2px;}
.tk-form{max-width:460px;display:flex;flex-direction:column;gap:14px;}

@media print{
  .sidebar{position:static;height:auto;}
  .topbar,.section,.table-wrap,.filter-bar,.detail-header{box-shadow:none;}
}

/* ---------- ĐƠN XIN NGHỈ (NhanSu/DonXinNghi, docs/25) ---------- */
/* Số đơn đang chờ cạnh mục menu. Thanh bên thu gọn (chỉ còn icon) thì thành chấm số góc icon. */
.mi-dem{
  margin-left:auto;flex-shrink:0;min-width:20px;height:20px;padding:0 6px;border-radius:999px;
  background:var(--red);color:#fff;font-size:11.5px;font-weight:700;line-height:20px;text-align:center;
}
html.sidebar-thu-gon .mi-dem{position:absolute;top:2px;right:4px;min-width:16px;height:16px;line-height:16px;padding:0 4px;font-size:10px;}
/* Bảng có nhãn trạng thái (white-space:nowrap) → table-layout:fixed, cột quy về % đủ 100%
   (CLAUDE.md 4.10 — auto-layout bóp cột chữ thường về gần 0). */
.dxn-bang{table-layout:fixed;}
.dxn-bang td{vertical-align:top;}
.dxn-lydo{overflow-wrap:anywhere;}
.dxn-ghichu{margin-top:4px;font-size:12.5px;color:var(--text-muted);}
.dxn-xuly{display:flex;flex-wrap:wrap;gap:6px;}
.dxn-ketqua{display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:var(--text-muted);}
.dxn-nhan{
  display:inline-block;white-space:nowrap;font-size:12.5px;font-weight:600;
  padding:2px 9px;border-radius:999px;border:1px solid transparent;
}
.dxn-nhan-ChoDuyet{background:var(--gold-soft);color:#7D5410;border-color:#F0DDB5;}
.dxn-nhan-DaDuyet{background:var(--green-soft);color:#1F5A3B;border-color:#C3E3CF;}
.dxn-nhan-TuChoi{background:var(--red-soft);color:#8F1D14;border-color:#F4C7C1;}
.dxn-nhan-DaHuy{background:var(--grey-soft);color:#4B5563;border-color:var(--line);}
.dxn-caiapp{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap;}
.dxn-qr{width:168px;height:168px;border:1px solid var(--line);border-radius:var(--radius);padding:6px;background:#fff;image-rendering:pixelated;}
.dxn-huongdan{flex:1;min-width:260px;font-size:13.5px;}
.dxn-huongdan ol{margin:0;padding-left:20px;}
.dxn-huongdan li{margin-bottom:6px;}
.dxn-link{margin:0 0 10px;font-weight:600;overflow-wrap:anywhere;}

/* Ô ngày hiển thị dd/mm/yyyy (Scripts/ngay-thang.js + flatpickr, 30/9/2026 — docs/24). Ô hiển
   thị .nt-ngay là type=text nên tự ăn kiểu ô nhập chung của .form-field/.erow/.mc-o/.field; ở đây
   chỉ thêm biểu tượng lịch. Phải đứng CUỐI file: cùng độ ưu tiên (0,1,1) với ".form-field input"
   (khai background:#fff, xóa mất background-image) nên chỉ thắng nhờ đứng sau. */
input.nt-ngay{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398A2B3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:15px 15px;padding-right:32px;
}
.flatpickr-calendar{font-family:var(--sans);}
.flatpickr-day.selected,.flatpickr-day.selected:hover{background:var(--blue);border-color:var(--blue);}