/* ─── Hộp thoại dùng chung (Utils.confirm / Utils.ask / Utils.alert) ────────
   Thay cho confirm()/prompt()/alert() của trình duyệt. Nạp ở CẢ index.html và
   admin.html — hai trang có bộ biến màu khác nhau (mobile: --primary, PC: --accent)
   nên mọi màu đều có dự phòng. Nổi trên modal (1000) nhưng dưới toast (2000). */
.hvd-overlay {
  --hvd-primary: var(--primary, var(--accent, #006db7));
  --hvd-danger:  var(--danger, #dc2626);
  --hvd-success: var(--success, #38a169);
  position: fixed; inset: 0; z-index: 1500;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(15, 23, 42, .55);
  opacity: 0; transition: opacity .15s;
}
.hvd-overlay.open { opacity: 1; }

.hvd {
  width: 100%; max-width: 380px; max-height: calc(100dvh - 32px);
  overflow-y: auto;
  background: var(--surface, #fff); color: var(--text, #1a202c);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
  padding: 20px 18px 16px;
  transform: scale(.94); transition: transform .15s;
}
.hvd-overlay.open .hvd { transform: scale(1); }

.hvd-icon {
  width: 48px; height: 48px; margin: 0 auto 10px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 24px;
  background: color-mix(in srgb, var(--hvd-primary) 12%, transparent);
}
.hvd-danger  .hvd-icon { background: color-mix(in srgb, var(--hvd-danger) 12%, transparent); }
.hvd-success .hvd-icon { background: color-mix(in srgb, var(--hvd-success) 14%, transparent); }

.hvd-title { font-size: 17px; font-weight: 800; text-align: center; margin: 0 0 6px; line-height: 1.35; }
.hvd-body  { font-size: 14px; color: var(--text-2, #4a5568); text-align: center; line-height: 1.5; }
.hvd-body p { margin: 6px 0; }
.hvd-body strong { color: var(--text, #1a202c); }
.hvd-text { text-align: left; margin-top: 8px; overflow-wrap: anywhere; }

/* Dòng chuyển trạng thái: [Căng xong] → [Đã giao] — dùng .badge-<status> sẵn có */
.hvd-flow { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 12px 0 4px; }
.hvd-flow .badge { font-size: 14px; padding: 5px 12px; }
.hvd-flow-arrow { font-size: 18px; color: var(--text-3, #94a3b8); font-weight: 700; }

/* Ô ghi chú nhỏ (cảnh báo / thông tin phụ) */
.hvd-note {
  margin-top: 12px; padding: 9px 12px; border-radius: 10px;
  font-size: 13px; text-align: left; line-height: 1.45;
  background: var(--gray-100, #f7fafc); color: var(--text-2, #4a5568);
}
.hvd-note-warn   { background: #fffbeb; color: #92400e; }
.hvd-note-danger { background: #fef2f2; color: #991b1b; }

/* Bảng thông tin (vd: SĐT đăng nhập + mật khẩu mới) */
.hvd-kv { margin-top: 12px; border-radius: 10px; background: var(--gray-100, #f7fafc); padding: 4px 12px; text-align: left; }
.hvd-kv div { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; font-size: 14px; }
.hvd-kv div + div { border-top: 1px solid var(--border, #e2e8f0); }
.hvd-kv span { color: var(--text-3, #94a3b8); }
.hvd-kv b { font-size: 16px; letter-spacing: .5px; }

/* Ô nhập */
.hvd-field { display: block; margin-top: 12px; text-align: left; }
.hvd-label { display: block; font-size: 13px; font-weight: 600; color: var(--text-2, #4a5568); margin-bottom: 5px; }
.hvd-field input, .hvd-field textarea {
  width: 100%; box-sizing: border-box;
  font: inherit; font-size: 16px; /* 16px để iOS không tự phóng to trang khi chạm ô */
  padding: 10px 12px; border-radius: 10px;
  border: 1.5px solid var(--border, #e2e8f0); background: var(--surface, #fff); color: inherit;
}
.hvd-field textarea { min-height: 76px; resize: vertical; }
.hvd-field input:focus, .hvd-field textarea:focus { outline: none; border-color: var(--hvd-primary); }
.hvd-field.hvd-invalid input, .hvd-field.hvd-invalid textarea { border-color: var(--hvd-danger); }
.hvd-hint { display: block; font-size: 12px; color: var(--text-3, #94a3b8); margin-top: 4px; }

.hvd-check {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 12px;
  padding: 10px 12px; border-radius: 10px; background: var(--gray-100, #f7fafc);
  text-align: left; font-size: 14px; cursor: pointer;
}
.hvd-check input { width: 20px; height: 20px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--hvd-primary); }
.hvd-check .hvd-hint { margin-top: 2px; }

.hvd-err { margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--hvd-danger); text-align: center; }

/* Nút: to, dễ bấm bằng ngón cái */
.hvd-actions { display: flex; gap: 10px; margin-top: 18px; }
.hvd-btn {
  flex: 1; min-height: 46px; padding: 10px 14px;
  border: none; border-radius: 12px; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 700;
  -webkit-tap-highlight-color: transparent;
  transition: transform .1s, opacity .15s;
}
.hvd-btn:active { transform: scale(.97); opacity: .85; }
.hvd-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--hvd-primary) 40%, transparent); outline-offset: 2px; }
.hvd-cancel { background: var(--gray-200, #edf2f7); color: var(--text-2, #4a5568); }
.hvd-ok     { background: var(--hvd-primary); color: #fff; }
.hvd-danger  .hvd-ok { background: var(--hvd-danger); }
.hvd-success .hvd-ok { background: var(--hvd-success); }