/* ==========================================================================
   LAYOUT – hệ thống container & section
   Nguyên tắc: SECTION = 100% viewport (nền), NỘI DUNG = .container căn giữa.
   ========================================================================== */
.container {
    width: min(100% - (var(--container-gutter) * 2), var(--container-max));
    margin-inline: auto;
}

/* Hero & dải CTA: cùng container nhưng nội dung thụt thêm --container-inset */
.container--inset {
    padding-inline: var(--container-inset);
}

/* Cột đọc bài viết / trang tĩnh */
.container--narrow {
    width: min(100% - (var(--container-gutter) * 2), var(--content-reading));
    margin-inline: auto;
}

.site-main {
    display: block;
}

.section {
    position: relative;
    width: 100%;
}

.section--soft {
    background: var(--color-surface-soft);
}

.section--dark {
    background: var(--color-dark-2);
    color: var(--color-on-dark);
}

/* Lưới thẻ dùng chung */
.grid {
    display: grid;
    gap: var(--grid-gap);
}

.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }