/* ============================================================================
   8 · Liên hệ (contact)
   Design source: design/v3.0.1/reference/nam-yam-index.html  L252–293
   Split section: ink brand column left, paper detail column right.
   The footer lives inside the paper column — there is no separate page footer.
   ============================================================================ */

#contact {
  display: grid;
  grid-template-columns: .86fr 1.14fr;
}

/* ---- Brand column -------------------------------------------------------- */
.ny-contact__brand {
  background: var(--ny-ink);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: clamp(30px, 4vw, 52px);
  min-height: clamp(380px, 42vw, 520px);
  padding: clamp(56px, 7vw, 88px) max(clamp(24px, 4vw, 48px), (100% - 620px) / 2);
}
.ny-contact__lockup {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(14px, 1.8vw, 22px);
}
.ny-contact__mark { display: block; width: clamp(56px, 5vw, 80px);   height: auto; }
.ny-contact__word { display: block; width: clamp(180px, 18vw, 280px); height: auto; }
.ny-contact__lockup small {
  font: var(--ny-sans-regular) var(--ny-fs-brand)/1 var(--ny-sans);
  text-transform: uppercase;
  letter-spacing: var(--ny-ls-label);
  color: var(--ny-white-62);
}
.ny-contact__en {
  text-align: center;
  font: var(--ny-serif-regular) clamp(12px, 1.15vw, 13.5px)/1.4 var(--ny-serif);
  color: var(--ny-bronze);
}

/* ---- Detail column ------------------------------------------------------- */
.ny-contact__detail {
  background: var(--ny-paper);
  color: var(--ny-ink);
  display: flex; flex-direction: column;
  gap: clamp(22px, 2.8vw, 34px);
  padding: clamp(56px, 7vw, 96px) max(clamp(24px, 5vw, 80px), (100% - 820px) / 2) clamp(28px, 3vw, 40px);
}

.ny-contact__detail h2 {
  font: var(--ny-serif-regular) clamp(32px, 3.9vw, 58px)/1.08 var(--ny-serif);
  color: var(--ny-ink);
}
.ny-contact__detail h2 > span { display: block; white-space: nowrap; }
.ny-alt { color: var(--ny-bronze); }

.ny-contact__rows {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: clamp(18px, 2.4vw, 32px);
  font-style: normal;
}
.ny-contact__rows > div { display: flex; flex-direction: column; gap: 7px; }
.ny-contact__rows small {
  font: var(--ny-sans-regular) var(--ny-fs-label)/1 var(--ny-sans);
  text-transform: uppercase;
  letter-spacing: .3em;
  color: var(--ny-label);
}
.ny-contact__rows p {
  font: var(--ny-serif-regular) clamp(13px, 1.05vw, 15.3px)/1.6 var(--ny-serif);
  color: var(--ny-address);
}

.ny-contact__actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(16px, 2.4vw, 32px);
}
.ny-contact__actions .ny-btn { padding: 0 clamp(24px, 2.6vw, 34px); }

.ny-contact__foot {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: 16px;
  margin-top: auto;
  padding-top: clamp(20px, 2.4vw, 30px);
  border-top: 1px solid var(--ny-dark-20);
}
.ny-contact__foot > span {
  font: var(--ny-sans-regular) var(--ny-fs-body)/1 var(--ny-sans);
  letter-spacing: .18em;
  color: var(--ny-label);
}
.ny-contact__foot nav { display: flex; flex-wrap: wrap; gap: clamp(18px, 2.4vw, 30px); }
.ny-contact__foot nav a {
  display: inline-flex; align-items: center;
  min-height: var(--ny-tap);
  font: var(--ny-sans-regular) var(--ny-fs-label)/1 var(--ny-sans);
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--ny-social);
}
.ny-contact__foot nav a:hover { color: var(--ny-red); }

@media (max-width: 1000px) {
  #contact { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .ny-contact__brand  { min-height: 300px; padding: clamp(48px, 8vw, 64px) var(--ny-pad-sm); }
  .ny-contact__detail { padding: clamp(48px, 8vw, 64px) var(--ny-pad-sm) clamp(26px, 4vw, 34px); }
  .ny-contact__rows   { grid-template-columns: 1fr; }
}