/* ---- Nút demo mở popup ---- */
.demo-btn {
  background: #c0202e;
  color: #fff;
  border: none;
  padding: 12px 24px;
  font-size: 15px;
  border-radius: 4px;
  cursor: pointer;
}

/* ---- Lớp nền tối (overlay) ---- */
.otp-overlay {
  display: none;                 /* mặc định ẩn */
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1000;
  justify-content: center;
  align-items: flex-start;
  overflow-y: auto;
  padding: 40px 16px;
}
.otp-overlay.is-open {           /* class do JS bật/tắt */
  display: flex;
}

/* ---- Hộp popup ---- */
.otp-box {
  background: #fff;
  width: 100%;
  max-width: 640px;
  padding: 32px 48px 56px;
  position: relative;
  text-align: center;
  animation: otpFadeIn 0.2s ease-out;
}
@keyframes otpFadeIn {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Nút đóng (X) ---- */
.otp-close {
  position: absolute;
  top: 18px;
  right: 22px;
  background: none;
  border: none;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  color: #222;
}

/* ---- Khoá scroll nền khi popup mở ---- */
body.otp-open { overflow: hidden; }

/* ---- Responsive ---- */
@media (max-width: 600px) {
  .otp-box { padding: 28px 20px 40px; }
  .otp-input-row { flex-direction: column; gap: 8px; }
  .otp-input-row input { width: 100%; }
  .otp-actions { flex-direction: column; gap: 14px; }
}