/* ==========================================================================
   NAGA Concept — contact.css (Liên hệ)
   ========================================================================== */

header{background:rgba(244,241,234,.97)}

button,.button{
  font-size:10px;
  font-weight:800;
  letter-spacing:.1em;
}

/* --- Liên hệ trực tiếp -------------------------------------------------- */
.contact-info{
  display:grid;
  grid-template-columns:38% 62%;
  min-height:330px;
}
.contact-info-title{
  padding:38px 34px;
  border-right:1px solid var(--line);
  background:var(--soft);
}
.contact-info-title h2{
  margin:22px 0 0;
  font-size:46px;
  line-height:1;
  letter-spacing:-.06em;
}
.contact-list{
  padding:26px 36px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.contact-row{
  display:grid;
  grid-template-columns:150px 1fr;
  gap:26px;
  padding:22px 0;
  border-bottom:1px solid var(--line);
  align-items:start;
}
.contact-row:last-child{border-bottom:0}
.contact-row h3{
  margin:0;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
}
.contact-row p,
.contact-row a{
  margin:0;
  color:var(--ink);
  font-size:16px;
  line-height:1.55;
  text-decoration:none;
}
.contact-row a:hover{text-decoration:underline}

/* --- Form tư vấn -------------------------------------------------------- */
.consult{
  display:grid;
  grid-template-columns:38% 62%;
  min-height:560px;
}
.consult-copy{
  padding:40px 34px;
  border-right:1px solid var(--line);
  background:var(--ink);
  color:var(--paper);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.consult-copy .eyebrow{color:#d8d0c5}
.consult-copy h2{
  margin:24px 0 20px;
  font-size:52px;
  line-height:.97;
  letter-spacing:-.065em;
}
.consult-copy p{
  margin:0;
  max-width:440px;
  color:#d8d0c5;
  font-size:14px;
  line-height:1.7;
}
.consult-form{
  padding:40px 36px;
  display:grid;
  align-content:center;
}
.consult-form form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
/* Mỗi input nằm trong .field (bọc cùng nhãn ẩn), nên .field mới là ô lưới. */
.full{grid-column:1/-1}
.consult-form textarea{
  min-height:130px;
  resize:vertical;
}
.form-note{
  grid-column:1/-1;
  font-size:10px;
  line-height:1.5;
  color:#625c53;
}

/* --- Vị trí ------------------------------------------------------------- */
.location{
  display:grid;
  grid-template-columns:42% 58%;
  min-height:420px;
}
.location-copy{
  padding:38px 34px;
  border-right:1px solid var(--line);
}
.location-copy h2{
  margin:22px 0 18px;
  font-size:46px;
  line-height:1;
  letter-spacing:-.06em;
}
.location-copy p{
  margin:0;
  max-width:470px;
  font-size:14px;
  line-height:1.7;
  color:#403b35;
}
/* Khung nhúng bản đồ: iframe của Google Maps mang width/height cố định trong mã
   dán vào, nên ép 100% ở đây — nếu không, ở mobile nó tràn ngang cả trang. */
.map-embed{
  position:relative;
  min-height:420px;
}
.map-embed iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
}
.map-placeholder{
  position:relative;
  background:
    linear-gradient(35deg,transparent 49.7%,rgba(0,0,0,.18) 50%,transparent 50.3%),
    linear-gradient(-35deg,transparent 49.7%,rgba(0,0,0,.12) 50%,transparent 50.3%),
    var(--soft);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:30px;
}
.map-placeholder::before{
  content:"";
  width:72%;
  height:62%;
  border:1px solid var(--line);
  background:rgba(244,241,234,.45);
}
.map-placeholder span{
  position:absolute;
  padding:10px 14px;
  background:var(--paper);
  border:1px solid var(--line);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:800;
}

/* --- Footer ------------------------------------------------------------- */
footer{
  padding:25px 28px;
  font-size:10px;
  letter-spacing:.1em;
}

/* --- Responsive --------------------------------------------------------- */
@media(max-width:900px){
  .contact-info,.consult,.location{grid-template-columns:1fr}
  .contact-info-title,.consult-copy,.location-copy{
    border-right:0;
    border-bottom:1px solid var(--line);
  }
}
@media(max-width:680px){
  .contact-row{
    grid-template-columns:1fr;
    gap:9px;
  }
  .consult-form form{grid-template-columns:1fr}
  .full,.form-note{grid-column:auto}
  .consult-copy h2{font-size:42px}
}