/* NEW-182 (b): màn Công nợ (views/cong_no.js) — tiền tố cn-; dùng lại lớp fl-* của finance_list.css (ô tóm tắt, bảng, thẻ điện thoại).
   Chỉ biến màu của app.css (sáng / tối). Mọi quy tắc ở đây đều có tiền tố cn- ⇒ không đụng màn Tài chính. */
.cn-intro { max-width: 960px; margin: 0 0 8px; }
.cn-aging { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cn-tip { margin: -2px 0 8px; }
.cn-more { margin: 0 0 8px; }
.cn-more > summary { cursor: pointer; font-size: 13px; color: var(--brand-dark); font-weight: 600; padding: 4px 0; }
.cn-more > .fl-aging { margin-top: 6px; }
/* màn rộng: hàng "chưa đến hạn" luôn hiện (JS mở sẵn), không cần dòng mở / đóng */
@media (min-width: 761px) {
  .cn-more > summary { display: none; }
  .cn-more > .fl-aging { margin-top: 0; }
}
.cn-active { margin: 0 0 8px; }
.cn-x { min-width: 28px; padding-left: 6px; padding-right: 6px; }
.cn-block { margin: 22px 0 0; }
.cn-bh { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 0 0 6px; }
.cn-bh h2 { margin: 0; font-size: 17px; }
.cn-seg { display: inline-flex; gap: 4px; }
.cn-viewbar { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin: 0 0 8px; }
.cn-note { margin: 0 0 8px; }
.cn-chip { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; padding: 2px 4px 2px 10px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--surface-2); color: var(--ink); }
.cn-who { color: var(--ink); }
/* tên khách (chế độ Theo khách) là nút lọc — trông như chữ đậm của ô đầu dòng */
.cn-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--ink); text-align: left; cursor: pointer; }
.fl-table tr.fl-row:hover .cn-link, .cn-link:focus-visible { color: var(--brand-dark); text-decoration: underline; }
.cn-table tr.cn-nolink { cursor: default; }
.cn-table td:first-child { min-width: 220px; }
/* dòng đang được chọn bằng bàn phím: viền + nền nhìn thấy rõ (outline trên <tr> không hiện ở mọi trình duyệt) */
.cn-table tr.fl-row:focus-visible { outline: none; }
.cn-table tr.fl-row:focus-visible > td { background: var(--brand-soft); box-shadow: inset 0 2px 0 var(--brand), inset 0 -2px 0 var(--brand); }
.cn-table tr.fl-row:focus-visible > td:first-child { box-shadow: inset 2px 2px 0 var(--brand), inset 0 -2px 0 var(--brand); }
.cn-sub td { vertical-align: top; }
.cn-sub td.num, .cn-sub th.num { white-space: nowrap; }
/* máy tính bảng: 4 nấc hai hàng; cột đầu hẹp hơn để cột Còn nợ / Hạn đứng ngay sau và luôn thấy */
@media (max-width: 1100px) {
  .cn-aging { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cn-table td:first-child { min-width: 180px; }
  .fl-table.cn-table td:first-child > * { max-width: 260px; }
}
@media (max-width: 760px) {
  .cn-table td:first-child { min-width: 0; }
  .cn-seg .btn, .cn-chip .btn { min-height: 44px; }
  .cn-x { min-width: 44px; }
  .cn-bh { justify-content: space-between; }
  .cn-more > summary { padding: 10px 0; }
  /* bảng phụ (đang ứng / chưa xuất HĐ) — thẻ hai cột số */
  table.data.cn-sub tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px 12px; }
  table.data.cn-sub tr > td:first-child { grid-column: 1 / -1; }
  table.data.cn-sub tfoot, table.data.cn-sub tfoot td { display: block; width: 100%; }
  table.data.cn-sub tfoot tr { padding: 10px 12px; }
}
@media (pointer: coarse) {
  .cn-seg .btn { min-height: 44px; }
}