﻿/* Pagination style matching sample */
.news-pagination .pagination {
    display: inline-flex;
    gap: 6px;
    padding-left: 0;
    margin: 0;
}
/* Ensure pagination inherits site font when moved outside its original container */
.news-pagination,
.news-pagination .page-item,
.news-pagination .page-item .page-link {
    font-family: inherit !important;
    font-size: 18px;
    line-height: 1;
}

    .news-pagination .page-item .page-link {
        color: #6b6b6b;
        background: transparent;
        border: none;
        padding: 4px 8px;
        border-radius: 4px;
    }

    .news-pagination .page-item.active .page-link {
        color: #e53935; /* red */
        font-weight: 600;
        background: transparent;
    }

    .news-pagination .page-item.disabled .page-link {
        color: #c4c4c4;
    }

    .news-pagination .page-item .page-link:hover {
        text-decoration: none;
        color: #e53935;
    }

.pages-arrow {
    background: #E5E7EA;
    border-radius: 50%;
    color: #1A1D1F;
    aspect-ratio: 1/1;
    width: 28px;
    height: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
}

    .pages-arrow:hover {
        background-color: #F34141;
    }

    .pages-arrow.prev-arrow img {
        transform: rotate(180deg) translateX(1px);
    }

    .pages-arrow.next-arrow img {
        transform: translateX(1px);
    }

.news-pagination {
    display: block; /* đảm bảo là block element */
    width: 100%; /* kéo full chiều ngang container */
    text-align: center; /* vẫn giữ center cho pagination bên trong */
}


    .news-pagination .pagination {
        justify-content: center;
    }
