/* ==========================================================================
   Wistorix · Trang Liên hệ / Contact (15/10/2026)
   Dùng ở: Public/lien-he.html, Public/en/contact.html
   Bố cục chuẩn trang liên hệ SaaS, giữ chữ, form, nút và ảnh của template:
   tiêu đề căn giữa · cột trái ảnh + thông tin liên hệ · cột phải thẻ form.
   Khung nội dung tối đa 1200px nên màn rộng không bị kéo giãn.
   Màu, bo góc, cỡ chữ lấy biến của template (aeline.webflow.shared.css).
   ========================================================================== */

.wxc{
  margin:0;
  padding:4.5rem 1.5rem 6rem;
}
.wxc-wrap{max-width:75rem;margin:0 auto}

/* ---------- Tiêu đề ---------- */
.wxc-head{max-width:46rem;margin:0 auto 3rem;text-align:center}
.wxc-head h1{margin:0}
.wxc-head p{margin:1rem 0 0}

/* ---------- Lưới 2 cột ---------- */
.wxc-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:1.25rem;
  align-items:stretch;
}
.wxc-left{display:flex;flex-direction:column;gap:1.25rem;min-width:0}

/* Ảnh banner */
.wxc-photo{
  position:relative;
  flex:1 1 auto;
  min-height:14rem;
  border-radius:var(--_sizes---fixed--xlarge,1.5rem);
  overflow:hidden;
  background-color:var(--bg-color--bg-primary);
}
.wxc-photo img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:45% 28%;
}

/* Thông tin liên hệ: danh sách, mỗi kênh một dòng, ngăn bằng đường kẻ mảnh */
.wxc-info{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  padding:.5rem 1.75rem;
  border-radius:var(--_sizes---fixed--xlarge,1.5rem);
  background-color:var(--bg-color--bg-primary);
}
.wxc-item{display:flex;gap:1rem;align-items:center;min-width:0;padding:1.125rem 0;color:inherit;text-decoration:none}
.wxc-item + .wxc-item{border-top:1px solid rgba(10,31,82,.08)}
.wxc-ico{
  flex:none;
  width:2.5rem;height:2.5rem;border-radius:50rem;
  display:flex;align-items:center;justify-content:center;
  background-color:#fff;
  color:var(--text-color--text-primary);
}
.wxc-ico svg{width:1.125rem;height:1.125rem}
.wxc-item > span:last-child{display:flex;flex-direction:column;gap:.125rem;min-width:0}
.wxc-item .text-lg{overflow-wrap:anywhere}
a.wxc-item:hover .text-lg{opacity:.75}
.wxc-item .hero-contact_social{margin-top:.375rem}

/* ---------- Thẻ form ---------- */
.wxc-formcard{
  padding:2.5rem;
  border-radius:var(--_sizes---fixed--xlarge,1.5rem);
  background-color:#fff;
  border:1px solid #E4E7EC;
  box-shadow:0 1px 2px rgba(10,31,82,.04),0 24px 48px -28px rgba(10,31,82,.22);
  display:flex;flex-direction:column;justify-content:center;
}
.wxc-formcard .w-form{margin:0}
.wxc .form_form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.5rem 1rem;
}
.wxc .form_form > .form_field-wrapper:nth-child(n+3),
.wxc .form_form > .button_wrapper{grid-column:1 / -1}
.wxc .form_field-wrapper label{
  margin:0;
  font-size:var(--_typography---base--font-size);
  line-height:var(--_typography---base--line-height);
  font-weight:var(--_typography---font-weight--medium,500);
}
.wxc .form_input.is-text-area{min-height:10rem}

/* ---------- Màn hẹp ---------- */
@media screen and (max-width:991px){
  .wxc{padding:3rem 1.25rem 4.5rem}
  .wxc-head{margin-bottom:2rem}
  .wxc-grid{grid-template-columns:1fr}
  .wxc-photo{min-height:0;height:16rem;flex:none}
}
@media screen and (max-width:767px){
  .wxc-formcard{padding:1.5rem}
  .wxc .form_form{grid-template-columns:1fr}
  .wxc-info{padding:.25rem 1.25rem}
}
@media screen and (max-width:479px){
  .wxc{padding:2rem 1rem 3.5rem}
  .wxc-photo{height:12.5rem}
}