/* web/css/kn.css · Giao diện V2 theo Bộ nút chuẩn (V2 Planning\Bản thử). Một bộ cho điện thoại, iPad, máy tính. */
:root {
  --nen: #f4f5f2; --the: #fff; --muc: #1d2321; --mo: #5f6763; --vien: #d9ddd8; --vien-dam: #b9bfb9;
  --vang: #f2c230; --vang-dam: #d9a917; --xanh: #1f4e46; --xanh-nhat: #e7efed; --do: #b3261e; --do-nen: #fdecea;
  --ke: #7a3fb0; --vang-nen: #fff6d6; --toi: #26302c;
  --bo: 12px; --cao-nut: 48px; --chu: 16px;
  --tren: 60px; --duoi: 68px;
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { min-height: 100vh; }
body { background: var(--nen); color: var(--muc); font-size: var(--chu); line-height: 1.4; -webkit-text-size-adjust: 100%; overflow-wrap: break-word; word-break: normal; hyphens: none; }
button, input, select, textarea { font: inherit; color: inherit; }
input, select, textarea { font-size: max(16px, 1em); }
[hidden] { display: none !important; }
.hinh { width: 20px; height: 20px; flex: none; fill: currentColor; }
.an-chu { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Nút chuẩn ---------- */
.nut { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--cao-nut); padding: 0 14px;
  border-radius: 10px; border: 2px solid transparent; background: none; font-size: 16px; font-weight: 600; cursor: pointer;
  white-space: nowrap; text-decoration: none; color: var(--muc); -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.nut:focus-visible { outline: 3px solid #3b82f6; outline-offset: 2px; }
.nut:disabled, .nut[aria-disabled="true"] { opacity: .45; cursor: default; }
.nut.di_tiep { background: var(--vang); color: #1d2321; }
.nut.di_tiep:active { background: var(--vang-dam); }
.nut.tao_moi { background: var(--xanh); color: #fff; }
.nut.sua, .nut.xem, .nut.in, .nut.chia_se { border-color: var(--xanh); color: var(--xanh); background: #fff; }
.nut.them, .nut.quay_lai, .nut.lui_buoc, .nut.nut_phu { border-color: var(--vien); color: var(--muc); background: #fff; }
.nut.quay_lai, .nut.lui_buoc { color: var(--mo); }
.nut.xoa { color: var(--do); border-color: #f0c9c6; background: #fff; }
.nut.trong { border: 2px dashed var(--vien); background: transparent; visibility: visible; cursor: default; }
.nut.nho { min-height: 40px; padding: 0 10px; font-size: 15px; }
.nut .chu { overflow: hidden; text-overflow: ellipsis; }
.nut.can-mang { opacity: .5; }

/* ---------- Khung ---------- */
#khung { min-height: 100vh; display: flex; flex-direction: column; }
.thanh-tren { position: sticky; top: 0; z-index: 30; background: var(--the); border-bottom: 1px solid var(--vien);
  display: flex; align-items: center; gap: 8px; padding: 6px 10px; min-height: var(--tren); }
.thanh-tren .nut { min-height: 44px; padding: 0 10px; }
.tra-nhanh { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; border: 2px solid var(--vien); border-radius: 10px;
  padding: 0 10px; min-height: 44px; background: #fff; color: var(--mo); }
.tra-nhanh input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--muc); }
.dau-dong-bo { position: relative; }
.dau-dong-bo .so-cho { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--do);
  color: #fff; font-size: 12px; line-height: 18px; text-align: center; padding: 0 4px; }
.dau-dong-bo.loi { color: var(--do); }
.co-ban-moi { background: var(--vang-nen); }
.thanh-dang-mo { position: sticky; top: var(--tren); z-index: 29; background: #eceee9; border-bottom: 1px solid var(--vien);
  display: flex; gap: 6px; align-items: center; padding: 6px 10px; overflow-x: auto; scrollbar-width: none; }
.thanh-dang-mo::-webkit-scrollbar { display: none; }
.chip-mo { display: inline-flex; align-items: center; border: 2px solid var(--vien); border-radius: 22px; background: #fff; flex: none; max-width: 260px; }
.chip-mo.dang { border-color: var(--xanh); background: var(--xanh-nhat); }
.chip-mo > button { border: 0; background: none; min-height: 40px; padding: 0 6px 0 12px; font-weight: 600; cursor: pointer; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; max-width: 210px; }
.chip-mo > button.dong { padding: 0 10px; color: var(--mo); font-size: 20px; }
.noi-dung { flex: 1; min-height: 0; display: flex; }
.cot-ds, .cot-ct { min-width: 0; }
.cot-ds { flex: 1; padding: 12px; }
.cot-ct { display: none; }
.thanh-duoi { position: sticky; bottom: 0; z-index: 30; background: var(--the); border-top: 1px solid var(--vien); display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)); padding-bottom: env(safe-area-inset-bottom); }
.thanh-duoi button { border: 0; background: none; min-height: var(--duoi); display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px; font-size: 13px; font-weight: 600; color: var(--mo); cursor: pointer; padding: 4px 2px; }
.thanh-duoi button .hinh { width: 24px; height: 24px; }
.thanh-duoi button.dang { color: var(--xanh); }
.thanh-trai { display: none; }

/* Máy tính: thanh trái 13 dòng luôn hiện, danh sách trái · chi tiết phải */
body.bo-may-tinh #khung { display: grid; grid-template-columns: 210px minmax(0, 1fr); grid-template-rows: auto auto 1fr; min-height: 100vh; }
body.bo-may-tinh .thanh-tren { grid-column: 1 / -1; }
body.bo-may-tinh .thanh-dang-mo { grid-column: 1 / -1; }
body.bo-may-tinh .thanh-trai { display: flex; flex-direction: column; gap: 2px; padding: 10px 8px; border-right: 1px solid var(--vien);
  background: var(--the); position: sticky; top: var(--tren); height: calc(100vh - var(--tren)); overflow-y: auto; }
body.bo-may-tinh .thanh-trai button { text-align: left; border: 0; background: none; min-height: 44px; padding: 0 12px; border-radius: 8px;
  font-size: 16px; font-weight: 600; cursor: pointer; color: var(--muc); }
body.bo-may-tinh .thanh-trai button.dang { background: var(--xanh-nhat); color: var(--xanh); }
body.bo-may-tinh .thanh-trai hr { border: 0; border-top: 1px solid var(--vien); margin: 6px 4px; width: auto; }
body.bo-may-tinh .thanh-duoi { display: none; }
body.bo-may-tinh .noi-dung { min-height: 0; }
body.bo-may-tinh .noi-dung.co-ct .cot-ds { flex: 0 0 min(440px, 38%); border-right: 1px solid var(--vien); max-height: calc(100vh - var(--tren) - 54px); overflow-y: auto; position: sticky; top: calc(var(--tren) + 54px); }
body.bo-may-tinh .noi-dung.co-ct .cot-ct { display: flex; flex: 1; }
body.bo-cham .noi-dung.co-ct .cot-ds { display: none; }
body.bo-may-tinh .noi-dung.co-canh .cot-ds { display: none; }   /* Xem cạnh: nhường chỗ cho hai màn chi tiết */
body.bo-cham .noi-dung.co-ct .cot-ct { display: flex; flex: 1; }

/* ---------- Danh sách ---------- */
.dau-ds { display: flex; align-items: center; gap: 10px; margin: 2px 0 10px; flex-wrap: wrap; }
.dau-ds h1 { font-size: 22px; margin: 0; flex: 1 0 auto; min-width: max-content; white-space: nowrap; }
.loc-nhanh { display: inline-flex; border: 2px solid var(--vien); border-radius: 10px; overflow: hidden; background: #fff; }
.loc-nhanh button { border: 0; background: none; min-height: 40px; padding: 0 12px; font-weight: 600; cursor: pointer; color: var(--mo); }
.loc-nhanh button.dang { background: var(--xanh); color: #fff; }
.luoi-the { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 12px; }
.nhom-dl { margin: 18px 0 8px; display: flex; align-items: baseline; gap: 8px; }
.nhom-dl h2 { font-size: 18px; margin: 0; }
.nhom-dl .dem { color: var(--mo); font-size: 14px; }
.trong-tron { color: var(--mo); padding: 28px 12px; text-align: center; background: #fff; border: 1px dashed var(--vien); border-radius: var(--bo); }
.thanh-tick { position: sticky; top: calc(var(--tren) + 52px); z-index: 20; display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  background: var(--xanh-nhat); border: 1px solid var(--vien); border-radius: var(--bo); padding: 8px; margin-bottom: 10px; }
.thanh-tick .dem { font-weight: 700; margin-right: auto; padding: 0 6px; }
.xem-them { display: flex; justify-content: center; margin: 14px 0 6px; }
.dang-tai { color: var(--mo); padding: 14px; text-align: center; }

/* ---------- Thẻ chuẩn ---------- */
.the { background: var(--the); border: 1px solid var(--vien); border-radius: var(--bo); padding: 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.the.chon { border-color: var(--xanh); box-shadow: 0 0 0 2px var(--xanh) inset; }
.the.dang-mo-ct { border-color: var(--xanh); }
.the-tren { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.tick { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--vien-dam); flex: none; background: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; padding: 0; color: #fff; }
.tick[aria-checked="true"] { background: var(--xanh); border-color: var(--xanh); }
.tick .hinh { width: 18px; height: 18px; }
.the-khach { flex: 1; min-width: 0; font-size: 20px; font-weight: 700; line-height: 1.25; }
.the-tien { font-size: 20px; font-weight: 700; white-space: nowrap; }
.the-nguoi-nhan { font-size: 18px; font-weight: 700; }
.the-ma { font-size: 14px; color: var(--mo); }
.the-buoc { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.vach-buoc { display: flex; gap: 4px; flex: 1 1 140px; min-width: 120px; }
.vach-buoc i { flex: 1; height: 6px; border-radius: 3px; background: var(--vien); }
.vach-buoc i.xong { background: var(--xanh); }
.vach-buoc i.toi { background: var(--vang); }
.ten-buoc { color: var(--mo); }
.chip { display: inline-flex; align-items: center; gap: 4px; border-radius: 12px; padding: 2px 9px; background: #eef1ee; color: var(--muc); font-size: 13px; font-weight: 600; white-space: nowrap; }
.chip.trang-thai { background: var(--xanh-nhat); color: var(--xanh); }
.dai-do { background: var(--do-nen); color: #a1201a; font-weight: 600; border-radius: 8px; padding: 8px 10px; font-size: 15px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dai-do .chu-dai { flex: 1 1 160px; }
.dai-vang { background: var(--vang-nen); color: #6b4e00; border-radius: 8px; padding: 8px 10px; font-weight: 600; }
.o-nut { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.o-nut .o1 { grid-column: 1 / -1; }
.o-nut .o1.nut { justify-content: space-between; }
.o-nut .nut:not(.o1) { flex-direction: column; gap: 2px; min-height: 60px; font-size: 14px; padding: 4px 2px; min-width: 0; }
.o-nut .nut:not(.o1) .chu { max-width: 100%; }

/* ---------- Menu ⋯, hộp nổi ---------- */
.man-che { position: fixed; inset: 0; z-index: 60; background: rgba(20, 26, 24, .35); display: flex; align-items: flex-end; justify-content: center; }
body.bo-may-tinh .man-che { align-items: center; }
.hop { background: #fff; border-radius: 16px 16px 0 0; width: min(560px, 100%); max-height: 88vh; overflow-y: auto; padding: 8px 0 calc(8px + env(safe-area-inset-bottom)); }
body.bo-may-tinh .hop { border-radius: 16px; }
.hop.rong { width: min(920px, 100%); }
.hop-dau { display: flex; align-items: center; gap: 10px; padding: 8px 16px 6px; position: sticky; top: -8px; background: #fff; z-index: 1; }
.hop-dau h2 { font-size: 19px; margin: 0; flex: 1; min-width: 0; }
.hop-than { padding: 4px 16px 10px; }
.hop-chan { position: sticky; bottom: -8px; background: #fff; border-top: 1px solid var(--vien); padding: 10px 16px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
.nhom-them { padding: 4px 0; border-top: 1px solid var(--vien); }
.nhom-them:first-of-type { border-top: 0; }
.nhom-them h3 { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--mo); margin: 8px 16px 2px; }
.dong-them { display: flex; width: 100%; align-items: center; gap: 12px; border: 0; background: none; text-align: left; min-height: 52px; padding: 0 16px; font-size: 17px; font-weight: 600; cursor: pointer; color: var(--muc); }
.dong-them:active, .dong-them:hover { background: #f1f3f0; }
.dong-them.xoa { color: var(--do); }
.dong-them .hinh { color: var(--mo); }
.dong-them.xoa .hinh { color: var(--do); }
.luoi-menu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 8px 16px 16px; }
.luoi-menu button { min-height: 76px; border: 2px solid var(--vien); border-radius: 14px; background: #fff; font-size: 16px; font-weight: 700; cursor: pointer; padding: 6px; color: var(--muc); }
.luoi-menu button.dang { border-color: var(--xanh); background: var(--xanh-nhat); color: var(--xanh); }

/* ---------- Thanh báo (Hoàn tác) ---------- */
.thanh-bao { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--duoi) + 10px + env(safe-area-inset-bottom)); z-index: 70;
  width: min(560px, calc(100% - 20px)); background: var(--toi); color: #fff; border-radius: 12px; padding: 8px 8px 8px 14px;
  display: flex; align-items: center; gap: 8px; box-shadow: 0 6px 24px rgba(0,0,0,.25); }
body.bo-may-tinh .thanh-bao { bottom: 16px; }
.thanh-bao .chu-bao { flex: 1; min-width: 0; }
.thanh-bao.loi { background: #5b1611; }
.thanh-bao .nut { background: none; color: var(--vang); border-color: #4a5752; min-height: 44px; }
.thanh-bao .dong { border: 0; color: #c9d1cd; background: none; font-size: 22px; min-width: 40px; min-height: 44px; cursor: pointer; }

/* ---------- Màn chi tiết ---------- */
.ct { display: flex; flex-direction: column; min-width: 0; flex: 1; background: var(--nen); }
.ct + .ct { border-left: 3px solid var(--vien-dam); }
.ct-dinh { position: sticky; top: var(--tren); z-index: 15; background: var(--nen); padding: 8px 12px 6px; border-bottom: 1px solid var(--vien); }
body:has(.thanh-dang-mo:not([hidden])) .ct-dinh { top: calc(var(--tren) + 53px); }
.chuoi-ct { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; }
.chuoi-ct::-webkit-scrollbar { display: none; }
.chuoi-ct button { flex: none; border: 2px solid var(--vien); background: #fff; border-radius: 20px; min-height: 38px; padding: 0 12px; font-weight: 600; cursor: pointer; font-size: 14px; color: var(--muc); }
.chuoi-ct button.dang { border-color: var(--xanh); background: var(--xanh-nhat); color: var(--xanh); }
.tim-ct { display: flex; align-items: center; gap: 8px; border: 2px solid var(--vien); border-radius: 10px; background: #fff; padding: 0 10px; min-height: 44px; }
.tim-ct input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; }
.tim-ct .dem { color: var(--mo); font-size: 14px; white-space: nowrap; }
.tim-ct .bo { border: 0; background: none; font-size: 20px; color: var(--mo); min-width: 32px; min-height: 40px; cursor: pointer; }
.ct-than { padding: 12px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.ct-dau .khach { font-size: 24px; font-weight: 700; line-height: 1.25; }
.ct-dau .nguoi-nhan { font-size: 22px; font-weight: 700; }
.ct-dau .phu { font-size: 16px; color: var(--mo); }
.truong { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 6px 14px; background: #fff; border: 1px solid var(--vien); border-radius: var(--bo); padding: 10px 12px; }
.truong div { min-width: 0; }
.truong small { display: block; color: var(--mo); font-size: 13px; }
.thanh-cong-cu { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.thanh-cong-cu .nut { min-height: 44px; }
.ban-ct { display: inline-flex; border: 2px solid var(--vien); border-radius: 10px; overflow: hidden; background: #fff; }
.ban-ct button { border: 0; background: none; min-height: 40px; padding: 0 12px; font-weight: 600; cursor: pointer; color: var(--mo); }
.ban-ct button.dang { background: var(--xanh); color: #fff; }
.bang-boc { background: #fff; border: 1px solid var(--vien); border-radius: var(--bo); overflow: auto; overscroll-behavior: contain;
  max-height: max(260px, calc(100dvh - var(--tren) - 230px)); }   /* bảng tự cuộn trong khung: hàng tên cột luôn dính, cột rộng cuộn ngang */
table.bang { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 15px; }
table.bang th { position: sticky; top: 0; z-index: 2; background: #f0f2ef; text-align: left; font-size: 13px; color: var(--mo); font-weight: 700; padding: 8px; border-bottom: 1px solid var(--vien); white-space: nowrap; }
table.bang td { padding: 8px; border-bottom: 1px solid #edf0ec; vertical-align: top; }
table.bang td.so, table.bang th.so { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.bang td.ten { min-width: 180px; }
table.bang td.ma { white-space: nowrap; }   /* số phiếu, ngày, ĐVT: một dòng, bảng cuộn ngang nếu hẹp */
table.bang tr.nhom td { background: #f6f7f4; font-weight: 700; }
table.bang tr.chep td { background: var(--vang-nen); }
table.bang .ke { color: var(--ke); }
table.bang .do { color: var(--do); font-weight: 700; }
table.bang mark { background: #ffe58a; color: inherit; padding: 0; }
.ct-chan { position: sticky; bottom: 0; z-index: 15; background: #fff; border-top: 1px solid var(--vien); padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 8px; }
body.bo-cham .ct-chan { bottom: var(--duoi); }
.ct-chan { flex-wrap: wrap; }
.ct-chan .tong { flex: 1 1 auto; text-align: center; font-size: 20px; font-weight: 700; min-width: max-content; white-space: nowrap; }
.ct-chan .tong small { display: block; font-size: 13px; color: var(--mo); font-weight: 600; }
.ct-chan .trong-cho { flex: 0 0 auto; min-width: 1px; }

/* ---------- Hộp In · Chia sẻ ---------- */
.hang-chon { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 8px 0; }
.hang-chon > span { color: var(--mo); font-size: 14px; min-width: 84px; }
.ds-cot { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 4px 12px; margin: 6px 0; }
.gat { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 0 4px; border-bottom: 1px solid #edf0ec; cursor: pointer; }
.gat input { position: absolute; opacity: 0; pointer-events: none; }
.gat .cong-tac { width: 50px; height: 30px; border-radius: 15px; background: var(--vien-dam); position: relative; flex: none; transition: background .15s; }
.gat .cong-tac::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: left .15s; }
.gat input:checked + .cong-tac { background: var(--xanh); }
.gat input:checked + .cong-tac::after { left: 23px; }
.gat.khoa { color: var(--mo); cursor: default; }
.gat input:focus-visible + .cong-tac { outline: 3px solid #3b82f6; outline-offset: 2px; }

/* ---------- Đăng nhập, Cài đặt ---------- */
.man-dang-nhap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.o-dang-nhap { background: #fff; border: 1px solid var(--vien); border-radius: 16px; padding: 22px 18px; width: min(420px, 100%); display: flex; flex-direction: column; gap: 14px; }
.o-dang-nhap h1 { margin: 0; font-size: 22px; }
label.o { display: flex; flex-direction: column; gap: 4px; font-weight: 600; }
label.o input, .o-nhap { min-height: 48px; border: 2px solid var(--vien); border-radius: 10px; padding: 0 12px; background: #fff; font-size: max(16px, 1em); }
label.o input:focus, .o-nhap:focus { border-color: var(--xanh); outline: 0; }
.bao-loi { color: var(--do); font-weight: 600; }
.ghi-nho { color: var(--mo); font-size: 14px; }
.cai-dat { display: flex; flex-direction: column; gap: 10px; max-width: 720px; }
.cai-dat section { background: #fff; border: 1px solid var(--vien); border-radius: var(--bo); padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.cai-dat h2 { font-size: 17px; margin: 0; }
.dong-cd { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.dong-cd b { font-size: 18px; }

/* ---------- Tra nhanh ---------- */
.ket-qua-tra { display: flex; flex-direction: column; gap: 8px; }
.ket-qua-tra h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--mo); margin: 10px 0 0; }
.dong-tra { display: flex; justify-content: space-between; gap: 10px; align-items: center; width: 100%; text-align: left; border: 1px solid var(--vien);
  background: #fff; border-radius: 10px; min-height: 52px; padding: 6px 12px; cursor: pointer; font-size: 16px; color: var(--muc); }
.dong-tra small { display: block; color: var(--mo); font-size: 13px; }
.dong-tra b { white-space: nowrap; }

/* ---------- Điện thoại ---------- */
@media (max-width: 520px) {
  .cot-ds { padding: 10px; }
  .the-khach { font-size: 18px; }
  .the-tien { font-size: 18px; }
  .ct-dau .khach { font-size: 22px; }
  .ct-dau .nguoi-nhan { font-size: 20px; }
  .thanh-tren .nut .chu { display: none; }
  .thanh-tren .nut.tao_moi .chu { display: inline; }
  .thanh-tren { gap: 6px; padding: 6px 8px; }
  .tra-nhanh { flex: 0 0 44px; justify-content: center; padding: 0; }   /* điện thoại: ô Tra nhanh thành nút hình kính lúp, bấm mở hộp tìm */
  .tra-nhanh input { display: none; }
  .ct-chan { flex-wrap: wrap; }
  .ct-chan .tong { order: -1; flex-basis: 100%; text-align: left; }
  .ct-chan .nut.di_tiep { flex: 1; }
  .luoi-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- In bản xem nhanh (B1) ---------- */
@media print {
  body > *:not(#ban-in) { display: none !important; }
  #ban-in { display: block !important; }
}
#ban-in { display: none; font-family: Arial, sans-serif; color: #000; font-size: 12pt; }
#ban-in table { border-collapse: collapse; width: 100%; }
#ban-in th, #ban-in td { border: 1px solid #000; padding: 3px 5px; }
#ban-in tr { break-inside: avoid; }

/* ---------- Ô chọn, ô nhập, màn soạn (B2–B5) ---------- */
.truong-sua { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 10px 14px; background: #fff; border: 1px solid var(--vien); border-radius: var(--bo); padding: 12px; }
.truong-sua > label.o, .truong-sua > .o-chon-boc { min-width: 0; }
.o-chon-boc { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.o-chon-boc .ban-ct { flex-wrap: wrap; }
.nhan-o { font-weight: 600; font-size: 15px; }
.nut-o { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 48px; width: 100%; border: 2px solid var(--vien); border-radius: 10px; background: #fff; padding: 4px 12px; text-align: left; cursor: pointer; font-size: 16px; color: var(--muc); }
.nut-o .nhan-o { font-size: 13px; color: var(--mo); font-weight: 600; }
.nut-o .gt-o { font-weight: 600; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.nut-o.dam .gt-o { font-size: 18px; font-weight: 700; }
.nut-o:focus-visible { outline: 3px solid #3b82f6; outline-offset: 2px; }
.nho-o { min-height: 40px; padding: 2px 8px; min-width: 120px; }
table.bang-sua td { padding: 4px 6px; }
table.bang-sua .o-nhap { min-height: 42px; width: 100%; min-width: 64px; padding: 0 8px; border-width: 1px; }
table.bang-sua td.so .o-nhap { text-align: right; min-width: 90px; }
table.bang-sua td.ten .o-nhap, table.bang-sua td.ten .nut-o { min-width: 200px; }
.o-nhap.so { text-align: right; font-variant-numeric: tabular-nums; }
textarea.o-nhap { padding: 8px 12px; min-height: 64px; resize: vertical; }
.cot-tick { width: 44px; }
table.bang tr.chon td { background: var(--xanh-nhat); }
table.bang tr.chua-chon td:first-child, table.bang tr.chua-chon td.ten { box-shadow: inset 4px 0 0 var(--vang); }
.tieu-de-phu { font-size: 16px; margin: 6px 0 0; }
.form-hoi { display: flex; flex-direction: column; gap: 12px; }
.do { color: var(--do); font-weight: 700; }
.the-dong { background: #fff; border: 1px solid var(--vien); border-radius: var(--bo); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.the-dong .hang1 { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.the-dong .ten { font-weight: 700; font-size: 17px; min-width: 0; }
.tab-ds { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-bottom: 10px; }
.tab-ds button { flex: none; border: 2px solid var(--vien); background: #fff; border-radius: 20px; min-height: 40px; padding: 0 14px; font-weight: 600; cursor: pointer; color: var(--muc); }
.tab-ds button.dang { border-color: var(--xanh); background: var(--xanh); color: #fff; }
.bang-bc td, .bang-bc th { white-space: nowrap; }
.may-hieu .ca { background: #fff; border: 1px solid var(--vien); border-radius: var(--bo); padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.vung-tha { border: 3px dashed var(--vien-dam); border-radius: 16px; padding: 28px 16px; text-align: center; background: #fff; color: var(--mo); display: flex; flex-direction: column; gap: 12px; align-items: center; }
.vung-tha.tren { border-color: var(--xanh); background: var(--xanh-nhat); }

/* Hàng ô lọc của danh sách (mọi menu): ô co giãn, xuống dòng khi hẹp; điện thoại hai ô một hàng */
.hang-loc { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; align-items: flex-end; }
.hang-loc > .o-chon-boc, .hang-loc > .o-tim { flex: 1 1 160px; max-width: 260px; min-width: 0; }
@media (max-width: 600px) { .hang-loc > .o-chon-boc, .hang-loc > .o-tim { flex: 1 1 calc(50% - 8px); max-width: none; } }
.hang-loc > .o-tim { display: flex; align-self: stretch; }
.hang-loc > .o-tim .o-nhap { width: 100%; height: 100%; min-height: 48px; }

/* Hộp chọn (ô chọn tìm thông minh): điện thoại cao gần hết màn, ô tìm dính trên cùng; dòng đang trỏ (phím ↑ ↓) có viền */
.hop.hop-chon .o-tim-chon { position: sticky; top: 0; background: #fff; z-index: 1; padding-bottom: 6px; }
.hop.hop-chon .dong-tra b { font-weight: 800; }
.hop.hop-chon .dong-tra.dang-tro { border-color: var(--xanh); box-shadow: inset 0 0 0 1px var(--xanh); }
/* Hãng khác của cùng món (ô chọn hàng): nhóm thụt vào dưới dòng đang trỏ; hiệu đậm, giá thật chữ đen, mã hãng xám nhỏ */
.nhom-hang-khac { margin: 2px 0 8px 14px; padding: 6px 0 2px 10px; border-left: 3px solid var(--vien-dam); }
.nhom-hang-khac .hk-tieu-de { font-size: 13px; font-weight: 700; color: var(--mo); margin-bottom: 4px; }
.nhom-hang-khac .dong-tra.dong-hk { min-height: var(--cao-nut); margin-bottom: 4px; }
.nhom-hang-khac .hk-ten { flex: 1; min-width: 0; overflow-wrap: break-word; word-break: normal; }
.nhom-hang-khac .hk-ten b { white-space: normal; }
.nhom-hang-khac .hk-dvt { color: var(--mo); }
.nhom-hang-khac .hk-gia { flex: none; text-align: right; color: var(--muc); font-weight: 700; white-space: nowrap; }
.nhom-hang-khac .hk-gia .hk-ma { font-weight: 400; }
.nhom-hang-khac .xem-them { margin: 2px 0 4px; }
body:not(.bo-may-tinh) .hop.hop-chon { height: 88vh; height: 88dvh; }