/* RESET */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:Arial;
}

/* TOP */
#top{
    width:100%;
    height:48px;
    background-color:green;
    color:#fff;
}

#top-content{
    width:80%;
    height:48px;
    margin:0 auto;
}

#top-left{
    width:70%;
    height:48px;
    float:left;
    line-height:48px;
}

#top-right{
    width:30%;
    height:48px;
    float:right;
    line-height:48px;
    text-align:right;
}

#top-right a{
    color:#fff;
    text-decoration:none;
}

/* BANNER */
#banner{
    width:100%;
    height:200px;
    background:white;
}

#banner-content{
    width:80%;
    height:200px;
    margin:0 auto;
    display:flex;
}

#logo{
	height:100%;
	flex:1;
}
#deliver{
	height:100%;
	flex:1;
}	
#support{
	height:100%;
	flex:1;
}
#time{
	height:100%;
	flex:1;
}
#cart{
    flex:1;
    height:100%;
}

#logo img{
    margin-top:70px;
    height:60px;
    width:98%;
}

/* BOX INFO */
.info{
    width:100%;
    height:60px;
    margin-top:70px;
}

.info-left{
    width:22%;
    height:60px;
    float:left;
}

.info-left img{
    margin-top:15px;
}

.info-right{
    width:78%;
    height:60px;
    float:right;
    line-height:30px;
}

/* CART */
.cart-box{
    width:100%;
    height:60px;
    margin-top:70px;
    text-align:center;
}

.cart-box a{
    display:block;
    line-height:60px;
    background:orange;
    color:#fff;
    text-decoration:none;
    border-radius:20px;
}

/* MENU */
#menu{
    width:100%;
    height:48px;
    background:green;
}

#menu-content{
    width:80%;
    height:48px;
    margin:0 auto;
}

#menu ul{
    list-style:none;
}

#menu ul li{
    float:left;
    height:48px;
}

#menu ul li a{
    display:block;
    line-height:48px;
    padding:0 15px;
    text-decoration:none;
    color:#fff;
}

#menu ul li a:hover{
    background:#006400;
}

/* WRAPPER */
#wrapper{
    width:100%;
    background:white;
}

#container{
    width:80%;
    margin:0 auto;
}

/* MAIN */
.main{
    width:100%;
    height:412px;
    margin-top:40px;
}

/* LIST CATEGORY */
#list-cate{
    width:23%;
    height:100%;
    float:left;
    border:1px solid #ccc;
    border-radius:20px;
}

#list-cate h1{
    background:green;
    color:#fff;
    font-size:16px;
    text-align:center;
    line-height:42px;
    border-radius:20px;
}

#list-cate ul{
    list-style:none;
}

#list-cate ul li{
    line-height:40px;
    border-bottom:1px solid #ccc;
}

#list-cate ul li a{
    display:block;
    text-decoration:none;
    text-align:center;
    color:#000;
}

/* SLIDESHOW */
#slideshow{
    width:75%;
    height:100%;
    float:right;
    border:1px solid #ccc;
    border-radius:20px;
}

#slideshow img{
    width:100%;
    height:100%;
    border-radius:20px;
}

/* ADS */
.ads{
    height:156px;
    width:100%;
    margin-top:40px;
    display:flex;
    gap:40px;
}

.ads img{
    flex:1;
}

/* CATEGORY */
.cate{
    height:400px;
    width:100%;
    margin-top:40px;
}

.cate h1{
    background:green;
    color:#fff;
    font-size:16px;
    text-align:center;
    line-height:42px;
    border-radius:20px;
    width:300px;
}

/* PRODUCTS */
.list-product{
    width:100%;
    height:316px;
    margin-top:40px;
    display:flex;
    gap:30px;
}

.product{
    flex:1;
    border:1px solid #ccc;
    border-radius:30px;
    text-align:center;
    padding:10px;
}

.product img{
    width:200px;
}

.product-name{
    color:green;
    font-weight:bold;
}

.product-price{
    color:orange;
    font-weight:bold;
}

/* FOOTER */
#footer{
    width:100%;
    height:300px;
    background:green;
    margin-top:40px;
}

#footer-content{
    width:80%;
    height:300px;
    margin:0 auto;
    display:flex;
    color:#fff;
}

.footer-box{
    flex:1;
    padding:30px;
}

.footer-box ul{
    list-style:none;
}

.footer-box li{
    margin-bottom:10px;
}

.footer-box p{
    margin-bottom:10px;
    line-height:24px;
}