/* Import font Roboto từ Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

:root { 
    --radius: 0.8rem; 
}

/* Áp dụng font chữ và màu nền tổng thể */
body {
    font-family: 'Roboto', sans-serif;
    background-color: #f4f6f9; /* Màu xám nhạt giúp form trông chuyên nghiệp hơn */
    color: #333;
}

/* Tinh chỉnh Card: Đổ bóng nhẹ và bo góc */
.card { 
    border-radius: var(--radius); 
    border: none;
    box-shadow: 0 4px 6px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.02);
}

.form-control, .form-select, .btn { 
    border-radius: 0.5rem; 
}

/* Cải tiến hiển thị Bảng (Table) */
.table thead th { 
    white-space: nowrap; 
    background-color: #f8f9fa; /* Màu nền xám sáng cho Header */
    color: #495057;
    font-size: 0.8rem; /* Thu nhỏ font chữ xuống khoảng 13-14px */
    text-transform: uppercase; /* Viết hoa nhẹ để tăng tính chuyên nghiệp */
    font-weight: 400;
    border-bottom: 2px solid #dee2e6;
}
.table tbody td {
    font-weight: 400; /* Sử dụng độ dày Light (thanh mảnh) cho nội dung */
    vertical-align: middle;
    font-size: 0.85rem; /* Thu nhỏ font chữ xuống khoảng 13-14px */
}

/* Thu nhỏ các nút thao tác trong bảng để cân đối với font chữ mới */
.table .btn-sm {
    padding: 0.2rem 0.4rem;
    font-size: 0.75rem;
}
.table-striped>tbody>tr:nth-of-type(odd)>* {
    background-color: rgba(0, 0, 0, 0.015); /* Làm dịu màu sọc của bảng */
}

.navbar-brand { 
    letter-spacing: .3px; 
    font-weight: 500;
}


/* Cải tiến hiển thị trên thiết bị di động */
@media (max-width: 576px){
    .table {
        font-size: 0.58rem; /* Trên điện thoại thu nhỏ thêm một chút */
    }
}