/* layout.css — container, section, grid, nhịp dọc. */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--container-pad);
}
.container--narrow{max-width:820px}

.section{padding:var(--sec-y) 0}          /* đối xứng top = bottom */
.section--tight{padding:calc(var(--sec-y) * .7) 0}
.section--lg{padding:var(--sec-y-lg) 0}
.section--alt{background:var(--paper-2)}
.section--sand{background:var(--sand)}
.section--dark{background:var(--navy-900);color:#fff}
.section--dark h2,.section--dark h3{color:#fff}
.section--dark .eyebrow{color:var(--gold-500)}
.section--dark .section__lead{color:var(--navy-300)}

/* Đầu section: eyebrow → title → lead */
.section__head{max-width:720px;margin-bottom:var(--gap-xl)}
.section__title{font-size:var(--fs-h2);margin-top:var(--gap-xs)}
.section__lead{
  font-size:var(--fs-lead);color:var(--muted);
  max-width:var(--measure);margin-top:var(--gap-s);
}
.section__actions{margin-top:var(--gap-m);display:flex;flex-wrap:wrap;gap:var(--gap-s)}
.section__foot{margin-top:var(--gap-l)}

@media (min-width:900px){
  .section__head--split{
    display:flex;align-items:flex-end;justify-content:space-between;
    gap:var(--gap-xl);max-width:none;
  }
  .section__head--split > div{max-width:720px}
  .section__head--split .section__actions{margin-top:0;flex-shrink:0}
}

/* Grid — auto-fit để không bao giờ tràn ngang */
.grid{display:grid;gap:var(--gap-l)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.grid--gap-m{gap:var(--gap-m)}

/* Bố cục 2 cột lệch: nội dung + ảnh */
.split{display:grid;gap:var(--gap-xl);align-items:center}
@media (min-width:900px){
  .split{grid-template-columns:1fr 1fr}
  .split--wide-left{grid-template-columns:1.15fr .85fr}
}

/* Hoãn render phần dưới fold — không ảnh hưởng nội dung, chỉ hiệu năng */
.section--deferred{content-visibility:auto;contain-intrinsic-size:auto 900px}