/* ui/_chung/man-quet-xuat.css — BỐ CỤC của màn quét, DÙNG CHUNG bản mẫu + bản nối (dời từ ui/mau-quet-xuat/man.css
   23/09/2026, lượt 3 nối màn quét). Chỉ dùng var(--…) của ../_chung/kieu.css
   cho màu, cỡ chữ, khoảng cách, bo góc (test logic/kieu-giao-dien.test.ts báo đỏ nếu viết số/mã màu ở đây).
   Bản 3 (21/09/2026, Bảo chọn hướng Long Châu): mảng màu đầu trang + tấm nền trồi lên, ô mã thùng dạng viên,
   camera tắt không chiếm chỗ, nút Quét tròn nổi, thẻ dòng có bóng mềm, biểu tượng hai tông, màn trống có hình.
   22/09/2026 (Bảo cầm thử): gỡ hai nút chế độ của kiểu 2; thêm thông báo đáy "Đã bỏ dòng · Hoàn tác" trong thanh gửi. */
.dau-trang-nhan .vien { min-height: var(--k3); padding: 0 var(--k1); border: 0; cursor: pointer; }
.chip-phieu { margin-top: var(--k1); cursor: pointer; }
.than { padding-bottom: calc(env(safe-area-inset-bottom) + var(--k6) * 4); min-height: calc(var(--k6) * 8); }

/* khung camera: chỉ hiện khi bật, khoảng 1/3 màn */
.khung-quet { position: relative; height: 32vh; min-height: calc(var(--k6) * 4); margin-top: var(--k2); background: var(--khung-quet); border-radius: var(--bo-dong); overflow: hidden; box-shadow: var(--bong-mem); }
.khung-quet video { width: 100%; height: 100%; object-fit: cover; display: block; }
.khung-quet .ngam { position: absolute; left: 18%; top: 14%; width: 64%; height: 72%; border: var(--vien-day) dashed var(--the); border-radius: var(--bo-o); pointer-events: none; opacity: 0.85; }
.khung-quet.trung .ngam { border-color: var(--xong-nen); border-style: solid; }
.khung-chu { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--k0) var(--k2); background: var(--lop-phu); color: var(--chu-tren-nhan); font-weight: var(--dam-vua); white-space: nowrap; overflow: hidden; }
.thong-bao { margin-top: var(--k1); padding: var(--k0) var(--k1); border-radius: var(--bo-o); font-weight: var(--dam-vua); }
.thong-bao.xong { background: var(--xong-nen); color: var(--xong); }
.thong-bao.loi { background: var(--loi-nen); color: var(--loi-chu-nen); }

.dau-danh-sach { min-height: var(--chip-cao); margin-top: var(--k2); margin-bottom: var(--k1); }
.dau-danh-sach h2 .so { font-size: var(--chu-lon); }
.danh-sach .the-dong { cursor: pointer; border-top: 0; padding: var(--k1) var(--k2); }
.danh-sach .the-dong.khoa { cursor: default; }
.danh-sach .the-dong.loi { border: var(--vien-day) solid var(--loi); background: var(--loi-nen); }
.hang { display: flex; align-items: center; gap: var(--k1); }
.hang .noi-dung { flex: 1 1 auto; min-width: 0; }
.hang .dong-tren, .hang .dong-duoi { display: flex; align-items: center; justify-content: space-between; gap: var(--k1); }
.hang .ten { font-weight: var(--dam-vua); overflow-wrap: anywhere; }
.hang .vien-cum { display: inline-flex; gap: var(--k0); flex: 0 0 auto; }
.hang .ma { white-space: nowrap; }
.hang .cau-loi { color: var(--loi-chu-nen); font-size: var(--chu-nho); font-weight: var(--dam-vua); margin-top: var(--k0); }

/* đáy luôn dính: nút tròn nổi Quét (con của thanh → luôn cách mép trên thanh 16px) + tóm tắt + Gửi */
.thanh-gui {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  padding: var(--k1) var(--k2) calc(env(safe-area-inset-bottom) + var(--k1));
  background: var(--the); border-top: var(--vien-manh) solid var(--vien-nhat);
}
/* thông báo đáy có nút hành động (Bỏ dòng → Hoàn tác): trong thanh gửi = vùng ngón cái (luật 1). Nút tròn Quét nằm
   TRÊN mép thanh (top âm) nên không đè vào đây — thông báo dùng hết bề ngang. */
.thong-bao-day { min-height: var(--o-cao); margin-bottom: var(--k1); padding: 0 var(--k1) 0 var(--k2); border-radius: var(--bo-o); background: var(--xong-nen); color: var(--xong); font-weight: var(--dam-vua); }
.thong-bao-day .nut { min-height: var(--k5); flex: 0 0 auto; }
.tom-tat-day { min-height: var(--vien-cao); margin-bottom: var(--k1); padding-right: calc(var(--fab-co) + var(--k2)); }
.tom-tat-day .so { font-size: var(--chu-thuong); color: var(--chu); }
.khu-trang-thai { flex: 0 0 auto; }
.thanh-gui .cau { font-weight: var(--dam-vua); margin-bottom: var(--k1); }
.thanh-gui .cau.loi { color: var(--loi-chu-nen); }
.thanh-gui .cau.xong { color: var(--xong); }
.thanh-gui .cau.cho { color: var(--cho); }

/* bảng trượt: các khối bên trong */
.the-thung .trang-thai { margin: var(--k0) 0 var(--k1); }
.o-loi-ngay { color: var(--loi); font-size: var(--chu-nho); font-weight: var(--dam-vua); min-height: var(--k3); }
.loai-phieu { display: flex; gap: var(--k1); }
.loai-phieu .nut { flex: 1 1 0; }
.loai-phieu .nut.dang-bat { background: var(--mau-nhan-nen); border-color: var(--mau-nhan); border-width: var(--vien-day); font-weight: var(--dam-dam); }
.danh-muc .hang { cursor: pointer; padding: var(--k1) 0; border-top: var(--vien-manh) solid var(--vien-nhat); }
.danh-muc .hang:first-child { border-top: 0; }

/* bảng "lấy thêm" (một mã thùng một dòng, Bảo chốt phương án a 22/09/2026):
   nhắc thùng đã có trong phiếu · đã lấy bao nhiêu · tổng sau khi cộng */
.da-lay { margin-top: var(--k1); }
.tong-moi { text-align: center; color: var(--mau-nhan); margin-bottom: var(--k1); }

/* bảng giả lập */
.gia-lap h2 { margin-top: var(--k1); }
.gia-lap .lua { display: flex; flex-direction: column; gap: var(--k0); }
.gia-lap label.lua-dong { display: flex; align-items: center; gap: var(--k1); min-height: var(--o-cao); font-size: var(--chu-nho); }
.gia-lap input[type="radio"], .gia-lap input[type="checkbox"] { width: var(--k3); height: var(--k3); }
.gia-lap .thong-tin { color: var(--chu-phu); font-size: var(--chu-nho); }