/* Sidebar chung */
.sidebar {
    width: 250px; /* Chiều rộng cố định */
    background-color: #f7fafc; /* Nền màu trắng xám nhẹ */
    padding: 20px 0;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05); /* Đổ bóng nhẹ bên phải */
    display: flex;
    flex-direction: column;
    position: fixed; /* Giữ sidebar cố định khi cuộn */
    height: 100vh; /* Chiếm toàn bộ chiều cao viewport */
    top: 0;
    left: 0;
    z-index: 900;
    border-right: 1px solid #e0e0e0; /* Viền mỏng bên phải */
    font-family: 'Poppins', sans-serif; /* Sử dụng font Poppins */
    transition: width 0.3s ease; /* Hiệu ứng khi thu gọn/mở rộng sidebar */
    overflow-y: auto; /* Cho phép cuộn dọc khi nội dung vượt quá chiều cao */
    -ms-overflow-style: none;  /* Ẩn thanh cuộn trên IE và Edge */
    scrollbar-width: none;  /* Ẩn thanh cuộn trên Firefox */
}

/* Header logo trong sidebar */
.sidebar-header {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    margin-bottom: 30px;
    font-size: 1.6rem;
    font-weight: 700;
    color: #4a5568;
}

.sidebar-header i {
    color: #4299e1;
    margin-right: 10px;
}

/* Menu items */
.sidebar ul {
    list-style: none;
    padding: 0;
    flex-grow: 1; /* Cho phép menu chiếm không gian còn lại */
}

.sidebar ul li {
    margin-bottom: 5px; /* Khoảng cách giữa các mục menu */
}

.sidebar ul li a {
    display: flex;
    align-items: center;
    padding: 12px 20px; /* Padding cho các mục */
    color: #4a5568;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 10px; /* Bo tròn góc */
    margin: 0 10px; /* Tạo khoảng cách với cạnh sidebar */
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

.sidebar ul li a i {
    font-size: 1.1em;
    margin-right: 15px; /* Khoảng cách giữa icon và chữ */
    color: #a0aec0; /* Màu icon mặc định */
}

.sidebar ul li a:hover {
    background-color: #e2e8f0; /* Nền xám nhạt khi hover */
    color: #2d3748; /* Màu chữ đậm hơn khi hover */
    transform: translateX(5px); /* Dịch chuyển nhẹ sang phải */
}

/* Active menu item */
.sidebar ul li a.active {
    background-color: #e6fffa; /* Nền xanh nhạt hơn */
    color: #2ac2b2; /* Màu chữ xanh lá cây */
    font-weight: 600;
}

.sidebar ul li a.active i {
    color: #2ac2b2; /* Icon màu xanh lá cây */
}

/* Footer / Settings Section trong sidebar */
.sidebar-footer {
    padding: 20px;
    text-align: center;
}

.sidebar-footer a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    background-color: #2ac2b2; /* Màu xanh lá như button đăng xuất */
    color: white;
    text-decoration: none;
    border-radius: 10px;
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.sidebar-footer a:hover {
    background-color: #24a899;
    transform: translateY(-2px);
}

.sidebar-footer a i {
    margin-right: 10px;
}

/* Các tiêu đề nhóm chức năng (Dashboard, Authentication) - giống mẫu */
.sidebar h2, .sidebar h3 {
    text-transform: uppercase;
    font-size: 0.8rem;
    color: #a0aec0; /* Màu chữ xám nhạt */
    margin-left: 20px;
    margin-top: 20px;
    margin-bottom: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Ẩn các tiêu đề Auth và chức năng khác trong sidebar nếu không cần thiết */
/* User Info Section riêng */
.sidebar-user-info {
    display: flex; /* Sử dụng flexbox */
    align-items: center; /* Căn giữa theo chiều dọc */
    gap: 10px; /* Khoảng cách giữa avatar và tên */
    cursor: pointer;
    background-color: #edf2f7; /* Nền nhẹ cho user-info */
    padding: 5px 5px; /* Padding cho khung user-info */
    border-radius: 10px; /* Bo tròn góc */
    transition: background-color 0.3s ease;
    margin: 0 10px; /* Căn chỉnh với các mục menu, có khoảng cách với cạnh sidebar */
    margin-bottom: 20px;

}

.sidebar-user-info:hover {
    background-color: #e2e8f0;
}

/* Thêm style cho tên người dùng nếu bạn muốn nó là một span riêng */


.sidebar-user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #ffffff; /* Viền trắng quanh avatar */
    box-shadow: 0 0 5px rgba(0,0,0,0.1); /* Đổ bóng nhẹ */
    flex-shrink: 0; /* Đảm bảo avatar không bị co lại */
}

.sidebar-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Đảm bảo ảnh fill khung */
}

/* Responsive cho Sidebar */
@media (max-width: 992px) {
    .sidebar {
        width: 60px; /* Thu gọn sidebar trên màn hình nhỏ hơn */
        padding: 10px 0;
        align-items: center;
    }

    .sidebar-header {
        justify-content: center;
        padding: 10px 0;
        margin-bottom: 10px;
    }

    .sidebar-header span {
        display: none; /* Ẩn chữ "SGC" */
    }

    .sidebar-header i {
        margin-right: 0; /* Loại bỏ margin-right */
    }

    .sidebar ul li a {
        padding: 10px; /* Giảm padding */
        margin: 0 5px;
        justify-content: center; /* Canh giữa icon */
    }

    .sidebar ul li a span {
        display: none; /* Ẩn chữ của các mục menu */
    }

    .sidebar ul li a i {
        margin-right: 0; /* Loại bỏ margin-right */
    }

    .sidebar h2, .sidebar h3 {
        display: none; /* Ẩn các tiêu đề khi sidebar thu gọn */
    }

    .sidebar-footer {
        padding: 10px;
    }

    .sidebar-footer a span {
        display: none; /* Ẩn chữ trong nút footer */
    }
    .sidebar-footer a i {
        margin-right: 0;
    }

    /* Điều chỉnh các phần tử trong sidebar-user-info khi thu gọn */
    .sidebar-user-info {
        flex-direction: column; /* Đổi thành cột để avatar ở trên, tên ở dưới (hoặc ẩn tên) */
        padding: 5px; /* Giảm padding */
        margin: 0 5px 15px 5px; /* Giảm margin dưới */
    }
    .sidebar-user-info .sidebar-user-avatar {
        margin: auto; /* Canh giữa avatar khi tên bị ẩn */
    }
    .sidebar-user-info .user-name { /* THAY ĐỔI: Ẩn tên người dùng khi sidebar thu gọn */
        display: none;
    }
}

/* Điều chỉnh lại layout-wrapper để account cho sidebar cố định */
.layout-wrapper {
    display: flex;
}

.main-content-wrapper {
    margin-left: 250px; /* Đảm bảo nội dung chính không bị che bởi sidebar */
    flex-grow: 1; /* Cho phép phần nội dung chính chiếm hết không gian còn lại */
    padding: 20px; /* Padding cho nội dung chính */
    transition: margin-left 0.3s ease; /* Hiệu ứng khi sidebar thu gọn/mở rộng */
}

@media (max-width: 992px) {
    .main-content-wrapper {
        margin-left: 60px; /* Điều chỉnh margin khi sidebar thu gọn */
    }
    .sidebar-user-actions .icon-wrapper span {
        display: none; /* Ẩn chữ "Thông báo" */
    }
    .sidebar-logo span,
    .sidebar-search-bar input,
    .sidebar-user-actions .icon-wrapper span,
    .sidebar-language-selector span,
    .sidebar-language-selector select {
        display: none; /* Ẩn chữ và select box */
    }

    /* Điều chỉnh các wrapper */
    .sidebar-logo,
    .sidebar-user-actions .icon-wrapper,
    .sidebar-language-selector {
        justify-content: center; /* Canh giữa icon */
        padding: 10px 5px; /* Giảm padding */
        margin: 0 5px; /* Giảm margin */
    }
    .sidebar-user-info {
        flex-direction: column; /* Đổi thành cột để avatar ở trên, tên ở dưới (hoặc ẩn tên) */
        padding: 5px; /* Giảm padding */
        margin: 0 5px 15px 5px; /* Giảm margin dưới */
    }
    .sidebar-user-info .sidebar-user-avatar {
        margin: auto; /* Canh giữa avatar khi tên bị ẩn */
    }
    /* THÊM DÒNG NÀY ĐỂ ẨN TÊN NGƯỜI DÙNG KHI SIDEBAR THU GỌN */
    #sidebarUserName {
        display: none;
    }
    /* Nếu bạn có dùng thẻ <a> bọc bên ngoài tên, cũng nên ẩn nó */
    #sidebarUserNameLinkText {
        display: none;
    }

    /* Đã xử lý .sidebar-user-info riêng ở trên */
}