.article-page .category-tab:not(.category-tab--active):hover {
    color: #075985 !important;
    background: #f2faff !important;
    border-color: #38bdf8 !important;
}

.article-page .category-tab--active:hover {
    color: var(--white) !important;
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

@media screen and (max-width: 640px) {
    .default-article-list-page {
        display: block !important;
        width: auto;
        min-width: 0;
        margin: 14px 12px 32px;
    }

    .default-article-list-page .main-grid__left,
    .default-article-list-page .main-grid__right {
        width: 100%;
        min-width: 0;
    }

    .default-article-list-page .category-tabs {
        display: flex !important;
        flex-wrap: nowrap;
        gap: 8px;
        padding: 10px !important;
        overflow-x: auto;
        border: 1px solid #e7ecf2;
        border-radius: 8px;
        background: #ffffff;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .default-article-list-page .category-tabs::-webkit-scrollbar {
        display: none;
    }

    .default-article-list-page .category-tab {
        flex: 0 0 auto;
        padding: 7px 13px;
        border: 1px solid #e1e7ef;
        border-radius: 4px;
        font-size: 13px;
        line-height: 1.5;
    }

    .default-article-list-page .article-list {
        margin-top: 12px;
        padding: 18px 14px 16px !important;
        border: 1px solid #e7ecf2;
        border-radius: 8px;
        box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
    }

    .default-article-list-page .article-list__header {
        margin-bottom: 4px;
        padding-bottom: 12px;
        border-bottom: 1px solid #e9edf2;
    }

    .default-article-list-page .article-list__title {
        color: #172033;
        font-size: 19px;
        line-height: 1.45;
    }

    .default-article-list-page .article-list__title span,
    .default-article-list-page .article-list__header .u-c-primary {
        font-size: 13px;
    }

    .default-article-list-page .article-item {
        display: grid !important;
        grid-template-columns: 104px minmax(0, 1fr);
        gap: 12px;
        min-width: 0;
        padding: 14px 0;
        border-radius: 0;
        border-bottom: 1px solid #edf0f4;
        box-shadow: none;
        transform: none;
    }

    .default-article-list-page .article-item__img {
        width: 104px;
        height: 82px;
        aspect-ratio: auto;
        border-radius: 6px;
    }

    .default-article-list-page .article-item__content {
        display: grid;
        grid-template-rows: auto 1fr auto;
        min-width: 0;
    }

    .default-article-list-page .article-item__title {
        display: -webkit-box;
        margin: 0 0 4px;
        overflow: hidden;
        color: #273244;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.45;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .default-article-list-page .article-item__brief {
        margin: 0 0 5px;
        color: #7a8494;
        font-size: 12px;
        line-height: 1.5;
        -webkit-line-clamp: 2;
    }

    .default-article-list-page .article-meta {
        gap: 10px;
        color: #97a0ad;
        font-size: 11px;
        line-height: 1.4;
    }

    .default-article-list-page .article-meta__item + .article-meta__item {
        position: relative;
        padding-left: 10px;
    }

    .default-article-list-page .article-meta__item + .article-meta__item::before {
        position: absolute;
        top: 50%;
        left: 0;
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: #bdc5cf;
        content: "";
        transform: translateY(-50%);
    }

    .default-article-list-page .pagination-wrapper,
    .default-article-list-page .pagination-wrapper.flex.flex-end {
        margin-top: 14px;
    }

    .default-article-list-page .main-grid__right {
        margin-top: 26px;
        padding-top: 26px;
        border-top: 8px solid #f4f6f8;
    }

    .default-article-list-page .side-card {
        margin: 0 0 12px !important;
        padding: 18px 15px !important;
        border: 1px solid #e7ecf2;
        border-radius: 6px !important;
        box-shadow: none !important;
    }

    .default-article-list-page .side-card__title {
        margin-bottom: 12px;
        padding: 0;
        border: 0;
        color: #172033;
        font-size: 18px;
        line-height: 1.4;
    }

    .default-article-list-page .hot-item,
    .default-article-list-page .random-item {
        min-height: 40px;
        margin: 0;
        padding: 9px 0;
        border-bottom: 1px solid #edf0f4;
    }

    .default-article-list-page .hot-item:last-child,
    .default-article-list-page .random-item:last-child {
        border-bottom: 0;
    }

    .default-article-list-page .hot-item__link,
    .default-article-list-page .random-item__link {
        display: -webkit-box;
        overflow: hidden;
        color: #344054;
        font-size: 14px;
        line-height: 1.5;
        white-space: normal;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .default-article-list-page .tag-cloud {
        gap: 7px;
    }

    .default-article-list-page .tag {
        padding: 4px 9px;
        border-radius: 4px;
        font-size: 12px;
        line-height: 1.5;
    }
}