/* =====================================================================
   erp.css — bộ mặt chung của ERP Hiệp Lợi (khung + thành phần dùng chung)
   Nhịp: Linear (khoảng trắng, chữ rõ) · Pancake (hàng đợi việc) · HubSpot (thẻ số)
   Token riêng tiền tố --erp-*; sáng/tối theo prefers-color-scheme + [data-theme].
   390px: 1 cột, lề 16px, KHÔNG tràn ngang. Không inline script (CSP).
   ===================================================================== */

:root {
  --erp-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --erp-bg: #f5f6f8;
  --erp-surface: #ffffff;
  --erp-surface-2: #f2f4f7;
  --erp-surface-3: #eaecf0;
  --erp-border: #e4e7ec;
  --erp-border-2: #d0d5dd;
  --erp-text: #101828;
  --erp-text-2: #475467;
  --erp-text-3: #8a94a6;
  --erp-accent: #0e9f66;
  --erp-accent-2: #0b8456;
  --erp-accent-soft: #e6f6ee;
  --erp-on-accent: #ffffff;
  --erp-ok: #0e9f66;
  --erp-ok-soft: #e6f6ee;
  --erp-warn: #b45309;
  --erp-warn-soft: #fef3e2;
  --erp-loi: #d92d20;
  --erp-loi-soft: #fdecea;
  --erp-info: #2a78d6;
  --erp-info-soft: #e8f1fc;
  --erp-tim: #7a5af8;
  --erp-tim-soft: #f0ecfe;
  --erp-ben-bg: #fbfbfc;
  --erp-ben-hover: #eef0f3;
  --erp-ben-active: #e6f6ee;
  --erp-ben-active-text: #0b6e47;
  --erp-shadow-1: 0 1px 2px rgba(16, 24, 40, 0.05);
  --erp-shadow-2: 0 4px 16px -4px rgba(16, 24, 40, 0.12), 0 2px 4px -2px rgba(16, 24, 40, 0.06);
  --erp-shadow-3: 0 20px 40px -12px rgba(16, 24, 40, 0.28);
  --erp-r: 12px;
  --erp-r-sm: 8px;
  --erp-ben-w: 240px;
  --erp-tren-h: 60px;
  --erp-rev: #1baf7a;
  --erp-fb: #2a78d6;
  --erp-gg: #eb6834;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --erp-bg: #0a0e16;
    --erp-surface: #111725;
    --erp-surface-2: #161e2f;
    --erp-surface-3: #1d2740;
    --erp-border: #222c42;
    --erp-border-2: #2e3a55;
    --erp-text: #e7ebf3;
    --erp-text-2: #a7b0c3;
    --erp-text-3: #6d7891;
    --erp-accent: #27c58a;
    --erp-accent-2: #3ad79b;
    --erp-accent-soft: rgba(39, 197, 138, 0.13);
    --erp-on-accent: #04130c;
    --erp-ok: #3ad79b;
    --erp-ok-soft: rgba(58, 215, 155, 0.12);
    --erp-warn: #f5a524;
    --erp-warn-soft: rgba(245, 165, 36, 0.13);
    --erp-loi: #ff6b5e;
    --erp-loi-soft: rgba(255, 107, 94, 0.13);
    --erp-info: #5a9cf0;
    --erp-info-soft: rgba(90, 156, 240, 0.14);
    --erp-tim: #a08cff;
    --erp-tim-soft: rgba(160, 140, 255, 0.14);
    --erp-ben-bg: #0d1220;
    --erp-ben-hover: #161e30;
    --erp-ben-active: rgba(39, 197, 138, 0.14);
    --erp-ben-active-text: #5be0ad;
    --erp-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --erp-shadow-2: 0 6px 20px -6px rgba(0, 0, 0, 0.6);
    --erp-shadow-3: 0 24px 48px -12px rgba(0, 0, 0, 0.7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --erp-bg: #0a0e16;
  --erp-surface: #111725;
  --erp-surface-2: #161e2f;
  --erp-surface-3: #1d2740;
  --erp-border: #222c42;
  --erp-border-2: #2e3a55;
  --erp-text: #e7ebf3;
  --erp-text-2: #a7b0c3;
  --erp-text-3: #6d7891;
  --erp-accent: #27c58a;
  --erp-accent-2: #3ad79b;
  --erp-accent-soft: rgba(39, 197, 138, 0.13);
  --erp-on-accent: #04130c;
  --erp-ok: #3ad79b;
  --erp-ok-soft: rgba(58, 215, 155, 0.12);
  --erp-warn: #f5a524;
  --erp-warn-soft: rgba(245, 165, 36, 0.13);
  --erp-loi: #ff6b5e;
  --erp-loi-soft: rgba(255, 107, 94, 0.13);
  --erp-info: #5a9cf0;
  --erp-info-soft: rgba(90, 156, 240, 0.14);
  --erp-tim: #a08cff;
  --erp-tim-soft: rgba(160, 140, 255, 0.14);
  --erp-ben-bg: #0d1220;
  --erp-ben-hover: #161e30;
  --erp-ben-active: rgba(39, 197, 138, 0.14);
  --erp-ben-active-text: #5be0ad;
  --erp-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --erp-shadow-2: 0 6px 20px -6px rgba(0, 0, 0, 0.6);
  --erp-shadow-3: 0 24px 48px -12px rgba(0, 0, 0, 0.7);
  color-scheme: dark;
}

/* ---------------- nền tảng ---------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body.erp-body {
  margin: 0;
  background: var(--erp-bg);
  color: var(--erp-text);
  font-family: var(--erp-font);
  font-size: 14px;
  line-height: 1.5;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.erp-body a {
  color: inherit;
}
.erp-body h1,
.erp-body h2,
.erp-body h3 {
  margin: 0;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.erp-so,
.erp-body .so,
.erp-bang td.so {
  font-variant-numeric: tabular-nums;
}
.erp-an,
.erp-body [hidden],
.erp-tn [hidden] {
  display: none !important; /* thuộc tính hidden phải thắng display:grid/flex của thành phần */
}
.erp-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.erp-ic {
  width: 18px;
  height: 18px;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
:focus-visible {
  outline: 2px solid var(--erp-accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------------- khung app ---------------- */
.erp-app {
  display: grid;
  grid-template-columns: var(--erp-ben-w) minmax(0, 1fr);
  min-height: 100vh;
}
.erp-ben {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  background: var(--erp-ben-bg);
  border-right: 1px solid var(--erp-border);
  display: flex;
  flex-direction: column;
  padding: 14px 10px 10px;
  z-index: 30;
}
.erp-thuong-hieu {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 16px;
  text-decoration: none;
}
.erp-logo {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: linear-gradient(145deg, #0b1220, #18263f);
  display: grid;
  place-items: center;
  flex: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.erp-logo svg {
  width: 20px;
  height: 20px;
  stroke: #27c58a;
  stroke-width: 10;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.erp-thuong-hieu b {
  display: block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.erp-thuong-hieu small {
  display: block;
  color: var(--erp-text-3);
  font-size: 11.5px;
  margin-top: -1px;
}
.erp-nhom {
  margin-top: 14px;
}
.erp-nhom-ten {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--erp-text-3);
  padding: 0 10px 6px;
}
.erp-muc {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  color: var(--erp-text-2);
  text-decoration: none;
  font-weight: 500;
  font-size: 13.5px;
  transition: background 0.12s, color 0.12s;
}
.erp-muc:hover {
  background: var(--erp-ben-hover);
  color: var(--erp-text);
}
.erp-muc.dang {
  background: var(--erp-ben-active);
  color: var(--erp-ben-active-text);
  font-weight: 600;
}
.erp-muc .erp-dem {
  margin-left: auto;
}
.erp-ben-chan {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--erp-border);
  display: flex;
  align-items: center;
  gap: 10px;
}
.erp-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #0e9f66, #2a78d6);
  flex: none;
}
.erp-ben-chan .ten {
  min-width: 0;
  flex: 1;
}
.erp-ben-chan .ten b {
  display: block;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.erp-ben-chan .ten small {
  color: var(--erp-text-3);
  font-size: 11.5px;
}

.erp-chinh {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.erp-tren {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--erp-tren-h);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 24px;
  background: color-mix(in srgb, var(--erp-bg) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--erp-border);
}
.erp-tren h1 {
  font-size: 16px;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.erp-tim {
  position: relative;
  margin-left: auto;
  width: min(340px, 36vw);
}
.erp-tim input {
  width: 100%;
  height: 36px;
  border-radius: 9px;
  border: 1px solid var(--erp-border);
  background: var(--erp-surface);
  color: var(--erp-text);
  padding: 0 12px 0 34px;
  font: inherit;
  font-size: 13.5px;
}
.erp-tim .erp-ic {
  position: absolute;
  left: 10px;
  top: 9px;
  width: 17px;
  height: 17px;
  color: var(--erp-text-3);
}
.erp-tim-kq {
  position: absolute;
  top: 42px;
  left: 0;
  right: 0;
  background: var(--erp-surface);
  border: 1px solid var(--erp-border);
  border-radius: 10px;
  box-shadow: var(--erp-shadow-3);
  padding: 6px;
  max-height: 60vh;
  overflow: auto;
}
.erp-tim-kq a {
  display: block;
  padding: 8px 10px;
  border-radius: 7px;
  text-decoration: none;
}
.erp-tim-kq a:hover,
.erp-tim-kq a.chon {
  background: var(--erp-surface-2);
}
.erp-tim-kq small {
  display: block;
  color: var(--erp-text-3);
  font-size: 12px;
}
.erp-tren-nut {
  display: flex;
  align-items: center;
  gap: 6px;
}
.erp-nut-tron {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  border: 1px solid var(--erp-border);
  background: var(--erp-surface);
  color: var(--erp-text-2);
  display: grid;
  place-items: center;
  cursor: pointer;
  text-decoration: none;
}
.erp-nut-tron:hover {
  color: var(--erp-text);
  border-color: var(--erp-border-2);
}
.erp-cham-do {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--erp-loi);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  border: 2px solid var(--erp-bg);
}
.erp-noi-dung {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 24px 24px 64px;
}
.erp-dau-trang {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.erp-dau-trang h2 {
  font-size: 24px;
  font-weight: 700;
}
.erp-dau-trang p {
  margin: 4px 0 0;
  color: var(--erp-text-2);
}

/* băng cảnh báo trên cùng */
.erp-bang-canh {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 24px;
  font-size: 13px;
  font-weight: 500;
}
.erp-bang-canh.do {
  background: var(--erp-loi);
  color: #fff;
}
.erp-bang-canh.vang {
  background: var(--erp-warn-soft);
  color: var(--erp-warn);
}
.erp-bang-canh a {
  color: inherit;
  font-weight: 700;
  text-underline-offset: 3px;
}

/* thẻ "Mới dùng? Xem hướng dẫn" (lõi gắn trên đầu nội dung — chỉ nhân viên chưa mở /huong-dan) */
.erp-the-moi-dung {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--erp-tim);
  border-radius: var(--erp-r);
  background: linear-gradient(90deg, var(--erp-tim-soft), var(--erp-surface));
  box-shadow: var(--erp-shadow-1);
}
.erp-the-moi-dung > div {
  flex: 1;
  min-width: 0;
}
.erp-the-moi-dung b {
  display: block;
  font-size: 14px;
  color: var(--erp-text);
}
.erp-the-moi-dung small {
  display: block;
  color: var(--erp-text-2);
  font-size: 12.5px;
  margin-top: 2px;
}
.erp-the-moi-dung-mat {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--erp-tim), var(--erp-info));
}
@media (max-width: 640px) {
  .erp-the-moi-dung {
    flex-wrap: wrap;
  }
  .erp-the-moi-dung > div {
    flex-basis: calc(100% - 46px);
  }
  /* [tích hợp telesale 04/11] điện thoại: nút chạm ≥44px — thẻ "Mới dùng?" hiện trên MỌI trang của người mới
     (telesale ngày đầu) và nút trên dòng "Khách cần gọi" ở /toi (Playwright 390px đo 30px). */
  .erp-the-moi-dung .erp-nut,
  #khach-goi .nut .erp-nut,
  #tao-viec button[type="submit"] {
    height: auto;
    min-height: 44px;
  }
}

/* ---------------- thẻ + lưới ---------------- */
.erp-the {
  background: var(--erp-surface);
  border: 1px solid var(--erp-border);
  border-radius: var(--erp-r);
  box-shadow: var(--erp-shadow-1);
  min-width: 0;
}
.erp-the-dau {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--erp-border);
}
.erp-the-dau h3 {
  font-size: 14.5px;
  font-weight: 650;
}
.erp-the-dau small {
  color: var(--erp-text-3);
  font-weight: 400;
}
.erp-the-than {
  padding: 16px 18px;
}
.erp-luoi {
  display: grid;
  gap: 16px;
}
.erp-luoi-2 {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) 360px;
  align-items: start;
}
.erp-luoi-chia {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ---------------- KPI ---------------- */
.erp-kpi {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin-bottom: 20px;
}
.erp-kpi-o {
  position: relative;
  background: var(--erp-surface);
  border: 1px solid var(--erp-border);
  border-radius: var(--erp-r);
  padding: 14px 16px 15px;
  box-shadow: var(--erp-shadow-1);
  min-width: 0;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: border-color 0.15s, transform 0.15s;
}
a.erp-kpi-o:hover {
  border-color: var(--erp-border-2);
  transform: translateY(-1px);
}
.erp-kpi-o .nhan {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--erp-text-2);
  font-size: 12.5px;
  font-weight: 550;
}
.erp-kpi-o .nhan i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--erp-text-3);
  flex: none;
}
.erp-kpi-o .so {
  display: block;
  margin-top: 8px;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.erp-kpi-o .so small {
  font-size: 15px;
  font-weight: 600;
  color: var(--erp-text-3);
  margin-left: 2px;
}
.erp-kpi-o .phu {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--erp-text-3);
}
.erp-kpi-o.loi .nhan i {
  background: var(--erp-loi);
}
.erp-kpi-o.loi .so {
  color: var(--erp-loi);
}
.erp-kpi-o.warn .nhan i {
  background: var(--erp-warn);
}
.erp-kpi-o.warn .so {
  color: var(--erp-warn);
}
.erp-kpi-o.ok .nhan i {
  background: var(--erp-ok);
}
.erp-kpi-o.info .nhan i {
  background: var(--erp-info);
}
.erp-kpi-o.tien .so {
  color: var(--erp-ok);
}
.erp-kpi-o.chua-lay {
  border-style: dashed;
  background: var(--erp-surface-2);
  box-shadow: none;
}
.erp-kpi-o.chua-lay .so {
  font-size: 15px;
  font-weight: 600;
  color: var(--erp-text-3);
  white-space: normal;
}

/* ---------------- chip trạng thái ---------------- */
.erp-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: var(--erp-surface-3);
  color: var(--erp-text-2);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  vertical-align: middle;
}
.erp-chip i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.erp-chip.ok {
  background: var(--erp-ok-soft);
  color: var(--erp-ok);
}
.erp-chip.warn {
  background: var(--erp-warn-soft);
  color: var(--erp-warn);
}
.erp-chip.loi {
  background: var(--erp-loi-soft);
  color: var(--erp-loi);
}
.erp-chip.info {
  background: var(--erp-info-soft);
  color: var(--erp-info);
}
.erp-chip.tim {
  background: var(--erp-tim-soft);
  color: var(--erp-tim);
}
.erp-chip.dam.loi {
  background: var(--erp-loi);
  color: #fff;
}
.erp-dem {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  font-size: 11.5px;
  font-weight: 700;
  background: var(--erp-surface-3);
  color: var(--erp-text-2);
  font-variant-numeric: tabular-nums;
}
.erp-dem.loi {
  background: var(--erp-loi);
  color: #fff;
}

/* tag người dùng gắn (màu nền đặt bằng style --erp-tag) */
.erp-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--erp-tag, #64748b);
  background: color-mix(in srgb, var(--erp-tag, #64748b) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--erp-tag, #64748b) 28%, transparent);
  white-space: nowrap;
}
.erp-tag button {
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  padding: 0 0 0 2px;
  font-size: 14px;
  line-height: 1;
  opacity: 0.7;
}
.erp-tag-ds {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

/* ---------------- nút + ô nhập ---------------- */
.erp-nut {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: 9px;
  border: 1px solid var(--erp-border-2);
  background: var(--erp-surface);
  color: var(--erp-text);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, transform 0.08s;
}
.erp-nut:hover {
  background: var(--erp-surface-2);
}
.erp-nut:active {
  transform: translateY(1px);
}
.erp-nut[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}
.erp-nut.chinh {
  background: var(--erp-accent);
  border-color: var(--erp-accent);
  color: var(--erp-on-accent);
}
.erp-nut.chinh:hover {
  background: var(--erp-accent-2);
}
.erp-nut.nguy {
  color: var(--erp-loi);
  border-color: color-mix(in srgb, var(--erp-loi) 40%, var(--erp-border));
}
.erp-nut.nguy:hover {
  background: var(--erp-loi-soft);
}
.erp-nut.ma {
  border-color: transparent;
  background: transparent;
  color: var(--erp-text-2);
}
.erp-nut.ma:hover {
  background: var(--erp-surface-2);
  color: var(--erp-text);
}
.erp-nut.nho {
  height: 30px;
  padding: 0 10px;
  font-size: 12.5px;
  border-radius: 8px;
}
.erp-nut.giai-quyet {
  color: var(--erp-ok);
  border-color: color-mix(in srgb, var(--erp-ok) 35%, var(--erp-border));
}
.erp-nut.giai-quyet:hover {
  background: var(--erp-ok-soft);
}
.erp-o,
.erp-body select,
.erp-body textarea {
  width: 100%;
  min-height: 38px;
  border-radius: 9px;
  border: 1px solid var(--erp-border-2);
  background: var(--erp-surface);
  color: var(--erp-text);
  font: inherit;
  font-size: 14px;
  padding: 7px 11px;
}
.erp-body textarea {
  min-height: 80px;
  resize: vertical;
}
.erp-o:focus,
.erp-body select:focus,
.erp-body textarea:focus {
  outline: none;
  border-color: var(--erp-accent);
  box-shadow: 0 0 0 3px var(--erp-accent-soft);
}
.erp-nhan {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--erp-text-2);
  margin: 0 0 5px;
}
.erp-truong {
  margin-bottom: 12px;
}
.erp-goi-y {
  font-size: 12px;
  color: var(--erp-text-3);
  margin-top: 4px;
}
.erp-hang-nut {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.erp-loc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
  margin-bottom: 14px;
}
.erp-loc > * {
  flex: 1 1 150px;
  min-width: 0;
}
.erp-loc > .erp-nut {
  flex: 0 0 auto;
}

/* tab phân đoạn */
.erp-tab {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 10px;
  background: var(--erp-surface-3);
  max-width: 100%;
  overflow-x: auto;
}
.erp-tab button,
.erp-tab a {
  border: 0;
  background: transparent;
  color: var(--erp-text-2);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.erp-tab .dang {
  background: var(--erp-surface);
  color: var(--erp-text);
  box-shadow: var(--erp-shadow-1);
}

/* ---------------- bảng ---------------- */
.erp-cuon {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
.erp-bang {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13.5px;
}
.erp-bang th {
  position: sticky;
  top: 0;
  background: var(--erp-surface-2);
  color: var(--erp-text-2);
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  padding: 9px 14px;
  border-bottom: 1px solid var(--erp-border);
  white-space: nowrap;
}
.erp-bang td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--erp-border);
  vertical-align: middle;
}
.erp-bang tr:last-child td {
  border-bottom: 0;
}
.erp-bang tbody tr:hover td {
  background: color-mix(in srgb, var(--erp-surface-2) 60%, transparent);
}
.erp-bang td.so,
.erp-bang th.so {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.erp-bang .mo {
  color: var(--erp-text-3);
  font-size: 12.5px;
}
.erp-bang a.chinh {
  font-weight: 600;
  text-decoration: none;
}
.erp-bang a.chinh:hover {
  text-decoration: underline;
}
.erp-bang tr.mo-di td {
  opacity: 0.45;
}
.erp-trong {
  text-align: center;
  padding: 44px 16px;
  color: var(--erp-text-3);
}
.erp-trong .hinh {
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  border-radius: 16px;
  background: var(--erp-ok-soft);
  color: var(--erp-ok);
  display: grid;
  place-items: center;
}
.erp-trong .hinh .erp-ic {
  width: 28px;
  height: 28px;
}
.erp-trong b {
  display: block;
  color: var(--erp-text);
  font-size: 15px;
  margin-bottom: 4px;
}

/* ---------------- hàng đợi việc ---------------- */
.erp-hang-doi {
  display: flex;
  flex-direction: column;
}
.erp-viec {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid var(--erp-border);
  transition: background 0.15s, opacity 0.25s, transform 0.25s;
}
.erp-viec:last-child {
  border-bottom: 0;
}
.erp-viec:hover {
  background: color-mix(in srgb, var(--erp-surface-2) 55%, transparent);
}
.erp-viec.dang-an {
  opacity: 0;
  transform: translateX(24px);
}
.erp-viec .uu {
  width: 4px;
  align-self: stretch;
  border-radius: 4px;
  background: var(--erp-border-2);
}
.erp-viec .uu.u1 {
  background: var(--erp-loi);
}
.erp-viec .uu.u3 {
  background: var(--erp-surface-3);
}
.erp-viec .chon-o {
  display: flex;
  align-items: center;
  gap: 10px;
}
.erp-viec input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: var(--erp-accent);
}
.erp-viec .tieu-de {
  font-weight: 600;
  color: var(--erp-text);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.erp-viec a.tieu-de:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.erp-viec .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 4px;
  color: var(--erp-text-3);
  font-size: 12.5px;
}
.erp-viec .nut {
  display: flex;
  gap: 6px;
  align-items: center;
}
.erp-thanh-chon {
  position: sticky;
  bottom: 12px;
  margin: 12px auto 0;
  width: fit-content;
  max-width: calc(100% - 16px);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 14px;
  border-radius: 12px;
  background: #101828;
  color: #fff;
  box-shadow: var(--erp-shadow-3);
  z-index: 25;
  font-weight: 600;
  font-size: 13px;
}
.erp-thanh-chon .erp-nut {
  height: 32px;
}

/* lý do 1 chạm */
.erp-ly-do {
  position: absolute;
  z-index: 60;
  background: var(--erp-surface);
  border: 1px solid var(--erp-border);
  border-radius: 12px;
  box-shadow: var(--erp-shadow-3);
  padding: 6px;
  width: 230px;
}
.erp-ly-do b {
  display: block;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--erp-text-3);
  padding: 6px 8px 4px;
}
.erp-ly-do button {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: none;
  color: var(--erp-text);
  font: inherit;
  font-size: 13.5px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.erp-ly-do button:hover {
  background: var(--erp-surface-2);
}

/* ---------------- toast ---------------- */
.erp-toast-vung {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 100;
  width: max-content;
  max-width: calc(100vw - 32px);
}
.erp-toast {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 10px 10px 16px;
  border-radius: 12px;
  background: #101828;
  color: #f2f4f7;
  box-shadow: var(--erp-shadow-3);
  font-size: 13.5px;
  font-weight: 500;
  animation: erp-len 0.2s ease-out;
}
.erp-toast.loi {
  background: #b42318;
}
.erp-toast button {
  border: 0;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font: inherit;
  font-weight: 700;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
}
.erp-toast .vach {
  height: 3px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 2px;
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 4px;
  transform-origin: left;
}
@keyframes erp-len {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* ---------------- hộp thoại ---------------- */
.erp-hop {
  border: 0;
  padding: 0;
  border-radius: 16px;
  background: var(--erp-surface);
  color: var(--erp-text);
  box-shadow: var(--erp-shadow-3);
  width: min(480px, calc(100vw - 32px));
}
.erp-hop::backdrop {
  background: rgba(10, 14, 22, 0.55);
  backdrop-filter: blur(2px);
}
.erp-hop-dau {
  padding: 18px 20px 6px;
}
.erp-hop-dau h3 {
  font-size: 17px;
}
.erp-hop-than {
  padding: 8px 20px 18px;
}
.erp-hop-chan {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px 18px;
}
.erp-mat-khau-hien {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 14px;
  border-radius: 10px;
  background: var(--erp-surface-2);
  border: 1px dashed var(--erp-border-2);
  text-align: center;
  user-select: all;
  overflow-wrap: anywhere;
}

/* ---------------- kanban ---------------- */
.erp-kanban {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 1fr);
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
}
.erp-kanban-cot {
  background: var(--erp-surface-2);
  border: 1px solid var(--erp-border);
  border-radius: var(--erp-r);
  padding: 10px;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.erp-kanban-cot.keo-vao {
  outline: 2px dashed var(--erp-accent);
  outline-offset: -4px;
}
.erp-kanban-dau {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 650;
  font-size: 13px;
  padding: 2px 4px 4px;
}
.erp-kanban-the {
  background: var(--erp-surface);
  border: 1px solid var(--erp-border);
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: var(--erp-shadow-1);
  cursor: grab;
}
.erp-kanban-the.dang-keo {
  opacity: 0.5;
}
.erp-kanban-the b {
  display: block;
  font-size: 13.5px;
}
.erp-kanban-the small {
  color: var(--erp-text-3);
}
.erp-kanban-the select {
  margin-top: 8px;
  min-height: 30px;
  font-size: 12.5px;
  padding: 3px 8px;
}

/* ---------------- danh sách định nghĩa ---------------- */
.erp-dl {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 8px 16px;
  margin: 0;
}
.erp-dl dt {
  color: var(--erp-text-3);
  font-size: 13px;
}
.erp-dl dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.erp-ma {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--erp-text-2);
  overflow-wrap: anywhere;
}
.erp-cong-tac {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--erp-border);
}
.erp-cong-tac:last-child {
  border-bottom: 0;
}
.erp-cong-tac b {
  display: block;
}
.erp-cong-tac small {
  color: var(--erp-text-3);
}

/* ---------------- thanh dưới (mobile) ---------------- */
.erp-duoi {
  display: none;
}
.erp-man-che {
  display: none;
}

@media (max-width: 1024px) {
  .erp-luoi-2 {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 768px) {
  .erp-app {
    grid-template-columns: minmax(0, 1fr);
  }
  .erp-ben {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: min(300px, 86vw);
    transform: translateX(-105%);
    transition: transform 0.22s ease;
    box-shadow: var(--erp-shadow-3);
  }
  .erp-ben:target,
  .erp-ben.mo {
    transform: none;
  }
  .erp-ben:target ~ .erp-man-che,
  .erp-ben.mo ~ .erp-man-che {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(10, 14, 22, 0.5);
    z-index: 29;
  }
  .erp-tren {
    padding: 0 16px;
    gap: 8px;
  }
  .erp-tim {
    width: auto;
    flex: 1;
    margin-left: 4px;
  }
  .erp-tren h1 {
    display: none;
  }
  .erp-noi-dung {
    padding: 16px 16px 96px;
  }
  .erp-dau-trang h2 {
    font-size: 20px;
  }
  .erp-kpi {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .erp-kpi-o {
    padding: 12px 13px;
  }
  .erp-kpi-o .so {
    font-size: 24px;
  }
  .erp-luoi-chia {
    grid-template-columns: minmax(0, 1fr);
  }
  .erp-bang-canh {
    padding: 8px 16px;
  }
  .erp-viec {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 12px 14px;
  }
  .erp-viec .nut {
    grid-column: 2;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .erp-dl {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
  .erp-dl dd {
    margin-bottom: 10px;
  }
  /* bảng → thẻ */
  .erp-bang.the-mobile thead {
    display: none;
  }
  .erp-bang.the-mobile,
  .erp-bang.the-mobile tbody,
  .erp-bang.the-mobile tr,
  .erp-bang.the-mobile td {
    display: block;
    width: 100%;
  }
  .erp-bang.the-mobile tr {
    padding: 10px 14px;
    border-bottom: 1px solid var(--erp-border);
  }
  .erp-bang.the-mobile td {
    border: 0;
    padding: 3px 0;
    text-align: left !important;
    overflow-wrap: anywhere;
  }
  .erp-bang.the-mobile td[data-nhan]::before {
    content: attr(data-nhan) " · ";
    color: var(--erp-text-3);
    font-size: 12px;
  }
  .erp-duoi {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 28;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    background: color-mix(in srgb, var(--erp-surface) 92%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--erp-border);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .erp-duoi a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 4px 2px;
    text-decoration: none;
    color: var(--erp-text-3);
    font-size: 10.5px;
    font-weight: 600;
    min-width: 0;
  }
  .erp-duoi a span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .erp-duoi a.dang {
    color: var(--erp-accent);
  }
  .erp-duoi .erp-ic {
    width: 21px;
    height: 21px;
  }
  .erp-toast-vung {
    bottom: 84px;
  }
  .erp-an-mobile {
    display: none !important;
  }
}
@media (min-width: 769px) {
  .erp-chi-mobile {
    display: none !important;
  }
}

/* ---------------- đăng nhập ---------------- */
.erp-dn {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  background: var(--erp-bg);
}
.erp-dn-trai {
  position: relative;
  overflow: hidden;
  background: radial-gradient(1200px 600px at -10% -10%, #1b3a5f 0%, transparent 60%),
    radial-gradient(900px 500px at 110% 110%, #0f5a3e 0%, transparent 55%), #070b14;
  color: #e7ebf3;
  padding: 48px 56px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.erp-dn-trai .erp-thuong-hieu b {
  color: #fff;
}
.erp-dn-trai .erp-thuong-hieu small {
  color: #8a96ad;
}
.erp-dn-trai h2 {
  font-size: 34px;
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1.15;
  max-width: 460px;
}
.erp-dn-trai h2 em {
  font-style: normal;
  color: #3ad79b;
}
.erp-dn-trai p {
  color: #a7b0c3;
  max-width: 440px;
  margin: 14px 0 0;
  font-size: 15px;
}
.erp-dn-diem {
  display: grid;
  gap: 10px;
  margin-top: 28px;
  max-width: 420px;
}
.erp-dn-diem div {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 11px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 13.5px;
  color: #cfd6e3;
}
.erp-dn-diem .erp-ic {
  color: #3ad79b;
}
.erp-dn-phai {
  display: grid;
  place-items: center;
  padding: 32px 16px;
}
.erp-dn-form {
  width: min(380px, 100%);
}
.erp-dn-form h1 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.erp-dn-form > p {
  color: var(--erp-text-2);
  margin: 6px 0 24px;
}
.erp-dn-form .erp-nut.chinh {
  width: 100%;
  height: 44px;
  font-size: 15px;
  margin-top: 6px;
}
.erp-dn-form .erp-o {
  height: 44px;
  font-size: 15px;
}
.erp-loi-hop {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 11px 13px;
  border-radius: 10px;
  background: var(--erp-loi-soft);
  color: var(--erp-loi);
  font-size: 13.5px;
  font-weight: 500;
  margin-bottom: 16px;
}
.erp-ok-hop {
  padding: 11px 13px;
  border-radius: 10px;
  background: var(--erp-ok-soft);
  color: var(--erp-ok);
  font-size: 13.5px;
  font-weight: 500;
  margin-bottom: 16px;
}
.erp-dn-chan {
  margin-top: 22px;
  color: var(--erp-text-3);
  font-size: 12.5px;
  text-align: center;
}
@media (max-width: 860px) {
  .erp-dn {
    grid-template-columns: minmax(0, 1fr);
  }
  .erp-dn-trai {
    padding: 22px 16px 26px;
  }
  .erp-dn-trai h2 {
    font-size: 22px;
    margin-top: 14px;
  }
  .erp-dn-trai p,
  .erp-dn-diem {
    display: none;
  }
  .erp-dn-phai {
    place-items: start center;
    padding: 28px 16px 40px;
  }
}

/* ---------------- 403 / trang trạng thái ---------------- */
.erp-trang-trang-thai {
  max-width: 520px;
  margin: 8vh auto;
  text-align: center;
}
.erp-trang-trang-thai .ma {
  font-size: 64px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--erp-text-3);
}
.erp-trang-trang-thai h2 {
  font-size: 22px;
  margin: 6px 0 8px;
}
.erp-trang-trang-thai p {
  color: var(--erp-text-2);
}

/* ma trận quyền */
.erp-mt td.pv {
  text-align: center;
  font-size: 12px;
}
.erp-mt .pv-tat_ca {
  color: var(--erp-ok);
  font-weight: 700;
}
.erp-mt .pv-bo_phan {
  color: var(--erp-info);
  font-weight: 700;
}
.erp-mt .pv-cua_minh {
  color: var(--erp-warn);
  font-weight: 700;
}
.erp-mt .pv-khong {
  color: var(--erp-text-3);
}

/* khối mã nhật ký */
.erp-json {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  color: var(--erp-text-2);
  max-width: 360px;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

/* bước nhỏ / timeline */
.erp-buoc {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--erp-border);
}
.erp-buoc:last-child {
  border-bottom: 0;
}
.erp-buoc .cham {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--erp-accent);
  margin-top: 6px;
  flex: none;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* =====================================================================
   NGÔN NGỮ THIẾT KẾ v2 — "wow 3 giây" (03/11/2026)
   Một lớp phủ cho MỌI phân hệ (module chỉ dùng lớp erp-* là tự hưởng):
   1) Nhịp chữ: 3 bậc — tiêu đề trang 26/700 · tiêu đề thẻ 14.5/650 · thân 14/1.5 · phụ 12.5 text-3.
   2) Mật độ bảng: hàng 40px, tiêu đề cột chữ hoa nhỏ, số canh phải tabular-nums.
   3) Tiền nổi bật: .erp-so / .so luôn tabular-nums; tiền vào = xanh ok, nợ = đỏ, sắp tới hạn = cam.
   4) Màu CÓ NGHĨA (không trang trí): đỏ = quá hạn/nợ/lỗi · cam = hôm nay/sắp hạn · xanh lá = tiền vào/xong ·
      xanh dương = thông tin/nguồn · tím = chưa ai nhận/chờ người.
   5) "chưa lấy được" = nền sọc + viền đứt + biểu tượng ⚠ — KHÔNG BAO GIỜ trông giống số 0.
   6) Trạng thái rỗng = biểu tượng + 1 câu nói việc gì sẽ hiện ở đây + đường bấm.
   7) Chuyển động nhẹ (≤ 220ms), tắt hết khi prefers-reduced-motion.
   ===================================================================== */
:root {
  --erp-r: 14px;
  --erp-r-sm: 9px;
  --erp-soc: repeating-linear-gradient(-45deg, transparent 0 7px, color-mix(in srgb, var(--erp-text-3) 9%, transparent) 7px 8px);
  --erp-vao-ms: 220ms;
}

/* --- khung: cột thanh bên kéo dài hết trang (kể cả trang dài hơn 1 màn) --- */
@media (min-width: 769px) {
  .erp-app {
    background: linear-gradient(to right, var(--erp-ben-bg) calc(var(--erp-ben-w) - 1px), var(--erp-border) calc(var(--erp-ben-w) - 1px) var(--erp-ben-w), transparent var(--erp-ben-w));
  }
}
.erp-muc {
  position: relative;
}
.erp-muc.dang::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 7px;
  bottom: 7px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--erp-accent);
}
.erp-tren h1 {
  font-weight: 650;
  letter-spacing: -0.01em;
}

/* --- nhịp chữ --- */
.erp-dau-trang h2,
.erp-body .erp-noi-dung > h2:first-child {
  font-size: 26px;
  font-weight: 750;
  letter-spacing: -0.025em;
}
.erp-the-dau h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.erp-mo {
  color: var(--erp-text-3);
}
.mau-ok {
  color: var(--erp-ok) !important;
}
.mau-loi {
  color: var(--erp-loi) !important;
}
.mau-warn {
  color: var(--erp-warn) !important;
}
.mau-info {
  color: var(--erp-info) !important;
}

/* --- thẻ: viền mềm hơn, thẻ-liên-kết có phản hồi khi rê --- */
.erp-the-chan {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 18px;
  border-top: 1px solid var(--erp-border);
  color: var(--erp-accent);
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  transition: background 0.15s;
}
.erp-the-chan:hover {
  background: var(--erp-accent-soft);
}
.erp-the-chan .erp-ic,
.erp-hn-mui .erp-ic {
  width: 15px;
  height: 15px;
  transition: transform 0.15s;
}
.erp-the-chan:hover .erp-ic {
  transform: translateX(3px);
}
.erp-dem.ok {
  background: var(--erp-ok-soft);
  color: var(--erp-ok);
}

/* --- KPI: lưới đủ chỗ 6 ô / hàng ở 1440, số tiền nổi --- */
.erp-kpi {
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
}
.erp-kpi-o {
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
a.erp-kpi-o:hover {
  box-shadow: var(--erp-shadow-2);
}
.erp-kpi-o.tien .nhan i {
  background: var(--erp-ok);
}

/* --- "chưa lấy được": sọc + viền đứt + ⚠, không bao giờ giống số 0 --- */
.erp-kpi-o.chua-lay {
  background-color: var(--erp-surface);
  background-image: var(--erp-soc);
  border-color: color-mix(in srgb, var(--erp-warn) 40%, var(--erp-border));
}
.erp-kpi-o.chua-lay .so {
  color: var(--erp-warn);
  font-size: 14px;
}
.erp-kpi-o.chua-lay .so::before {
  content: "⚠ ";
}
.erp-kpi-o.chua-lay .nhan i {
  background: transparent;
  border: 1.5px dashed var(--erp-warn);
}
.erp-chua-lay {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--erp-warn);
  font-weight: 650;
  font-size: 14px;
}
.erp-chua-lay .erp-ic {
  width: 16px;
  height: 16px;
}
.erp-chua-lay-khoi {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 12px 14px;
  padding: 10px 12px;
  border-radius: var(--erp-r-sm);
  border: 1px dashed color-mix(in srgb, var(--erp-warn) 45%, var(--erp-border));
  background-color: var(--erp-warn-soft);
  background-image: var(--erp-soc);
  color: var(--erp-text-2);
  font-size: 12.5px;
}
.erp-chua-lay-khoi .erp-ic {
  color: var(--erp-warn);
  margin-top: 1px;
}
.erp-chua-lay-khoi b {
  display: block;
  color: var(--erp-warn);
  font-size: 13px;
}
.erp-chua-lay-khoi span {
  overflow-wrap: anywhere;
}

/* --- trạng thái rỗng: biến thể gọn trong thẻ --- */
.erp-trong.nho {
  padding: 26px 18px;
  font-size: 13px;
  line-height: 1.55;
}
.erp-trong.nho .hinh {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  margin-bottom: 10px;
}
.erp-trong.nho .hinh .erp-ic {
  width: 22px;
  height: 22px;
}
.erp-trong a {
  color: var(--erp-accent);
  font-weight: 600;
}

/* --- chip bấm được (lọc) — không bao giờ bị kéo giãn như ô nhập --- */
button.erp-chip {
  border: 0;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  height: 28px;
  padding: 0 12px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.erp-loc > .erp-chip,
.erp-loc > button.erp-chip {
  flex: 0 0 auto;
}
/* chip nhiều dòng: bo nhỏ để chữ không bị góc cắt */
.erp-chip[class*="wrap"],
.erp-chip[class*="dai"] {
  border-radius: 8px;
  padding: 3px 8px;
}

/* --- hàng đợi việc: viền trái theo mức gấp, nút gọn --- */
.erp-viec {
  position: relative;
}
.erp-viec.loi::before,
.erp-viec.warn::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--erp-loi);
}
.erp-viec.warn::before {
  background: var(--erp-warn);
}
.erp-viec.gon {
  padding: 10px 16px;
  gap: 10px;
}
.erp-viec.gon .tieu-de {
  font-size: 13.5px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.erp-viec.gon .uu {
  display: none; /* mức gấp đã thể hiện bằng viền trái của dòng */
}
.erp-viec.gon .meta {
  margin-top: 3px;
}
.erp-viec.gon .nut {
  flex-wrap: nowrap;
}
.erp-viec.da-xong .tieu-de {
  font-weight: 500;
  color: var(--erp-text-2);
}
.erp-avatar.nho {
  width: 30px;
  height: 30px;
  font-size: 12px;
  background: var(--erp-info-soft);
  color: var(--erp-info);
}

/* --- bảng: mật độ chuẩn + tiêu đề cột nhỏ --- */
.erp-bang th {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--erp-text-3);
  padding: 8px 14px;
}
.erp-bang td {
  padding: 10px 14px;
}
.erp-bang td.so {
  font-weight: 600;
}

/* --- tab: vạch chỉ báo rõ hơn --- */
.erp-tab .dang {
  color: var(--erp-text);
}

/* --- chuyển động vào trang (lệch nhịp nhẹ) --- */
@keyframes erp-hien {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.erp-vao {
  animation: erp-hien var(--erp-vao-ms) ease-out both;
}
.erp-vao:nth-child(2) {
  animation-delay: 40ms;
}
.erp-vao:nth-child(3) {
  animation-delay: 80ms;
}
.erp-vao:nth-child(4) {
  animation-delay: 120ms;
}
.erp-noi-dung > .erp-kpi .erp-kpi-o,
.erp-noi-dung > .erp-the,
.erp-noi-dung > .erp-luoi-2,
.erp-noi-dung > .erp-luoi-chia {
  animation: erp-hien var(--erp-vao-ms) ease-out both;
}

/* =====================================================================
   TRANG "HÔM NAY CỦA TÔI" (/toi)
   ===================================================================== */
.erp-hn-dau {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
}
.erp-hn-chao {
  min-width: 0;
}
.erp-hn-ngay {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--erp-text-3);
  font-size: 12.5px;
  font-weight: 550;
  margin-bottom: 6px;
}
.erp-hn-ngay .erp-ic {
  width: 14px;
  height: 14px;
}
.erp-hn-dau h2 {
  font-size: 28px;
  font-weight: 750;
  letter-spacing: -0.03em;
}
.erp-hn-tom {
  margin: 6px 0 0;
  font-size: 15px;
  color: var(--erp-text-2);
}
.erp-hn-tom b {
  font-weight: 700;
}
.erp-hn-sach {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--erp-ok);
  font-weight: 600;
}
.erp-hn-loi-tat {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}
.erp-hn-loi-tat a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid var(--erp-border);
  background: var(--erp-surface);
  color: var(--erp-text-2);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.erp-hn-loi-tat a:hover {
  color: var(--erp-text);
  border-color: var(--erp-border-2);
  background: var(--erp-surface-2);
}
.erp-hn-loi-tat .erp-ic {
  width: 15px;
  height: 15px;
}
.erp-hn-nut {
  display: flex;
  gap: 8px;
  flex: none;
}

/* dải tiền: 1 số lớn + các ô phụ */
.erp-hn-tien {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 2fr);
  gap: 12px;
  margin-bottom: 18px;
}
.erp-hn-tien.chi-phu {
  grid-template-columns: minmax(0, 1fr);
}
.erp-hn-tien.chi-phu .erp-hn-tien-phu {
  grid-template-columns: repeat(auto-fill, minmax(220px, 280px));
}
.erp-hn-tien-chinh {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 20px;
  border-radius: var(--erp-r);
  border: 1px solid color-mix(in srgb, var(--erp-rev) 30%, var(--erp-border));
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--erp-rev) 16%, var(--erp-surface)) 0%, var(--erp-surface) 62%);
  box-shadow: var(--erp-shadow-1);
  text-decoration: none;
  color: inherit;
  min-width: 0;
  transition: box-shadow 0.15s, transform 0.15s;
}
.erp-hn-tien-chinh:hover {
  box-shadow: var(--erp-shadow-2);
  transform: translateY(-1px);
}
.erp-hn-tien-chinh .nhan {
  font-size: 12px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--erp-text-2);
}
.erp-hn-tien-chinh .nhan small {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  color: var(--erp-text-3);
}
.erp-hn-tien-chinh .so-lon {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--erp-ok);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.erp-hn-tien-chinh .phu {
  font-size: 13px;
  color: var(--erp-text-2);
  overflow-wrap: anywhere;
}
.erp-hn-tien-chinh .phu b {
  color: var(--erp-text);
}
.erp-hn-mui {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--erp-accent);
}
.erp-hn-tien-chinh:hover .erp-hn-mui .erp-ic {
  transform: translateX(3px);
}
.erp-hn-tien-chinh.chua-lay,
.erp-hn-o.chua-lay {
  background: var(--erp-surface);
  background-image: var(--erp-soc);
  border: 1px dashed color-mix(in srgb, var(--erp-warn) 45%, var(--erp-border));
}
.erp-hn-tien-phu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}
.erp-hn-o {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-radius: var(--erp-r);
  border: 1px solid var(--erp-border);
  background: var(--erp-surface);
  box-shadow: var(--erp-shadow-1);
  text-decoration: none;
  color: inherit;
  min-width: 0;
  transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
}
.erp-hn-o:hover {
  border-color: var(--erp-border-2);
  box-shadow: var(--erp-shadow-2);
  transform: translateY(-1px);
}
.erp-hn-o .nhan {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--erp-text-2);
}
.erp-hn-o .so {
  font-size: 24px;
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.erp-hn-o .so.nho {
  font-size: 15px;
  color: var(--erp-accent);
}
.erp-hn-o .phu {
  font-size: 12px;
  color: var(--erp-text-3);
  overflow-wrap: anywhere;
}
.cham {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--erp-text-3);
  flex: none;
  display: inline-block;
}
.cham.ok {
  background: var(--erp-ok);
}
.cham.loi {
  background: var(--erp-loi);
}
.cham.warn {
  background: var(--erp-warn);
}

/* 3 cột việc */
.erp-hn-luoi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  align-items: start;
  margin-bottom: 16px;
}
.erp-hn-cot {
  display: flex;
  flex-direction: column;
}
.erp-hn-cot .erp-hang-doi {
  max-height: 520px;
  overflow-y: auto;
}
.erp-hn-bieu {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: inline-grid;
  place-items: center;
  flex: none;
  background: var(--erp-surface-3);
  color: var(--erp-text-2);
}
.erp-hn-bieu .erp-ic {
  width: 15px;
  height: 15px;
}
.erp-hn-bieu.loi {
  background: var(--erp-loi-soft);
  color: var(--erp-loi);
}
.erp-hn-bieu.warn {
  background: var(--erp-warn-soft);
  color: var(--erp-warn);
}
.erp-hn-bieu.info {
  background: var(--erp-info-soft);
  color: var(--erp-info);
}
.erp-hn-cot .erp-viec .nut .erp-nut.giai-quyet {
  padding: 0 9px;
}

/* dòng hạn: ô đếm ngược + tên + mũi tên */
.erp-han {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--erp-border);
  text-decoration: none;
  color: inherit;
  transition: background 0.12s;
}
.erp-han:last-child {
  border-bottom: 0;
}
.erp-han:hover {
  background: color-mix(in srgb, var(--erp-surface-2) 60%, transparent);
}
.erp-han .dem-nguoc {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 44px;
  border-radius: 10px;
  background: var(--erp-surface-2);
  color: var(--erp-text-2);
  line-height: 1;
}
.erp-han .dem-nguoc b {
  font-size: 17px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.erp-han .dem-nguoc small {
  font-size: 9.5px;
  font-weight: 600;
  margin-top: 3px;
  white-space: nowrap;
}
.erp-han .dem-nguoc.loi {
  background: var(--erp-loi-soft);
  color: var(--erp-loi);
}
.erp-han .dem-nguoc.warn {
  background: var(--erp-warn-soft);
  color: var(--erp-warn);
}
.erp-han .noi b {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.erp-han .noi small {
  color: var(--erp-text-3);
  font-size: 12px;
}
.erp-han .mui {
  width: 16px;
  height: 16px;
  color: var(--erp-text-3);
  transition: transform 0.15s, color 0.15s;
}
.erp-han:hover .mui {
  transform: translateX(3px);
  color: var(--erp-accent);
}

/* hàng dưới: việc sắp tới + tạo việc */
.erp-hn-duoi {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 16px;
  align-items: start;
}
.erp-hn-mo > summary {
  cursor: pointer;
  list-style: none;
}
.erp-hn-mo > summary::-webkit-details-marker {
  display: none;
}
.erp-hn-mo > summary h3::before {
  content: "▸";
  display: inline-block;
  color: var(--erp-text-3);
  transition: transform 0.15s;
}
.erp-hn-mo[open] > summary h3::before {
  transform: rotate(90deg);
}
.erp-hn-mo:not([open]) > summary {
  border-bottom: 0;
}
.erp-hn-2o {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
div.erp-trong.nho:not(:has(.hinh)) {
  padding: 18px;
}

@media (max-width: 1100px) {
  .erp-hn-tien {
    grid-template-columns: minmax(0, 1fr);
  }
  .erp-hn-duoi {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 768px) {
  .erp-hn-dau h2 {
    font-size: 22px;
  }
  .erp-hn-nut {
    display: none; /* nút Tạo việc có ở cuối trang + bàn phím; đầu trang dành chỗ cho câu tóm */
  }
  .erp-hn-loi-tat {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-right: -16px;
    padding-right: 16px;
    scrollbar-width: none;
  }
  .erp-hn-loi-tat a {
    flex: none;
  }
  .erp-hn-tien-chinh .so-lon {
    font-size: 32px;
  }
  .erp-hn-tien-phu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .erp-hn-o {
    padding: 12px 13px;
  }
  .erp-hn-tien-phu > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  .erp-hn-o .so {
    font-size: 19px;
  }
  .erp-hn-luoi {
    grid-template-columns: minmax(0, 1fr);
  }
  .erp-hn-cot .erp-hang-doi {
    max-height: none;
  }
  .erp-viec.gon {
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 10px 12px;
  }
  .erp-viec.gon .nut {
    grid-column: auto;
  }
  .erp-viec.gon .nut .erp-nut:not(.giai-quyet) {
    display: none; /* tiêu đề đã là link mở — trên điện thoại giữ 1 nút Giải quyết */
  }
  .erp-viec.gon .nut .giai-quyet span {
    display: none;
  }
  .erp-viec.gon .nut .giai-quyet {
    width: 34px;
    padding: 0;
  }
  .erp-hn-2o {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .erp-han {
    padding: 10px 12px;
  }
  .erp-dau-trang h2,
  .erp-body .erp-noi-dung > h2:first-child {
    font-size: 21px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .erp-vao,
  .erp-noi-dung > .erp-kpi .erp-kpi-o,
  .erp-noi-dung > .erp-the,
  .erp-noi-dung > .erp-luoi-2,
  .erp-noi-dung > .erp-luoi-chia {
    animation: none !important;
  }
  .erp-hn-o:hover,
  .erp-hn-tien-chinh:hover,
  a.erp-kpi-o:hover {
    transform: none;
  }
}

/* khối KPI đặt thẳng trong thẻ (vd /bao-cao): có lề như phần thân thẻ */
.erp-the > .erp-kpi {
  padding: 16px 18px 0;
  margin-bottom: 16px;
}
/* các thẻ xếp chồng trực tiếp trong trang luôn có nhịp 16px */
.erp-noi-dung > .erp-the + .erp-the,
.erp-noi-dung > .erp-the + .erp-luoi-2,
.erp-noi-dung > .erp-luoi-2 + .erp-the,
.erp-noi-dung > .erp-kpi + .erp-the {
  margin-top: 16px;
}

/* [nghiệm thu đợt 3 · 04/11/2026] Điện thoại: thẻ có <small> mô tả ngay cạnh <h3> ⇒ chữ nhỏ bóp tiêu đề thành cột hẹp
   ("Hàng / duyệt", "2 job ERP đang / CHẾT" xuống 4 dòng). Cho chữ nhỏ xuống dòng dưới, tiêu đề giữ nguyên một dòng. */
@media (max-width: 560px) {
  .erp-the-dau:has(> small) {
    flex-wrap: wrap;
    row-gap: 4px;
  }
  .erp-the-dau:has(> small) > h3 {
    flex: 0 1 auto;
    max-width: 100%;
  }
  .erp-the-dau:has(> h3) > small {
    flex: 1 1 220px;
    min-width: 0;
  }
}