/* Khối Liên hệ (component tự chứa, markup trong #contact-slot, logic ở assets/js/contact.js).
   Dùng lại biến màu/font của site.css; kính mờ giống thẻ tải để hai thẻ cuối câu chuyện cùng một chất liệu. */
.contact-beat::before { display: none; }
.contact {
  position: relative; width: min(460px, 100%); padding: 24px 24px 20px; border-radius: 24px;
  background: linear-gradient(160deg, rgba(14, 26, 64, .72), rgba(5, 10, 28, .8));
  border: 1px solid rgba(150, 185, 255, .2);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5), 0 0 60px rgba(60, 110, 255, .14), inset 0 1px 0 rgba(255, 255, 255, .06);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.contact .kicker { margin-bottom: 8px; }
.contact h3 { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(28px, 2.4vw, 36px); line-height: 1.1; color: #f1f5ff; }
.beat .contact p.contact-lede { font-size: 13.5px; line-height: 1.6; color: var(--dim); margin-top: 8px; text-shadow: none; }

.contact-form { display: grid; gap: 12px; margin-top: 16px; }
.contact-form[hidden] { display: none; }
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cf-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cf-lbl { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.cf-lbl i { font-style: normal; letter-spacing: .04em; text-transform: none; color: rgba(143, 163, 207, .6); }
.contact-form input, .contact-form textarea {
  width: 100%; font: 400 14.5px/1.5 var(--sans); color: var(--text);
  padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(150, 185, 255, .16); background: rgba(1, 4, 14, .55);
  transition: border-color .25s, box-shadow .25s, background .25s;
}
/* html.stepped chỉ cho pan-x: ô lời nhắn phải tự mở lại vuốt dọc thì điện thoại mới cuộn được chữ bên trong */
.contact-form textarea { resize: none; min-height: 104px; max-height: 32vh; overscroll-behavior: contain; touch-action: pan-y; }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: rgba(140, 184, 255, .55); background: rgba(3, 8, 24, .7); box-shadow: 0 0 0 3px rgba(93, 147, 255, .16); }
.contact-form [aria-invalid="true"] { border-color: rgba(255, 150, 140, .6); }
.cf-err { font-size: 12px; line-height: 1.4; color: #ffb4a8; }
.cf-err:empty { display: none; }

.cf-actions { display: flex; align-items: center; gap: 14px; }
.cf-send {
  flex: none; display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 18px 0 20px; border-radius: 13px;
  background: linear-gradient(135deg, #3f78ff, #6ea6ff); border: 1px solid rgba(190, 215, 255, .5); color: #fff;
  font-weight: 500; font-size: 14.5px; box-shadow: 0 10px 30px rgba(60, 120, 255, .35);
  transition: transform .35s var(--ease), box-shadow .35s, opacity .3s;
}
.cf-send svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--ease); }
.cf-send:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(60, 120, 255, .55); }
.cf-send:hover:not(:disabled) svg { transform: translateX(3px); }
.cf-send:disabled { opacity: .6; cursor: progress; }
.beat .contact p.cf-status { flex: 1; min-width: 0; margin: 0; font-size: 13px; line-height: 1.5; color: var(--dim); text-shadow: none; }
.contact-form[data-state="error"] .cf-status { color: #ffb4a8; }
.contact-form[data-state="sending"] .cf-status::before {
  content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 8px; vertical-align: -1px;
  border-radius: 50%; border: 1.5px solid var(--accent); border-right-color: transparent; animation: cf-spin .8s linear infinite;
}
@keyframes cf-spin { to { transform: rotate(360deg); } }
.beat .contact p.cf-fine { font-size: 11.5px; line-height: 1.5; color: rgba(143, 163, 207, .6); margin: 0; text-shadow: none; }
.cf-fine a { color: inherit; }

/* Đã gửi (hoặc hôm nay đã gửi rồi): cất form, chỉ còn lời cảm ơn/hẹn mai */
.contact-form[data-state="done"] > :not(.cf-actions) { display: none; }
.contact-form[data-state="done"] .cf-send { display: none; }
.beat .contact-form[data-state="done"] p.cf-status { font-family: var(--serif); font-style: italic; font-size: 21px; line-height: 1.35; color: var(--text); }

@media (max-aspect-ratio: 10/11), (max-width: 720px) {
  .contact { padding: 18px 16px 16px; }
  .cf-row { grid-template-columns: 1fr; gap: 10px; }
  .contact-form { gap: 10px; margin-top: 12px; }
  .contact-form textarea { min-height: 84px; }
  /* chữ dưới 16px làm Safari iOS tự phóng to khi chạm vào ô nhập */
  .contact-form input, .contact-form textarea { font-size: 16px; padding: 8px 12px; }
}
@media (max-height: 700px) {
  .beat .contact p.contact-lede { display: none; }
  .contact-form textarea { min-height: 70px; }
}
/* bản đọc tĩnh: thẻ nằm trong dòng chữ như các thẻ khác */
body.static .contact { width: min(460px, 100%); }