/* ==========================================================================
   DỄ ĐỌC, DỄ BẤM, DỄ ĐIỀN FORM — chuẩn WCAG AA (rà theo ui-ux-pro-max)
   Không thêm màu mới: chỉ dùng lại màu brand đã có trong base.css.
   ========================================================================== */

/* Chữ phụ: xám K60 (#808285) chỉ đạt 3,8:1 trên nền trắng, dưới mức 4,5:1
   → dùng xám đậm K80 của brand (#58595B, 7:1) cho mọi chữ phụ. */
:root { --muted: var(--ink-2); }

/* Chữ gợi ý trong ô nhập: #9aa0ab cũ chỉ 2,6:1. Xám K80 làm nhạt 15% ≈ 4,9:1,
   vẫn nhạt hơn chữ đã nhập nên không bị nhầm là đã điền. */
.field input::placeholder { color: var(--ink-2); opacity: .85; }

/* Viền focus khi dùng bàn phím (Tab). Không hiện khi bấm chuột/chạm. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}
/* Trên nền đỏ/đen viền đen chìm mất → đổi sang vàng */
:where(.hero, .site-footer, .sticky-bar, .cta-strip, .insight-box--formula) :focus-visible { outline-color: var(--gold); }

/* Link nhảy thẳng tới nội dung chính, chỉ hiện khi nhấn Tab lần đầu */
.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 3000;
  background: var(--ink); color: #fff; font-weight: 700;
  padding: 12px 18px; border-radius: 10px;
}
.skip-link:focus { top: calc(12px + env(safe-area-inset-top, 0px)); }

/* Bỏ độ trễ 300ms khi chạm trên điện thoại + con trỏ bàn tay cho mọi thứ bấm được */
a, button, input, select, label, summary { touch-action: manipulation; }
label, summary, select, [data-open-popup] { cursor: pointer; }

/* Nhãn hiện rõ phía trên ô nhập (form chính). Popup giữ dạng gọn chỉ có gợi ý. */
.field-label { display: block; margin-bottom: 6px; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.field-label .req { color: var(--red); }
.field-label .opt { font-weight: 500; color: var(--muted); }

/* Logo có khai báo width/height để chống giật trang → giữ đúng tỉ lệ khi CSS ép chiều cao */
.footer-logo img { width: auto; }

/* Ô bẫy bot: người thật không thấy, không Tab tới; bot tự điền → server bỏ qua */
.hp-field { position: absolute !important; left: 0; top: 0; width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); opacity: 0; font-size: 16px; pointer-events: none; }

/* Lỗi khi gửi (mất mạng, server lỗi…) hiện ngay trên nút gửi */
.form-error {
  margin: 4px 0 12px; padding: 10px 12px; border-radius: 10px;
  background: var(--red-soft); color: var(--red); font-size: 14px; font-weight: 600;
}
button[aria-busy="true"] { opacity: .7; cursor: progress; }