/*
 * CSS cho markup do CMS sinh ra mà style.css (chép nguyên từ p2, FR-04.2) không có: form liên hệ của plugin contact
 * (markup ở 4-luong-0.md mục 3.5) và vài chỗ nối shortcode. Chỉ dùng biến và nhịp của style.css.
 */

/* ---------- form liên hệ (.contact-form) ---------- */
.contact-form{width:100%}
.contact-form .full{grid-column:1/-1}

/* khối captcha của plugin: toán hoặc reCAPTCHA, không tràn khung hẹp */
.form__captcha{display:grid;gap:10px;align-content:start}
.form__captcha label{margin-bottom:0}
.form__captcha iframe,.form__captcha .g-recaptcha,.form__captcha .grecaptcha-badge{max-width:100%}
.form__captcha .g-recaptcha{transform-origin:0 0}
@media (max-width:380px){.form__captcha .g-recaptcha{transform:scale(.88)}}

/* trường lỗi do server trả: viền đỏ, hiện p.err (aria-describedby đã trỏ tới) */
.field.has-error input,.field.has-error select,.field.has-error textarea,.field input[aria-invalid=true],.field textarea[aria-invalid=true]{border-color:var(--danger)}
.field.has-error .err{display:block}

/* nút đang gửi hoặc bị khoá */
button[disabled],.btn[disabled]{opacity:.55;cursor:not-allowed;pointer-events:none;filter:saturate(.7)}

/* thông báo kết quả gửi */
.form__msg{grid-column:1/-1;margin:0;padding:14px 18px;border:1px solid var(--line);border-radius:8px;color:#fff;font-size:15px;line-height:1.6;overflow-wrap:anywhere}
.form__msg:empty{display:none}
.form__msg--success{border-color:var(--green);background:rgba(0,182,62,.1)}
.form__msg--success::before{content:"✓ ";color:#5fe38a;font-weight:700}
.form__msg--error{border-color:var(--danger);background:rgba(255,155,155,.1)}
.form__msg--throttled{border-color:#f5b942;background:rgba(245,185,66,.1)}
.form__msg--system{border-color:var(--line);background:rgba(255,255,255,.05)}

/* dòng gradient nhỏ dưới tiêu đề hero trang trong (ZB6, p2:about.html:73 dùng style="font-size:.62em") */
.hero__em{font-size:.62em}

/* Hero Trang chủ không có ảnh nền dùng được (trống hoặc sai đường dẫn, BR-17, AC-17.3): nền navy→ink thay ảnh, chữ sáng ở cả Dark và Light */
.hero--noimg{background:linear-gradient(135deg,#1a3478 0%,#09112a 55%,#070b16 100%)}
.hero--noimg h1,.hero--noimg .hero__sub,.hero--noimg .label{color:#fff}

/* Dải logo cuộn ngang (hitd-logos): vai trò region + tabindex nằm ở div.logo-scroll, không ở ul (axe `listitem`, TC-91).
   div là phần tử cuộn và nhận khoảng đệm/lề trước đây của ul (home.css); ul chỉ còn xếp thẻ, không cuộn. Thanh cuộn ẩn, hiện khi rê/focus như style.css. */
.logo-scroll{overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;padding:6px 0 24px;margin:calc(var(--s3) - 6px) 0 -12px;scrollbar-width:thin;scrollbar-color:transparent transparent}
.logo-scroll:hover,.logo-scroll:focus-within{scrollbar-color:var(--ctl-line) transparent}
.logo-scroll:focus-visible{outline:2px solid var(--fg-strong);outline-offset:4px;border-radius:6px}
.logo-scroll>ul.logo-wall{overflow:visible;scroll-snap-type:none;padding:0;margin:0}
.logo-scroll:focus-visible li{transform:translateY(-3px);border-color:var(--blue);box-shadow:0 8px 20px rgba(0,112,244,.18)}
.logo-scroll:focus-visible .logo{transform:scale(1.04)}
@media (prefers-reduced-motion:reduce){.logo-scroll:focus-visible li,.logo-scroll:focus-visible .logo{transform:none}}
@supports selector(::-webkit-scrollbar){
  .logo-scroll,.logo-scroll:hover,.logo-scroll:focus-within{scrollbar-width:auto;scrollbar-color:auto}
  .logo-scroll::-webkit-scrollbar{height:0}
  .logo-scroll:hover::-webkit-scrollbar,.logo-scroll:focus-within::-webkit-scrollbar{height:8px}
  .logo-scroll::-webkit-scrollbar-track{background:transparent}
  .logo-scroll::-webkit-scrollbar-thumb{background:var(--ctl-line);border-radius:4px}
  .logo-scroll:hover,.logo-scroll:focus-within{padding-bottom:16px}
}

/* Logo có ảnh sai đường dẫn (AC-09.5): khung vẫn hiện, chữ thay cho ảnh */
.logo-missing{max-width:100%;font-size:13px;line-height:1.3;text-align:center;color:var(--label);overflow-wrap:anywhere}