/* =============================================================================
   assets/css/in-a4.css — PHIẾU THU KHỔ A4

   Tệp RIÊNG, không nhồi vào components.css. Hai lý do:
     · components.css đã 1.297 dòng, vượt ngưỡng 800 của blueprint và bộ kiểm
       thử đang báo. Thêm 200 dòng nữa là làm nặng thêm một lỗi đã có.
     · Đây là stylesheet cho GIẤY, không phải cho màn hình. Trộn hai môi trường
       vào một tệp thì mỗi lần sửa màu trên màn lại phải nhớ kiểm tra bản in.

   VÌ SAO IN TỪ TRÌNH DUYỆT CHỨ KHÔNG DỰNG PDF Ở MÁY CHỦ
   Mockup v4 đề nghị dựng PDF ở máy chủ, và đề nghị đó vẫn đúng về lâu dài: bản
   in ở máy chủ luôn giống hệt nhau và lưu lại được đúng bản đã gửi. Nhưng dự án
   này CỐ Ý KHÔNG CÓ BƯỚC BUILD và không có máy chủ ứng dụng — thêm một trình
   dựng PDF là thêm một phụ thuộc nặng hơn toàn bộ phần còn lại của app.

   Đánh đổi đã chọn: in từ trình duyệt, nhưng KHOÁ CHẶT bằng đơn vị mm và
   `@page size:A4`. Cách này đạt khoảng 95% mục tiêu — cùng một tờ giấy trên
   Chrome, Edge, Safari — và phần 5% còn lại (lề mặc định của máy in) người dùng
   chỉnh trong hộp thoại in. Khi nào có edge function thì chuyển, và lúc đó
   KHÔNG phải viết lại bố cục: chỉ cần dựng đúng cây HTML này ở phía kia.

   GHI CHÚ CHO NGƯỜI SỬA SAU: mọi kích thước ở đây dùng mm, không dùng px.
   px trên giấy phụ thuộc DPI của trình điều khiển máy in và sẽ trôi.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. XEM TRƯỚC TRÊN MÀN HÌNH

   Tờ giấy hiện đúng tỉ lệ 210×297mm ngay trong app, trên nền xám để thấy rõ mép
   giấy. Người dùng phải THẤY tờ phiếu trước khi bấm in — không ai muốn phát
   hiện bố cục lệch sau khi đã tốn một tờ giấy.
   -------------------------------------------------------------------------- */
.a4-khung{
  background:var(--surface-3);
  padding:var(--s4);
  overflow:auto;
  display:flex;
  justify-content:center;
}

.a4{
  width:210mm;
  min-height:297mm;
  padding:12mm 14mm;
  background:#FFFFFF;
  color:#0F1A2E;
  box-shadow:var(--shadow-2);
  font-family:var(--font-sans);
  /* Cỡ chữ trên GIẤY. Đây là ngoại lệ duy nhất của luật 1 (sàn 12px) và là
     ngoại lệ có lý do: sàn 12px sinh ra cho màn hình, nơi mật độ điểm ảnh thay
     đổi theo máy và người đọc ngồi cách 40cm. Giấy A4 thì 210mm là con số cố
     định, mực in nét hơn màn hình, và người đọc cầm tờ giấy sát mắt. 3,1mm ở
     đây tương đương 9pt — đúng cỡ nội dung của mọi chứng từ kế toán. */
  font-size:3.1mm;
  line-height:1.45;
  /* Số trên chứng từ PHẢI thẳng cột. Một cột tiền mà chữ số nhảy ngang thì
     người đọc không cộng nhẩm kiểm tra được, và cộng nhẩm kiểm tra là việc
     đầu tiên người thuê làm khi nhận phiếu. */
  font-variant-numeric:tabular-nums;
}

/* -----------------------------------------------------------------------------
   2. ĐẦU PHIẾU
   -------------------------------------------------------------------------- */
.a4__hd{
  display:flex;justify-content:space-between;align-items:flex-start;
  border-bottom:0.5mm solid #0F1A2E;
  padding-bottom:3mm;margin-bottom:5mm;
}
.a4__co{font-size:3.8mm;font-weight:600;letter-spacing:.01em}
.a4__ad{font-size:2.8mm;color:#5B6B85;line-height:1.5;margin-top:0.8mm}
.a4__ma{font-family:var(--font-num);font-size:4.4mm;font-weight:600;letter-spacing:.02em}

.a4__ttl{
  text-align:center;margin:0 0 0.8mm;
  font-size:5.6mm;font-weight:600;letter-spacing:.03em;
}
.a4__sub{text-align:center;font-size:2.9mm;color:#5B6B85;margin:0 0 5mm}

.a4__grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:1.6mm 7mm;margin-bottom:5mm;
}
.a4__k{color:#5B6B85}

/* -----------------------------------------------------------------------------
   3. BẢNG KHOẢN

   Có viền đủ bốn phía — cố ý khác bảng trên màn hình (`.p-tbl`) vốn chỉ dùng
   hairline ngang. Trên màn hình, viền dọc làm bảng ồn. Trên giấy thì ngược lại:
   viền dọc là thứ giữ cho mắt không trượt sang cột khác khi tờ giấy bị gấp
   hoặc photocopy mờ.
   -------------------------------------------------------------------------- */
.a4__tb{width:100%;border-collapse:collapse;margin-bottom:3mm}
.a4__tb th{
  background:#F0F3F8;border:0.2mm solid #C3CDDC;
  padding:1.4mm 2mm;text-align:left;
  font-weight:600;font-size:2.8mm;
}
.a4__tb td{border:0.2mm solid #DCE3ED;padding:1.4mm 2mm;vertical-align:top}
.a4__tb .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.a4__tb tfoot td{
  border-top:0.4mm solid #0F1A2E;font-weight:600;background:#F8FAFD;
}
.a4__tb .ghi{color:#8A98AF;font-size:2.6mm;line-height:1.4;display:block;margin-top:0.4mm}

.a4__chu{margin-bottom:4mm}
.a4__chu i{font-style:italic;font-weight:600}

/* Khối ghi chú pháp lý — vạch hổ phách bên trái, KHÔNG tô nền.
   Tô nền thì tốn mực và photocopy ra một mảng xám. */
.a4__law{
  font-size:2.6mm;color:#5B6B85;line-height:1.55;
  border:0.2mm solid #DCE3ED;border-left:0.8mm solid #D98008;
  padding:2mm 2.6mm;margin-bottom:4mm;
}
.a4__law b{color:#0F1A2E}

/* -----------------------------------------------------------------------------
   4. KHỐI CHUYỂN KHOẢN + DẤU TRẠNG THÁI
   -------------------------------------------------------------------------- */
.a4__tt{
  display:flex;gap:4mm;align-items:flex-start;
  border:0.2mm solid #DCE3ED;border-radius:1mm;
  padding:2.6mm 3mm;margin-bottom:3mm;
}
.a4__qr{width:26mm;height:26mm;flex:0 0 26mm}
.a4__qr svg{display:block;width:100%;height:100%}
.a4__tt__t{font-size:2.9mm;font-weight:600;margin-bottom:0.8mm}
.a4__tt__l{font-size:2.8mm;line-height:1.6}

/* Dấu trạng thái. Viền chứ không phải nền tô kín — một con dấu thật là mực
   viền, và tô kín thì photocopy ra một khối đen. */
.a4__dau{
  align-self:center;text-align:center;
  border:0.4mm solid currentColor;border-radius:1mm;
  padding:2mm 3mm;font-size:3mm;font-weight:600;line-height:1.3;
  white-space:nowrap;
}
.a4__dau--cho{color:#D98008}
.a4__dau--thu{color:#0FA968}
.a4__dau--huy{color:#E23D4D}
.a4__dau small{display:block;font-size:2.4mm;font-weight:400;color:#8A98AF;margin-top:0.8mm}

/* Khối "ghi nhận riêng" cho tiền cọc. Luật cứng số 3 của module: cọc KHÔNG
   phải doanh thu. Trên tờ giấy, nó phải nằm NGOÀI phần tổng cộng và nói rõ
   điều đó — cộng cọc vào tổng thu là cách nhanh nhất để một năm sau không ai
   biết mình thật sự lãi bao nhiêu. */
.a4__coc{
  font-size:2.7mm;border-left:0.8mm solid #DCE3ED;
  padding-left:2.6mm;margin:3mm 0 0;line-height:1.55;
}

/* -----------------------------------------------------------------------------
   5. CHỮ KÝ VÀ CHÂN PHIẾU
   -------------------------------------------------------------------------- */
.a4__sign{
  display:grid;grid-template-columns:1fr 1fr;gap:7mm;
  text-align:center;font-size:2.8mm;margin-top:8mm;
}
.a4__sign b{display:block;font-size:3mm;margin-bottom:0.6mm}
.a4__sign i{display:block;color:#8A98AF;font-style:normal;font-size:2.6mm}
.a4__sign .ln{height:18mm}

.a4__ft{
  margin-top:6mm;padding-top:2mm;border-top:0.2mm solid #DCE3ED;
  font-size:2.5mm;color:#8A98AF;
  display:flex;justify-content:space-between;gap:4mm;
}

/* -----------------------------------------------------------------------------
   6. KHI IN THẬT

   Nguyên tắc: KHÔNG bày lại bố cục cho máy in. Tờ giấy trên màn đã đúng kích
   thước thật rồi, nên bản in chỉ cần GIẤU mọi thứ khác đi. Bày lại hai lần là
   hai bố cục sẽ lệch nhau, và lệch ở bản in thì không ai thấy cho tới lúc phát
   cho khách.
   -------------------------------------------------------------------------- */
@media print{
  @page{ size:A4; margin:0 }

  /* Ẩn toàn bộ app. `visibility` chứ không phải `display:none`: display:none
     gỡ node khỏi luồng và một số trình duyệt tính lại chiều cao tờ giấy sai,
     sinh ra trang trắng thứ hai. visibility giữ nguyên cây, chỉ không vẽ. */
  body > *{ visibility:hidden !important }
  .a4-in, .a4-in *{ visibility:visible !important }

  .a4-in{
    position:absolute !important;
    inset:0 auto auto 0 !important;
    width:210mm !important;
    margin:0 !important;padding:0 !important;
    background:#FFF !important;box-shadow:none !important;
  }
  .a4-khung{
    padding:0 !important;background:#FFF !important;
    display:block !important;overflow:visible !important;
  }
  .a4{
    box-shadow:none !important;
    width:210mm !important;min-height:0 !important;
    /* Lề của TỜ GIẤY nằm ở đây chứ không ở @page: đặt margin trong @page thì
       trình duyệt cộng thêm lề mặc định của máy in và tờ phiếu tụt xuống. */
    padding:12mm 14mm !important;
  }

  /* Máy in mặc định bỏ màu nền để tiết kiệm mực — nhưng đầu bảng mất nền xám
     thì cột bị trôi. Ép in nền cho đúng ba chỗ có nền, không ép toàn trang. */
  .a4__tb th, .a4__tb tfoot td{
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }

  /* Không cắt một dòng khoản làm đôi giữa hai trang. */
  .a4__tb tr{ break-inside:avoid; page-break-inside:avoid }
  .a4__tt, .a4__sign, .a4__law{ break-inside:avoid; page-break-inside:avoid }

  /* Thanh công cụ xem trước không được lên giấy. */
  .a4-thanh{ display:none !important }
}

/* -----------------------------------------------------------------------------
   7. THANH CÔNG CỤ CỦA MÀN XEM TRƯỚC (chỉ trên màn hình)
   -------------------------------------------------------------------------- */
.a4-thanh{
  display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;
  padding:var(--s3) var(--s4);
  background:var(--surface);border-bottom:1px solid var(--line);
}
.a4-thanh__ghi{
  font-size:var(--fs-xs);color:var(--text-3);
  margin-left:auto;text-align:right;line-height:1.5;
}

/* Trên điện thoại, tờ A4 rộng 210mm không vừa màn. Thu nhỏ theo tỉ lệ bằng
   `transform` chứ KHÔNG đổi kích thước: đổi kích thước là bố cục dồn lại và
   bản xem trước không còn giống bản in nữa — mất luôn ý nghĩa của việc xem
   trước. transform giữ nguyên mọi tỉ lệ, chỉ nhỏ đi. */
@media (max-width:900px){
  .a4-khung{ padding:var(--s3) 0 }
  .a4{
    transform:scale(var(--a4-ti-le, .46));
    transform-origin:top center;
    margin-bottom:calc((var(--a4-ti-le, .46) - 1) * 297mm);
  }
}
@media (max-width:900px) and (min-width:520px){
  .a4{ --a4-ti-le:.62 }
}