/* =========================================================================
   footer.css — CHAN TRANG
   ========================================================================= */

.footer {
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  padding-top: clamp(44px, 6vw, 72px);
}

.footer__grid {
  display: grid;
  grid-template-columns: minmax(240px, 1.4fr) repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(24px, 4vw, 48px);
  padding-bottom: 40px;
}

.footer__about p {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  max-width: 34ch;
  margin: 14px 0 18px;
}

.footer__col h4 {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-faint);
  margin-bottom: 14px;
}
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer__col a {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  /* Chu nhich sang phai khi tro chuot — re ma thay "song". */
  display: inline-block;
  transition: color var(--dur-fast) var(--ease), transform var(--dur) var(--ease-out);
}
.footer__col a:hover { color: var(--accent); transform: translateX(3px); }

.footer__social { display: flex; gap: 10px; }

.footer__bar {
  border-top: 1px solid var(--border);
  padding: 18px 0 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: var(--text-faint);
}
.footer__bar a { color: var(--text-muted); }

/* ── Cột Liên hệ: mỗi đầu mối một khối gọn ─────────────────────────────
   Nhãn đậm + dòng link — không để chữ chảy tự do gãy dòng lung tung
   trong cột hẹp. Không ghi tên người (yêu cầu chủ dự án). */
.footer__people > li { display: grid; gap: 3px; }

.footer__people b {
  font-size: var(--fs-sm);
  color: var(--text);
  font-weight: 600;
}

.footer__links { font-size: var(--fs-sm); color: var(--text-faint); }
.footer__links a { display: inline; }
.footer__links a:hover { transform: none; }

/* Email dài (nguyenkhacvu@furniture...) trong cột hẹp: cho phép ngắt trong
   chuỗi thay vì tràn ra ngoài cột. */
.footer__links a { overflow-wrap: anywhere; }