@charset "utf-8";
/* Chọn tất cả các phần tử trên trang web */
* {
    margin: 0;             /* Xóa bỏ khoảng cách rìa ngoài mặc định của trình duyệt */
    padding: 0;            /* Xóa bỏ khoảng cách đệm trong mặc định của trình duyệt */
    box-sizing: border-box;/* Quy định kích thước phần tử bao gồm cả padding và border để không bị tràn */
}

/* Định dạng cấu hình chung cho toàn bộ trang */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Thiết lập phông chữ dễ đọc */
    background-color: #f5f5f5; /* Màu nền xám nhạt cho toàn bộ trang web */
    color: #333;               /* Màu chữ mặc định là màu xám đen */
}

/* Khung chứa lớn chia giao diện thành 2 cột chính */
.container {
    display: flex;         /* Kích hoạt chế độ Flexbox để các phần tử con xếp cạnh nhau */
    min-height: 100vh;     /* Chiều cao tối thiểu bằng 100% chiều cao của màn hình thiết bị */
}

/* --- 1. THANH MENU BÊN TRÁI (SIDEBAR) --- */
.sidebar {
    width: 250px;              /* Chiều rộng cố định của thanh menu là 250 pixel */
    background-color: #2c3e50; /* Mã màu xanh đen thẫm làm nền cho Sidebar */
    color: #ecf0f1;            /* Màu chữ trắng xám nhẹ cho toàn menu */
    padding: 20px 0;           /* Khoảng cách đệm: trên/dưới cách 20px, trái/phải sát rìa */
}

/* Tiêu đề "Admin" trong menu */
.sidebar h1 {
    font-size: 1.8em;          /* Kích thước chữ lớn gấp 1.8 lần kích thước mặc định */
    padding: 10px 25px;        /* Khoảng cách đệm: trên/dưới cách 10px, trái/phải cách 25px */
    margin-bottom: 20px;       /* Khoảng cách rìa dưới để đẩy các mục menu bên dưới xuống */
    font-weight: bold;         /* Làm đậm chữ */
}

/* Danh sách các mục menu (thẻ ul) */
.sidebar .menu {
    list-style: none;          /* Xóa bỏ dấu chấm tròn đầu dòng mặc định của danh sách */
}

/* Từng mục nhỏ trong menu (thẻ li) */
.sidebar .menu li {
    padding: 12px 25px;        /* Tạo khoảng cách đệm rộng rãi xung quanh mỗi mục */
    cursor: pointer;           /* Biến con trỏ chuột thành hình bàn tay khi rê vào để báo hiệu bấm được */
    font-size: 1.05em;         /* Kích thước chữ lớn hơn một chút */
    color: #bdc3c7;            /* Màu chữ xám nhạt khi ở trạng thái bình thường */
    transition: all 0.3s ease; /* Tạo hiệu ứng chuyển đổi mượt mà trong 0.3 giây khi đổi màu */
}

/* Hiệu ứng khi di chuột (hover) hoặc khi mục đó đang được chọn (active) */
.sidebar .menu li:hover, 
.sidebar .menu li.active {
    background-color: #34495e; /* Đổi sang nền màu xanh xám sáng hơn */
    color: #fff;               /* Đổi chữ thành màu trắng tinh để nổi bật */
}

/* --- 2. KHU VỰC NỘI DUNG CHÍNH BÊN PHẢI (MAIN CONTENT) --- */
.main-content {
    flex: 1;                   /* Tự động lấp đầy toàn bộ vùng không gian còn lại ở bên phải */
    padding: 40px;             /* Tạo khoảng cách đệm 40px xung quanh khu vực nội dung để không bị sát viền */
}

/* Các tiêu đề lớn: "Tổng quan hệ thống", "Danh sách người dùng" */
.section-title {
    font-size: 1.8em;          /* Kích thước chữ lớn tương đương chữ Admin */
    margin-bottom: 20px;       /* Khoảng cách rìa dưới để tạo khoảng cách với nội dung bên dưới */
    color: #000;               /* Chữ màu đen tuyền */
}

/* Khung chứa 3 ô thông số tổng quan */
.cards-container {
    display: flex;             /* Kích hoạt Flexbox để 3 ô thông số nằm ngang hàng với nhau */
    gap: 20px;                 /* Tạo khoảng cách đều 20px giữa các ô thông số */
    margin-bottom: 40px;       /* Khoảng cách rìa dưới để đẩy phần bảng danh sách bên dưới xuống */
}

/* Định dạng từng ô thông số trắng (Card) */
.card {
    flex: 1;                   /* Chia đều chiều rộng, giúp 3 ô luôn có độ dài bằng nhau */
    background-color: #fff;    /* Nền màu trắng tinh */
    padding: 20px;             /* Khoảng cách đệm bên trong ô là 20px */
    border-radius: 10px;       /* Bo tròn nhẹ 4 góc của ô với bán kính 10px */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* Tạo bóng đổ mờ nhẹ, mịn màng ở dưới ô */
    display: flex;             /* Kích hoạt tiếp Flexbox bên trong ô */
    flex-direction: column;    /* Xếp các thành phần bên trong ô thành hàng dọc (tiêu đề ở trên, số ở dưới) */
    gap: 8px;                  /* Khoảng cách giữa chữ tiêu đề và chữ số là 8px */
}

/* Chữ tiêu đề của ô (Ví dụ: "Người dùng", "Đơn hàng") */
.card-title {
    font-weight: bold;         /* Làm đậm chữ tiêu đề */
    font-size: 1.1em;          /* Kích thước chữ hơi lớn một chút */
}

/* Chữ số dữ liệu của ô (Ví dụ: "1.230", "860") */
.card-value {
    color: #666;               /* Màu chữ xám vừa phải để làm dịu mắt hơn tiêu đề */
    font-size: 1em;            /* Giữ kích thước chữ ở mức bình thường */
}

/* --- 3. BẢNG DANH SÁCH NGƯỜI DÙNG --- */
.user-table {
    width: 100%;               /* Bảng rộng chiếm hết 100% không gian vùng chứa nó */
    border-collapse: collapse; /* Gộp các đường viền của các ô lại làm một, tránh bị đường viền đôi */
    background-color: #fff;    /* Đặt nền bảng màu trắng */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* Đổ bóng đổ mờ nhẹ dưới chân bảng cho đồng bộ */
}

/* Định dạng chung cho cả ô tiêu đề (th) và ô nội dung (td) của bảng */
.user-table th, 
.user-table td {
    padding: 15px 20px;        /* Trên/dưới cách 15px, trái/phải cách 20px giúp bảng thoáng đãng */
    text-align: left;          /* Căn lề văn bản thẳng hàng bên tay trái */
}

/* Định dạng riêng cho dòng tiêu đề bảng (th) */
.user-table th {
    background-color: #f8f9fa; /* Nền của thanh tiêu đề màu xám cực nhạt */
    color: #333;               /* Màu chữ xám đậm */
    font-weight: bold;         /* Làm đậm chữ tiêu đề */
    border-bottom: 2px solid #eee; /* Đường gạch dưới chân tiêu đề dày 2px màu xám mảnh */
}

/* Định dạng riêng cho các ô chứa dữ liệu (td) */
.user-table td {
    border-bottom: 1px solid #eee; /* Đường gạch kẻ ngang phân cách giữa các dòng dày 1px */
    font-size: 0.95em;         /* Chữ nhỏ hơn một xíu để phân biệt với tiêu đề */
}

/* Hiệu ứng khi rê chuột vào từng dòng (tr) dữ liệu của bảng */
.user-table tbody tr:hover {
    background-color: #fcfcfc; /* Đổi nền dòng đó sang màu trắng sáng hơn một chút để dễ theo dõi */
}