/* =============================================================================
   assets/css/nha-tro.css — GIAO DIỆN CỤM NHÀ TRỌ (hợp đồng · bàn giao · đối soát)

   VÌ SAO ĐỨNG RIÊNG MỘT TỆP, KHÔNG NHÉT VÀO components.css

   `components.css` đã 2.143 dòng và đang là thủ phạm bị bộ kiểm trần 800 dòng
   chỉ tên. Thêm 500 dòng nữa vào đó là làm nặng thêm đúng cái vấn đề đã ghi
   trong AGENTS.md.

   Nhưng lý do thật không phải độ dài. `components.css` là TỪ VỰNG DÙNG CHUNG —
   thứ mọi màn được phép lắp. Những lớp dưới đây chỉ có nghĩa trong cụm nhà trọ:
   một khung ký, một bảng quyết toán cọc, một biên bản hai cột. Để chúng lẫn vào
   từ vựng chung là mời màn khác dùng lại một thứ chưa từng được thiết kế cho
   chúng — và đó chính là cách một dấu hiệu (vạch màu 3px) từng lan ra sáu chỗ.

   BA LUẬT ĐÃ ÁP TRONG TỆP NÀY

   1. KHÔNG `border-left: 3px solid` Ở BẤT KỲ ĐÂU. Vạch màu trái là dấu hiệu
      của thẻ quyết định (`.m-plan`) và của dòng rent roll (`.nt-rr`) — danh
      sách cho phép trong `tools/ui_test/giao-dien.mjs` có đúng ba tên. Cần
      nhấn mạnh chỗ khác thì dùng phương tiện khác: nền chìm, viền cả thẻ, chip.

   2. CHIỀU CAO BẰNG `min-height`, KHÔNG BAO GIỜ `height`. Ở chế độ chữ lớn
      `--fs-xs` thành 16px và mọi hộp cao cố định đều chạm mép.

   3. MỌI THỨ BẤM ĐƯỢC ĐỀU ≥44px DƯỚI 1024px. Khối `max-width:1023px` ở cuối
      tệp làm việc đó — LUẬT 4b, và nó phải nằm ở khối bề rộng chứ không nằm
      trong `pointer:coarse`, vì trình duyệt headless luôn báo `pointer:fine`
      và một luật không đo được là một luật sẽ trôi mất.
   ========================================================================== */

/* =============================================================================
   1. KHUNG KÝ — ui/chu-ky.js
   ========================================================================== */

.c-ky{display:flex;flex-direction:column;gap:var(--s2)}

.c-ky__khung{
  position:relative;
  border:1px dashed var(--line-strong);
  border-radius:var(--r-md);
  background:var(--surface-2);
  overflow:hidden;
}

/* `touch-action:none` PHẢI ở đây, trên chính thẻ canvas, và phải bằng CSS.
   Thiếu nó thì trên điện thoại kéo ngón tay để ký sẽ CUỘN TRANG thay vì vẽ, và
   người dùng kết luận "app không cho ký". Không làm bằng `preventDefault` trong
   `touchmove` được: trình duyệt coi sự kiện đó là thụ động và bỏ qua. */
.c-ky__canvas{
  display:block;width:100%;
  touch-action:none;
  cursor:crosshair;
  color:var(--text);          /* JS đọc `color` để lấy màu nét — đổi theo sáng/tối */
}

.c-ky__mo{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;gap:var(--s2);
  color:var(--text-3);font-size:var(--fs-sm);
  pointer-events:none;
}

/* Vạch ký: một đường mảnh ở 3/4 chiều cao, đúng chỗ người ta quen đặt nét.
   Không có nó thì chữ ký trôi lên đỉnh khung và trông như ký vội. */
.c-ky__vach{
  position:absolute;left:8%;right:8%;bottom:26%;
  border-bottom:1px solid var(--line);
  pointer-events:none;
}

.c-ky__nut{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.c-ky__dem{margin-left:auto;font-size:var(--fs-xs);color:var(--text-3)}

/* --- Chữ ký đã lưu ------------------------------------------------------- */
.c-kyluu{
  display:flex;flex-direction:column;gap:var(--s1);
  padding:var(--s3);
  border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface);
  min-width:0;
}
.c-kyluu--trong{border-style:dashed;background:var(--surface-2)}
.c-kyluu--lech{border-color:var(--warn);background:var(--warn-soft)}

.c-kyluu__vai{
  font-size:var(--fs-xs);font-weight:var(--fw-bold);
  letter-spacing:.04em;text-transform:uppercase;color:var(--text-3);
}
.c-kyluu__cho{
  min-height:56px;display:flex;align-items:center;
  font-size:var(--fs-sm);color:var(--text-3);font-style:italic;
}
/* Nét ký lưu dưới dạng PNG nền trong suốt, nên trên nền tối nó biến mất. `invert`
   ở chế độ tối là cách rẻ nhất giữ nó đọc được mà không phải lưu hai bản ảnh. */
.c-kyluu__net{
  max-height:64px;max-width:100%;object-fit:contain;object-position:left center;
  align-self:flex-start;
}
[data-theme="dark"] .c-kyluu__net{filter:invert(1) hue-rotate(180deg)}
.c-kyluu__ten{font-size:var(--fs-sm)}
.c-kyluu__luc{font-size:var(--fs-xs);color:var(--text-3)}
.c-kyluu__canh{
  display:flex;align-items:center;gap:var(--s1);
  font-size:var(--fs-xs);color:var(--warn);font-weight:var(--fw-bold);
}

.nt-ky-doi{
  display:grid;grid-template-columns:1fr;gap:var(--s3);
}
@media (min-width:640px){ .nt-ky-doi{grid-template-columns:1fr 1fr} }

.nt-ky-note{
  margin:var(--s3) 0 0;
  font-size:var(--fs-xs);color:var(--text-2);line-height:var(--lh-normal);
  max-width:78ch;
}

.nt-dong{
  display:flex;align-items:flex-start;gap:var(--s2);
  min-height:var(--tap);padding:var(--s2) 0;
  font-size:var(--fs-sm);line-height:var(--lh-normal);cursor:pointer;
}
.nt-dong input{margin-top:3px;flex:0 0 auto}

/* Hàng nút dùng chung cho cả cụm. Không đặt tên `c-…` vì nó chưa được cân nhắc
   cho toàn app — đây là hàng nút của cụm nhà trọ, và giữ tên `nt-` là giữ đúng
   phạm vi đã kiểm. */
.nt-hang-nut{
  display:flex;flex-wrap:wrap;gap:var(--s2);
  margin-top:var(--s3);
}

/* =============================================================================
   2. DANH SÁCH HỢP ĐỒNG
   ========================================================================== */

/* Hai ô A/B: bên nào đã ký thì tô. Đọc được trong một cái liếc và chiếm bằng
   một phần tư chỗ của hai dòng chữ "đã ký / chưa ký". */
.nt-ky2{display:inline-flex;gap:4px}
/* Cỡ chữ đi qua thang token, không viết thẳng 11px. Sàn 12px của dự án sinh ra
   vì `em` lồng nhau từng kéo chữ xuống 8,4px; viết thẳng một số nhỏ hơn là quay
   lại đúng chỗ cũ bằng một cửa khác. Ô nới ra cho vừa `--fs-xs`. */
.nt-ky2__o{
  width:22px;min-height:22px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line-strong);border-radius:var(--r-sm);
  font-size:var(--fs-xs);font-style:normal;font-weight:var(--fw-bold);
  line-height:1;
  color:var(--text-3);background:var(--surface-2);
}
.nt-ky2__o.is-on{
  border-color:var(--up);background:var(--up-soft);color:var(--up);
}

/* Thẻ hợp đồng trên điện thoại. KHÔNG dùng vạch trái 3px (luật 1 của tệp) —
   trạng thái nói bằng chip ở cột phải và bằng nền chìm khi cần chú ý. */
.nt-hd{
  display:flex;align-items:center;gap:var(--s3);
  width:100%;min-height:var(--tap);
  padding:var(--s3);text-align:left;
  border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface);color:inherit;cursor:pointer;
}
.nt-hd + .nt-hd{margin-top:var(--s2)}
.nt-hd:hover{border-color:var(--accent)}
.nt-hd--cho-ky{background:var(--warn-soft);border-color:var(--warn)}
.nt-hd--da-thanh-ly,.nt-hd--huy{opacity:.62}

.nt-hd__ph{
  flex:0 0 46px;
  font-family:var(--font-num);font-size:var(--fs-md);font-weight:var(--fw-bold);
  font-variant-numeric:tabular-nums;
}
.nt-hd__m,.nt-hd__n,.nt-hd__s{display:block}
.nt-hd__m{flex:1;min-width:0}
.nt-hd__n{
  font-size:var(--fs-sm);font-weight:var(--fw-bold);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.nt-hd__s{font-size:var(--fs-xs);color:var(--text-3)}
.nt-hd__t{flex:0 0 auto;text-align:right;display:flex;flex-direction:column;gap:2px;align-items:flex-end}
.nt-hd__t small{font-size:var(--fs-xs);color:var(--text-3)}

/* =============================================================================
   3. TOÀN VĂN HỢP ĐỒNG

   Đây là một VĂN BẢN ĐỂ ĐỌC, không phải một màn dữ liệu. Nên nó theo luật của
   chữ chứ không theo luật của bảng:

     · bề rộng dòng chặn ở 74ch. Đo ngày 06/09 ở 1280px, không chặn thì một
       khoản của Điều 5 dài 1.180px ≈ 145 ký tự một dòng — mắt trượt dòng.
       Chặn BỀ RỘNG CỦA DÒNG CHỮ, không chặn bề rộng của khung: bảng trong Điều
       4 vẫn cần chỗ.
     · `text-align:justify` — đây là chỗ duy nhất trong app dùng nó, và có lý
       do: một văn bản pháp lý căn đều hai mép đọc ra "văn bản", còn căn trái
       đọc ra "ghi chú". Người thuê phân biệt được sự khác nhau đó.
   ========================================================================== */

.nt-doc{max-width:var(--rong-toi-da)}
.nt-doc__nut{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}

.nt-van{font-size:var(--fs-sm);line-height:var(--lh-normal);color:var(--text)}
.nt-van p{max-width:74ch}

.nt-van__dau{text-align:center;margin-bottom:var(--s5)}
.nt-van__qh{
  margin:0;font-size:var(--fs-sm);font-weight:var(--fw-bold);
  text-transform:uppercase;letter-spacing:.02em;max-width:none;
}
.nt-van__qh2{margin:2px 0 0;font-size:var(--fs-sm);font-weight:var(--fw-bold);max-width:none}
.nt-van__gach{margin:2px 0 var(--s4);color:var(--text-3);max-width:none}
.nt-van__tieu{
  margin:0;font-size:var(--fs-xl);font-weight:var(--fw-bold);
  text-transform:uppercase;letter-spacing:.02em;
}
.nt-van__so{margin:var(--s1) 0 0;font-size:var(--fs-xs);color:var(--text-3);max-width:none}

.nt-van__cc{
  margin:0 0 var(--s4);padding:var(--s3);
  border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface-2);
}
.nt-van__cc p{margin:0 0 var(--s1);font-size:var(--fs-xs);color:var(--text-2)}
.nt-van__cc ul{margin:0;padding-left:var(--s4);font-size:var(--fs-xs);color:var(--text-2)}
.nt-van__cc li{margin:2px 0}

.nt-van__hn{margin:0 0 var(--s4)}

.nt-van__ben{
  display:grid;grid-template-columns:1fr;gap:var(--s3);
  margin-bottom:var(--s4);
}
@media (min-width:760px){ .nt-van__ben{grid-template-columns:1fr 1fr} }
.nt-van__mot{
  padding:var(--s3);
  border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface-2);
}
.nt-van__vai{
  margin:0 0 var(--s2);font-size:var(--fs-xs);font-weight:var(--fw-bold);
  letter-spacing:.04em;text-transform:uppercase;color:var(--accent);max-width:none;
}
.nt-van__td{margin:0 0 var(--s5);font-weight:var(--fw-bold)}

.nt-van__dieu{margin:0 0 var(--s5)}
.nt-van__dieu h3{
  margin:0 0 var(--s2);
  font-size:var(--fs-md);font-weight:var(--fw-bold);
}
.nt-van__dieu p{margin:0 0 var(--s2);text-align:justify;hyphens:auto}
/* Số khoản đứng riêng và KHÔNG đậm: đậm cả số lẫn chữ thì mắt không còn mốc
   nào để nhảy khi tìm "khoản 5.3". Đậm mỗi số là đủ để nó nổi. */
.nt-van__stt{font-weight:var(--fw-bold);color:var(--text-2)}
.nt-van__bang{font-size:var(--fs-xs)}
.nt-van__nq{margin:0;padding-left:var(--s5)}
.nt-van__nq li{margin:0 0 var(--s2);max-width:74ch}

/* --- Điều kiện chặn / lời nhắc trong văn bản ------------------------------ */
.nt-chan{
  margin-top:var(--s3);padding:var(--s3);
  border:1px solid var(--warn);border-radius:var(--r-md);
  background:var(--warn-soft);
}
.nt-chan ul{margin:var(--s1) 0 0;padding-left:var(--s4)}
.nt-chan li{margin:var(--s1) 0;font-size:var(--fs-sm);color:var(--text)}

.nt-nhac{margin:var(--s1) 0 0;padding-left:var(--s4)}
.nt-nhac li{margin:var(--s1) 0;font-size:var(--fs-sm);line-height:var(--lh-normal);max-width:74ch}
.nt-nhac code{
  font-family:var(--font-num);font-size:var(--fs-xs);
  background:var(--surface-3);padding:1px 4px;border-radius:var(--r-sm);
}

/* --- Phụ lục -------------------------------------------------------------- */
.nt-pl{
  padding:var(--s3);
  border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface-2);
}
.nt-pl + .nt-pl{margin-top:var(--s3)}
.nt-pl__dau{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.nt-pl__loai{font-size:var(--fs-xs);color:var(--text-3)}
.nt-pl__ly{margin:var(--s2) 0;font-size:var(--fs-sm);max-width:74ch}
.nt-pl__ky{
  display:grid;grid-template-columns:1fr;gap:var(--s2);margin-top:var(--s3);
}
@media (min-width:640px){ .nt-pl__ky{grid-template-columns:1fr 1fr} }

/* =============================================================================
   4. BIÊN BẢN BÀN GIAO — hai cột song song cùng một món

   Bố cục lưới thay vì flex, vì hai cột ảnh phải THẲNG HÀNG giữa các dòng. Với
   flex thì món có ghi chú dài đẩy cột ảnh của chính nó lệch đi, và cả bảng mất
   khả năng so sánh theo chiều dọc — đúng thứ duy nhất bảng này tồn tại để làm.
   ========================================================================== */

.nt-bg{display:flex;flex-direction:column}

.nt-bg__d{
  position:relative;
  display:grid;
  grid-template-columns:1fr auto auto;
  grid-template-areas:'ten vao ra' 'gc gc gc';
  align-items:center;gap:var(--s2) var(--s3);
  padding:var(--s3) var(--s5) var(--s3) 0;
  border-bottom:1px solid var(--line);
}
.nt-bg__d:last-child{border-bottom:0}
/* Món xuống cấp: nền chìm hổ phách, KHÔNG vạch trái (luật 1). Hổ phách chứ
   không đỏ — đây là điều kiện cần xem lại, không phải một khoản lỗ. */
.nt-bg__d.is-xau{background:var(--warn-soft)}

.nt-bg__ten{grid-area:ten;min-width:0}
.nt-bg__ten small{display:block;font-size:var(--fs-xs);color:var(--text-3)}
.nt-bg__tenin{
  width:100%;min-height:28px;padding:2px 0;
  border:0;border-bottom:1px solid transparent;
  background:transparent;color:inherit;
  font-family:inherit;font-size:var(--fs-sm);font-weight:var(--fw-bold);
}
.nt-bg__tenin:hover:not(:disabled){border-bottom-color:var(--line)}
.nt-bg__tenin:focus{outline:0;border-bottom-color:var(--accent)}
.nt-bg__tenin:disabled{opacity:1}

.nt-bg__cot{
  grid-area:ra;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  min-width:72px;
}
.nt-bg__cot--vao{grid-area:vao;opacity:.82}

.nt-bg__tt{font-size:var(--fs-xs);color:var(--text-2);text-align:center}
.nt-bg__gc{font-size:var(--fs-xs);color:var(--text-3);text-align:center;max-width:88px}

.nt-bg__ch{
  min-height:32px;max-width:96px;
  padding:0 var(--s1);
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);color:var(--text);
  font-family:inherit;font-size:var(--fs-xs);
}
.nt-bg__ch.is-trong{border-color:var(--warn);background:var(--warn-soft)}
.nt-bg__ch:focus{outline:0;border-color:var(--accent)}

.nt-bg__gcin{grid-area:gc}
.nt-bg__gcin .c-field__input{min-height:32px;font-size:var(--fs-xs)}

/* Nút bỏ một dòng: nằm ở mép phải, không chiếm một cột riêng của lưới. Chiếm
   một cột thì trên màn hẹp nó ăn mất chỗ của ảnh — mà ảnh mới là nội dung. */
.nt-bg__xoa{
  position:absolute;top:var(--s2);right:0;
  width:28px;min-height:28px;
  display:flex;align-items:center;justify-content:center;
  border:0;border-radius:var(--r-sm);
  background:transparent;color:var(--text-3);cursor:pointer;
}
.nt-bg__xoa:hover{background:var(--down-soft);color:var(--down)}

/* Ô ảnh nhỏ cho bảng nhiều dòng. Sàn chạm được nới lại ở khối 1023px cuối tệp. */
.nt-anh--nho{width:36px;height:36px;flex-basis:36px}

/* --- Dòng tóm tắt trên điện thoại ---------------------------------------- */
.nt-bgr{
  padding:var(--s3);
  border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface);
}
.nt-bgr + .nt-bgr{margin-top:var(--s2)}
.nt-bgr__dau{display:flex;align-items:baseline;gap:var(--s2);flex-wrap:wrap}
.nt-bgr__dau b{font-size:var(--fs-md)}
.nt-bgr__dau span{font-size:var(--fs-sm);color:var(--text-2)}
.nt-bgr__coc{
  margin-left:auto;
  font-family:var(--font-num);font-variant-numeric:tabular-nums;
  font-weight:var(--fw-bold);
}
.nt-bgr__buoc{display:flex;gap:var(--s2);margin-top:var(--s2);flex-wrap:wrap}

.nt-buoc{
  display:inline-flex;align-items:center;gap:var(--s1);
  min-height:32px;padding:0 var(--s2);
  border:1px solid var(--line);border-radius:var(--r-pill);
  background:var(--surface-2);color:var(--text-3);
  font-family:inherit;font-size:var(--fs-xs);cursor:pointer;
}
.nt-buoc.is-dang{border-color:var(--warn);background:var(--warn-soft);color:var(--warn)}
.nt-buoc.is-xong{border-color:var(--up);background:var(--up-soft);color:var(--up)}

/* =============================================================================
   5. BẢNG QUYẾT TOÁN CỌC

   Bày như một PHÉP CỘNG DỌC, không như một bảng dữ liệu: dòng đầu là số bắt
   đầu, các dòng giữa mang dấu − hoặc +, dòng cuối có đường kẻ đôi phía trên.
   Đây là hình dạng người Việt quen đọc trên giấy quyết toán, và nó nói ra được
   cấu trúc của phép tính mà một bảng bốn cột không nói được.
   ========================================================================== */

.nt-qt{display:flex;flex-direction:column}

.nt-qt__d{
  display:flex;align-items:center;gap:var(--s2);
  min-height:var(--tap);padding:var(--s2) 0;
  border-bottom:1px solid var(--line);
}
.nt-qt__d--dau{font-weight:var(--fw-bold)}
.nt-qt__d--dau>span:first-child{flex:1}
.nt-qt__d--cuoi{
  border-bottom:0;border-top:3px double var(--line-strong);
  margin-top:var(--s2);padding-top:var(--s3);
  font-size:var(--fs-md);font-weight:var(--fw-bold);
}
.nt-qt__d--cuoi>span:first-child{flex:1}
.nt-qt__d--cuoi b{color:var(--up)}
.nt-qt__d--cuoi.is-am b{color:var(--down)}

.nt-qt__ten{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.nt-qt__ten small{font-size:var(--fs-xs);color:var(--text-3)}
/* Dấu − và + đứng TRƯỚC tên khoản, không đứng trước con số. Đứng trước con số
   thì nó lẫn với dấu âm của chính con số; đứng trước tên thì nó nói "dòng này
   là một khoản trừ" ngay lúc mắt bắt đầu đọc dòng. */
.nt-qt__dau2{
  display:inline-block;width:14px;
  font-family:var(--font-num);font-weight:var(--fw-bold);color:var(--text-3);
}
.nt-qt__tenin{
  min-height:28px;padding:2px 0;
  border:0;border-bottom:1px solid transparent;
  background:transparent;color:inherit;
  font-family:inherit;font-size:var(--fs-sm);font-weight:var(--fw-bold);
}
.nt-qt__tenin:hover{border-bottom-color:var(--line)}
.nt-qt__tenin:focus{outline:0;border-bottom-color:var(--accent)}

.nt-qt__so{
  width:132px;flex:0 0 132px;
  text-align:right;
  font-family:var(--font-num);font-variant-numeric:tabular-nums;
}
.nt-qt__ly{padding:0 0 var(--s2) 14px;border-bottom:1px solid var(--line)}
.nt-qt__ly .c-field__input{min-height:32px;font-size:var(--fs-xs)}

/* =============================================================================
   6. ĐỐI CHIẾU SAO KÊ
   ========================================================================== */

.nt-sk__nhap{
  font-family:var(--font-num);font-size:var(--fs-xs);
  line-height:1.6;white-space:pre;overflow-x:auto;
}

.nt-sk__d{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:'tien noidung' 'nut nut';
  gap:var(--s2) var(--s3);
  padding:var(--s3) 0;
  border-bottom:1px solid var(--line);
}
@media (min-width:900px){
  .nt-sk__d{
    grid-template-columns:132px 1fr auto;
    grid-template-areas:'tien noidung nut';
    align-items:center;
  }
}
.nt-sk__d:last-child{border-bottom:0}
.nt-sk__d--khop-ma{background:var(--up-soft)}
.nt-sk__d--ma-da-huy,.nt-sk__d--ma-la{background:var(--warn-soft)}
.nt-sk__d--da-khop{opacity:.6}

.nt-sk__t{grid-area:tien;text-align:left}
.nt-sk__t b{
  display:block;
  font-family:var(--font-num);font-variant-numeric:tabular-nums;
  font-size:var(--fs-md);
}
.nt-sk__t small{display:block;font-size:var(--fs-xs);color:var(--text-3)}

.nt-sk__m{grid-area:noidung;min-width:0}
.nt-sk__dau{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.nt-sk__ma{font-family:var(--font-num);font-size:var(--fs-xs);color:var(--text-2)}
.nt-sk__vi{margin:var(--s1) 0 0;font-size:var(--fs-xs);color:var(--text-2);max-width:78ch}
/* Nội dung chuyển khoản giữ NGUYÊN VĂN, kể cả khoảng trắng — nó là bằng chứng,
   và chuẩn hoá nó là làm mất thứ dùng để đối chiếu với sao kê giấy. */
.nt-sk__nd{
  margin:var(--s1) 0 0;
  font-family:var(--font-num);font-size:var(--fs-xs);color:var(--text-3);
  white-space:pre-wrap;word-break:break-word;
}
.nt-sk__nut{
  grid-area:nut;
  display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center;
  justify-content:flex-end;
}

.nt-sk__uv{margin-top:var(--s2)}
.nt-sk__uvd{
  display:flex;align-items:baseline;gap:var(--s2);flex-wrap:wrap;
  width:100%;min-height:32px;padding:var(--s2);
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);color:inherit;
  font-family:inherit;font-size:var(--fs-xs);text-align:left;cursor:pointer;
}
.nt-sk__uvd + .nt-sk__uvd{margin-top:var(--s1)}
.nt-sk__uvd:hover{border-color:var(--accent)}
.nt-sk__uvd b{font-family:var(--font-num)}
.nt-sk__uvd small{width:100%;color:var(--text-3)}

/* =============================================================================
   7. NGƯỠNG DOANH THU VÀ NHỊP MỘT THÁNG
   ========================================================================== */

.nt-nguong{
  display:flex;justify-content:space-between;
  margin-top:var(--s1);
  font-size:var(--fs-xs);color:var(--text-3);
}
.nt-nguong__moc{font-weight:var(--fw-bold);color:var(--text-2)}

.nt-nhip{display:flex;flex-direction:column;gap:var(--s2)}

.nt-nhip__b{
  display:flex;align-items:center;gap:var(--s3);
  width:100%;min-height:var(--tap);padding:var(--s3);
  border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface);color:inherit;
  font-family:inherit;text-align:left;cursor:pointer;
}
.nt-nhip__b:hover{border-color:var(--accent)}
.nt-nhip__b.is-dang{border-color:var(--warn);background:var(--warn-soft)}
.nt-nhip__b.is-xong{opacity:.72}

.nt-nhip__so{
  flex:0 0 28px;width:28px;min-height:28px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line-strong);border-radius:var(--r-pill);
  font-family:var(--font-num);font-size:var(--fs-xs);font-weight:var(--fw-bold);
  color:var(--text-3);
}
.is-dang .nt-nhip__so{border-color:var(--warn);color:var(--warn)}
.is-xong .nt-nhip__so{border-color:var(--up);background:var(--up-soft);color:var(--up)}

.nt-nhip__m{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.nt-nhip__m b{font-size:var(--fs-sm)}
.nt-nhip__m small{font-size:var(--fs-xs);color:var(--text-3)}

.nt-nhip__t{flex:0 0 96px;width:96px;text-align:right}
.nt-nhip__t b{
  display:block;margin-bottom:4px;
  font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:var(--fs-xs);
}

/* =============================================================================
   8. GHI CÔNG TƠ TRÊN ĐIỆN THOẠI — thêm 06/09/2026

   Màn duy nhất trong app được dùng khi người ta ĐANG ĐỨNG TRƯỚC CÁI ĐỒNG HỒ:
   một tay cầm điện thoại, một tay soi đèn, trời thường đã tối. Mọi kích thước
   dưới đây chọn theo tình huống đó, không theo cái nhìn đẹp trên màn hình rộng.
   ========================================================================== */

.nt-ct2{display:flex;flex-direction:column;gap:var(--s3)}

.nt-ct2__dau{display:flex;align-items:baseline;gap:var(--s2);flex-wrap:wrap}
.nt-ct2__ph{font-size:var(--fs-lg)}
.nt-ct2__ng{flex:1;min-width:0;font-size:var(--fs-xs);color:var(--text-3)}

.nt-dh{
  padding:var(--s3);
  border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface-2);
}
.nt-dh__nhan{
  display:flex;align-items:center;gap:var(--s1);
  font-size:var(--fs-xs);font-weight:var(--fw-bold);
  letter-spacing:.04em;text-transform:uppercase;color:var(--text-2);
}
.nt-dh__nhan small{
  margin-left:auto;font-size:var(--fs-xs);font-weight:var(--fw-normal);
  letter-spacing:0;text-transform:none;color:var(--text-3);
}

.nt-dh__hang{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s2)}

/* Chỉ số cũ IN TO. Trong bảng nó là một con số xám ở cột bên cạnh; ở đây nó là
   thứ người ghi phải đối chiếu với mặt đồng hồ, nên nó phải đọc được ở khoảng
   cách một cánh tay, trong bóng tối, không cần đeo kính. */
.nt-dh__cu{display:flex;flex-direction:column;min-width:76px}
.nt-dh__cu small{font-size:var(--fs-xs);color:var(--text-3)}
.nt-dh__cu b{
  font-family:var(--font-num);font-size:var(--fs-lg);
  font-variant-numeric:tabular-nums;color:var(--text-2);
}
.nt-dh__mui{color:var(--text-3);font-size:var(--fs-lg)}

/* Ô nhập cao 56px và chữ cỡ --fs-xl. Sàn chạm của dự án là 44px; ở đây cố ý
   vượt lên, vì đây là ô nhập DUY NHẤT trên thẻ và mục tiêu càng lớn thì càng
   ít trượt khi tay đang bận. */
.nt-dh__in{
  flex:1;min-width:0;min-height:56px;padding:0 var(--s3);
  border:1px solid var(--line-strong);border-radius:var(--r-md);
  background:var(--surface);color:var(--text);
  font-family:var(--font-num);font-size:var(--fs-xl);font-weight:var(--fw-bold);
  font-variant-numeric:tabular-nums;text-align:right;
}
.nt-dh__in:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}

/* Kết quả ngay dưới ô nhập, cập nhật lúc gõ. Ghi sai một chữ số thì con số tiền
   nhảy lên gấp mười và người ghi thấy NGAY, tại chỗ, trước khi rời khỏi đồng
   hồ. Phát hiện ở đây tốn ba giây; phát hiện sau khi người thuê đã trả tiền tốn
   một phiếu huỷ, một phiếu lập lại, và một phần lòng tin. */
.nt-dh__ra{
  display:flex;align-items:baseline;gap:var(--s2);flex-wrap:wrap;
  margin-top:var(--s2);font-size:var(--fs-sm);
}
.nt-dh__ra b{font-family:var(--font-num);font-variant-numeric:tabular-nums}
.nt-dh__ra span{color:var(--text-2)}
.nt-dh__ra small{width:100%}

.nt-ct2__nut{display:flex;flex-direction:column;gap:var(--s2)}

/* Nút ảnh trải rộng, CÓ CHỮ. Ảnh mặt công tơ là điều kiện chặn phát hành — nó
   không được trông như một tuỳ chọn, và một ô vuông 36px lẫn giữa các cột thì
   trông đúng như một tuỳ chọn. */
.nt-anhto{
  display:flex;align-items:center;gap:var(--s3);
  width:100%;min-height:var(--tap);padding:var(--s3);
  border:1px dashed var(--line-strong);border-radius:var(--r-md);
  background:var(--surface-2);color:var(--text-2);
  font-family:inherit;font-size:var(--fs-sm);text-align:left;cursor:pointer;
}
.nt-anhto:hover{border-color:var(--accent);color:var(--accent)}
.nt-anhto span{display:flex;flex-direction:column}
.nt-anhto small{font-size:var(--fs-xs);color:var(--text-3)}
.nt-anhto--co{
  border-style:solid;border-color:var(--up);background:var(--up-soft);cursor:default;
}
.nt-anhto--co img{
  width:56px;height:56px;flex:0 0 56px;
  object-fit:cover;border-radius:var(--r-sm);
}
.nt-anhto__m{display:flex;flex-direction:column;gap:var(--s2);min-width:0}
.nt-anhto__m b{display:flex;align-items:center;gap:var(--s1);font-size:var(--fs-sm);color:var(--up)}
.nt-anhto__m>div{display:flex;gap:var(--s2);flex-wrap:wrap}

/* =============================================================================
   9. KHOẢN MỤC PHIẾU THU · XÁC NHẬN THU · SỔ · TẠM TRÚ
   ========================================================================== */

.nt-km{
  display:flex;align-items:center;gap:var(--s2);
  min-height:var(--tap);padding:var(--s2) 0;
  border-bottom:1px solid var(--line);
}
.nt-km:last-child{border-bottom:0}
.nt-km--tong{
  border-bottom:0;border-top:2px solid var(--line-strong);
  margin-top:var(--s1);padding-top:var(--s3);font-size:var(--fs-md);
}
.nt-km__t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.nt-km__t small{font-size:var(--fs-xs);color:var(--text-3)}
.nt-km__t small:empty{display:none}
.nt-km__v{
  font-family:var(--font-num);font-variant-numeric:tabular-nums;
  text-align:right;white-space:nowrap;
}
.nt-km__so{
  width:124px;flex:0 0 124px;min-height:var(--tap);padding:0 var(--s2);
  border:1px solid var(--line-strong);border-radius:var(--r-sm);
  background:var(--surface);color:var(--text);
  font-family:var(--font-num);font-size:var(--fs-sm);
  font-variant-numeric:tabular-nums;text-align:right;
}
.nt-km__so:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.nt-km__bo{
  width:30px;min-height:30px;flex:0 0 30px;
  display:flex;align-items:center;justify-content:center;
  border:0;border-radius:var(--r-sm);
  background:transparent;color:var(--text-3);cursor:pointer;
}
.nt-km__bo:hover{background:var(--down-soft);color:var(--down)}

.nt-them{
  margin:var(--s2) 0;padding:var(--s3);
  border:1px solid var(--accent);border-radius:var(--r-md);
  background:var(--accent-soft);
  display:flex;flex-direction:column;gap:var(--s2);
}
.nt-them__nut{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s1)}

/* Hai nút thu XẾP DỌC trên màn hẹp, không xếp ngang. Nhãn có mang số tiền nên
   nó dài; xếp ngang thì hoặc chữ bị cắt, hoặc nút hẹp dưới sàn chạm. */
.nt-thu{display:flex;flex-direction:column;gap:var(--s2)}
@media (min-width:640px){ .nt-thu{flex-direction:row} }

/* Lối rẽ "trả một phần" là một liên kết chữ, không phải một nút thứ ba. Nút thứ
   ba ngang hàng với hai nút kia sẽ chia đều sự chú ý cho một ca hiếm. */
.nt-motphan{
  align-self:flex-start;
  min-height:var(--tap);padding:0;
  border:0;background:transparent;
  color:var(--accent);font-family:inherit;font-size:var(--fs-sm);
  text-decoration:underline;cursor:pointer;
}

.nt-so2,.nt-pt,.nt-tt{
  display:flex;gap:var(--s2);
  padding:var(--s3) 0;
  border-bottom:1px solid var(--line);
}
.nt-so2:last-child,.nt-pt:last-child,.nt-tt:last-child{border-bottom:0}

.nt-so2{align-items:center}
.nt-so2__m{flex:1;min-width:0;display:flex;flex-direction:column}
.nt-so2__m b{font-size:var(--fs-sm)}
.nt-so2__m small,.nt-so2__t small{font-size:var(--fs-xs);color:var(--text-3)}
.nt-so2__t{display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.nt-so2__t b{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:var(--fs-sm)}

/* Phiếu trên màn người thuê: mã phiếu ĐỨNG RIÊNG MỘT DÒNG và dùng bộ chữ số.
   Nó là nội dung chuyển khoản — người thuê phải chép được nó sang app ngân
   hàng, nên nó không được nằm lẫn trong một dòng chữ. */
.nt-pt{flex-direction:column;gap:var(--s2)}
.nt-pt__dau{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.nt-pt__dau b{font-size:var(--fs-md)}
.nt-pt__ma{
  font-family:var(--font-num);font-size:var(--fs-sm);letter-spacing:.02em;
  color:var(--text-2);word-break:break-all;
}
.nt-pt__so{display:flex;gap:var(--s3);flex-wrap:wrap}
.nt-pt__so span{display:flex;flex-direction:column;min-width:88px}
.nt-pt__so small{font-size:var(--fs-xs);color:var(--text-3)}
.nt-pt__so b{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:var(--fs-sm)}
.nt-pt__ghi{font-size:var(--fs-xs);color:var(--text-3)}

.nt-tt{align-items:center}
.nt-tt.is-gap{background:var(--warn-soft)}
.nt-tt__m{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.nt-tt__m b{font-size:var(--fs-sm)}
.nt-tt__m small{font-size:var(--fs-xs);color:var(--text-3)}
.nt-tt__t{flex:0 0 auto}

/* =============================================================================
   10. SÀN CHẠM DƯỚI 1024px — LUẬT 4b

   Khối này phải ở CUỐI tệp và ở khối BỀ RỘNG, không nằm trong `pointer:coarse`.
   Lý do đầy đủ trong `mobile-refresh.css`: mọi trình duyệt headless đều báo
   `pointer:fine`, nên một luật nằm trong khối đó là luật không bộ đo nào nhìn
   thấy — và một luật không đo được sẽ trôi mất mà không ai hay.
   ========================================================================== */
@media (max-width:1023px){
  .nt-buoc,
  .nt-sk__uvd,
  .nt-bg__ch{min-height:var(--tap)}

  .nt-bg__xoa{width:var(--tap);min-height:var(--tap)}
  .nt-anh--nho{width:var(--tap);height:var(--tap);flex-basis:var(--tap)}

  /* Ô nhập tiền trong bảng quyết toán co lại theo màn, nhưng không dưới 96px —
     dưới mức đó thì "12.500.000" bị cắt và người ta gõ mà không thấy mình gõ gì. */
  .nt-qt__so{width:max(96px,34vw);flex-basis:max(96px,34vw)}

  /* Biên bản bàn giao trên màn hẹp: hai cột ảnh VẪN CẠNH NHAU. Xếp chồng là
     quay về hai album rời, chỉ khác là chúng gần nhau hơn — mà việc ghép hai
     ảnh cùng một món là toàn bộ lý do màn này tồn tại. Ảnh nhỏ đi thì chấp
     nhận được; chạm vào là xem to. */
  .nt-bg__d{gap:var(--s1) var(--s2);padding-right:var(--s6)}
  .nt-bg__cot{min-width:var(--tap)}
  .nt-bg__gc{max-width:72px}

  .nt-nhip__t{flex-basis:76px;width:76px}

  /* Nút bỏ một khoản trên phiếu: 30px là đủ cho chuột, không đủ cho ngón tay. */
  .nt-km__bo{width:var(--tap);min-height:var(--tap);flex-basis:var(--tap)}

  /* Ô sửa số tiền co theo màn nhưng không dưới 108px — dưới mức đó thì
     "12.500.000" bị cắt và người ta gõ mà không thấy mình gõ gì. */
  .nt-km__so{width:max(108px,32vw);flex-basis:max(108px,32vw)}
}