/* Container filter */
    .container-filter {
        background: #fff;
        padding: 20px 25px;
        border-radius: 12px;
        box-shadow: 0 0 12px rgb(0 0 0 / 0.08);
        display: none;
        /* Ẩn mặc định */
        flex-wrap: nowrap;
        /* Không wrap để giữ các phần tử trên cùng một dòng */
        gap: 20px;
        align-items: flex-start;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        width: 100%;
        justify-content: space-between;
    }

    /* Show filter when active */
    .container-filter.active {
        display: flex;
    }

    /* Filter group */
    .filter-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
        min-width: 200px;
        flex: 1;
        max-width: none;
    }

    .filter-group label {
        font-weight: 600;
        font-size: 14px;
        color: #333;
    }

    /* Date range */
    .date-range {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
    }

    .date-range input[type="text"] {
        flex: 1;
        min-width: 120px;
        padding: 8px 10px;
        font-size: 14px;
        border: 1.5px solid #ccc;
        border-radius: 8px;
        transition: border-color 0.2s ease;
        cursor: pointer;
    }

    .date-range input[type="text"]:focus {
        border-color: #2563eb;
        outline: none;
    }

    .date-range span {
        color: #555;
        font-weight: 600;
    }

    /* Select2 - Chỉnh style cho mỗi option xuống mỗi dòng */
    select[multiple] {
        height: auto !important;
        min-height: 110px;
        padding: 0;
        border-radius: 8px;
        font-size: 14px;
        color: #444;
        cursor: pointer;
        user-select: none;
        width: 100% !important;
        min-width: 180px;
        /* Đảm bảo select box chiếm toàn bộ chiều rộng */
    }

    select[multiple] option {
        display: block;
        /* Đảm bảo mỗi option hiển thị trên một dòng */
    }

    /* Filter actions */
    .filter-actions {
        display: flex;
        gap: 10px;
        align-items: flex-end;
        flex-shrink: 0;
        margin-top: 20px;
    }

    .filter-actions .btn {
        white-space: nowrap;
        min-width: 80px;
    }

    /* Responsive design */
    @media (max-width: 1200px) {
        .container-filter {
            gap: 15px;
            flex-wrap: wrap;
        }
        
        .filter-group {
            min-width: 180px;
            flex: 1 1 250px;
        }
        
        .filter-actions {
            flex-basis: 100%;
            justify-content: flex-end;
            margin-top: 10px;
        }
    }

    @media (max-width: 768px) {
        .container-filter {
            flex-direction: column;
            gap: 15px;
        }
        
        .filter-group {
            min-width: 100%;
            flex: none;
        }
        
        .date-range {
            flex-direction: column;
            gap: 10px;
        }
        
        .date-range input[type="text"] {
            max-width: 100%;
        }
        
        .filter-actions {
            flex-basis: auto;
            justify-content: center;
            margin-top: 15px;
        }
    }

    /* Table */
    table {
        width: 100%;
        border-collapse: collapse;
        background: #f5faff;
        border-radius: 8px;
        overflow: hidden;
        margin-top: 20px;
    }

    thead tr {
        background: #acd4ff;
    }

    thead th {
        font-weight: 700;
        padding: 12px 15px;
        border-bottom: 1px solid #a6c4f4;
        text-align: center;
        color: #143d77;
    }

    tbody tr {
        background: #fff;
        border-bottom: 1px solid #e4e8f3;
    }

    tbody td {
        padding: 12px 15px;
        text-align: center;
        color: #495057;
    }

    /* Status indicators - use consistent styling from admin-common.css */
    .status-active,
    .status-stop {
        display: inline-block;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        vertical-align: middle;
    }

    .status-active {
        background: #16a34a;
        box-shadow: 0 0 0 3px rgba(34, 197, 94, .22);
    }

    .status-stop {
        background: #ef4444;
        box-shadow: 0 0 0 3px rgba(248, 113, 113, .22);
    }

    /* Header status */
    .header-status {
        margin-bottom: 15px;
        font-weight: 600;
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .header-status-left {
        display: flex;
        gap: 15px;
        align-items: center;
    }

    .header-status .active-dot,
    .header-status .stop-dot {
        display: inline-block;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        margin-right: 6px;
    }

    .active-dot {
        background-color: #2e8b57;
    }

    .stop-dot {
        background-color: #6c757d;
    }

    /* Button filter */
    .btn-filter {
        border: 1px solid #007bff;
        background-color: #007bff;
        color: white;
        padding: 6px 14px;
        border-radius: 6px;
        cursor: pointer;
        font-size: 14px;
        display: flex;
        align-items: center;
        gap: 6px;
        user-select: none;
        transition: background-color 0.2s ease, border-color 0.2s ease;
    }

    .btn-filter:hover {
        background-color: #0056b3;
        border-color: #0056b3;
    }

    /* Responsive */
    @media (max-width: 768px) {
        .container-filter {
            flex-direction: column;
            /* Đảm bảo các phần tử trong filter xếp chồng lên nhau trên màn hình nhỏ */
        }

        .filter-group {
            min-width: 100%;
            /* Đảm bảo mỗi filter group chiếm 100% chiều rộng */
        }
    }

    .btn-edit-icon {
        padding: 5px;
        color: #333;
        font-size: 16px;
    }

    .btn-edit-icon:hover {
        color: #007bff;
    }

    .btn-edit {
        display: inline-block;
        padding: 4px 10px;
        background-color: #007bff;
        color: #fff;
        font-size: 14px;
        border-radius: 4px;
        text-decoration: none;
    }

    .btn-edit:hover {
        background-color: #0056b3;
    }