/* MasterFire — 3 nhóm màu: chính (xanh than), trung tính, trạng thái. Lưới 8px. */
:root {
  --chinh: #1f3a5f; --chinh-nhat: #e8eef6; --chinh-dam: #142842;
  --nen: #f6f7f9; --mat: #ffffff; --chu: #1d2433; --chu-phu: #5b6475; --vien: #d9dee7;
  --xanh: #1a7f37; --xanh-nen: #e6f4ea; --vang: #9a6700; --vang-nen: #fff4d6; --do: #b42318; --do-nen: #fde8e7;
  --xam-nen: #eef0f3;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--nen); color: var(--chu); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 14px; line-height: 1.45; }
button, input, select, textarea { font-family: inherit; font-size: 14px; }
a { color: var(--chinh); }
[hidden] { display: none !important; }

/* ── vỏ: menu trái + nội dung ── */
.vo { display: grid; grid-template-columns: 224px 1fr; min-height: 100vh; }
nav.menu { background: var(--chinh-dam); color: #fff; padding: 16px 8px; position: sticky; top: 0; height: 100vh; }
nav.menu .thuong-hieu { padding: 0 8px 16px; font-weight: 700; font-size: 15px; }
nav.menu .thuong-hieu small { display: block; font-weight: 400; opacity: .75; font-size: 12px; }
nav.menu a { display: block; color: #dfe7f2; text-decoration: none; padding: 8px 12px; border-radius: 6px; margin-bottom: 4px; }
nav.menu a:hover { background: rgba(255,255,255,.08); }
nav.menu a.dang-mo { background: #fff; color: var(--chinh-dam); font-weight: 600; }
nav.menu .nguoi { position: absolute; bottom: 16px; left: 8px; right: 8px; padding: 8px 12px; font-size: 13px; border-top: 1px solid rgba(255,255,255,.15); }
nav.menu .nguoi button { margin-top: 8px; }
main { padding: 24px; min-width: 0; }
.nut.nut-menu { display: none; }   /* phải kèm .nut: luật .nut khai sau sẽ đè display */

/* ── tầng 1: đầu trang ── */
.dau-trang { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-end; justify-content: space-between; margin-bottom: 16px; }
.dau-trang h1 { margin: 0; font-size: 20px; }
.duong-dan { font-size: 12px; color: var(--chu-phu); margin-bottom: 4px; }
.loc { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.loc input[type=search] { width: 240px; }

/* ── nút + ô nhập ── */
.nut { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 32px; padding: 0 12px; border-radius: 6px; border: 1px solid var(--vien); background: var(--mat); color: var(--chu); cursor: pointer; white-space: nowrap; font-weight: 500; line-height: 1; }
.nut:hover { border-color: var(--chinh); }
.nut.chinh { background: var(--chinh); border-color: var(--chinh); color: #fff; font-weight: 600; }
.nut.nguy { color: var(--do); border-color: #f1b8b4; }
.nut.nguy.dac { background: var(--do); color: #fff; border-color: var(--do); }
.nut.nho { height: 26px; padding: 0 8px; font-size: 13px; }
.nut:disabled { opacity: .5; cursor: not-allowed; }
input[type=text], input[type=search], input[type=password], input[type=date], input:not([type]), select, textarea {
  height: 32px; padding: 0 8px; border: 1px solid var(--vien); border-radius: 6px; background: #fff; color: var(--chu); min-width: 0; }
textarea { height: auto; min-height: 72px; padding: 8px; resize: vertical; width: 100%; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--chinh-nhat); border-color: var(--chinh); }

/* ── tầng 2: bảng ── */
.bang-khung { background: var(--mat); border: 1px solid var(--vien); border-radius: 8px; max-height: 350px; overflow-y: auto; }
table.bang { width: 100%; border-collapse: collapse; }
.bang th { position: sticky; top: 0; background: #f0f3f7; text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .02em; color: var(--chu-phu); padding: 8px; border-bottom: 1px solid var(--vien); z-index: 1; }
.bang td { padding: 8px; border-bottom: 1px solid #eef0f3; vertical-align: top; }
.bang tr:hover td { background: #fafbfc; }
.bang td.cot-chon, .bang th.cot-chon { width: 36px; }
.bang .phu { color: var(--chu-phu); font-size: 12px; }
.bang .thao-tac { white-space: nowrap; text-align: right; }
.bang .thao-tac .nut + .nut { margin-left: 4px; }
.rong { padding: 32px; text-align: center; color: var(--chu-phu); }
.phan-trang { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; color: var(--chu-phu); font-size: 13px; }
.phan-trang .nut + .nut { margin-left: 4px; }

/* ── nhãn trạng thái: luôn có chữ, màu không là kênh duy nhất ── */
.nhan { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.nhan.xanh { background: var(--xanh-nen); color: var(--xanh); }
.nhan.vang { background: var(--vang-nen); color: var(--vang); }
.nhan.do { background: var(--do-nen); color: var(--do); }
.nhan.xam { background: var(--xam-nen); color: var(--chu-phu); }

/* ── tầng 3: thanh hàng loạt ── */
.hang-loat { position: sticky; bottom: 16px; margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--chinh-dam); color: #fff; padding: 8px 16px; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.18); }
.hang-loat .dem { font-weight: 600; margin-right: 8px; }

/* ── ngăn kéo + hộp xác nhận ── */
.man-che { position: fixed; inset: 0; background: rgba(15,23,42,.35); z-index: 20; }
.ngan-keo { position: fixed; top: 0; right: 0; bottom: 0; width: 480px; max-width: 100%; background: var(--mat); z-index: 21; display: flex; flex-direction: column; box-shadow: -8px 0 24px rgba(0,0,0,.15); }
.ngan-keo header { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; border-bottom: 1px solid var(--vien); }
.ngan-keo header h2 { margin: 0; font-size: 17px; }
.ngan-keo .than { padding: 16px 24px; overflow-y: auto; flex: 1; }
.ngan-keo footer { display: flex; gap: 8px; justify-content: flex-end; padding: 16px 24px; border-top: 1px solid var(--vien); }
.truong { margin-bottom: 16px; }
.truong label { display: flex; gap: 4px; align-items: center; font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.truong .bat-buoc { color: var(--do); }
.truong > input, .truong > select, .truong .chon-tim { width: 100%; }
.hai-cot { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.goi-y { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--xam-nen); color: var(--chu-phu); font-size: 11px; cursor: help; font-weight: 700; }
.bao-loi { background: var(--do-nen); color: var(--do); padding: 8px 12px; border-radius: 6px; margin-bottom: 16px; }
.hop-xac-nhan { position: fixed; z-index: 31; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 420px; max-width: calc(100% - 32px); background: #fff; border-radius: 10px; padding: 24px; box-shadow: 0 12px 32px rgba(0,0,0,.25); }
.hop-xac-nhan h3 { margin: 0 0 8px; font-size: 17px; }
.hop-xac-nhan .hang-nut { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--chu); color: #fff; padding: 8px 16px; border-radius: 6px; z-index: 40; }

/* ── ô chọn có tìm ── */
.chon-tim { position: relative; display: inline-block; }
.chon-tim input { width: 100%; }
.chon-tim ul { position: absolute; left: 0; right: 0; top: 34px; margin: 0; padding: 4px 0; list-style: none; background: #fff; border: 1px solid var(--vien); border-radius: 6px; max-height: 240px; overflow-y: auto; z-index: 25; box-shadow: 0 6px 16px rgba(0,0,0,.12); }
.chon-tim li { padding: 6px 12px; cursor: pointer; }
.chon-tim li:hover, .chon-tim li.dang-chon { background: var(--chinh-nhat); }
.loc .chon-tim { width: 168px; }

/* ── đăng nhập ── */
.dang-nhap { max-width: 360px; margin: 12vh auto; background: #fff; padding: 32px; border-radius: 12px; border: 1px solid var(--vien); }
.dang-nhap h1 { margin: 0 0 4px; font-size: 20px; color: var(--chinh); }
.dang-nhap p { margin: 0 0 24px; color: var(--chu-phu); }
.dang-nhap .truong input { width: 100%; }
.dang-nhap .nut.chinh { width: 100%; margin-top: 8px; }

/* ── màn hẹp ── */
@media (max-width: 900px) {
  .vo { grid-template-columns: 1fr; }
  nav.menu { position: fixed; z-index: 30; left: 0; width: 240px; transform: translateX(-100%); visibility: hidden; transition: transform .2s, visibility .2s; }
  nav.menu.mo { transform: none; visibility: visible; }
  .nut.nut-menu { display: inline-flex; margin-bottom: 8px; }
  main { padding: 16px; }
}
@media (max-width: 760px) {
  .loc { width: 100%; }
  .loc input[type=search], .loc .chon-tim { flex: 1 1 140px; width: auto; }
  .hai-cot { grid-template-columns: 1fr; }
  .bang-khung { max-height: none; }
  table.bang thead { display: none; }
  table.bang, .bang tbody, .bang tr, .bang td { display: block; width: 100%; }
  .bang tr[hidden] { display: none; }
  .bang tr { border-bottom: 1px solid var(--vien); padding: 8px 0; }
  .bang td { border: 0; padding: 4px 12px; }
  .bang td[data-nhan]::before { content: attr(data-nhan); display: block; font-size: 11px; color: var(--chu-phu); text-transform: uppercase; }
  .bang td.cot-chon { width: auto; }
  .bang .thao-tac { text-align: left; }
}

/* ── tra cứu ── */
.o-hoi { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 16px; }
.o-hoi textarea { flex: 1; min-height: 56px; }
.the-kq { background: var(--mat); border: 1px solid var(--vien); border-radius: 8px; padding: 16px 24px; margin-bottom: 24px; }
.the-kq .tra-loi { font-size: 15px; line-height: 1.6; margin: 8px 0; }
.the-kq h3 { font-size: 14px; margin: 16px 0 8px; }
.trich { border: 0; background: var(--chinh-nhat); color: var(--chinh); font-weight: 700; border-radius: 4px; padding: 0 4px; cursor: pointer; font-size: 13px; }
.ds-nguon { padding-left: 0; list-style: none; margin: 0; }
.ds-nguon li { border-top: 1px solid #eef0f3; padding: 8px 0; }
.ds-nguon .trich-ngan { margin: 4px 0; }
.doan-goc { padding: 8px 12px; border-left: 3px solid var(--vien); margin-bottom: 8px; color: var(--chu-phu); white-space: normal; }
.doan-goc.dang-trich { border-left-color: var(--chinh); background: var(--chinh-nhat); color: var(--chu); }
.tieu-de-phu { font-size: 16px; margin: 0 0 8px; }
@media (max-width: 760px) { .o-hoi { flex-direction: column; } .o-hoi .nut { width: 100%; } }

/* ── mua hàng: ngăn kéo rộng, ô tick, dòng báo giá ── */
.ngan-keo.keo-rong { width: 960px; }
.ngan-keo footer { flex-wrap: wrap; }
.bang tr.mo td { opacity: .55; }
.o-tick { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; font-size: 13px; }
fieldset.nhom-tick { border: 1px solid var(--vien); border-radius: 6px; padding: 8px 16px 0; margin: 0 0 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 16px; }
fieldset.nhom-tick legend { font-weight: 600; font-size: 13px; padding: 0 4px; display: flex; gap: 4px; align-items: center; }
fieldset.nhom-tick .o-tick { margin-bottom: 8px; }
.dau-dong { display: flex; justify-content: space-between; align-items: center; margin: 8px 0; }
.dau-dong h3 { margin: 0; }
.dau-cot, .dong-bg { display: grid; grid-template-columns: minmax(200px, 1fr) 96px 128px 72px 88px 128px 32px; gap: 8px; align-items: center; }
.dau-cot { font-size: 12px; color: var(--chu-phu); text-transform: uppercase; padding: 0 0 4px; border-bottom: 1px solid var(--vien); }
.dong-bg { padding: 8px 0; border-bottom: 1px solid #eef0f3; }
.dong-bg.loi { background: var(--do-nen); }
.dong-bg label { display: none; font-size: 11px; color: var(--chu-phu); text-transform: uppercase; margin-bottom: 2px; }
.dong-bg input, .dong-bg select, .dong-bg .chon-tim { width: 100%; }
.dong-bg .thanh-tien span { font-weight: 600; }
#dg-them { margin-top: 8px; }
#dg-dan { background: var(--nen); border: 1px solid var(--vien); border-radius: 6px; padding: 16px; margin-bottom: 8px; }
.tong-bg { margin: 16px 0; margin-left: auto; max-width: 320px; }
.tong-bg div { display: flex; justify-content: space-between; padding: 4px 0; }
.tong-bg .cong { border-top: 1px solid var(--vien); font-size: 15px; }
/* ngăn kéo hẹp hơn ~1000px thì 7 cột dòng hàng không vừa (đo 09/11: 816px trong khung 704px ở màn 768) → chuyển thành thẻ 2 cột */
@media (max-width: 1000px) {
  .dau-cot { display: none; }
  .dong-bg { grid-template-columns: 1fr 1fr; padding: 12px 0; }
  .dong-bg .o-vt { grid-column: 1 / -1; }
  .dong-bg label { display: block; }
  .dong-bg [data-bo] { justify-self: end; align-self: end; }
}