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

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

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

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

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

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

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

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

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

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

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


/* Shared section rhythm. Block CSS may define layout, not vertical rhythm. */
.hctclient02-section { padding-block: var(--hctclient02-section-padding-block); }
.hctclient02-section--compact { padding-block: var(--hctclient02-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.
 */
.hctclient02-page-layout{padding:clamp(28px,4vw,54px) 0}
.hctclient02-page-layout--content-sidebar .hctclient02-page-layout__container{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,320px);gap:clamp(24px,3vw,38px);align-items:start}
.hctclient02-page-layout__content{min-width:0}

/*
 * Header-row tràn full-width phía trên grid content+sidebar (dùng cho tiêu đề trang Detail) —
 * để tiêu đề có trọn chiều rộng container thay vì bị bó hẹp trong cột content (chỉ ~842px khi
 * có sidebar), tránh xuống dòng non ở font-size lớn. Bỏ padding-top của section theo sau vì
 * header-row đã tự có khoảng cách riêng.
 */
.hctclient02-page-layout__header-row{padding-top:clamp(28px,4vw,54px)}
.hctclient02-page-layout__header-row+.hctclient02-page-layout{padding-top:0}

.hctclient02-card{border:1px solid var(--hctclient02-color-border);border-radius:20px;background:#fff;box-shadow:0 12px 34px rgba(20,61,47,.08);transition:transform .2s ease,box-shadow .2s ease}
.hctclient02-card--hover:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(20,61,47,.11)}
.hctclient02-card h2 a,.hctclient02-card h3 a{color:var(--hctclient02-text,#17231e);text-decoration:none}
.hctclient02-card p{margin:0;color:var(--hctclient02-muted,#56655d);font-size:var(--hctclient02-text-body,.98rem);line-height:1.65}
.hctclient02-category-placeholder{display:block;width:100%;height:100%;background:linear-gradient(135deg,var(--hctclient02-color-primary-soft),var(--hctclient02-color-surface-soft))}

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

/* Dưới 1024px: bỏ hẳn sidebar, content full-width — tránh ép 2 cột nội dung vào cột content vốn đã bị sidebar ăn chỗ. */
@media(max-width:1024px){
    .hctclient02-page-layout--content-sidebar .hctclient02-page-layout__container{display:block}
    .hctclient02-page-layout--content-sidebar .hctclient02-page-layout__sidebar{display:none}
}
@media(max-width:640px){.hctclient02-page-layout{padding:24px 0}}
@media(prefers-reduced-motion:reduce){.hctclient02-card{transition:none!important}}