/* Scope .archive/.search xuống .container để không match body.archive (WP body_class) */
.container.archive,
.container.search {
    padding-block: var(--vjol-space-10);
}

.archive__header,
.search__header {
    margin-bottom: var(--vjol-space-8);
}

.archive__title,
.search__title {
    margin: 0 0 var(--vjol-space-3);
}

.archive__desc {
    color: var(--vjol-color-text-muted);
    font-size: var(--vjol-fs-lg);
}

.search__query {
    color: var(--vjol-color-primary);
}

/* ---------- Sub-category buttons (trên trang category cha) ---------- */

.archive__subcats {
    margin-bottom: var(--vjol-space-10);
    padding-bottom: var(--vjol-space-8);
    border-bottom: 1px solid var(--vjol-color-border);
}

.archive__subcats-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--vjol-space-2);
}

.archive__subcats-item { margin: 0; }

.archive__subcats-item a {
    display: inline-flex;
    align-items: center;
    gap: var(--vjol-space-2);
    padding: var(--vjol-space-2) var(--vjol-space-4);
    background: var(--vjol-color-surface);
    border: 1px solid var(--vjol-color-border);
    border-radius: var(--vjol-radius-full);
    color: var(--vjol-color-text);
    text-decoration: none;
    font-size: var(--vjol-fs-sm);
    font-weight: var(--vjol-fw-medium);
    line-height: var(--vjol-lh-snug);
    transition:
        border-color var(--vjol-duration-fast) var(--vjol-ease-out),
        background var(--vjol-duration-fast) var(--vjol-ease-out),
        color var(--vjol-duration-fast) var(--vjol-ease-out);
}

.archive__subcats-item a:hover,
.archive__subcats-item a:focus-visible {
    border-color: var(--vjol-color-primary);
    background: var(--vjol-color-bg);
    color: var(--vjol-color-primary);
    outline: none;
}

.archive__subcats-count {
    display: inline-block;
    min-width: 1.5em;
    padding: 0 var(--vjol-space-2);
    background: var(--vjol-color-bg);
    border-radius: var(--vjol-radius-full);
    font-size: var(--vjol-fs-xs);
    font-weight: var(--vjol-fw-semibold);
    color: var(--vjol-color-text-muted);
    text-align: center;
}

.archive__subcats-item a:hover .archive__subcats-count {
    color: var(--vjol-color-primary);
}