/* Man Kho gia von (/kho, /kho/{code}, /kho/tim; trang con /kho/them, /kho/them-nhom). Chu so huu:
   lane uxkho (L3, dot UX 05/10/2026), goi soat dep G3 (05/10/2026). Man ba cot theo mau
   noi-bo/giao-dien/mau-ux muc d: cay nhom trai, bang ma giua, chi tiet ma phai (duoi 1700 px chi
   tiet mo de len bang, Esc dong). Chi dung token va thanh phan cua app.css (khung v2,
   docs/quyet-dinh/giao-dien-khung-v2.md): khong ma mau hex, khong to nen ca dong theo trang thai. */


/* ================================================================ khung man */
.man-kho { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.thanh-cc {
  flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 8px 16px;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
/* tieu de man Kho (G3b L2-6): 18px, vua de ba cot o 1366 van khong de len nhau */
.thanh-cc h1 { font-size: 18px; font-weight: var(--fw-dam); margin: 0 6px 0 0; white-space: nowrap; flex: none; }
/* o tim co gian (toi thieu 200 px), bo loc va nut giu nguyen be rong: o 1366 khong gi de len nhau */
.kho-dk { display: flex; align-items: center; gap: 10px; margin: 0; min-width: 0; flex: 1 1 680px; }
.kho-dk .seg { flex: none; }
.thanh-cc .gian { flex: 0 0 0; }
.hang-nut-cc { display: flex; align-items: center; gap: 8px; flex: none; margin-left: auto; }
.tim { position: relative; flex: 0 1 340px; min-width: 200px; }
.tim .o { width: 100%; padding-left: 30px; padding-right: 30px; }
.tim svg { position: absolute; left: 9px; top: 8px; width: 14px; height: 14px; stroke: var(--muted); fill: none; stroke-width: 2; pointer-events: none; }
.tim kbd { position: absolute; right: 7px; top: 7px; pointer-events: none; }
.tim .o:focus + kbd, .tim .o:not(:placeholder-shown) + kbd { display: none; }

.kho-than {
  position: relative; overflow: hidden; flex: 1; min-height: 0;
  display: grid; grid-template-columns: 252px minmax(0, 1fr) 440px;
}

/* ================================================================ cay nhom (trai) */
.cay { overflow: auto; background: var(--surface); border-right: 1px solid var(--line); padding: 6px 0 16px; overscroll-behavior: contain; }
.cay .c1, .cay .c2 {
  display: flex; align-items: center; gap: 6px; width: 100%; border: 0; background: none; margin: 0;
  text-align: left; color: var(--ink); text-decoration: none; cursor: pointer; line-height: var(--lh-dong);
  transition: background-color var(--t-nhanh) var(--ease);
}
.cay .c1 { padding: 6px 10px; font-weight: var(--fw-dam); }
.cay .c2 { padding: 5px 10px 5px 28px; font-weight: var(--fw-thuong); }
.cay .ten { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cay .mui-cay { width: 12px; flex: none; color: var(--muted); font-size: 9px; transition: transform var(--t-nhanh) var(--ease); }
.cay .c1[aria-expanded="true"] .mui-cay { transform: rotate(90deg); }
.cay .ma-n { flex: none; color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-thuong); font-family: var(--font-num); }
.cay .dem { margin-left: auto; padding-left: 6px; flex: none; color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-thuong); font-family: var(--font-num); }
.cay .c1:hover, .cay .c2:hover { background: var(--surface-2); color: var(--ink); }
.cay .c2.on { background: var(--accent-soft); color: var(--accent); font-weight: var(--fw-dam); }
.cay .c2.on .ma-n, .cay .c2.on .dem { color: var(--accent); }
.cay .c2.la .ten { color: var(--ink-2); }
.cay .co { width: 7px; height: 7px; border-radius: 50%; background: var(--warn); flex: none; }
.cay .tach { height: 1px; background: var(--line); margin: 8px 10px; }
.cay .c1.phu-hs { color: var(--ink-2); font-weight: var(--fw-vua); }
.cay .c1.phu-lk { color: var(--ink-2); font-weight: var(--fw-vua); }
.cay .rong { margin: 0; padding: 5px 10px 5px 28px; color: var(--muted); font-size: var(--fs-sm); }
.cay :is(.c1, .c2):focus-visible { outline-offset: var(--fv-trong); }

/* ================================================================ bang ma (giua) */
.luoi { overflow: auto; background: var(--surface); min-width: 0; overscroll-behavior: contain; }
table.kho-bang { table-layout: fixed; }
table.kho-bang col.k-ma { width: 120px; }
table.kho-bang col.k-dvt { width: 64px; }
table.kho-bang col.k-gia { width: 126px; }
table.kho-bang col.k-ngay { width: 116px; }
table.kho-bang col.k-ncc { width: 136px; }
table.kho-bang col.k-nguon { width: 20%; }
table.kho-bang col.k-hh { width: 68px; }
table.kho-bang th { padding: 6px 9px; }
table.kho-bang td { height: 28px; padding: 0 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.kho-bang td.k-ma a { color: var(--ink-2); text-decoration: none; }
table.kho-bang td.k-ma a:hover { color: var(--accent); text-decoration: underline; }
table.kho-bang td.k-ma a:focus-visible { border-radius: var(--r-ctl); }
table.kho-bang td.k-gia { font-weight: var(--fw-dam); }
table.kho-bang td.k-ngay { color: var(--ink-2); }
table.kho-bang td.k-dvt, table.kho-bang td.k-ncc { color: var(--ink-2); }
table.kho-bang td.k-nguon { color: var(--muted); font-size: var(--fs-sm); }
table.kho-bang td.k-hh { color: var(--ink-2); }
table.kho-bang tr.nhom-dong td {
  height: 30px; background: var(--surface-2); font-weight: var(--fw-dam); border-top: 1px solid var(--line-strong); color: var(--ink);
}
table.kho-bang tbody tr.nhom-dong:first-child td { border-top: 0; }
table.kho-bang tr.nhom-dong .phu { font-weight: var(--fw-thuong); color: var(--muted); margin-left: 8px; font-size: var(--fs-sm); }
table.kho-bang tr.mh { cursor: pointer; }
table.kho-bang tr.mh.chon td { background: var(--sel); }
table.kho-bang tr.mh.chon td.k-ma a { color: var(--accent); font-weight: var(--fw-dam); }
table.kho-bang tr.ngung td { color: var(--muted); text-decoration: line-through; }
/* phan le (",05") nam trong mot o rong co dinh can trai: chu so hang don vi cua moi gia thang
   cot nhu Excel, ke ca gia chan; tieu de cot lui vao dung bang do */
table.kho-bang td.k-gia .le { display: inline-block; min-width: 3ch; text-align: left; }
table.kho-bang th.k-gia { padding-right: calc(9px + 3ch); }
table.kho-bang td.k-gia .chua-gia, table.kho-bang td.k-gia .gia-nhieu { margin-right: 3ch; }
.gia-cu {
  margin-left: 5px; font-family: var(--font); font-size: var(--fs-xs); font-weight: var(--fw-dam); color: var(--warn);
}
.luoi .trong-kq { line-height: var(--lh-van); }
.con-lai { margin: 0; padding: 10px 16px 16px; color: var(--muted); font-size: var(--fs-sm); }
.kho-trong { max-width: 46ch; margin: 64px auto 0; padding: 0 24px; color: var(--ink-2); line-height: var(--lh-van); }
.kho-trong p { margin: 0 0 8px; }
.kho-trong .dau { font-size: var(--fs-lg); font-weight: var(--fw-dam); color: var(--ink); }

/* ================================================================ chi tiet ma (phai) */
.ct {
  overflow: auto; background: var(--surface); border-left: 1px solid var(--line); padding: 12px 16px 24px;
  overscroll-behavior: contain;
}
.ct:focus { outline: none; }
.ct-dau { display: flex; align-items: flex-start; gap: 10px; }
.ct-ten { min-width: 0; flex: 1; }
.ct .crumb { font-size: var(--fs-sm); color: var(--muted); margin-bottom: 4px; }
.ct .crumb a { color: var(--muted); text-decoration: none; }
.ct .crumb a:hover { color: var(--accent); text-decoration: underline; }
.ct h2 { font-size: var(--fs-lg); font-weight: var(--fw-dam-nhat); line-height: var(--lh-dong); margin: 0; overflow-wrap: anywhere; }
.ct .ma-ct { color: var(--muted); font-size: var(--fs-sm); margin-top: 2px; }
.ct .chu-ngung { color: var(--ink); }
.ct .dong-x {
  flex: none; width: 28px; height: 28px; border-radius: var(--r-ctl); border: 1px solid transparent; background: none;
  cursor: pointer; color: var(--muted); font-size: 15px; display: none; place-items: center; margin: 0;
}
.ct .dong-x:hover { border-color: var(--line-strong); color: var(--ink); }
.ct > .bao { margin-top: 10px; }
dl.tt { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 5px 10px; margin: 12px 0 4px; }
dl.tt dt { color: var(--muted); }
dl.tt dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
dl.tt dd.quy-cach { white-space: pre-line; color: var(--ink-2); font-size: var(--fs-sm); }
.ct-nhom { margin: 12px 0 0; font-size: var(--fs-sm); color: var(--ink-2); }
.ct-trong { padding: 20px 0; color: var(--muted); line-height: var(--lh-van); }
.ct-trong p { margin: 0 0 8px; }

/* lich su gia va o Them gia */
.ls-dau { font-size: var(--fs-sm); font-weight: var(--fw-dam); color: var(--ink-2); margin: 18px 0 8px; display: flex; align-items: center; gap: 8px; }
.ct-viec { margin: 12px 0 0; }
.ct-viec .btn { width: 100%; min-height: 40px; font-size: var(--fs-md); }
.them-gia {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; margin: 0 0 12px; padding: 12px;
  border: 1px solid var(--accent-line); border-radius: var(--r-box); background: var(--surface-2);
}
.them-gia .o { width: 100%; }
.them-gia .gia-dang-dung { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); }
.them-gia .rong { grid-column: 1 / -1; }
.them-gia .hang-nut .small { flex: 1 1 160px; }
.lich-su-gia > .bao { margin-bottom: 10px; }
table.ls { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
table.ls th { text-align: left; font-weight: var(--fw-dam); color: var(--muted); padding: 4px 6px; border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
table.ls th.num { text-align: right; }
table.ls th .don-vi { font-weight: var(--fw-thuong); }
table.ls td { padding: 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.ls tr.dang-dung td:nth-child(-n+2) { font-weight: var(--fw-dam); }
table.ls .nhan { margin-top: 3px; }
table.ls .ls-nguon { min-width: 0; overflow-wrap: anywhere; }
table.ls .ls-nguon > span { display: block; }
table.ls .ls-nguon .ng, table.ls .ls-nguon .gc { color: var(--muted); font-weight: var(--fw-thuong); }
table.ls .ls-nguon details { color: var(--muted); font-weight: var(--fw-thuong); }
table.ls .ls-nguon summary { cursor: pointer; }
/* ghi chu nap kho dai (G3b V2-8): gap lai mot dong, mo ra xem du; khong tran khung */
table.ls .ls-nguon details.gc-gap { overflow-wrap: anywhere; }
table.ls .ls-nguon details.gc-gap > summary { display: block; }
table.ls .ls-nguon details.gc-gap .gc-mo { display: none; font-weight: var(--fw-dam); color: var(--ink-2); }
table.ls .ls-nguon details.gc-gap[open] .gc-dau { display: none; }
table.ls .ls-nguon details.gc-gap[open] .gc-mo { display: block; margin-bottom: 3px; }
table.ls .ls-nguon .tep { overflow-wrap: anywhere; }
table.ls .ls-nguon .lk { margin-top: 3px; font-weight: var(--fw-dam); }
table.ls .trong-ls { padding: 14px 6px; color: var(--muted); font-weight: var(--fw-thuong); }

/* ngung dung: nut vien nho o cuoi khung (khong do, khong gach chan), hoi ly do ngay tai cho */
.chan-ct { margin-top: 26px; padding-top: 12px; border-top: 1px solid var(--line); font-size: var(--fs-sm); color: var(--muted); }
.chan-ct > p { margin: 0 0 8px; }
.hop-ngung {
  margin-top: 10px; padding: 12px; border: 1px solid var(--danger-line); background: var(--danger-soft);
  border-radius: var(--r-box); display: flex; flex-direction: column; gap: 10px; color: var(--ink-2);
}
.hop-ngung p { margin: 0; }
.trang-thai:empty { display: none; }
.trang-thai { margin-top: 10px; font-size: var(--fs-sm); font-weight: var(--fw-dam); }
.trang-thai .thanh-cong { color: var(--ok); margin: 0; }
.trang-thai .loi { color: var(--danger); margin: 0; }

/* ================================================================ hop thoai: Bo he so, Them ma */
dialog.hop-he-so { width: min(1040px, calc(100vw - 48px)); max-height: calc(100vh - 64px); padding: 18px 20px 20px; }
dialog.hop-them-ma { width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 18px 20px 20px; }
:is(.hop-he-so, .hop-them-ma) .dong-x {
  display: grid; position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; place-items: center; margin: 0;
  border-radius: var(--r-ctl); border: 1px solid transparent; background: none; cursor: pointer; color: var(--muted); font-size: 15px;
}
:is(.hop-he-so, .hop-them-ma) .dong-x:hover { border-color: var(--line-strong); color: var(--ink); }
.hop-them-ma h2 { margin: 0 0 12px; }
#he-so-ds h2 { font-size: var(--fs-lg); font-weight: var(--fw-dam); margin: 0 0 12px; }
#he-so-ds > .bao { margin-bottom: 10px; }
#he-so-ds .bang-cuon { overflow: auto; border: 1px solid var(--line); border-radius: var(--r-box); }
#he-so-ds table.b td { height: auto; padding: 7px 10px; vertical-align: top; }
#he-so-ds td.ly-do { min-width: 180px; }
#he-so-ds .ghi-chu { color: var(--muted); }
#he-so-ds form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 8px; margin: 0; }
#he-so-ds form .o { min-width: 200px; }
#he-so-ds .an-chu { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* form Them ma (hop thoai va trang /kho/them), Them nhom: luoi hai cot, o rong chiem ca hang */
:is(.form-them-ma, .form-them-nhom) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; margin: 0; }
:is(.form-them-ma, .form-them-nhom) .rong { grid-column: 1 / -1; }
:is(.form-them-ma, .form-them-nhom) .o { width: 100%; }
:is(.form-them-ma, .form-them-nhom) .hang-nut { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
:is(.form-them-ma, .form-them-nhom) .small { margin: 0; }
#ket-qua-them > .bao, .kho-con-form > .bao { margin-bottom: 12px; }
.kho-con .kho-con-form { max-width: 760px; padding: 20px; }

/* ket qua tim gon (manh htmx GET /kho/tim) */
table.bang-tim { table-layout: fixed; }
table.bang-tim td.ten { max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tim-dem { margin: 0 0 6px; }


.cay .chu-giai { margin: 10px 10px 0; display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: var(--fs-xs); }

/* ================================================================ laptop: chi tiet de len bang */
@media (max-width: 1699px) {
  .kho-than { grid-template-columns: 236px minmax(0, 1fr); }
  .ct {
    position: absolute; top: 0; right: 0; bottom: 0; width: 420px; z-index: var(--z-overlay); box-shadow: var(--shadow-pop);
    transform: translateX(104%); visibility: hidden; transition: transform var(--tg-vua) var(--ease), visibility 0s linear var(--tg-vua);
  }
  .kho-than.mo-ct .ct { transform: none; visibility: visible; transition: transform var(--tg-vua) var(--ease), visibility 0s; }
  .ct .dong-x { display: grid; }
}
/* duoi khoang 1180 px vung lam viec (man 1280 tro xuong, tru thanh ben): thanh cong cu xuong dong */
@media (max-width: 1279px) {
  .thanh-cc { flex-wrap: wrap; }
  .kho-dk { flex-basis: 100%; order: 3; }
}
@media (prefers-reduced-motion: reduce) {
  .ct, .kho-than.mo-ct .ct, .cay .mui-cay { transition: none; }
}