/* ================================================================
   CL THEME — Base: reset, typography, component dùng chung
   ================================================================ */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body.cl-theme {
    margin: 0;
    min-height: 100vh;
    background-color: var(--cl-ink-700);
    color: var(--cl-text);
    font-family: var(--cl-font-body);
    font-size: 15px;
    line-height: 1.6;
    font-variant-numeric: lining-nums;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.cl-theme img, .cl-theme svg, .cl-theme video { max-width: 100%; }
.cl-theme img { height: auto; border: 0; }

.cl-theme a {
    color: var(--cl-gold-200);
    text-decoration: none;
    transition: color var(--cl-dur) var(--cl-ease);
}
.cl-theme a:hover { color: var(--cl-gold-100); }

.cl-theme h1, .cl-theme h2, .cl-theme h3, .cl-theme h4, .cl-theme h5, .cl-theme h6 {
    margin: 0 0 0.6em;
    font-family: var(--cl-font-display);
    font-weight: 700;
    line-height: 1.2;
    color: var(--cl-text-strong);
}
.cl-theme p { margin: 0 0 1em; }
.cl-theme button { font-family: inherit; }

.cl-theme ::selection { background: var(--cl-gold-500); color: #fff; }

.cl-theme ::-webkit-scrollbar { width: 8px; height: 8px; }
.cl-theme ::-webkit-scrollbar-track { background: var(--cl-ink-900); }
.cl-theme ::-webkit-scrollbar-thumb { background: var(--cl-ink-400); border-radius: 4px; }
.cl-theme ::-webkit-scrollbar-thumb:hover { background: var(--cl-gold-600); }

.cl-sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

:focus-visible { outline: 1px solid var(--cl-gold-200); outline-offset: 3px; }

/* ---------- Container ---------- */
.cl-container {
    width: 100%;
    max-width: calc(var(--cl-container) + var(--cl-gutter) * 2);
    margin: 0 auto;
    padding: 0 var(--cl-gutter);
}
.cl-container--narrow { max-width: calc(var(--cl-container-narrow) + var(--cl-gutter) * 2); }
.cl-container--wide { max-width: calc(var(--cl-container-wide) + var(--cl-gutter) * 2); }

.cl-main { display: block; }
.cl-page { padding: 56px 0 96px; }

/* ---------- Typography helpers ---------- */
.cl-title {
    margin: 0;
    font-family: var(--cl-font-display);
    font-weight: 700;
    font-size: clamp(26px, 3vw, 34px);
    line-height: 1.2;
    letter-spacing: var(--cl-tracking-display);
    text-transform: uppercase;
    background: var(--cl-grad-gold-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.cl-theme .cl-title { color: transparent; }
.cl-title--xl { font-size: clamp(34px, 5vw, 56px); }
.cl-title--md { font-size: clamp(22px, 2.6vw, 28px); }
.cl-title--sm { font-size: clamp(18px, 2vw, 22px); }

.cl-kicker {
    display: inline-block;
    font-family: var(--cl-font-display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: var(--cl-tracking-caps);
    text-transform: uppercase;
    color: var(--cl-orange);
}

.cl-lead {
    font-size: 17px;
    line-height: 1.75;
    color: var(--cl-text);
}

.cl-muted { color: var(--cl-text-dim); }
.cl-gold { color: var(--cl-gold-200); }
.cl-orange { color: var(--cl-orange); }
.cl-center { text-align: center; }

/* Đường kẻ vàng có hình thoi ở giữa: —◆— */
.cl-divider {
    position: relative;
    display: block;
    width: min(160px, 100%);
    height: 9px;
    margin: 14px 0;
}
.cl-divider::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 4px;
    height: 1px;
    background: var(--cl-grad-gold-line);
}
.cl-divider::after {
    content: "";
    position: absolute;
    left: 50%; top: 0;
    width: 7px; height: 7px;
    margin-left: -4px;
    background: var(--cl-orange);
    transform: rotate(45deg);
}
.cl-divider--center { margin-left: auto; margin-right: auto; }
.cl-divider--left::before { background: linear-gradient(90deg, var(--cl-gold-200), var(--cl-gold-400) 40%, transparent); }
.cl-divider--left::after { left: 0; margin-left: 0; }

/* Tiêu đề section chuẩn: kicker + title + divider */
.cl-heading { margin-bottom: 36px; }
.cl-heading--center { text-align: center; }
.cl-heading--center .cl-divider { margin-left: auto; margin-right: auto; }

/* ---------- Buttons ---------- */
.cl-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 26px;
    border: 1px solid transparent;
    border-radius: var(--cl-radius);
    font-family: var(--cl-font-body);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: filter var(--cl-dur) var(--cl-ease), transform var(--cl-dur) var(--cl-ease), background var(--cl-dur) var(--cl-ease), color var(--cl-dur) var(--cl-ease), border-color var(--cl-dur) var(--cl-ease);
    user-select: none;
}
.cl-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.cl-btn:active { transform: translateY(0); filter: brightness(0.96); }
.cl-btn[disabled], .cl-btn.is-disabled { opacity: 0.5; pointer-events: none; }

/* Nút chính: nền vàng-cam gradient, chữ nâu đậm */
.cl-btn--gold { background: var(--cl-grad-gold); color: #2a1100; box-shadow: 0 6px 18px rgba(255, 168, 0, 0.22); }
.cl-theme a.cl-btn--gold, .cl-theme a.cl-btn--gold:hover { color: #2a1100; }
/* Nút viền: nền nâu trong, viền vàng, chữ cam */
.cl-btn--ghost { background: rgba(13, 4, 0, 0.7); color: var(--cl-orange); border-color: var(--cl-gold-a50); }
.cl-theme a.cl-btn--ghost, .cl-theme a.cl-btn--ghost:hover { color: var(--cl-orange); }
.cl-btn--ghost:hover { border-color: var(--cl-orange); background: rgba(255, 168, 0, 0.08); filter: none; }
.cl-btn--red { background: var(--cl-grad-btn-red); color: #fff1e0; border-color: rgba(255, 168, 0, 0.25); }
.cl-theme a.cl-btn--red, .cl-theme a.cl-btn--red:hover { color: #fff1e0; }
.cl-btn--light { background: #fff4dc; color: #2a1100; }
.cl-theme a.cl-btn--light, .cl-theme a.cl-btn--light:hover { color: #2a1100; }
.cl-btn--brown { background: linear-gradient(180deg, #5a3015 0%, #3a1d0a 100%); color: var(--cl-gold-100); border-color: var(--cl-gold-a30); }
.cl-theme a.cl-btn--brown, .cl-theme a.cl-btn--brown:hover { color: var(--cl-gold-100); }

.cl-btn--sm { min-height: 34px; padding: 0 16px; font-size: 13px; }
.cl-btn--lg { min-height: 52px; padding: 0 36px; font-size: 16px; }
.cl-btn--block { display: flex; width: 100%; }

/* Nút chữ đơn giản có mũi tên (Xem thêm →) */
.cl-link-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--cl-font-display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: var(--cl-tracking-caps);
    text-transform: uppercase;
    color: var(--cl-orange);
}
.cl-link-more::after {
    content: "";
    width: 22px; height: 1px;
    background: currentColor;
    transition: width var(--cl-dur) var(--cl-ease);
}
.cl-link-more:hover::after { width: 34px; }

/* ---------- Frames & panels ---------- */
.cl-frame {
    position: relative;
    border: 1px solid var(--cl-gold-a30);
    border-radius: var(--cl-radius);
}

.cl-panel {
    background: var(--cl-grad-panel);
    background-color: var(--cl-ink-700);
    box-shadow: var(--shadow-card);
    border-radius: var(--cl-radius);
    padding: 28px;
}
.cl-panel__title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 20px;
    font-family: var(--cl-font-display);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--cl-gold-200);
    text-transform: uppercase;
}
.cl-panel__title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--cl-gold-a50), transparent);
}

/* ---------- Tabs ---------- */
.cl-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}
.cl-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 18px;
    border: 1px solid var(--cl-gold-a30);
    border-radius: 999px;
    background: rgba(13, 4, 0, 0.5);
    color: var(--cl-text);
    font-family: var(--cl-font-body);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: color var(--cl-dur) var(--cl-ease), background var(--cl-dur) var(--cl-ease), border-color var(--cl-dur) var(--cl-ease);
}
.cl-theme a.cl-tab { color: var(--cl-text); }
.cl-tab:hover, .cl-theme a.cl-tab:hover { color: var(--cl-orange); border-color: var(--cl-orange); }
.cl-tab.is-active, .cl-theme a.cl-tab.is-active {
    color: #2a1100;
    background: var(--cl-grad-gold);
    border-color: transparent;
}

/* Tab có số thứ tự lớn kiểu "01 WINDS" */
.cl-numtabs {
    display: flex;
    justify-content: center;
    gap: clamp(16px, 4vw, 64px);
    margin: 0;
    padding: 0;
    list-style: none;
}
.cl-numtab {
    position: relative;
    padding: 6px 2px 12px;
    border: 0;
    background: none;
    color: var(--cl-text-faint);
    font-family: var(--cl-font-display);
    font-size: clamp(18px, 2vw, 28px);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color var(--cl-dur) var(--cl-ease);
}
.cl-numtab small {
    display: block;
    margin-bottom: 2px;
    font-size: 12px;
    letter-spacing: 0.2em;
    color: var(--cl-gold-500);
}
.cl-numtab::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: var(--cl-grad-gold-line);
    transform: scaleX(0);
    transition: transform var(--cl-dur-slow) var(--cl-ease-out);
}
.cl-numtab:hover { color: var(--cl-text); }
.cl-numtab.is-active { color: var(--cl-gold-200); }
.cl-numtab.is-active::after { transform: scaleX(1); }

.cl-tabpanel { display: none; }
.cl-tabpanel.is-active { display: block; animation: cl-fade-in 0.5s var(--cl-ease) both; }

/* ---------- Badge / tag ---------- */
.cl-tag {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(255, 168, 0, 0.14);
    color: var(--cl-orange);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.cl-tag--event { background: rgba(212, 175, 55, 0.16); color: var(--cl-gold-200); }
.cl-tag--community { background: rgba(111, 174, 138, 0.16); color: #a9d6bb; }

.cl-badge {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border: 1px solid var(--cl-gold-a50);
    border-radius: 999px;
    color: var(--cl-gold-200);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
}
.cl-badge--red { border-color: rgba(208, 85, 63, 0.6); color: #f0b3a5; }
.cl-badge--jade { border-color: rgba(111, 174, 138, 0.6); color: #a9d6bb; }

.cl-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--cl-jade);
    box-shadow: 0 0 0 3px rgba(111, 174, 138, 0.2);
}
.cl-dot--off { background: var(--cl-danger); box-shadow: 0 0 0 3px rgba(208, 85, 63, 0.2); }

/* ---------- Forms ---------- */
.cl-field { margin-bottom: 18px; }
.cl-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--cl-gold-300);
}
.cl-input, .cl-select, .cl-textarea {
    display: block;
    width: 100%;
    min-height: 46px;
    padding: 10px 14px;
    border: 1px solid var(--cl-line-strong);
    border-radius: var(--cl-radius);
    background: rgba(10, 9, 8, 0.55);
    color: var(--cl-text-strong);
    font-family: var(--cl-font-body);
    font-size: 16px;
    transition: border-color var(--cl-dur) var(--cl-ease), box-shadow var(--cl-dur) var(--cl-ease);
}
.cl-textarea { min-height: 120px; resize: vertical; }
.cl-input::placeholder, .cl-textarea::placeholder { color: var(--cl-text-faint); }
.cl-input:focus, .cl-select:focus, .cl-textarea:focus {
    outline: none;
    border-color: var(--cl-gold-400);
    box-shadow: 0 0 0 3px var(--cl-gold-a20);
}
.cl-help { margin-top: 6px; font-size: 13px; color: var(--cl-text-dim); }
.cl-error, .field-validation-error, .validation-summary-errors {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: #f0a08f;
}
.validation-summary-errors ul { margin: 0; padding-left: 18px; }
.input-validation-error { border-color: var(--cl-danger) !important; }

/* ---------- Alerts ---------- */
.cl-alert {
    position: relative;
    margin: 0 0 20px;
    padding: 14px 18px 14px 20px;
    border: 1px solid var(--cl-line-strong);
    border-left: 3px solid var(--cl-gold-400);
    border-radius: var(--cl-radius);
    background: rgba(44, 20, 5, 0.85);
    color: var(--cl-text);
}
.cl-alert.validation-summary-valid { display: none; }
.cl-alert ul { margin: 0; padding-left: 18px; }
.cl-alert--success { border-left-color: var(--cl-jade); }
.cl-alert--error { border-left-color: var(--cl-danger); }
.cl-alert--warning { border-left-color: var(--cl-ember); }

/* ---------- Tables ---------- */
.cl-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cl-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}
.cl-table th {
    padding: 12px 14px;
    border-bottom: 1px solid var(--cl-gold-a50);
    background: rgba(90, 48, 21, 0.55);
    color: var(--cl-gold-200);
    font-family: var(--cl-font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}
.cl-table td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--cl-line);
    color: var(--cl-text);
    vertical-align: middle;
}
.cl-table tbody tr { transition: background var(--cl-dur) var(--cl-ease); }
.cl-table tbody tr:hover { background: var(--cl-gold-a10); }
.cl-table--compact th, .cl-table--compact td { padding: 8px 10px; font-size: 14px; }

/* Huy hiệu hạng 1-2-3 */
.cl-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    font-family: var(--cl-font-display);
    font-weight: 700;
    color: var(--cl-text-dim);
}
.cl-rank--1, .cl-rank--2, .cl-rank--3 { border-radius: 50%; color: #2a1100; }
.cl-rank--1 { background: linear-gradient(135deg, #ffe17a, #d4a017); }
.cl-rank--2 { background: linear-gradient(135deg, #f4f4f4, #a9adb3); }
.cl-rank--3 { background: linear-gradient(135deg, #ff9a6b, #c0392b); color: #fff; }

/* ---------- Pagination ---------- */
.cl-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 40px 0 0;
}
.cl-page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border: 1px solid var(--cl-gold-a30);
    border-radius: var(--cl-radius);
    background: rgba(13, 4, 0, 0.6);
    color: var(--cl-text);
    font-family: var(--cl-font-display);
    font-size: 14px;
    font-weight: 700;
}
.cl-theme a.cl-page-link { color: var(--cl-text); }
.cl-theme a.cl-page-link:hover { border-color: var(--cl-gold-400); color: var(--cl-gold-200); }
.cl-page-link.is-active { border-color: var(--cl-gold-400); background: var(--cl-grad-gold); color: #2a1100; }
.cl-page-link.is-disabled { opacity: 0.35; pointer-events: none; }
.cl-page-info { margin: 0 6px 0 12px; color: var(--cl-text-dim); font-size: 14px; }
.cl-page-jump { display: inline-flex; gap: 6px; }
.cl-page-jump input {
    width: 56px; height: 38px;
    padding: 0 8px;
    border: 1px solid var(--cl-line-strong);
    background: rgba(10, 9, 8, 0.6);
    color: var(--cl-text-strong);
    text-align: center;
    font-size: 15px;
}

/* ---------- Empty state ---------- */
.cl-empty {
    padding: 56px 24px;
    text-align: center;
    color: var(--cl-text-dim);
}
.cl-empty__icon {
    display: block;
    width: 56px; height: 56px;
    margin: 0 auto 16px;
    border: 1px solid var(--cl-gold-a30);
    transform: rotate(45deg);
    position: relative;
}
.cl-empty__icon::after {
    content: "";
    position: absolute;
    inset: 12px;
    border: 1px solid var(--cl-gold-a50);
}
.cl-empty__title {
    margin: 0 0 6px;
    font-family: var(--cl-font-display);
    font-size: 22px;
    color: var(--cl-gold-200);
}

/* ---------- Nội dung bài viết (HTML từ TinyMCE) ---------- */
.cl-prose {
    color: var(--cl-text);
    font-size: 16px;
    line-height: 1.85;
    overflow-wrap: anywhere;
}
.cl-prose > :first-child { margin-top: 0; }
.cl-prose h1, .cl-prose h2, .cl-prose h3, .cl-prose h4 {
    margin: 1.8em 0 0.7em;
    color: var(--cl-gold-200);
    letter-spacing: 0.03em;
}
.cl-prose h1 { font-size: 34px; }
.cl-prose h2 {
    font-size: 28px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--cl-gold-a30);
}
.cl-prose h3 { font-size: 23px; }
.cl-prose h4 { font-size: 19px; }
.cl-prose p { margin: 0 0 1.15em; }
.cl-prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--cl-gold-a50); }
.cl-prose strong, .cl-prose b { color: var(--cl-text-strong); }
.cl-prose ul, .cl-prose ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.cl-prose li { margin-bottom: 0.4em; }
.cl-prose ul li::marker { color: var(--cl-gold-400); }
.cl-prose img {
    display: block;
    max-width: 100%;
    height: auto !important;
    margin: 1.4em auto;
    border-radius: var(--cl-radius);
}
.cl-prose blockquote {
    margin: 1.5em 0;
    padding: 14px 20px;
    border-left: 3px solid var(--cl-gold-400);
    background: rgba(90, 48, 21, 0.3);
    color: var(--cl-text);
    font-style: italic;
}
.cl-prose hr { border: 0; height: 1px; margin: 2em 0; background: var(--cl-grad-gold-line); }
.cl-prose table {
    width: 100% !important;
    margin: 1.4em 0;
    border-collapse: collapse;
    font-size: 15px;
    display: block;
    overflow-x: auto;
}
.cl-prose th, .cl-prose td {
    padding: 10px 12px;
    border: 1px solid var(--cl-line-strong);
}
.cl-prose th, .cl-prose thead td {
    background: rgba(90, 48, 21, 0.55);
    color: var(--cl-gold-200);
    font-weight: 700;
}
.cl-prose iframe, .cl-prose video { display: block; max-width: 100%; margin: 1.4em auto; }
.cl-prose code { padding: 1px 6px; background: rgba(255, 255, 255, 0.06); font-size: 0.9em; }

/* ---------- Trang bài viết (tin tức, hướng dẫn) ---------- */
.cl-article-page { padding-top: 24px; }
.cl-article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    margin-bottom: 22px;
    font-size: 14px;
    color: var(--cl-text-dim);
}
.cl-article-meta > span:not(.cl-badge)::before,
.cl-article-meta > time + span::before {
    content: "";
    display: inline-block;
    width: 4px; height: 4px;
    margin-right: 14px;
    vertical-align: middle;
    background: var(--cl-gold-500);
    transform: rotate(45deg);
}
.cl-article { padding: 40px 48px 44px; }
.cl-article__cover {
    margin: -40px -48px 32px;
    border-bottom: 1px solid var(--cl-gold-a20);
}
.cl-article__cover img { display: block; width: 100%; height: auto; }
.cl-article-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 28px;
}

@media (max-width: 768px) {
    .cl-article { padding: 24px 18px 28px; }
    .cl-article__cover { margin: -24px -18px 22px; }
}

/* ---------- Reveal animation ---------- */
@keyframes cl-fade-in {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}
@keyframes cl-fade-up {
    from { opacity: 0; transform: translateY(32px); }
    to { opacity: 1; transform: none; }
}
@keyframes cl-scroll-hint {
    0% { transform: scaleY(0); transform-origin: top; }
    45% { transform: scaleY(1); transform-origin: top; }
    55% { transform: scaleY(1); transform-origin: bottom; }
    100% { transform: scaleY(0); transform-origin: bottom; }
}

.js [data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity var(--cl-dur-slow) var(--cl-ease-out), transform var(--cl-dur-slow) var(--cl-ease-out);
    transition-delay: calc(var(--reveal-delay, 0) * 120ms);
}
.js [data-reveal="left"] { transform: translateX(-36px); }
.js [data-reveal="right"] { transform: translateX(36px); }
.js [data-reveal="fade"] { transform: none; }
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .js [data-reveal] { opacity: 1; transform: none; transition: none; }
    *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---------- Grid helpers ---------- */
.cl-grid { display: grid; gap: 24px; }
.cl-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cl-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cl-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1024px) {
    .cl-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cl-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    :root { --cl-gutter: 16px; }
    .cl-grid--2, .cl-grid--3, .cl-grid--4 { grid-template-columns: minmax(0, 1fr); }
    .cl-panel { padding: 20px 16px; }
    .cl-btn { padding: 0 22px; }
    .cl-btn--lg { min-height: 50px; padding: 0 30px; font-size: 16px; }
    .cl-page { padding: 36px 0 64px; }
    .cl-prose { font-size: 16px; }
}