/* ==========================================================================
   LAYOUT — hệ container toàn cục
   Pattern: SECTION full-width (nền) → .container căn giữa (nội dung).
   ========================================================================== */

.container {
    width: min(calc(100% - (var(--container-gutter) * 2)), var(--container-max));
    margin-inline: auto;
}

.container--narrow {
    width: min(calc(100% - (var(--container-gutter) * 2)), var(--container-narrow));
    margin-inline: auto;
}

/* Khối nội dung tràn nhẹ ra ngoài mép chữ (card, panel, ảnh) để chữ bên trong
   thẳng hàng với mép container — đúng như mockup. */
.bleed {
    margin-inline: calc(var(--bleed) * -1);
}

.bleed-left {
    margin-left: calc(var(--bleed) * -1);
}

.site {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-main {
    flex: 1 0 auto;
}

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

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

.section--navy {
    background: var(--color-navy-deep);
    color: rgba(255, 255, 255, 0.82);
}

/* Layout trang nội dung có sidebar */
.layout-sidebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 56px;
    align-items: start;
}

.layout-sidebar--left {
    grid-template-columns: 300px minmax(0, 1fr);
}