*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:sans-serif;
}

a {
    text-decoration: none;
    color: black;
}

body{
    background:#fff;
    padding:px;

}

/* ===== COMMON ===== */

.nav-btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:45px;
    height:45px;
    border:none;
    border-radius:50%;
    background:#fff;
    box-shadow:0 4px 10px rgba(0,0,0,.15);
    cursor:pointer;
    z-index:10;
    opacity:0;
    transition:.3s;
}

.left{
    left:10px;
}

.right{
    right:10px;
}

.category-wrapper:hover .nav-btn,
.slider-wrapper:hover .nav-btn{
    opacity:1;
}

/* ===== CATEGORY ===== */

.category-wrapper{
    position:relative;
    background:white;
    padding:px;
    border-radius:10px;
    overflow:hidden;
}

.category-slider{
    display:flex;
    gap:10px;
    overflow-x:auto;
    scroll-behavior:smooth;
    scrollbar-width:none;
    text-decoration: none;
}

.category-slider::-webkit-scrollbar{
    display:none;
}

.category-card{
    flex:0 0 auto;
    width:200px;
    text-align:center;
}

.category-card img{
    width:100%;
    border-radius:8px;
}

.category-card p{
    margin-top:8px;
    font-size:14px;
    text-decoration: none;
}

/* ===== FLASH SALE ===== */

.flash-sale{
    margin-top:20px;
    background:white;
    overflow:hidden;
    
}

.flash-header{
    background:#FF9900;
    color:white;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:5px 10px;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom: 10px;
}

.flash-header a{
    color:white;
    text-decoration:none;
}

.flash-header-6{
    background:#333399;
    color:white;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:5px 10px;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom: 10px;
}

.flash-header-6 a{
    color:white;
    text-decoration:none;
}

.flash-header-5{
    background:#00CC00;
    color:white;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:5px 10px;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom: 10px;
}

.flash-header-5 a{
    color:white;
    text-decoration:none;
}


.flash-header-4{
    background:#FF0000;
    color:white;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:5px 10px;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom: 10px;
}



.flash-header-4 a{
    color:white;
    text-decoration:none;
}


.flash-header-3{
    background:#0066CC;
    color:white;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:5px 10px;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom: 10px;
}

.flash-header-3 a{
    color:white;
    text-decoration:none;
}


.flash-header-2{
    background:#FF0066;
    color:white;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:5px 10px;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom: 10px;
}

.flash-header-2 a{
    color:white;
    text-decoration:none;
}


.flash-header-1{
    background:#9900FF;
    color:white;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:5px 10px;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom: 10px;
}

.flash-header-1 a{
    color:white;
    text-decoration:none;
}

.slider-wrapper{
    position:relative;
    padding:;
}

.product-slider{
    display:flex;
    gap:15px;
    overflow-x:auto;
    scroll-behavior:smooth;
    scrollbar-width:none;
}

.product-slider::-webkit-scrollbar{
    display:none;
}

.product-card{
    flex:0 0 auto;
    width:220px;
    background:white;
    position:relative;
}

.discount{
    position:absolute;
    top:10px;
    left:10px;
    background:#ffede8;
    color:#ff4d00;
    padding:4px 8px;
    font-size:12px;
    border-radius:5px;
}

.product-card img{
    width:100%;
    border-radius:8px;
}

.product-card h4{
    margin:10px 0;
    font-size:14px;
    line-height:1.4;
}

.price{
    font-size:22px;
    font-weight:bold;
}

.old-price{
    color:#999;
    text-decoration:line-through;
    font-size:14px;
}

.progress{
    margin-top:10px;
    width:100%;
    height:8px;
    background:#ddd;
    border-radius:50px;
}

.progress div{
    height:100%;
    background:#FF9900;
    border-radius:50px;
}

.progress-1{
    margin-top:10px;
    width:100%;
    height:8px;
    background:#ddd;
    border-radius:50px;
}



.progress-1 div{
    height:100%;
    background:#9900FF;
    border-radius:50px;
}

.progress-2{
    margin-top:10px;
    width:100%;
    height:8px;
    background:#ddd;
    border-radius:50px;
}

.progress-2 div{
    height:100%;
    background:#FF0066;
    border-radius:50px;
}

.progress-3{
    margin-top:10px;
    width:100%;
    height:8px;
    background:#ddd;
    border-radius:50px;
}

.progress-3 div{
    height:100%;
    background:#0066CC;;
    border-radius:50px;
}

.progress-4{
    margin-top:10px;
    width:100%;
    height:8px;
    background:#ddd;
    border-radius:50px;
}

.progress-4 div{
    height:100%;
    background:#FF0000;
    border-radius:50px;
}


.progress-5{
    margin-top:10px;
    width:100%;
    height:8px;
    background:#ddd;
    border-radius:50px;
}

.progress-5 div{
    height:100%;
    background:#00CC00;
    border-radius:50px;
}

.progress-6{
    margin-top:10px;
    width:100%;
    height:8px;
    background:#ddd;
    border-radius:50px;
}

.progress-6 div{
    height:100%;
    background:#333399;
    border-radius:50px;
}

/* ===== MOBILE ===== */

@media(max-width:768px){

    .nav-btn{
        display:none;
    }

    .category-card{
        width:100px;
    }

    .product-card{
        width:170px;
    }

    .price{
        font-size:18px;
    }
}

@media(max-width: 768){
    .flash-sale{
    margin-top:20px;
    background:white;
    border-radius:;
    overflow:hidden;
    
}
}