/* ============================================================
   LAYOUT — Khung chứa, lưới co dãn, đầu mục (Module A)
   ============================================================ */

/* Khung nội dung canh giữa */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Khối nội dung dọc trang (đáy dư hơn đỉnh một chút cho cân mắt) */
.section { padding-block: clamp(64px, 9vw, 120px) clamp(72px, 10vw, 136px); }
.section--tint {
  background:
    radial-gradient(70% 60% at 100% 0%, rgba(255,255,255,.6), transparent 62%),
    var(--green-100);
}
.section--dark {
  position: relative; isolation: isolate; overflow: hidden;
  background:
    radial-gradient(55% 75% at 88% 0%, rgba(201,150,46,.22), transparent 62%),
    radial-gradient(45% 65% at 0% 100%, rgba(255,255,255,.10), transparent 60%),
    var(--grad-dark);
  color: #EAF1EC;
}
/* Họa tiết chấm mờ dần ra rìa */
.section--dark::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.16) 1px, transparent 1.5px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(70% 90% at 50% 50%, #000, transparent 75%);
          mask-image: radial-gradient(70% 90% at 50% 50%, #000, transparent 75%);
  opacity: .6;
}
.section--dark h2 { color: #fff; }
.section--dark p  { color: #CFDDD4; }

/* Lưới TỰ CO DÃN — màn nhỏ tự rớt về 1 cột */
.grid   { display: grid; gap: clamp(18px, 2.6vw, 30px); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* Đầu mỗi mục: nhãn nhỏ + tiêu đề + mô tả */
.section-head { max-width: 720px; margin-bottom: clamp(36px, 5vw, 60px); }
.section-head p { margin-top: 14px; color: var(--muted); max-width: 58ch; }

/* Nhãn nhỏ trên tiêu đề: vạch vàng ngắn phía trước */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--accent);
  margin-bottom: 16px;
}
.eyebrow::before {
  content: ""; flex: none; width: 24px; height: 2px; border-radius: 2px; background: var(--gold);
}

/* Tiện ích căn giữa nội dung khi cần */
.text-center { text-align: center; }
.text-center .section-head { margin-inline: auto; }