/* Vibary UI — css/ngan_hang.css (chủ tệp: FE Ngân hàng, vòng 2 25/10). Chỉ màn Ngân hàng & Đối chiếu (.tq.tq-nh).
   Lưới dùng nguyên den.css .tq-co-rieng 3 hàng (1440×900 không cuộn dọc): hàng 2 = Cần khắc phục (1/5) · Cảnh báo (5/9) · Tài khoản (9/13);
   hàng 3 = biểu đồ vào/ra (span 7) · bảng giao dịch (span 5, hiện 6 dòng, "Xem thêm" mở cuộn nội bộ).
   Thẻ tài khoản .tk gọn 2 dòng: [đèn · tên sổ · số TK che] / [số dư · thanh tỷ lệ (cơ cấu theo sổ) · %]. Chip xám .chip-chua-noi (app.css .nhan-xam). */

/* ---- khối Tài khoản: ≤5 thẻ, 1 cột, cuộn nội bộ khi thiếu chỗ ---- */
.tq.tq-nh > .khoi-tk .khoi-dau { flex-wrap: wrap; row-gap: var(--k4, 4px); }
.tq.tq-nh > .khoi-tk .khoi-phai { margin-left: auto; }
.tq.tq-nh > .khoi-tk .khoi-than { display: flex; flex-direction: column; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.tk-danh-sach { display: flex; flex-direction: column; gap: var(--k8, 8px); min-width: 0; }
.tk { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 6px var(--k12, 12px) 6px 10px; background: var(--the, #fff); border: 1px solid var(--vien, #E3E9F2); border-left: 4px solid var(--chu-mo, #9AA7B8); border-radius: 10px; transition: transform var(--chuyen, 240ms), box-shadow var(--chuyen, 240ms); }
.tk:hover, .tk:focus-within { transform: translateY(-1px); box-shadow: var(--bong-noi, 0 6px 18px rgba(11, 27, 51, 0.08)); }
.tk-den-xanh { border-left-color: var(--la, #079455); }
.tk-den-vang { border-left-color: var(--vang, #DC6803); }
.tk-den-do { border-left-color: var(--do, #D92D20); }
.tk-den-xam { border-left-color: var(--chu-mo, #9AA7B8); }
.tk-dau { display: flex; align-items: center; gap: var(--k8, 8px); min-width: 0; }
.tk-ten { flex: 1 1 0; min-width: 0; font-weight: 700; color: var(--chu, #0B1B33); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-so-tk { flex: none; color: var(--chu-phu, #5B6A80); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; white-space: nowrap; }
.tk-so { display: flex; align-items: center; gap: var(--k8, 8px); min-width: 0; }
.tk-so-du { flex: none; min-width: 72px; font-weight: 700; color: var(--chu, #0B1B33); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.tk-so-du-trong { color: var(--chu-mo, #9AA7B8); }
.tk-ty-le { flex: 1 1 0; min-width: 24px; height: 8px; border-radius: 999px; background: var(--vien-nhat, #EEF2F7); overflow: hidden; }
.tk-ty-le-day { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--xanh, #1565D8); transition: width 300ms cubic-bezier(.2, .8, .2, 1); }
.tk-den-vang .tk-ty-le-day { background: var(--vang, #DC6803); }
.tk-den-do .tk-ty-le-day { background: var(--do, #D92D20); }
.tk .tk-chu-thich { flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
@media (prefers-reduced-motion: reduce) { .tk, .tk-ty-le-day { transition: none; } }
/* thanh tỷ lệ theo lớp (CSP cấm inline style): .tk-ty-le-0 … .tk-ty-le-100 */
.tk-ty-le-0 { width: 0%; }
.tk-ty-le-1 { width: 1%; }
.tk-ty-le-2 { width: 2%; }
.tk-ty-le-3 { width: 3%; }
.tk-ty-le-4 { width: 4%; }
.tk-ty-le-5 { width: 5%; }
.tk-ty-le-6 { width: 6%; }
.tk-ty-le-7 { width: 7%; }
.tk-ty-le-8 { width: 8%; }
.tk-ty-le-9 { width: 9%; }
.tk-ty-le-10 { width: 10%; }
.tk-ty-le-11 { width: 11%; }
.tk-ty-le-12 { width: 12%; }
.tk-ty-le-13 { width: 13%; }
.tk-ty-le-14 { width: 14%; }
.tk-ty-le-15 { width: 15%; }
.tk-ty-le-16 { width: 16%; }
.tk-ty-le-17 { width: 17%; }
.tk-ty-le-18 { width: 18%; }
.tk-ty-le-19 { width: 19%; }
.tk-ty-le-20 { width: 20%; }
.tk-ty-le-21 { width: 21%; }
.tk-ty-le-22 { width: 22%; }
.tk-ty-le-23 { width: 23%; }
.tk-ty-le-24 { width: 24%; }
.tk-ty-le-25 { width: 25%; }
.tk-ty-le-26 { width: 26%; }
.tk-ty-le-27 { width: 27%; }
.tk-ty-le-28 { width: 28%; }
.tk-ty-le-29 { width: 29%; }
.tk-ty-le-30 { width: 30%; }
.tk-ty-le-31 { width: 31%; }
.tk-ty-le-32 { width: 32%; }
.tk-ty-le-33 { width: 33%; }
.tk-ty-le-34 { width: 34%; }
.tk-ty-le-35 { width: 35%; }
.tk-ty-le-36 { width: 36%; }
.tk-ty-le-37 { width: 37%; }
.tk-ty-le-38 { width: 38%; }
.tk-ty-le-39 { width: 39%; }
.tk-ty-le-40 { width: 40%; }
.tk-ty-le-41 { width: 41%; }
.tk-ty-le-42 { width: 42%; }
.tk-ty-le-43 { width: 43%; }
.tk-ty-le-44 { width: 44%; }
.tk-ty-le-45 { width: 45%; }
.tk-ty-le-46 { width: 46%; }
.tk-ty-le-47 { width: 47%; }
.tk-ty-le-48 { width: 48%; }
.tk-ty-le-49 { width: 49%; }
.tk-ty-le-50 { width: 50%; }
.tk-ty-le-51 { width: 51%; }
.tk-ty-le-52 { width: 52%; }
.tk-ty-le-53 { width: 53%; }
.tk-ty-le-54 { width: 54%; }
.tk-ty-le-55 { width: 55%; }
.tk-ty-le-56 { width: 56%; }
.tk-ty-le-57 { width: 57%; }
.tk-ty-le-58 { width: 58%; }
.tk-ty-le-59 { width: 59%; }
.tk-ty-le-60 { width: 60%; }
.tk-ty-le-61 { width: 61%; }
.tk-ty-le-62 { width: 62%; }
.tk-ty-le-63 { width: 63%; }
.tk-ty-le-64 { width: 64%; }
.tk-ty-le-65 { width: 65%; }
.tk-ty-le-66 { width: 66%; }
.tk-ty-le-67 { width: 67%; }
.tk-ty-le-68 { width: 68%; }
.tk-ty-le-69 { width: 69%; }
.tk-ty-le-70 { width: 70%; }
.tk-ty-le-71 { width: 71%; }
.tk-ty-le-72 { width: 72%; }
.tk-ty-le-73 { width: 73%; }
.tk-ty-le-74 { width: 74%; }
.tk-ty-le-75 { width: 75%; }
.tk-ty-le-76 { width: 76%; }
.tk-ty-le-77 { width: 77%; }
.tk-ty-le-78 { width: 78%; }
.tk-ty-le-79 { width: 79%; }
.tk-ty-le-80 { width: 80%; }
.tk-ty-le-81 { width: 81%; }
.tk-ty-le-82 { width: 82%; }
.tk-ty-le-83 { width: 83%; }
.tk-ty-le-84 { width: 84%; }
.tk-ty-le-85 { width: 85%; }
.tk-ty-le-86 { width: 86%; }
.tk-ty-le-87 { width: 87%; }
.tk-ty-le-88 { width: 88%; }
.tk-ty-le-89 { width: 89%; }
.tk-ty-le-90 { width: 90%; }
.tk-ty-le-91 { width: 91%; }
.tk-ty-le-92 { width: 92%; }
.tk-ty-le-93 { width: 93%; }
.tk-ty-le-94 { width: 94%; }
.tk-ty-le-95 { width: 95%; }
.tk-ty-le-96 { width: 96%; }
.tk-ty-le-97 { width: 97%; }
.tk-ty-le-98 { width: 98%; }
.tk-ty-le-99 { width: 99%; }
.tk-ty-le-100 { width: 100%; }

/* ---- chip xám "Chưa nối API ngân hàng" ---- */
.chip-chua-noi { gap: var(--k8, 8px); line-height: 28px; padding: 0 var(--k12, 12px); font-weight: 700; }
.chip-chua-noi .den { flex: 0 0 8px; width: 8px; height: 8px; box-shadow: none; }
.tq.nh-chua-noi > .khoi-tk { border-style: dashed; }

/* ---- bảng giao dịch: hiện 6 dòng, Xem thêm → cuộn nội bộ; cột phụ ẩn ở khổ hẹp (1024–1279) ---- */
.tq.tq-nh > .khoi-bang.bang-gon table.bang tr.dong-them { display: none; }
.tq.tq-nh > .khoi-bang .khoi-phai { display: inline-flex; gap: var(--k8, 8px); }
.tq.tq-nh > .khoi-bang .nut-xem-them[aria-expanded="true"] { background: var(--xanh-nhat, #E8F0FD); }
.tq.tq-nh > .khoi-bang .khoi-than { min-height: 0; overflow: auto; }
.tq.tq-nh > .khoi-bang .bang-khung { max-width: 100%; overflow-x: hidden; }
.tq.tq-nh > .khoi-bang table.bang td.o-dai { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
@media (min-width: 1024px) and (max-width: 1599px) { .tq.tq-nh > .khoi-bang .o-c-doi_tac { display: none; } }  /* cột Đối tác (có trong CSV) ẩn ở 1024–1599 để Sổ/Số tiền không bị cắt */
/* ---- ≥1024: bảng giao dịch 5 cột trong 5/12 cột lưới không được tràn (khối/khung min-width 0, table-layout fixed, ellipsis + title) ---- */
@media (min-width: 1024px) {
  .tq.tq-dkp.tq-nh > .khoi { min-width: 0; }
  .tq.tq-dkp.tq-nh > .khoi > .khoi-than { min-width: 0; }
  .tq.tq-dkp.tq-nh > .khoi-bang .bang-khung { min-width: 0; width: 100%; overflow-x: hidden; }
  .tq.tq-dkp.tq-nh > .khoi-bang table.bang { width: 100%; max-width: 100%; table-layout: fixed; }
  .tq.tq-dkp.tq-nh > .khoi-bang table.bang th, .tq.tq-dkp.tq-nh > .khoi-bang table.bang td { overflow: hidden; text-overflow: ellipsis; }
  .tq.tq-dkp.tq-nh > .khoi-bang table.bang th.o-ma, .tq.tq-dkp.tq-nh > .khoi-bang table.bang td.o-ma { width: auto; }
}
/* ---- ≥1280 (máy tính 1440×900, 1920): màn vừa khung nhìn, KHÔNG cuộn trang (luật anh Trình 25/10); khối hàng 2 + bảng cuộn nội bộ,
   biểu đồ co theo hàng. 1024–1279 (màn thấp 768px) giữ cách den.css: trang cuộn, bảng/biểu đồ đủ chỗ đọc ---- */
@media (min-width: 1280px) {
  .tq.tq-dkp.tq-nh { height: calc(100vh - var(--cao-dau-trang, 64px) - var(--k12, 12px) - var(--k16, 16px)); min-height: 0; max-height: calc(100vh - var(--cao-dau-trang, 64px) - var(--k12, 12px) - var(--k16, 16px)); grid-template-rows: auto minmax(0, 1fr) minmax(0, 1.15fr); align-items: stretch; }
  .tq.tq-dkp.tq-nh > .khoi { min-width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
  .tq.tq-dkp.tq-nh > .khoi > .khoi-dau { flex: none; }
  .tq.tq-dkp.tq-nh > .khoi > .khoi-than { flex: 1 1 auto; min-height: 0; min-width: 0; }
  .tq.tq-dkp.tq-nh > .khoi-dkp .khoi-than, .tq.tq-dkp.tq-nh > .tq-cb .khoi-than, .tq.tq-dkp.tq-nh > .khoi-tk .khoi-than, .tq.tq-dkp.tq-nh > .khoi-bang .khoi-than { overflow: auto; max-height: none; overscroll-behavior: contain; }
  .tq.tq-dkp.tq-nh > .khoi-dkp .dkp-danh-sach { grid-auto-rows: auto; align-content: start; }
  .tq.tq-dkp.tq-nh > .khoi-dkp::after, .tq.tq-dkp.tq-nh > .tq-cb::after, .tq.tq-dkp.tq-nh > .tq-rieng::after, .tq.tq-dkp.tq-nh > .khoi:has(.dkp-dong)::after { display: none; }
  .tq.tq-dkp.tq-nh.tq-co-rieng > .tq-bd1 { grid-column: 1 / 8; grid-row: 3; height: auto; min-height: 0; max-height: none; }
  .tq.tq-dkp.tq-nh.tq-co-rieng > .tq-bang { grid-column: 8 / 13; grid-row: 3; height: auto; min-height: 0; max-height: none; }
  .tq.tq-dkp.tq-nh > .khoi-bd .khoi-than { position: relative; height: auto; overflow: hidden; }
  .tq.tq-dkp.tq-nh > .khoi-bd .bd-khung { position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: auto; height: auto; min-height: 0; }
  .tq.tq-dkp.tq-nh > .khoi-bang .bang-khung { flex: none; min-width: 0; width: 100%; max-height: none; overflow: hidden; }
  .tq.tq-dkp.tq-nh > .khoi-bang table.bang { height: auto; width: 100%; max-width: 100%; table-layout: fixed; }
  .tq.tq-dkp.tq-nh > .khoi-bang table.bang th, .tq.tq-dkp.tq-nh > .khoi-bang table.bang td { overflow: hidden; text-overflow: ellipsis; }
  .tq.tq-dkp.tq-nh > .khoi-bang table.bang th.o-ma, .tq.tq-dkp.tq-nh > .khoi-bang table.bang td.o-ma { width: auto; }
}
@media (max-width: 640px) {
  .tq.tq-nh > .khoi-tk .khoi-phai { margin-left: 0; flex: 1 0 100%; }
  .chip-chua-noi { min-height: var(--vung-cham, 44px); }
  .tk { padding: var(--k8, 8px) var(--k12, 12px); }
  .tk-so { flex-wrap: wrap; }
  .tk .tk-chu-thich { max-width: 100%; }
  .tq.tq-nh > .khoi-bang table.bang td.o-dai { white-space: normal; }
}