:root {
  --bg: #f0f4f8; --s1: #fff; --s2: #f8fafc; --border: #e2e8f0;
  --text: #0f172a; --muted: #64748b; --primary: #1d4ed8;
  --green: #059669; --blue: #2563eb; --yellow: #d97706; --red: #dc2626; --gray: #475569;
}
* { box-sizing: border-box; }
body { font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; background: var(--bg); color: var(--text); margin: 0; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.hdr { background: linear-gradient(135deg, #0995cb, #12bcf3); color: #fff; padding: 10px 20px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.hdr h1 { font-size: 17px; margin: 0; }
.hdr .user { font-size: 12.5px; opacity: .9; }

/* Menu điều hướng — 1 nút gộp + panel thả xuống (details/summary, không cần JS), thống nhất giữa
   trang này và dashboard tổng hợp (web/static/dashboard/index.html dùng cùng class .nav-menu/
   .nav-dropdown ở <style> riêng của nó) thay vì dàn hàng ngang từng link — gọn và tự scale trên
   điện thoại/tablet vì luôn chỉ là 1 nút bất kể màn hình rộng hay hẹp. */
.nav-menu { position: relative; flex-shrink: 0; list-style: none; }
.nav-menu summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 7px 14px; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3); border-radius: 8px; color: #fff; font-weight: 700; font-size: 13.5px; user-select: none; white-space: nowrap; }
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary:hover { background: rgba(255,255,255,.25); }
.nav-menu[open] summary { background: rgba(255,255,255,.3); }
.nav-dropdown { position: absolute; top: calc(100% + 6px); right: 0; background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.18); padding: 6px; min-width: 190px; max-width: calc(100vw - 24px); z-index: 1100; display: flex; flex-direction: column; gap: 2px; }
.nav-dropdown a { color: var(--text); padding: 9px 12px; border-radius: 7px; font-size: 13.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.nav-dropdown a:hover { background: var(--s2); text-decoration: none; }

.wrap { max-width: 1800px; margin: 18px auto; padding: 0 16px; }
@media (max-width: 600px) { .wrap { margin: 10px auto; padding: 0 8px; } .card { padding: 10px; } .hdr { padding: 10px 12px; } }

.card { background: var(--s1); border: 1px solid var(--border); border-radius: 10px; padding: 16px; margin-bottom: 16px; }
.card h2, .card h3 { margin-top: 0; }

.grid { display: grid; gap: 10px; }
.grid-7 { grid-template-columns: repeat(7, 1fr); }
.grid-8 { grid-template-columns: repeat(8, 1fr); }
.grid-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .grid-7, .grid-8 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .grid-7, .grid-2, .grid-8 { grid-template-columns: 1fr 1fr; } }

.kcard { background: var(--s2); border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; }
.kcard .num { font-size: 22px; font-weight: 800; line-height: 1; }
.kcard .lbl { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.kcard .pct { font-size: 12px; font-weight: 700; }

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th { text-align: left; font-size: 11px; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--border); padding: 8px 10px; }
td { padding: 7px 10px; border-bottom: 1px solid #f1f5f9; }
tr:hover td { background: #eff6ff; }
.tc { text-align: center; }
.nowrap { white-space: nowrap; }

.badge { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 11.5px; font-weight: 700; }
.badge-g { background: #d1fae5; color: #065f46; }
.badge-b { background: #dbeafe; color: #1e40af; }
.badge-y { background: #fef3c7; color: #92400e; }
.badge-r { background: #fee2e2; color: #991b1b; }
.badge-gray { background: #f1f5f9; color: #475569; }
.badge-o { background: #ffedd5; color: #9a3412; }

.form-row { margin-bottom: 12px; }
.form-row label { display: block; font-size: 12.5px; font-weight: 700; color: var(--muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .3px; }
.form-row input, .form-row select, .form-row textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 7px; font-size: 14px; font-family: inherit; background: var(--s2); color: var(--text);
}
.form-row textarea { min-height: 70px; resize: vertical; }
.form-row input:disabled, .form-row select:disabled, .form-row textarea:disabled { background: #f1f5f9; color: var(--muted); }

/* ══ Lịch chọn ngày tự viết (datepicker.js) ═══════════════════════════════════
   Thay <input type="date"> gốc — định dạng hiển thị của input ngày gốc theo Region/Locale máy
   người dùng (mm/dd/yyyy trên máy để tiếng Anh Mỹ), lang="vi-VN" không ép được (Chrome/Edge bỏ
   qua lang cho input ngày) nên không thể đồng bộ dd/mm/yyyy như phần còn lại của hệ thống bằng
   CSS/HTML thường — phải tự vẽ lịch bằng JS mới kiểm soát được định dạng hiển thị. */
.dp-wrap { position: relative; }
.dp-wrap .dp-display { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2364748b' stroke-width='1.6'%3E%3Crect x='2' y='3' width='12' height='11' rx='1.5'/%3E%3Cpath d='M2 6.5h12M5 1.5v3M11 1.5v3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 32px; }
.dp-wrap .dp-clear {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  border: none; background: none; color: var(--muted); font-size: 13px; line-height: 1;
  cursor: pointer; padding: 4px; display: none;
}
.dp-wrap .dp-display:not(:placeholder-shown) ~ .dp-clear { display: block; }
.dp-wrap .dp-display:not(:placeholder-shown) { padding-right: 54px; }
.dp-wrap.dp-open .dp-display { border-color: var(--primary); }

.dp-popup {
  display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 3000;
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,.18); padding: 10px; width: 268px; max-width: calc(100vw - 24px);
}
.dp-wrap.dp-open .dp-popup { display: block; }
.dp-head { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-bottom: 8px; }
.dp-nav { border: 1px solid var(--border); background: var(--s2); border-radius: 6px; width: 28px; height: 28px; font-size: 15px; cursor: pointer; flex-shrink: 0; }
.dp-nav:hover { background: #eef2f7; }
.dp-monthyear { display: flex; gap: 4px; min-width: 0; }
.dp-monthyear select { border: 1px solid var(--border); border-radius: 6px; background: var(--s2); font-size: 12.5px; padding: 3px 2px; font-family: inherit; }
.dp-weekdays { display: grid; grid-template-columns: repeat(7,1fr); text-align: center; font-size: 10.5px; font-weight: 700; color: var(--muted); margin-bottom: 3px; }
.dp-days { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; }
.dp-day { border: none; background: none; padding: 6px 0; font-size: 12.5px; border-radius: 6px; cursor: pointer; color: var(--text); }
.dp-day:hover { background: var(--s2); }
.dp-day.dp-other { color: #cbd5e1; }
.dp-day.dp-today { font-weight: 800; color: var(--primary); }
.dp-day.dp-selected { background: var(--primary); color: #fff; font-weight: 700; }
.dp-foot { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid #f1f5f9; }
.dp-foot button { border: none; background: none; color: var(--primary); font-size: 12px; font-weight: 700; cursor: pointer; padding: 4px 6px; }
.dp-foot .dp-clear-popup { color: var(--red); }
.form-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 700px) { .form-grid2 { grid-template-columns: 1fr; } }

.btn { display: inline-block; padding: 8px 16px; border-radius: 7px; border: none; font-weight: 700; font-size: 13.5px; cursor: pointer; font-family: inherit; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { opacity: .88; text-decoration: none; }
.btn-danger { background: #fff; color: var(--red); border: 1px solid #fecaca; }
.btn-outline { background: #fff; color: var(--text); border: 1px solid var(--border); }

.alert { padding: 10px 14px; border-radius: 8px; font-size: 13.5px; margin-bottom: 14px; }
.alert-err { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
/* .alert-ok tự mờ dần rồi ẩn sau ~4 giây (layout.html gắn .fade-out rồi gỡ khỏi DOM khi transition
   xong); .alert-err KHÔNG tự ẩn — lỗi phải đọc được đến khi người dùng xử lý. */
.alert-ok { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; transition: opacity .6s ease, max-height .6s ease, padding .6s ease, margin-bottom .6s ease; max-height: 200px; overflow: hidden; }
.alert-ok.fade-out { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; margin-bottom: 0; }

.filter-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 14px; }
.filter-bar .form-row { margin-bottom: 0; min-width: 140px; }
.filter-bar .form-row input, .filter-bar .form-row select { height: 36px; }
.filter-bar > .btn { height: 36px; }
/* Dưới 560px: chuyển sang lưới 2 cột thật (CSS grid) thay vì flex-wrap — flex-wrap chỉ đảm bảo
   cùng MÉP DƯỚI của toàn dòng, không đảm bảo 2 ô cạnh nhau cao bằng nhau khi nhãn 1 ô dài hơn
   ô kia (xuống 2 dòng ở màn hình hẹp) khiến ô input bị lệch. Grid tự co dòng theo ô cao nhất +
   align-items:stretch làm mỗi .form-row cao bằng nhau, rồi margin-top:auto đẩy input luôn xuống
   sát đáy ô — input 2 cột cạnh nhau luôn ngang hàng bất kể nhãn dài ngắn khác nhau. margin-top:auto
   chỉ có tác dụng trên đúng PHẦN TỬ CON TRỰC TIẾP của .form-row (flex item thật) — input/select
   thường là con trực tiếp nên khớp luôn, còn ô ngày (input ẩn + .dp-display bọc trong .dp-wrap,
   xem datepicker.js) thì phải đẩy .dp-wrap chứ đẩy input bên trong nó không có tác dụng gì. */
@media (max-width: 560px) {
  .filter-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 8px; }
  .filter-bar .form-row { min-width: 0; flex: none; display: flex; flex-direction: column; }
  .filter-bar .form-row > input, .filter-bar .form-row > select, .filter-bar .form-row > .dp-wrap { margin-top: auto; }
  .filter-bar > .btn { grid-column: 1 / -1; width: 100%; height: auto; padding: 10px; }
}

.pagination { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 14px; font-size: 13px; color: var(--muted); }
.pagination .pg-links { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pagination .pg-links a, .pagination .pg-links span.disabled { padding: 6px 12px; border: 1px solid var(--border); border-radius: 7px; color: var(--text); }
.pagination .pg-links span.disabled { color: var(--muted); opacity: .5; }
/* Nhảy nhanh tới 1 trang cụ thể — form riêng (GET), giữ nguyên bộ lọc hiện tại qua input ẩn. */
.pg-jump { display: flex; align-items: center; gap: 6px; }
.pg-jump span { color: var(--muted); }
.pg-jump input[type=number] { width: 56px; height: 32px; padding: 2px 6px; border: 1px solid var(--border); border-radius: 7px; text-align: center; font-size: 13px; font-family: inherit; }
.pg-jump button { height: 32px; padding: 0 12px; border: 1px solid var(--border); border-radius: 7px; background: #fff; color: var(--text); font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; }
.pg-jump button:hover { border-color: #94a3b8; }

/* Bảng cột co giãn tay — table-layout:fixed để độ rộng cột theo đúng <colgroup> (không tự co
   theo nội dung dài/ngắn từng ô như mặc định trình duyệt, vốn hay bóp méo cột "Tên công việc"),
   kéo tay chỉnh lại qua .col-resize-handle (resizable-table.js), nhớ lại qua localStorage. Chỉ
   có ý nghĩa ở màn hình rộng — dưới 760px bảng chuyển sang thẻ xếp dọc (khối @media bên dưới),
   thead (chứa các tay kéo) đã bị ẩn nên không cần tắt riêng ở đây. */
table.tbl-resizable { table-layout: fixed; }
/* KHÔNG đặt overflow:hidden ở th — tay kéo (.col-resize-handle) là con của th, nhô ra ngoài viền
   phải (right:-4px) để dễ trúng chuột hơn; overflow:hidden ở th sẽ cắt mất phần nhô ra đó khiến
   không bấm/kéo được (đã xác minh bằng test Playwright — bug thật, không phải giả thuyết). Tiêu
   đề cột chỉ là vài chữ ngắn nên hẹp quá thì tự xuống dòng, không cần ép 1 dòng như dữ liệu. */
table.tbl-resizable th { position: relative; }
table.tbl-resizable td { overflow-wrap: break-word; }
/* Trong bảng co giãn tay, LUÔN cho xuống dòng khi cột hẹp hơn nội dung — kể cả các cột vốn có
   class .nowrap (Mã CV, Số ký hiệu, badge trạng thái...) và cả tiêu đề cột, ghi đè ".nowrap {
   white-space: nowrap }" mặc định. Trước đây dùng "..." (ellipsis) cho .nowrap thì bị mất chữ, và
   để th nowrap tràn ra ngoài thì bị đè chồng lên tiêu đề cột bên cạnh khi kéo hẹp — xuống dòng là
   cách duy nhất giữ được đủ thông tin dù cột bị kéo hẹp tới đâu (đổi lại hàng sẽ cao hơn, chấp
   nhận được vì người dùng tự chọn độ rộng). */
table.tbl-resizable th.nowrap, table.tbl-resizable td.nowrap { white-space: normal; overflow-wrap: break-word; }
table.tbl-resizable .col-resize-handle {
  position: absolute; top: 0; right: -4px; width: 8px; height: 100%; cursor: col-resize; z-index: 3; touch-action: none;
}
table.tbl-resizable .col-resize-handle:hover,
table.tbl-resizable .col-resize-handle.resizing { background: rgba(29,78,216,.3); }

/* Bảng danh sách tự chuyển sang dạng thẻ xếp dọc trên màn hình nhỏ (điện thoại/tablet đứng) */
@media (max-width: 760px) {
  table.responsive thead { display: none; }
  table.responsive, table.responsive tbody, table.responsive tr, table.responsive td { display: block; width: 100%; }
  table.responsive tr { border: 1px solid var(--border); border-radius: 9px; margin-bottom: 10px; padding: 4px 10px; }
  table.responsive tr:hover td { background: transparent; }
  table.responsive td { display: flex; justify-content: space-between; align-items: center; gap: 10px; text-align: right; border-bottom: 1px solid #f1f5f9; padding: 7px 2px; }
  table.responsive td:last-child { border-bottom: none; }
  table.responsive td::before { content: attr(data-label); font-weight: 700; color: var(--muted); text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .3px; }
  /* Trên thẻ xếp dọc mỗi trường đã có cả hàng riêng, không cần ép 1 dòng như bảng ngang nữa */
  table.responsive td.nowrap { white-space: normal; }
}

/* Modal chi tiết công việc — mở nhanh Xem/Sửa/Tạo mới từ tab danh sách mà không rời trang */
.cv-modal { display: none; position: fixed; inset: 0; z-index: 1000; align-items: flex-start; justify-content: center; padding: 30px 16px; overflow-y: auto; }
.cv-modal-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.55); }
.cv-modal-box { position: relative; background: var(--bg); border-radius: 12px; max-width: 900px; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.cv-modal-close { position: absolute; top: 10px; right: 10px; background: #fff; border: 1px solid var(--border); border-radius: 50%; width: 32px; height: 32px; font-size: 15px; line-height: 1; cursor: pointer; z-index: 2; }
.cv-modal-body { padding: 44px 16px 16px; }
.cv-modal-body .card { margin-bottom: 12px; }
@media (max-width: 700px) {
  .cv-modal { padding: 0; }
  .cv-modal-box { max-width: 100%; min-height: 100vh; border-radius: 0; }
}

.login-wrap { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-box { background: #fff; border-radius: 14px; padding: 30px 34px; width: 100%; max-width: 360px; box-shadow: 0 20px 50px rgba(0,0,0,.15); }
.login-box h1 { font-size: 19px; margin-bottom: 4px; }
.login-box .sub { color: var(--muted); font-size: 12.5px; margin-bottom: 20px; }