:root {
  --bg: #f4f6f8;
  --panel: #ffffff;
  --ink: #1b2733;
  --muted: #6b7a89;
  --line: #dde3e9;
  --brand: #0f6fc5;
  --ok: #12855b;
  --warn: #b8860b;
  --bad: #c0392b;
  --radius: 8px;
}

* { box-sizing: border-box; }

/* Thuoc tinh "hidden" cua HTML chi ap display:none o do uu tien thap nhat cua trinh
   duyet, nen BAT KY class nao dat display deu thang no. Trang nay co .modal va
   .login-wrap dung display:grid - thieu dong duoi day thi hop thoai rong hien de len
   man hinh dang nhap, va man hinh dang nhap khong chiu an di sau khi vao duoc he thong.
   Dat mot lan o day de moi phan tu dung "hidden" deu hoat dong dung nhu ky vong. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.5 "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* --- Đăng nhập ------------------------------------------------------------- */
.login-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #0f6fc5, #0a4f8f);
}
.login-card {
  background: #fff;
  padding: 32px;
  border-radius: 12px;
  width: min(380px, 92vw);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .22);
}
.login-card h1 { margin: 0; font-size: 30px; color: var(--brand); letter-spacing: 1px; }
/* Logo D360.AI: phần ".AI" mang màu xanh lá của ứng dụng di động, cùng dải màu với biểu tượng. */
.login-logo { display: flex; align-items: center; gap: 14px; }
.login-logo img { flex: none; }
.login-logo h1, .brand span { color: #0b2545; font-weight: 800; letter-spacing: .5px; }
.login-card h1 span, .brand b { color: #00a86b; }
.login-card label { display: block; margin: 16px 0 0; font-weight: 600; font-size: 13px; }
.login-card input {
  width: 100%; margin-top: 5px; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: 6px; font-size: 14px;
}
.login-card input:focus { outline: 2px solid var(--brand); outline-offset: -1px; border-color: var(--brand); }

/* Ô tích "ghi nhớ": nằm ngang cạnh nhãn, không kéo rộng hết dòng như các ô nhập
   ở trên. Thiếu width:auto thì quy tắc .login-card input phía trên biến ô tích
   thành một khối vuông to bằng cả hàng. */
.login-card .login-remember {
  display: flex; align-items: center; gap: 8px;
  margin-top: 18px; font-weight: 500; cursor: pointer;
}
.login-card .login-remember input { width: auto; margin: 0; }
.login-card button {
  width: 100%; margin-top: 22px; padding: 11px;
  background: var(--brand); color: #fff; border: 0; border-radius: 6px;
  font-size: 15px; font-weight: 600; cursor: pointer;
}
.login-card button:hover { background: #0c5da6; }
.login-card button:disabled { opacity: .6; cursor: default; }

/* --- Khung ứng dụng -------------------------------------------------------- */
header {
  display: flex; align-items: center; gap: 16px;
  background: var(--panel); padding: 0 20px;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
}
.brand { display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 700; color: var(--brand); letter-spacing: 1px; white-space: nowrap; }
.brand img { flex: none; display: block; }
.brand b { font-weight: 700; }
/* Thanh nhóm cũ ẩn hẳn - chọn nhóm ở Trang chủ dạng ô. */
nav { display: flex; gap: 2px; margin-right: auto; }
nav button {
  background: none; border: 0; border-bottom: 3px solid transparent;
  padding: 16px 14px; cursor: pointer; font-size: 14px; color: var(--muted); white-space: nowrap;
}

/* Trong một nhóm: "← Trang chủ" | biểu tượng + tên nhóm tô màu ô của nó. */
.group-bar { display: flex; align-items: center; gap: 14px; margin-right: auto; min-width: 0; padding: 10px 0; }
.home-back {
  display: inline-flex; align-items: center; gap: 6px; flex: none; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  border-radius: 999px; padding: 7px 14px; font-size: 14px; font-weight: 600;
}
.home-back:hover { border-color: var(--brand); color: var(--brand); }
/* Mắt xích "← Kế toán" khi đi từ nhóm khác sang (liên kết ↗): nổi màu brand để thấy ngay đường về. */
.group-via { display: inline-flex; flex: none; }
.crumb-back { border-color: var(--brand); color: var(--brand); }
@media (max-width: 520px) {
  .group-bar { gap: 8px; }
  .home-back { padding: 6px 10px; font-size: 13px; }
}
.group-title { display: inline-flex; align-items: center; gap: 10px; min-width: 0;
  font-size: 17px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.group-title .group-icon { display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 32px; height: 32px; border-radius: 8px; color: #fff; background: var(--tile, #334155); }
header .who { margin-left: auto; }
nav button {
  background: none; border: 0; border-bottom: 3px solid transparent;
  padding: 16px 11px; cursor: pointer; font-size: 14px; color: var(--muted);
  white-space: nowrap; flex: 0 0 auto;
}
nav button:hover { color: var(--ink); }
nav button.active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }
/* Thanh tiêu đề gom về MỘT nút biểu tượng, mọi thứ còn lại nằm trong menu thả xuống.

   Đánh đổi cần biết: mã công ty không còn hiện thường trực trên thanh. Hệ thống này
   nhiều công ty dùng chung, nên tên công ty được đặt ngay dòng đầu của menu và cũng
   nằm trong thuộc tính title của nút - mở menu một lần là thấy mình đang ở đâu. */
.who { position: relative; display: flex; align-items: center; flex: none; }

.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--brand); color: #fff; border: 0; cursor: pointer;
  font-size: 13px; font-weight: 700; letter-spacing: .5px;
  display: grid; place-items: center;
}
.avatar:hover { filter: brightness(1.1); }
.avatar[aria-expanded="true"] { box-shadow: 0 0 0 3px #e8f1fa; }

.menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
  min-width: 220px; background: #fff; border: 1px solid var(--line);
  border-radius: 8px; padding: 6px; box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}
.menu-head {
  padding: 10px 12px 12px; border-bottom: 1px solid var(--line);
  margin-bottom: 6px; font-size: 13px; line-height: 1.7;
}
.menu button {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; border-radius: 6px;
  padding: 9px 12px; font-size: 13px; cursor: pointer; color: var(--ink);
}
.menu button:hover { background: #eef2f6; }
.tag {
  background: #e8f1fa; color: var(--brand);
  padding: 2px 9px; border-radius: 20px; font-weight: 600; font-size: 12px;
}
.link { background: none; border: 0; color: var(--muted); cursor: pointer; text-decoration: underline; }

.filters {
  display: flex; align-items: end; gap: 14px;
  padding: 14px 20px; background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.filters label { display: flex; flex-direction: column; font-size: 12px; color: var(--muted); gap: 4px; }
.filters input { padding: 6px 9px; border: 1px solid var(--line); border-radius: 6px; font-size: 14px; }
.filters button {
  padding: 7px 18px; background: var(--brand); color: #fff;
  border: 0; border-radius: 6px; cursor: pointer; font-weight: 600;
}

main { padding: 20px; max-width: 1500px; margin: 0 auto; }

.panel {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px; margin-bottom: 18px;
}
.panel h2 { margin: 0 0 14px; font-size: 15px; font-weight: 600; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 18px; }
.muted { color: var(--muted); font-weight: 400; font-size: 13px; }

/* --- KPI ------------------------------------------------------------------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: 14px; margin-bottom: 18px; }
.kpi {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px;
}
.kpi .label { font-size: 12px; color: var(--muted); }
.kpi .value { font-size: 26px; font-weight: 700; margin-top: 4px; }
.kpi .sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.kpi.good .value { color: var(--ok); }
.kpi.bad .value { color: var(--bad); }

/* --- Bảng ------------------------------------------------------------------ */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--line); }
th { font-weight: 600; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .3px; }
tbody tr:hover { background: #f8fafc; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table-scroll { overflow-x: auto; }

.pill { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.pill.ok { background: #e3f5ec; color: var(--ok); }
.pill.warn { background: #fdf3dc; color: var(--warn); }
.pill.bad { background: #fbe6e3; color: var(--bad); }
.pill.info { background: #e8f1fa; color: var(--brand); }

.bar { background: #e8f1fa; height: 7px; border-radius: 4px; overflow: hidden; margin-top: 4px; }
.bar > span { display: block; height: 100%; background: var(--brand); }

.empty { padding: 28px; text-align: center; color: var(--muted); }
.error { margin-top: 14px; padding: 10px; background: #fbe6e3; color: var(--bad); border-radius: 6px; font-size: 13px; }

.rowlink { cursor: pointer; }

/* --- Biểu đồ (SVG thuần, không thư viện ngoài) ------------------------------ */
#chart svg, #scatter svg { width: 100%; height: auto; display: block; }
.axis { stroke: var(--line); stroke-width: 1; }
.axis-text { fill: var(--muted); font-size: 10px; }
.series-visits { fill: #9dc6ea; }
.series-orders { fill: var(--brand); }
.legend { display: flex; gap: 18px; font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.legend i { display: inline-block; width: 11px; height: 11px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }

/* --- Hộp thoại ------------------------------------------------------------- */
.modal { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); display: grid; place-items: center; z-index: 50; padding: 20px; }
.modal-card {
  background: #fff; border-radius: 10px; padding: 24px;
  width: min(880px, 96vw); max-height: 88vh; overflow: auto; position: relative;
}
.close { position: absolute; top: 12px; right: 14px; background: none; border: 0; font-size: 26px; cursor: pointer; color: var(--muted); line-height: 1; }

#toast {
  position: fixed; bottom: 22px; right: 22px;
  background: var(--ink); color: #fff; padding: 11px 18px;
  border-radius: 6px; font-size: 13px; z-index: 60;
}

/* Thông báo phải đọc kỹ - cảnh báo công nợ, đơn được cho qua hạn mức. Rộng hơn để câu
   dài không dồn thành một dòng dài, và có gợi ý bấm để tắt vì nó không tự tắt. */
#toast.sticky {
  max-width: min(420px, calc(100vw - 44px));
  background: var(--bad);
  cursor: pointer;
  line-height: 1.5;
}

/* --- Màn hình hẹp ----------------------------------------------------------
   Thanh tiêu đề là một hàng flex không xuống dòng: thương hiệu + 5 mục menu +
   khối tài khoản cộng lại khoảng 574px, nên ở màn hình 390px nó đẩy cả trang
   tràn ngang 184px. Người dùng phải vuốt sang ngang mới đọc hết, và menu bị cắt.

   Cho tiêu đề xuống dòng, và để dải menu tự cuộn ngang trong khung của nó thay
   vì đẩy cả trang - cuộn cục bộ thì chấp nhận được, cuộn cả trang thì không. */
@media (max-width: 760px) {
  header {
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 14px;
  }

  nav {
    order: 3;
    width: 100%;
    margin-right: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  nav::-webkit-scrollbar { display: none; }
  nav button { padding: 11px 12px; white-space: nowrap; }

  .who { margin-left: auto; }

  .filters { flex-wrap: wrap; padding: 12px 14px; gap: 10px; }
  .filters label { flex: 1 1 130px; }
  .filters button { flex: 0 0 auto; }
  #range-hint { flex-basis: 100%; }

  main { padding: 14px; }
  .panel { padding: 14px; }
  .kpis { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
  .kpi .value { font-size: 21px; }
  .cols { grid-template-columns: 1fr; }

  .modal-card { padding: 18px; }
}

/* --- Đầu bảng có thanh công cụ --------------------------------------------- */
.panel-head {
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap; margin-bottom: 14px;
}
.panel-head h2 { margin: 0; margin-right: auto; }
.panel-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.panel-actions input, .panel-actions select {
  padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px;
}
.panel-actions input[type="search"] { min-width: 220px; }
.panel-actions button {
  padding: 7px 14px; background: var(--brand); color: #fff;
  border: 0; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 13px;
}
.panel-actions button:hover { background: #0c5da6; }

/* --- Nút thao tác trong bảng ------------------------------------------------ */
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.btn-sm {
  padding: 4px 10px; font-size: 12px; border-radius: 5px;
  border: 1px solid var(--line); background: #fff; cursor: pointer; white-space: nowrap;
}
.btn-sm:hover { background: #f2f6fa; border-color: var(--brand); color: var(--brand); }
.btn-sm.danger:hover { background: #fbe6e3; border-color: var(--bad); color: var(--bad); }
.btn-sm.primary { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn-sm.primary:hover { background: #0c5da6; color: #fff; }
.btn-sm:disabled { opacity: .45; cursor: not-allowed; }

/* --- Biểu mẫu trong hộp thoại ----------------------------------------------- */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.form-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; }
.form-grid input, .form-grid select {
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px;
  font-size: 14px; font-weight: 400;
}
.form-grid .full { grid-column: 1 / -1; }
.form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
.form-actions button {
  padding: 9px 20px; border-radius: 6px; border: 1px solid var(--line);
  background: #fff; cursor: pointer; font-size: 14px;
}
.form-actions button.primary { background: var(--brand); color: #fff; border-color: var(--brand); font-weight: 600; }
.hint { font-size: 12px; color: var(--muted); font-weight: 400; }

/* --- Sơ đồ tổ chức --------------------------------------------------------- */
.org-node { border-left: 2px solid var(--line); margin-left: 10px; padding-left: 14px; }
.org-node:first-child { margin-left: 0; }

.org-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 12px; margin: 6px 0;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
}
.org-row:hover { border-color: var(--brand); }
.org-row.inactive { opacity: .55; }

.org-toggle {
  width: 20px; height: 20px; flex: 0 0 20px;
  border: 1px solid var(--line); border-radius: 4px; background: #fff;
  cursor: pointer; font-size: 12px; line-height: 1; color: var(--muted);
}
.org-toggle.leaf { visibility: hidden; }

.org-name { font-weight: 600; }
.org-type {
  font-size: 11px; padding: 2px 8px; border-radius: 20px;
  background: #eef3f8; color: var(--muted); font-weight: 600;
}
.org-head { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Danh sách nhân sự của một đơn vị */
.org-members { margin: 2px 0 8px 44px; display: flex; flex-wrap: wrap; gap: 6px; }
.org-member {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 20px; font-size: 12px;
  background: #f4f7fa; border: 1px solid var(--line);
}
.org-member.supervisor { background: #e8f1fa; border-color: #b9d5ef; }
.org-member.manager { border-color: var(--brand); font-weight: 600; }
.org-member.locked { opacity: .5; text-decoration: line-through; }
.org-member .role { color: var(--muted); font-size: 11px; }

/* --- Menu con của từng nhóm ------------------------------------------------ */
.subnav {
  display: flex; gap: 4px; flex-wrap: wrap;
  padding: 8px 20px; background: #eef2f6;
  border-bottom: 1px solid var(--line);
}
.subnav button {
  background: none; border: 1px solid transparent; border-radius: 6px;
  padding: 6px 14px; cursor: pointer; font-size: 13px; color: var(--muted);
}
.subnav button:hover { background: #fff; color: var(--ink); }
.subnav button.active {
  background: #fff; color: var(--brand); font-weight: 600; border-color: var(--line);
}
@media (max-width: 760px) {
  .subnav { padding: 8px 14px; overflow-x: auto; flex-wrap: nowrap; }
  .subnav button { white-space: nowrap; }
}

/* --- Ảnh trưng bày (chương XIII) ------------------------------------------- */
.photo-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px;
}
.photo-card {
  border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
  background: #fff; cursor: pointer; display: flex; flex-direction: column;
}
.photo-card:hover { border-color: var(--brand); }
/* Khung ảnh cố định tỷ lệ để lưới không nhảy khi ảnh tải xong từng cái một. */
.photo-card .frame {
  aspect-ratio: 4 / 3; background: #eef2f6;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 12px;
}
.photo-card .frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-card .meta { padding: 9px 11px; font-size: 12px; line-height: 1.5; }
.photo-card .meta strong { font-size: 13px; }
.photo-full {
  max-width: 100%; max-height: 62vh; object-fit: contain;
  border: 1px solid var(--line); border-radius: 6px; background: #eef2f6;
}

/* --- Hồ sơ điểm bán: tổng quan 360 và dòng thời gian ----------------------- */
/* Hộp thoại rộng hơn mặc định khi bên trong là hồ sơ điểm bán.

   Bám theo NỘI DUNG chứ không gắn class lên thẻ dùng chung: thẻ hộp thoại chỉ có một
   cái cho cả trang, gắn class vào đó thì mọi hộp thoại mở sau cũng rộng theo cho tới
   khi tải lại trang. */
.modal-card:has(#customer-profile) { width: min(1180px, 96vw); }

/* Nút lọc dạng thẻ trên dòng thời gian. */
.chip {
  border: 1px solid var(--line); background: #fff; border-radius: 20px;
  padding: 4px 13px; font-size: 12px; cursor: pointer; color: var(--muted);
}
.chip:hover { border-color: var(--brand); }
.chip.active { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }

.profile-metrics {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 12px;
  margin-bottom: 18px;
}
.profile-metrics .kpi { padding: 12px 14px; }

.alerts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.alert {
  border-left: 4px solid var(--line); border-radius: 6px;
  padding: 9px 13px; font-size: 13px; background: #f6f8fa;
}
.alert.bad { border-left-color: var(--bad); background: #fbe6e3; }
.alert.warn { border-left-color: var(--warn); background: #fdf3dc; }
.alert.info { border-left-color: var(--brand); background: #e8f1fa; }

/* Đường kẻ dọc chạy suốt dòng thời gian, chấm tròn của mỗi mục nằm đè lên nó. */
.timeline { list-style: none; margin: 0; padding: 0 0 0 22px; border-left: 2px solid var(--line); }
.timeline li { position: relative; padding: 0 0 16px 16px; }
.timeline li::before {
  content: ""; position: absolute; left: -25px; top: 4px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--muted); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line);
}
.timeline li[data-kind="visit"]::before { background: var(--brand); }
.timeline li[data-kind="order"]::before { background: #8a63d2; }
.timeline li[data-kind="invoice"]::before { background: var(--ok); }
.timeline li[data-kind="return"]::before { background: var(--bad); }
.timeline li[data-kind="debt"]::before { background: var(--warn); }
.timeline li[data-kind="photo"]::before { background: #d2638a; }
.timeline li[data-kind="task"]::before { background: #63a8d2; }
.timeline .when { font-size: 12px; color: var(--muted); }
.timeline .what { font-size: 13px; font-weight: 600; }
.timeline .who { font-size: 12px; color: var(--muted); }
.timeline .amount { font-weight: 600; }
.timeline .amount.minus { color: var(--ok); }

/* --- Hướng dẫn bắt đầu (mục 1.2) --------------------------------------------
   Danh sách có số thứ tự thật: các bước phụ thuộc nhau (chưa có điểm bán thì không
   phân được tuyến), nên số ở đây mang thông tin chứ không phải trang trí. */
.onb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.onb-step {
  display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: center;
  padding: 9px 4px; border-bottom: 1px solid var(--line);
}
.onb-step:last-child { border-bottom: 0; }
.onb-mark {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; background: #eef2f6; color: var(--muted);
}
.onb-step.done .onb-mark { background: #e3f5ec; color: var(--ok); }
.onb-step.done .onb-text strong { color: var(--muted); font-weight: 500; }

/* Tiêu đề nhóm (đối tượng nghiệp vụ) trong bảng cài đặt riêng từng nhân viên. */
tr.group-row th {
  text-align: left; background: #f3f6fa; color: var(--muted);
  font-size: 12px; text-transform: uppercase; letter-spacing: .4px;
}
.policy-object + .policy-object { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 4px; }

/* --- Nhắn tin nội bộ --------------------------------------------------------
   Nút ở thanh tiêu đề (thấy tin chưa đọc từ mọi màn hình) và một bảng trượt bên phải, để
   người đang lập phiếu trả lời được một câu mà không phải rời màn hình đang làm. */
.who { gap: 10px; }
.chat-btn {
  position: relative; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  cursor: pointer; display: grid; place-items: center;
}
.chat-btn:hover { background: #eef2f6; }
.chat-btn:focus-visible, .chat-icon:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.chat-badge {
  position: absolute; top: -5px; right: -7px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--bad); color: #fff; font-size: 11px; font-weight: 700;
  line-height: 18px; text-align: center; font-variant-numeric: tabular-nums;
}
.chat-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); z-index: 55;
  background: var(--panel); border-left: 1px solid var(--line);
  box-shadow: -8px 0 24px rgba(0, 0, 0, .12); display: flex; flex-direction: column;
}
.chat-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.chat-title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.chat-title strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-title .muted { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-icon {
  width: 30px; height: 30px; border: 0; background: none; border-radius: 6px;
  font-size: 18px; cursor: pointer; color: var(--ink);
}
.chat-icon:hover { background: #eef2f6; }
.chat-body { flex: 1; overflow-y: auto; padding: 10px 12px; background: var(--bg); }
.chat-item {
  display: flex; gap: 10px; width: 100%; text-align: left; font: inherit; color: var(--ink);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px; margin: 0 0 8px; cursor: pointer;
}
.chat-item:hover { border-color: var(--brand); }
.chat-item.unread strong { color: var(--brand); }
.chat-avatar {
  flex: 0 0 36px; height: 36px; border-radius: 50%; background: #e8f1fa; color: var(--brand);
  display: grid; place-items: center; font-weight: 700; font-size: 12px;
}
.chat-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chat-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.chat-row strong, .chat-preview { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-when { color: var(--muted); font-size: 12px; flex: none; }
.chat-preview { color: var(--muted); font-size: 13px; }
.chat-item.unread .chat-preview { color: var(--ink); }
.chat-count {
  flex: none; min-width: 18px; padding: 0 6px; border-radius: 9px; background: var(--brand);
  color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
.chat-msg {
  width: fit-content; max-width: 80%; margin: 6px 0; padding: 8px 12px 6px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px 14px 14px 4px;
}
.chat-msg.mine {
  margin-left: auto; background: var(--brand); border-color: var(--brand); color: #fff;
  border-radius: 14px 14px 4px 14px;
}
.chat-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-sender { font-size: 12px; font-weight: 700; color: var(--brand); margin-bottom: 2px; }
.chat-time { font-size: 11px; opacity: .7; margin-top: 2px; text-align: right; }
.chat-seen { text-align: right; font-size: 11px; color: var(--muted); margin: -2px 0 4px; }
.chat-older { text-align: center; margin: 2px 0 8px; }
.chat-form { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); background: var(--panel); }
.chat-form textarea {
  flex: 1; resize: none; font: inherit; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 6px;
}
.chat-form textarea:focus, .chat-search:focus, .chat-foot input:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
.chat-search, .chat-foot input {
  width: 100%; font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px;
}
.chat-hint { margin: 6px 0 8px; font-size: 12px; }
.chat-contact {
  display: flex; align-items: center; gap: 10px; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; margin-bottom: 6px;
}
.chat-contact label { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; cursor: pointer; }
.chat-contact input { width: auto; margin: 0; }
.chat-foot { position: sticky; bottom: -10px; display: flex; gap: 8px; padding: 10px 0; background: var(--bg); }
.chat-foot input { flex: 1; width: auto; min-width: 0; }
/* Nút trong bảng chat tự mang kiểu: lớp .primary của dự án chỉ có tác dụng trong khung biểu mẫu,
   ra ngoài thì thành nút xám mặc định của trình duyệt. */
.chat-form button[type="submit"], .chat-foot button {
  flex: none; padding: 9px 16px; border: 0; border-radius: 6px; background: var(--brand);
  color: #fff; font: inherit; font-weight: 600; cursor: pointer;
}
.chat-form button[type="submit"]:hover:not(:disabled), .chat-foot button:hover:not(:disabled) { filter: brightness(1.08); }
.chat-form button[type="submit"]:disabled, .chat-foot button:disabled { opacity: .5; cursor: default; }
.chat-form button[type="submit"]:focus-visible, .chat-foot button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .chat-panel { animation: chat-in .16s ease-out; }
  @keyframes chat-in { from { transform: translateX(24px); opacity: .6; } to { transform: none; opacity: 1; } }
}

/* --- Chương trình trưng bày --------------------------------------------------- */
.dp-req { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.dp-req select { flex: 1; min-width: 0; }
.dp-req input[type="number"] { width: 90px; }
.dp-brand {
  display: inline-block; margin: 1px 4px 1px 0; padding: 1px 8px; border-radius: 12px;
  font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.dp-brand.ok { background: #e3f5ec; color: var(--ok); }
.dp-brand.bad { background: #fbe6e3; color: var(--bad); }
.dp-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; }
.dp-add > input { flex: 1; min-width: 220px; }
.dp-add > #dp-cust-results { flex-basis: 100%; }
.dp-cust-list { max-height: 220px; overflow-y: auto; border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; margin-bottom: 8px; }
.dp-cust-list label { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
/* Ô tìm điểm bán nằm ngoài khung biểu mẫu nên không nhận kiểu ô nhập chung - tự khai. */
.dp-add > input {
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; font: inherit;
}
.dp-add > input:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
/* Nhãn đề xuất và kết luận không được bẻ đôi dòng trong cột hẹp. */
#modal-body [data-dp-outlet] .pill { white-space: nowrap; }

/* --- AI làm việc thay Sales --------------------------------------------------- */
.ai-card { margin-top: 10px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: #fafcff; }
.ai-card-head { margin-bottom: 6px; }
.ai-steps { margin: 4px 0 10px; padding-left: 18px; color: var(--muted); font-size: 13px; }
.ai-card .ai-steps { list-style: none; padding-left: 0; }
.ai-reason { font-size: 12px; margin-top: 2px; }
.ai-removed td { opacity: .6; }
.ai-card input[data-ai-qty] { width: 80px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; font: inherit; text-align: right; }
.ai-card input[data-ai-qty]:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
.ai-total { margin: 8px 0; font-variant-numeric: tabular-nums; }
.ai-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.ai-actions button { padding: 8px 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); cursor: pointer; font: inherit; }
.ai-actions button.primary { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.ai-actions button:disabled { opacity: .5; cursor: default; }
.ai-result { margin-top: 8px; }

/* --- Chăm sóc khách, Bắt đầu ngày ------------------------------------------------ */
.ai-today-head { margin-bottom: 8px; }
.ai-segments { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ai-today-sub { margin: 12px 0 6px; font-weight: 600; }
.ai-insights { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; margin-top: 10px; }
.ai-insight { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; background: var(--panel); display: flex; flex-direction: column; gap: 6px; }
.ai-insight-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ai-score { margin-left: auto; min-width: 34px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; border-radius: 12px; padding: 1px 8px; background: #eef2f6; }
.ai-next { font-weight: 600; color: var(--ink); }
.ai-reasons { margin: 0; padding-left: 18px; color: var(--muted); font-size: 13px; }
.ai-insight-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.ai-insight-actions a.btn-sm { text-decoration: none; display: inline-flex; align-items: center; }

/* --- Gợi ý đơn, cảnh báo giám sát, việc AI tự giao --------------------------------------- */
.ai-suggest table td { vertical-align: top; }
.ai-suggest .warn-text { color: var(--warn, #b45309); font-size: 12px; margin-top: 2px; }
.ai-auto-note { margin: 8px 0; padding: 8px 12px; border-radius: var(--radius); background: #eef6f0; }
.ai-alerts td { vertical-align: top; }

/* --- Dự báo KPI, tuyến gợi ý ------------------------------------------------------------ */
.ai-forecast { margin: 10px 0; }
.ai-forecast .ai-insight-head { margin-bottom: 6px; }
.ai-route-list { margin: 0; padding-left: 22px; }
.ai-route-list li { margin-bottom: 6px; }

/* --- Kho kiến thức, ghi chú viếng thăm / ảnh phiếu ---------------------------------------- */
.ai-capture { margin: 6px 0 14px; border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; background: var(--panel); }
.ai-capture summary { cursor: pointer; font-weight: 600; }
.ai-capture textarea { width: 100%; box-sizing: border-box; }
.ai-knowledge { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.ai-knowledge summary { cursor: pointer; }
.kb-excerpt { white-space: pre-line; color: var(--muted); font-size: 13px; padding: 6px 0 4px 8px; border-left: 3px solid var(--line); margin: 4px 0 0 4px; }
#kb-ask-result p { margin: 0 0 6px; }

/* --- Trước khi ghé ------------------------------------------------------------------------ */
.ai-brief { margin-top: 8px; }
.ai-brief-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; margin: 8px 0; }

/* --- Hành trình khách hàng ------------------------------------------------------------------ */
.ai-journey { margin-top: 6px; }
.ai-journey-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ai-journey-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin: 10px 0; }
.ai-health td { vertical-align: top; }
.ai-bar { background: #eef2f6; height: 6px; border-radius: 3px; margin-top: 6px; }
.ai-bar span { display: block; height: 6px; border-radius: 3px; background: var(--brand); }
.ai-months { display: flex; gap: 6px; align-items: flex-end; height: 84px; margin-bottom: 8px; }
.ai-months div { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.ai-months span { display: block; width: 100%; min-height: 2px; background: var(--brand); border-radius: 3px 3px 0 0; }
.ai-months em { font-style: normal; font-size: 10px; color: var(--muted); margin-top: 2px; }
.ai-offer { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; margin: 8px 0; background: var(--panel); }

/* --- Zalo OA ------------------------------------------------------------------------ */
/* Hộp gửi mở CHỒNG lên hồ sơ khách (cũng là một .modal), nên phải nằm lớp trên. */
#zalo-modal { z-index: 60; }
.zalo-card { width: min(760px, 96vw); }
.zalo-flags { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 10px 0; font-size: 13px; }
.zalo-flags label { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.zalo-flags input[type="checkbox"] { width: auto; }
.zalo-templates textarea { width: 100%; min-width: 240px; font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
.zs-message { margin: 14px 0 8px; font-weight: 600; }

/* --- Phân tích đội ------------------------------------------------------------------ */
.aiteam-reasons { margin: 6px 0 12px; padding-left: 20px; }
.aiteam-reasons li { margin: 3px 0; }

/* --- Dự báo nhu cầu ------------------------------------------------------------------ */
.dm-spark { display: inline-flex; align-items: flex-end; gap: 2px; height: 24px; }
.dm-spark i { display: block; width: 5px; background: var(--primary, #1f7a4d); border-radius: 1px; opacity: .8; }
.dm-reason { min-width: 260px; font-size: 12.5px; }

/* --- Hiệu quả trợ lý ----------------------------------------------------------------- */
.aieffect-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.aieffect-tiles > div { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.aieffect-tiles strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.aieffect-notes { margin: 6px 0 12px; padding-left: 20px; }
.aieffect-notes li { margin: 3px 0; }

/* --- Quy tắc KHI ... THÌ ... ------------------------------------------------------------ */
.rule-editor { border: 1px solid var(--line); border-radius: 8px; padding: 14px; margin-top: 12px; }
.rule-editor h4 { margin: 14px 0 6px; }
.rule-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 6px; }
.rule-row select, .rule-row input { width: auto; min-width: 0; }
.rule-row [data-rc-value], .rule-row [data-ra-text] { flex: 1 1 220px; }
.rule-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.rule-inline input[type="checkbox"] { width: auto; }
.rule-inline input[type="number"] { width: 64px; }
.rule-desc { min-width: 320px; font-size: 13px; }

/* --- Biểu tượng Trợ lý AI -------------------------------------------------------------- */
nav button.nav-ai { display: inline-flex; align-items: center; gap: 7px; }
.ai-spark {
  display: inline-grid; place-items: center; width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%;
  color: #fff; background: linear-gradient(135deg, #7c4dff 0%, #00bfa5 100%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 0 0 1.5px rgba(255, 255, 255, .7);
}
.ai-spark-lg { width: 30px; height: 30px; flex-basis: 30px; }
.ai-spark-lg svg { width: 17px; height: 17px; }
h2.ai-title { display: flex; align-items: center; gap: 10px; }

/* --- Khách hàng 360 --------------------------------------------------------------------- */
.c360 {
  display: flex; align-items: center; gap: 18px; margin: 14px 0 8px; padding: 16px 20px;
  border-radius: 14px; color: #fff; cursor: pointer;
  background: linear-gradient(135deg, #12805a 0%, #0b4f5c 100%);
  box-shadow: 0 8px 22px rgba(11, 79, 92, .28);
  transition: transform .15s ease, box-shadow .15s ease;
}
.c360:hover, .c360:focus-visible { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(11, 79, 92, .36); outline: none; }
.c360:focus-visible { box-shadow: 0 0 0 3px #ffe082, 0 10px 26px rgba(11, 79, 92, .36); }
.c360-loading { cursor: default; flex-direction: column; align-items: flex-start; gap: 4px; opacity: .85; }
.c360-ring {
  --c: #b9f6ca;
  width: 86px; height: 86px; flex: 0 0 86px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background:
    radial-gradient(closest-side, #0e6657 80%, transparent 81% 100%),
    conic-gradient(var(--c) calc(var(--p) * 1%), rgba(255, 255, 255, .18) 0);
}
.c360-ring.mid { --c: #ffe082; }
.c360-ring.low { --c: #ffab91; }
.c360-ring strong { font-size: 27px; line-height: 1; font-variant-numeric: tabular-nums; }
.c360-ring span { font-size: 10px; opacity: .8; }
.c360-main { flex: 1; min-width: 0; }
.c360-eyebrow { font-size: 11px; letter-spacing: .16em; font-weight: 700; opacity: .75; }
.c360-stage { font-size: 22px; font-weight: 800; margin: 2px 0 7px; text-wrap: balance; }
.c360-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.c360-chips span {
  font-size: 12px; padding: 3px 10px; border-radius: 20px;
  background: rgba(255, 255, 255, .15); border: 1px solid rgba(255, 255, 255, .35);
}
.c360-chips .risk-3 { background: rgba(255, 138, 101, .35); border-color: #ffab91; }
.c360-chips .risk-2 { background: rgba(255, 213, 79, .25); border-color: #ffe082; }
.c360-next { margin-top: 10px; padding: 8px 12px; border-radius: 9px; background: rgba(255, 255, 255, .13); font-weight: 600; }
.c360-next em { font-style: normal; color: #ffe082; }
.c360-go { font-weight: 700; white-space: nowrap; opacity: .9; }
@media (max-width: 640px) {
  .c360 { flex-wrap: wrap; }
  .c360-go { width: 100%; text-align: right; }
}

/* --- Biểu tượng menu ------------------------------------------------------------------ */
nav button.nav-iconed { display: inline-flex; align-items: center; gap: 7px; }
nav button .ui-icon { flex: 0 0 auto; opacity: .82; }
nav button.active .ui-icon, nav button:hover .ui-icon { opacity: 1; }
#subnav button { display: inline-flex; align-items: center; gap: 6px; }
#subnav button .ui-icon { flex: 0 0 auto; opacity: .7; }
#subnav button.active .ui-icon, #subnav button:hover .ui-icon { opacity: 1; }
#subnav button[data-section="tab-aijourney"] .ui-icon { color: #12805a; opacity: 1; }

/* --- Điểm bán chờ duyệt ----------------------------------------------------------------- */
.pending-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.pending-card { border: 1px solid var(--line); border-left: 4px solid #f59e0b; border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; background: #fff; }
.pending-card header { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.pending-docs { display: flex; gap: 8px; flex-wrap: wrap; }
.pending-docs figure { margin: 0; width: 120px; }
.pending-docs img { width: 120px; height: 84px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); cursor: zoom-in; background: #f3f4f6; }
.pending-docs figcaption { font-size: 11px; color: var(--muted); text-align: center; }
.pending-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 4px; }

/* --- CRM 360 -------------------------------------------------------------------------- */
nav button[data-group="crm"] .ui-icon { color: #12805a; opacity: 1; }
.crm-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-bottom: 12px; }
.crm-kpis > div { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; }
.crm-kpis span { font-size: 12px; color: var(--muted); }
.crm-kpis strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.crm-kpis em { font-style: normal; font-size: 12px; color: var(--muted); }
.crm-kpis .crm-kpi-bad { border-color: #f87171; background: #fff5f5; }
.kanban { display: grid; grid-template-columns: repeat(5, minmax(220px, 1fr)); gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.kanban-col { background: #f4f6fa; border: 1px solid var(--line); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 8px; min-height: 240px; }
.kanban-col header { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.kanban-col.drag-over, .kanban-drop.drag-over { outline: 2px dashed #12805a; outline-offset: -3px; background: #ecfdf5; }
.kanban-sum { font-size: 12px; }
.kanban-card { background: #fff; border: 1px solid var(--line); border-left: 4px solid #2f49d1; border-radius: 8px; padding: 8px 10px; cursor: grab; display: flex; flex-direction: column; gap: 2px; }
.kanban-card:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }
.kanban-amount { font-weight: 800; font-variant-numeric: tabular-nums; }
.kanban-next { font-size: 12px; color: #12805a; }
.kanban-empty { text-align: center; padding: 20px 0; }
.kanban-drop { border: 1px dashed var(--line); border-radius: 8px; padding: 14px 10px; text-align: center; font-size: 13px; background: #fff; }
.kanban-drop.win { border-color: #34d399; }
.kanban-drop.lose { border-color: #f87171; }
.quote-line { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 6px; }
.quote-line select, .quote-line input { width: auto; min-width: 0; }
.quote-line [data-ql-product] { flex: 1 1 280px; }
.quote-line [data-ql-qty], .quote-line [data-ql-disc] { width: 90px; }
tr.case-overdue td { background: #fff5f5; }

/* --- Cấu hình hệ thống chia thẻ ------------------------------------------------------------------- */
.settings-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.settings-tabs button { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 14px; font-size: 13px; cursor: pointer; }
.settings-tabs button:hover { border-color: #2f49d1; }
.settings-tabs button.active { background: #2f49d1; color: #fff; border-color: #2f49d1; }
#tab-settings > .panel.settings-off { display: none; }

/* --- Nhân viên PG --------------------------------------------------------------------------------- */
nav button[data-group="pg"] .ui-icon { color: #b45309; opacity: 1; }
.pg-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.pg-photos figure { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px; }
.pg-photos img { width: 100%; border-radius: 6px; display: block; }
.pg-photos figcaption { font-size: 12px; margin-top: 6px; line-height: 1.5; }

/* Dòng thời gian đang tải lại sau khi đổi bộ lọc.
   Mờ đi và chặn bấm tiếp: không có dấu hiệu nào thì người dùng tưởng nút không ăn, bấm dồn
   thêm mấy lần nữa, và mỗi lần bấm lại là một yêu cầu chạy song song. */
#timeline.is-loading { opacity: .45; pointer-events: none; transition: opacity .12s ease; }

/* Thẻ lọc dòng thời gian - đè lên ".panel-actions button".
   Các thẻ nằm trong .panel-actions, mà quy tắc đó cho MỌI nút nền xanh chữ trắng và nó
   đặc hiệu hơn ".chip" (0,1,1 so với 0,1,0). Hậu quả: thẻ đang tắt trông y hệt thẻ đang
   bật, người dùng bấm mà không thấy gì đổi nên tưởng nút hỏng. Dùng "#tl-filters .chip"
   (1,1,0) để thắng chắc, và cho hai trạng thái khác hẳn nhau. */
#tl-filters .chip, #acm-kinds .chip {
  background: #fff; color: var(--muted); border: 1px solid var(--line);
  border-radius: 20px; padding: 5px 14px; font-size: 12px; font-weight: 500;
}
#tl-filters .chip:hover, #acm-kinds .chip:hover { border-color: var(--brand); color: var(--brand); background: #f4f8fd; }
#tl-filters .chip.active, #acm-kinds .chip.active {
  background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 700;
}

/* --- Ban do (Leaflet) ----------------------------------------------------- */
/* z-index: 0 tao mot tang xep rieng: cac lop ben trong Leaflet len toi 1000,
   khong khoa lai thi chung deo len tren hop thoai va thong bao. */
.map-view {
  position: relative;
  z-index: 0;
  height: 460px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.map-view.leaflet-container {
  font: inherit;
  background: #eef2f5;   /* nen khi chua/khong tai duoc anh ban do */
}

.map-view .leaflet-popup-content {
  margin: 10px 12px;
  line-height: 1.5;
}

.map-view-warning {
  position: absolute;
  left: 56px;
  top: 8px;
  z-index: 500;
  max-width: 62%;
  padding: 6px 10px;
  border-radius: var(--radius);
  background: rgba(27, 39, 51, .85);
  color: #fff;
  font-size: 12px;
}

@media (max-width: 720px) {
  .map-view { height: 320px; }
}

/* --- Trang chủ dạng ô vuông (kiểu Windows Start) -----------------------------------
   Mỗi nhóm một ô màu riêng: nhìn màu là nhận ra nhóm, không phải đọc chữ. Ô vuông tự sắp
   theo lưới - màn rộng nhiều cột, điện thoại 2 cột. Bấm ô = mở nhóm với menu như cũ. */
.brand[role=link] { cursor: pointer; }
.home-head { display: flex; align-items: flex-end; justify-content: space-between; margin: 8px 0 18px; }
.home-head h1 { margin: 0; font-size: 24px; }
.home-head p { margin: 4px 0 0; }
.home-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.home-tile {
  position: relative; aspect-ratio: 1 / 1; border: 0; border-radius: 14px; cursor: pointer;
  display: flex; flex-direction: column; justify-content: space-between; text-align: left;
  padding: 18px; color: #fff; background: var(--tile, #334155);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .12);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.home-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15, 23, 42, .22); filter: brightness(1.06); }
.home-tile:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.home-tile .ui-icon { opacity: .95; }
.home-tile-name { font-size: 17px; font-weight: 700; line-height: 1.25; }
.home-tile-meta { font-size: 12.5px; opacity: .88; line-height: 1.4; margin-top: 4px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.home-tile-count { position: absolute; top: 14px; right: 14px; font-size: 12px; font-weight: 600;
  background: rgba(255, 255, 255, .2); padding: 2px 8px; border-radius: 999px; }
@media (max-width: 760px) {
  .home-tiles { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .home-tile { padding: 14px; }
  .home-tile-name { font-size: 15px; }
  .home-tile-meta { display: none; }
}

/* Bảng cân đối số phát sinh: dòng TK cấp 1 và dòng tổng tách khỏi chi tiết để mắt dò theo cột. */
table.trial-balance tr.tb-l1 td { background: #f7f9fc; }
table.trial-balance tr.tb-total td { border-top: 2px solid var(--line); background: #eef3f9; }
table.trial-balance th[colspan] { text-align: center; }

/* --- Không gian làm việc dạng cây + nhiều tab (nhóm Kế toán) -------------------------------------
   main thành lưới hai cột: cây bên trái (dính khi cuộn), thanh tab + màn hình bên phải. Màn hình (section)
   vẫn là con trực tiếp của main nên chỉ cần xếp cột, không phải chuyển DOM. */
/* Độ rộng cây là biến --ws-tree-w: người dùng kéo thanh ở mép phải cây để đổi (11/10: "cây menu kế toán không kéo rộng ra được"). */
main.ws-mode { display: grid; grid-template-columns: var(--ws-tree-w, 260px) minmax(0, 1fr); column-gap: 16px; align-items: start; max-width: none; }
main.ws-mode > #ws-tree { grid-column: 1; grid-row: 1 / span 60; position: sticky; top: 8px; max-height: calc(100vh - 16px); overflow: auto; }
main.ws-mode > #ws-tabs, main.ws-mode > section { grid-column: 2; min-width: 0; }
#ws-tree { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px; }
/* Thanh kéo đổi độ rộng cây: dải mép phải, hiện vạch màu khi rê / đang kéo. Màn hẹp (cây là menu đè) không cần. */
main.ws-mode > #ws-tree { position: sticky; }
.ws-grip { position: absolute; top: 0; right: 0; bottom: 0; width: 8px; cursor: col-resize; z-index: 2; touch-action: none; }
.ws-grip::after { content: ""; position: absolute; top: 12px; bottom: 12px; right: 2px; width: 3px; border-radius: 3px; background: transparent; transition: background .15s; }
.ws-grip:hover::after, body.ws-resizing .ws-grip::after { background: var(--brand); }
body.ws-resizing { cursor: col-resize; user-select: none; }
@media (max-width: 900px) { .ws-grip { display: none; } }
/* Mỗi nhánh một màu (--br, đặt trên .ws-branch): ô biểu tượng ở tiêu đề tô đặc, ô biểu tượng của từng mục tô nhạt cùng màu. */
.ws-branch { --br: #475569; }
.ws-branch + .ws-branch { margin-top: 2px; }
.ws-find-wrap { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; padding: 0 10px; border: 1px solid var(--line);
  border-radius: 8px; background: #f8fafc; color: var(--muted); }
.ws-find-wrap input { border: 0; background: transparent; padding: 8px 0; min-width: 0; flex: 1; font-size: 13.5px; box-shadow: none; outline: none; }
.ws-branch-count { font-size: 11px; font-weight: 600; color: var(--muted); background: #f1f4f8; border-radius: 999px; padding: 1px 7px;
  letter-spacing: 0; text-transform: none; }
.ws-branch-head { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none; border: 0; padding: 6px 8px;
  font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--br); cursor: pointer; border-radius: 8px; }
.ws-branch-head:hover { background: color-mix(in srgb, var(--br) 8%, #fff); }
.ws-branch-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px;
  border-radius: 7px; background: var(--br); color: #fff; }
.ws-branch-name { flex: 1; min-width: 0; }
.ws-caret { display: inline-block; width: 14px; color: var(--muted); text-align: center; }
/* Mục con thụt vào, nối bằng đường kẻ dọc màu nhánh - nhìn ra cây, không phải một danh sách phẳng dài. */
.ws-items { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 6px 19px; padding-left: 8px;
  border-left: 2px solid color-mix(in srgb, var(--br) 18%, transparent); }
.ws-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; background: none; border: 0;
  padding: 3px 8px; min-height: 34px; border-radius: 8px; color: var(--ink); cursor: pointer; font-size: 13.5px; }
.ws-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-ico { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; border-radius: 6px;
  background: color-mix(in srgb, var(--br) 12%, #fff); color: var(--br); }
.ws-item:hover { background: color-mix(in srgb, var(--br) 7%, #fff); color: var(--br); }
.ws-item.open { font-weight: 600; }
/* Mục đang mở: nền nhạt + vạch màu bên trái (thay khối màu đậm cả dòng - nặng mắt khi nhiều nhánh nhiều màu). */
.ws-item.active { background: color-mix(in srgb, var(--br) 11%, #fff); color: var(--br); font-weight: 600; box-shadow: inset 3px 0 0 var(--br); }
.ws-item.active .ws-ico { background: var(--br); color: #fff; }
.ws-item.ws-link.denied .ws-ico { background: #f1f3f6; color: var(--muted); }
/* Hoá đơn mua: dòng chi phí - nghiệp vụ, tài khoản, nội dung xếp gọn, xuống dòng khi hẹp. TK do nghiệp vụ điền thì nền xanh nhạt. */
.ap-exp-pick { display: flex; flex-wrap: wrap; gap: 6px; }
/* Nghiệp vụ mẫu: nhóm thành khối, mỗi nghiệp vụ một thẻ bấm được - tên to, định khoản nhỏ bên dưới. */
.tpl-group + .tpl-group { margin-top: 14px; }
.tpl-group h3 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.tpl-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.tpl-item { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; background: #fff; cursor: pointer;
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; min-height: 64px; }
.tpl-item:hover { border-color: var(--brand); box-shadow: 0 2px 8px rgba(15, 23, 42, .06); }
.tpl-item.off { opacity: .6; }
.tpl-name { font-weight: 600; color: var(--ink); }
.tpl-formula { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mj-cost { display: flex; flex-direction: column; gap: 4px; min-width: 190px; }
/* Lưới chọn hoá đơn còn nợ (thu / trả / cấn trừ theo hoá đơn). */
.oi-box { margin: 10px 0; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; background: #fbfcfe; }
.oi-box summary { cursor: pointer; font-weight: 600; padding: 2px 0; }
.oi-hint { margin: 6px 0; }
.oi-table td, .oi-table th { padding-top: 6px; padding-bottom: 6px; }
.oi-table .oi-amt { width: 130px; text-align: right; }
.oi-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.oi-sum { margin-left: auto; }
table.aging tr.ag-total td { border-top: 2px solid var(--line); background: #f7f9fc; }
table.aging td.ag-warn { color: #b45309; }
table.aging td.ag-bad { color: #b91c1c; font-weight: 600; }
/* Bảng "Chọn lô" (tôn / xà gồ) - lớp phủ trên hộp thoại phiếu bán. */
.lot-pick { position: fixed; inset: 0; z-index: 1200; background: rgba(15, 23, 42, .35); display: flex; align-items: flex-start; justify-content: center;
  padding: 70px 16px 16px; }
.lot-pick-card { background: #fff; border-radius: 12px; box-shadow: 0 12px 40px rgba(15, 23, 42, .25); width: min(1100px, 100%); max-height: 80vh;
  display: flex; flex-direction: column; padding: 14px 16px; }
.lot-pick-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.lot-pick-x { margin-left: auto; border: 0; background: none; font-size: 22px; cursor: pointer; color: var(--muted); }
.lot-pick-card .table-scroll { overflow: auto; }
.lot-pick-table tbody tr { cursor: pointer; }
.lot-pick-table tbody tr:hover td { background: #f4f8fd; }
.lot-pick-table tbody tr.on td { background: #e7f7ea; }
.lot-pick-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.lot-pick-btn { white-space: nowrap; }
/* Báo cáo theo phân hệ. */
/* Loại báo cáo: nút chọn to, đang chọn tô màu. Thanh lọc: thẻ có nhãn trên ô, ô cao 40px, lưới tự xuống dòng. */
.rm-kinds { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.rm-kind { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 9px 16px; font-size: 14px; cursor: pointer; color: var(--ink); }
.rm-kind:hover { border-color: var(--brand); color: var(--brand); }
.rm-kind.on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.rm-card { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: #fbfcfe; margin-bottom: 14px; }
.rm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 14px; }
.rm-grid label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink); }
.rm-grid input, .rm-grid select { height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; font-weight: 400;
  background: #fff; width: 100%; box-sizing: border-box; }
.rm-grid input:focus, .rm-grid select:focus { outline: 2px solid color-mix(in srgb, var(--brand) 35%, transparent); border-color: var(--brand); }
.rm-req { color: var(--bad); margin-left: 3px; }
.rm-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.rm-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rm-actions { display: flex; gap: 8px; margin-left: auto; }
.rm-actions button { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 18px; border-radius: 8px;
  border: 1px solid var(--line); background: #fff; font-size: 14px; cursor: pointer; }
.rm-actions button.primary { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
@media (max-width: 520px) { .rm-actions { width: 100%; } .rm-actions button { flex: 1; justify-content: center; } }
.rm-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 4px 0 8px; }
.rm-head h3 { margin: 0; }
table.rm-table tr.rm-group td { background: #f4f7fb; font-weight: 600; }
table.rm-table tr.rm-open td { color: var(--muted); font-style: italic; }
table.rm-table tr.rm-total td { border-top: 2px solid var(--line); background: #eef3f9; font-weight: 700; }
table.aging td button.link { text-align: left; text-decoration: none; color: var(--ink); padding: 0; }
table.aging td button.link:hover strong { color: var(--brand); }
.oi-table th:first-child, .oi-table td:first-child { width: 30px; padding-right: 0; }
@media (max-width: 520px) {
  .oi-table th:nth-child(3), .oi-table td:nth-child(3) { display: none; }   /* ngày lập: hạn đủ để chọn */
  .oi-table .oi-amt { width: 104px; }
}
table.cost-report tr.ccr-center td { background: #f7f9fc; }
table.cost-report td.ccr-item { padding-left: 28px; }
table.cost-report tr.ccr-total td { border-top: 2px solid var(--line); }
select.auto-filled { background: #effaf3; border-color: #9fd9b4; }
#ws-tabs { display: flex; align-items: flex-end; gap: 4px; border-bottom: 2px solid var(--brand); margin-bottom: 12px;
  overflow-x: auto; scrollbar-width: thin; }
.ws-tab { display: flex; align-items: center; gap: 4px; background: #eef2f7; border: 1px solid var(--line); border-bottom: 0;
  border-radius: 8px 8px 0 0; padding: 6px 6px 6px 12px; white-space: nowrap; cursor: pointer; font-size: 13px; }
.ws-tab:hover { background: #f7f9fc; }
.ws-tab.active { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.ws-tab-label { display: inline-flex; align-items: center; gap: 6px; }
.ws-tab-close { background: none; border: 0; color: inherit; font-size: 16px; line-height: 1; padding: 0 5px; border-radius: 4px; cursor: pointer; opacity: .7; }
.ws-tab-close:hover { opacity: 1; background: rgba(0, 0, 0, .12); }
.ws-close-all { margin-left: auto; background: none; border: 0; color: var(--muted); font-size: 12px; white-space: nowrap; cursor: pointer; padding: 6px 8px; }
.ws-hint { padding: 8px 4px; }
.ws-menu-toggle { display: none; }
/* Hẹp: cây gập thành nút "☰ Menu" ở đầu thanh tab, bấm thì cây đè lên nội dung. */
@media (max-width: 900px) {
  main.ws-mode { grid-template-columns: minmax(0, 1fr); }
  main.ws-mode > #ws-tree { display: none; }
  body.ws-tree-open main.ws-mode > #ws-tree { display: block; position: fixed; inset: 60px 12px auto 12px; z-index: 50;
    max-height: 70vh; box-shadow: 0 12px 32px rgba(0, 0, 0, .25); }
  main.ws-mode > #ws-tabs, main.ws-mode > section { grid-column: 1; }
  .ws-menu-toggle { display: inline-block; flex: 0 0 auto; background: #fff; border: 1px solid var(--line); border-radius: 8px;
    padding: 6px 10px; margin-bottom: 4px; cursor: pointer; }
}
/* Ô chọn trong thanh công cụ rộng theo lựa chọn dài nhất (tên tài khoản đầy đủ) - trên điện thoại đẩy trang
   tràn ngang ~300px ở Sổ cái. Chặn ở bề rộng khung chứa. */
.panel-actions { min-width: 0; max-width: 100%; }
.panel-actions select { max-width: 100%; }

/* --- Liên kết giữa các màn (qua cổng quyền) và hướng dẫn từng màn -------------------------------- */
.screen-link { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.screen-link:hover { text-decoration-thickness: 2px; }
/* Không có quyền: vẫn hiện (biết bước đó tồn tại) nhưng mang khoá, bấm chỉ báo không có quyền. */
.screen-link.denied { color: var(--muted); text-decoration: none; cursor: not-allowed; }
.screen-link.denied::before { content: "🔒 "; }
/* Rộng: cột thứ ba bên phải, dính khi cuộn. */
main.ws-mode.ws-help-open { grid-template-columns: var(--ws-tree-w, 260px) minmax(0, 1fr) 320px; }
main.ws-mode > #ws-help { grid-column: 3; grid-row: 1 / span 60; position: sticky; top: 8px; max-height: calc(100vh - 16px); overflow: auto; }
#ws-help { background: #fffdf5; border: 1px solid #eadfb8; border-radius: 10px; padding: 12px 14px; font-size: 13px; line-height: 1.5; }
#ws-help p { margin: 6px 0; }
#ws-help ul, #ws-help ol { margin: 4px 0; padding-left: 20px; }
#ws-help li { margin: 3px 0; }
.ws-help-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ws-help-close { background: none; border: 0; font-size: 18px; line-height: 1; cursor: pointer; color: var(--muted); padding: 0 4px; }
.ws-help-sap { display: inline-block; margin: 6px 0 2px; padding: 2px 8px; border-radius: 999px; background: #eef2f7; color: var(--muted); font-size: 12px; }
.ws-help-block h4 { margin: 10px 0 2px; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.ws-help-next { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.ws-help-toggle { flex: 0 0 auto; margin-left: auto; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 5px 10px;
  margin-bottom: 4px; cursor: pointer; font-size: 13px; white-space: nowrap; }
.ws-help-toggle.on { background: #fffdf5; border-color: #eadfb8; }
.ws-close-all + .ws-help-toggle { margin-left: 0; }
/* Vừa: hướng dẫn nằm trên nội dung màn, cùng cột. */
@media (max-width: 1200px) {
  main.ws-mode.ws-help-open { grid-template-columns: var(--ws-tree-w, 260px) minmax(0, 1fr); }
  main.ws-mode > #ws-help { grid-column: 2; grid-row: 2; position: static; max-height: none; margin-bottom: 12px; }
}
@media (max-width: 900px) {
  main.ws-mode.ws-help-open { grid-template-columns: minmax(0, 1fr); }
  main.ws-mode > #ws-help { grid-column: 1; }
}
/* Xem trước phiếu thu / phiếu chi (PDF A5 ngang): hộp rộng hơn để khung xem không phải cuộn ngang. */
.modal-card:has(#voucher-print) { width: min(920px, 96vw); }
#voucher-print a.btn { display: inline-block; padding: 7px 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff;
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14px; }
#voucher-print a.btn:hover { border-color: var(--brand); color: var(--brand); }

/* --- Hộp nhập liệu có bảng dòng (đơn mua, hoá đơn mua, phiếu thu chi, bút toán, phiếu bán, chứng từ kho…) ------------------
   Chủ dự án 26/09/2026: "UI nhập liệu xấu quá, nhỏ". Trước đây ô trong bảng dòng là ô trần của trình duyệt (cao ~20px, viền
   mảnh) cạnh ô đã trang trí ở phần đầu biểu mẫu, và hộp 880px cắt mất cột Nợ / Có, cột thuế. Sửa một chỗ cho MỌI hộp: hộp có
   bảng nhập liệu rộng ra, ô trong bảng cùng cỡ với ô biểu mẫu, nút thêm dòng / xoá dòng theo kiểu nút của ứng dụng. */
.modal-card:has(#modal-body table input:not([type="checkbox"]), #modal-body table select) { width: min(1280px, 96vw); }
.form-grid input, .form-grid select, .form-grid textarea { min-height: 40px; background: #fff; }
#modal-body table input:not([type="checkbox"]):not([type="radio"]),
#modal-body table select {
  width: 100%; min-height: 38px; padding: 7px 10px; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: 6px; background: #fff;
  font: inherit; font-size: 14px; font-weight: 400; color: var(--ink);
}
#modal-body table input[type="number"] { text-align: right; font-variant-numeric: tabular-nums; }
/* Ô chọn (thuế, đơn vị) không co nhỏ hơn chữ của lựa chọn. */
#modal-body table select { min-width: 120px; }
#modal-body table td { vertical-align: middle; padding-top: 6px; padding-bottom: 6px; }
#modal-body table td + td { padding-left: 6px; }
/* Ô nhập khoá ngang thì giãn vừa cột thay vì co hẹp theo nội dung. */
#modal-body table td:first-child input, #modal-body table td:first-child select { min-width: 220px; }
#modal-body input:focus, #modal-body select:focus, #modal-body textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(15, 111, 197, .15);
}
/* Nhãn đứng riêng ngoài lưới biểu mẫu (vd. Ghi chú của hoá đơn mua) - trước đây thành một ô tí hon cạnh chữ. */
/* Nhãn có ô tích giữ nguyên kiểu hàng ngang - chỉ nhãn chứa ô nhập / ô chọn mới xếp dọc. */
#modal-body form > label:not(:has(input[type="checkbox"], input[type="radio"])) {
  display: flex; flex-direction: column; gap: 4px; margin-top: 14px; font-size: 13px; font-weight: 600;
}
#modal-body form > label > input:not([type="checkbox"]):not([type="radio"]), #modal-body form > label > select, #modal-body form > label > textarea {
  min-height: 40px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; font-size: 14px; font-weight: 400;
}
/* Nút thêm dòng (id kết thúc "-add") và nút xoá dòng trong bảng. */
#modal-body button[id$="-add"] {
  padding: 8px 14px; border-radius: 6px; border: 1px dashed var(--brand); background: #f4f8fd;
  color: var(--brand); font-weight: 600; font-size: 14px; cursor: pointer;
}
#modal-body button[id$="-add"]:hover { background: #e8f1fb; }
#modal-body table td .btn-sm { min-width: 34px; min-height: 34px; font-size: 16px; line-height: 1; }
/* Dòng tổng dưới bảng dễ đọc hơn. */
#modal-body #pof-sum, #modal-body #ap-sum, #modal-body #cv-sum { font-size: 15px; color: var(--ink); }
#modal-body h2 { font-size: 22px; }
@media (max-width: 700px) {
  #modal-body table td:first-child input, #modal-body table td:first-child select { min-width: 160px; }
}
/* Mọi ô nhập / nút còn "trần" trong hộp thoại (dòng hàng dựng bằng div như báo giá, phiếu đặt hàng; nút phụ như "+ Khách mới",
   "Bỏ"). Bọc trong :where() để độ ưu tiên bằng 0 - kiểu riêng đã có của từng màn (.form-grid, .form-actions, .btn-sm, chip…)
   luôn thắng, chỉ ô / nút chưa ai trang trí mới nhận kiểu này. */
:where(#modal-body) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]), select, textarea) {
  min-height: 38px; padding: 7px 10px; box-sizing: border-box; border: 1px solid var(--line); border-radius: 6px;
  background: #fff; font: inherit; font-size: 14px; color: var(--ink);
}
:where(#modal-body) :where(button) {
  min-height: 36px; padding: 7px 14px; border: 1px solid var(--line); border-radius: 6px; background: #fff;
  font: inherit; font-size: 14px; color: var(--ink); cursor: pointer;
}
:where(#modal-body) :where(button:hover) { border-color: var(--brand); color: var(--brand); }
/* Mục cây trỏ sang danh mục ở nhóm khác (khách hàng, nhà cung cấp, sản phẩm…): dấu ↗ bên phải, không có quyền thì mờ + khoá. */
/* Dấu ↗ (mở ở nhóm khác) chỉ hiện khi rê chuột - lặp ở hai chục dòng thì thành nhiễu. Màn hình cảm ứng không rê được: hiện mờ. */
.ws-item.ws-link .ws-link-mark { margin-left: auto; color: var(--muted); font-size: 12px; opacity: 0; transition: opacity .15s; }
.ws-item.ws-link:hover .ws-link-mark, .ws-item.ws-link.denied .ws-link-mark { opacity: 1; }
@media (hover: none) { .ws-item.ws-link .ws-link-mark { opacity: .5; } }
.ws-item.ws-link.denied { color: var(--muted); cursor: not-allowed; }

/* Ô chọn chi nhánh làm việc trên thanh đầu trang (chỉ hiện khi công ty bật Nhiều chi nhánh và có từ 2 lựa chọn). */
.branch-pick { max-width: 180px; margin-right: 8px; padding: 4px 6px; font-size: 13px; border-radius: 6px; }
@media (max-width: 600px) { .branch-pick { max-width: 110px; } }
.check-list { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.check-list label.check { display: flex; align-items: center; gap: 8px; font-weight: normal; }
.check-list label.check input { width: auto; margin: 0; }

/* Ô tick "Theo lô / vị trí" trên thanh lọc tồn kho. */
.check-inline { display: inline-flex; align-items: center; gap: 6px; font-weight: normal; white-space: nowrap; }
.check-inline input { width: auto; margin: 0; }

/* Dòng phụ "Quy cách" dưới mỗi dòng phiếu bán (tôn thép). */
.spec-row td { background: var(--surface-2, rgba(0,0,0,.02)); padding-top: 4px; }
.spec-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.spec-line select, .spec-line input { width: auto; }
.spec-preview { color: var(--accent, #1d6fb8); font-weight: 600; }

/* --- Tôn thép theo cuộn (TON-THEP-DOI-CHIEU-HDSD.md): khung cuộn dưới dòng phiếu kho, thông tin cuộn trên phiếu bán. ------------------
   Luật chung "#modal-body table input { width: 100% }" làm ô số giãn hết cột - trong khung cuộn mỗi ô có bề rộng riêng và có nhãn. */
.coil-row td { background: #f6f9fc; border-top: 0; padding: 0 12px 14px; }
.coil-panel { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: flex-end; padding: 12px 14px;
  border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: var(--radius); background: #fff; }
.coil-group { display: flex; gap: 8px; align-items: flex-end; }
.coil-group + .coil-group { padding-left: 20px; border-left: 1px dashed var(--line); }
.coil-panel label.f { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--muted); font-weight: 600;
  text-transform: uppercase; letter-spacing: .3px; }
#modal-body table .coil-panel label.f input { width: 120px; min-width: 0; min-height: 36px; text-align: right; font-variant-numeric: tabular-nums; }
#modal-body table .coil-panel label.f.sm input { width: 92px; }
#modal-body table .coil-panel label.f input[data-trk="supplierLotNo"] { width: 140px; text-align: left; }
#modal-body table .coil-panel label.f input:disabled { background: #f1f3f5; color: var(--muted); }
.coil-grade { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 36px; border-radius: 6px;
  background: #e8f1fb; color: var(--brand); font-weight: 800; }
#modal-body table .coil-panel .coil-check input { width: auto; min-width: 0; margin: 0; }
.coil-check { display: flex; align-items: center; gap: 6px; min-height: 36px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.coil-sum { margin-left: auto; text-align: right; font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 2px; }
.coil-sum strong { display: block; font-size: 18px; color: var(--ink); font-variant-numeric: tabular-nums; }
.coil-info { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.coil-chip { display: inline-flex; gap: 5px; align-items: baseline; padding: 3px 9px; border-radius: 999px; background: #eef3f8;
  font-size: 12px; color: var(--ink); font-variant-numeric: tabular-nums; }
.coil-chip em { font-style: normal; color: var(--muted); }
.coil-chip.strong { background: #e6f4ee; color: var(--ok); font-weight: 700; }
.coil-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#modal-body table .coil-actions select { width: auto; min-width: 190px; }
#modal-body table .coil-actions input { width: 180px; }
.coil-nc { min-height: 38px; padding: 0 14px; border: 1px solid var(--brand); border-radius: 6px; background: #fff; color: var(--brand);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.coil-nc:hover { background: #eef5fc; }
.coil-nc.on { background: var(--brand); color: #fff; }
/* Hàng "Quy cách" trên phiếu bán: gọn một hàng, không giãn hết chiều ngang. */
#modal-body table .spec-line select, #modal-body table .spec-line input { width: auto; }
#modal-body table .spec-line select[data-ifl="specId"] { min-width: 220px; }
#modal-body table .spec-line input { width: 100px; }
@media (max-width: 640px) {
  .coil-group + .coil-group { padding-left: 0; border-left: 0; }
  .coil-sum { margin-left: 0; text-align: left; }
  #modal-body table .coil-panel label.f input { width: 100px; }
}

/* Ô tìm nhanh mặt hàng đứng trước danh sách chọn. */
.panel-actions .product-find { min-width: 200px; flex: 0 1 240px; }
/* Xem hạch toán ngay trên chứng từ. */
.posting { margin-bottom: 18px; }
.posting-head { margin-bottom: 6px; }
.posting-total td { font-weight: 700; border-top: 2px solid var(--line); }
@media (max-width: 640px) { .posting table th:nth-child(3), .posting table td:nth-child(3) { display: none; } }
/* Khối "Hàng nhập khẩu" trên form nhập hàng mua - gập mặc định, hàng trong nước không phải nhìn. */
.import-box { margin: 10px 0 4px; border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; background: #fbfcfe; }
.import-box summary { cursor: pointer; font-weight: 600; color: var(--brand); }
.import-box[open] summary { margin-bottom: 8px; }

/* --- Cây ngành hàng (danh mục chung → Ngành hàng). Danh sách phẳng thụt lề theo cấp (--d), không dùng bảng: bảng 4 cột ở khổ điện
   thoại ép tên ngành xuống dòng từng chữ. --- */
.cat-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.cat-tools input[type=search] { flex: 1 1 240px; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; font: inherit;
  background: #fff; }
.cat-tools input[type=search]:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(15, 111, 197, .12); }
.cat-tree { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.cat-node > .cat-row { display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px calc(8px + var(--d) * 24px);
  border-bottom: 1px solid var(--line); }
.cat-node > .cat-row:hover { background: #f7f9fb; }
.cat-node.root > .cat-row { background: #f9fbfd; }
.cat-tog { flex: 0 0 26px; width: 26px; height: 26px; padding: 0; border: 0; background: none; color: #4f6172; font-size: 17px;
  line-height: 26px; text-align: center; cursor: pointer; border-radius: 4px; }
.cat-tog:hover { background: #e9eef3; color: var(--ink); }
.cat-tog.leaf { cursor: default; font-size: 10px; color: #b6c1cc; }
.cat-tog.leaf:hover { background: none; }
.cat-main { flex: 1 1 auto; min-width: 0; }
.cat-name { display: block; overflow-wrap: anywhere; }
.cat-node.root .cat-name { font-weight: 600; }
.cat-meta { display: block; font-size: 12px; color: var(--muted); }
.cat-acts { display: flex; gap: 6px; flex: 0 0 auto; }
@media (max-width: 640px) {
  .cat-node > .cat-row { flex-wrap: wrap; padding-left: calc(6px + var(--d) * 14px); }
  .cat-acts { flex: 1 1 100%; padding-left: 34px; }
  .cat-acts [aria-hidden=true] { display: none; }
  .cat-acts .btn-sm { padding: 6px 10px; }
}
.cat-path { display: inline-block; min-width: 130px; font-size: 12.5px; line-height: 1.35; }
.cat-path .muted { font-size: 11.5px; }

/* --- Ảnh sản phẩm (ProductImages.cs): khung trên form và ảnh nhỏ cạnh tên trong danh sách --- */
.pf-photo { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.pf-photo-box { flex: 0 0 104px; width: 104px; height: 104px; border: 1px dashed #c5d0db; border-radius: 10px; background: #f7f9fb;
  display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--muted); font-size: 12px; text-align: center; }
.pf-photo-box img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.pf-photo-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex: 1 1 200px; min-width: 0; }
.pf-photo-acts .hint { flex: 1 1 100%; }
.pf-photo-pick { display: inline-flex; align-items: center; padding: 6px 12px; font-size: 13px; }
.p-name { display: flex; gap: 10px; align-items: center; min-width: 160px; }
.p-thumb { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 6px; background: #eef2f6; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; }
.p-thumb:empty::after { content: ""; width: 18px; height: 14px; border: 2px solid #c5d0db; border-radius: 3px; }
.p-thumb img { width: 100%; height: 100%; object-fit: contain; background: #fff; }

/* --- Bảng quy đổi đơn vị chung (Danh mục chung → Quy đổi đơn vị chung): mỗi dòng "1 [Tấn] = [1000] [Kg]", xuống dòng gọn trên điện thoại --- */
#uc-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.uc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.uc-row input[type=text], .uc-row input:not([type]), .uc-row input[type=number] { padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; font: inherit; }
.uc-from, .uc-to { width: 120px; }
.uc-factor { width: 110px; text-align: right; }
.uc-one, .uc-eq { color: var(--muted); font-weight: 600; }
.uc-active { display: inline-flex; gap: 4px; align-items: center; font-size: 13px; }
.uc-count { font-size: 12px; flex: 1 1 160px; }
@media (max-width: 640px) { .uc-from, .uc-to, .uc-factor { width: 92px; } .uc-count { flex: 1 1 calc(100% - 50px); } }

/* --- Sổ địa chỉ điểm bán / nhà cung cấp: thẻ thay bảng - đọc được trên điện thoại --- */
.addr-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin: 10px 0; }
.addr-card { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: #fff; display: flex; flex-direction: column; gap: 4px; }
.addr-card.expired { opacity: .6; background: #fafbfc; }
.addr-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.addr-line { font-weight: 500; overflow-wrap: anywhere; }
.addr-card .row-actions { margin-top: 4px; }
tr.row-expired td { opacity: .6; }
/* Ô tích trong form lưới (người liên hệ chính, địa chỉ mặc định...): ô tích và chữ trên một dòng - kiểu nhãn chung của .form-grid xếp dọc
   làm ô tích đứng một mình giữa dòng, chữ rơi xuống dưới (rà giao diện 11/10). */
.form-grid label.check-line { display: flex; flex-direction: row; align-items: center; gap: 8px; font-weight: normal; }
.form-grid label.check-line input[type=checkbox] { width: auto; margin: 0; flex: 0 0 auto; }