/**
 * HCTCLIENT01 CONTAINER & GRID V1
 * Generic layout primitives only. Theme-specific block composition belongs in
 * that block's CSS file.
 */
.hctclient01-container,
.hctclient01-container--narrow,
.hctclient01-container--wide,
.beoi-container {
    width: min(100% - (var(--hctclient01-gutter) * 2), var(--hctclient01-container-lg));
    margin-inline: auto;
}

.hctclient01-container--narrow {
    width: min(100% - (var(--hctclient01-gutter) * 2), var(--hctclient01-container-sm));
}

.hctclient01-container--wide {
    width: min(100% - (var(--hctclient01-gutter) * 2), var(--hctclient01-container-wide));
}

.hctclient01-section {
    padding-block: var(--hctclient01-section-space);
}

.hctclient01-section--compact {
    padding-block: var(--hctclient01-section-space-sm);
}

.hctclient01-grid {
    display: grid;
    gap: var(--hctclient01-grid-gap, var(--hctclient01-space-6));
    min-width: 0;
}

.hctclient01-grid > * { min-width: 0; }
.hctclient01-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hctclient01-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hctclient01-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hctclient01-grid--auto {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--hctclient01-grid-min, 16rem)), 1fr));
}

.hctclient01-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--hctclient01-cluster-gap, var(--hctclient01-space-4));
}

.hctclient01-stack {
    display: flex;
    flex-direction: column;
    gap: var(--hctclient01-stack-gap, var(--hctclient01-space-4));
}

@media (max-width: 991px) {
    .hctclient01-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hctclient01-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 639px) {
    .hctclient01-grid--2,
    .hctclient01-grid--3,
    .hctclient01-grid--4 {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* Shared section rhythm. Block CSS may define layout, not vertical rhythm. */
.hctclient01-section { padding-block: var(--hctclient01-section-padding-block); }
.hctclient01-section--compact { padding-block: var(--hctclient01-section-padding-block-sm); }

/*
 * Page layout (content+sidebar / fullwidth) và card shell dùng chung.
 * Dùng cho cả Category và Detail nên phải nằm ở core (luôn được load),
 * không được đặt trong CSS riêng của Category/Detail.
 */
.hctclient01-page-layout{padding:clamp(28px,4vw,54px) 0}
.hctclient01-page-layout--content-sidebar .hctclient01-page-layout__container{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,320px);gap:clamp(24px,3vw,38px);align-items:start}
.hctclient01-page-layout__content{min-width:0}

.hctclient01-card{border:1px solid var(--hctclient01-border,#f0d7d1);border-radius:20px;background:#fff;box-shadow:0 12px 34px rgba(91,39,31,.08);transition:transform .2s ease,box-shadow .2s ease}
.hctclient01-card--hover:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(91,39,31,.11)}
.hctclient01-card h2 a,.hctclient01-card h3 a{color:var(--hctclient01-text,#4c3732);text-decoration:none}
.hctclient01-card p{margin:0;color:var(--hctclient01-muted,#76635e);font-size:var(--hctclient01-text-body,.98rem);line-height:1.65}
.hctclient01-category-placeholder{display:block;width:100%;height:100%;background:linear-gradient(135deg,#fff1ec,#f7d9cf)}

.hctclient01-category-sidebar{display:grid;gap:20px;position:sticky;top:20px}
.hctclient01-category-sidebar__box{padding:18px;border:1px solid var(--hctclient01-border,#f0d7d1);border-radius:18px;background:#fff;box-shadow:0 10px 30px rgba(91,39,31,.07)}
.hctclient01-category-sidebar__title{margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--hctclient01-border,#f0d7d1);font-size:var(--hctclient01-text-panel-title,1.2rem);line-height:1.3}
.hctclient01-sidebar-news{display:grid;gap:14px}
.hctclient01-sidebar-news__item{display:grid;grid-template-columns:78px minmax(0,1fr);gap:11px;align-items:start}
.hctclient01-sidebar-news__media{display:block;aspect-ratio:1;overflow:hidden;border-radius:10px;background:linear-gradient(135deg,#fff1ec,#f7d9cf)}
.hctclient01-sidebar-news__media img{width:100%;height:100%;object-fit:cover}
.hctclient01-sidebar-news h3{margin:0;font-size:.95rem;line-height:1.4}
.hctclient01-sidebar-news h3 a{color:var(--hctclient01-text,#4c3732);text-decoration:none}

@media(max-width:1024px){.hctclient01-page-layout--content-sidebar .hctclient01-page-layout__container{grid-template-columns:minmax(0,1fr) 270px}}
@media(max-width:820px){.hctclient01-page-layout--content-sidebar .hctclient01-page-layout__container{grid-template-columns:1fr}.hctclient01-category-sidebar{position:static}}
@media(max-width:640px){.hctclient01-page-layout{padding:24px 0}}
@media(prefers-reduced-motion:reduce){.hctclient01-card{transition:none!important}}