/*
 * Trang "Kiểm tra đơn hàng".
 *
 * Dùng lại biến màu của theme viostore (--brand, --line, --fg…) và có giá trị
 * dự phòng cho từng biến, để plugin vẫn nhìn được nếu ai đó đổi theme.
 *
 * Viết theo hướng ĐIỆN THOẠI TRƯỚC: khách tra đơn gần như luôn đang cầm điện
 * thoại, vừa đọc tin nhắn xác nhận đơn vừa gõ.
 */

.vio-ktdh {
  --k-fg: var(--fg, #0E1116);
  --k-fg-2: var(--fg-2, #4B5563);
  --k-fg-3: var(--fg-3, #646E7E);
  --k-line: var(--line, #E7E9EE);
  --k-line-2: var(--line-2, #F1F3F6);
  --k-card: var(--card, #fff);
  --k-bg: var(--bg, #F4F5F7);
  --k-brand: var(--brand, #FFD400);
  --k-brand-ink: var(--brand-ink, #0E1116);
  --k-gia: var(--price-text, #C2151F);
  --k-ok: var(--ok, #0E9F6E);
  --k-info: var(--info, #1C64F2);
  --k-r: var(--r, 12px);
  --k-r-sm: var(--r-sm, 8px);

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

/* Chữ chỉ dành cho trình đọc màn hình. Plugin tự khai lớp này thay vì mượn
   `.sr` của theme — đổi theme thì khối kết quả không được vỡ ra giữa trang. */
.vio-ktdh-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

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

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

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

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

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

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

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

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

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

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

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

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

/* ── reCAPTCHA v3 ────────────────────────────────────── */

/* Ẩn huy hiệu góc màn hình của Google: góc phải dưới viostore.vn đã có hai bong
   bóng chat, thêm huy hiệu nữa là chồng lên nhau. Điều khoản reCAPTCHA cho phép
   ẩn VỚI ĐIỀU KIỆN in dòng ghi công — `.vio-ktdh-recaptcha-note` bên dưới chính
   là dòng đó. Xoá dòng chữ mà vẫn ẩn huy hiệu là vi phạm điều khoản. */
.grecaptcha-badge { visibility: hidden; }

.vio-ktdh-recaptcha-note {
  margin: -4px 0 0;
  color: var(--k-fg-3);
  font-size: 11.5px;
  line-height: 1.5;
}

.vio-ktdh-recaptcha-note a {
  color: inherit;
  text-decoration: underline;
}

.vio-ktdh-recaptcha-note a:hover { color: var(--k-fg); }

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

.vio-ktdh-bao {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: var(--k-r);
  font-size: 14px;
  line-height: 1.55;
}

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

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

.vio-ktdh-bao-truot {
  background: #FFF6E5;
  border: 1px solid #F5D9A0;
  color: #7A4B00;
}

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

/* Theme có thanh dính trên đầu, nên khi JS kéo màn hình xuống chỗ kết quả thì
   dòng "Đơn hàng #…" chui xuống dưới thanh đó. Chừa sẵn khoảng trống.
   Đo 2026-09-21 trên bản thử: máy tính dính 72px (chỉ header), điện thoại dính
   120px (header 68 + thanh danh mục 52). */
.vio-ktdh-ket-qua { scroll-margin-top: 88px; }

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

/* ── Một đơn hàng ────────────────────────────────────── */

.vio-ktdh-don {
  margin-top: 14px;
  background: var(--k-card);
  border: 1px solid var(--k-line);
  border-radius: var(--k-r);
  overflow: hidden;
}

.vio-ktdh-dau {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--k-line-2);
}

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

.vio-ktdh-ngay {
  margin: 2px 0 0;
  color: var(--k-fg-3);
  font-size: 12.5px;
}

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

.vio-ktdh-huy-hieu-cho  { background: #FFF6E5; color: #7A4B00; }
.vio-ktdh-huy-hieu-chay { background: #E8F0FE; color: #14449C; }
.vio-ktdh-huy-hieu-xong { background: #E6F6EF; color: #08674A; }
.vio-ktdh-huy-hieu-dung { background: #FDEAEA; color: #8C1111; }

/* ── Thanh ba bước ───────────────────────────────────── */

.vio-ktdh-buoc {
  display: flex;
  margin: 0;
  padding: 16px 16px 4px;
  list-style: none;
}

.vio-ktdh-buoc > li {
  position: relative;
  flex: 1;
  padding-top: 22px;
  text-align: center;
  font-size: 12.5px;
  color: var(--k-fg-3);
}

/* Đường nối giữa hai chấm. Vẽ bằng ::before của chính mục, kéo sang trái nửa ô
   mỗi bên, nên số bước đổi bao nhiêu cũng không phải sửa CSS. */
.vio-ktdh-buoc > li::before {
  content: "";
  position: absolute;
  top: 6px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: var(--k-line);
}

.vio-ktdh-buoc > li:first-child::before { display: none; }

.vio-ktdh-buoc-qua::before,
.vio-ktdh-buoc-nay::before { background: var(--k-ok) !important; }

.vio-ktdh-cham {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--k-line);
}

.vio-ktdh-buoc-qua .vio-ktdh-cham {
  background: var(--k-ok);
  border-color: var(--k-ok);
}

.vio-ktdh-buoc-nay .vio-ktdh-cham {
  background: #fff;
  border-color: var(--k-ok);
  box-shadow: 0 0 0 4px rgba(14, 159, 110, .18);
}

.vio-ktdh-buoc-qua,
.vio-ktdh-buoc-nay { color: var(--k-fg); }

.vio-ktdh-buoc-nay { font-weight: 700; }

.vio-ktdh-dung {
  margin: 0;
  padding: 14px 16px 4px;
  color: var(--k-fg-2);
  font-size: 13.5px;
}

/* ── Nút mở chi tiết ─────────────────────────────────── */

.vio-ktdh-mo {
  display: flex;
  gap: 6px;
  align-items: center;
  width: 100%;
  padding: 12px 16px;
  color: var(--k-fg-2);
  font-size: 13.5px;
  font-weight: 700;
}

.vio-ktdh-mo:focus-visible {
  outline: 2px solid var(--k-info);
  outline-offset: -2px;
}

.vio-ktdh-mo-ico { transition: transform .15s ease; }

.vio-ktdh-mo[aria-expanded="true"] .vio-ktdh-mo-ico { transform: rotate(180deg); }

.vio-ktdh-ct[hidden] { display: none; }

/* ── Khối trong phần chi tiết ────────────────────────── */

.vio-ktdh-khoi {
  padding: 14px 16px;
  border-top: 1px solid var(--k-line-2);
}

.vio-ktdh-khoi-ten {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--k-fg-3);
}

.vio-ktdh-bang { margin: 0; }

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

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

.vio-ktdh-dong dd {
  margin: 0;
  text-align: right;
  overflow-wrap: anywhere;
}

.vio-ktdh-bang-tien .vio-ktdh-dong:last-child,
.vio-ktdh-bang-tien .vio-ktdh-dong:nth-last-child(2) { font-weight: 700; }

.vio-ktdh-tra {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
}

.vio-ktdh-tra-roi  { background: #E6F6EF; color: #08674A; }
.vio-ktdh-tra-chua { background: #FFF6E5; color: #7A4B00; }

.vio-ktdh-tra-ngay { color: var(--k-fg-3); font-size: 12.5px; }

/* ── Danh sách sản phẩm ──────────────────────────────── */

.vio-ktdh-mon { margin: 0; padding: 0; list-style: none; }

.vio-ktdh-mot-mon {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--k-line-2);
}

.vio-ktdh-mot-mon:last-child { border-bottom: 0; padding-bottom: 0; }

.vio-ktdh-mon-link { flex: none; }

.vio-ktdh-mon-anh {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: var(--k-r-sm);
  background: var(--k-bg);
}

.vio-ktdh-mon-chu { flex: 1; min-width: 0; }

.vio-ktdh-mon-ten {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

a.vio-ktdh-mon-ten:hover { text-decoration: underline; }

.vio-ktdh-mon-sl {
  display: block;
  margin-top: 2px;
  color: var(--k-fg-3);
  font-size: 12.5px;
}

.vio-ktdh-mon-gia {
  flex: none;
  color: var(--k-gia);
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

/* ── Lịch sử xử lý ───────────────────────────────────── */

.vio-ktdh-lich-su { margin: 0; padding: 0; list-style: none; }

.vio-ktdh-lich-su > li {
  display: flex;
  gap: 12px;
  padding: 6px 0;
  font-size: 13.5px;
  line-height: 1.55;
}

.vio-ktdh-luc {
  flex: none;
  color: var(--k-fg-3);
  font-size: 12.5px;
  padding-top: 1px;
}

/* ── Ghi chú che thông tin + liên hệ ─────────────────── */

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

.vio-ktdh-link { color: var(--k-info); font-weight: 700; }
.vio-ktdh-link:hover { text-decoration: underline; }

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

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

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

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

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

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

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

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

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

  /* Nhãn và giá trị xuống hai dòng — nhưng CHỈ ở bảng thông tin nhận hàng, nơi
     giá trị là địa chỉ hoặc tên dài, để một dòng thì bị bóp còn ba chữ rồi
     xuống dòng loạn xạ. Bảng tiền giữ nguyên hai cột: con số ngắn, mà nhãn với
     số tiền tách ra hai dòng thì đọc mãi không ghép lại được. */
  .vio-ktdh-bang:not(.vio-ktdh-bang-tien) .vio-ktdh-dong { flex-direction: column; gap: 2px; }
  .vio-ktdh-bang:not(.vio-ktdh-bang-tien) .vio-ktdh-dong dd { text-align: left; }

  .vio-ktdh-mon-anh { width: 48px; height: 48px; }

  /* Giá xuống hàng riêng: ở khổ 375px, cột giá không co được (white-space:
     nowrap) nên nó bóp tên máy còn hai chữ một dòng. */
  .vio-ktdh-mot-mon { flex-wrap: wrap; }
  .vio-ktdh-mon-chu { flex: 1 1 60%; }
  .vio-ktdh-mon-gia { flex: 1 0 100%; text-align: right; margin-top: 2px; }

  .vio-ktdh-buoc > li { font-size: 11.5px; }
}