/*
 * Trang agency (/services /results /about /contact /faq /privacy).
 * QUY TẮC: dùng class có sẵn trong styles.css trước (.section .page-shell .section-heading
 * .section-kicker .step-grid .start-list .fit-columns .problem-grid). Chỉ thêm class mới
 * khi thật sự không có cái nào dùng được. File này dài quá 200 dòng nghĩa là đang viết lại
 * thứ đã có — dừng lại và kiểm tra.
 */

.page-hero {
  padding-block: 46px 26px;
  background: var(--premium-950, #070d1a);
  color: rgba(255, 255, 255, 0.9);
}

.page-hero h1 {
  margin: 6px 0 12px;
  font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.6rem);
  line-height: 1.25;
}

.page-hero p {
  margin: 0;
  max-width: 62ch;
  line-height: 1.75;
  opacity: 0.82;
}

.prose {
  max-width: 74ch;
  line-height: 1.85;
}

.prose h2 {
  margin-block: 32px 10px;
  font-size: 1.18rem;
}

.prose h3 {
  margin-block: 22px 6px;
  font-size: 1.02rem;
}

.prose p,
.prose li {
  margin-block: 8px;
}

.prose ul {
  padding-left: 20px;
}

.prose .updated-at {
  font-size: 0.86rem;
  opacity: 0.68;
}

.empty-note {
  padding: 22px 20px;
  border: 1px dashed rgba(17, 24, 39, 0.22);
  border-radius: var(--radius);
  line-height: 1.75;
  text-align: center;
}

.empty-note strong {
  display: block;
  margin-bottom: 6px;
}

.faq-more {
  margin: 18px 0 0;
  font-weight: 800;
}

.faq-more a {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.contact-channels {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 22px;
}

.contact-email {
  color: rgba(241, 221, 166, 0.94);
  background: transparent;
  border: 1px solid rgba(215, 181, 104, 0.44);
}

.contact-note {
  margin: 16px 0 0;
  font-size: 0.88rem;
  opacity: 0.76;
}

@media (max-width: 560px) {
  .contact-channels a {
    flex: 1 1 100%;
  }
}