/* ============================================================
   Vinpack — page-lienhe.css
   CSS RIÊNG CỦA trang "Liên hệ". Chỉ nạp khi
   is_page_template( 'page-templates/lien-he.php' ).

   NẠP SAU global.css VÀ layout.css — inc/enqueue.php khai vinpack-global và
   vinpack-layout làm dependency của vinpack-lienhe (style), đúng khuôn
   page-dichvu.css/page-nangluc.css/page-vechungtoi.css.

   BA LUẬT CỦA FILE NÀY — cùng ba luật page-dichvu.css:
   1. KHÔNG khai custom property nào. Token thuộc về theme.json/global.css.
   2. KHÔNG dùng !important.
   3. KHÔNG khai `outline` ở bất kỳ đâu.

   VỀ INPUT/LABEL/TEXTAREA: global.css ĐÃ có style nền chung cho
   label/input[type=...]/textarea (mục "form" — border, radius --r-input,
   padding, focus state qua :focus-visible). File này KHÔNG viết lại các quy
   tắc đó — chỉ thêm bố cục riêng của form này (.contact-form-row 2 cột,
   khoảng cách .contact-field), đúng tinh thần "tái dùng token có sẵn,
   không viết lại nút" của brief Phase O. Nút "Gửi ngay" dùng thẳng .btn.btn-
   primary có sẵn trong global.css, không class nút riêng ở đây.

   VỀ `.contact-heading`/`.contact-grid-section` TÁCH THÀNH HAI PHẦN THAY VÌ
   MỘT `<section class="contact-section wrap">` DUY NHẤT CỦA MOCKUP: xem lý
   lẽ đầy đủ ở docblock page-templates/lien-he.php. File này bù khoảng đệm
   bằng cách chia padding-top/padding-bottom giữa hai khối thay vì đặt cả hai
   trên một `<section>` bao ngoài — cùng tổng padding 96px dọc mà mockup
   dùng cho `section.wrap` (36px kicker + phần còn lại ở grid section).

   VỀ HONEYPOT `.vp-hp`: ẩn NGOÀI KHUNG NHÌN bằng position:absolute +
   left:-9999px (KHÔNG display:none/visibility:hidden — hai thuộc tính đó bot
   dò DOM tĩnh vẫn đọc được value nhưng trình duyệt của người dùng thật cũng
   không render, nên nếu bot chỉ kiểm computed style qua các thuộc tính phổ
   biến này thì vẫn "biết" mà bỏ qua; đẩy ra ngoài khung nhìn buộc bot phải
   thực sự tính toán vị trí layout mới nhận ra — chặn được nhiều bot đơn giản
   hơn). `width`/`height` 1px và `overflow:hidden` phòng trường hợp trình đọc
   màn hình nào đó phá vỡ khỏi vị trí absolute.
   ============================================================ */

/* ============================================================
   1. Banner (.contact-banner)
   ============================================================ */
.contact-banner{
  background:linear-gradient(160deg, var(--navy) 0%, var(--navy-dark) 100%);
  padding:64px 0;
  color:var(--white);
}
.contact-banner-grid{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-7);
  flex-wrap:wrap;
}
.contact-banner h1{ font-size:38px; color:var(--white); margin-bottom:10px; }
.contact-banner p{ color:var(--on-navy-text); font-size:16px; max-width:480px; }
.contact-banner-visual{ flex-shrink:0; width:220px; max-width:100%; }
.contact-banner-visual svg{ width:100%; height:auto; display:block; }

/* ============================================================
   1b. Banner co anh (.contact-banner--anh) - SUA 12/09/2026, khach: "kich
   thuoc anh tang 1920x635, Lien he voi Vinpack bi lap xoa 1 cai, doan dan
   dua xuong duoi". Dung khuon .cat-hero-img/.cat-hero-info cua danh muc san
   pham va .proj-banner-img/.proj-banner-info moi them cho trang Du an -
   xem template-parts/lienhe/banner.php.
   ============================================================ */
.contact-banner--anh{
  padding:0;
  background:none;
  color:inherit;
}
.contact-banner-img{
  width:100%;
  aspect-ratio:1920/635;
  overflow:hidden;
  position:relative;
  background:linear-gradient(160deg, var(--navy) 0%, var(--navy-dark) 100%);
}
.contact-banner-img-el{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.contact-banner-info{
  padding:var(--sp-6) var(--wrap-x) var(--sp-5);
  text-align:center;
}
.contact-banner-info h1{ color:var(--navy); font-size:38px; line-height:1.15; margin-bottom:var(--sp-3); }
.contact-banner-info p{ color:var(--text-muted); font-size:16px; max-width:560px; margin-inline:auto; }

@media (max-width:900px){
  .contact-banner-info h1{ font-size:30px; }
}
@media (max-width:600px){
  .contact-banner-info h1{ font-size:28px; }
}

/* ============================================================
   2. Tiêu đề (.contact-heading)
   ============================================================ */
.contact-heading{ padding:56px 0 0; text-align:center; }
.contact-heading .kicker{
  display:block;
  margin-bottom:10px;
  font-size:12px;
  font-weight:700;
  color:var(--cobalt-ink);
  letter-spacing:2px;
  text-transform:uppercase;
}

/* ============================================================
   3. Lưới thông tin + form (.contact-grid-section / .contact-grid)
   ============================================================ */
.contact-grid-section{ padding:40px 0 96px; }
.contact-grid{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1.2fr);
  gap:var(--sp-8);
  align-items:start;
}

/* --- Info list --- */
.contact-info-list{ display:flex; flex-direction:column; gap:var(--sp-5); margin-bottom:var(--sp-6); }
.contact-info-item{ display:flex; align-items:flex-start; gap:var(--sp-4); }
.contact-info-icon{
  flex-shrink:0;
  /*
   * Mockup (6): 42x42, bo 10px (KHONG phai tron hoan toan), nen
   * --cobalt-light, icon mau --navy va can giua trong o.
   *
   * Ban dung dau de o nay RONG RUOT — sau vong tron trang tron tren trang
   * that. Nay do icon that vao (vinpack_contact_icon), nen phai co display
   * flex de can giua, va color de icon `currentColor` an dung mau navy thay
   * vi mau chu ke thua (do that truoc khi sua: rgb(26,26,26), tuc den).
   */
  width:42px;
  height:42px;
  border-radius:10px;
  background:var(--cobalt-light);
  color:var(--navy);
  display:flex;
  align-items:center;
  justify-content:center;
}
.contact-info-item h4{ font-size:15px; margin-bottom:2px; }
.contact-info-item p{ color:var(--text-muted); font-size:14.5px; }
/*
 * STT 36(b) (feedback đợt 2, trang Liên hệ): khách yêu cầu "phần chữ để
 * cùng màu xám" — giá trị Website/Hotline/Email đang là <a> nên trước Task
 * này ăn màu --cobalt-ink (xanh dương, đọc như liên kết thường), khác màu
 * --text-muted (xám) của các dòng KHÔNG phải link (Văn phòng/Xưởng sản xuất/
 * Thời gian làm việc, dùng thẻ <p>). SỬA: đổi màu chữ về --text-muted cho
 * ĐỒNG NHẤT — vẫn là thẻ <a> bấm được, CHỈ đổi màu, không đổi hành vi/thẻ,
 * đúng yêu cầu khách ghi rõ ("dù vẫn còn là link, chỉ đổi MÀU").
 */
.contact-info-item a{ color:var(--text-muted); font-size:14.5px; font-weight:600; }
.contact-info-item a:hover{ color:var(--navy); }

/* --- Social block --- */
.contact-social-block h4{ font-size:15px; margin-bottom:var(--sp-3); }
.contact-social{ display:flex; flex-wrap:wrap; gap:var(--sp-3); list-style:none; margin:0; padding:0; }
/*
 * gap + svg flex-shrink:0 — feedback khách (21/08/2026): "thêm icon chính
 * hãng đi". Icon dùng vinpack_social_icon() (xem docblock đầu
 * template-parts/lienhe/grid.php), fill:currentColor nên tự ăn theo
 * color:var(--white) đang có, không cần khai màu riêng.
 */
.contact-social-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 16px;
  border-radius:var(--r-pill);
  background:var(--navy);
  color:var(--white);
  font-size:13px;
  font-weight:600;
}
.contact-social-link svg{ flex-shrink:0; }
.contact-social-link:hover{ background:var(--navy-dark); }

/*
 * SỬA (15/09/2026, khách gửi ảnh chụp + ảnh mẫu chân trang: "Tôi chỉ muốn để
 * hình tròn icon thôi không cần hiển thị text"). Biến thể CÓ ICON đổi từ
 * pill+chữ sang HÌNH TRÒN CHỈ ICON — cùng tinh thần `.footer-social--icon`
 * (site-footer.php) đã áp cho chân trang, chỉ khác border-radius:50% (tròn
 * hẳn, đúng chữ khách dùng) thay vì 8px (bo góc) của footer. Nhãn chữ KHÔNG
 * mất — chuyển vào `.screen-reader-text` (khai trong grid.php), vẫn đọc
 * được bằng trình đọc màn hình. Nền tảng chưa có icon trong
 * vinpack_social_icon() (trả rỗng) rơi về ĐÚNG pill+chữ như cũ ở trên — class
 * `--icon` không được gắn nên không khớp rule này.
 */
.contact-social-link--icon{
  width:40px;
  height:40px;
  padding:0;
  gap:0;
  border-radius:50%;
  justify-content:center;
}
.contact-social-link--icon svg{ width:16px; height:16px; }

/*
 * --- Form ---
 * STT 36(d) (feedback đợt 2, trang Liên hệ): khách chỉ mũi tên vào khối form
 * ("Shape này sử dụng màu nền phụ") — đối chiếu ~/vp-mockups/lienhe.html
 * (`.contact-form{background:var(--bg-alt);border-radius:16px;padding:36px;}`,
 * KHÔNG border) xác nhận nền phải là --bg-alt (màu nền phụ của hệ thiết kế),
 * không phải --white như bản dựng trước Task này. Giữ border/border-radius/
 * padding hiện có (không phải điều khách yêu cầu đổi), CHỈ đổi màu nền.
 */
.contact-form{ background:var(--bg-alt); border:1px solid var(--border); border-radius:var(--r-card-lg); padding:var(--sp-6); }
/*
 * STT 36(e): nút "Gửi ngay" đang nhỏ, căn trái (.btn mặc định global.css là
 * display:inline-flex, co theo nội dung chữ). Mockup lienhe.html dòng ~800:
 * `.contact-form button{width:100%;}` — nút trải hết bề rộng khối form.
 */
.contact-form .btn{ width:100%; }
.contact-form-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); }
.contact-field{ margin-bottom:var(--sp-4); }
.contact-form-note{ font-size:12.5px; color:var(--text-muted); margin-bottom:var(--sp-4); }
.contact-form-notice{
  padding:12px 14px;
  border-radius:var(--r-input);
  font-size:14px;
  font-weight:600;
  margin-bottom:var(--sp-4);
}
.contact-form-notice--ok{ background:var(--bg-alt); color:var(--navy); }
.contact-form-notice--error{ background:#FCE9E7; color:var(--danger); }

/* Honeypot — xem giải thích ở đầu file. */
.vp-hp{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* ============================================================
   4. Bản đồ (.contact-map-section / .contact-map)
   ============================================================ */
.contact-map-section{ padding:0 0 96px; }
.contact-map{ border-radius:var(--r-card-lg); overflow:hidden; box-shadow:var(--sh-2); line-height:0; }
.contact-map iframe{ width:100%; height:450px; display:block; }

/* ============================================================
   5. Responsive
   ============================================================ */
@media (max-width:900px){
  .contact-banner-visual{ display:none; }
  .contact-grid{ grid-template-columns:1fr; }
  .contact-form-row{ grid-template-columns:1fr; }
  .contact-map iframe{ height:320px; }
}
/*
 * THANG CỠ TIÊU ĐỀ BANNER CHUẨN (07/09/2026): 38px desktop, 30px từ 900px,
 * 28px từ 600px. Trước đợt này mỗi banner tự chọn mốc và cỡ riêng nên ở 800px
 * màn hình có ba cỡ tiêu đề khác nhau cùng lúc — xem docblock đầy đủ trong
 * scratchpad/banner-dong-bo.py và các khối tương ứng ở tám file banner khác.
 */
@media (max-width:900px){
  .contact-banner h1{ font-size:30px; }
}

@media (max-width:600px){
  .contact-banner h1{ font-size:28px; }
}