/*
 * Trang "Kiểm tra bảo hành".
 *
 * Dùng lại biến màu của theme viostore (--brand, --line, --fg…) kèm giá trị dự
 * phòng, để đổi theme vẫn nhìn được. Viết ĐIỆN THOẠI TRƯỚC: khách tra bảo hành
 * gần như luôn đang cầm chính cái máy cần tra.
 */

.vio-bh {
  --b-fg: var(--fg, #0E1116);
  --b-fg-2: var(--fg-2, #4B5563);
  --b-fg-3: var(--fg-3, #646E7E);
  --b-line: var(--line, #E7E9EE);
  --b-line-2: var(--line-2, #F1F3F6);
  --b-card: var(--card, #fff);
  --b-bg: var(--bg, #F4F5F7);
  --b-brand: var(--brand, #FFD400);
  --b-brand-ink: var(--brand-ink, #0E1116);
  --b-info: var(--info, #1C64F2);
  --b-r: var(--r, 12px);
  --b-r-sm: var(--r-sm, 8px);

  /* Ba màu tình trạng — chữ đậm trên nền nhạt, đều đạt tương phản AA. */
  --b-con: #08674A;      --b-con-nen: #E6F6EF;      --b-con-thanh: #0E9F6E;
  --b-sap: #7A4B00;      --b-sap-nen: #FFF6E5;      --b-sap-thanh: #E3A008;
  --b-het: #8C1111;      --b-het-nen: #FDEAEA;      --b-het-thanh: #E02424;

  max-width: 640px;
  margin: 0 auto;
  color: var(--b-fg);
  font-family: var(--font, inherit);
}

.vio-bh-tieu-de {
  margin: 0 0 6px;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -.02em;
}

.vio-bh-mo-ta {
  margin: 0 0 18px;
  color: var(--b-fg-2);
  font-size: 14px;
}

/* ── Form ────────────────────────────────────────────── */

.vio-bh-form {
  background: var(--b-card);
  border: 1px solid var(--b-line);
  border-radius: var(--b-r);
  padding: 16px;
  display: grid;
  gap: 14px;
}

.vio-bh-nhan {
  display: block;
  margin-bottom: 6px;
  font-size: 13.5px;
  font-weight: 700;
}

.vio-bh-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--b-line);
  border-radius: var(--b-r-sm);
  background: #fff;
  color: var(--b-fg);
  font-size: 16px;   /* ≥16px: iOS tự phóng to trang khi ô nhập nhỏ hơn */
  line-height: 1.4;
}

#vio-bh-imei { letter-spacing: .04em; font-variant-numeric: tabular-nums; }

.vio-bh-input:focus-visible {
  outline: 2px solid var(--b-info);
  outline-offset: 1px;
  border-color: transparent;
}

.vio-bh-goi-y {
  margin: 8px 0 0;
  color: var(--b-fg-3);
  font-size: 12.5px;
  line-height: 1.5;
}

.vio-bh-goi-y strong { color: var(--b-fg-2); }

.vio-bh-nut {
  padding: 13px 18px;
  border-radius: var(--b-r-sm);
  background: var(--b-brand);
  color: var(--b-brand-ink);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .01em;
}

.vio-bh-nut:hover { filter: brightness(.96); }

.vio-bh-nut:focus-visible {
  outline: 2px solid var(--b-fg);
  outline-offset: 2px;
}

.vio-bh-nut[disabled] { opacity: .65; cursor: progress; }

/* ── Báo lỗi / không tìm thấy ────────────────────────── */

.vio-bh-bao {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: var(--b-r);
  background: var(--b-sap-nen);
  border: 1px solid #F5D9A0;
  color: var(--b-sap);
  font-size: 14px;
  line-height: 1.55;
}

.vio-bh-bao p { margin: 0; }

.vio-bh-bao-ico { flex: none; margin-top: 1px; }

.vio-bh-tom-tat {
  margin: 20px 0 10px;
  font-size: 14px;
  font-weight: 700;
}

/* Header + catbar dính che mất đầu kết quả khi JS kéo xuống — chừa sẵn khoảng.
   Số đo lấy từ plugin Kiểm tra đơn hàng: máy tính dính 72px, điện thoại 120px. */
.vio-bh-ket-qua { scroll-margin-top: 88px; }

@media (max-width: 860px) {
  .vio-bh-ket-qua { scroll-margin-top: 132px; }
}

/* ── Thẻ phiếu ───────────────────────────────────────── */

.vio-bh-phieu {
  margin-top: 14px;
  background: var(--b-card);
  border: 1px solid var(--b-line);
  border-top: 4px solid var(--b-con-thanh);
  border-radius: var(--b-r);
  overflow: hidden;
}

.vio-bh-phieu-sap-het { border-top-color: var(--b-sap-thanh); }
.vio-bh-phieu-het     { border-top-color: var(--b-het-thanh); }

.vio-bh-dau {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 14px 16px 10px;
}

.vio-bh-dau-trai { min-width: 0; }

.vio-bh-may {
  margin: 0;
  font-size: 17px;
  line-height: 1.3;
}

.vio-bh-imei {
  margin: 3px 0 0;
  color: var(--b-fg-3);
  font-size: 12.5px;
}

.vio-bh-imei span {
  color: var(--b-fg-2);
  font-variant-numeric: tabular-nums;
  letter-spacing: .03em;
  overflow-wrap: anywhere;
}

.vio-bh-huy-hieu {
  flex: none;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}

.vio-bh-huy-hieu-con     { background: var(--b-con-nen); color: var(--b-con); }
.vio-bh-huy-hieu-sap-het { background: var(--b-sap-nen); color: var(--b-sap); }
.vio-bh-huy-hieu-het     { background: var(--b-het-nen); color: var(--b-het); }

/* ── Đếm ngày + thanh thời gian ─────────────────────── */

.vio-bh-dem { padding: 4px 16px 14px; }

.vio-bh-dem-chu {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--b-fg-2);
}

.vio-bh-dem-so {
  font-size: 34px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--b-con);
}

.vio-bh-phieu-sap-het .vio-bh-dem-so { color: var(--b-sap); }
.vio-bh-phieu-het .vio-bh-dem-so     { color: var(--b-het); }

.vio-bh-thanh {
  height: 8px;
  border-radius: 999px;
  background: var(--b-line-2);
  overflow: hidden;
}

.vio-bh-thanh > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--b-con-thanh);
}

.vio-bh-phieu-sap-het .vio-bh-thanh > i { background: var(--b-sap-thanh); }
.vio-bh-phieu-het .vio-bh-thanh > i     { background: var(--b-het-thanh); }

.vio-bh-moc {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  color: var(--b-fg-3);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* ── Bảng thông tin ──────────────────────────────────── */

.vio-bh-bang {
  margin: 0;
  padding: 10px 16px;
  border-top: 1px solid var(--b-line-2);
}

.vio-bh-dong {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 5px 0;
  font-size: 14px;
}

.vio-bh-dong dt {
  flex: none;
  color: var(--b-fg-3);
}

.vio-bh-dong dd {
  margin: 0;
  text-align: right;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.vio-bh-ghi-chu {
  margin: 0;
  padding: 12px 16px;
  border-top: 1px solid var(--b-line-2);
  background: var(--b-bg);
  color: var(--b-fg-2);
  font-size: 13px;
  line-height: 1.55;
}

.vio-bh-link { color: var(--b-info); font-weight: 700; white-space: nowrap; }
.vio-bh-link:hover { text-decoration: underline; }

/* ── Liên hệ ─────────────────────────────────────────── */

.vio-bh-lien-he {
  margin-top: 22px;
  padding: 16px;
  border: 1px dashed var(--b-line);
  border-radius: var(--b-r);
  text-align: center;
}

.vio-bh-lien-he-chu {
  margin: 0 0 10px;
  color: var(--b-fg-2);
  font-size: 13.5px;
}

.vio-bh-lien-he-nut {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.vio-bh-nut-phu {
  padding: 10px 16px;
  border: 1px solid var(--b-line);
  border-radius: 999px;
  background: #fff;
  font-size: 13.5px;
  font-weight: 700;
}

.vio-bh-nut-phu:hover { border-color: var(--b-fg-3); }

/* ── Khổ hẹp ─────────────────────────────────────────── */

@media (max-width: 560px) {
  .vio-bh-tieu-de { font-size: 21px; }

  .vio-bh-dau { flex-direction: column; gap: 8px; }

  .vio-bh-huy-hieu { align-self: flex-start; }

  .vio-bh-dem-so { font-size: 30px; }
}