/* public/css/style.css */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* Thêm padding-bottom để footer không che mất nội dung khi dùng fixed-bottom */
    padding-bottom: 80px; /* Điều chỉnh giá trị này nếu chiều cao footer thay đổi */
    background-color: #f8f9fa; /* Một màu nền nhẹ nhàng cho toàn trang */
}

.container {
    /* Có thể giới hạn chiều rộng tối đa của container nếu muốn */
    /* max-width: 1200px; */
}

/* Tùy chỉnh cho bảng */
.table th,
.table td {
    vertical-align: middle; /* Căn giữa nội dung trong ô theo chiều dọc */
}

/* Tùy chỉnh cho card */
.card {
    border: none; /* Bỏ viền mặc định của Bootstrap card nếu muốn giao diện "sạch" hơn */
    /* box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); */ /* Thêm bóng đổ nhẹ nếu muốn */
}

/* Navbar tùy chỉnh */
.navbar {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Thêm bóng đổ cho navbar */
}

/* Footer cố định ở cuối trang */
.fixed-bottom {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 1030; /* Đảm bảo footer hiển thị trên các element khác */
}

/* Đảm bảo các modal có z-index cao hơn footer nếu footer là fixed */
.modal {
    z-index: 1050; /* Bootstrap modal mặc định là 1050 hoặc 1055 */
}
.modal-backdrop {
    z-index: 1040; /* Bootstrap modal backdrop mặc định là 1040 */
}

/* Căn chỉnh icon trong nút */
.btn svg {
    margin-right: 0.3rem;
    vertical-align: text-bottom; /* Căn icon với text tốt hơn */
}
/* public/css/style.css */

/* ... (các style cũ của bạn giữ nguyên) ... */

/* Navbar chung - đảm bảo chữ của nav-link mặc định dễ đọc trên nền sáng */
.navbar-light .navbar-nav .nav-link {
    color: rgba(0, 0, 0, 0.65); /* Màu chữ nav-link mặc định của Bootstrap cho navbar-light */
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
    color: rgba(0, 0, 0, 0.8);
}

/* Custom Nav Link Styles cho các mục menu cụ thể */
.navbar-nav .nav-item .nav-link.custom-menu-item {
    padding: 0.5rem 0.85rem;    /* Padding tùy chỉnh */
    border-radius: 0.3rem;      /* Bo góc */
    margin-left: 0.25rem;       /* Khoảng cách giữa các mục */
    margin-right: 0.25rem;
    text-align: center;
    font-weight: 500;           /* Chữ hơi đậm một chút */
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    border: 1px solid transparent; /* Border trong suốt để giữ layout khi hover có border */
}

/* Trạng thái Mặc định: Nền xám rất nhạt, chữ xám đậm */
.navbar-nav .nav-item .nav-link.custom-menu-default {
    background-color: #e9ecef; /* Bootstrap's "gray-200" - một màu xám rất nhạt */
    color: #495057;            /* Bootstrap's "gray-700" */
    border-color: #dee2e6;     /* Border xám nhạt */
}
.navbar-nav .nav-item .nav-link.custom-menu-default:hover,
.navbar-nav .nav-item .nav-link.custom-menu-default:focus {
    background-color: #ced4da; /* Xám đậm hơn chút khi hover */
    color: #212529;            /* Chữ đậm hơn */
    border-color: #adb5bd;
}

/* Trạng thái Active: Nền xanh dương (primary), chữ trắng */
.navbar-nav .nav-item .nav-link.custom-menu-active {
    background-color: #0d6efd; /* Bootstrap's primary blue */
    color: white;
    border-color: #0a58ca;     /* Border xanh đậm hơn */
}
.navbar-nav .nav-item .nav-link.custom-menu-active:hover,
.navbar-nav .nav-item .nav-link.custom-menu-active:focus {
    background-color: #0a58ca; /* Xanh đậm hơn khi hover */
    color: white;
}