/* ============================================================================
   lienhe.css — trang "Liên hệ", dựng theo "Liên hệ.dc.html".

   🔴 Mọi luật nằm dưới `.ndn-lh`. Không sửa tokens.css, không sửa header/footer.

   Phần hero chép cùng kiểu với trang Giới thiệu nhưng khai LẠI dưới tên riêng
   `.ndn-lh__hero`: hai trang này rồi sẽ đi hai hướng khác nhau (bên kia có ảnh
   nền, bên này có thể gắn bản đồ), gộp chung một class là mai mốt sửa bên này
   vỡ bên kia. Đây là 40 dòng trình bày, không phải số đo mà chỗ khác neo theo.
   ========================================================================== */

.ndn-lh__wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-left: var(--kh-gutter);
  padding-right: var(--kh-gutter);
}

.ndn-lh h2 { font-size: 24px; font-weight: 700; letter-spacing: -.3px; line-height: 1.3; }
.ndn-lh p  { margin: 0; }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.ndn-lh__hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: max(220px, 16vw);
  background-color: var(--kh-hero);
  background-image:
    radial-gradient(60% 120% at 12% 0%,  rgba(22,82,228,.42) 0%, rgba(22,82,228,0) 62%),
    radial-gradient(46% 100% at 88% 10%, rgba(56,126,255,.26) 0%, rgba(56,126,255,0) 60%);
  overflow: hidden;
}
.ndn-lh__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(9,20,50,.30) 0%, rgba(9,20,50,.10) 40%, rgba(9,20,50,.72) 100%);
  pointer-events: none;
}
.ndn-lh__hero-in { position: relative; z-index: 2; padding-top: 36px; padding-bottom: 30px; }

.ndn-lh__crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 700;
}
.ndn-lh__crumb a       { color: rgba(255,255,255,.75); display: inline-block; padding: 5px 4px; margin: -5px -4px; }
.ndn-lh__crumb a:hover { color: #fff; }
.ndn-lh__crumb span[aria-hidden] { color: rgba(255,255,255,.45); }
.ndn-lh__crumb [aria-current]    { color: #fff; }

.ndn-lh__hero h1 {
  margin: 0;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.5px;
  color: #fff;
  text-shadow: 0 2px 14px rgba(9,20,50,.4);
}
.ndn-lh__lead {
  margin-top: 10px;
  max-width: 640px;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.6;
  color: rgba(255,255,255,.88);
  text-shadow: 0 1px 8px rgba(9,20,50,.4);
}

/* ── 4 kênh liên hệ ───────────────────────────────────────────────────────── */
.ndn-lh__kenh { background: var(--kh-bg); padding-top: 56px; padding-bottom: 56px; }

.ndn-lh__kenh-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.ndn-lh__card {
  display: block;
  padding: 24px;
  border: 1px solid var(--kh-line);
  border-radius: var(--kh-r-lg);
  background: var(--kh-bg);
  color: inherit;
  transition: transform .25s ease, box-shadow .25s ease, border-color .18s ease;
}
a.ndn-lh__card:hover {
  transform: translateY(-4px);
  border-color: var(--kh-line-hover);
  box-shadow: 0 12px 32px rgba(16,34,78,.08);
  color: inherit;
}
.ndn-lh__card-ic {
  width: 46px;
  height: 46px;
  margin-bottom: 14px;
  border-radius: 13px;
  background: var(--kh-brand-tint);
  color: var(--kh-brand);
  display: grid;
  place-items: center;
}
.ndn-lh__card-ic svg { width: 21px; height: 21px; }
.ndn-lh__card-l { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 700; color: var(--kh-muted-2); }
.ndn-lh__card-v {
  display: block;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--kh-ink);
  overflow-wrap: anywhere;   /* email dài không đẩy tràn thẻ */
}
.ndn-lh__card-v.is-nho { font-size: 14.5px; font-weight: 700; }

/* ── Khối gửi yêu cầu ─────────────────────────────────────────────────────── */
.ndn-lh__gui { background: var(--kh-bg-alt); padding-top: 56px; padding-bottom: 56px; }

.ndn-lh__gui-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 460px;
  gap: 40px;
  align-items: start;
}

.ndn-lh__form {
  padding: 32px;
  background: var(--kh-bg);
  border: 1px solid var(--kh-line);
  border-radius: var(--kh-r-xl);
  box-shadow: 0 1px 3px rgba(16,34,78,.05);
}
.ndn-lh__form h2 { margin-bottom: 6px; }
.ndn-lh__form-sub { margin-bottom: 24px; font-size: 14px; font-weight: 600; color: var(--kh-muted); }

/* Báo gửi thành công */
.ndn-lh__ok {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
  padding: 16px 18px;
  background: #EDFDF3;
  border: 1px solid #BBE9CD;
  border-radius: var(--kh-r-md);
}
.ndn-lh__ok-ic {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #0C7A3C;
  color: #fff;
  display: grid;
  place-items: center;
}
.ndn-lh__ok-ic svg    { width: 14px; height: 14px; stroke-width: 3; }
.ndn-lh__ok strong    { display: block; font-size: 14.5px; font-weight: 700; color: #0C7A3C; }
.ndn-lh__ok em        { display: block; margin-top: 2px; font-size: 13px; font-weight: 600; font-style: normal; color: var(--kh-text-2); }

.ndn-lh__loi-chung {
  margin-bottom: 18px;
  padding: 14px 16px;
  background: var(--kh-danger-tint);
  border: 1px solid #F6CDCE;
  border-radius: var(--kh-r-md);
  font-size: 13.5px;
  font-weight: 700;
  color: #B3272B;
}
.ndn-lh__loi-chung p + p { margin-top: 6px; }

/* Ô mồi bắt bot — giấu khỏi mắt VÀ khỏi trình đọc màn hình, nhưng không dùng
   display:none (một số bot bỏ qua ô display:none, còn trình duyệt tự điền thì
   lại điền vào ô ẩn kiểu đó). */
.ndn-lh__moi {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.ndn-lh__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.ndn-lh__fld { margin-bottom: 16px; border: 0; padding: 0; }
.ndn-lh__fld > label,
.ndn-lh__fld > legend {
  display: block;
  margin-bottom: 7px;
  padding: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--kh-text-2);
}
.ndn-lh__fld > label span { color: var(--kh-danger); }

.ndn-lh__box {
  display: flex;
  align-items: center;
  height: 46px;
  padding: 0 14px;
  background: var(--kh-bg);
  border: 1px solid var(--kh-line-strong);
  border-radius: var(--kh-r-md);
}
.ndn-lh__box--ta { display: block; height: auto; padding: 12px 14px; }
.ndn-lh__box:focus-within {
  border-color: var(--kh-brand);
  box-shadow: 0 0 0 3px rgba(22,82,228,.10);
}
.ndn-lh__box.is-loi { border-color: var(--kh-danger); }

.ndn-lh__box input,
.ndn-lh__box textarea {
  flex: 1;
  min-width: 0;
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  color: var(--kh-ink);
}
.ndn-lh__box textarea { display: block; resize: vertical; line-height: 1.6; }

.ndn-lh__loi { margin-top: 6px; font-size: 12.5px; font-weight: 700; color: var(--kh-danger); }

/* Chip chủ đề (radio thật, ô tròn gốc bị ẩn) */
.ndn-lh__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ndn-lh__chip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.ndn-lh__chip span {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  border: 1px solid var(--kh-line-strong);
  border-radius: var(--kh-r-full);
  background: var(--kh-bg);
  font-size: 13px;
  font-weight: 700;
  color: var(--kh-text-2);
}
.ndn-lh__chip:hover span            { border-color: var(--kh-brand); color: var(--kh-brand); }
.ndn-lh__chip input:checked + span  { background: var(--kh-brand); border-color: var(--kh-brand); color: #fff; }
/* Bàn phím: ô tròn gốc bị ẩn nên vòng focus phải vẽ lên chip. */
.ndn-lh__chip input:focus-visible + span { outline: 2px solid var(--kh-brand); outline-offset: 2px; }

.ndn-lh__submit {
  height: 48px;
  padding: 0 32px;
  border: none;
  border-radius: var(--kh-r-md);
  background: var(--kh-brand);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}
.ndn-lh__submit:hover  { background: var(--kh-brand-hover); }
.ndn-lh__submit:active { transform: scale(.98); }

/* ── Cột phải: bản đồ + giờ làm việc ──────────────────────────────────────── */
.ndn-lh__map {
  position: relative;
  height: 340px;
  margin-bottom: 20px;
  border-radius: var(--kh-r-xl);
  overflow: hidden;
  box-shadow: var(--kh-sh);
}
.ndn-lh__map img { width: 100%; height: 100%; object-fit: cover; }

.ndn-lh__map.is-trong {
  background: var(--kh-brand-tint);
  border: 1px solid var(--kh-brand-line);
}
.ndn-lh__map-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--kh-brand);
  opacity: .30;
}
/* Ghim đặt hơi cao hơn giữa để thẻ địa chỉ ở đáy không đè lên. */
.ndn-lh__map-pin {
  position: absolute;
  left: 50%;
  top: 40%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  background: var(--kh-bg);
  color: var(--kh-brand);
  display: grid;
  place-items: center;
  box-shadow: 0 8px 20px rgba(16,34,78,.18);
}
.ndn-lh__map-pin svg { width: 22px; height: 22px; }

.ndn-lh__diachi {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 16px;
  background: var(--kh-bg);
  border-radius: var(--kh-r-md);
  box-shadow: 0 10px 30px rgba(16,34,78,.15);
}
.ndn-lh__diachi-ic {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: var(--kh-r);
  background: var(--kh-brand-tint);
  color: var(--kh-brand);
  display: grid;
  place-items: center;
}
.ndn-lh__diachi-ic svg { width: 17px; height: 17px; }
.ndn-lh__diachi strong { display: block; font-size: 13.5px; font-weight: 700; color: var(--kh-ink); }
.ndn-lh__diachi em     { display: block; font-size: 12px; font-weight: 600; font-style: normal; line-height: 1.5; color: var(--kh-muted-2); }

.ndn-lh__gio {
  padding: 24px;
  background: var(--kh-bg);
  border: 1px solid var(--kh-line);
  border-radius: var(--kh-r-xl);
}
.ndn-lh__gio h2 { margin-bottom: 14px; font-size: 15.5px; font-weight: 700; letter-spacing: 0; }

.ndn-lh__gio-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid #F0F3F9;
  font-size: 13.5px;
}
.ndn-lh__gio-row:last-of-type { border-bottom: none; }
.ndn-lh__gio-row span   { font-weight: 600; color: var(--kh-muted); }
.ndn-lh__gio-row strong { font-weight: 700; color: var(--kh-ink); }
.ndn-lh__gio-row .is-nghi { color: var(--kh-danger-text); }   /* audit #3: bậc đỏ chữ 4.61:1 (cũ 3.91) */

.ndn-lh__gio-note {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #F0F3F9;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--kh-muted);
}

/* ══ Máy tính bảng (≤1023px) ═══════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .ndn-lh__gui-grid  { grid-template-columns: minmax(0, 1fr); }
  .ndn-lh__kenh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ══ Điện thoại (≤767px) ═══════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .ndn-lh__kenh,
  .ndn-lh__gui { padding-top: 40px; padding-bottom: 40px; }

  .ndn-lh__hero    { min-height: 210px; }
  .ndn-lh__hero h1 { font-size: 25px; }
  .ndn-lh__lead    { margin-top: 6px; font-size: 14px; }

  .ndn-lh h2 { font-size: 20px; }

  .ndn-lh__kenh-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ndn-lh__row       { grid-template-columns: minmax(0, 1fr); }
  .ndn-lh__form      { padding: 24px 20px; }
  .ndn-lh__submit    { width: 100%; padding: 0 16px; }
  .ndn-lh__map       { height: 280px; }

  /* iOS tự phóng to trang khi chạm vào ô chữ nhỏ hơn 16px — ép 16px để khỏi nhảy. */
  .ndn-lh__box input,
  .ndn-lh__box textarea { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  a.ndn-lh__card:hover { transform: none; }
  .ndn-lh__submit:active { transform: none; }
}