body{
    margin:0;
    padding:0;
    font-family:Arial, Helvetica, sans-serif;
    background-color:azure;
}

/* HEADER */

header{
    background-color:#222222;
    color:white;
    text-align:center;
    padding:20px;
}

header h1{
    margin:0;
    font-size:48px;
}

header p{
    margin-top:10px;
    font-size:18px;
}

/* MENU */

nav{
    display:flex;
    justify-content:center;
    background-color:#555555;
    padding:12px;
}

.menu{
    list-style-type:none;
    margin:0;
    padding:0;
}

.menu>li{
    display:inline-block;
    width:150px;
    text-align:center;
    position:relative;
}

.menu>li>a{
    color:yellow;
    text-decoration:none;
    font-weight:bold;
    font-size:20px;
}

.menu>li>a:hover{
    color:red;
}

/* SUBMENU */

.submenu{
    display:none;
    position:absolute;
    left:0;
    top:100%;
    width:150px;
    list-style:none;
    margin:0;
    padding:0;
    background-image:linear-gradient(to right,black,#666);
}

.submenu li{
    border:1px dotted white;
    padding:8px 0;
}

.submenu li a{
    color:yellow;
    text-decoration:none;
}

.submenu li:hover{
    background-color:#444;
}

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

/* DANH SÁCH SẢN PHẨM */

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

/* THẺ SẢN PHẨM */

.product{
    background-color:white;
    border-radius:10px;
    padding:18px;
    text-align:center;
    box-shadow:0px 0px 10px rgba(0,0,0,0.15);
}

.product:hover{
    transform:translateY(-5px);
    transition:0.3s;
}

.product img{
    width:220px;
    height:200px;
    object-fit:contain;
}

.product h3{
    margin:15px 0 8px;
    font-size:30px;
}

.product p{
    color:gray;
    font-size:26px;
    margin-bottom:15px;
}

/* NÚT */

.product button{
    background:#00c853;
    color:white;
    border:none;
    border-radius:5px;
    padding:12px 25px;
    cursor:pointer;
    font-size:18px;
}

.product button:hover{
    background:#009624;
}

/* RESPONSIVE */

@media(max-width:1200px){

.products{
    grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:768px){

.products{
    grid-template-columns:1fr;
}

nav{
    flex-direction:column;
}

.menu>li{
    display:block;
    margin:10px auto;
}

.submenu{
    position:static;
    width:100%;
}

}