*
{
    margin: 0;
}
body
{
    background-color:rgba(128, 128, 128, 0.308) ;
    font-family: Arial, Helvetica, sans-serif;
}

/*đầu trang*/
header
{
    background-color: #ffbd30;
    display: flex;/*thiết lập chế độ hiển thị*/
    padding: 10px;
    object-fit: cover;/* Đảm bảo hình ảnh phủ đầy khung mà không bị méo */
}
header img {
    height: 95px;/* Đặt chiều cao */
    width: 200px;/* Đặt chiều rộng */
    border-radius: 10px;/* Bo tròn các góc */
    object-fit: cover;/*hình đủ khung không bể ảnh*/
}
header div
{
    display: flex;
    justify-content: right;
    width: 100%;
}
header div ul
{
    display: flex;
    list-style: none;/*bỏ chấm */

}
header div ul li
{
    margin-left: 15px;/*khoản cách bên trái*/
}
header div ul li a
{
    color: black;
    text-decoration: none; /* Loại bỏ gạch chân cho liên kết */
    background-color: #ffde59;
    padding: 5px 10px;
    border-radius: 5px;
    transition: background-color 0.3s; /*hiệu ứng thay đổi màu nền */
}
header div ul li a:hover
{
    color: orange;
    background-color: yellow;
}
/* thanh tìm kiếm */
header div ul div
{
    position: absolute;
    height: 32px;
    background-color: white;
    border-radius: 90px;
    width: auto;
    margin-top: 50px;
    right: 30%;
    left: calc(100% - 65%);

}
header div ul div input
{
    border-radius: 90px 0 0 90px;
    height: 30px;
    width: 100%;
    border: none;
    outline: none;
    text-align:center;
}
header div ul div a
{
    display: flex;
    align-items: center;/* Căn giữa theo chiều dọc */
    margin: 0 10px;
    text-decoration: none;
    color: black;
}
header div ul div a:hover
{
    color: blue;
}

/* nav */

.n
{
    line-height: 20px;/*chiều cao văn bản*/
    background-color: #ffbd30; 
    margin-bottom: 5px;
}
.n ul
{
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0 auto;
}
.n ul li
{
    margin: 5px ;
    font-size: 14px;
}
.n ul li a
{
    color: black;
    text-decoration: none;
    padding: 5px;
    background-color: #fddf64;
    border-radius: 3px;
    transition: background-color 0.3s;

}
.n ul li a:hover
{
    color:orange;
    background-color:yellow;
}
/* link */
.home
{
    color: black;
    margin: 5px;
}
/* <!-- Swiper --> */
.swiper {
    width: 100%;
    height: 100%;
    
}

.swiper-slide {
    margin: 10px;
    text-align: center;
    font-size: 180px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    max-width: 100%;
    object-fit: cover;
}

/* menu dọc */
aside
{
    background-color: white;
    width: 18%;
    margin: 10px;
    padding: 10px;
    font-weight: bold; /*in đậm*/
    max-height: 810px;
    overflow-y: auto;/*tạo thanh cuộn nếu quá chiều cao */
}
aside div
{
    margin-left: 5px;
    margin-top: 5px;
}
.samp {
    font-size: x-large;
    font-weight: bold; /* In đậm */
}
aside div div samp
{
    font-size: larger;
    font-weight: bold; /* In đậm */
    font-weight: 800; /* Giá trị số đại diện cho in đậm */
}
aside div div label
{
    font-weight: 500;
}
.clear-button {
    margin-top: 20px; /* Thêm khoảng cách cho nút xóa */
    padding: 10px; /* Thêm padding cho nút xóa */
    background-color: orange; /* Màu nền cho nút xóa */
    color: white; /* Màu chữ cho nút xóa */
    border: none; /* Xóa viền */
    border-radius: 5px; /* Bo tròn góc cho nút xóa */
    cursor: pointer; /* Con trỏ chuột khi hover */
    transition: background-color 0.3s; /* Hiệu ứng chuyển màu */
}

.clear-button:hover {
    background-color: darkorange; /* Màu nền khi hover */
}
/*menu ngan dưới*/
.container
{
    position: absolute;
    background-color: white;
    padding: 20px;
    margin-top: 10px;
    margin-left: 21%;
    margin-right: 10px;
    max-height: 790px; /* Giới hạn chiều cao tối đa */
    overflow-y: auto; /* Thêm thanh cuộn dọc nếu nội dung vượt quá chiều cao */
    
}
.hinh
{
    height: auto;
}
.products
{
    display: flex;
    gap: 20px;
    flex-wrap: wrap;/* Cho phép các phần tử con quấn xuống dòng */
    justify-content: center;
}
.product
{
    width: calc(20% - 10px);
    text-align: center;
    padding: 10px;
    border: 1px solid gainsboro;
    border-radius: 7px;
    overflow: hidden;
    position: relative;
}
.product:hover
{
    box-shadow: 0 0 10px rgb(168, 168, 168);
}
.title
{
    color: black;
    font-weight: bold;
    z-index: 2;

}
.product img
{
    width: 100%;
    transition: transfrom 1s ease;

}
.new
{
    width: 50px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
}
.new img
{
    width: 100%;

}
.product img:hover
{   
    transform: scale(1.1); /* Phóng to 20% khi di chuột */
}
.price 
{
    display: flex;
    justify-content: space-around;
    font-size: 12px;
}
.price del
{
    color: gray;
}
.price .giamoi
{
    color: red;
} 
.button
{
    border: none;
    padding: 7px 20px;
    border-radius: 7px;
}
.button:hover
{
    background-color: #ffde59;
    color: white;
}
.product img
{
    margin: 5px;
    width: 100%;
    transition: transform 1s ease;
    position: relative; /* Đặt vị trí tương đối cho hình ảnh */
    z-index: 1; 
}
/* cuối web */
.cuoi
{
    display: flex;
    background-color: white;
    justify-content: center;
}
.cuoii
{
    margin: 20px;
    color: black;
}
.cuoii p
{
    font-weight: bold; /*in đậm*/
    margin-bottom: 5px;
}
.cuoii li
{
    list-style: none;/*bỏ chấm */
}
.cuoii li a
{
    text-decoration: none; /* Loại bỏ gạch chân cho liên kết */
    color: black;
}
.ce
{
    border: 1px solid black;
    border-radius: 5px;
}
/* Footer Styles */
.ifr
{
    display: flex;
    justify-content: center;
    margin: 10px 0;

}
footer {
    background-color: #333; /* Màu nền cho footer */
    color: white; /* Màu chữ trong footer */
    padding: 20px 0; /* Padding cho footer */
    text-align: center; /* Canh giữa */
}

.footer-container {
    max-width: 1200px; /* Kích thước tối đa của nội dung footer */
    margin: 0 auto; /* Canh giữa nội dung */
    padding: 0 20px; /* Padding trái, phải */
    display: flex; /* Sử dụng flexbox cho layout */
    justify-content: space-between; /* Giữa các phần nội dung */
    flex-wrap: wrap; /* Cho phép xuống dòng */
}
footer p {
    margin: 5px 0;
}