/* ============================================================================
   am-system.css — tab "Quản lý hệ thống" của App Manager (MagnoliaX DS v2).

   Namespace .amsy-* — KHÔNG giao với .ampf-* (Tổng quan project), .ampm-* (panel
   trái tab PM) lẫn .amv3-* (Gantt/kanban do ensureAmStyle() chèn runtime).

   Vì sao khai lại token --am-*: scope .ampm/.ampf không trùm sang tab này, mà
   #workspace-app-manager thì đang ăn font `-apple-system/Segoe UI` do
   app-manager-v2.css:4 ép cho cả workspace. Không khai lại là chữ tab này lệch
   hẳn so với 2 tab anh em ngay cạnh.

   ⚠ app-manager-v2.css:3 có reset phổ quát `#workspace-app-manager *{margin:0;
     padding:0;box-sizing:border-box}` — mọi khoảng cách ở đây phải khai tường
     minh theo thang 4px, đừng trông vào default của trình duyệt.
   ========================================================================== */

#workspace-app-manager .amsy {
  /* token DS v2 — giữ ĐÚNG bộ của am-pm.css/am-portfolio.css để 3 tab không lệch màu */
  --am-surface: #FFFFFF;   --am-surface-2: #F5F6F8;  --am-surface-3: #EBECF0;
  --am-text: #323338;      --am-muted: #676879;      --am-soft: #9699A6;
  --am-primary: #0073EA;   --am-primary-soft: #CCE5FF; --am-focus: rgba(0,115,234,.30);
  --am-border: #E6E9EF;    --am-border-2: #D0D4E4;
  --am-done: #00C875;      --am-done-bg: #E5F9F0;
  --am-working: #FDAB3D;   --am-working-bg: #FFF4E4;
  --am-stuck: #E2445C;     --am-stuck-bg: #FCE8EB;
  --am-purple: #A25DDC;    --am-purple-bg: #F3EAFB;
  --am-info: #579BFC;      --am-info-bg: #E6F0FF;
  --am-r-sm: 4px;          --am-r: 8px;              --am-r-pill: 99px;
  --am-shadow: 0 1px 2px rgba(0,0,0,.04);
  --am-shadow-2: 0 4px 12px rgba(15,23,42,.10);
  --am-t: .14s;

  font-family: 'Public Sans', 'Be Vietnam Pro', 'Figtree', system-ui, sans-serif;
  color: var(--am-text);
  font-size: 14px;
}

#workspace-app-manager .amsy button { font-family: inherit; color: inherit; cursor: pointer; }
#workspace-app-manager .amsy input,
#workspace-app-manager .amsy select,
#workspace-app-manager .amsy textarea { font-family: inherit; }
#workspace-app-manager .amsy :focus-visible { outline: none; box-shadow: 0 0 0 3px var(--am-focus); }
#workspace-app-manager .amsy .amsy-ic {
  width: 16px; height: 16px; flex: none;
  stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
#workspace-app-manager .amsy .amsy-num { font-variant-numeric: tabular-nums; }

/* ── DẢI KPI — accent 4px mép trái, KHÔNG tô nền màu (DS luật 12) ─────────── */
#workspace-app-manager .amsy-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px; margin-bottom: 12px;
}
#workspace-app-manager .amsy-kpi {
  position: relative; text-align: left; padding: 10px 12px 10px 14px;
  background: var(--am-surface); border: 1px solid var(--am-border);
  border-radius: var(--am-r); box-shadow: var(--am-shadow); overflow: hidden;
  transition: border-color var(--am-t), box-shadow var(--am-t);
}
#workspace-app-manager .amsy-kpi::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--amsy-c, var(--am-border-2));
}
#workspace-app-manager .amsy-kpi:hover { border-color: var(--am-border-2); box-shadow: var(--am-shadow-2); }
#workspace-app-manager .amsy-kpi.is-on { border-color: var(--amsy-c); box-shadow: 0 0 0 1px var(--amsy-c) inset; }
#workspace-app-manager .amsy-kpi .amsy-kv {
  font-size: 24px; font-weight: 700; line-height: 1.15; color: var(--amsy-c, var(--am-text));
  font-variant-numeric: tabular-nums;
}
#workspace-app-manager .amsy-kpi .amsy-kl {
  font-size: 11px; font-weight: 700; color: var(--am-muted);
  text-transform: uppercase; letter-spacing: .4px; margin-top: 2px;
}
#workspace-app-manager .amsy-kpi .amsy-kx { font-size: 11px; color: var(--am-soft); margin-top: 2px; }

/* ── THANH CÔNG CỤ ───────────────────────────────────────────────────────── */
#workspace-app-manager .amsy-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--am-surface); border: 1px solid var(--am-border);
  border-radius: var(--am-r); padding: 8px; margin-bottom: 12px;
}
#workspace-app-manager .amsy-mon {
  display: inline-flex; align-items: center; gap: 2px; flex: none;
  border: 1px solid var(--am-border); border-radius: var(--am-r-sm); overflow: hidden;
}
#workspace-app-manager .amsy-mon button {
  width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border: none; background: var(--am-surface); color: var(--am-muted); padding: 0;
}
#workspace-app-manager .amsy-mon button:hover { background: var(--am-surface-2); color: var(--am-text); }
#workspace-app-manager .amsy-mon .amsy-mlb {
  min-width: 96px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: var(--am-text);
  background: var(--am-surface); font-variant-numeric: tabular-nums;
}
/* flex-grow ở ô tìm là thứ giữ thanh công cụ trên MỘT dòng: nó nở ra ăn hết chỗ
   thừa, và co lại khi chật thay vì đẩy nút "Thêm dịch vụ" xuống dòng thứ hai (đo
   09/09/2026: tổng bề rộng con 1.140px > 1.062px khả dụng ⇒ thanh cao 90px).
   Có min-width nên nó không bị bóp đến mức mất chữ gợi ý.

   🔴 basis hạ 180→140 và min-width hạ 150→128 ngày 14/09/2026 để nút "Lịch sử"
   lấy lại được NHÃN CHỮ (+38px) mà thanh vẫn một dòng. flex-wrap tính điểm ngắt
   dòng theo flex-BASIS đã kẹp bởi min-width — hạ basis mà quên hạ min-width thì
   min-width kẹp ngược lên 150 và chẳng dôi ra được gì. Hai số này đi thành cặp,
   sửa một cái là phép tính sai. Ô tìm nở tự do khi màn rộng nên hạ basis không
   làm nó nhỏ đi ở màn thường. */
#workspace-app-manager .amsy-srch {
  height: 32px; min-width: 128px; flex: 1 1 140px;
  display: flex; align-items: center; gap: 6px; padding: 0 8px;
  border: 1px solid var(--am-border); border-radius: var(--am-r-sm);
  background: var(--am-surface-2); color: var(--am-soft);
}
#workspace-app-manager .amsy-srch:focus-within {
  background: var(--am-surface); border-color: var(--am-primary); box-shadow: 0 0 0 3px var(--am-focus);
}
#workspace-app-manager .amsy-srch input {
  border: none; background: none; outline: none; flex: 1; min-width: 0;
  font-size: 13px; color: var(--am-text);
}
#workspace-app-manager .amsy-srch input::placeholder { color: var(--am-soft); }

#workspace-app-manager .amsy-btn {
  height: 32px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--am-border); border-radius: var(--am-r-sm);
  background: var(--am-surface); color: var(--am-text); font-size: 13px; font-weight: 700;
  white-space: nowrap;
}
/* Nút chỉ-icon ở hàng công cụ: cao bằng .amsy-btn (32px) chứ KHÔNG mượn .amsy-ib
   (28px) — lệch 4px cạnh nút "Thêm dịch vụ" nhìn ra ngay. Vuông 32px để hàng công
   cụ còn đủ chỗ trong khu nội dung 1.078px. */
#workspace-app-manager .amsy-btn.amsy-ico { width: 32px; padding: 0; justify-content: center; }
#workspace-app-manager .amsy-btn.amsy-ico .amsy-ic { color: var(--am-muted); }
#workspace-app-manager .amsy-btn.amsy-ico:hover .amsy-ic { color: var(--am-primary); }
#workspace-app-manager .amsy-btn:hover { background: var(--am-surface-2); border-color: var(--am-border-2); }
#workspace-app-manager .amsy-btn:disabled { opacity: .45; cursor: not-allowed; }
/* Thẻ <select> mang class .amsy-btn nhưng tự nở theo option DÀI NHẤT
   ("Internet / Đường truyền") — chặn lại, nếu không nó ăn 190px của hàng công cụ. */
#workspace-app-manager select.amsy-btn { max-width: 160px; }
#workspace-app-manager .amsy-btn.is-pri {
  background: var(--am-primary); border-color: var(--am-primary); color: #fff;
}
#workspace-app-manager .amsy-btn.is-pri:hover { background: #0060C4; border-color: #0060C4; }
#workspace-app-manager .amsy-btn.is-danger { color: var(--am-stuck); }
#workspace-app-manager .amsy-btn.is-danger:hover { background: var(--am-stuck-bg); border-color: var(--am-stuck); }
#workspace-app-manager .amsy-sp { flex: 1; min-width: 0; }
#workspace-app-manager .amsy-tot { font-size: 12.5px; color: var(--am-muted); font-weight: 700; white-space: nowrap; }

#workspace-app-manager .amsy-chip {
  height: 28px; padding: 0 11px; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--am-border); border-radius: var(--am-r-pill);
  background: var(--am-surface); color: var(--am-muted); font-size: 12px; font-weight: 700;
  white-space: nowrap;
}
#workspace-app-manager .amsy-chip:hover { background: var(--am-surface-2); }
#workspace-app-manager .amsy-chip.is-on {
  background: var(--amsy-c, var(--am-primary)); border-color: var(--amsy-c, var(--am-primary)); color: #fff;
}
#workspace-app-manager .amsy-chip .amsy-cn {
  min-width: 18px; height: 17px; padding: 0 5px; border-radius: var(--am-r-pill);
  background: var(--am-surface-3); color: var(--am-muted);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
#workspace-app-manager .amsy-chip.is-on .amsy-cn { background: rgba(255,255,255,.26); color: #fff; }

/* hàng chip ĐANG ÁP — gỡ từng cái (DS luật 15c) */
#workspace-app-manager .amsy-applied { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
#workspace-app-manager .amsy-applied .amsy-al {
  font-size: 11px; font-weight: 700; color: var(--am-soft);
  text-transform: uppercase; letter-spacing: .4px;
}
#workspace-app-manager .amsy-tag {
  height: 26px; padding: 0 6px 0 10px; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--am-primary); border-radius: var(--am-r-pill);
  background: #E5F0FF; color: var(--am-primary); font-size: 12px; font-weight: 700;
}
#workspace-app-manager .amsy-tag .amsy-x {
  width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center;
  border: none; background: none; border-radius: 50%; color: inherit; padding: 0;
}
#workspace-app-manager .amsy-tag .amsy-x:hover { background: rgba(0,115,234,.16); }
#workspace-app-manager .amsy-tag .amsy-x .amsy-ic { width: 11px; height: 11px; stroke-width: 2.4; }
#workspace-app-manager .amsy-clr {
  height: 26px; padding: 0 10px; border: none; background: none;
  color: var(--am-muted); font-size: 12px; font-weight: 700; border-radius: var(--am-r-pill);
}
#workspace-app-manager .amsy-clr:hover { background: var(--am-surface-2); color: var(--am-text); }

/* ── DẢI "ĐÃ CHỌN N DỊCH VỤ" ──────────────────────────────────────────────
   Chỉ hiện khi có dòng được tick. Dùng nền xanh nhạt + viền primary để tách hẳn
   khỏi hàng chip "Đang lọc" ngay phía trên — hai dải xám cạnh nhau thì không ai
   nhận ra dải nào đang nói về việc gì. */
#workspace-app-manager .amsy-bulk {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 12px; margin-bottom: 12px;
  background: #E5F0FF; border: 1px solid var(--am-primary); border-radius: var(--am-r);
}
#workspace-app-manager .amsy-bulk .amsy-bic {
  width: 26px; height: 26px; flex: none; border-radius: var(--am-r-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--am-primary); color: #fff;
}
#workspace-app-manager .amsy-bulk .amsy-bn { font-size: 13px; font-weight: 700; color: #0B4A9C; }
#workspace-app-manager .amsy-bulk .amsy-bsum {
  font-size: 12.5px; color: var(--am-muted); font-variant-numeric: tabular-nums;
}
#workspace-app-manager .amsy-bulk .amsy-bsum b { color: var(--am-text); }
#workspace-app-manager .amsy-bulk .amsy-bwarn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700; color: #B45309; cursor: help;
}
#workspace-app-manager .amsy-bulk .amsy-bwarn .amsy-ic { width: 13px; height: 13px; }

/* ── BẢNG = board (DS luật 10) ────────────────────────────────────────────── */
#workspace-app-manager .amsy-wrap {
  background: var(--am-surface); border: 1px solid var(--am-border);
  border-radius: var(--am-r); box-shadow: var(--am-shadow); overflow: auto;
}
#workspace-app-manager .amsy-tbl { width: 100%; border-collapse: collapse; table-layout: fixed; }

/* Bề rộng cột PHẢI khai tường minh. Để trình duyệt tự chia thì cột "Dịch vụ" bị bóp
   còn ~90px: "Google Cloud Platform" xuống 3 dòng, dòng phụ xuống 3 dòng nữa, dòng
   cao 150px thay vì 44px (đo 09/09/2026 ở bề ngang thật 1078px). Cột 2 ăn phần còn
   lại, 7 cột kia cố định — chừa ≥ 188px cho cột tên.

   🔴 TỔNG CỐ ĐỊNH GIỮ NGUYÊN 890px khi thêm cột ô tick + nút Nhân bản (10/09/2026):
     34 + 194 + 96 + 116 + 120 + 138 + 192 = 890  (trước đó 220+112+126+128+152+152)
   Cộng thêm mà không siết lại là bảng vượt 1078px và sinh thanh cuốn ngang — đúng
   thứ mà cả khối chú thích này được viết ra để tránh. Sửa một cột thì phải bù ở cột
   khác, đừng để tổng trôi lên. */
#workspace-app-manager .amsy-tbl th:nth-child(1) { width: 34px; }   /* ô tick */
#workspace-app-manager .amsy-tbl th:nth-child(2) { width: auto; }   /* Dịch vụ */
/* 194 = mail dài nhất đang có ("billing@magnoliabev.asia") SAU KHI trừ 40px của nút
   chép + nút mở trang; phần dôi ra cắt bằng ellipsis và có title để rê chuột đọc đủ. */
#workspace-app-manager .amsy-tbl th:nth-child(3) { width: 194px; }  /* Đăng nhập */
#workspace-app-manager .amsy-tbl th:nth-child(4) { width: 96px; }   /* Mật khẩu */
#workspace-app-manager .amsy-tbl th:nth-child(5) { width: 116px; }  /* Phí mỗi kỳ */
#workspace-app-manager .amsy-tbl th:nth-child(6) { width: 120px; }  /* Đóng ngày */
#workspace-app-manager .amsy-tbl th:nth-child(7) { width: 138px; }  /* ĐNTT kỳ này */
#workspace-app-manager .amsy-tbl th:nth-child(8) { width: 192px; }  /* 4 nút thao tác */

/* Ô tick: bỏ padding ngang để 34px thật sự đủ cho ô 15px + vùng bấm.
   accent-color là cách duy nhất tô màu ô tick gốc mà không phải dựng lại bằng
   ::before — dựng lại thì mất luôn trạng thái :disabled và phím Space. */
#workspace-app-manager .amsy-tbl th.amsy-ck,
#workspace-app-manager .amsy-tbl td.amsy-ck { padding: 9px 4px 9px 10px; text-align: left; }
#workspace-app-manager .amsy-tbl .amsy-ck input[type="checkbox"] {
  width: 15px; height: 15px; margin: 0; cursor: pointer;
  accent-color: var(--am-primary);
}
#workspace-app-manager .amsy-tbl .amsy-ck input[type="checkbox"]:disabled { cursor: not-allowed; opacity: .35; }
/* Dòng đang chọn: vạch trái + nền nhạt. Nền phải thắng cả luật :hover bên dưới,
   nếu không rê chuột qua là dấu hiệu "đang chọn" biến mất. */
#workspace-app-manager .amsy-tbl tbody tr[data-on] td { background: #E8F1FF; }
#workspace-app-manager .amsy-tbl tbody tr[data-on]:hover td { background: #DCEAFF; }
#workspace-app-manager .amsy-tbl tbody tr[data-on] td:first-child { box-shadow: inset 3px 0 0 var(--am-primary); }
#workspace-app-manager .amsy-tbl th {
  position: sticky; top: 0; z-index: 2;
  background: #F7F7F9; text-align: left; white-space: nowrap;
  font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: var(--am-muted); padding: 9px 10px; border-bottom: 1px solid var(--am-border);
}
#workspace-app-manager .amsy-tbl th.amsy-r,
#workspace-app-manager .amsy-tbl td.amsy-r { text-align: right; }
#workspace-app-manager .amsy-tbl td {
  padding: 9px 10px; border-bottom: 1px solid var(--am-border);
  font-size: 13px; vertical-align: middle;
}
#workspace-app-manager .amsy-tbl tbody tr { transition: background var(--am-t); }
#workspace-app-manager .amsy-tbl tbody tr:hover td { background: #F4F6FF; }
#workspace-app-manager .amsy-tbl tbody tr:last-child td { border-bottom: none; }
#workspace-app-manager .amsy-tbl tbody tr.is-off td { opacity: .55; }

/* Một dòng, cắt bằng ellipsis (có title để rê chuột đọc đủ). flex-wrap ở dòng phụ
   là thứ đã đẩy dòng cao lên 150px — tên nhóm + nhà cung cấp tự xuống dòng. */
#workspace-app-manager .amsy-nm {
  font-weight: 700; color: var(--am-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#workspace-app-manager .amsy-sub {
  font-size: 11.5px; color: var(--am-soft); margin-top: 2px;
  display: flex; align-items: center; gap: 6px; flex-wrap: nowrap;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#workspace-app-manager .amsy-sub > span:not(.amsy-av) { overflow: hidden; text-overflow: ellipsis; }
/* Ô tiền + ngày: KHÔNG được gãy dòng — "4.200.000 ₫" tách chữ ₫ xuống dòng riêng
   trông như hai con số khác nhau. */
#workspace-app-manager .amsy-tbl td.amsy-nowrap,
#workspace-app-manager .amsy-tbl td.amsy-nowrap .amsy-sub { white-space: nowrap; }
#workspace-app-manager .amsy-av {
  width: 20px; height: 20px; flex: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9.5px; font-weight: 700; color: #fff; letter-spacing: .2px;
}

/* status pill tô đầy nền (DS luật 9) */
#workspace-app-manager .amsy-pill {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 9px; border-radius: var(--am-r-pill);
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
  background: var(--amsy-pb, var(--am-surface-3)); color: var(--amsy-pc, var(--am-muted));
}
#workspace-app-manager .amsy-pill .amsy-ic { width: 12px; height: 12px; stroke-width: 2.2; }

/* ô mật khẩu + mail: nút sao chép chỉ hiện khi rê vào dòng, đỡ rối */
/* 20px chứ không 22: hai nút này ăn vào đúng chỗ của địa chỉ mail. Đo 09/09/2026 —
   với 22px + gap 4px thì "billing@magnoliabev.asia" thiếu 7px và bị cắt. */
#workspace-app-manager .amsy-cp {
  width: 20px; height: 20px; padding: 0; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: var(--am-r-sm);
  background: none; color: var(--am-soft); opacity: 0; transition: opacity var(--am-t);
}
#workspace-app-manager .amsy-tbl tbody tr:hover .amsy-cp { opacity: 1; }
#workspace-app-manager .amsy-cp:focus-visible { opacity: 1; }
#workspace-app-manager .amsy-cp:hover { background: var(--am-surface-2); border-color: var(--am-border); color: var(--am-primary); }
#workspace-app-manager .amsy-cell { display: flex; align-items: center; gap: 3px; min-width: 0; }
#workspace-app-manager .amsy-cell .amsy-tx {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#workspace-app-manager .amsy-pw {
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: 12.5px; letter-spacing: .5px;
}
/* flex-wrap + row-gap: ô thao tác chở 5 nút mà cột chỉ 192px (table-layout:fixed,
   không nở được). Hai nút CHỮ nằm dòng trên, ba nút icon rơi xuống dòng dưới — tự
   xếp, không phải tính pixel. Cách còn lại là siết cột khác để nới cột này, nhưng
   cột "Đăng nhập" 194px vốn đã hụt so với mail dài nhất đang có (32 ký tự). */
#workspace-app-manager .amsy-acts {
  display: flex; align-items: center; gap: 4px; row-gap: 4px;
  flex-wrap: wrap; justify-content: flex-end;
}
/* Nút chữ trong bảng nhỏ hơn nút ở thanh công cụ: 28px cho bằng nút icon cùng dòng,
   và để hai nút chữ (72 + 4 + 74 = 150px) vừa trong 172px lòng ô. */
#workspace-app-manager .amsy-acts .amsy-btn {
  height: 28px; padding: 0 8px; gap: 5px; font-size: 12.5px;
}
#workspace-app-manager .amsy-acts .amsy-btn .amsy-ic { width: 14px; height: 14px; }
#workspace-app-manager .amsy-ib {
  width: 28px; height: 28px; padding: 0; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--am-border); border-radius: var(--am-r-sm);
  background: var(--am-surface); color: var(--am-muted);
}
#workspace-app-manager .amsy-ib:hover { background: var(--am-surface-2); color: var(--am-text); border-color: var(--am-border-2); }
#workspace-app-manager .amsy-ib.is-danger:hover { background: var(--am-stuck-bg); color: var(--am-stuck); border-color: var(--am-stuck); }
#workspace-app-manager .amsy-ib:disabled { opacity: .35; cursor: not-allowed; }

#workspace-app-manager .amsy-none {
  padding: 34px 20px; text-align: center; color: var(--am-soft); font-size: 13px;
  border: 1px dashed var(--am-border-2); border-radius: var(--am-r); background: var(--am-surface);
}
#workspace-app-manager .amsy-load { padding: 28px; text-align: center; color: var(--am-soft); font-size: 13px; }
#workspace-app-manager .amsy-err {
  padding: 14px 16px; border-radius: var(--am-r);
  background: var(--am-stuck-bg); border: 1px solid #F3B7C0; color: #9F1239; font-size: 13px;
}
#workspace-app-manager .amsy-note {
  margin-top: 10px; font-size: 11.5px; color: var(--am-soft); line-height: 1.6;
}

/* ── MODAL ───────────────────────────────────────────────────────────────────
   Gắn thẳng vào <body> nên nằm NGOÀI scope #workspace-app-manager — mọi rule
   dưới đây phải ở scope toàn cục. am-portfolio.css:303 đã phải vá đúng lỗi này
   (icon trong popover ra 0×0 vì luật scope không với tới). */
.amsy-mask {
  position: fixed; inset: 0; z-index: 100010; padding: 20px;
  background: rgba(15,23,42,.5); display: flex; align-items: center; justify-content: center;
}
.amsy-modal {
  --am-surface: #FFFFFF;   --am-surface-2: #F5F6F8;  --am-surface-3: #EBECF0;
  --am-text: #323338;      --am-muted: #676879;      --am-soft: #9699A6;
  --am-primary: #0073EA;   --am-focus: rgba(0,115,234,.30);
  --am-border: #E6E9EF;    --am-border-2: #D0D4E4;
  --am-stuck: #E2445C;     --am-stuck-bg: #FCE8EB;
  --am-r-sm: 4px;          --am-r: 8px;              --am-r-pill: 99px;
  font-family: 'Public Sans', 'Be Vietnam Pro', 'Figtree', system-ui, sans-serif;
  color: var(--am-text); font-size: 14px;
  width: min(760px, 100%); max-height: 90vh; display: flex; flex-direction: column;
  background: var(--am-surface); border-radius: var(--am-r);
  border-top: 3px solid var(--am-primary);          /* DS luật 14 */
  box-shadow: 0 20px 60px rgba(15,23,42,.28); overflow: hidden;
}
.amsy-modal * { box-sizing: border-box; }
.amsy-modal button { font-family: inherit; cursor: pointer; }
.amsy-modal :focus-visible { outline: none; box-shadow: 0 0 0 3px var(--am-focus); }
.amsy-modal .amsy-ic {
  width: 16px; height: 16px; flex: none;
  stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.amsy-mh {
  display: flex; align-items: center; gap: 10px; flex: none;
  padding: 14px 16px; border-bottom: 1px solid var(--am-border); background: var(--am-surface);
}
.amsy-mh .amsy-mi {
  width: 32px; height: 32px; flex: none; border-radius: var(--am-r);
  display: inline-flex; align-items: center; justify-content: center;
  background: #E5F0FF; color: var(--am-primary);
}
.amsy-mh h3 { font-size: 15px; font-weight: 700; margin: 0; }
.amsy-mh .amsy-msub { font-size: 11.5px; color: var(--am-soft); margin-top: 1px; }
.amsy-mx {
  margin-left: auto; width: 30px; height: 30px; flex: none; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--am-border); border-radius: var(--am-r-sm);
  background: var(--am-surface); color: var(--am-muted);
}
.amsy-mx:hover { background: var(--am-surface-2); color: var(--am-text); }
.amsy-mb { flex: 1 1 auto; overflow: auto; padding: 16px; background: var(--am-surface-2); }
.amsy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.amsy-grid .amsy-full { grid-column: 1 / -1; }
.amsy-f {
  background: var(--am-surface); border: 1px solid var(--am-border);
  border-radius: var(--am-r); padding: 8px 10px;
}
.amsy-f > label {
  display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; color: var(--am-muted); margin-bottom: 4px;
}
.amsy-f > label .amsy-req { color: var(--am-stuck); }
.amsy-f input, .amsy-f select, .amsy-f textarea {
  width: 100%; border: 1px solid var(--am-border); border-radius: var(--am-r-sm);
  background: var(--am-surface); color: var(--am-text);
  font-family: inherit; font-size: 13px; padding: 6px 8px; outline: none;
}
.amsy-f input:focus, .amsy-f select:focus, .amsy-f textarea:focus {
  border-color: var(--am-primary); box-shadow: 0 0 0 3px var(--am-focus);
}
.amsy-f textarea { resize: vertical; min-height: 60px; }
.amsy-f .amsy-hint { font-size: 11px; color: var(--am-soft); margin-top: 4px; line-height: 1.5; }
.amsy-f .amsy-row2 { display: flex; gap: 6px; align-items: center; }
.amsy-f .amsy-row2 input { flex: 1; min-width: 0; }
.amsy-mf {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; border-top: 1px solid var(--am-border); background: var(--am-surface);
}
.amsy-mf .amsy-sp { flex: 1; min-width: 0; }
.amsy-mf .amsy-warn { font-size: 12px; color: var(--am-stuck); font-weight: 700; }
.amsy-mbtn {
  height: 34px; padding: 0 14px; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--am-border); border-radius: var(--am-r-sm);
  background: var(--am-surface); color: var(--am-text); font-size: 13px; font-weight: 700;
}
.amsy-mbtn:hover { background: var(--am-surface-2); border-color: var(--am-border-2); }
.amsy-mbtn.is-pri { background: var(--am-primary); border-color: var(--am-primary); color: #fff; }
.amsy-mbtn.is-pri:hover { background: #0060C4; border-color: #0060C4; }
.amsy-mbtn.is-danger { color: var(--am-stuck); border-color: #F3B7C0; }
.amsy-mbtn.is-danger:hover { background: var(--am-stuck-bg); border-color: var(--am-stuck); }
.amsy-mbtn:disabled { opacity: .45; cursor: not-allowed; }

/* ── Ô CHỌN GÕ TÌM ĐƯỢC ───────────────────────────────────────────────────────
   Khai ở scope TOÀN CỤC (không có #workspace-app-manager) vì cùng một ô sống ở HAI
   nơi: thanh công cụ trong tab, và form gắn thẳng vào <body>. Bọc scope là một nửa
   số ô mất sạch luật — đúng lỗi mà am-portfolio.css:303 đã phải vá. */
.amsy-cb { position: relative; display: block; }
.amsy-cb .amsy-cbi {
  width: 100%; padding: 6px 26px 6px 8px;
  border: 1px solid var(--am-border, #E6E9EF); border-radius: var(--am-r-sm, 4px);
  background: var(--am-surface, #fff); color: var(--am-text, #323338);
  font-family: inherit; font-size: 13px; outline: none;
  text-overflow: ellipsis;
}
.amsy-cb .amsy-cbi::placeholder { color: var(--am-soft, #9699A6); }
.amsy-cb .amsy-cbi:focus {
  border-color: var(--am-primary, #0073EA); box-shadow: 0 0 0 3px var(--am-focus, rgba(0,115,234,.30));
}
.amsy-cb .amsy-cbc {
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  width: 13px; height: 13px; pointer-events: auto; cursor: pointer;
  color: var(--am-soft, #9699A6);
}
.amsy-cb.is-open .amsy-cbc { transform: translateY(-50%) rotate(180deg); }
/* Bản ở thanh công cụ phải cao đúng 32px như .amsy-btn bên cạnh, và KHÔNG được nở
   theo mục dài nhất ("Internet / Đường truyền") — thanh công cụ chỉ còn ~160px cho ô này. */
.amsy-cb.is-bar { flex: 0 0 auto; width: 160px; }
.amsy-cb.is-bar .amsy-cbi {
  height: 32px; font-weight: 700;
  background: var(--am-surface, #fff);
}

/* Bảng chọn: gắn ở <body>, position:fixed. z-index 100020 nằm GIỮA modal (100010)
   và toast (100030) — thấp hơn modal là bảng bị lớp phủ nuốt, cao hơn toast là lời
   báo lỗi bị bảng che. */
.amsy-cbp {
  position: fixed; z-index: 100020; max-height: 264px; overflow: auto;
  background: #fff; border: 1px solid #D0D4E4; border-radius: 8px;
  box-shadow: 0 12px 32px rgba(15,23,42,.18); padding: 4px;
  font-family: 'Public Sans', 'Be Vietnam Pro', 'Figtree', system-ui, sans-serif;
}
.amsy-cbp .amsy-cbo {
  display: block; width: 100%; text-align: left; border: none; background: none;
  padding: 7px 9px; border-radius: 5px; cursor: pointer;
  font-family: inherit; font-size: 13px; color: #323338; line-height: 1.35;
}
.amsy-cbp .amsy-cbo.is-act { background: #E5F0FF; color: #0060C4; }
.amsy-cbp .amsy-cbo.is-sel { font-weight: 700; }
.amsy-cbp .amsy-cbo.is-sel::after { content: ' ✓'; color: #0073EA; }
.amsy-cbp .amsy-cbnone { padding: 10px 9px; font-size: 12.5px; color: #9699A6; }

/* Ô CHỈ ĐỌC hiện số quy đổi. Cao bằng đúng một <input> để hàng lưới không lệch. */
.amsy-calc {
  min-height: 30px; display: flex; align-items: center;
  padding: 6px 8px; border: 1px dashed var(--am-border-2, #D0D4E4); border-radius: var(--am-r-sm, 4px);
  background: var(--am-surface-2, #F5F6F8);
  font-size: 15px; font-weight: 700; color: var(--am-text, #323338);
  font-variant-numeric: tabular-nums;
}
.amsy-calc.is-warn { color: var(--am-working, #FDAB3D); font-size: 13px; font-weight: 600; }

/* ── FORM GIẤY ĐỀ NGHỊ THANH TOÁN (js/am-system-payreq.js) ──────────────────── */
.amsy-modal.is-wide { width: min(1120px, 100%); }

.amsypr-warn {
  display: grid; gap: 6px; margin-bottom: 12px;
  padding: 10px 12px; border-radius: var(--am-r, 8px);
  background: #FFF4E4; border: 1px solid #F5C77E;
  font-size: 12.5px; line-height: 1.55; color: #7A4A08;
}
.amsypr-warn > div { display: flex; gap: 7px; align-items: flex-start; }
.amsypr-warn .amsy-ic { width: 15px; height: 15px; margin-top: 2px; color: #B45309; }

/* Vùng thả ảnh/file hoá đơn trên tờ ĐNTT (14/09/2026). Cùng bộ màu với khối
   đính kèm ở tab 💸 Đề nghị thanh toán — hai cửa nạp cùng một loại chứng từ
   thì phải nhìn ra là một thứ. Màu đổi khi kéo-thả do JS gán inline
   (makeInvPicker.wire), nên ở đây chỉ đặt trạng thái nghỉ. */
.amsypr-drop {
  border: 1.5px dashed #C7D2FE; border-radius: 10px; background: #F8FAFF;
  color: #4457A6; padding: 14px; text-align: center;
  font-size: 12.5px; font-weight: 600; cursor: pointer; user-select: none;
}
.amsypr-drop:hover { background: #EEF2FF; border-color: #A5B4FC; }
.amsypr-drop:focus-visible { outline: 2px solid #6366F1; outline-offset: 2px; }
.amsypr-drop-s { font-weight: 500; color: #94A3B8; font-size: 11.5px; margin-top: 3px; }

.amsypr-sec { margin-bottom: 14px; }
.amsypr-sec:last-child { margin-bottom: 0; }
.amsypr-sech {
  display: flex; align-items: center; gap: 6px; margin-bottom: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: var(--am-muted, #676879);
}
.amsypr-sech .amsy-ic { width: 14px; height: 14px; color: var(--am-primary, #0073EA); }
.amsypr-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.amsypr-grid .amsy-full { grid-column: 1 / -1; }

.amsypr-empty {
  padding: 24px; text-align: center; font-size: 13px; color: var(--am-soft, #9699A6);
  background: #fff; border: 1px dashed var(--am-border-2, #D0D4E4); border-radius: var(--am-r, 8px);
}

.amsypr-tbl {
  width: 100%; border-collapse: collapse; table-layout: fixed;
  background: #fff; border: 1px solid var(--am-border, #E6E9EF); border-radius: var(--am-r, 8px);
  overflow: hidden;
}
.amsypr-tbl th {
  background: #F7F7F9; text-align: left; white-space: nowrap;
  font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: var(--am-muted, #676879); padding: 8px 8px; border-bottom: 1px solid var(--am-border, #E6E9EF);
}
.amsypr-tbl td {
  padding: 5px 8px; border-bottom: 1px solid var(--am-border, #E6E9EF);
  font-size: 13px; vertical-align: middle;
}
.amsypr-tbl th.c, .amsypr-tbl td.c { text-align: center; }
.amsypr-tbl th.r, .amsypr-tbl td.r { text-align: right; }
.amsypr-tbl td.amsy-ck { padding: 5px 4px 5px 8px; }
.amsypr-tbl .amsy-ck input[type="checkbox"] {
  width: 15px; height: 15px; margin: 0; cursor: pointer; accent-color: var(--am-primary, #0073EA);
}
/* Dòng bỏ tick vẫn hiện (để tick lại được) nhưng mờ hẳn — ẩn đi thì người dùng
   tưởng dịch vụ biến mất và đi tìm ở bảng ngoài. */
.amsypr-tbl tbody tr.is-off td { opacity: .42; }
.amsypr-tbl .amsypr-nm {
  font-weight: 700; color: var(--am-text, #323338);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.amsypr-tbl .amsypr-sub {
  font-size: 11px; color: var(--am-soft, #9699A6);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.amsypr-tbl .amsypr-amt { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.amsypr-in {
  width: 100%; padding: 5px 7px; box-sizing: border-box;
  border: 1px solid transparent; border-radius: var(--am-r-sm, 4px);
  background: transparent; color: var(--am-text, #323338);
  font-family: inherit; font-size: 12.5px; outline: none;
  text-overflow: ellipsis;
}
.amsypr-in:hover { border-color: var(--am-border, #E6E9EF); background: #fff; }
.amsypr-in:focus {
  border-color: var(--am-primary, #0073EA); background: #fff;
  box-shadow: 0 0 0 3px var(--am-focus, rgba(0,115,234,.30));
}
.amsypr-in.c { text-align: center; }
.amsypr-in.r { text-align: right; font-variant-numeric: tabular-nums; }

.amsypr-tbl tfoot td {
  background: #F7F7F9; font-size: 12.5px; font-weight: 700;
  color: var(--am-muted, #676879); font-variant-numeric: tabular-nums; border-bottom: none;
}
.amsypr-tbl tfoot tr.amsypr-grand td {
  background: #E5F0FF; color: #0B4A9C; font-size: 14px;
  border-top: 1px solid var(--am-primary, #0073EA);
}

.amsypr-foot-n {
  font-size: 12.5px; color: var(--am-muted, #676879); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.amsypr-foot-n b { color: var(--am-text, #323338); }

/* ── POPUP "ĐÃ XUẤT GIẤY" + LỊCH SỬ ĐNTT ─────────────────────────────────────
   Cả hai mở ĐÈ LÊN form ĐNTT (.amsy-mask = 100010) nên cần một nấc z-index riêng,
   nhưng vẫn phải nằm DƯỚI toast (100030): lời báo lỗi phải đọc được kể cả lúc
   popup đang che.
   Khai ở scope TOÀN CỤC — hai modal này gắn thẳng vào <body> nên bọc trong
   #workspace-app-manager là mất sạch luật (am-portfolio.css:303 đã vá đúng lỗi
   đó). Cùng lý do phải khai lại .amsy-av cho trong modal: bản ở trên có tiền tố
   scope nên avatar trong bảng nhật ký sẽ ra thẻ trần 0×0. */
.amsy-mask.is-top { z-index: 100025; }
.amsy-mh .amsy-mi.is-ok { background: #DCFCE7; color: #0F766E; }
.amsy-modal .amsy-av {
  width: 20px; height: 20px; flex: none; border-radius: 50%; vertical-align: middle;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9.5px; font-weight: 700; color: #fff; letter-spacing: .2px;
}

.amsy-modal.amsypr-ok { width: min(520px, 100%); border-top-color: #00C875; }
.amsypr-okbox {
  background: #fff; border: 1px solid var(--am-border, #E6E9EF);
  border-radius: var(--am-r, 8px); padding: 2px 12px;
}
.amsypr-okr {
  display: flex; align-items: baseline; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid var(--am-border, #E6E9EF); font-size: 13px;
}
.amsypr-okr:last-child { border-bottom: 0; }
.amsypr-okr > span {
  flex: 0 0 96px; font-size: 10.5px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; color: var(--am-muted, #676879);
}
.amsypr-okr > b {
  flex: 1; min-width: 0; color: var(--am-text, #323338);
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.amsypr-oklog, .amsypr-oknote {
  display: flex; gap: 7px; align-items: flex-start; margin-top: 10px;
  padding: 8px 10px; border-radius: var(--am-r, 8px); font-size: 12.5px; line-height: 1.55;
}
.amsypr-oklog .amsy-ic, .amsypr-oknote .amsy-ic { width: 15px; height: 15px; margin-top: 2px; flex: none; }
.amsypr-oklog { background: #ECFDF5; border: 1px solid #A7E8C6; color: #14532D; }
.amsypr-oklog .amsy-ic { color: #0F766E; }
.amsypr-oklog.is-warn { background: var(--am-stuck-bg, #FCE8EB); border-color: #F3B7C0; color: #9F1239; }
.amsypr-oklog.is-warn .amsy-ic { color: var(--am-stuck, #E2445C); }
.amsypr-oknote { background: #FFF4E4; border: 1px solid #F5C77E; color: #7A4A08; }
.amsypr-oknote .amsy-ic { color: #B45309; }

.amsylog-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.amsylog-gap { flex: 1; min-width: 0; }
.amsylog-n {
  font-size: 12.5px; font-weight: 700; color: var(--am-muted, #676879); white-space: nowrap;
}
.amsylog-chip {
  height: 30px; padding: 0 13px; border-radius: var(--am-r-pill, 99px);
  border: 1px solid var(--am-border-2, #D0D4E4); background: #fff;
  color: var(--am-muted, #676879); font-family: inherit;
  font-size: 12.5px; font-weight: 700; white-space: nowrap;
}
.amsylog-chip:hover { border-color: var(--am-primary, #0073EA); color: var(--am-primary, #0073EA); }
.amsylog-chip.is-on {
  background: var(--am-primary, #0073EA); border-color: var(--am-primary, #0073EA); color: #fff;
}
.amsylog-msg {
  padding: 28px 20px; text-align: center; font-size: 13px; line-height: 1.65;
  color: var(--am-soft, #9699A6); background: #fff;
  border: 1px dashed var(--am-border-2, #D0D4E4); border-radius: var(--am-r, 8px);
}
.amsylog-msg.is-err {
  color: #9F1239; background: var(--am-stuck-bg, #FCE8EB);
  border: 1px solid #F3B7C0; text-align: left;
}
.amsylog-wrap {
  background: #fff; border: 1px solid var(--am-border, #E6E9EF);
  border-radius: var(--am-r, 8px); overflow: hidden;
}
.amsylog-tbl { width: 100%; border-collapse: collapse; table-layout: fixed; }
.amsylog-tbl th {
  text-align: left; padding: 8px 10px; white-space: nowrap;
  font-size: 10.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  color: var(--am-muted, #676879); background: var(--am-surface-2, #F5F6F8);
  border-bottom: 1px solid var(--am-border, #E6E9EF);
}
.amsylog-tbl td {
  padding: 9px 10px; font-size: 13px; vertical-align: top;
  color: var(--am-text, #323338); border-bottom: 1px solid var(--am-border, #E6E9EF);
}
.amsylog-tbl tbody tr:last-child td { border-bottom: 0; }
.amsylog-tbl tbody tr:hover td { background: var(--am-surface-2, #F5F6F8); }
.amsylog-tbl th.amsylog-r, .amsylog-tbl td.amsylog-r { text-align: right; }
.amsylog-nw { white-space: nowrap; font-variant-numeric: tabular-nums; }
.amsylog-dim { color: var(--am-soft, #9699A6); }
.amsylog-nm { font-weight: 700; margin-left: 6px; }
/* Bảng kê dịch vụ có thể dài hơn ô — cắt một dòng, chuỗi đầy đủ nằm ở title. */
.amsylog-sub {
  margin-top: 3px; font-size: 11px; line-height: 1.45; color: var(--am-soft, #9699A6);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.amsylog-act, .amsylog-pay {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px;
  border: none; border-radius: var(--am-r-pill, 99px);
  background: var(--amsy-pb); color: var(--amsy-pc);
  font-family: inherit; font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.amsylog-act .amsy-ic { width: 13px; height: 13px; }
.amsylog-pay { cursor: pointer; }
.amsylog-pay:hover { filter: brightness(.94); }

/* ── CHI TIẾT TỜ GIẤY ĐÃ LẬP (16/09/2026) ────────────────────────────────────
   Cả dòng nhật ký là một nút mở màn chi tiết. Hover phải đổi sang xanh nhạt chứ
   không giữ xám như cũ: xám là màu hover của bảng chỉ-đọc, người dùng không đọc
   ra "bấm được". Nút › ở cột chót giữ vai bàn phím + dấu hiệu nhìn thấy được. */
.amsylog-tbl tbody tr[data-det] { cursor: pointer; }
.amsylog-tbl tbody tr[data-det]:hover td { background: #E5F0FF; }
.amsylog-go {
  width: 26px; height: 26px; padding: 0; display: inline-flex;
  align-items: center; justify-content: center;
  border: 1px solid var(--am-border, #E6E9EF); border-radius: var(--am-r-sm, 4px);
  background: var(--am-surface, #fff); color: var(--am-muted, #676879);
}
.amsylog-tbl tbody tr:hover .amsylog-go {
  border-color: var(--am-primary, #0073EA); color: var(--am-primary, #0073EA); background: #fff;
}

/* Màn chi tiết mở CHỒNG lên bảng nhật ký (.is-top = 100025) nên cần nấc riêng,
   vẫn phải nằm DƯỚI toast (100030) để lời báo "đã in lại" đọc được. */
.amsy-mask.is-top2 { z-index: 100027; }

/* Thanh sửa ngày trên tờ giấy. Nằm NGOÀI .amsy-f nên ô nhập không thừa hưởng kiểu
   của lưới form — phải khai lại chiều cao/viền, nếu không nó ra ô trần cao 18px,
   thấp hơn hẳn nút "Xoá ngày" bên cạnh. */
.amsydoc-edit {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 12px; padding: 10px 12px;
  background: var(--am-surface, #fff); border: 1px solid var(--am-border, #E6E9EF);
  border-radius: var(--am-r, 8px);
}
.amsydoc-edit > label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  color: var(--am-muted, #676879); white-space: nowrap;
}
.amsydoc-edit input[type="date"] {
  height: 32px; padding: 0 9px; font-family: inherit; font-size: 13px;
  color: var(--am-text, #323338); background: var(--am-surface, #fff);
  border: 1px solid var(--am-border-2, #D0D4E4); border-radius: var(--am-r-sm, 4px);
  font-variant-numeric: tabular-nums;
}
.amsydoc-edit input[type="date"]:focus { outline: none; border-color: var(--am-primary, #0073EA); }
.amsydoc-edit .amsy-mbtn { height: 32px; }
.amsydoc-edith {
  flex: 1 1 260px; min-width: 0;
  font-size: 11.5px; line-height: 1.5; color: var(--am-soft, #9699A6);
}
.amsydoc-edith b { color: var(--am-muted, #676879); }

.amsydoc-cap {
  display: flex; gap: 7px; align-items: center; margin: 12px 0 6px;
  font-size: 11.5px; color: var(--am-muted, #676879);
}
.amsydoc-cap .amsy-ic { width: 14px; height: 14px; flex: none; color: var(--am-primary, #0073EA); }

/* Khung xem trước = CHÍNH bản in, nhúng nguyên chuỗi HTML của nó. Bề ngang chốt
   718px ≈ 190mm — đúng bề ngang trong lề của khổ A5 ngang mà bản in dùng — nên chỗ
   xuống dòng trên màn hình trùng chỗ xuống dòng trên giấy. ĐỪNG đổi sang 100%:
   khung co lại là tên dịch vụ wrap sớm hơn giấy thật, xem trước hoá ra nói dối.
   Hẹp hơn 718px thì cuộn ngang, không bóp tờ giấy. */
.amsydoc-paper {
  background: var(--am-surface-3, #EBECF0); border: 1px solid var(--am-border, #E6E9EF);
  border-radius: var(--am-r, 8px); padding: 14px; overflow: auto;
}
.amsydoc-frame {
  display: block; width: 718px; min-height: 300px; margin: 0 auto; border: 0;
  background: #fff; box-shadow: 0 2px 10px rgba(15,23,42,.14);
}

/* toast — z-index trên cả modal của pay-request.js (99990) để báo được kết quả
   ngay lúc form ĐNTT còn mở */
.amsy-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 100030;
  max-width: min(560px, 92vw);
  background: #0f172a; color: #fff; padding: 10px 18px; border-radius: 9px;
  font-family: 'Public Sans', 'Be Vietnam Pro', system-ui, sans-serif;
  font-size: 13px; font-weight: 600; box-shadow: 0 10px 30px rgba(15,23,42,.3);
}
.amsy-toast.is-bad { background: #B91C1C; }

@media (max-width: 1100px) {
  .amsypr-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .amsy-grid { grid-template-columns: 1fr; }
  .amsypr-grid { grid-template-columns: 1fr; }
}


/* ── ĐÃ THANH TOÁN (14/09/2026) ───────────────────────────────────────────────
   Cờ "kỳ này tiền đã ra" — teal #0F766E, KHÔNG dùng --am-done (#00C875) vì thẻ KPI
   "Đã tạo ĐNTT" đang giữ màu đó: hai việc khác hẳn nhau mà cùng một xanh lá thì
   nhìn lướt qua bảng không phân biệt được "đã lập giấy" với "đã trả tiền".

   Nút ở dòng bảng có HAI trạng thái:
     · chưa đánh dấu → viền teal nhạt, nền trắng (là một hành động, không phải trạng thái)
     · đã đánh dấu   → tô đầy teal (là một trạng thái, DS luật 9)
   Nút ở dải gộp luôn ở dạng viền — dải đó đã có "ĐNTT chung" tô đầy làm hành động chính. */
#workspace-app-manager .amsy-paid { color: #0F766E; border-color: #BFE3DE; background: var(--am-surface); }
#workspace-app-manager .amsy-paid:hover { background: #E9F7F5; border-color: #7FCFC4; color: #0B5F58; }
#workspace-app-manager .amsy-paid.is-on { background: #0F766E; border-color: #0F766E; color: #fff; }
#workspace-app-manager .amsy-paid.is-on:hover { background: #0B5F58; border-color: #0B5F58; color: #fff; }
/* Mờ đi thì phải mất luôn màu teal: nút mờ mà vẫn xanh đọc ra "đã trả rồi". */
#workspace-app-manager .amsy-paid:disabled,
#workspace-app-manager .amsy-paid:disabled:hover {
  background: var(--am-surface); border-color: var(--am-border); color: var(--am-muted);
}

/* Nút phụ nổi hơn nút chữ trắng nhưng không tranh vai primary — dùng cho "Lịch sử"
   ở thanh công cụ (trước 14/09/2026 là nút chỉ-icon, người dùng báo khó thấy). */
#workspace-app-manager .amsy-btn.is-soft { background: #E5F0FF; border-color: #BBD6FF; color: #0B4A9C; }
#workspace-app-manager .amsy-btn.is-soft:hover { background: #D3E5FF; border-color: #8FBFFF; color: #0B4A9C; }
#workspace-app-manager .amsy-btn.is-soft .amsy-ic { color: var(--am-primary); }

/* Mẫu số "/6" của thẻ KPI "Đã thanh toán" — nhỏ và nhạt hơn tử số, nếu cùng cỡ thì
   đọc ra một con số khác (26/6 → "hai mươi sáu trên sáu" mất một nhịp). */
#workspace-app-manager .amsy-kpi .amsy-kv .amsy-kvs {
  font-size: 15px; font-weight: 700; color: var(--am-soft);
}

/* Dải gộp nay chở tới 4 nút (Bỏ chọn · Bỏ đánh dấu · Đã thanh toán · ĐNTT chung)
   cạnh 3 khối chữ — đo 14/09/2026 ở bề ngang thật 1.078px: bản để nguyên nút 32px
   cần 1.096px ⇒ rớt xuống dòng hai (dải cao 92px). Hạ nút xuống 28px như nút trong
   bảng + gap 10→8 là về 1 dòng. Thêm nút thứ 5 vào dải này thì phải đo lại. */
#workspace-app-manager .amsy-bulk { gap: 8px; }
#workspace-app-manager .amsy-bulk .amsy-btn { height: 28px; padding: 0 8px; gap: 5px; font-size: 12.5px; }
#workspace-app-manager .amsy-bulk .amsy-btn .amsy-ic { width: 14px; height: 14px; }