/* ===== PHÂN HỆ NHÂN SỰ — LỚP NGUYÊN TẮC GIAO DIỆN (Fable 24/09/2026) =====
   Chủ dự án: "tất cả các giao diện trong phân hệ HRM đều không đạt yêu cầu về nguyên tắc thiết kế giao diện của tôi".
   Nguyên tắc (xem Nhật ký chuyên môn — bản đạt): KHÔNG đường viền · mảng màu chuyển nhẹ · icon thay chữ · MỘT nút tím
   mỗi màn · 390px dùng được. Lớp này chỉ áp khi khung mang `pk-hrm` (app.js gắn cho màn nhóm Nhân sự + KPI, Phân quyền,
   Tài khoản nhân viên). Đo trước khi sửa: Chấm công 63 nút tím · Phân quyền 824 ô có viền · 60 email in kiểu mã. */

/* 1. MỘT NÚT TÍM: chỉ nút chính cỡ thường ở đầu màn giữ tím; nút nhỏ, tab, chip đang chọn → mực / mảng nhạt. */
.khung.pk-hrm .chinh .nut.nho:not(.phu){background:var(--chim);color:var(--chu);border-color:transparent;box-shadow:none}
.khung.pk-hrm .chinh .nut.nho:not(.phu):hover{background:var(--nhan-nhat);color:var(--nhan)}
.khung.pk-hrm .chinh .nut.phu{border-color:transparent;background:var(--chim)}
.khung.pk-hrm .chinh .nut.phu:hover{background:var(--nhan-nhat);color:var(--nhan)}
/* Đang chọn = NHẬN DIỆN TÍM (chủ dự án 24/09: "các nút khi nhấn sao lại có màu đen, sai nhận diện") — tab đoạn: nền trắng nổi
   chữ tím; chip/nút lọc: nền tím nhạt chữ tím. Không tô tím đặc để nút chính vẫn là thứ tím duy nhất. */
.khung.pk-hrm .chinh .nut.chon,
.khung.pk-hrm .chinh .nut.nho.chon,
.khung.pk-hrm .chinh .hx-loc-nut.chon,
.khung.pk-hrm .chinh .chip.chon,
.khung.pk-hrm .chinh .dk-chip.chon{background:var(--nhan-nhat);color:var(--nhan);border-color:transparent;box-shadow:none}
.khung.pk-hrm .chinh [class*="-tab"] .chon,
.khung.pk-hrm .chinh [class*="-tab"].chon,
.khung.pk-hrm .chinh .tab-ba .chon{background:var(--the);color:var(--nhan);border-color:transparent;box-shadow:0 1px 2px rgba(30,20,70,.08),0 4px 12px -6px rgba(90,60,220,.35)}
.khung.pk-hrm .chinh .nut.chon .dem,.khung.pk-hrm .chinh .hx-loc-nut.chon .dem{background:var(--the);color:var(--nhan)}

/* 2. KHÔNG VIỀN: ô nhập, ô chọn, thẻ, bảng — phân vùng bằng mảng nền. */
.khung.pk-hrm .chinh input:not([type=checkbox]):not([type=radio]),
.khung.pk-hrm .chinh select,
.khung.pk-hrm .chinh textarea{border-color:transparent;background:var(--chim)}
.khung.pk-hrm .chinh input:focus,.khung.pk-hrm .chinh select:focus,.khung.pk-hrm .chinh textarea:focus{box-shadow:0 0 0 2px var(--nhan-nhat);outline:none}
.khung.pk-hrm .chinh .the,.khung.pk-hrm .chinh .bang,.khung.pk-hrm .chinh details{border-color:transparent}
.khung.pk-hrm .chinh table th,.khung.pk-hrm .chinh table td{border-color:transparent}
.khung.pk-hrm .chinh table thead th{background:transparent;color:var(--chu3);font-weight:600}
.khung.pk-hrm .chinh table tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--chim) 55%,transparent)}

/* 3. CHỮ KỸ THUẬT: mã kiểu máy in thành chữ thường, nhỏ, mờ; mã màn/view trong Phân quyền ẩn hẳn. */
.khung.pk-hrm .chinh .mono{font-family:inherit;letter-spacing:0;color:var(--chu3);font-size:.9em}
.khung.pk-hrm .chinh .pq-vt .mono,.khung.pk-hrm .chinh .pq-bang td .mono,.khung.pk-hrm .chinh .pq-bang td small{display:none}
.khung.pk-hrm .chinh .tknv-lh .mono,.khung.pk-hrm .chinh .hx-tk{font-family:inherit}

/* 4. PHÂN QUYỀN: ô quyền thành chấm/viên mảng màu, không khung. */
.khung.pk-hrm .pq-trai,.khung.pk-hrm .pq-bang,.khung.pk-hrm .pq-bang table{border:0!important;box-shadow:none}
.khung.pk-hrm .pq-o{border:0!important;border-radius:999px!important;min-width:30px;height:24px;display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;padding:0 8px;background:transparent}
.khung.pk-hrm .pq-o.vai{background:color-mix(in srgb,var(--tot) 14%,transparent);color:var(--tot)}
.khung.pk-hrm .pq-o.cap{background:color-mix(in srgb,var(--nhan) 16%,transparent);color:var(--nhan)}
.khung.pk-hrm .pq-o.thu{background:color-mix(in srgb,var(--loi) 14%,transparent);color:var(--loi)}
.khung.pk-hrm .pq-o.khong{color:var(--chu3);opacity:.45}
.khung.pk-hrm .pq-o.tat{background:var(--chim);color:var(--chu3)}
.khung.pk-hrm .pq-bang thead th{font-size:11.5px;letter-spacing:.04em}

/* 5. NHÂN SỰ & VỊ TRÍ — lưới THẺ người thay bảng 7 cột. */
.ns-nhom.hr2-nhom,.khung.pk-hrm .ns-nhom.hr2-nhom{background:var(--the);border:0;border-radius:22px;padding:12px 14px 14px;margin-bottom:12px;box-shadow:0 1px 2px rgba(30,20,70,.04);overflow:visible}
.ns-nhom.hr2-nhom>summary{background:transparent;border:0;display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;padding:4px 4px 10px}
.hr2-nhom>summary::-webkit-details-marker{display:none}
.hr2-nhom>summary b{font-size:15px}
.hr2-dem{font-size:12px;font-weight:700;color:var(--chu3);background:var(--chim);border-radius:999px;padding:2px 9px}
.hr2-nhom .ns-truong{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:12.5px}
.hr2-luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:8px}
.hr2-nguoi{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:12px;border:0;border-radius:16px;
  background:linear-gradient(135deg,var(--chim),color-mix(in srgb,var(--chim) 40%,var(--the)));padding:10px 12px;text-align:left;font:inherit;color:var(--chu);cursor:pointer}
.hr2-nguoi:hover{background:var(--nhan-nhat)}
.hr2-nguoi:focus-visible{outline:2px solid var(--nhan);outline-offset:2px}
.hr2-nguoi.loi{background:linear-gradient(135deg,color-mix(in srgb,var(--loi) 10%,var(--the)),var(--chim))}
.hr2-mat{width:44px;height:44px;border-radius:50%;overflow:hidden;display:inline-flex}
.hr2-mat>*{width:100%;height:100%}
.hr2-chu{display:flex;flex-direction:column;min-width:0}
.hr2-chu b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hr2-chu small{font-size:12.5px;color:var(--chu3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hr2-dau-hang{display:flex;gap:6px;align-items:center;justify-content:flex-end;flex-wrap:wrap;max-width:150px}
.hr2-dau{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;border-radius:999px;padding:3px 7px;white-space:nowrap}
.hr2-dau.tot{color:var(--tot);background:color-mix(in srgb,var(--tot) 12%,transparent)}
.hr2-dau.canh{color:var(--canh);background:color-mix(in srgb,var(--canh) 14%,transparent)}
.hr2-dau.loi{color:var(--loi);background:color-mix(in srgb,var(--loi) 12%,transparent)}
.hr2-dau.xam{color:var(--chu3);background:var(--the)}

@media (max-width:560px){
  .hr2-luoi{grid-template-columns:1fr}
  .hr2-nhom{padding:10px}
}

/* 6. TÀI KHOẢN NHÂN VIÊN — việc trên dòng chỉ còn ICON tròn (nhãn nằm ở title/aria), ảnh người thật. */
.khung.pk-hrm .tknv-viec{gap:6px}
.khung.pk-hrm .tknv-viec .nut{width:34px;height:34px;padding:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;position:relative}
.khung.pk-hrm .tknv-viec .nut>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.khung.pk-hrm .tknv-viec .tknv-khoa:hover{background:color-mix(in srgb,var(--loi) 12%,transparent);color:var(--loi)}
.tknv-avt.anh{padding:0;overflow:hidden;background:none}
.tknv-avt.anh>*{width:100%;height:100%}

/* 7. CHẤM CÔNG HÔM NAY — lưới THẺ người (ảnh lớn, trạng thái là viên màu), không còn danh sách khối xám dày. */
.khung.pk-hrm .ns-khoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:8px;align-items:start}
.khung.pk-hrm .ns-khoi>:not(.ns-the-nguoi){grid-column:1/-1}
.khung.pk-hrm .ns-the-nguoi{border:0;border-radius:16px;padding:10px 12px;margin:0;
  background:linear-gradient(135deg,var(--chim),color-mix(in srgb,var(--chim) 40%,var(--the)))}
.khung.pk-hrm .ns-the-nguoi .ns-nguoi-hang{display:grid;grid-template-columns:40px 1fr auto auto;align-items:center;gap:10px}
.khung.pk-hrm .ns-the-nguoi .ns-nguoi-hang>:first-child{width:40px;height:40px;border-radius:50%;overflow:hidden}
.khung.pk-hrm .ns-the-nguoi .ns-nguoi-ten b{font-size:14px}
.khung.pk-hrm .ns-the-nguoi .ns-ca{margin:4px 0 0 50px;font-size:12px}
.khung.pk-hrm .ns-the-nguoi .chip{border:0}
.khung.pk-hrm .ns-dai-o{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.khung.pk-hrm .ns-dai-o>*{border:0;border-radius:18px;background:linear-gradient(160deg,var(--the),color-mix(in srgb,var(--nhan-nhat) 40%,var(--the)))}
@media (max-width:560px){.khung.pk-hrm .ns-khoi{grid-template-columns:1fr}}

/* 8. Bước bảng lương: bước đang làm là mảng tím nhạt, không khung viền; chip lọc `dk-chip` (Nhân sự của tôi) chọn = mực. */
.khung.pk-hrm .bl-buoc,.khung.pk-hrm .bl-buoc.hien{border:0!important;box-shadow:none}
.khung.pk-hrm .bl-buoc.hien{background:linear-gradient(135deg,var(--nhan-nhat),var(--the))}
.khung.pk-hrm .ns-khoi{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
.khung.pk-hrm .ns-the-nguoi .ns-nguoi-ten b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.khung.pk-hrm .ns-the-nguoi .ns-nguoi-ten{min-width:0}

/* 9. BẢNG CÔNG phân nhóm theo bộ phận. */
.ns-cong-nhom{display:flex;flex-direction:column;gap:10px}
.ns-cong-bp{background:var(--the);border-radius:18px;padding:8px 10px;border:0}
.ns-cong-bp>summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;padding:6px 4px}
.ns-cong-bp>summary::-webkit-details-marker{display:none}
.ns-cong-bp>summary small{margin-left:auto}
.ns-cong-bp>summary b{color:var(--chu);font-size:14px}
.ns-cong-bp{padding:4px 12px}
.ns-cong-bp[open]{padding-bottom:12px}