/* Man Nhap bang gia (/kho/nhap-gia...) va So khuon (/template). Chu so huu: lane uxnhap (L4, dot UX
   05/10/2026). Chuan nhin: noi-bo/giao-dien/mau-ux (muc e, f). Chi dung token cua app.css (khong ma
   mau, bo goc chi 4 va 6 px) nen che do toi theo he dieu hanh tu dung. Thanh phan dung chung
   (.btn, .lk, .nhan, .bao, .seg, .the-tab, table.b, .khung-bang, dialog, .toast) lay tu app.css. */

/* le trang (goi G6, L1b): cung le va do rong voi Trang chu (man-trang-chu.css .khung-trang.tc): canh trai,
   le trong 32px, toi da 1400px; chuyen man tieu de khong nhay vi tri. Dung cho Nhap gia, So khuon va cac
   trang Gan cot khuon la. */
.khung-trang.rong { margin: 0; max-width: 1400px; padding: 20px var(--s6) 40px; }
.khung-trang .the-tab { margin-bottom: 14px; }

/* ================================================================ dai ba buoc */
.ng-buoc { display: flex; list-style: none; margin: 0 0 14px; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-box); overflow: hidden; }
.ng-buoc > li { flex: 1; display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-right: 1px solid var(--line); min-width: 0; }
.ng-buoc > li:last-child { border-right: 0; }
.ng-buoc > li > span:last-child { min-width: 0; }
.ng-buoc .so {
  position: relative; flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-num); font-size: var(--fs-xs); font-weight: var(--fw-dam-nhat); border: 1.5px solid var(--line-strong); color: var(--muted);
}
/* buoc xong: nen xanh la va dau tich ve bang vien (khong phu thuoc font); chu so an, trinh doc man hinh
   van doc "da xong" tu .sr (goi G6, L6: buoc 1 co dau tich khi dang o buoc 2) */
.ng-buoc .x .so { background: var(--ok); border-color: var(--ok); color: var(--on-fill); font-size: 0; }
.ng-buoc .x .so::after {
  content: ""; width: 5px; height: 10px; margin-top: -2px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.ng-buoc .d { background: var(--accent-soft); }
.ng-buoc .d .so { border-color: var(--accent); color: var(--accent); }
.ng-buoc b { display: block; font-size: var(--fs-md); font-weight: var(--fw-dam); }
.ng-buoc small { display: block; color: var(--muted); font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ng-buoc small .lk { font-size: inherit; }

/* ================================================================ o tha tep */
.tha {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center;
  min-height: 168px; padding: 28px 20px; background: var(--surface); border: 2px dashed var(--line-strong); border-radius: var(--r-box);
  cursor: pointer; transition: border-color var(--t-nhanh) var(--ease), background-color var(--t-nhanh) var(--ease);
}
.tha:hover { border-color: var(--accent); background: var(--surface-2); }
.tha.keo { border-style: solid; border-color: var(--accent); background: var(--accent-soft); }
.tha:has(:focus-visible) { outline: var(--fv-w) solid var(--accent); outline-offset: var(--fv-off); }
.tha input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.tha-chinh { font-size: var(--fs-xl); font-weight: var(--fw-dam); }
.tha-phu { color: var(--muted); max-width: 62ch; }
.tha.dang { cursor: progress; border-style: solid; border-color: var(--accent); }
.tha.dang input[type=file] { pointer-events: none; }
.tha.dang .tha-chinh::before {
  content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; border-radius: 50%;
  border: 2px solid var(--accent); border-right-color: transparent; animation: xoay .7s linear infinite;
}
.tha-loi { margin: 8px 0 0; }
#ng-moi > .bao { margin-bottom: 12px; }
/* ba dot nhap gan nhat duoi o tha (goi G6, L6): chi doc, cung du lieu voi the Cac dot da nhap */
.ng-gan-day { margin-top: 18px; }
.ng-gan-day-dau { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.ng-gan-day-dau h2 { font-size: var(--fs-md); font-weight: var(--fw-dam); color: var(--ink-2); }
.ng-gan-day-dau .lk { font-size: var(--fs-sm); }

/* ================================================================ xem truoc */
.ng { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: start; }
.ng-trai { min-width: 0; }
.ng-tom { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.ng .khung-bang { max-height: calc(100vh - 300px); min-height: 220px; }
/* khong cat chu va khong tran mep phai (goi G6b, V2-9): so khong xuong dong nen cot so rong theo so dai nhat
   (bang auto, khong co dinh), ten hang va "Ghi chu cua may" xuong dong het cho (khong line-clamp, khong
   truncate) va nhuong cho. Bang vua khung o 1366 px (khung bang ~913 px); khung hep hon 860 px thi cuon ngang. */
table.bang-xem { min-width: 860px; }
table.bang-xem col.c-dong { width: 54px; }
table.bang-xem col.c-ma { width: 118px; }
table.bang-xem col.c-dvt { width: 52px; }
table.bang-xem col.c-chenh { width: 70px; }
table.bang-xem th, table.bang-xem td { padding-left: 8px; padding-right: 8px; }
table.bang-xem th { white-space: normal; line-height: var(--lh-tieu-de); height: auto; padding-top: 4px; padding-bottom: 4px; }
table.bang-xem td { height: 30px; white-space: nowrap; }
table.bang-xem td.ma-kho, table.bang-xem td.dvt, table.bang-xem td.ten-hang, table.bang-xem td.ghi-may {
  white-space: normal; overflow-wrap: anywhere; line-height: var(--lh-dong); padding-top: 5px; padding-bottom: 5px;
}
table.bang-xem td.ten-hang { min-width: 150px; }
table.bang-xem td.ghi-may { min-width: 200px; }
table.bang-xem td.ghi-may .nhan { margin-right: 4px; }
table.bang-xem tr[data-loc~="canh"] td { background: var(--warn-row); }
table.bang-xem tr.d-loi td { background: var(--danger-soft); }
table.b tbody tr.d-loi:hover td { background: var(--danger-soft); }
table.bang-xem tr.d-loi td.ghi-may { color: var(--danger); font-weight: var(--fw-vua); }
table.bang-xem tr[data-loc~="canh"] td.ghi-may { color: var(--warn); font-weight: var(--fw-vua); }
table.bang-xem tr[data-loc~="canh"] td.ghi-may .muted { color: var(--muted); font-weight: var(--fw-thuong); }
table.bang-xem tr.d-trung td { color: var(--muted); }
.chenh-lon { color: var(--warn); font-weight: var(--fw-dam); }
.chua-gia { white-space: nowrap; }

.pham-vi {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-box); padding: 14px;
  display: flex; flex-direction: column; gap: 10px; position: sticky; top: var(--s4);
  max-height: calc(100vh - 2 * var(--s4)); overflow-y: auto;
}
.pham-vi h2 { font-size: var(--fs-lg); font-weight: var(--fw-dam-nhat); margin: 0; }
.pham-vi dl { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 6px 10px; margin: 0; font-size: var(--fs-md); }
.pham-vi dt { color: var(--muted); }
.pham-vi dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.pham-vi form { margin: 0; }
.pham-vi .bao { font-size: var(--fs-sm); padding: 8px 10px; }
.pham-vi .bao .lk { font-size: inherit; }
.nhom-ghi summary { cursor: pointer; width: fit-content; font-size: var(--fs-sm); font-weight: var(--fw-dam); color: var(--ink-2); }
.nhom-ghi ul { margin: 6px 0 0; padding-left: 16px; font-size: var(--fs-sm); color: var(--ink-2); }
.nhom-ghi li { margin-bottom: 2px; }

.ket-qua-ma { margin-top: 14px; max-width: 860px; }
.ket-qua-ma .khung-bang { max-height: 360px; }
.sau-ket-qua { margin-top: 16px; }

/* ================================================================ cac dot da nhap + so khuon: khung danh sach */
.khung-ds { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-box); overflow: hidden; }
.khung-ds .trong-kq { padding: 32px 24px; }
#ds-dot-nhap > .bao { margin-bottom: 12px; }
table.bang-dot td.ten-tep { white-space: normal; overflow-wrap: anywhere; line-height: var(--lh-dong); padding-top: 5px; padding-bottom: 5px; }
table.bang-dot tr.da-go td { color: var(--muted); }
table.bang-dot td.hanh-dong { text-align: right; white-space: nowrap; }
table.bang-dot td.hanh-dong form { display: none; }

/* ================================================================ so khuon */
.sk-dau { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 14px; }
.sk-dau h1 { margin: 0; } /* co va do dam theo --fs-h1, --fw-h1 cua .khung-trang h1 (goi G5), khong dat rieng */
.sk-dau p { color: var(--muted); max-width: 62ch; margin: 4px 0 0; }
.sk-dau .btn { margin-left: auto; flex: none; }
#sk-bao:not(:empty) { margin-bottom: 12px; }
.sk-cong-cu { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.sk-tim { width: 260px; }
.sk-tim .o { width: 100%; }
table.bang-khuon td { height: 36px; }
/* tieu de nhan ra: xuong dong, khong cat vo nghia (goi G6, V14) */
table.bang-khuon td.tieu-de { width: 36%; white-space: normal; line-height: var(--lh-dong); padding-top: 5px; padding-bottom: 5px; color: var(--ink-2); }
/* nhan loai (Da gui, Noi bo...) chi hien o bo loc "Tat ca": so-khuon.js dat data-loc cho bang */
#sk-bang:not([data-loc="tat-ca"]) .sk-loai { display: none; }
tr.sk-dong { cursor: pointer; }
td.sk-ten { white-space: nowrap; }
.sk-mo-nut {
  display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; margin: 0 8px 0 0; cursor: pointer;
  font: inherit; font-weight: var(--fw-dam); color: var(--ink); text-align: left;
}
.sk-mo-nut:hover { color: var(--accent); }
.mui-sk { display: inline-block; width: 12px; color: var(--muted); font-size: 10px; transition: transform var(--t-nhanh) var(--ease); }
tr.sk-dong.mo .mui-sk { transform: rotate(90deg); }
tr.sk-dong.mo td { background: var(--sel); }
table.b tbody tr.sk-mo:hover td { background: var(--surface-2); }
tr.sk-mo td { background: var(--surface-2); height: auto; padding: 12px 14px 14px 32px; }
.sk-ct p { margin: 0; color: var(--ink-2); }
/* mot khuon nhieu phien ban: moi phien ban mot khoi, moi nhat dau tien */
.sk-ban + .sk-ban { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-strong); }
.sk-ban-tieu { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: var(--fs-md); font-weight: var(--fw-dam); }
.sk-ban-tieu .small { font-weight: var(--fw-thuong); }
.cot-map { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.cot-map span { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 3px 8px; }
.cot-map span i { font-style: normal; font-family: var(--font-num); font-weight: var(--fw-dam); color: var(--muted); }
.sk-chan { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.sk-viec { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.sk-viec form { display: none; }
.sk-doi-loai { display: flex; align-items: center; gap: 8px; }
.gap-hs { margin-top: 16px; }
.gap-hs summary { cursor: pointer; list-style: none; font-size: var(--fs-sm); font-weight: var(--fw-dam); color: var(--ink-2); margin: 0 0 6px 2px; display: inline-flex; gap: 8px; align-items: center; }
.gap-hs summary::-webkit-details-marker { display: none; }
.gap-hs summary::before { content: "\25B8"; font-size: 10px; color: var(--muted); transition: transform var(--t-nhanh) var(--ease); }
.gap-hs[open] summary::before { transform: rotate(90deg); }
table.ngung-sk td { color: var(--muted); }
dialog .dl-than p { margin: 0; }

/* ================================================================ gan cot cho khuon la (goi G6)
   Cac buoc /template/moi, /chon, /gan, /luu va /<id>/sua: cung khung .khung-trang.rong, duong dan
   .duong-dan, o tha tep cua Nhap bang gia (.tha), nut .btn; canh trai, khoi noi dung toi da 860 px. */
.gc-mo-ta { margin: 4px 0 14px; max-width: 72ch; color: var(--ink-2); }
.gc-hop { max-width: 860px; }
.bao.gc-hop { margin-bottom: 12px; }
.gc-nut { margin-top: 14px; }
form.gc-hop > .tha { min-height: 140px; }
.tha.co-tep { border-style: solid; border-color: var(--ok); background: var(--ok-soft); }
.tha.co-tep .tha-chinh { overflow-wrap: anywhere; }
.gc-the { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 260px)); gap: 12px 16px; align-items: end; }
.gc-the .gc-nut { grid-column: 1 / -1; margin-top: 4px; }
.gc-luu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gc-luu .gc-rong { grid-column: 1 / -1; }
.gc-the .o, .gc-hop .o { width: 100%; }
.gc-hop textarea.o { min-height: 56px; }
.gc-buoc { margin: 18px 0 8px; font-size: var(--fs-lg); font-weight: var(--fw-dam); }
.gc-kq {
  max-width: 860px; max-height: 46vh; margin: 0 0 12px; padding: 12px 14px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-box); font: var(--fs-sm) / 1.5 var(--font-mono);
}
.gc-xem .gc-cuon { max-height: 300px; margin-bottom: 8px; }
table.gc-xem-bang td { white-space: nowrap; }
.gc-cot .khung-bang { max-height: 52vh; margin-bottom: 12px; }
.gc-cot table.b td { height: 38px; }
/* o chon truong chuan: giu the <select name="B"> tran (test va form dua vao ten), ve cung mat voi .o cua khung */
.gc-cot table.b select {
  height: var(--h-ctl); min-width: 220px; padding: 0 36px 0 var(--k3); border: 1px solid var(--vien-o); border-radius: var(--r-ctl);
  background: var(--surface); color: var(--ink); appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: var(--ic-xuong); background-repeat: no-repeat; background-position: right 10px center; background-size: 14px;
}
.gc-cot table.b select:hover { border-color: var(--chu-phu); }
.gc-cot table.b select:focus-visible { border-color: var(--sel-bar); }

/* ================================================================ man hep */
@media (max-width: 1100px) {
  .ng { grid-template-columns: minmax(0, 1fr); }
  .pham-vi { position: static; max-height: none; overflow-y: visible; }
}
@media (max-width: 760px) {
  .khung-trang.rong { padding: 14px 16px 32px; }
  .gc-luu { grid-template-columns: minmax(0, 1fr); }
  .ng-buoc { flex-direction: column; }
  .ng-buoc > li { border-right: 0; border-bottom: 1px solid var(--line); }
  .ng-buoc > li:last-child { border-bottom: 0; }
  .sk-dau { flex-wrap: wrap; align-items: flex-start; }
  .sk-dau .btn { margin-left: 0; }
}