/* x-bao-mat/tinh/bao-mat.css — hình hài của màn đăng nhập và khối Cài đặt bảo mật.
   LÀM GÌ: tô màu + xếp chỗ cho 2 thứ mà bao-mat.js dựng ra.
   GỒM PHẦN NÀO: (1) biến màu · (2) thẻ & nút & ô nhập · (3) bàn vẽ 9 điểm ·
     (4) khối cài đặt · (5) hộp thoại · (6) màn đăng nhập.
   QUAN HỆ: MỌI màu đều đọc biến của app chủ trước (--surface, --accent…), chỉ khi
     app chưa khai mới rơi về giá trị dự phòng — nên cắm vào dự án nào cũng ăn theo
     đúng tông của dự án đó, không tự vẽ một bộ màu lạc lõng.
   Ràng buộc Hệ Thiết Kế X: không emoji (biểu tượng là SVG nét), chữ nhỏ nhất 13px,
     mọi đích chạm >= 44px, bấm thì NỔI LÊN chứ không lún xuống. */

.xbm{
  --xbm-nen:var(--surface,#fff);
  --xbm-nen2:var(--surface-2,#F4F5F6);
  --xbm-chu:var(--text-1,#111418);
  --xbm-chu2:var(--text-2,#5B6672);
  --xbm-vien:var(--line,#E2E6EA);
  --xbm-nhan:var(--accent,#0B6B7A);
  --xbm-tren-nhan:var(--on-accent,#fff);
  --xbm-do:var(--error,#C0362C);
  --xbm-xanh:var(--success,#12805C);
  --xbm-r:var(--r-md,14px);
  --xbm-cham-toi:var(--tap,44px);
  font-family:var(--font-sans,-apple-system,"Segoe UI",Roboto,Arial,sans-serif);
  color:var(--xbm-chu);
}

/* ---------- 2. Mảnh dùng chung ---------- */
.xbm-the{background:var(--xbm-nen);border:1px solid var(--xbm-vien);border-radius:var(--xbm-r);padding:16px}
.xbm-tieu{font-size:17px;font-weight:650;margin:0 0 4px}
.xbm-phu{font-size:13px;color:var(--xbm-chu2);margin:0 0 12px;line-height:1.5}
.xbm-o{
  width:100%;min-height:var(--xbm-cham-toi);box-sizing:border-box;
  padding:11px 13px;font-size:16px;font-family:inherit;color:var(--xbm-chu);
  background:var(--xbm-nen);border:1px solid var(--xbm-vien);border-radius:10px;
}
.xbm-o:focus{outline:2px solid var(--xbm-nhan);outline-offset:1px;border-color:var(--xbm-nhan)}
.xbm-o+.xbm-o{margin-top:8px}
.xbm-nut{
  min-height:var(--xbm-cham-toi);padding:11px 18px;font-size:15px;font-weight:600;
  font-family:inherit;color:var(--xbm-tren-nhan);background:var(--xbm-nhan);
  border:1px solid transparent;border-radius:10px;cursor:pointer;
  transition:transform var(--dur,160ms) var(--ease-lift,cubic-bezier(.2,.8,.2,1)),box-shadow var(--dur,160ms);
}
.xbm-nut:hover:not(:disabled){transform:translateY(-1px);box-shadow:var(--shadow-2,0 2px 4px rgba(16,24,32,.07),0 8px 18px rgba(16,24,32,.08))}
.xbm-nut:disabled{opacity:.55;cursor:default}
.xbm-nut.phu{background:transparent;color:var(--xbm-chu);border-color:var(--xbm-vien)}
.xbm-nut.nguy{background:transparent;color:var(--xbm-do);border-color:var(--xbm-do)}
.xbm-hang-nut{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.xbm-loi{color:var(--xbm-do);font-size:13px;margin-top:10px;min-height:1em;line-height:1.5}
.xbm-ok{color:var(--xbm-xanh);font-size:13px;margin-top:10px;min-height:1em;line-height:1.5}
.xbm-icon{width:24px;height:24px;flex:none;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 3. Bàn vẽ 9 điểm ---------- */
.xbm-ban{
  position:relative;width:232px;height:232px;max-width:74vw;max-height:74vw;
  margin:8px auto 4px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);
  place-items:center;touch-action:none;user-select:none;-webkit-user-select:none;
}
.xbm-net{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.xbm-cham{
  width:22px;height:22px;border-radius:50%;pointer-events:none;
  background:color-mix(in srgb,var(--xbm-nhan) 12%,transparent);
  border:2px solid var(--xbm-vien);
  transition:transform .1s,background .1s,border-color .1s;
}
.xbm-cham.an{background:var(--xbm-nhan);border-color:var(--xbm-nhan);transform:scale(1.3)}
.xbm-ban.loi .xbm-cham.an{background:var(--xbm-do);border-color:var(--xbm-do)}

/* ---------- 4. Khối Cài đặt bảo mật ---------- */
.xbm-cai{display:grid;gap:12px}
.xbm-muc{
  display:flex;gap:13px;align-items:flex-start;
  background:var(--xbm-nen);border:1px solid var(--xbm-vien);border-radius:var(--xbm-r);padding:14px 16px;
}
.xbm-muc-than{flex:1;min-width:0}
.xbm-muc-ten{font-size:15px;font-weight:600;margin:0 0 3px}
.xbm-muc-mo{font-size:13px;color:var(--xbm-chu2);margin:0;line-height:1.5}
.xbm-co{
  display:inline-flex;align-items:center;gap:5px;margin-top:7px;
  font-size:13px;font-weight:600;padding:3px 9px;border-radius:999px;border:1px solid;
}
.xbm-co.bat{color:var(--xbm-xanh);border-color:color-mix(in srgb,var(--xbm-xanh) 40%,transparent);background:color-mix(in srgb,var(--xbm-xanh) 9%,transparent)}
.xbm-co.tat{color:var(--xbm-chu2);border-color:var(--xbm-vien);background:var(--xbm-nen2)}
.xbm-co.canh{color:var(--xbm-do);border-color:color-mix(in srgb,var(--xbm-do) 40%,transparent);background:color-mix(in srgb,var(--xbm-do) 9%,transparent)}

/* ---------- 5. Hộp thoại ---------- */
.xbm-nen-mo{
  position:fixed;inset:0;z-index:9000;display:none;
  align-items:center;justify-content:center;padding:16px;
  background:rgba(16,24,32,.44);
}
.xbm-nen-mo.mo{display:flex}
.xbm-hop{
  width:100%;max-width:400px;max-height:88vh;overflow:auto;
  background:var(--xbm-nen);border-radius:var(--xbm-r);padding:20px;
  box-shadow:var(--shadow-3,0 6px 12px rgba(16,24,32,.10),0 18px 40px rgba(16,24,32,.14));
}
.xbm-qr{display:flex;justify-content:center;margin:12px 0}
.xbm-qr svg{width:196px;height:196px;background:#fff;padding:8px;border-radius:10px}
.xbm-ma-tay{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;
  word-break:break-all;background:var(--xbm-nen2);border:1px solid var(--xbm-vien);
  border-radius:8px;padding:9px 11px;text-align:center;letter-spacing:.4px;
}

/* ---------- 6. Màn đăng nhập ---------- */
.xbm-man{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:20px;background:var(--bg-page,#F4F5F6)}
.xbm-man .xbm-the{width:100%;max-width:372px;box-shadow:var(--shadow-2,0 2px 4px rgba(16,24,32,.07),0 8px 18px rgba(16,24,32,.08))}
.xbm-tab{display:flex;gap:6px;margin-bottom:14px;background:var(--xbm-nen2);padding:4px;border-radius:11px}
.xbm-tab button{
  flex:1;min-height:38px;font-size:14px;font-weight:600;font-family:inherit;
  color:var(--xbm-chu2);background:transparent;border:0;border-radius:8px;cursor:pointer;
}
.xbm-tab button.dang{background:var(--xbm-nen);color:var(--xbm-chu);box-shadow:var(--shadow-1,0 1px 2px rgba(16,24,32,.06))}
.xbm-ghi{font-size:13px;color:var(--xbm-chu2);line-height:1.55;margin:12px 0 0}

@media (max-width:420px){
  .xbm-muc{padding:13px 14px}
  .xbm-hop{padding:17px}
}