.view-more-btn:hover{
	background-color: grey
}
/* Định dạng chung cho menu */
/* Tạo nút hamburger */
.hamburger {
    display: none; /* Ẩn nút hamburger mặc định */
    cursor: pointer;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 25px;
}

.hamburger div {
    width: 100%;
    height: 4px;
    background-color: white;
    border-radius: 2px;
}

/* Menu chính */
.menu-container {
    background-color: black;
    width: 100%;
}

.menu {
    list-style: none;
    margin: 0;
    display: flex;
    position: relative;
	justify-content: space-around;
}

.menu li {
    position: relative;
    padding: 10px 20px;
    border-radius: 10px;
	transition: background-color 0.3s ease, transform 0.3s ease;
}

.menu li:hover {
    color: black;
	transform: scale(1.05);
}

.menu li a, .menu li .menu-dropdow {
    text-decoration: none;
    color: white;
    font-size: 18px;
    display: block;
    padding: 10px;
	cursor: pointer;
	transition: color 0.3s ease, transform 0.3s ease;
}
.menu li a:hover, .menu li .menu-dropdow:hover {
    color: tan; /* Màu chữ thay đổi khi hover */
    transform: scale(1.1); /* Phóng to chữ khi hover */
}
/* Dropdown (ẩn mặc định) */
.dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: black;
    display: none;
    z-index: 1;
    border-radius: 10px;
	box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3); /* Tạo bóng đổ cho menu con */
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
    transition: opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), 
                transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.dropdown ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dropdown ul li {
    padding: 10px 20px;
}

.dropdown ul li a {
    color: white;
    font-size: 16px;
    text-decoration: none;
    display: block;
    border-bottom: solid grey;
	transition: color 0.3s ease;
}
.dropdown ul li a:hover {
    color: tan; /* Thay đổi màu chữ khi hover */
}
/* Hiển thị menu con khi hover vào mục menu */
.menu-item:hover .dropdown {
    display: block;
	opacity: 1;
    transform: scale(1) translateY(0);
}

/* Responsive cho điện thoại */
/* responsive cho smartphone */

@media (max-width: 768px) {
    /* Ẩn menu ban đầu trên điện thoại */
    .menu {
        display: none; /* Ẩn menu chính */
        flex-direction: column;
        width: 100%;
        background-color: black;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        padding-top: 60px;
    }
    .menu-item {
        width: 100%;
        padding: 10px 0;
    }
	.icon {
		display: flex;
	}
    .menu li {
        border-radius: 0;
        padding: 15px 0;
		border-bottom: 1px solid #333;
    }
	.menu li a{
		border-bottom: none;
	}
    /* Hiển thị nút hamburger */
    .hamburger {
        display: flex;
        margin-right: 15px;
    }

    /* Khi menu mở */
    .menu.open {
        display: block;
		width: auto;
    }

    /* Nút đóng menu */
    .close-menu {
        position: absolute;
        top: 20px;
        right: 20px;
        font-size: 30px;
        color: white;
        cursor: pointer;
        display: none; /* Ẩn nút đóng mặc định */
    }

    /* Hiển thị nút đóng khi menu mở */
    .menu.open .close-menu {
        display: block;
    }

    /* Dropdown cho mobile */
    .dropdown {
        position: relative;
        display: none;
        width: 100%;
    }

    .dropdown ul li {
        padding: 15px;
    }

    /* Hiển thị dropdown dưới dạng menu ngang khi hover */
    .menu-item.open .dropdown {
        display: block;
    }

    /* Hiển thị dropdown khi có class 'open' */
    .dropdown.open {
        display: block;
    }
}

button{
    font-family: "Playfair Display", serif;
    font-optical-sizing: auto;
    font-style: normal;
}

.review {
    padding: 10px;
    display: flex;
}
.modal {
    display: none; 
    position: fixed; 
    z-index: 1000; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgba(0, 0, 0, 0.7); 
}
#customerName,#customerPhone,#customerEmail,#customerAddress,#paymentMethod,.btn-thanhtoan{
	width: -webkit-fill-available;
}
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
.footer1{
    background-color: black;
    color: white;
    padding: 10px;
}

.review-section {
    color: tan;
    background: white;
    border-radius: 10px;
    flex: 50%;
}
.review-section2 {
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 10px;
    background-color: white;
    flex: 50%;
    margin-left: 20px;
}
/* Tùy chỉnh thanh cuộn cho Chrome/Safari */
/* Tùy chỉnh cho Firefox */
.review-section h2 {
    text-align: center;
    padding: 10px;
}
.review-section input, 
.review-section textarea {
    width: -webkit-fill-available;
    padding: 10px;
    margin: 5px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.review-section button {
    width: auto;
    padding: 10px;
    background-color: black;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.review-section button:hover {
    background-color: grey;
}

#reviewsList {
    margin-top: 20px;
}

#reviewsList ul1 {
    list-style-type: none;
    padding: 0;
}
.rate1,.rate2,.rate3,.rate4{
    display: flex;
}
.rating-product{
    display: flex;
    text-align: center;
}
.search-input {
    margin-bottom: 20px;
    width: 300px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 14px;
}

.search-input:focus {
    border-color: #007bff;
}

#searchResults {
    margin-top: 10px;
    color: red;
}
.search-icon{
    text-align: center;
    margin-top: 10px;
}
.search-button,.login-button,.cart-button, .menu-icon{
    padding: 10px 15px;
    border: none;
    background-color: black;
    color: white;
    border-radius: 4px;
    cursor: pointer;
}
.search-button:hover,.login-button:hover, .cart-button:hover,.menu-icon:hover{
    background-color: grey;
}
.bar{
    background-color: black;
    display: flex;
    padding: 10px;
	justify-content: space-between;
    align-items: center;
}
.icon{
    flex: 1;
    text-align: center;
}
.site-wrapper{
    border: 1px solid;
    background-color: #333;
}
.btn{
    display: flex;
}
.buy-button,.add-to-cart{
    flex: 1;
}
.header{
    text-align: center;
    padding: 10px;
}
.header p{
	font-family: "Playfair Display", "Roboto", sans-serif;
}
.side-bar{
    background-color: black;
    display: flex;
    color: white;
}
.body,.winter{
    background-image: url(back-ground.jpg);
    padding-top: 10px;
    padding-bottom: 100px;
}
.body-payment{
    background-image: url(back-ground.jpg);
    padding-top: 10px;
    padding-bottom: 100px;
	height: 790px;
}
.side-bar-left, .side-bar-center, .side-bar-right{
    flex: 1;
    text-transform: uppercase;
    color: white;
}

h1{
    text-align: center;
    text-transform: uppercase;
    font-size: 60px;
    margin-top: 40px;
    padding: 30px;
    color: oldlace;
    font-weight: bold;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.7), 0 0 25px rgba(255, 255, 255, 0.5);
}
#cartItems{
    text-align: center;
    font-size: 20px;
}
p1{
    text-align: center;
    font-weight: bold;
}
.container{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
	padding: 20px;
}
/*.container div{
    border-radius: 5px;
    width: 300px;
    background-color: white;
	text-align: center;
}*/
/*
.container div {
    flex: 1 1 calc(25% - 40px);
    box-sizing: border-box;
    max-width: 350px;
    background-color: #f9f9f9;
    border-radius: 8px;
    text-align: center;
}
*/
.container div{
    flex: 1 1 300px;
	box-sizing: border-box;
	max-width: 100%;
	background-color: #f9f9f9;
	border-radius: 8px;
	text-align: center;
}
.best-selling-1,.best-selling-2,.best-selling-3,.best-selling-4,.item{
    margin: inherit;
    padding: 5px;
    transition: transform 0.4s ease, box-shadow 0.4s ease, border 0.4s ease;
    border: 1px solid transparent;
    border-radius: 5px;
	display: block;
}
.best-selling-1:hover,.best-selling-2:hover,.best-selling-3:hover,.best-selling-4:hover,.item:hover{
    transform: scale(1.1);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    border: 1px solid #AB886D;
    background-color: #f9f9f9;
}
.img-item1, .img-item2, .img-item3, .img-item4,.img-item5, .img-item6, .img-item7, .img-item8,.img-item9, .img-item10, .img-item11, .img-item12,.img-item13, .img-item14, .img-item15, .img-item16,.imgnu-item1, .imgnu-item2, .imgnu-item3, .imgnu-item4,.imgnu-item5, .imgnu-item6, .imgnu-item7, .imgnu-item8,.imgnu-item9, .imgnu-item10, .imgnu-item11, .imgnu-item12,.imgnu-item13, .imgnu-item14, .imgnu-item15, .imgnu-item16,.imgnu-item17, .imgnu-item18, .imgnu-item19, .imgnu-item20,.imgnu-item21, .imgnu-item22,.imgnu-item23, .imgnu-item24, .imgnu-item25, .imgnu-item26,.imgnu-item27, .imgnu-item28, .imgnu-item29, .imgnu-item30,.imgnam-item1, .imgnam-item2, .imgnam-item3, .imgnam-item4,.imgnam-item5, .imgnam-item6, .imgnam-item7, .imgnam-item8,.imgnam-item9, .imgnam-item10, .imgnam-item11, .imgnam-item12,.imgnam-item13, .imgnam-item14, .imgnam-item15, .imgnam-item16,.imgnam-item17, .imgnam-item18, .imgnam-item19, .imgnam-item20,.nu-dong-1,.nu-dong-2,.nu-dong-3,.nu-dong-4,.nu-dong-5,.nu-dong-6,.nu-dong-7,.nu-dong-8,.nu-dong-9,.nu-dong-10 {
    width: 100%;
    height: 300px;
    background-size: contain;
    background-position: center center; /* Đảm bảo ảnh luôn ở trung tâm */
    background-repeat: no-repeat; /* Không lặp lại hình ảnh */
}
/* ảnh sản phẩm trang chủ */
.img-item1{background-image: url(do-nu-19.png);}.img-item2{background-image: url(do-nu-17.png);}.img-item3{background-image: url(do-nu-20.png);}.img-item4{background-image: url(do-nu-14.png);}.img-item5{background-image: url(do-nu-25.png);background-size: contain;}.img-item6{background-image: url(do-nu-21.png);background-size: contain;}.img-item7{background-image: url(do-nu-22.png);background-size: contain;}.img-item8{background-image: url(do-nu-23.png);background-size: contain;}.img-item9{background-image: url(sanpham1.png);}.img-item10{background-image: url(sanpham2.png);}.img-item11{background-image: url(sanpham3.png);}.img-item12{background-image: url(sanpham4.png);}.img-item13{background-image: url(sanpham1.png);}.img-item14{background-image: url(sanpham2.png);}.img-item15{background-image: url(sanpham3.png);}.img-item16{background-image: url(sanpham4.png);}

/* ảnh sản phẩm trang women */
.imgnu-item1{background-image: url(do-nu-1.png);}.imgnu-item2{background-image: url(do-nu-2.png);}.imgnu-item3{background-image: url(do-nu-3.png);}.imgnu-item4{background-image: url(do-nu-4.png);}.imgnu-item5{background-image: url(do-nu-5.png);}.imgnu-item6{background-image: url(do-nu-6.png);}.imgnu-item7{background-image: url(do-nu-7.png);}.imgnu-item8{background-image: url(do-nu-8.png);}.imgnu-item9{background-image: url(do-nu-9.png);}.imgnu-item10{background-image: url(do-nu-10.png);}.imgnu-item11{background-image: url(do-nu-9-hinh2.png);}.imgnu-item12{background-image: url(do-nu-12.png);}.imgnu-item13{background-image: url(do-nu-13.png);}.imgnu-item14{background-image: url(do-nu-14.png);}.imgnu-item15{background-image: url(do-nu-15.png);}.imgnu-item16{background-image: url(do-nu-16.png);}.imgnu-item17{background-image: url(do-nu-17.png);}.imgnu-item18{background-image: url(do-nu-18.png);}.imgnu-item19{background-image: url(do-nu-19.png);}.imgnu-item20{background-image: url(do-nu-20.png);}.imgnu-item21{background-image: url(do-nu-21.png);}.imgnu-item22{background-image: url(do-nu-22.png);}.imgnu-item23{background-image: url(do-nu-23.png);}.imgnu-item24{background-image: url(do-nu-24.png);}.imgnu-item25{background-image: url(do-nu-25.png);}.imgnu-item26{background-image: url(do-nu-26.png);}.imgnu-item27{background-image: url(do-nu-27.png);}.imgnu-item28{background-image: url(do-nu-28.png);}.imgnu-item29{background-image: url(do-nu-29.png);}.imgnu-item30{background-image: url(do-nu-30.png);}
/* ảnh sản phẩm trang winter collection */
.nu-dong-1{background-image: url(do-nu-1-muadong.webp);}.nu-dong-2{background-image: url(do-nu-2-muadong.webp);}.nu-dong-3{background-image: url(do-nu-3-muadong.webp);}.nu-dong-4{background-image: url(do-nu-4-muadong.webp);}.nu-dong-5{background-image: url(do-nu-5-muadong.webp);}.nu-dong-6{background-image: url(do-nu-6-muadong.webp);}.nu-dong-7{background-image: url(do-nu-7-muadong.webp);}.nu-dong-8{background-image: url(do-nu-8-muadong.webp);}.nu-dong-9{background-image: url(do-nu-9-muadong.webp);}.nu-dong-10{background-image: url(do-nu-10-muadong.webp);}
/* ảnh sản phẩm trang man */
.imgnam-item1{background-image: url(do-nam-1.jpg);}.imgnam-item2{background-image: url(do-nam-2.jpg);}.imgnam-item3{background-image: url(do-nam-3.jpg);}.imgnam-item4{background-image: url(do-nam-4.jpg);}.imgnam-item5{background-image: url(do-nam-5.jpg);}.imgnam-item6{background-image: url(do-nam-6.jpg);}.imgnam-item7{background-image: url(do-nam-7.jpg);}.imgnam-item8{background-image: url(do-nam-8.jpg);}.imgnam-item9{background-image: url(do-nam-9.jpg);}.imgnam-item10{background-image: url(do-nam-10.jpg);}.imgnam-item11{background-image: url(do-nam-11.jpg);}.imgnam-item12{background-image: url(do-nam-12.jpg);}.imgnam-item13{background-image: url(do-nam-13.jpg);}.imgnam-item14{background-image: url(do-nam-14.jpg);}.imgnam-item15{background-image: url(do-nam-15.jpg);}.imgnam-item16{background-image: url(do-nam-16.jpg);}.imgnam-item17{background-image: url(nam6.jpg);}.imgnam-item18{background-image: url(nam7.jpg);}.imgnam-item19{background-image: url(nam8.jpg);}.imgnam-item20{background-image: url(nam9.jpg);}

.blockcontainer{
    display: flex;
    text-align: center;
}
@font-face {
    font-family: 'Playfair Display';
    src: url('path/to/playfair-display.woff2') format('woff2'),
         url('path/to/playfair-display.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
body{
    align-content: center;
    font-family: "Playfair Display", "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
	background: black;
}
#modalProductPrice, p, #cartItems, #totalPrice, #orderDetails div {
	font-family: math; /* Dùng math cho số */
}

.space-inner{
    border: 0px solid;
    height:50px;
}
.img-best-selling-1, .img-best-selling-2, .img-best-selling-3, .img-best-selling-4 {
    width: 100%;
    height: 250px;
    background-size: cover;
    background-position: center;
}
.img-best-selling-1{
    background-image: url(bestselling1.png);
}
.img-best-selling-2{
    background-image: url(bestselling2.png);
}.img-best-selling-3{
    background-image: url(bestselling3.png);
}.img-best-selling-4{
    background-image: url(bestselling4.png);
}

.buy-button {
    background-color: black;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px;
    cursor: pointer;
    margin: 1px;
    transition: background-color 0.3s;
}

.buy-button:hover {
    background-color: grey
}

.modal {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
}



.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.add-to-cart {
    background-color: black;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px;
    cursor: pointer;
    transition: background-color 0.3s;
    margin: 1px;
}

.add-to-cart:hover {
    background-color: grey;
}
#loginModal .modal-content {
    width: 300px;
    padding: 20px;
}

#loginModal input {
    width: 100%;
    padding: 10px;
    margin: 5px 0;
}
.modal-content {
    background-color: #fefefe;
    margin: 10% auto; 
    padding: 20px;
    border: 1px solid #888;
    width: 90%; 
    max-width: 700px; 
    border-radius: 8px;
	overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.modal-body {
    display: flex; /* Sử dụng flexbox */
}
/* Product gallery */
.product-gallery-mini-show {
    flex: 60%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 30px; /* Tăng khoảng cách giữa hình ảnh và thông tin */
}
.product-info {
    flex: 40%;
	width: 100%;
    padding: 10px;
    box-sizing: border-box;
}
.product-info h4,
.product-info p {
    word-wrap: break-word; /* Đảm bảo văn bản không bị tràn */
    overflow-wrap: break-word; /* Đảm bảo văn bản không bị tràn */
}
@media (max-width: 600px) {
	.sorting-options {
        width: auto;
		height: 50px
    }
	.sorting-options button{
		font-size: xx-small;
		margin-top: auto;
	}
	.review{
		display: flex;
		flex-direction: column;
	}
	.review-section2{
		margin: 0;
		margin-top: 5px;
	}
	.product-info {
        padding: 15px; /* Tăng padding cho dễ nhìn */
    }
	.product-gallery-mini-show {
        flex: 100%; /* Chiếm toàn bộ chiều rộng trên màn hình nhỏ */
        margin: 0; /* Bỏ margin để không bị tràn */
    }

    /* Điều chỉnh kích thước hình ảnh hoặc các phần tử bên trong */
    .product-gallery-mini-show img {
        max-width: 100%; /* Đảm bảo hình ảnh không vượt quá chiều rộng */
        height: auto; /* Giữ tỷ lệ khung hình */
    }
    #modalProductName,
    #modalProductDetails,
    #modalProductPrice,
    #modalProductCode,
    #modalProductStock {
        font-size: 16px; /* Điều chỉnh kích thước chữ */
    }

    select {
        width: 100%; /* Chiếm toàn bộ chiều rộng cho select */
    }
    .modal-content {
        padding: 15px; /* Giảm padding cho di động */
        margin: 5% auto; /* Giảm khoảng cách trên cho phù hợp */
        border-radius: 5px; /* Giảm độ bo góc */
        max-width: none; /* Bỏ chiều rộng tối đa */
    }
	.item {
        width: 100%; /* Full width for items */
    }
    .btn {
        text-align: center; /* Center buttons */
    }
    #modalProductImage {
        width: 80px;
    }

    .mini-image {
        width: 40px; 
    }
	.search-input {
        padding: 8px; /* Giảm padding cho vừa hơn */
        height: 40px; /* Tăng chiều cao để dễ nhập liệu */
    }
	h1 {
        font-size: 36px; /* Giảm kích thước chữ cho di động */
        margin-top: 20px; /* Giảm khoảng cách trên */
        padding: 15px; /* Giảm padding để tiêu đề gọn hơn */
    }
	.header-buttons {
        flex-direction: column; /* Chuyển sang dạng cột cho màn hình nhỏ */
        align-items: flex-start; /* Căn trái cho các nút */
    }

    .search-button, .login-button, .cart-button, .menu-icon {
        margin: 5px 0; /* Thêm khoảng cách giữa các nút theo chiều dọc */
    }
}

#modalProductImage {
    width: 100%; /* Chiều rộng hình ảnh 100% */
    height: auto; /* Giữ tỉ lệ */
	max-width: 800px;
    border-radius: 5px;
	display: block;
	margin: 0 auto;
}

/* Size selection */
.size-selection {
    display: flex; /* Sử dụng flexbox cho label và select */
    align-items: center; /* Căn giữa theo chiều dọc */
    margin-top: 10px; /* Khoảng cách trên */
}
/* Mini images */
#miniImageGallery {
    display: flex;
    justify-content: center; /* Căn giữa các hình ảnh mini */
}
.mini-image {
    width: 60px; /* Tăng kích thước mini */
    height: auto;
    cursor: pointer;
    margin: 5px; /* Khoảng cách giữa các hình ảnh */
}
.modal-content h2, .modal-content h3 {
    text-align: center;
    color: #333;
}

.modal-content input {
    width: calc(100% - 20px);
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.modal-content button {
    padding: 10px;
	width: auto;
    margin: 5px 0;
    background-color: black;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.modal-content button:hover {
    background-color: grey;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
#paymentForm {
    background: #fff;
    padding: 20px;
    border-radius: 30px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    max-width: 850px;
	width: 100%;
    margin: auto;
}
@media (max-width: 768px) {
    #paymentForm {
        padding: 15px; /* Adjust padding for smaller screens */
		width: fit-content;
    }

    h2 {
        font-size: 20px; /* Smaller heading size */
    }

    input, select {
        font-size: 14px; /* Smaller font size for inputs */
    }

    .btn-thanhtoan {
        font-size: 14px; /* Smaller button font size */
    }
}

@media (max-width: 480px) {
    #paymentForm {
        padding: 10px; /* Further reduced padding */
		width: fit-content;
    }

    h2 {
        font-size: 18px; /* Further reduced heading size */
    }

    input, select {
        font-size: 14px; /* Consistent smaller font */
    }
}
#paymentForm h2, #orderDetails p{
	text-align: center;
}
#reviewForm{
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin: auto;
}
label {
    display: block;
    margin-bottom: 5px;
    color: #555;
    text-align: left;
}
input, select {
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    padding: 10px;
	width: calc(100% - 20px);
	margin-left: 0;
}
.btn-thanhtoan {
    background: black;
    color: #fff;
    border: none;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
	margin-top: 20px;
	width: 100%;
}
.btn-thanhtoan:hover {
    background: grey;
}

#orderDetails {
    background: #fff;
    padding: 10px;
    border-radius: 20px;
    margin-bottom: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
#orderDetails div {
    margin-bottom: 5px;
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px; /* Thêm padding nếu cần */
    background-color: rgba(255, 255, 255, 0.9); /* Nền trắng nhạt để nổi bật */
    border-radius: 8px; /* Bo tròn góc */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Bóng đổ nhẹ */
}

.pagination-button {
    background-color: tan; /* Màu nền tươi sáng */
    color: white; /* Màu chữ */
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    margin: 0 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s; /* Thêm hiệu ứng cho nút */
}

.pagination-button:hover {
    background-color: grey; /* Màu nền khi hover */
    transform: translateY(-2px); /* Hiệu ứng nhấn */
}
.pagination-button.active {
    background-color: grey;
    color: tan;
}
.pagination-button:disabled {
    background-color: grey;
    color: tan;
    cursor: not-allowed;
    border: 1px solid #ddd;
}
.sorting-options {
    display: flex;
    justify-content: center;
    margin: 20px 10px;
    gap: 15px;
}

.sorting-options button {
    background-color: tan; /* Màu nền */
    color: white; /* Màu chữ */
    border: none; /* Bỏ viền */
    border-radius: 5px; /* Bo góc */
    padding: 10px 20px; /* Khoảng cách bên trong */
    cursor: pointer; /* Con trỏ khi hover */
    transition: background-color 0.3s, transform 0.3s; /* Hiệu ứng chuyển đổi */
}

.sorting-options button:hover {
    background-color: grey; /* Màu nền khi hover */
    transform: scale(1.05); /* Phóng to nhẹ khi hover */
}

.sorting-options button:focus {
    outline: none; /* Bỏ viền khi được chọn */
}

.sorting-options button:active {
    transform: scale(0.95); /* Nhỏ lại khi nhấn */
}