/* Căn giữa các item trong navbar */
.navbar-nav {
    display: flex;
    align-items: center; /* Căn giữa theo chiều dọc */
    justify-content: flex-end; /* Đảm bảo các item trong navbar nằm về bên phải */
}

/* Căn giữa các icon trong navbar */
.navbar-nav .nav-link {
    margin-right: 5px; /* Khoảng cách giữa các mục menu */
}

/* Bố cục cho các icon (giỏ hàng và đăng nhập) */
.nav-icons {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 5px; /* Khoảng cách từ các mục menu sang icon */
}

/* Icon giỏ hàng và đăng nhập có khoảng cách hợp lý */
.nav-icons a {
    color: white;
    font-size: 20px;
    margin-left: 5px; /* Khoảng cách giữa các icon */
    padding: 10px;
}

/* Đảm bảo icon đăng nhập có khoảng cách hợp lý */
.navbar .dropdown-toggle {
    padding: 10px;
    margin-left: 5px; /* Khoảng cách từ icon giỏ hàng đến icon đăng nhập */
}

/* Căn chỉnh dropdown khi người dùng đã đăng nhập */
.dropdown-menu {
    min-width: 150px;
    right: 15;
}

/* Tăng kích thước khi hover vào các item trong menu con */
.dropdown-item:hover {
    background-color: #444;
    color: white;
}

/* Căn giữa tên người dùng trong navbar */
.navbar .dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 5px; /* Khoảng cách giữa tên người dùng và các mục khác */
}

/* Thêm một chút khoảng cách cho các mục trong dropdown menu */
.dropdown-menu {
    padding: 0;
    min-width: 160px;
}


/* Đảm bảo thanh tìm kiếm và nút tìm kiếm căn chỉnh hợp lý */
.d-flex {
    align-items: center; /* Căn giữa thanh tìm kiếm với nút */
}

/* Thêm hiệu ứng cho thanh tìm kiếm khi focus */
.form-control:focus {
    border-color: #c1c1c1; /* Đổi màu viền khi focus */
    box-shadow: 0 0 5px c1c1c1(0, 123, 255, 0.5); /* Hiệu ứng shadow */
}





/* Đảm bảo input và button trong form tìm kiếm nằm liền nhau */
.input-group {
    display: flex;
    width: 100%; /* Làm cho nhóm input và button chiếm hết chiều ngang */
}

/* Ô tìm kiếm */
.form-control {
    width: 400px;
    border-radius: 20px 0 0 20px; /* Bo tròn góc bên trái của ô tìm kiếm */
    width: 100%; /* Làm cho ô tìm kiếm chiếm hết chiều ngang còn lại */
    padding: 10px 15px; /* Điều chỉnh padding cho ô tìm kiếm */
}

/* Nút tìm kiếm */
.btn-outline-light {
    border-radius: 0 20px 20px 0; /* Bo tròn góc bên phải của nút */
    background-color: #ffffff;
    color: rgb(0, 0, 0);
    border: none;
    padding: 10px 15px; /* Điều chỉnh kích thước nút */
}

.btn-outline-light:hover {
    background-color: #f1f1f1;

}

/* Loại bỏ margin của input và button */
.input-group .form-control, .input-group .btn-outline-light {
    margin: 0; /* Không có khoảng cách giữa các phần tử */
}