/* ===============================
   Base UI
   =============================== */
:root{
  /* ❌ BỎ ZOOM */
}

body{
  font-family:system-ui,Arial;
  margin:0;
  background:#f6f7f8;
}

.wrap{max-width:980px;margin:0 auto;padding:16px}
.card{background:#fff;border-radius:12px;padding:16px;box-shadow:0 2px 12px rgba(0,0,0,.06)}
.row{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:900px){.row{grid-template-columns:1fr 1fr}}

video,canvas,img{width:100%;border-radius:10px;background:#111}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:0;border-radius:10px;padding:14px 14px;
  background:#006aeb;color:#fff;cursor:pointer
}
.btn.secondary{background:#e8eaed;color:#111}
.btn:disabled{opacity:.6;cursor:not-allowed}

.input{width:100%;padding:10px;border:1px solid #ddd;border-radius:10px}
.small{font-size:12px;color:#555}
.ok{color:#0a7}
.err{color:#c00}

/* Nút hàng gửi/trả */
.tpModeRow{display:flex;gap:10px;flex-wrap:wrap}

/* Sticky block camera */
.tpStickyCam{
  position:sticky;
  top:0;
  z-index:20;
  background:#fff;
  padding-top:8px;
}

/* Start button row */
.tpBtnRow{display:flex;gap:10px;flex-wrap:nowrap;margin-top:10px}
.tpBtnRowOne{justify-content:center}
.tpBtnRowOne #tpStart{width:100%;max-width:420px;text-align:center}

/* History list */
.tpHistoryList{
  margin:8px 0 0;
  padding:0;
  list-style:none;
  border:1px solid #eee;
  border-radius:10px;
  background:#fff;
  max-height:320px;
  overflow:auto;
}
.tpHistoryList li{
  padding:10px 12px;
  border-top:1px solid #f0f0f0;
  word-break:break-all;
  font-size:13px;
}
.tpHistoryList li:first-child{border-top:0}

/* ===============================
   Camera + Scan box
   =============================== */
.tpCamWrap{
  --qr-ui-ratio: 0.2;       /* JS có thể set, giữ nguyên */
  position:relative;
  width:100%;
  max-width:520px;
  margin:0 auto;
  border-radius:16px;
  overflow:hidden;
  background:#000;
  aspect-ratio:4 / 3;
  -webkit-tap-highlight-color:transparent;
}

#tpVideo{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center center;
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
}

.tpCamWrap,#tpVideo{touch-action:manipulation}

/* Overlay text */
.tpQrOverlay{
  position:absolute;
  left:12px;right:12px;bottom:10px;
  color:#fff;
  font-size:13px;
  line-height:1.35;
  text-shadow:0 1px 2px rgba(0,0,0,0.6);
  pointer-events:none;
}

/* AimBox (QR) */
.tpAimBox{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:calc(var(--qr-ui-ratio) * 100%);
  aspect-ratio:1 / 1;
  border:1px solid white;
  border-radius:3px;
  box-shadow:0 0 0 9999px rgba(0,0,0,.35);
  pointer-events:none;
}

/* ===============================
   ❌ ZOOM UI — ĐÃ TẮT HOÀN TOÀN
   =============================== */
.tpCamZoom{
  width:100%;
  display:flex;
  justify-content:center;
  border-radius:16px;
  /* overflow không cần khóa khi không zoom */
  overflow:visible;
}

/* QUAN TRỌNG: không scale, không translate */
.tpCamZoom .tpCamWrap{
  transform:none !important;
}

/* ===============================
   Today Gallery Grid
   =============================== */
.tpTodayGrid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:10px;
  margin-top:10px;
}
@media (max-width:720px){
  .tpTodayGrid{grid-template-columns:repeat(2, minmax(0, 1fr));}
}
.tpTodayItem{
  position:relative;
  border-radius:12px;
  overflow:hidden;
  background:rgba(0,0,0,.04);
  border:1px solid rgba(0,0,0,.08);
  cursor:pointer;
}
.tpTodayItem img{
  width:100%;
  height:140px;
  object-fit:cover;
  display:block;
}

/* ===============================
   Lightbox
   =============================== */
.tpLightbox{
  position:fixed;
  inset:0;
  z-index:99999;
  background:rgba(0,0,0,.72);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px;
}
.tpLightboxInner{
  width:min(980px, 96vw);
  max-height:92vh;
  background:#111;
  border-radius:14px;
  padding:12px;
  position:relative;
  overflow:auto;
}
.tpLightboxClose{
  position:sticky;
  top:0;
  z-index:2;
  margin-bottom:10px;
}
#tpLightboxImg{
  width:100%;
  height:auto;
  border-radius:10px;
  display:block;
  background:#000;
}
.tpLightboxMeta{
  margin-top:8px;
  color:rgba(255,255,255,.85);
  word-break:break-all;
}

/* ===============================
   Barcode overlay box (UI only)
   =============================== */
.tpBarBox{
  position:absolute;
  left:var(--bar-left);
  top:var(--bar-top);
  width:var(--bar-w);
  height:var(--bar-h);
  box-shadow:0 0 0 9999px rgba(0,0,0,.18);
  pointer-events:none;
}

/* Z-index layer */
.tpAimBox{ z-index:3; }
.tpBarBox{ z-index:2; }
#tpVideo{ position:relative; z-index:1; }

/* History item */
.tpHItem{
  display:flex;
  align-items:center;
  gap:10px;
}
.tpHThumbWrap{flex:0 0 auto}
.tpHThumb{
  width:44px;height:44px;
  border-radius:10px;
  object-fit:cover;
  background:#111;
  border:1px solid rgba(0,0,0,.08);
}
.tpHInfo{min-width:0}
.tpHInfo b{word-break:break-all}

/* Ẩn khung barcode UI nếu không cần */
.tpBarBox{
  display:none !important;
}

/* Row 2 nút: Đèn + Bật camera */
.tpBtnRow{
  display:flex;
  gap:10px;
  flex-wrap:nowrap;
  margin-top:10px;
}
.tpBtnRowTwo #tpTorch{
  flex:0 0 25%;
  padding-left:10px;
  padding-right:10px;
  white-space:nowrap;
}
.tpBtnRowTwo #tpStart{
  flex:1 1 75%;
}

/* Row trạng thái */
.tpActionRow{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}

.tpActionBtn{
  padding:10px 10px;
  border-radius:10px;
  font-size:13px;
  line-height:1;
}

.tpActionBtn.isActive{
  background:#006aeb;
  color:#fff;
}