: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; }
.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); }
.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: 24px;
  background: var(--panel); padding: 0 20px;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
}
.brand { font-size: 20px; font-weight: 700; color: var(--brand); letter-spacing: 1px; }
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);
}
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; }

.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;
}

/* --- 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); }