* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

body {
    background-color: #f0f2f5;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
}

.container, .login-container, .home-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
}

.login-container, .home-container {
    max-width: 400px;
}

h2 {
    text-align: center;
    margin-bottom: 20px;
    color: #333;
}

/* Thêm hoặc cập nhật phần này vào styles.css */
.nav-menu, .home-nav-menu {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between; /* Phân bố đều các nút */
    flex-wrap: wrap; /* Cho phép xuống dòng nếu cần */
}

.nav-menu a, .home-nav-menu a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 15px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-size: 16px;
    margin: 5px; /* Khoảng cách giữa các nút */
    text-align: center;
    flex: 1; /* Phân bổ không gian đều trên máy tính */
    min-width: 100px; /* Độ rộng tối thiểu cho mỗi nút */
    transition: background-color 0.3s; /* Hiệu ứng hover mượt */
}

.nav-menu a i, .home-nav-menu a i {
    margin-right: 5px; /* Khoảng cách giữa icon và text */
}

.nav-menu a:hover, .home-nav-menu a:hover {
    background-color: #0056b3;
}

.logout-btn {
    background-color: #dc3545;
    width: auto; /* Loại bỏ width: 100% để phù hợp với menu ngang */
    padding: 10px 20px;
    margin: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.logout-btn:hover {
    background-color: #c82333;
}
.filter-form, .add-form {
    margin-bottom: 20px;
}

.filter-form input, .filter-form select, .add-form input, .add-form select, .add-form textarea {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 14px;
    width: 100%;
    margin-bottom: 10px;
}

.filter-form input:focus, .add-form input:focus, .add-form textarea:focus {
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
}

.filter-form button, .add-form button, .login-btn, .logout-btn, .action-btn {
    padding: 8px 16px;
    background-color: #c82333;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
}

.filter-form button:hover, .add-form button:hover, .login-btn:hover, .logout-btn:hover, .action-btn:hover {
    background-color: #0056b3;
}

.edit-btn {
    background-color: #28a745;
}

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

.delete-btn {
    background-color: #dc3545;
}

.delete-btn:hover {
    background-color: #c82333;
}

.logout-btn {
    background-color: #dc3545;
    width: 100%;
    padding: 12px;
}

.logout-btn:hover {
    background-color: #c82333;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

th, td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

th {
    background-color: #007bff;
    color: white;
}

tr:hover {
    background-color: #f5f5f5;
}

/* Phần phân trang */
.pagination {
    display: flex;
    justify-content: center;
    gap: 5px; /* Khoảng cách giữa các mục */
    margin-top: 20px; /* Khoảng cách trên từ bảng */
    padding: 0;
    list-style: none; /* Loại bỏ dấu chấm mặc định */
}

.page-item {
    display: inline-block;
}

.page-link {
    display: inline-block;
    padding: 8px 12px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-size: 14px;
    transition: background-color 0.3s, box-shadow 0.3s; /* Hiệu ứng mượt */
    border: 1px solid #007bff; /* Viền để rõ ràng hơn */
}

.page-link:hover {
    background-color: #0056b3;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Bóng nhẹ khi hover */
}

.page-item.active .page-link {
    background-color: #28a745; /* Màu xanh lá cho trang hiện tại */
    color: white;
    border-color: #28a745;
    cursor: default; /* Không cho hover khi active */
}

.page-item.active .page-link:hover {
    background-color: #28a745; /* Ngăn thay đổi màu khi hover */
    box-shadow: none;
}

.page-item.disabled .page-link {
    background-color: #6c757d; /* Màu xám cho nút disabled */
    color: #fff;
    border-color: #6c757d;
    cursor: not-allowed;
    opacity: 0.65; /* Làm mờ để rõ disabled */
}

.page-item.disabled .page-link:hover {
    background-color: #6c757d; /* Ngăn thay đổi màu khi hover */
    box-shadow: none;
}


.filter-toggle {
    display: block;
    padding: 8px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
}

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


/* Responsive cho di động - Giữ nguyên chiều dọc cho trang chủ */
@media (max-width: 480px) {
    .home-nav-menu {
        flex-direction: column; /* Giữ chiều dọc trên di động cho trang chủ */
        align-items: stretch; /* Căn đều các nút */
    }

    .home-nav-menu a, .home-nav-menu .logout-btn {
        font-size: 14px; /* Giữ text hiển thị */
        padding: 8px;
        margin: 5px 0; /* Khoảng cách dọc */
        width: 100%; /* Điền toàn bộ chiều rộng */
    }

    .home-nav-menu a i, .home-nav-menu .logout-btn i {
        margin-right: 5px; /* Giữ khoảng cách giữa icon và text */
    }

    .home-nav-menu a span, .home-nav-menu .logout-btn span {
        display: inline; /* Hiển thị text trên di động cho trang chủ */
    }
    .pagination {
        flex-wrap: wrap; /* Cho phép xuống dòng nếu cần */
        justify-content: center;
        gap: 3px; /* Giảm khoảng cách trên di động */
    }

    .page-link {
        padding: 6px 10px;
        font-size: 12px; /* Giảm kích thước font trên di động */
    }

    .page-item {
        margin-bottom: 5px; /* Khoảng cách dọc giữa các mục nếu xuống dòng */
    }
}

/* Responsive cho máy tính */
@media (min-width: 768px) {
    .nav-menu a span, .nav-menu .logout-btn span,
    .home-nav-menu a span, .home-nav-menu .logout-btn span {
        display: inline; /* Hiển thị text trên máy tính */
    }
    .pagination {
        gap: 10px; /* Tăng khoảng cách trên máy tính */
    }

    .page-link {
        font-size: 16px;
    }
}
/* Responsive cho điện thoại */
@media (max-width: 480px) {
    .nav-menu {
        flex-direction: row; /* Giữ hàng ngang trên di động cho các trang khác */
        justify-content: center; /* Căn giữa các icon */
        padding: 5px 0; /* Giảm padding để tiết kiệm không gian */
    }

    .nav-menu a, .nav-menu .logout-btn {
        font-size: 0; /* Ẩn text trên di động */
        padding: 10px;
        margin: 0 5px; /* Khoảng cách ngang giữa các icon */
        min-width: 40px; /* Độ rộng tối thiểu cho icon */
        width: 40px; /* Cố định chiều rộng icon */
    }

    .nav-menu a i, .nav-menu .logout-btn i {
        margin-right: 0; /* Loại bỏ khoảng cách vì không có text */
    }

    .nav-menu a span, .nav-menu .logout-btn span {
        display: none; /* Ẩn text trên di động cho các trang khác */
    }
     /* Bổ sung: Style cho bảng trên điện thoại */
     table {
        width: 700px; /* Cho phép bảng mở rộng theo nội dung, không giới hạn 100% */
        border-collapse: separate; /* Đảm bảo cột không bị co ép */
        border-spacing: 0; /* Giữ khoảng cách giữa các ô */
    }
    th:nth-child(2), td:nth-child(2) { width: 120px; } /* Cột Phone Number */

  
    table th, table td {
        box-sizing: content-box; /* Bổ sung: Ngăn padding ảnh hưởng chiều rộng cột */
    }
    .table-wrapper {
        width: 100%;
        overflow-x: auto; /* Cho phép cuộn ngang */
    }
    thead, tbody, tr {
        display: table;
        width: 100%;
        table-layout: fixed; /* Đảm bảo cột cố định */
    }
    .container, .login-container, .home-container {
        margin: 0; 
    }

    h2 {
        font-size: 24px;
    }

    .nav-menu a, .filter-form input, .filter-form select, .add-form input, .add-form select, .add-form textarea, .filter-form button, .add-form button, .login-btn, .logout-btn {
        font-size: 12px;
        padding: 10px;
    }
    th, td {
        width: 150px; /* Bổ sung: Chiều rộng tối thiểu cho cột để tránh đè văn bản */
        white-space: normal; /* Cho phép xuống dòng để tránh đè văn bản */
        word-break: break-word; /* Đảm bảo từ dài được ngắt */
    }
    .table-wrapper::-webkit-scrollbar {
        height: 8px;
    }
    
    .table-wrapper::-webkit-scrollbar-thumb {
        background-color: #007bff;
        border-radius: 4px;
    }
    th, td {
        font-size: 12px;
        padding: 8px;
    }

    .filter-form {
        flex-direction: column;
    }

    .filter-toggle {
        display: block;
    }


}

/* Responsive cho máy tính */
@media (min-width: 768px) {
    .container {
        width: 100%;
    }

    .filter-form {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    .filter-form .form-group {
        flex: 1 1 200px; /* Mỗi input chiếm khoảng 200px, co giãn nếu cần */
    }

    .filter-form button, .add-form button, .action-btn {
        width: 5%;
        min-width: 180px;
    }

    table {
        font-size: 16px;
    }
}
.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    font-size: 14px;
    margin-bottom: 5px;
    color: #555;
}

.form-group input {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ddd;
    border-radius: 5px;
    outline: none;
}

.form-group input:focus {
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
}

.login-btn {
    width: 100%;
    padding: 12px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
}

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

.forgot-password {
    text-align: center;
    margin-top: 15px;
}

.forgot-password a {
    color: #007bff;
    text-decoration: none;
    font-size: 14px;
}

.forgot-password a:hover {
    text-decoration: underline;
}

@media (max-width: 480px) {
    .login-container {
        padding: 15px;
    }

    .login-container h2 {
        font-size: 24px;
    }

    .form-group input {
        font-size: 14px;
    }

    .login-btn {
        font-size: 14px;
        padding: 10px;
    }
}
.home-container {
    width: 100%;
    max-width: 400px;
    padding: 20px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin: 0 15px;
}

.home-container h2 {
    text-align: center;
    margin-bottom: 20px;
    color: #333;
}



.nav-menu a {
    display: block;
    padding: 12px;
    background-color: #007bff;
    color: white;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    font-size: 16px;
    transition: background-color 0.3s;
}

.nav-menu a:hover {
    background-color: #0056b3;
}

.logout-btn {
    margin-top: 20px;
    width: 100%;
    padding: 12px;
    background-color: #dc3545;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.logout-btn:hover {
    background-color: #c82333;
}

@media (max-width: 480px) {
    .home-container {
        padding: 15px;
    }

    .home-container h2 {
        font-size: 24px;
    }

    .nav-menu a {
        font-size: 14px;
        padding: 10px;
    }

    .logout-btn {
        font-size: 14px;
        padding: 10px;
    }
}
/* add 16-08 */
/* Thêm vào file style.css */
.filter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.filter-form input,
.filter-form select {
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.filter-toggle {
    background: #f0f0f0;
    border: 1px solid #ddd;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 10px;
}

.advanced-filters {
    width: 100%;
    padding: 15px;
    background: #f9f9f9;
    border-radius: 4px;
    margin-top: 10px;
    flex-direction: column;
    gap: 15px;
}

.advanced-filters {
    display: flex;
}

.date-filter-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.date-filter-group label {
    font-weight: bold;
    margin-bottom: 5px;
}

.date-filter-group div {
    display: flex;
    gap: 10px;
}

.date-filter-group input {
    flex: 1;
}