/* ==========================================================================
   ECOSYSTEM PROJECT FILTER & PAGINATION UI (TABS & PAGINATION ONLY)
   Áp dụng chuẩn nhận diện Hệ sinh thái Nexholdings - Nexcon - Nexsa
   ========================================================================== */

/* 1. Thanh Tabs Lọc Danh Mục Dạng Viên Thuốc */
.eco-filter-nav,
.tc-latest-cases-style1 .filter .links.eco-filter-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 45px;
    position: relative;
    z-index: 100;
}

.eco-filter-btn,
.tc-latest-cases-style1 .filter .links a.eco-filter-btn,
.tc-latest-cases-style1 .filter .links a.filter-btn {
    display: inline-block;
    padding: 7px 22px;
    border-radius: 999px;
    border: 1px solid #e0e0e0;
    background: transparent;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.5;
    color: #333333;
    text-decoration: none;
    transition: all 0.25s ease;
    cursor: pointer;
    margin: 0;
    position: relative;
    z-index: 101;
    pointer-events: auto !important;
    user-select: none;
}

.eco-filter-btn *,
.tc-latest-cases-style1 .filter .links a.eco-filter-btn *,
.tc-latest-cases-style1 .filter .links a.filter-btn * {
    pointer-events: none;
}

.eco-filter-btn:hover,
.tc-latest-cases-style1 .filter .links a.eco-filter-btn:hover,
.tc-latest-cases-style1 .filter .links a.filter-btn:hover {
    border-color: #fb4e01;
    color: #fb4e01;
}

.eco-filter-btn.active,
.tc-latest-cases-style1 .filter .links a.eco-filter-btn.active,
.tc-latest-cases-style1 .filter .links a.filter-btn.active {
    border: 1.5px solid #fb4e01;
    color: #fb4e01;
    font-weight: 600;
    background: transparent;
}

/* Xóa bỏ đường gạch ngang mờ (border-top) mặc định trên trang dự án */
.portfolio-pg-style1 .tc-latest-cases-style1 .content,
.eco-project-section .content {
    border-top: none !important;
}

/* 2. Thanh Phân Trang (Đã loại bỏ theo yêu cầu: Hiển thị toàn bộ dự án khi cuộn) */
.eco-pagination-wrap,
.nexcon-project-pagination-wrap,
.eco-pagination-nav,
.nexcon-project-pagination {
    display: none !important;
}

.eco-pagination-nav .pagination,
.nexcon-project-pagination .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.eco-pagination-nav .page-item,
.nexcon-project-pagination .page-item {
    margin: 0;
}

.eco-pagination-nav .page-link,
.nexcon-project-pagination .page-link {
    border-radius: 50% !important;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e2e2;
    background: #ffffff;
    color: #333333;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.eco-pagination-nav .page-link:hover,
.nexcon-project-pagination .page-link:hover {
    border-color: #fb4e01;
    color: #fb4e01;
    background: #ffffff;
}

.eco-pagination-nav .page-item.active .page-link,
.nexcon-project-pagination .page-item.active .page-link {
    background-color: #fb4e01 !important;
    border-color: #fb4e01 !important;
    color: #ffffff !important;
}

.eco-pagination-nav .page-item.disabled .page-link,
.nexcon-project-pagination .page-item.disabled .page-link {
    opacity: 0.6;
    border-color: #eee;
    cursor: not-allowed;
    background: transparent;
}

/* 3. Thông báo khi không có bài */
.eco-no-projects {
    font-size: 16px;
    color: #666666;
    margin: 0;
}

/* 4. Loading State & Grid transitions */
.eco-projects-grid {
    transition: opacity 0.3s ease;
}

.eco-projects-grid.loading {
    opacity: 0.7;
    min-height: 250px;
}

/* 5. Căn chỉnh hàng dự án (Grid Alignment)
   Khắc phục lỗi khi dòng có 1 hoặc 2 dự án bị tách dạt về 2 phía (do flex justify-content: space-between của .row).
   Đảm bảo các card dự án luôn căn từ trái sang phải theo bố cục chuẩn của lưới 3 cột. */
.eco-projects-grid,
.eco-projects-grid.row,
.cases-content.row,
.tc-latest-cases-style1 .cases-content,
.tc-latest-cases-style1 .cases-content.row,
.portfolio-pg-style1 .tc-latest-cases-style1 .content .cases-content,
.portfolio-pg-style1 .tc-latest-cases-style1 .content .cases-content.row {
    justify-content: flex-start !important;
}