/* Man Tong hop va Xuat (/hoso/{ma}/v{n}/tong-hop, ban in). Chu so huu: lane Tong hop + Xuat (L6, dot UX
   05/10/2026). Dung theo mau noi-bo/giao-dien/mau-ux (muc h) bang thanh phan va token cua app.css:
   dau ho so + 4 buoc, hai cot bang o giua, o phai co danh sach kiem (gap duoc), Gui duyet, Xuat tep
   cuoi co cau hoi khoa ban tai cho, dai tab trang tinh va thanh trang thai o day man. Khong hex,
   chi token. Ban in tu chua trong goi duyet nhung MOI tep CSS ma trang nap
   (tonghop_routes._ban_in_tu_chua) nen phan in nam o cuoi tep nay. */

/* ---------------------------------------------------------------- khung man
   body.khung-ung-dung (base.html block body_class): thanh tren, dau ho so, vung giua tu cuon, dai tab
   trang tinh va thanh trang thai dung o day, khong con noi dung chay duoi dai tab. */
.th { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.th h1, .th h2, .th h3 { margin: 0; }
.th-flash { flex: none; padding: 10px 16px 0; }
.th-flash ul, .th .bao ul { margin: 4px 0 0; padding-left: 18px; }
.th-nhom-loi { margin: 8px 0 0; }
.th-in-nut { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.th .chi-khi-in { display: none; }

/* ---------------------------------------------------------------- hang the so va dai trang thai (UI 29/10/2026)
   Phuong an 1 muc 8 "The so lon tren, bang duoi": so tong va tinh trang chung dung tren cung, cot trai va
   cot phai o duoi. Hai khoi nay co dinh (khong cuon cung vung giua) de luc nao cung thay. */
.th-the { flex: none; display: grid; grid-template-columns: 1.3fr 1.3fr repeat(4, minmax(0, 1fr)); gap: 12px; padding: 12px 16px 0; }
.the { display: flex; flex-direction: column; min-width: 0; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-box); }
.the .nhan-the { margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-dam); color: var(--muted); }
.the .nhan-the label { font: inherit; color: inherit; }
.the .gt { text-align: left; margin: 4px 0; font-size: var(--fs-so-the); font-weight: var(--fw-dam-nhat); line-height: var(--lh-tieu-de); white-space: nowrap; font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.the .gt.tien::after { content: " đ"; font-size: var(--fs-md); font-weight: var(--fw-dam); color: var(--muted); }
.the-toi .gt.tien::after { color: var(--surface); opacity: 0.82; }
.the .dv { font-size: var(--fs-md); font-weight: var(--fw-dam); color: var(--muted); }
.the .ghi { margin: auto 0 0; font-size: var(--fs-sm); color: var(--muted); }
.the .o-nhap { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
.the .o-nhap .o { width: 100%; min-width: 0; text-align: right; font-variant-numeric: tabular-nums; }
.the-toi { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.the-toi .nhan-the, .the-toi .dv, .the-toi .ghi { color: var(--surface); opacity: 0.82; }
.the-toi .ghi strong { color: var(--surface); opacity: 1; }
.the-toi .chua-gia { color: inherit; }
.the-tam .gt { font-size: var(--fs-so-the); }

.th-dai { flex: none; display: flex; align-items: center; gap: 12px; margin: 12px 16px 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-box); background: var(--surface); }
.th-dai .bieu { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; font-weight: var(--fw-dam-nhat); color: var(--accent-ink); }
.th-dai.ok .bieu { background: var(--ok); }
.th-dai.can .bieu { background: var(--warn); }
.th-dai.tin .bieu { background: var(--accent); }
.th-dai.ok { border-color: var(--ok); }
.th-dai.can { border-color: var(--warn); }
.th-dai-chu { flex: 1; min-width: 0; }
.th-dai h2 { font-size: var(--fs-lg); font-weight: var(--fw-dam-nhat); margin: 0; }
.th-dai p { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--muted); }
.th-dai-nut { flex: none; }

/* ---------------------------------------------------------------- chuyen dong (dot UI 29/10/2026, bo MOTION.md)
   Thoi luong, easing, khoang nang lay tu bien chuyen-dong.css (lane uithongbao): --cd-nhan, --cd-e-vao, --cd-nang;
   du phong la token cua mau chuyen-dong pa-2 trong tokens-mau.css (--tg-cham, --cong-ra) va 8px. Giam chuyen dong:
   luat chung o app.css rut moi chuyen dong con doi mau/mo tuc thi, JS khong chay. */

/* Motion Prompt No.081 · MIT License (c) 2026 Shohei Ohtaki · showheyohtaki.github.io/motion-prompt
   Hover lift: chi the BAM DUOC (co lien ket) moi nhac len; bong do rong dan 6 -> 22 px, lech 2 -> 12 px, dam 0,08 -> 0,22. */
.the { position: relative; box-shadow: var(--shadow-card); transition: transform var(--tg-nhanh) var(--cong-ra), box-shadow var(--tg-nhanh) var(--cong-ra); }
.the.bam-duoc a { text-decoration: none; }
.the.bam-duoc a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.the.bam-duoc:hover { transform: translateY(calc(var(--cd-nang, 8px) * -1)); box-shadow: var(--shadow-pop); }
.the.bam-duoc a:focus-visible { outline: none; }
.the.bam-duoc:has(a:focus-visible) { outline: var(--fv-w) solid var(--accent); outline-offset: var(--fv-off); }

/* Motion Prompt No.068 · MIT License (c) 2026 Shohei Ohtaki · showheyohtaki.github.io/motion-prompt
   Step indicator: duong noi xanh la <i> ben trong .noi (template ve san, nen khong JS van dung); chi buoc ke truoc cua
   .xong moi co duong xanh, JS cho duong lon ra tu trai va dau tick nay len khi mot buoc VUA xong. */
.th .buoc .noi { position: relative; overflow: hidden; }
.th .buoc .b1.xong + .noi { background: var(--line-strong); }
.th .buoc .noi > i { position: absolute; inset: 0; background: var(--ok); border-radius: 2px; transform: scaleX(0); transform-origin: left center; }
.th .buoc .b1.xong + .noi > i { transform: scaleX(1); }

/* Motion Prompt No.079 · MIT License (c) 2026 Shohei Ohtaki · showheyohtaki.github.io/motion-prompt
   Scroll progress bar: thanh 6 px, nen xam nhat, phan day = ty le dong da xong tren tong dong (scaleX tu mep trai). */
.th-tien-hang { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.th-tien { flex: 1; min-width: 0; height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.th-tien > i { display: block; height: 100%; background: var(--accent); border-radius: 3px; transform-origin: left center; }
.th-dai.ok .th-tien > i { background: var(--ok); }
.th-tien-chu { flex: none; font-size: var(--fs-xs); color: var(--muted); font-family: var(--font-num); }

/* Motion Prompt No.072 · MIT License (c) 2026 Shohei Ohtaki · showheyohtaki.github.io/motion-prompt
   Empty state: hien dan va nang 8 px trong 350 ms tuyen tinh khi dai chuyen sang "Da soat het dong can xem"; hinh khay thu ve net xanh. */
.th-trong { flex: none; fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; animation: cd-trong var(--tg-cham) var(--cong-ra) both; }
@keyframes cd-trong { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.th-than { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 380px; }
@media (min-width: 1700px) { .th-than { grid-template-columns: minmax(0, 1fr) 420px; } }

/* ---------------------------------------------------------------- cot trai: bang
   Soat dep V12: bang "Theo trang tinh" chiem CA be rong cot trai (ten trang mot dong, dong bang giu 28px
   nhu Excel), the Gia ban nam duoi no, mot hang day du o cuoi (khong bao gia, ghi chu).
   Tu 1700px tro len (man rong) bang trang tinh dung ben trai chiem hai hang, the Gia ban ben phai. */
.th-trai { overflow: auto; padding: 14px 16px 24px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 14px; align-content: start; }
.th-trai > * { min-width: 0; }
.th-trang { grid-column: 1 / -1; }
.th-tong-quan { grid-column: 1 / -1; display: flex; gap: 14px; align-items: flex-start; }
.th-tong-quan > .th-trang { flex: 1 1 0; min-width: 0; }
.th-bieu { flex: 0 0 300px; min-width: 0; }
.th-bieu h2 { font-size: var(--fs-lg); margin-bottom: 10px; }
.bd { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; align-items: center; }
.bd svg { display: block; width: 120px; height: 120px; }
.bd .gt-tam { font-weight: var(--fw-dam-nhat); font-size: 20px; fill: var(--ink); }
.bd .nh-tam { font-size: var(--fs-nhan); fill: var(--muted); font-weight: var(--fw-dam); }
.bd .lat.l1 { stroke: var(--accent); }
.bd .lat.l2 { stroke: var(--ok); }
.bd .lat.l3 { stroke: var(--warn); }
.bd .lat.l4 { stroke: var(--muted); }
.bd .lat.l5 { stroke: var(--line-strong); }
.chu-giai { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.chu-giai li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; line-height: var(--lh-dong); font-size: var(--fs-sm); }
.chu-giai li > .sw { align-self: center; width: 10px; height: 10px; border-radius: 2px; }
.chu-giai .sw.l1 { background: var(--accent); }
.chu-giai .sw.l2 { background: var(--ok); }
.chu-giai .sw.l3 { background: var(--warn); }
.chu-giai .sw.l4 { background: var(--muted); }
.chu-giai .sw.l5 { background: var(--line-strong); }
.chu-giai .ten { font-weight: var(--fw-dam); overflow-wrap: anywhere; }
.sua-luoi.sua-mot { grid-template-columns: minmax(0, 1fr); }
.th-gia-ban { grid-column: 1 / -1; }
.cuon-ngang { overflow-x: auto; }
.th-them { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 14px; align-items: start; }
@media (min-width: 1700px) {
  .th-trai { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); }
  .th-tong-quan { grid-column: 1; grid-row: 1 / span 2; flex-direction: column; align-items: stretch; }
  .th-tong-quan > .th-bieu { flex: none; width: auto; }
  .th-gia-ban { grid-column: 2; }
}
.th-trai .khoi > h3 { font-size: var(--fs-md); font-weight: var(--fw-dam-nhat); margin: 14px 0 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.goi-y { margin: 8px 0 0; max-width: 70ch; font-size: var(--fs-sm); color: var(--muted); }

.th-trai table.b { font-size: var(--fs-md); }
.th-trai table.b th { position: static; padding: 6px 8px; }
.th-trai table.b td { padding: 0 8px; }
.th-trai table.b td:first-child, .th-trai table.b th:first-child { padding-left: 4px; }
.th-trai table.b td:last-child, .th-trai table.b th:last-child { padding-right: 4px; }
.th-trang tr.mo-trang { cursor: pointer; }
.th-trang tr.mo-trang:hover td { background: var(--surface-2); }
.th-trang td a { color: var(--ink); text-decoration: none; }
.th-trang tr.mo-trang:hover td a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
/* ten trang mot dong: cot ten nhan phan con lai cua bang, ten dai cat bang dau ba cham (day du o title) */
.th-trang td.ten-trang { width: 100%; max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-trang td.ten-trang a { display: block; overflow: hidden; text-overflow: ellipsis; }
/* khoi dong thieu DVT/KL co thanh tien tam (cotientam 09/10/2026): nam ngay duoi bang trang tinh, thanh tien tam
   in dam; danh sach theo thanh tien giam dan, ten dai cat bang dau ba cham (day du o title) */
.th-thieu { grid-column: 1 / -1; }
@media (min-width: 1700px) { .th-thieu { grid-column: 2; } }
.th-thieu small { color: var(--muted); }
/* dong "gia von khi khong tinh cac dong nay": chi de doi chieu, khong in dam, khong ke dong tong */
.th-thieu tr.doi-chieu td { color: var(--muted); }
.th-thieu .cuon-ngang { margin-top: 10px; }
.th-thieu td.c-ten { width: 100%; max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-thieu td.c-trang { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-thieu details summary { cursor: pointer; margin-top: 8px; color: var(--accent); font-size: var(--fs-sm); font-weight: var(--fw-dam); }
.ok-dau { color: var(--ok); font-weight: var(--fw-dam); }
/* so dong can xem: chu do khong nen (do chi cho chan; nhan nen do tren moi dong la do het nghia) */
.so-chan { color: var(--danger); font-weight: var(--fw-dam); }
table.b tr.tong td { border-top: 1px solid var(--line-strong); }

/* he so */
details.th-hs { margin-top: 10px; }
details.th-hs summary, details.th-molai summary { cursor: pointer; color: var(--accent); font-size: var(--fs-sm); font-weight: var(--fw-dam); }
.he-so-luoi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 6px; margin-top: 8px; }
.he-so-luoi div { display: flex; justify-content: space-between; gap: 8px; padding: 5px 8px; background: var(--surface-2); border-radius: var(--r-ctl); font-size: var(--fs-sm); }
.he-so-luoi small { color: var(--muted); }
.he-so-luoi b { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: var(--fw-dam); }

.sua-luoi { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px; margin-bottom: 8px; padding-top: 6px; }
.th-gia-ban .bao-loi, .th-gia-tam .bao-loi { margin: 0 0 8px; font-size: var(--fs-sm); color: var(--danger); }
.th-tham-khao ul { margin: 2px 0 8px 18px; padding: 0; }
.th-gia-ban td small { display: block; max-width: 70ch; color: var(--muted); font-size: var(--fs-sm); }

/* khong bao gia, ghi chu tren dong */
.th-them table.b td { height: auto; padding: 6px 8px; vertical-align: top; }
.th-them table.b td.dai { white-space: normal; }
ul.th-q { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
ul.th-q li { border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 8px 10px; background: var(--surface-2); }
ul.th-q .q-src { font-size: var(--fs-xs); color: var(--muted); }
ul.th-q .q-text { font-weight: var(--fw-dam); margin: 2px 0; }
ul.th-q small { color: var(--muted); font-size: var(--fs-xs); }

/* ---------------------------------------------------------------- cot phai: kiem, gui duyet, xuat */
.th-phai { overflow: auto; background: var(--surface); border-left: 1px solid var(--line-strong); padding: 14px 16px 24px; display: flex; flex-direction: column; gap: 12px; }
.th-phai h2 { font-size: var(--fs-lg); font-weight: var(--fw-dam-nhat); }
.th-phai h3 { font-size: var(--fs-md); font-weight: var(--fw-dam-nhat); }
.th-phai p { margin: 0; }
.th-phai .bao { font-size: var(--fs-sm); }
.th-phai .bao.gon { padding: 6px 10px; }
.th-phai .bao ul { margin-top: 4px; }

/* danh sach kiem: du dieu kien thi gap con mot dong de nut gui va nut xuat nam trong tam mat o 690px */
.kiem { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: var(--fs-md); }
.kiem li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: start; }
.kiem li i, .kiem-ok i, .kiem-chua i { width: 16px; height: 16px; border-radius: 50%; margin-top: 2px; display: grid; place-items: center; font-style: normal; font-size: var(--fs-3xs); font-weight: var(--fw-dam-nhat); color: var(--on-fill); background: var(--line-strong); flex: none; }
.kiem li.x i, .kiem-ok i { background: var(--ok); }
.kiem li.c i, .kiem-chua i { background: var(--warn); }
.kiem li span a { display: block; margin-top: 2px; }
.kiem-gap summary { cursor: pointer; list-style: none; font-weight: var(--fw-dam); }
.kiem-gap summary::-webkit-details-marker { display: none; }
.kiem-ok, .kiem-chua { display: inline-flex; align-items: flex-start; gap: 8px; }
.kiem-ok { color: var(--ok); }
.kiem-chua { color: var(--warn); }
.kiem-ok::after, .kiem-chua::after { content: "xem"; font-weight: var(--fw-vua); font-size: var(--fs-sm); color: var(--accent); text-decoration: underline; text-underline-offset: 2px; margin-top: 1px; }
.kiem-gap[open] .kiem-ok::after, .kiem-gap[open] .kiem-chua::after { content: "gập"; }
.kiem-gap .kiem { margin-top: 8px; }
.kiem-cuoi { margin-top: 8px !important; font-size: var(--fs-sm); color: var(--muted); }
/* viec ke tiep khi chua du dieu kien: mot nut chinh duy nhat o o phai ("Mo man Soat") */
.viec-ke { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.viec-ke p { text-align: center; }

.muc-xuat { border-top: 1px solid var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 9px; }
.muc-xuat form { margin: 0; }

/* tep trong goi duyet va tep se ra: nhan XLS, ten tep nhin la biet muc dich, chu phu mot dong */
.ds-tep { display: flex; flex-direction: column; gap: 6px; }
.tep-ra { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 8px; align-items: start; padding: 7px 8px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--surface-2); color: var(--ink); text-decoration: none; }
a.tep-ra:hover { border-color: var(--accent); color: var(--ink); }
.tep-ra b { display: block; font-weight: var(--fw-dam); font-size: var(--fs-sm); overflow-wrap: anywhere; line-height: var(--lh-dong); }
.tep-ra small { display: block; color: var(--muted); font-size: var(--fs-xs); }
/* Soat dep V13: tep noi bo cung mat voi hai the con lai (mo ta tep khong phai canh bao); chi cau
   "Khong gui ra ngoai" mang mau canh bao */
.tep-ra .canh-bao { font-style: normal; font-weight: 600; color: var(--warn); }
.nhap-noi-bo .canh-bao { font-style: normal; font-weight: var(--fw-dam); color: var(--warn); }
.duoi { min-width: 34px; height: 18px; margin-top: 1px; padding: 0 4px; border-radius: 3px; display: grid; place-items: center; font-size: var(--fs-3xs); font-weight: var(--fw-dam-nhat); letter-spacing: 0; line-height: 1; white-space: nowrap; background: var(--muted); color: var(--on-fill); }
.duoi.x { background: var(--ok); }
.duoi.o { background: var(--accent); color: var(--accent-ink); }

/* cau hoi khoa ban ngay trong o phai, thay cho nut Xuat tep cuoi (khong hop phu che trang) */
.xac-nhan-xuat { border: 1px solid var(--accent-line); background: var(--accent-soft); border-radius: var(--r-box); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-md); }
.xac-nhan-xuat:focus { outline: var(--fv-w) solid var(--accent); outline-offset: var(--fv-off); }
.xac-nhan-xuat > b { font-weight: var(--fw-dam-nhat); }
.xac-nhan-xuat .bao { background: var(--surface); }
/* V2-11: ban chi co gia chao 0 hoac qua nua dong de trong gia: khoi do dac, khong chan xuat */
.xac-nhan-xuat .bao.canh-trong { background: var(--danger-soft); }
.xac-nhan-xuat .bao.canh-trong b { color: var(--danger); }
details.th-molai { font-size: var(--fs-sm); }
details.th-molai form { display: flex; gap: 8px; margin-top: 8px; }
details.th-molai .o { flex: 1; }

/* ---------------------------------------------------------------- dai tab trang tinh va thanh trang thai */
/* .tab-trang (tab kieu Excel) la thanh phan chung cua app.css tu khung v2. Soat dep N9b: boc trong
   .tab-dai, hai nut cuon trai phai (chi hien khi co tab khuat, tonghop.js) va nut "Tat ca trang tinh"
   mo danh sach du ten. Mep dai mo dan khi con tab khuat o phia do. */
.tab-dai { flex: none; display: flex; align-items: stretch; position: relative; background: var(--surface-2); }
.tab-dai .tab-trang { flex: 1 1 auto; min-width: 0; scrollbar-width: none; }
.tab-dai .tab-trang::-webkit-scrollbar { display: none; }
.tab-dai.co-trai .tab-trang { -webkit-mask-image: linear-gradient(90deg, transparent 0, black 28px); mask-image: linear-gradient(90deg, transparent 0, black 28px); }
.tab-dai.co-phai .tab-trang { -webkit-mask-image: linear-gradient(90deg, black calc(100% - 28px), transparent 100%); mask-image: linear-gradient(90deg, black calc(100% - 28px), transparent 100%); }
.tab-dai.co-trai.co-phai .tab-trang { -webkit-mask-image: linear-gradient(90deg, transparent 0, black 28px, black calc(100% - 28px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, black 28px, black calc(100% - 28px), transparent 100%); }
.tab-cuon, .tab-ds-nut {
  flex: none; height: 34px; margin: 0; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 0; border-top: 1px solid var(--line-strong); background: var(--surface-2); color: var(--ink-2);
  font-size: var(--fs-nhan); cursor: pointer; transition: background-color var(--t-nhanh) var(--ease), color var(--t-nhanh) var(--ease), transform var(--t-nhanh) var(--ease);
}
.tab-cuon:hover:not(:disabled), .tab-ds-nut:hover { background: var(--surface-3); color: var(--ink); }
.tab-cuon:disabled { color: var(--faint); cursor: default; }
.tab-cuon:active:not(:disabled), .tab-ds-nut:active { transform: var(--lun); }
.tab-cuon .ic, .tab-ds-nut .ic { width: 16px; height: 16px; }
.tab-cuon:focus-visible, .tab-ds-nut:focus-visible { outline-offset: var(--fv-trong); }
.tab-ds-goc { position: relative; flex: none; display: flex; border-left: 1px solid var(--line-strong); }
.tab-ds-nut { padding: 0 12px; font-weight: var(--fw-dam); white-space: nowrap; }
.tab-ds {
  position: absolute; right: 0; bottom: 100%; margin: 0 0 4px; padding: 4px; list-style: none; z-index: var(--z-pop);
  width: max-content; min-width: 240px; max-width: min(360px, calc(100vw - 24px)); max-height: min(60vh, 420px); overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-ctl); box-shadow: var(--shadow-pop);
}
.tab-ds a, .tab-ds .muc-ds {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 10px; border-radius: 6px;
  color: var(--ink); text-decoration: none; font-size: var(--fs-sm);
}
.tab-ds a:hover, .tab-ds a:focus-visible { background: var(--surface-2); }
.tab-ds a:focus-visible { outline-offset: var(--fv-trong); }
.tab-ds .ten { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* V2-10: trang chi co dong nhom van dem vao so trang tinh (cung so voi man Soat), ghi ro "khong co dong" */
.tab .trong, .tab-ds .trong { font-size: var(--fs-xs); font-weight: var(--fw-vua); color: var(--muted); }
.tab .trong { margin-left: 6px; }
.dem { font-family: var(--font-num); font-size: var(--fs-2xs); font-weight: var(--fw-dam); min-width: 20px; height: 18px; padding: 0 5px; border-radius: 9px; display: inline-grid; place-items: center; color: var(--danger); border: 1px solid var(--danger-line); background: var(--surface); }
.thanh-tt .phai b { font-weight: var(--fw-dam); }

/* ---------------------------------------------------------------- man Da xuat (hop thoai goc) */
dialog.dl-xuat { width: min(600px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; }
/* chua chay JS thi dialog[open] khong phai modal: van dat giua man hinh, khong lo tren day trang */
dialog.dl-xuat[open]:not(:modal) { position: fixed; inset: 0; margin: auto; height: fit-content; z-index: var(--z-dialog); }
.dl-xuat .dl-dau p { margin: 2px 0 0; }
.dl-xuat .dl-than { padding-bottom: 8px; }
.dl-xuat .file { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--surface-2); }
.dl-xuat .file b { display: block; font-weight: var(--fw-dam); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.dl-xuat .file small { display: block; color: var(--muted); font-size: var(--fs-xs); }
.dl-xuat .file form { margin: 0; }
.da-go h3 { font-size: var(--fs-md); font-weight: var(--fw-dam-nhat); margin-bottom: 8px; }
.dong-da-gui { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 12px; border-top: 1px dashed var(--line-strong); font-size: var(--fs-sm); margin: 0; }
.dong-da-gui .o:nth-of-type(2) { flex: 1 1 160px; }

/* ---------------------------------------------------------------- vua man hinh nho */
@media (max-width: 1499px) {
  /* giu cot Gia von cho man rong; laptop 1366 de ten trang tinh khoi xuong dong ba dong */
  .th:not(.ban-in) .th-trang .c-von { display: none; }}
/* laptop trong Edge che do ung dung con khoang 690px cao: bo chu phu cua tep de nut Gui duyet va nut
   Xuat tep cuoi cung nam trong khung nhin */
@media (max-height: 740px) {
  .th-phai { gap: 10px; padding-top: 12px; }
  .th-phai .tep-ra:not(.noi-bo) small { display: none; }
  .muc-xuat { padding-top: 10px; gap: 7px; }
}
@media (max-width: 1180px) {
  .th-than { grid-template-columns: minmax(0, 1fr) 340px; }
  .th-trai { grid-template-columns: minmax(0, 1fr); }
  .th-them { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  body.khung-ung-dung { height: auto; overflow: visible; }
  .th { min-height: 0; }
  .th-than { display: flex; flex-direction: column; }
  .th-trai { overflow: visible; padding: 12px 16px; }
  .th-phai { border-left: 0; border-top: 1px solid var(--line-strong); overflow: visible; }
  .he-so-luoi { grid-template-columns: minmax(0, 1fr); }
  .sua-luoi { grid-template-columns: minmax(0, 1fr); }
  .dl-xuat .file { grid-template-columns: 34px minmax(0, 1fr); }
  .dl-xuat .file .btn, .dl-xuat .file form { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------- ban in
   trang /tong-hop/in (tep in trong goi duyet) va lenh In cua trinh duyet tren trang thuong. Khong thu
   vien PDF. A4 ngang cho rieng trang nay (trang in co ten), cac man khac in theo mac dinh. */
body.trang-in .thanh-ben { display: none; }
.th.ban-in .an-khi-in { display: none !important; }
.th.ban-in .chi-khi-in { display: block; }
.th.ban-in .th-than { display: block; }
.th.ban-in .th-trai { overflow: visible; }
@page tong-hop { size: A4 landscape; margin: 9mm; }
@media print {
  body, body.khung-ung-dung { height: auto; min-height: 0; overflow: visible; display: block; }
  .thanh-ben, .an-khi-in, .chi-man-hinh, dialog.dl-xuat { display: none !important; }
  .th .chi-khi-in { display: block; }
  .th { page: tong-hop; display: block; min-height: 0; font-size: 10.5px; line-height: var(--lh-dong); }
  .dau-hs { padding: 0 0 6px; border: 0; background: none; }
  .dau-hs h1 { font-size: 15px; white-space: normal; }
  .dau-hs .meta { white-space: normal; }
  .th-than { display: block; }
  .th .th-trai { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 8px; padding: 0; overflow: visible; }
  .th .khoi { border-color: var(--line-strong); border-radius: 0; padding: 6px 8px; break-inside: avoid; }
  .khoi > h2 { font-size: 12px; margin: 0 0 4px; }
  .th .khoi > h3 { font-size: var(--fs-2xs); margin: 6px 0 2px; padding-top: 6px; }
  .cot-giua, .th-them { gap: 8px; }
  .th-them { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .th-trai table.b { font-size: 10px; }
  .th-trai table.b th { font-size: 9.5px; padding: 2px 4px; }
  .th-trai table.b td { padding: 2px 4px; height: auto; }
  .th-nhom tr.ly-do td { font-size: 9.5px; padding-bottom: 2px; }
  .th-trang .c-von { display: table-cell !important; }
  ul.th-q { gap: 3px; }
  ul.th-q li { padding: 3px 6px; }
  ul.th-q .q-src, ul.th-q small { font-size: 9.5px; }
  ul.th-q .q-text { font-size: 10.5px; margin: 0; }
  .goi-y { font-size: 9.5px; margin-top: 3px; }
  .th a { color: inherit; text-decoration: none; }
  .th .nhan, .th .dem { border-color: var(--ink); }
}

/* Dong co gia nhung ngoai tong cua tep goc: phieu danh dau tuy chon (lane xuat2). */
.tuy-chon-phieu ul { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px; }
.tuy-chon-phieu li { display: grid; gap: 4px; }
.tuy-chon-phieu input[type="text"] { width: 100%; max-width: 420px; }
.tuy-chon-da .tuy-chon-bo { display: inline; margin-left: 6px; }

/* RV-01: dai "Chua luu" khi o he so, van chuyen, lap dat o the khac gia tri luc tai trang (tong-hop-chua-luu.js). */
.th-chua-luu { margin: 8px 16px 0; padding: 8px 14px; border: 1px solid var(--warn); border-radius: var(--r-box); background: var(--surface); font-size: var(--fs-sm); }
.th-chua-luu[hidden] { display: none; }
.th-chua-luu a { font-weight: var(--fw-dam-nhat); }
/* o chon cach xuat o tong chua khop (_san_sang.html): rong bang dai, khong tran theo chu dai nhat trong danh sach (hdsd0611 06/11/2026). */
.tong-chon-phieu select { display: block; width: 100%; max-width: 100%; margin: 4px 0 8px; text-overflow: ellipsis; }