/* /lien-he — token: home-pne.css */
body.lien-he-page { background: var(--bg); }

.lh-wrap { max-width:1060px; margin:0 auto; padding:0 40px; }

.lh-head { text-align:center; padding:44px 0 30px; }
.lh-head .eyebrow { font:700 12px var(--ff); text-transform:uppercase; letter-spacing:.14em; color:var(--red); }
.lh-head h1 { font-size:clamp(28px,3.6vw,40px); font-weight:800; letter-spacing:-.028em; margin-top:10px; }
.lh-head p { font-size:14.5px; color:var(--text-2); margin-top:10px; max-width:640px; margin-inline:auto; }

/* (1) HERO khớp mockup (chỉ /lien-he): nền hồng radial + pill "Liên hệ" (viền hồng + icon headset). */
.lh-head.lh-hero { background:radial-gradient(1100px 300px at 50% -70px, var(--red-light), transparent 72%); padding-top:48px; }
.lh-pill { display:inline-flex; align-items:center; gap:7px; background:#fff; border:1px solid var(--red-light); color:var(--red);
  font:800 12px var(--ff); letter-spacing:.08em; text-transform:uppercase; padding:7px 15px; border-radius:999px; box-shadow:var(--sh-xs); margin-bottom:14px; }
.lh-pill i { font-size:14px; }

/* layout */
.lh-grid { display:grid; grid-template-columns:1.15fr 1fr; gap:24px; align-items:start; }

/* FORM */
.lh-form-card { background:#fff; border:1px solid var(--border-s); border-radius:20px; box-shadow:var(--sh-m); padding:30px; }
.lh-form-card h2 { font-size:19px; font-weight:800; letter-spacing:-.015em; }
.lh-form-card p.sub { font-size:13px; color:var(--text-2); margin-top:4px; }
/* (2) Tiêu đề form + ô icon đỏ (ti-send) bên trái — khớp .fc-top mockup. */
.lh-fc-top { display:flex; gap:13px; align-items:flex-start; margin-bottom:4px; }
.lh-fc-ic { flex:0 0 auto; width:46px; height:46px; border-radius:13px; background:var(--red); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:23px; }
.lh-f-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:16px; }
.lh-f-full { margin-top:16px; }
.lh-req { color:var(--red); }
.lh-form-card label { font-size:12px; font-weight:700; color:var(--text-2); display:block; margin-bottom:6px; }
.lh-form-card input, .lh-form-card select, .lh-form-card textarea {
  width:100%; font:500 16px var(--ff); color:var(--text); background:#FCFCFC;   /* #115: 14→16, iOS không zoom */
  border:1px solid var(--border-s); border-radius:11px; padding:12px 13px; outline:none;
  /* #131: KHÔNG transition:all (=transition:.15s) — ô đổi bố cục nửa pixel khi cuộn/bàn phím mở → animate MỌI
     prop → GIẬT mobile. Chỉ prop thực đổi khi focus (khớp form trang chủ .field input). */
  transition:border-color .15s, background .15s, box-shadow .15s;
}
/* (4) Focus: viền đỏ + nền sáng + quầng hồng nhẹ (khớp mockup). */
.lh-form-card input:focus, .lh-form-card select:focus, .lh-form-card textarea:focus {
  border-color:var(--red); background:#fff; box-shadow:0 0 0 3px var(--red-light);
}
.lh-form-card textarea { min-height:96px; resize:vertical; font-family:var(--ff); }
.lh-btn-go { font-size:14px; font-weight:700; color:#fff; background:var(--red); border:none; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 22px; border-radius:10px;
  box-shadow:var(--sh-red); transition:background .15s; width:100%; margin-top:18px; font-family:var(--ff); }
.lh-btn-go:hover { background:var(--red-deep); }
.lh-f-note { font-size:11.5px; color:var(--text-3); text-align:center; margin-top:10px; }

/* honeypot — ẩn khỏi UI nhưng bot điền được */
.lh-hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* success message */
.lh-success { background:#E6F4EC; border:1px solid #B8DDC4; color:#1F7A3D; border-radius:10px; padding:14px 18px;
  margin-top:14px; font-size:13.5px; display:flex; gap:10px; align-items:center; }
.lh-success i { font-size:18px; }
.lh-error { background:#FDE5E6; border:1px solid #F5C8CA; color:#A8181D; border-radius:10px; padding:10px 14px;
  margin-top:10px; font-size:12.5px; }

/* INFO bên phải */
.lh-info { display:flex; flex-direction:column; gap:14px; }
/* Ảnh reception CO GIÃN theo chiều cao cột (flex:1) → đẩy cột phải cao gần bằng cột form. */
.lh-recep { position:relative; flex:1 1 auto; border-radius:var(--r-l); overflow:hidden; border:1px solid var(--border-s); box-shadow:var(--sh-s); min-height:230px; background:linear-gradient(135deg,#e9e6e2,#d6d1cb); }
.lh-recep img { width:100%; height:100%; min-height:230px; object-fit:cover; display:block; }
.lh-recep-badge { position:absolute; top:14px; left:14px; background:rgba(255,255,255,.92); color:var(--red); font:800 11.5px var(--ff); letter-spacing:.3px; padding:7px 13px; border-radius:999px; display:inline-flex; align-items:center; gap:6px; box-shadow:var(--sh-xs); }
@media (max-width:860px) { .lh-recep, .lh-recep img { min-height:220px; } }

/* Card CTA "Xem lịch khai giảng" — cuối cột phải (mockup lien-he-moi-v2). */
.lh-cta-card { display:flex; align-items:center; gap:14px; background:linear-gradient(120deg,#fff,var(--red-light)); border:1.5px solid var(--red-border); border-radius:20px; padding:18px 20px; box-shadow:var(--sh-s); text-decoration:none; color:inherit; transition:border-color .15s, box-shadow .15s, transform .15s; }
.lh-cta-card:hover { border-color:var(--red); box-shadow:var(--sh-m); transform:translateY(-2px); }
.lh-cta-ic { flex:0 0 auto; width:48px; height:48px; border-radius:14px; background:var(--red); color:#fff; display:flex; align-items:center; justify-content:center; font-size:24px; }
.lh-cta-tx { flex:1; }
.lh-cta-tx b { display:block; font:800 16px var(--ff); color:var(--text); }
.lh-cta-tx span { display:block; color:var(--text-2); font-size:12.5px; margin-top:2px; line-height:1.5; }
.lh-cta-arr { color:var(--red); font-size:22px; }
.lh-info-card { background:var(--bg-soft); border:1px solid var(--border-s); border-radius:var(--r-l); padding:20px 22px; }
.lh-info-card .t { font:700 11px var(--ff); text-transform:uppercase; letter-spacing:.07em; color:var(--text-3); margin-bottom:12px; }
.lh-i-row { display:flex; gap:12px; align-items:flex-start; padding:7px 0; }
.lh-i-row i { width:36px; height:36px; border-radius:10px; background:var(--red-light); color:var(--red);
  display:flex; align-items:center; justify-content:center; font-size:17px; flex:none; }
.lh-i-row b { font-size:13.5px; display:block; line-height:1.45; }
.lh-i-row b a { color:inherit; }
.lh-i-row b a:hover { color:var(--red); }
.lh-i-row span { font-size:12px; color:var(--text-2); }
.lh-i-row a.act { font-size:12px; font-weight:700; color:var(--red); display:inline-flex; align-items:center; gap:4px; margin-top:4px; }
.lh-i-row a.act:hover { text-decoration:underline; }

/* chat — đúng 2 nút */
.lh-chat-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.lh-chat-row.one { grid-template-columns:1fr; }
.lh-chat-row a { display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:13px; font-weight:700; border-radius:10px; padding:11px; border:1px solid var(--border-s);
  background:#fff; transition:border-color .15s, color .15s; color:var(--text); }
.lh-chat-row a:hover { border-color:var(--red-border); color:var(--red); }
.lh-chat-row i { font-size:17px; color:var(--red); }

/* MAP */
.lh-map { margin-top:24px; border-radius:var(--r-l); overflow:hidden; border:1px solid var(--border-s); box-shadow:var(--sh-xs); }
.lh-map iframe { display:block; width:100%; height:330px; border:0; }
.lh-map .lh-ph { height:330px; background:var(--bg-soft); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px; color:var(--text-2); font-size:13.5px; text-align:center; padding:0 20px; }
.lh-map .lh-ph i { font-size:34px; color:var(--red); }

/* hướng đi nhanh */
.lh-quick { margin:34px 0 70px; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.lh-quick a { background:#fff; border:1px solid var(--border-s); border-radius:var(--r-m); padding:16px 18px;
  display:flex; align-items:center; gap:12px; transition:border-color .15s, box-shadow .15s, color .15s; color:var(--text); }
.lh-quick a:hover { border-color:var(--red-border); box-shadow:var(--sh-s); color:var(--red); }
.lh-quick i { font-size:20px; color:var(--red); flex:none; }
.lh-quick b { font-size:13px; display:block; }
.lh-quick span { font-size:11.5px; color:var(--text-2); }

@media (max-width:900px){
  .lh-grid { grid-template-columns:1fr; }
  .lh-quick { grid-template-columns:1fr; }
  /* #139: nút gửi mobile CHỈ hiện "Gửi thông tin" — ẩn phần đuôi "— nhận tư vấn miễn phí" cho gọn 1 dòng.
     Desktop giữ full. Admin vẫn sửa được form_submit (tách ở dấu "—" trong blade). */
  .lh-btn-go-sub { display:none; }
  /* #130: nền hồng hero tràn SÁT MÉP (full-bleed) — thoát padding của .lh-wrap. margin-inline âm KHỚP
     đúng padding .lh-wrap ở breakpoint này (40px), padding-inline trả lại lề cho chữ. */
  .lh-head.lh-hero { margin-inline:-40px; padding-inline:40px; }
}
@media (max-width:600px){
  .lh-wrap { padding:0 16px; }
  .lh-f-row { grid-template-columns:1fr; }
  /* #130: ≤600px .lh-wrap padding = 16px → hero khớp -16px. */
  .lh-head.lh-hero { margin-inline:-16px; padding-inline:16px; }
}