/* ui/mau-quet-xuat/man.css — BỐ CỤC riêng của 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). */
.dau-trang { padding: calc(env(safe-area-inset-top) + var(--k2)) var(--k2) var(--k1); background: var(--nen); }
.dau-trang .vien { min-height: var(--k4); padding: 0 var(--k1); border: 0; cursor: pointer; }
.tom-tat {
  display: flex; align-items: center; gap: var(--k2); width: 100%; margin-top: var(--k1);
  min-height: var(--o-cao); padding: 0 var(--k2); border: var(--vien-manh) solid var(--vien);
  border-radius: var(--bo-o); background: var(--the); text-align: left; cursor: pointer;
}
.tom-tat .chu-phu { font-weight: var(--dam-vua); color: var(--mau-nhan); }
.than { padding: var(--k1) var(--k2) calc(env(safe-area-inset-bottom) + var(--k6) * 3); }

/* khung camera ≈ một phần ba màn hình phía trên */
.khung-quet { position: relative; height: 34vh; min-height: calc(var(--k6) * 4); background: var(--khung-quet); border-radius: var(--bo-o); overflow: hidden; }
.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(--k1) var(--k2); background: var(--lop-phu); color: var(--chu-tren-nhan); font-weight: var(--dam-vua); }
.che-do-nhan { text-align: center; font-size: var(--chu-lon); font-weight: var(--dam-dam); color: var(--mau-nhan); padding: var(--k1) 0; }
.nhac-quyen { background: var(--cho-nen); color: var(--cho); font-weight: var(--dam-vua); border-radius: var(--bo-o); padding: var(--k1) var(--k2); margin-bottom: var(--k1); }
.thong-bao { margin-top: var(--k1); padding: var(--k1) var(--k2); 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); }
.nut-quet { margin-top: var(--k2); }
.nut-quet .nut { font-size: var(--chu-thuong); }
.nhap-tay { margin-top: var(--k2); }
.nhap-tay .nut.nho { min-height: var(--o-cao); }
.nhap-tay .o.ma::placeholder { text-transform: none; font-size: var(--chu-thuong); font-weight: var(--dam-thuong); }
.che-do { margin-top: var(--k2); }
.che-do .nut { flex: 1 1 0; font-size: var(--chu-thuong); padding: 0 var(--k1); }
.che-do .nut.dang-bat { outline: var(--vien-day) solid var(--mau-nhan); outline-offset: var(--vien-day); }

.danh-sach .hang { cursor: pointer; }
.danh-sach .hang .bt { color: var(--chu-phu); transform: rotate(90deg); }  /* mũi tên "mở" ở mép phải */
.danh-sach .hang.khoa { cursor: default; }
.trong { padding: var(--k2) 0; }
.hang .vien { margin-top: var(--k1); }
.hang .cau-loi { color: var(--loi-chu-nen); font-weight: var(--dam-vua); margin-top: var(--k1); }
.hang .that { color: var(--cho); font-weight: var(--dam-vua); }

/* đáy luôn dính: khu trạng thái gửi + nú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);
}
.khu-trang-thai { margin-bottom: var(--k1); display: flex; flex-direction: column; gap: var(--k1); }
.khu-trang-thai .cau { font-weight: var(--dam-vua); }
.khu-trang-thai .cau.loi { color: var(--loi-chu-nen); }
.khu-trang-thai .cau.xong { color: var(--xong); }
.khu-trang-thai .cau.cho { color: var(--cho); }

/* bảng trượt: các khối bên trong */
.the-thung .trang-thai { margin: var(--k1) 0 var(--k2); }
.o-loi-ngay { color: var(--loi); font-weight: var(--dam-vua); min-height: var(--k3); }
.loai-phieu { display: flex; gap: var(--k2); }
.loai-phieu .nut { flex: 1 1 0; }
.loai-phieu .nut.dang-bat { outline: var(--vien-day) solid var(--mau-nhan); outline-offset: var(--vien-day); }
.danh-muc .hang { cursor: pointer; }

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