/* ============================================================
   contact.css — Trang Liên hệ (trang 23 file thiết kế)
   Chỉ chứa phần riêng của trang; component dùng chung
   (.breadcrumb, .page-head, .form-grid, .field, .btn) nằm ở common.css.
   ============================================================ */

.contact { padding-bottom: var(--sp-section); }

/* ===== 1 · HAI CỘT FORM CAO BẰNG NHAU ======================
   Thiết kế trang 23 vẽ cột trái (Họ tên · Email · SĐT · Địa chỉ) và cột phải
   (Tiêu đề · Lời nhắn) kết thúc ĐÚNG cùng một đường.

   Bản trước ước lượng bằng tay: `min-height: 232px` cho textarea, tính từ chiều
   cao cột trái (4 × 46px input + 4 nhãn + 3 gap). Hai lỗi trong đó — con số chỉ
   đúng ở một khổ màn hình (hụt ~8px ở 1440 vì gap là clamp), và `flex: 1` trên
   textarea không bao giờ giãn được vì `.contact__msg` là hộp flex TỰ CO theo
   nội dung, không có chiều cao dư nào để chia.

   Cách làm mới để trình duyệt tự đo thay vì mình đoán:
   `.form-grid` mặc định `align-items: stretch` → hai `.contact__col` đã cao bằng
   nhau sẵn. Chỉ cần cột phải khai `grid-template-rows: auto 1fr` để hàng cuối
   nuốt hết phần dư, rồi `.contact__msg` lặp lại đúng thủ thuật đó cho textarea
   bên trong. Đúng ở mọi khổ, không còn con số ma nào. */
.contact__col { display: grid; gap: clamp(16px, 1.8vw, 22px); align-content: start; }
.contact__col--msg { grid-template-rows: auto 1fr; }

/* KHÔNG đặt `gap`: `.field > label` (common.css) đã mang margin-bottom 8px, thêm
   gap nữa là ô Lời nhắn thụt sâu hơn 4 ô bên trái đúng 8px. `.field__err` mặc
   định `display: none` nên không sinh grid item — hàng 1fr vẫn rơi đúng vào
   textarea; lúc báo lỗi nó thành hàng 3 `auto`, cũng đúng. */
.contact__msg { display: grid; grid-template-rows: auto 1fr; }
/* min-height: 0 để textarea co được xuống dưới chiều cao nội tại (`rows="8"` +
   `min-height: 150px` của .field) — thiếu nó thì hàng 1fr không rút ngắn được. */
.contact__msg textarea { height: 100%; min-height: 0; }

/* Hàng nút gửi trải hết hai cột, CĂN GIỮA (phản hồi client 31/07/2026).
   Trước đây căn phải; file thiết kế không vẽ nút này nên căn giữa là lựa chọn
   tự do, và nó cân với tiêu đề trang vốn cũng căn giữa (.page-head). */
.contact__actions {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 16px; margin-top: 4px;
}
.contact__note { font-size: var(--fs-xs); color: var(--c-primary); }
.contact__note.is-error { color: #c0392b; }

@media (max-width: 720px) {
  /* .form-grid rơi về 1 cột ở đây — không còn cột nào để cân bằng, nên gỡ luôn
     cơ chế 1fr và trả textarea về chiều cao cố định như trước. Nếu giữ
     `height: 100%` thì ô lời nhắn co lại đúng bằng nội dung của nó. */
  .contact__col--msg { grid-template-rows: none; }
  .contact__msg { display: block; }
  .contact__msg textarea { height: auto; min-height: 170px; }
  .contact__actions { justify-content: stretch; }
  .contact__actions .btn { width: 100%; }
}