<style>
.product-card {
max-width: 12em;
background-color: #fff;
padding: 1em;
box-shadow: 0 5px 5px #e1e1e1;
font-family: Arial, Helvetica, sans-serif;
}
.product-card img {
max-width: 100%;
}
.product-card h4 {
font-size: 1.3em;
margin: 0.5em 0;
font-weight: bold;
}
.product-card div {
font-size: 1.2em;
display: flex;
justify-content: space-between;
align-items: center;
}
.product-card button {
background-color: #000;
color: #fff;
border: none;
border-radius: 50%;
width: 25px;
height: 25px;
font-size: 1em;
display: flex;
justify-content: center;
align-items: center;
}
.product-card:hover {
background-color: lightslategray;
color: #fff;
}
.product-card:hover button {
color: #000;
background-color: #fff;
}
@media screen and (max-width: 576px) {
.product-card {
font-size: 0.9em;
}
}
</style>
<div class="product-card">
<img src="https://w.ladicdn.com/60988adb4f31f60012f43f81/va-san-go-tay-cam-dai-sieu-tien-ich-7qukw-ljnvvrqquade5e-20240723143556-8snsg.jpg" alt="">
<h4>Vá Sạn Gỗ</h4>
<div>
<span>Dụng Cụ Nhà Bếp</span>
<button>+</button>
</div>
</div>
