*{
    margin :0;
    padding: 0;
    box-sizing: border-box;
}
body{
    font-family: Arial, Helvetica, sans-serif;
    background-color: white;
}

header{
    background-color: #333;
    color: white;
    padding: 16px;
    text-align: center;
}

/*menu*/
nav{
    display: flex;
    justify-content: center;
    background-color: #444;
    padding: 8px;
}

nav a{
    color : yellow;
    margin: 0 16px;
    text-decoration: none;
}

nav a:hover {
    color:red
}

ul {
    list-style-type: none;
}

ul li{
    display : inline-block;
    width : 150px;
    position : relative;
}

.submenu{
    display : none;
    position : absolute;
    background-image: linear-gradient(to right , black , white);
    z-index: 10; /* Giúp menu con nổi lên trên, không bị ảnh che khuất */
}

.submenu li{
    padding-top : 2px;
    padding-bottom: 2px;
    border : 1px dotted white;
}

.menu li:hover .submenu{
    display : block;
}

.products{
    display : grid;
    grid-template-columns: repeat(3,1fr);
    gap : 20px;
    padding : 30px;
}

.product{
    background-color: white;
    border-radius:  8px;
    padding : 16px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    display:flex;
    flex-direction: column;
    justify-content: space-between; /* Giúp các nút bấm luôn thẳng hàng ở đáy ô */
    text-align: center; /* Căn giữa toàn bộ chữ và ảnh cho ngay ngắn */
}

/* === ĐOẠN THÊM VÀO ĐỂ SỬA LỖI ẢNH TO VÀ KHÔNG ĐỀU === */
.product img {
    width: 100%;          /* Ép chiều rộng ảnh vừa khít ô chứa */
    height: 180px;        /* Cố định chiều cao bằng nhau cho mọi bức ảnh */
    object-fit: contain;  /* Giữ nguyên tỉ lệ gốc, ảnh không bị méo hay bị cắt góc */
    margin-bottom: 12px;  /* Tạo khoảng cách trống dưới chân ảnh */
}