/* Man Vat lieu hoan thien (/kho-hoan-thien). Goi G6 soat dep 05/10/2026: ba cot theo khung Kho (goi G3,
   man-kho.css): nhom ma ban ve trai, bang vat lieu giua (anh 40 px, ma ban ve, ma kho, ten gon, khoang
   gia, so gia), chi tiet phai (anh lon, thong so, gia theo cong tac, Them gia, Ngung dung); 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-vl { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.thanh-cc {
  flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 16px;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.thanh-cc h1 { white-space: nowrap; flex: none; margin-right: 6px; }
.vl-dk { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; }
.vl-dk .seg { flex: none; }
.thanh-cc .gian { flex: 0 0 0; }
.hang-nut-cc { display: flex; align-items: center; gap: 8px; flex: none; }
.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; }
.vl-bao { flex: none; margin: 8px 16px 0; }

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

/* ================================================================ nhom ma ban ve (trai) */
.vl-cay { overflow: auto; background: var(--surface); border-right: 1px solid var(--line); padding: 6px 0 16px; overscroll-behavior: contain; }
.vl-cay-dau { margin: 6px 10px 4px; font-size: var(--fs-xs); font-weight: var(--fw-dam); color: var(--muted); }
.vl-cay .n1 {
  display: flex; align-items: center; gap: 6px; width: 100%; border: 0; background: none; margin: 0; padding: 5px 10px 5px 14px;
  text-align: left; color: var(--ink); cursor: pointer; line-height: var(--lh-dong); font-size: var(--fs-md);
  transition: background-color var(--t-nhanh) var(--ease);
}
.vl-cay .n1:hover { background: var(--surface-2); }
.vl-cay .n1.on { background: var(--accent-soft); color: var(--accent); font-weight: var(--fw-dam); }
.vl-cay .ten { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vl-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); }
.vl-cay .n1.on .dem { color: var(--accent); }
.vl-cay .n1:focus-visible { outline-offset: var(--fv-trong); }

/* ================================================================ bang vat lieu (giua) */
.vl-luoi { overflow: auto; background: var(--surface); min-width: 0; overscroll-behavior: contain; }
table.vl-bang { table-layout: fixed; }
table.vl-bang col.c-anh { width: 62px; }
table.vl-bang col.c-mbv { width: 104px; }
table.vl-bang col.c-ma { width: 80px; }
table.vl-bang col.c-gia { width: 208px; }
table.vl-bang col.c-so { width: 72px; }
table.vl-bang th { padding: 6px 9px; }
table.vl-bang td { height: 52px; padding: 5px 9px; }
table.vl-bang td.vl-anh { padding-right: 0; }
table.vl-bang td.vl-ma a { color: var(--ink-2); text-decoration: none; }
table.vl-bang td.vl-ma a:hover { color: var(--accent); text-decoration: underline; }
table.vl-bang td.vl-ma a:focus-visible { border-radius: var(--r-ctl); }
/* ten gon xuong toi da hai dong (dong cao 52 px du cho hai dong); dai hon nua thi cat o dong hai, ten day du o title */
table.vl-bang td.vl-ten .vl-ten-nd { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; line-height: var(--lh-dong); overflow-wrap: anywhere; }
table.vl-bang td.vl-mbv { color: var(--ink-2); white-space: normal; overflow-wrap: anywhere; line-height: var(--lh-dong); }
table.vl-bang td.vl-gia { line-height: var(--lh-dong); white-space: normal; }
table.vl-bang td.vl-gia .vl-g { display: block; white-space: nowrap; font-weight: var(--fw-dam); }
table.vl-bang td.vl-gia .dv { font-weight: var(--fw-thuong); color: var(--muted); font-family: var(--font); font-size: var(--fs-xs); }
table.vl-bang td.vl-so { color: var(--ink-2); }
table.vl-bang tr.vl { cursor: pointer; }
table.vl-bang tr.vl.chon td { background: var(--sel); }
table.vl-bang tr.vl.chon td.vl-ma a { color: var(--accent); font-weight: var(--fw-dam); }
.vl-thumb { display: block; width: 40px; height: 40px; object-fit: cover; border-radius: var(--r-ctl); border: 1px solid var(--line); background: var(--surface-2); }
.vl-thumb.trong { border-style: dashed; border-color: var(--line-strong); background: transparent; }
.vl-luoi .trong-kq { line-height: var(--lh-van); }

/* ================================================================ chi tiet vat lieu (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 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 .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; }
.vl-anh-lon { display: block; width: 100%; height: 220px; margin: 12px 0 0; object-fit: contain; border-radius: var(--r-box); border: 1px solid var(--line); background: var(--surface-2); }
.vl-anh-lon.trong { display: grid; place-items: center; color: var(--muted); border-style: dashed; background: transparent; }
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; }
.ct-trong { padding: 20px 0; color: var(--muted); line-height: var(--lh-van); }
.ct-trong p { margin: 0 0 8px; }

/* gia theo cong tac 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; }
.ls-dau .btn { margin-left: auto; }
.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 .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 .ls-nguon { min-width: 0; overflow-wrap: anywhere; }
table.ls .ls-nguon > span { display: block; }
table.ls .ls-nguon .cong-tac { color: var(--ink); }
table.ls .ls-nguon .ng { color: var(--muted); font-weight: var(--fw-thuong); margin-top: 2px; }
/* nhieu gia ngang nhau (goi G6b): nhan nho o cot gia, nut "Dung gia nay" duoi nguon (nhu o Kho) */
table.ls .nhan { margin-top: 3px; }
table.ls .ls-nguon .lk { margin-top: 3px; font-weight: var(--fw-dam); }
/* loi cua Them gia nam ngay tren nut Luu gia (goi G6b, N2-4) */
.them-gia .bao { margin: 0; }
table.ls .trong-ls { padding: 14px 6px; color: var(--muted); font-weight: var(--fw-thuong); }

/* ngung dung: nut vien do nho o cuoi khung (chi trong khung chi tiet), hoi ly do trong hop thoai */
.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 thoai: Them vat lieu, Ngung dung */
dialog.hop-vl { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); }
.vl-luoi-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.vl-luoi-form .rong { grid-column: 1 / -1; }
.vl-luoi-form .o { width: 100%; }
.vl-luoi-form input[type="file"] { height: auto; padding: 5px 8px; }
dialog.hop-vl .dl-than p { margin: 0; }
dialog.hop-vl .dl-than .bao { margin: 0; }


/* ================================================================ laptop: chi tiet de len bang */
@media (max-width: 1699px) {
  .vl-than { grid-template-columns: 192px 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);
  }
  .vl-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; }
  .vl-dk { flex-basis: 100%; order: 3; }
}
@media (prefers-reduced-motion: reduce) {
  .ct, .vl-than.mo-ct .ct { transition: none; }
}