/* SOLIQ-SX — giao diện xưởng: nút to, tương phản cao, đọc được dưới đèn xưởng */
:root {
  --nen:        #0f1720;
  --nen-2:      #172230;
  --nen-3:      #1f2d3d;
  --vien:       #2c3e52;
  --chu:        #eef4fa;
  --chu-mo:     #93a6bb;
  --xanh:       #1e88e5;
  --xanh-dam:   #1565c0;
  --luc:        #16a34a;
  --luc-dam:    #12813a;
  --cam:        #ea8600;
  --do:         #dc2626;
  --vang:       #eab308;
  --r:          14px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* Thuộc tính hidden phải thắng mọi display của class (vd .anh-thieu dùng flex) */
[hidden] { display: none !important; }

html, body {
  margin: 0; padding: 0; min-height: 100%;
  background: var(--nen); color: var(--chu);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-size: 17px; line-height: 1.45;
  overscroll-behavior-y: contain;
}

.man-hinh { display: none; padding: 16px; max-width: 760px; margin: 0 auto; }
.man-hinh.hien { display: block; }

/* ── Đầu trang ─────────────────────────────────────────────── */
.dau-trang {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; background: var(--nen-2);
  border-bottom: 1px solid var(--vien);
  position: sticky; top: 0; z-index: 10;
}
.dau-trang img { height: 34px; width: auto; border-radius: 6px; }
.dau-trang .ten { font-weight: 700; letter-spacing: .3px; }
.dau-trang .phai { margin-left: auto; text-align: right; font-size: 14px; line-height: 1.25; }
.dau-trang .phai b { display: block; }
.dau-trang .phai span { color: var(--chu-mo); }

/* ── Thẻ ───────────────────────────────────────────────────── */
.the {
  background: var(--nen-2); border: 1px solid var(--vien);
  border-radius: var(--r); padding: 18px; margin-bottom: 14px;
}
h1 { font-size: 22px; margin: 0 0 4px; }
h2 { font-size: 18px; margin: 0 0 14px; }
.phu { color: var(--chu-mo); font-size: 15px; margin: 0 0 18px; }

/* ── Nhập liệu ─────────────────────────────────────────────── */
label { display: block; font-size: 14px; color: var(--chu-mo); margin: 0 0 6px; }
input[type=text], input[type=password], input[type=tel], textarea {
  width: 100%; padding: 15px 16px; font-size: 19px;
  background: var(--nen-3); color: var(--chu);
  border: 1px solid var(--vien); border-radius: 10px;
  font-family: inherit;
}
input:focus, textarea:focus { outline: 2px solid var(--xanh); border-color: var(--xanh); }
.o-nhap { margin-bottom: 14px; }

/* ── Nút ───────────────────────────────────────────────────── */
button {
  font-family: inherit; font-size: 18px; font-weight: 600;
  padding: 16px 20px; border-radius: 12px; border: none;
  background: var(--nen-3); color: var(--chu);
  cursor: pointer; width: 100%; transition: filter .12s, transform .06s;
}
button:active { transform: scale(.985); }
button:disabled { opacity: .45; cursor: not-allowed; }
button:not(:disabled):hover { filter: brightness(1.12); }
.nut-xanh { background: var(--xanh); }
.nut-luc  { background: var(--luc); }
.nut-cam  { background: var(--cam); color: #16130a; }
.nut-do   { background: var(--do); }
.nut-vien { background: transparent; border: 1px solid var(--vien); color: var(--chu-mo); font-size: 16px; }
.hang { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.hang-1 { display: grid; gap: 10px; }

/* ── Chọn tổ ───────────────────────────────────────────────── */
.luoi-to { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.luoi-to button { padding: 22px 14px; font-size: 19px; background: var(--nen-3); border: 1px solid var(--vien); }
.luoi-to button .ma { display: block; font-size: 13px; color: var(--chu-mo); font-weight: 500; margin-top: 4px; }
.luoi-to button.chon { background: var(--xanh-dam); border-color: var(--xanh); }

/* ── Máy quét ──────────────────────────────────────────────── */
#khungQuet {
  position: relative; width: 100%; aspect-ratio: 4/3;
  background: #000; border-radius: var(--r); overflow: hidden;
  margin-bottom: 14px; display: none;
}
#khungQuet.hien { display: block; }
#video { width: 100%; height: 100%; object-fit: cover; }
.o-ngam {
  position: absolute; inset: 18% 22%; border: 3px solid rgba(255,255,255,.85);
  border-radius: 12px; box-shadow: 0 0 0 100vmax rgba(0,0,0,.42);
}

/* ── Màn hình làm việc ─────────────────────────────────────── */
.anh-lsx {
  width: 100%; background: #fff; border-radius: var(--r);
  border: 1px solid var(--vien); display: block;
  min-height: 200px; object-fit: contain; max-height: 62vh;
}
.anh-thieu {
  display: flex; align-items: center; justify-content: center;
  min-height: 200px; background: var(--nen-3); border-radius: var(--r);
  color: var(--chu-mo); text-align: center; padding: 24px;
}
.ma-lsx { font-size: 26px; font-weight: 800; letter-spacing: .5px; }
.thong-tin { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin: 14px 0; }
.thong-tin div { background: var(--nen-3); border-radius: 10px; padding: 10px 12px; }
.thong-tin span { display: block; font-size: 13px; color: var(--chu-mo); }
.thong-tin b { font-size: 18px; }

.dong-ho {
  text-align: center; font-variant-numeric: tabular-nums;
  font-size: 40px; font-weight: 800; padding: 12px 0; letter-spacing: 1px;
}
.dong-ho.chay { color: var(--luc); }
.dong-ho.dung { color: var(--chu-mo); }

/* ── Nhãn trạng thái ───────────────────────────────────────── */
.nhan {
  display: inline-block; padding: 5px 12px; border-radius: 999px;
  font-size: 14px; font-weight: 700;
}
.nhan.cho     { background: #334155; }
.nhan.dang    { background: var(--luc-dam); }
.nhan.dung    { background: var(--cam); color: #16130a; }
.nhan.loi     { background: var(--do); }
.nhan.xong    { background: var(--xanh-dam); }
.the-mau { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; margin-right: 6px; }

/* ── Thông báo ─────────────────────────────────────────────── */
#thongBao {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 22px; z-index: 50; max-width: 92vw;
  padding: 14px 20px; border-radius: 12px; font-weight: 600;
  background: var(--nen-3); border: 1px solid var(--vien);
  box-shadow: 0 10px 34px rgba(0,0,0,.5);
  opacity: 0; pointer-events: none; transition: opacity .18s;
}
#thongBao.hien { opacity: 1; }
#thongBao.loi  { background: var(--do); border-color: var(--do); }
#thongBao.tot  { background: var(--luc-dam); border-color: var(--luc); }

.canh-bao {
  background: #3a2a10; border: 1px solid var(--cam); color: #ffd79a;
  border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; font-size: 15px;
}

@media (max-width: 420px) {
  .hang { grid-template-columns: 1fr; }
  .dong-ho { font-size: 34px; }
}