/* Áp dụng cho cả trang */
body {
    /* Đường dẫn tới ảnh background */
    background-image: url('../images/background.png'); /* điều chỉnh đường dẫn cho đúng */
    
    /* Không lặp lại ảnh */
    background-repeat: no-repeat;
    
    /* Đặt ở giữa ngang – dọc */
    background-position: center center;
    
    /* Cố định ảnh khi cuộn trang */
    background-attachment: fixed;
    
    /* Giữ tỉ lệ ảnh, phủ kín khung nhìn mà không biến dạng */
    background-size: cover;
    
    /* Nếu muốn ảnh không bị cắt, có thể dùng contain thay cover (tùy ý) */
    /* background-size: contain; */
    
    /* Màu nền dự phòng khi ảnh chưa load */
    background-color: #f5f5f5;
}

/* Custom styles */
.card {
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.table th {
    font-weight: 600;
    border-top: none;
}

.table-hover tbody tr:hover {
    background-color: #f8f9fa;
}

.pagination .page-link {
    border-radius: 8px;
    margin: 0 2px;
    border: 1px solid #dee2e6;
}

.pagination .page-item.active .page-link {
    background-color: #007bff;
    border-color: #007bff;
}

/* Responsive enhancements */
@media (max-width: 768px) {
    .table-responsive {
        font-size: 0.875rem;
    }
    
    .pagination {
        font-size: 0.875rem;
    }
    
    .card-body {
        padding: 1rem;
    }
    
    .btn {
        padding: 0.375rem 0.75rem;
        font-size: 0.875rem;
    }
}

@media (max-width: 576px) {
    .pagination .page-link {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }
}

/* Loading spinner */
.loading {
    display: none;
    text-align: center;
    padding: 2rem;
}

.spinner-border {
    width: 3rem;
    height: 3rem;
}

/* Highlight search terms */
.highlight {
    background-color: #fff3cd;
    padding: 2px 4px;
    border-radius: 3px;
}