/* Nhập mã xác nhận email (EMAIL-OTP-1, D-316; DAC-TA-WEB §7.11.7).
   Đứng trên khung đăng nhập/quên mật khẩu sẵn có (.panel.auth-wrap, public_magazine.css mục 10).
   Chỉ token; không bóng, không gradient, không khung mới. */

html body .panel.auth-wrap.auth-wrap .auth-lead {
  margin: 0 0 20px;
  color: var(--mz-ink);
  font-family: var(--mz-serif);
  font-size: 15.5px;
  font-weight: 400;
  line-height: 25px;
}

html body .panel.auth-wrap.auth-wrap .auth-field { display: grid; gap: 6px; }
html body .panel.auth-wrap.auth-wrap [hidden] { display: none; }

html body .panel.auth-wrap.auth-wrap .auth-label {
  color: var(--mz-ink);
  font-family: var(--mz-condensed);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 16px;
  text-transform: uppercase;
}

/* Một ô nhập mã (không sáu ô rời): chữ to, giãn cách, căn giữa. */
html body .panel.auth-wrap.auth-wrap input.auth-code-input[name="code"] {
  width: 100%;
  min-height: 60px;
  text-align: center;
  text-indent: 0.45em;
  color: var(--mz-ink);
  font-family: var(--mz-sans);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.45em;
  font-variant-numeric: tabular-nums;
}
html body .panel.auth-wrap.auth-wrap input.auth-code-input[name="code"]::placeholder {
  color: var(--mz-muted);
  font-weight: 400;
  opacity: 0.55;
}
html body .panel.auth-wrap.auth-wrap input[aria-invalid="true"] { border: 2px solid var(--ui-danger); }

/* Lỗi của ô: dòng có icon ngay dưới ô (7.11.3). */
html body .panel.auth-wrap.auth-wrap .auth-field-err {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  color: var(--ui-danger);
  font-family: var(--mz-serif);
  font-size: 14px;
  line-height: 20px;
}
html body .panel.auth-wrap.auth-wrap .auth-field-err[hidden] { display: none; }
/* Tài khoản quản trị không đổi email ở đây: khối cảnh báo của trang, cách biểu mẫu 16 (auth_email_code.js). */
html body .panel.auth-wrap.auth-wrap #staffBlock { margin: 0 0 16px; }
html body .panel.auth-wrap.auth-wrap .auth-field-err svg {
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

/* Nút chữ «Gửi lại mã» / «Đổi email» dùng khuôn liên kết phụ; ở dạng <button> phải bỏ kiểu nút. */
html body .panel.auth-wrap.auth-wrap .auth-links button.auth-sub-link.auth-sub-link {
  width: auto;
  padding: 0 10px;
  box-shadow: none;
  cursor: pointer;
}
html body .panel.auth-wrap.auth-wrap .auth-links button.auth-sub-link.auth-sub-link:disabled {
  color: var(--mz-muted);
  cursor: not-allowed;
  text-decoration-color: transparent;
}
html body .panel.auth-wrap.auth-wrap .auth-links .auth-sub-link--wide { grid-column: 1 / -1; }

/* Ghi chú nhỏ dưới nút (đăng ký: nhập mã trên chính trình duyệt này). */
html body .panel.auth-wrap.auth-wrap .auth-note {
  margin: 0;
  color: var(--mz-muted);
  font-family: var(--mz-condensed);
  font-size: 13.5px;
  line-height: 20px;
  text-align: center;
}