/* Man Soat dong (/hoso/{ma}/v{n}/soat). Chu so huu: lane man Soat (L5, dot UX 05/10/2026).
   Bo cuc mock 27/09 theo mau noi-bo/giao-dien/mau-ux muc g: dau ho so (.dau-hs, .buoc, .luu cua
   khung chung), dai cong cu, thanh Luu loi (.bao.loi), bang trai + khung phai gap duoc, tab trang
   tinh va thanh tong (.thanh-tt) o day. Chi dung token cua app.css: khong mau hex, bo goc 4/6 px.
   Dong can xem (moi dong can xem deu chan xuat tep cuoi) nen trang nhu dong thuong, chi co nhan chan
   vien mong; chi dong dang chon co nen nhat + o so dong mau nhan. */

/* ---------------------------------------------------------------- khung man */
.man-soat { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.man-soat > * { flex: none; }
.man-soat > .soat-than { flex: 1; min-height: 0; }
.man-soat .dau-hs { align-items: center; }
.man-soat .dau-hs .meta > span:first-child { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.luu.cho { color: var(--muted); }
.luu.cho .cham { background: var(--line-strong); }

/* ---------------------------------------------------------------- dai cong cu */
.soat-cc {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 16px; background: var(--surface);
  border-bottom: 1px solid var(--line-strong);
}
.con-xem { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; min-width: 0; }
.con-xem b { font-size: var(--fs-lg); font-weight: var(--fw-dam-nhat); }
.con-xem b.xong { color: var(--ok); }
.con-xem .chan-dem { color: var(--danger); font-size: var(--fs-sm); font-weight: var(--fw-dam); }
.con-xem .phu { color: var(--muted); font-size: var(--fs-sm); }
/* uisoat 05/11: moi so ghi ro pham vi (so lon la ca ho so, ba nut loc la trang tinh dang mo) */
.con-xem .pham-vi { color: var(--muted); font-size: var(--fs-sm); }
.soat-cc .seg-nhan { color: var(--muted); font-size: var(--fs-sm); white-space: nowrap; margin-right: -6px; }
.tien-xem { width: 64px; height: 6px; border-radius: var(--r-ctl); background: var(--surface-3); overflow: hidden; flex: none; }
.tien-xem i { display: block; height: 100%; width: 100%; background: var(--ok); transform-origin: left; transition: transform var(--tg-vua) var(--ease); }
.soat-cc .seg button { display: inline-flex; align-items: center; }
/* o tim dung sat bo loc (soat dep L9), khong bi day ra mep phai */
.tim { position: relative; display: flex; align-items: center; flex: 1 1 110px; max-width: 220px; min-width: 110px; }
.tim svg {
  position: absolute; left: 9px; width: 15px; height: 15px; fill: none; stroke: var(--muted); stroke-width: 2;
  stroke-linecap: round; pointer-events: none;
}
.tim .o { width: 100%; padding-left: 30px; }
.dai-bao { margin: 8px 16px 0; }
.dai-bao:last-child { margin-bottom: 8px; }
#dai > .dai-bao + .dai-bao { margin-top: 6px; }
/* khoi dong thieu DVT/KL co thanh tien tam (cotientam 09/10/2026): dong lon nhat hien san, danh sach gap
   trong <details> va cuon rieng de khong day bang soat xuong */
.thieu-kl { padding-top: 6px; padding-bottom: 6px; font-size: var(--fs-sm); line-height: var(--lh-dong); }
.thieu-kl > div { flex: 1; }
.thieu-kl p { margin: 0; }
.thieu-kl .btn.nho { margin-left: 6px; }
.thieu-kl-ds { margin-top: 6px; }
.thieu-kl-ds summary { cursor: pointer; color: var(--accent); font-weight: var(--fw-dam); }
.thieu-kl-ds .cuon { max-height: 220px; overflow: auto; margin-top: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-ctl); }
.thieu-kl-ds table.b { font-size: var(--fs-sm); }
.thieu-kl-ds td { height: 28px; padding: 0 8px; white-space: nowrap; }
.thieu-kl-ds td.c-ten { width: 100%; max-width: 0; overflow: hidden; text-overflow: ellipsis; }
.thieu-kl-ds td.c-trang { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }

/* thanh Luu loi: ngay duoi dai cong cu, ca be ngang, nut Thu lai dat phai */
.loi-luu { margin: 0; border-radius: 0; border-width: 0 0 1px; align-items: center; padding: 8px 16px; font-size: var(--fs-sm); }
.loi-luu > .loi-ds { flex: 1; }
.loi-luu p { margin: 0; }
.loi-luu .loi-dong { display: flex; align-items: center; gap: 12px; }
.loi-luu .loi-dong + .loi-dong, .loi-luu .loi-dau + .loi-dong { margin-top: 4px; }
.loi-luu .loi-dong .nut { margin-left: auto; display: flex; gap: 6px; flex: none; }
.loi-luu .loi-cuoi { color: var(--ink-2); margin-top: 2px; }

/* ---------------------------------------------------------------- than: bang + khung phai */
.soat-than { display: grid; grid-template-columns: minmax(0, 1fr) 340px; }
.soat-than.gap { grid-template-columns: minmax(0, 1fr) 34px; }
.bang-soat { overflow: auto; min-height: 0; min-width: 0; background: var(--surface); }
.bang-soat:focus-visible { outline-offset: var(--fv-trong); }

/* bang kieu Excel: chi ke ngang, cot so can phai chu so deu (table.b cua khung chung) */
/* --h-dau-bang: cao dau bang (hai dong "Don gia chao (d)" o man hep), dong nhom dinh ngay duoi */
table.bang { table-layout: fixed; --h-dau-bang: 37px; }
table.bang th { padding: 7px 8px; z-index: var(--z-sticky); }
table.bang th.num { padding: 7px 6px; }
table.bang td { height: 31px; padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* be rong do tren du lieu that o 1366 (KL toi 4 so le, STT kieu 1.3.20, ma kho P108.02.0004, gia von
   co phan le toi tram trieu "1.234.567,89"): cot so chu 13px, dem 5px; phan con lai cho ten hang muc.
   Soat dep 05/10 (DB co gia that): gia von 92px cat 1.200 o so tren 3 ho so, nay 116px; tieu de "Don
   gia chao (d)" xuong hai dong de cot don gia (so da lam tron nghin) chi can 100px. */
table.bang .c-dong { width: 44px; }
table.bang .c-stt { width: 48px; }
table.bang .c-dvt { width: 46px; }
table.bang .c-kl { width: 88px; }
table.bang .c-kho { width: 92px; }
table.bang .c-von { width: 116px; }
table.bang .c-gia { width: 100px; }
table.bang .c-tien { width: 110px; }
table.bang .c-tt { width: 136px; }
table.bang th.c-gia { white-space: normal; line-height: var(--lh-tieu-de); padding-top: 3px; padding-bottom: 3px; }
table.bang td.num { font-size: var(--fs-sm); padding: 0 5px; }
table.bang td.c-dong { color: var(--muted); text-align: right; font-family: var(--font-num); font-size: var(--fs-xs); padding: 0 8px 0 4px; }
table.bang td.c-stt { color: var(--ink-2); font-family: var(--font-num); font-size: var(--fs-sm); padding: 0 5px; }
table.bang td.c-dvt { padding: 0 6px; }
table.bang td.c-kho { color: var(--ink-2); font-family: var(--font-num); font-size: var(--fs-xs); padding: 0 5px; }
table.bang td.c-gia { font-weight: var(--fw-dam); }
table.bang td.c-tt { padding: 0 4px; }
table.bang td .chua-gia { font-size: var(--fs-sm); }
table.bang td.cho-gia { padding-left: 22px; }
@media (min-width: 1500px) {
  table.bang { --h-dau-bang: 33px; }
  table.bang .c-kl { width: 92px; }
  table.bang .c-kho { width: 104px; }
  table.bang .c-von, table.bang .c-gia, table.bang .c-tien { width: 124px; }
  table.bang .c-gia { width: 128px; }
  table.bang th.c-gia { white-space: nowrap; }
}
/* ten hang muc + quy cach (soat dep N1): ten KHONG nhuong cho quy cach. Quy cach co nen 0, chi lay
   phan con thua sau ten (cat duoi). Bang soat/pa-1: ten MOT dong, cat duoi bang dau ba cham, moi dong
   cao 31px nhu Excel; ten day du o title va khung phai. */
.o-ten { display: flex; align-items: baseline; min-width: 0; }
.o-ten .t { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: var(--lh-dong); }
.o-ten .kich { flex: 1 1 0; min-width: 0; margin-left: 6px; color: var(--muted); font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* dong cha da gop: chu "gồm N mảnh" nam dong thu hai cua o ten de ten khong bi cat */
.o-ten.co-manh { flex-wrap: wrap; }
.o-ten .ngat { flex: 0 0 100%; height: 0; }
.o-ten .gom-manh { flex: none; margin-top: 1px; padding: 0 6px; border-radius: 999px; background: var(--surface-3); color: var(--ink-2); font-size: var(--fs-xs); white-space: nowrap; line-height: var(--lh-dong); }
table.bang td.c-ten { padding-top: 3px; padding-bottom: 3px; }
/* hang mo cac manh cua dong cha da gop (chi xem), ngay duoi dong cha; an khi dong cha bi loc an */
table.bang tr.item[hidden] + tr.manh-hang { display: none; }
table.bang tr.manh-hang td { height: auto; padding: 0 8px 3px 44px; white-space: normal; overflow: visible; font-size: var(--fs-xs); color: var(--ink-2); }
.manh-hang summary { display: inline-block; cursor: pointer; padding: 1px 6px; border-radius: 999px; background: var(--surface-3); line-height: var(--lh-dong); }
.manh-ds { list-style: none; margin: 3px 0 0; padding: 0; max-height: 176px; overflow-y: auto; }
.manh-ds li { display: grid; grid-template-columns: 36px 92px minmax(0, 1fr) 84px 40px; gap: 0 10px; padding: 1px 0; border-top: 1px solid var(--line); line-height: var(--lh-dong); }
.manh-ds li.dau { color: var(--muted); border-top: 0; }
.manh-ds li > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.manh-ds li > .num { text-align: right; font-family: var(--font-num); }
.manh-ds li > .d { color: var(--muted); font-family: var(--font-num); }

/* dong nhom DINH duoi dau bang (bang-soat/pa-3 muon vao pa-1): tren cung hien nhom dang xem, kem "Con N can soat".
   Cac nhom cung nam trong mot tbody nen nhom sau de len nhom truoc o cung vi tri dinh. */
table.bang tr.grp td {
  position: sticky; top: var(--h-dau-bang, 33px); z-index: calc(var(--z-sticky) - 1);
  font-weight: var(--fw-dam-nhat); background: var(--surface-2); color: var(--ink); box-shadow: 0 1px 0 var(--line-strong);
}
table.bang tr.grp td.c-dong { font-weight: var(--fw-thuong); }
.grp-ten { margin-right: 12px; }
.grp-dem { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); font-weight: var(--fw-dam); color: var(--ink-2); }
.grp-dem::before { content: ""; width: 6px; height: 6px; border-radius: var(--r-ctl); background: var(--canh-bao); }
table.bang tr.item { cursor: pointer; }
table.bang tr.item.nq td:not(.c-dong):not(.c-tt) { color: var(--muted); }
/* Dong thuong, ke ca dong can xem, nen trang (operator 05/10 che nen nau, chuan noi-bo/giao-dien/chon-mau-2
   kieu A). Trang thai la nhan vien thuoc kem bieu tuong (lop nhan cua app.css, bo thiet ke nhan/pa-1) o cot Tinh
   trang, mau theo loai, chu luon doc duoc. Chi dong DANG CHON co nen nhat va o so dong to mau nhan (vach trai). */
table.bang tbody tr.item:hover td { background: var(--surface-2); }
table.bang tbody tr.item.sel td { background: var(--sel); }
table.bang tbody tr.item.sel td.c-dong { background: var(--accent); color: var(--accent-ink); font-weight: var(--fw-dam-nhat); }
.nhan { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* trong o bang nhan la khoi cat duoi bang dau ba cham (flex khong ap dung duoc text-overflow); bieu tuong dat tuyet doi */
table.bang td.c-tt .nhan { display: inline-block; position: relative; line-height: 22px; padding: 0 6px 0 22px; }
table.bang td.c-tt .nhan::before { position: absolute; left: 4px; top: 4px; }
table.bang td.c-tt .nhan + .nhan { margin-left: 4px; }
/* Gia tam: o gach cheo tren CA Gia von lan Thanh tien, chu nghieng; khong nham voi gia kho va khong chi dua vao
   mau. Dat SAU luat hover/chon (cung do uu tien) de vach khong mat khi re chuot hay chon dong. */
table.bang tbody tr.item td.gia-tam {
  font-style: italic;
  background-image: repeating-linear-gradient(135deg, var(--canh-bao-nhat) 0 5px, transparent 5px 10px);
}
.nhan.gia-tam { --ic: var(--ic-gia-tam); }
/* man duoi 1600 px: nhan "Gia tam" o cot Tinh trang an (da co o Gia von gach cheo kem title), de cot ten con rong */
@media (max-width: 1599px) {
  table.bang td.c-tt .nhan.gia-tam { display: none; }
}
@media (min-width: 1600px) {
  table.bang .c-tt { width: 212px; }
  table.bang td.c-tt .nhan:has(+ .nhan) { max-width: calc(100% - 80px); }
}

/* ---------------------------------------------------------------- khung phai */
.khung-phai { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--surface); border-left: 1px solid var(--line-strong); }
.kp { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.kp[aria-busy="true"] { cursor: progress; }
.kp-trong { margin: auto 0; }
.p-dong { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.kp-dau { flex: none; display: flex; align-items: flex-start; gap: 8px; padding: 10px 14px 8px; border-bottom: 1px solid var(--line); }
.kp-tieu { min-width: 0; flex: 1; }
.kp-dau h2 { font-size: var(--fs-lg); font-weight: var(--fw-dam-nhat); margin: 0; display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.kp-dau h2 a { font-weight: var(--fw-vua); }
.kp-nguon { font-size: var(--fs-sm); color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; display: flex; min-width: 0; }
/* Soat dep N7a: vi tri (trang tinh) va ten tep cung co; ten tep cat GIUA: phan dau co lai co dau ba
   cham, 12 ky tu cuoi (.duoi) luon thay, du phan biet hai tep cung tien to. L2-1 (SOAT-DEP2): vi tri
   khong co (toi 60% dong), ten tep co trong phan con lai, khong tran mep khung. N-3 (rv-g1): .dau,
   .duoi giu khoang trang dau cuoi (white-space: pre) de cat roi vao cho trong khong lam chu dinh nhau. */
.kp-nguon .vt { flex: none; max-width: 60%; overflow: hidden; text-overflow: ellipsis; margin-right: .3em; }
.kp-nguon .tep { flex: 1 1 0; min-width: 0; display: flex; overflow: hidden; }
.kp-nguon .tep .dau { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: pre; }
.kp-nguon .tep .duoi { flex: none; white-space: pre; }
.gap-nut {
  flex: none; width: var(--h-ctl-nho); height: var(--h-ctl-nho); display: grid; place-items: center; border: 0; border-radius: var(--r-ctl);
  background: var(--surface-2); color: var(--ink); cursor: pointer; padding: 0; font-size: var(--fs-lg); line-height: 1;
  transition: background-color var(--t-nhanh) var(--ease), transform var(--t-nhanh) var(--ease);
}
.gap-nut:hover { background: var(--vien); }
.gap-nut:active { transform: var(--lun); background: var(--btn-an); }
.kp-than { flex: 1; min-height: 0; overflow: auto; padding: 10px 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.kp-than > * { flex: none; }
.kp-chan { flex: none; padding: 8px 10px 10px; border-top: 1px solid var(--line); background: var(--surface); }
.thao-tac { display: flex; flex-wrap: wrap; gap: 6px; }
.thao-tac .btn { height: var(--h-ctl-nho); padding: 0 var(--k2); gap: var(--k1); font-size: var(--fs-xs); }
.thao-tac kbd, .goi kbd, .hang-nut kbd { font-size: var(--fs-3xs); padding: 1px 4px; }

/* khung gap: chi con mot ray doc 34px, bam (hoac phim ]) de mo lai */
.ray { display: none; }
.soat-than.gap .kp { display: none; }
.soat-than.gap .ray {
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px 0 0; height: 100%; width: 100%;
  border: 0; background: none; color: var(--muted); cursor: pointer; font-size: var(--fs-lg);
}
.soat-than.gap .ray:hover { color: var(--accent); background: var(--surface-2); }
.ray .doc { writing-mode: vertical-rl; transform: rotate(180deg); font-size: var(--fs-sm); font-weight: var(--fw-dam); white-space: nowrap; }

/* chu dau tu ghi */
.cdt {
  border: 1px solid var(--line); border-radius: var(--r-box); padding: 8px 10px; background: var(--surface-2);
  display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 2px 10px;
}
.cdt .nhan-cdt { grid-column: 1; font-size: var(--fs-xs); color: var(--muted); font-weight: var(--fw-dam); }
.cdt .nm { grid-column: 1; font-weight: var(--fw-dam); line-height: var(--lh-dong); overflow-wrap: anywhere; }
.cdt .anh {
  grid-row: 1 / span 3; grid-column: 2; align-self: start; width: 44px; height: 44px; border-radius: var(--r-ctl); border: 1px solid var(--line);
  object-fit: cover; background: var(--surface);
}
.cdt .anh.trong {
  background: repeating-linear-gradient(135deg, var(--surface-3) 0 6px, var(--surface) 6px 12px);
  display: grid; place-items: center; font-size: var(--fs-3xs); color: var(--muted); text-align: center; line-height: var(--lh-tieu-de);
}
.cdt .kt { grid-column: 1; color: var(--ink-2); font-size: var(--fs-sm); overflow-wrap: anywhere; }
/* ten va quy cach dai: gon 2 dong, bam de doc du (title giu chu day du) */
.cdt .nm, .cdt .kt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; cursor: pointer; }
.cdt.mo .nm, .cdt.mo .kt { display: block; -webkit-line-clamp: unset; }
.cdt .so-cdt { grid-column: 1; display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: var(--fs-sm); color: var(--ink-2); margin-top: 2px; }
.cdt .so-cdt b { color: var(--ink); font-weight: var(--fw-dam); }
/* dong cha da gop dong kich thuoc con (uisoat 05/11): danh sach manh de doi chieu voi Excel */
.gom-manh-ds { border: 1px solid var(--line); border-radius: var(--r-box); padding: 8px 10px; font-size: var(--fs-sm); }
.gom-manh-ds p { margin: 2px 0 6px; color: var(--muted); }
.gom-manh-ds ul { list-style: none; margin: 0; padding: 0; max-height: 176px; overflow-y: auto; }
.gom-manh-ds li { display: flex; gap: 12px; padding: 2px 0; border-top: 1px solid var(--line); }
.gom-manh-ds li .ma-cdt { flex: 1 1 auto; min-width: 0; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gom-manh-ds li .sonum { flex: none; margin-left: auto; text-align: right; }
.cdt .vt { grid-column: 1 / -1; font-size: var(--fs-sm); color: var(--muted); }
.ghi-chu-nv > div, .ghi-chu-goc > div { overflow-wrap: anywhere; }

/* o gom mon lap: TREN 3 goi y, bat san */
.gom {
  display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: start; padding: 6px 9px;
  border-radius: var(--r-box); background: var(--surface-2); border: 1px solid var(--line); font-size: var(--fs-sm); cursor: pointer;
}
.gom input { margin: 2px 0 0; }
/* thu thanh MOT dong (danh sach dong giong het cat bang dau ba cham; title cua nhan giai thich dong giong het) */
.gom-txt { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gom-txt[hidden] { display: none; }
.gom[hidden] { display: none; }
/* Soat gia (A): viec cua dong chua co gia nam TREN CUNG khung: o go gia + Luu gia, hai nut to, mot dong giai thich */
.viec-gia {
  display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--accent-line);
  border-radius: var(--r-box); background: var(--surface-2);
}
.viec-gia-nhan { font-weight: var(--fw-dam); }
.viec-gia-nhap { display: flex; gap: 8px; margin-top: 6px; }
.viec-gia-nhap .o { flex: 1 1 auto; min-width: 0; height: 40px; }
.viec-gia-nut { display: flex; gap: 8px; }
.viec-gia-nut .btn { flex: 1 1 0; }
.viec-gia-ghi { margin: 0; font-size: var(--fs-xs); color: var(--muted); }
/* Soat gia (B): Ma khac va Them ma moi ngay duoi 3 goi y */
.hang-ma-khac .btn { flex: 1 1 0; }

/* 3 goi y (phim 1 2 3) va ket qua tim ma */
.goi, .res { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.goi-chon, .ket-qua {
  width: 100%; text-align: left; border: 1px solid var(--line-strong); background: var(--surface); border-radius: var(--r-box);
  padding: 6px 9px 6px 7px; cursor: pointer; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 1px 8px; color: var(--ink);
  transition: border-color var(--t-nhanh) var(--ease), background-color var(--t-nhanh) var(--ease), transform var(--t-nhanh) var(--ease);
}
.goi-chon:not([disabled]):not(.dang):active, .ket-qua:not([disabled]):not(.dang):active { transform: var(--lun-rong); }
/* Soat dep V10: ket qua tim (va ma gan giong o Them ma) mot dong 36px: ma, ten (cat duoi, title du), gia ben phai */
.ket-qua { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 9px; }
.ket-qua .ma-g { flex: none; font-size: var(--fs-sm); font-weight: var(--fw-dam); }
.ket-qua .ten-g { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); color: var(--ink-2); }
.ket-qua .dvt-g { color: var(--muted); }
.ket-qua .gv-g { flex: none; margin-left: auto; text-align: right; }
.res-tim { gap: 4px; }
.goi-chon:hover, .ket-qua:hover, .ket-qua.tro { border-color: var(--accent); background: var(--accent-soft); }
/* uisoat 05/11: phim so chi o hang 1 cot 1; moi con khac o cot 2. Truoc day kbd chiem hang 1-4 nen
   hang thu 5 (cau canh bao gia goi y) roi vao cot 24px va xuong dong tung chu. */
.goi-chon kbd { grid-column: 1; grid-row: 1; align-self: start; margin-top: 2px; text-align: center; }
.goi-chon > :not(kbd) { grid-column: 2; }
.goi-chon[disabled], .ket-qua[disabled] { cursor: not-allowed; opacity: .55; }
.goi-chon.dang, .ket-qua.dang { border-color: var(--accent); background: var(--accent-soft); opacity: 1; cursor: progress; }
.goi-chon.dang .giong, .goi-chon.dang .trung { color: var(--accent); }
.g1 { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-weight: var(--fw-dam); }
.ma-g { font-family: var(--font-num); white-space: nowrap; }
.gv-g { font-family: var(--font-num); font-weight: var(--fw-vua); color: var(--ink-2); font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.may-de-nghi {
  flex: none; margin-left: auto; height: 18px; display: inline-flex; align-items: center; padding: 0 8px; border-radius: var(--r-ctl);
  background: var(--accent-soft); color: var(--accent); font-size: var(--fs-xs); font-weight: var(--fw-dam); white-space: nowrap;
}
/* muc trung chu thay "giong 33%" (grid.muc_trung): ba nac + chu + "4/6 tu". Chu luon mau chinh de doc duoc;
   mau nam o ba nac. Chi de nhin, khong doi thu tu goi y. */
.g-muc { grid-column: 2; }
.trung { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--ink); }
.trung-do { display: inline-flex; gap: 2px; }
.trung-do i { width: 8px; height: 8px; border-radius: var(--r-ctl); background: var(--line-strong); }
.trung-3 .trung-do i { background: var(--dat); }
.trung-2 .trung-do i:nth-child(-n+2) { background: var(--thong-tin); }
.trung-1 .trung-do i:nth-child(1) { background: var(--canh-bao); }
.giong { font-weight: var(--fw-dam); white-space: nowrap; }
.trung-so { color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; }
/* mot dong gap thay hai hop giai thich (gia tam, may chua chac ma) */
.giai-thich { border: 1px solid var(--line); border-radius: var(--r-box); background: var(--surface-2); font-size: var(--fs-sm); }
.giai-thich > summary {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px; cursor: pointer; list-style: none; font-weight: var(--fw-dam); color: var(--ink-2);
}
.giai-thich > summary::-webkit-details-marker { display: none; }
.giai-thich > summary::before {
  content: ""; flex: none; width: 6px; height: 6px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(-45deg);
  transition: transform var(--tg-nhanh) var(--cong-vao);
}
.giai-thich[open] > summary::before { transform: rotate(45deg); }
.giai-thich > .bao { margin: 0 8px 8px; }
.giai-thich > summary:focus-visible { outline-offset: var(--fv-trong); border-radius: var(--r-box); }
/* ten ma kho toi da hai dong (title giu day du) de ca ba goi y vua mot man; ten that co the dai ca tram chu */
.g2 {
  font-size: var(--fs-sm); color: var(--ink-2); line-height: var(--lh-dong); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.g3 { font-size: var(--fs-xs); color: var(--muted); }
.g3:not(.canh) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ly do AI xep lai goi y dau (llm/tasks/xep_lai.py): xuong dong day du, khong cat bang dau ba cham */
.g3.ai-ly-do:not(.canh) { white-space: normal; overflow: visible; text-overflow: clip; color: var(--ink-2); }
.canh { color: var(--warn); font-weight: var(--fw-dam); }
.res li.trong { color: var(--muted); font-size: var(--fs-sm); padding: 2px; }

/* cach ra gia: nhan trai, so phai */
.calc { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.calc td { padding: 6px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.calc td:last-child { text-align: right; font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: var(--fw-dam); white-space: nowrap; padding-left: 10px; }
/* Hàng gộp hai cột (dải vàng chọn giá theo nhà cung cấp, danh sách giá) cũng là td cuối hàng nên
   nhận nowrap, chữ phải và phông số của cột giá: trả về chữ thường, xuống dòng. Đặt SAU luật trên. */
.calc td[colspan] { white-space: normal; text-align: left; font-family: var(--font); font-weight: var(--fw-thuong); padding-left: 0; }
.calc tr.tong td { border-bottom: 0; font-weight: var(--fw-dam-nhat); }
.calc .chua-gia { font-weight: var(--fw-vua); }
.calc small { display: block; color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-thuong); overflow-wrap: anywhere; }
.ds-gia-nhieu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; text-align: left; font-family: var(--font); font-weight: var(--fw-thuong); white-space: normal; }
.ds-gia-nhieu li { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.ds-gia-nhieu small { display: inline; }
.ghi-khoa { margin: 0; font-size: var(--fs-xs); color: var(--muted); }

/* che do trong khung: tim ma, ly do khong bao gia, ghi chu, them ma moi */
#che-do:empty { display: none; }
.pmode { display: flex; flex-direction: column; gap: 8px; }
/* Soat dep V10: dang o che do (soat.js gan .co-che-do va data-che-do-mo len .p-dong) thi than khung chi
   con che do do; giu the "Chu dau tu ghi" khi tim ma va ghi khong bao gia (de so voi chu goc), giu o
   gom khi lenh ap cho ca nhom (tim ma, khong bao gia, them ma). Dai nut chan khung an: nut cua che do
   nam trong che do, khong con hai hang nut chong nghia. */
.p-dong.co-che-do .kp-chan { display: none; }
.p-dong.co-che-do .kp-than > :not(#che-do):not(.cdt):not(.gom) { display: none; }
.p-dong[data-che-do-mo="them-ma"] .kp-than > .cdt,
.p-dong[data-che-do-mo="ghi-chu"] .kp-than > .cdt,
.p-dong[data-che-do-mo="ghi-chu"] .kp-than > .gom { display: none; }
/* the chu dau tu ghi gon mot dong ten, mot dong quy cach khi dang tim ma, ghi khong bao gia */
.p-dong.co-che-do .cdt { grid-template-columns: minmax(0, 1fr); padding: 6px 10px; }
.p-dong.co-che-do .cdt .anh, .p-dong.co-che-do .cdt .nhan-cdt, .p-dong.co-che-do .cdt .vt { display: none; }
.p-dong.co-che-do .cdt:not(.mo) .nm, .p-dong.co-che-do .cdt:not(.mo) .kt { -webkit-line-clamp: 1; }
/* tieu de che do dinh dau khung (cuon than khung van thay), nut Thoi (Esc) ben phai */
.pm-dau {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 8px;
  margin: 0 -14px; padding: 6px 14px; background: var(--surface); border-bottom: 1px solid var(--line);
}
.pm-dau h3 { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-dam-nhat); flex: 1; min-width: 0; }
/* nut luu la nut chinh, dinh day khung */
.pm-chan {
  position: sticky; bottom: -16px; z-index: 1; display: flex; justify-content: flex-end; gap: 8px;
  margin: 0 -14px -16px; padding: 10px 14px; background: var(--surface); border-top: 1px solid var(--line);
}
.pmode .goi-y-che { margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* chip: vien thuoc nen xam, cao 30 px, nhu .seg button cua app.css (bo thiet ke nhan/pa-1) */
.chip {
  border: 0; border-radius: 999px; height: var(--h-chip); padding: 0 var(--k3); background: var(--surface-2); cursor: pointer;
  font-size: var(--fs-md); font-weight: var(--fw-dam); color: var(--ink);
  transition: background-color var(--t-nhanh) var(--ease), transform var(--t-nhanh) var(--ease), box-shadow var(--t-nhanh) var(--ease);
}
.chip:hover { background: var(--chip-hover); }
.chip:active { transform: var(--lun); background: var(--chip-an); }
.chip[disabled] { color: var(--chu-phu); opacity: .55; cursor: not-allowed; transform: none; }
.form-them-ma { display: flex; flex-direction: column; gap: 8px; }
.mo-dau-form { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); overflow-wrap: anywhere; }
.form-them-ma .bao .res { margin-top: 6px; }
/* V2-3, N-4: quy cach dai cua dong gon 2 dong, nut "Xem đủ" mo ra (soat.js them lop .mo) */
.mo-dau-form .kt-them { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.mo-dau-form.mo .kt-them { display: block; -webkit-line-clamp: unset; }
.mo-dau-form .xem-du { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; cursor: pointer; }
.mo-dau-form.mo .xem-du { display: none; }
/* N2-3: loi luu (ma gan giong, thieu truong) dung DAU form, ngay duoi tieu de, soat.js cuon toi va dat
   tieu diem; khong con nam duoi nut luu dinh day khung */
.form-them-ma .loi-form:focus { outline: var(--fv-w) solid var(--accent); outline-offset: var(--fv-off); }

details.chi-phi { font-size: var(--fs-sm); }
details.chi-phi summary { cursor: pointer; color: var(--accent); font-weight: var(--fw-vua); width: fit-content; }
.chi-phi-noi-dung { overflow-x: auto; margin-top: 6px; }
.chi-phi-bang { border-collapse: collapse; font-size: var(--fs-xs); min-width: 100%; }
.chi-phi-bang th, .chi-phi-bang td { border-bottom: 1px solid var(--line); padding: 4px 6px; white-space: nowrap; text-align: left; }
.chi-phi-bang th { background: var(--surface-2); color: var(--ink-2); font-weight: var(--fw-dam); }
.chi-phi-bang .num { text-align: right; }
.phim { margin: 4px 0 0; font-size: var(--fs-xs); color: var(--muted); line-height: 2; }
.goi-y-che { font-size: var(--fs-xs); color: var(--muted); margin-right: auto; }
/* vong focus khong bi cat boi khung overflow cua bo loc va dai tab */
.soat-cc .seg button:focus-visible, .tab-trang .tab:focus-visible, .gap-nut:focus-visible { outline-offset: var(--fv-trong); }

/* ---------------------------------------------------------------- tab trang tinh va dong tong */
.tab-trang {
  display: flex; overflow-x: auto; background: var(--surface-2); border-top: 1px solid var(--line-strong); scrollbar-width: thin;
}
/* Soat dep N9a (cung mau dai tab Tong hop N9b): .tab-dai boc dai tab, hai nut cuon trai phai chi hien
   khi co tab khuat (soat.js), mep mo dan o phia con tab khuat, nut "Tat ca trang tinh (N)" mo danh
   sach du ten len tren (nhu Excel). */
.tab-dai { 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; 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-sm); 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 {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 10px; border-radius: var(--r-ctl);
  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 a.on { font-weight: var(--fw-dam-nhat); box-shadow: inset 2px 0 0 var(--accent); }
.tab-ds .ten { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab-ds .trong { flex: none; color: var(--muted); font-size: var(--fs-xs); }
.tab-trang .tab {
  flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-right: 1px solid var(--line);
  color: var(--ink-2); text-decoration: none; white-space: nowrap; font-size: var(--fs-sm); transition: background-color var(--t-nhanh) var(--ease);
}
.tab-trang .tab:hover { background: var(--surface); color: var(--ink); }
.tab-trang .tab.on { background: var(--surface); color: var(--ink); font-weight: var(--fw-dam-nhat); box-shadow: inset 0 -2px 0 var(--accent); }
.tab-trang .tab.tong { font-weight: var(--fw-dam-nhat); color: var(--accent); }
.tab-trang .dem, .tab-ds .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: var(--r-ctl);
  display: inline-grid; place-items: center; color: var(--warn); border: 1px solid var(--warn-line); background: var(--surface);
}
#day .thanh-tt .right { margin-left: auto; }

/* thong bao noi: dai tren dau vung lam viec nhu moi man (app.css .toast). soat.js van dat top/right inline theo bang;
   o day ep ve mep tren, rong het vung de dai khong che o so nao cua bang. */
#toast { top: 0 !important; right: 0 !important; }

/* ---------------------------------------------------------------- co man hinh */
/* tu 1600: khung phai 372px (bo thiet ke bang-soat/pa-1); duoi do giu 340px de cot ten hang muc con rong (laptop 1366) */
@media (min-width: 1600px) {
  .soat-than { grid-template-columns: minmax(0, 1fr) 372px; }
}
/* man ngang (uiland 02/11/2026): o 1800 tro len khung phai 440px: goi y, quy cach va ghi chu doc tron khong cat dong; cot ten
   hang muc van con hon 500px o 1920. */
@media (min-width: 1800px) {
  .soat-than { grid-template-columns: minmax(0, 1fr) 440px; }
}
/* Laptop 1366x768 (khung nhin con khoang 690 den 768 px): bot chu phu de thay du 3 goi y */
@media (max-height: 800px) {
  .kp-nguon, .cdt .nhan-cdt { display: none; }
  .cdt:not(.mo) .kt { -webkit-line-clamp: 1; }
  /* V2-3: Them ma o 690 (kieu C phong rong): quy cach mot dong, o nhap sat hon de thay du 4 o */
  .mo-dau-form:not(.mo) .kt-them { -webkit-line-clamp: 1; }
  .form-them-ma { gap: 5px; }
  .goi-chon { padding-top: 4px; padding-bottom: 4px; }
  .kp-than { gap: 6px; }
  .kp-dau { padding-bottom: 6px; align-items: center; }
  .kp-than { padding-top: 8px; }
  .soat-cc { padding-top: 6px; padding-bottom: 6px; }
  .man-soat .dau-hs { padding-top: 8px; padding-bottom: 8px; }
}
@media (max-width: 1180px) {
  .soat-than { grid-template-columns: minmax(0, 1fr) 320px; }
  .soat-cc { flex-wrap: wrap; }
  .tim { margin-left: 0; }
}
@media (max-width: 760px) {
  body.khung-ung-dung { height: auto; display: block; overflow: visible; }
  .man-soat .dau-hs { flex-wrap: wrap; }
  .con-xem { flex-wrap: wrap; white-space: normal; }
  .tien-xem { flex: 1 1 100%; width: auto; }
  .tim { flex: 1 1 100%; }
  .seg { max-width: 100%; overflow-x: auto; }
  .man-soat > #tab { order: 4; }
  .man-soat > .soat-than { order: 5; display: block; }
  .man-soat > #day { order: 6; }
  .bang-soat { max-height: 62vh; }
  table.bang { min-width: 560px; }
  table.bang .c-dong, table.bang .c-kho, table.bang .c-von, table.bang .c-tien { display: none; }
  .khung-phai { border-left: 0; border-top: 1px solid var(--line); }
  .soat-than.gap .kp { display: flex; }
  .gap-nut, .ray { display: none !important; }
  .thanh-tt { flex-wrap: wrap; white-space: normal; }
}