/* trang chủ */
body {
    font-family: Arial;
    margin: 0;
    background: #e6ffe6;
}

.header {
    background: url('./image/background.jpg');
    color: #020000;
    background-size: auto;
    font-family: 'Times New Roman', Times, serif;
    font-size: 50px;
    padding: auto;
    text-align: center;
}

.header1 {
    text-align: center;
    font-size: 40px;
}

/* menu */
.menu {
    margin: 0;
    background: green;
    background-size: auto;
    display: flex;
    list-style: none;
    padding: 0;
}

.menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    background: #a0a;
}

.menu li {
    position: relative;
}

.menu a {
    color: #fff;
    padding: 10px 20px;
    color: white;
    display: block;
    text-decoration: none;
}

.menu li:hover {
    background: rgb(13, 156, 61);
}

/* sub */
.sub menu {
    display: none;
    position: absolute;
    background: rgb(0, 170, 51);
    top: 100%;
    left: 0;

}

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

/* container */
.container {
    padding: 20px;
    background: #fff;
}

.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.box {
    border: 1px solid #ccc;
    text-align: center;
    padding: 10px;
}

.footer {
    background: green;
    color: #fff;
    text-align: center;
    padding: 10px;
}

.box:hover {
    background: #f2fff2;
}