/* ============================================================
   contact-page.css — trang Liên hệ riêng (lien-he.html)

   Trang chủ vẫn giữ section #lien-he của nó; trang này là đích của mục
   menu "Liên hệ" và của các nút CTA trên trang con. Thẻ form và danh sách
   thông tin dùng LẠI .contact-form/.field/.m-contact__info đã chuyển sang
   common.css — ở đây chỉ có bố cục riêng của trang.

   NHỊP ĐO LẠI TỪ REF manubens.es/en/contact/ (2026-08-05, đọc thẳng DOM —
   bản markdown của trang bỏ sót vì map do JS dựng và ảnh là background-image).
   Ref có ĐÚNG bốn khối, và trang này bám theo:
     ① tiêu đề + form          container 1200 (max 1400) @viewport 1280
     ② BẢN ĐỒ tràn viền        1280 × 400px, width_full
     ③ thông tin liên hệ 3 CỘT container 1200
     ④ ảnh xưởng tràn viền     cao 100vh (75vh ≤1024, 30vh ≤600)
   Tức form đứng TRƯỚC hàng thông tin, và giữa hai khối chữ luôn có một dải
   ảnh hoặc bản đồ. Bản trước của trang này là bốn khối chữ liên tiếp.

   ĐÃ NHÚNG BẢN ĐỒ GOOGLE (khách chốt 2026-08-05). Bản trước cố ý không nhúng
   vì cả site không có script bên thứ ba nào; nay nhúng thì §3 và §4 của
   chinh-sach-bao-mat.html ĐÃ ĐƯỢC SỬA THEO trong cùng đợt — chúng từng khẳng
   định "không đặt cookie theo dõi" và "không nhúng bản đồ… của bên thứ ba",
   cả hai câu sẽ thành sai nếu để nguyên. Đổi/gỡ map thì phải sửa lại hai
   đoạn đó, đừng để chính sách nói một đằng trang làm một nẻo.
   ============================================================ */

/* ---- NHỊP RỘNG: bằng header, footer và mọi section trang chủ ---------
   Đây là khiếu nại "thân trang bị bó nhỏ hơn lề toàn trang", và nguyên nhân
   đo được: .container mặc định là --maxw 1280, trong khi header/footer/mọi
   section trang chủ đều opt-in --maxw-wide 1600 + --pad-wide. Trang
   san-pham.html đã gặp và sửa đúng lỗi này (products-list.css) — cùng một
   dòng opt-in, không phải thủ pháp mới.
   Ba trần max-width bên trong (820/1000/1120) đã GỠ HẲN chứ không chỉ nới:
   chúng bó chặt hơn cả .container nên chỉ sửa .container thôi là không đủ.
   Ref cũng để form và hàng thông tin trải trọn container của nó. */
.page-hero .container,
.lh-form .container,
.lh-info .container,
.lh-places .container{max-width:var(--maxw-wide);padding-inline:var(--pad-wide);}

/* ---- Hàng thông tin liên hệ ---------------------------------------- */
/* ĐỔI CHỖ NỀN với .lh-places (khách 2026-09-07): khối thông tin liên hệ nay
   nền KEM, khối trụ sở & nhà máy nền TRẮNG. */
/* NỀN TRẮNG trở lại (khách chốt 2026-09-07, sau một lượt để kem): khối này nay
   nằm giữa section form nền kem ở trên và bản đồ ở dưới, nên trắng mới là mảng
   tách hai bên. Ô icon vì thế cũng trả về --gray-100 mặc định của .ic — không
   còn rule đè nào ở đây, nền kem trên nền trắng là thấy rõ. */
.lh-info{padding-block:clamp(40px,5.5vw,80px);background:var(--bg);}
.lh-info__grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(28px,3.6vw,60px);
  padding:0;list-style:none;
}
/* Ghi đè margin dọc của .m-contact__info (bản trên trang chủ xếp cột nên
   mỗi mục cách nhau 22px); ở đây chúng nằm ngang nên khe do grid lo. */
.lh-info__grid li{margin-bottom:0;}

/* Hai số hotline: trên trang chủ chúng dùng .info-call + .info-call__alt,
   nơi số phụ được neo bằng align-self:flex-end — cách đó chỉ đúng khi cột
   đủ rộng. Cột ở đây hẹp hơn hẳn nên trang này dùng markup riêng: cả hai số
   là hai link nằm CÙNG MỘT DÒNG trong khối chữ, ngăn bằng dấu · viết thẳng
   trong HTML. Đơn giản hơn, và không phải chống lại bố cục của trang chủ. */
.lh-info__nums{display:block;font-size:var(--fs-body);line-height:var(--lh-tight);color:var(--gray-700);}
.lh-info__nums a{color:inherit;}
.lh-info__nums a:hover{color:var(--gold-deep);}
.lh-info__nums .sep{margin:0 8px;color:var(--gray-500);}

/* Cột thứ ba = MẠNG XÃ HỘI, đúng cột thứ ba của ref. Trước đây cột này lặp
   nguyên địa chỉ trụ sở mà .lh-places ngay bên dưới nhắc lại lần nữa kèm link
   bản đồ — cùng một thông tin nói hai lần trong một màn hình. */
.lh-info__social{display:flex;flex-wrap:wrap;gap:0;align-items:baseline;}
.lh-info__social a{font-size:var(--fs-body);line-height:var(--lh-tight);color:var(--gray-700);}
.lh-info__social a:hover{color:var(--gold-deep);}
.lh-info__social .sep{margin:0 8px;color:var(--gray-500);}

/* ---- Bản đồ ---------------------------------------------------------
   TRÀN VIỀN, KHÔNG bọc .container — ref để width_full và cao đúng 400px.
   line-height:0 chặn khe trắng vài px dưới iframe (iframe là inline nên vẫn
   ngồi trên baseline như một chữ cái).
   loading="lazy" nằm bên HTML: iframe này gọi sang Google, đừng để nó chặn
   lần vẽ đầu của trang. */
.lh-map{display:block;line-height:0;background:var(--gray-100);}
.lh-map iframe{display:block;width:100%;height:clamp(280px,32vw,460px);border:0;}

/* ---- Khối form ----------------------------------------------------- */
/* NỀN KEM --gray-100 (#F5F4EF) — khách đổi ý 2026-09-07 chiều muộn, sau một
   lượt để trắng. Thẻ form giữ TRẮNG nên nó lại nổi lên trên nền section.
   ĐỆM DỌC = 0 (khách: "form có padding trên dưới làm các field cách phụ đề và
   section dưới hơi xa"). Chỉ bỏ đệm TRÊN/DƯỚI, giữ đệm hai bên: bỏ cả bốn phía
   thì ô nhập chạm sát mép thẻ trắng và thẻ mất luôn nghĩa. */
.lh-form{padding-block:clamp(48px,6.5vw,104px);background:var(--gray-100);}
/* KHÔNG CÒN THẺ TRẮNG (khách chốt 2026-09-07: "bỏ các khung trắng phía trong
   đi, đặt nó lên nền luôn"). Bỏ nền thì cũng bỏ luôn đệm — đó chính là thứ tạo
   ra khoảng hở mà khách kêu ở lượt trước, và giờ không còn mép thẻ nào để chữ
   chạm vào.
   ĐỔI CHIỀU TƯƠNG PHẢN: ô nhập nay là mảng SÁNG duy nhất trên nền kem, nên
   chúng phải trắng. Để nguyên --gray-100 là ô nhập trùng nền section và cả
   form biến mất. */
.lh-form .contact-form{background:transparent;padding:0;}
.lh-form .contact-form .field input,
.lh-form .contact-form .field textarea{background:var(--bg);}
.lh-form .contact-form .field input:focus,
.lh-form .contact-form .field textarea:focus{background:var(--bg);}
/* Ô cuối cùng của form không cần margin dưới nữa khi thẻ đã hết đệm dọc —
   nếu không, khoảng hở 18px của .field lại đóng vai đúng cái đệm vừa bỏ. */
/* ⚠️ ĐÃ GỠ rule `.field:last-of-type{margin-bottom:0}`.
   `:last-of-type` xét trong PHẠM VI CHA của từng phần tử, mà hai trường trong
   .contact-form__row có cha riêng là chính cái row — nên trường thứ hai của
   mỗi hàng cũng bị coi là "cuối" và mất margin. Ở khổ điện thoại (hàng gộp một
   cột) điều đó cho ra khe so le 18 / 0 / 18 / 0 (khách báo 2026-09-08 "dàn lại
   cho đều").
   Không cần thay bằng gì: thẻ form nay không còn đệm dọc, và khe 18px của
   trường cuối cộng với margin-top 6px của cụm nút là nhịp đúng. */
/* CANH GIỮA cụm nút gửi + dòng chú thích (khách 2026-09-07). Chỉ ở trang này —
   form trên trang chủ nằm cột hẹp, canh trái mới đúng nhịp ở đó. */
.lh-form .contact-form__submit{justify-content:center;}

/* Trần 820px ĐÃ GỠ: nó là thứ bó thân trang chặt nhất, và ref cũng để form
   trải trọn container. Kiểm lại tỉ lệ để chắc là không dàn trải hơn ref:
   ở 1440 ta ra 1282/1440 ≈ 89% (ref 1200/1280 ≈ 94%); ở 1920 ta ra 1440/1920
   = 75% (ref trần 1400 → 73%). Bám sát ref ở mọi khổ màn. */
.lh-form__inner{margin-inline:auto;}
.lh-form__head{text-align:center;margin-bottom:clamp(24px,3vw,40px);}
.lh-form__head h2{
  font-size:var(--fs-h2);
  line-height:var(--lh-heading);color:var(--heading);margin-bottom:clamp(12px,1.4vw,18px);
}
.lh-form__head p{
  font-size:var(--fs-body);line-height:var(--lh-body);color:var(--gray-700);
  margin:0 auto;max-width:60ch;
}

/* ---- Địa chỉ nhà máy -----------------------------------------------
   Nền XÁM chứ không trắng: .lh-info ngay phía trên đã trắng, để cả hai trắng
   thì hai section dính thành một mảng dài không có mối nối. */
.lh-places{padding-block:clamp(48px,6.5vw,104px);background:var(--bg);}
.lh-places__head{text-align:center;max-width:780px;margin:0 auto clamp(28px,3.4vw,48px);}
.lh-places__head h2{
  font-size:var(--fs-h2);
  line-height:var(--lh-heading);color:var(--heading);margin-bottom:clamp(12px,1.4vw,18px);
}
.lh-places__grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(24px,3vw,48px);
}
/* Kẻ trên đầu mỗi mục thay cho khung viền quanh: cùng thủ pháp với
   .m-story__steps và .pd-specs, giữ trang phẳng. */
.lh-place{border-top:1px solid var(--gray-200);padding-top:clamp(16px,1.8vw,24px);}
.lh-place h3{
  font-size:var(--fs-h4);
  letter-spacing:var(--ls-heading);color:var(--heading);margin:0 0 10px;
}
.lh-place p{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--gray-700);margin:0 0 12px;}
/* 2026-09-07: link "Xem trên bản đồ" mang class .link-arrow (CTA chữ chuẩn của
   site: in hoa + gạch vàng), thay cho kiểu riêng chữ thường + mũi tên ở đây.
   Rule này chỉ còn giữ khoảng cách; mọi thứ khác đọc từ .link-arrow. */
.lh-place a{margin-top:10px;}

/* ---- Responsive ---------------------------------------------------- */
/* 900 → 640 (khách chốt 2026-09-08): tablet dọc còn thừa chỗ, ba mục liên hệ
   và hai khối địa chỉ đều phải nằm NGANG ở khổ đó. Xuống dưới 640 mới xếp dọc.
   Ở 768px mỗi mục liên hệ được ~230px, đủ cho hàng hotline hai số (đã khoá
   nowrap, xem .info-call__num trong common.css). */
@media (max-width:640px){
  .lh-info__grid{grid-template-columns:1fr;gap:22px;}
  .lh-places__grid{grid-template-columns:1fr;}
}