.header{ 
    height: 120px;  
    background-image: linear-gradient( 0.7turn, #fe6433, #f53e2d); 
    
}   

.grid{ 
    width: 1200px; 
    max-width: 100%; 
    margin:  0.7;
}  

.grid__row{ 
    display: flex; 
    flex-wrap: wrap; 
    margin-left: -12px; 
    margin-right: -12px;   
} 

.grid__column-2{ 
    padding-left: 12px; 
    padding-right: 12px;  
    width: 15%;
} 

.grid__column-8{ 
    padding-left: 12px; 
    padding-right: 12px;  
    width: 83.33333%; 
}



.header__navbar{
    display: flex; 
    justify-content: space-between;
} 

.header__navbar-list{ 
    list-style: none; 
    padding-left:  0.7;
    margin-top: 4px;  
    display: flex; 
} 
 
.header__navbar-item{ 
    margin:  0.7; 
    position: relative;  
    /* display: inline-flex; */
    /* watch video again */
}

.header__navbar-item, 
.header__navbar-item-link{ 
    display: inline-block; 
    /* all block in the line */ 
    font-size: 1.3rem; 
    color: var(--white-color); 
    text-decoration: none;
    font-weight: 300;  
    padding: 0 3px; 
    cursor: pointer; 
    line-height: 22px; 
}    



.header__navbar-item--has-qr:hover .header__qr{ 
    display: block; 
    /* header qr is the son of header navbar item has qr */ 

} 

.header__navbar-item--has-notify:hover .header__notify{ 
    display: block;
}

.header__navbar-item-link:hover, 
.header__navbar-item--strong:hover{   
    cursor: pointer;  
    color: rgba(255,255, 255, 0.7); 
}


.header__navbar-item--strong{  
    font-weight: 400;
} 

.header__navbar-item--separate::after{ 
    content: ""; 
    display: block;  
    position: absolute; 
    /* watch video again */ 
    border-left: 1px solid #FB9086;
    height: 13px; 
    right: -2px;
    top: 50%;
    transform: translateY(-50%);  
} 

.header__navbar-item-link{ 
    color: #fff;
    text-decoration: none;
} 

.header__navbar-icon-link{ 
    cursor: pointer; 
    color: #fff;
    text-decoration: none; 
}

.header__navbar-icon{ 
    font-size: 1.8rem; 
    margin: 0 8px;
}

.header__navbar-icon-right{ 
    font-size: 1.8rem;
}  


.header__navbar-user{ 
    display: flex; 
    /* justify-items: center;  */ 
    align-items: center;
}  

.header__navbar-user span{ 
    margin-left: 3px;
}

.header__navbar-user-img{ 
    width: 22px; 
    height: 22px; 
    border-radius: 50%; 
    border: 1px solid rgba(0,0,0,0.2); 

}  

.header__navbar-user-menu{ 
    position: absolute;  
    display: none; 
    z-index: 1;
    padding-left: 0; 
    top: 100%; 
    right: 0; 
    width: 160px; 
    border-radius: 2px; 
    background-color: var(--white-color); 
    list-style: none;  
    padding: 8px 2px;  
    box-shadow: 0 1px 2px #b1a9a9;
}  

.header__navbar-user-menu::after{ 
    content:""; 
    display: block; 
    position: absolute; 
    top: -8px; 
    right: 0; 
    width: 60px;  
    height: 8px; 
    background-color: transparent ;
}

.header__navbar-user-item{ 

} 

.header__navbar-user-item a{ 
    text-decoration: none; 
    color: var(--text-color); 
    font-size: 1.4rem;  
    padding: 4px 16px;  
    display: block;
}  

.header__navbar-user-item--separate{ 
    border-top: 1px solid rgba(0,0,0,0.05); 
}

.header__navbar-user-item a:first-child{ 
    border-top-left-radius: 2px; 
    border-top-right-radius: 2px; 
} 

.header__navbar-user-item a:last-child{ 
    border-bottom-left-radius: 2px; 
    border-bottom-right-radius: 2px; 
}

.header__navbar-user-item a:hover{ 
    background-color: #fafafa;
}
 

.header__navbar-user:hover .header__navbar-user-menu{ 
    display: block; 
}
/* Header QR code */ 
.header__qr{ 
     background-color: #fff; 
    width: 189px; 
    position: absolute; 
    left: 0; 
    top: 40px;   
    padding: 8px; 
    border-radius: 2px; 
    display: none;  
    animation: fadeIn ease-out 0.2s; 
    z-index: 1;  
    box-shadow: 0 1px 2px rgba(0,0,0,0.1); 
}   

.header__qr::before{ 
    content: ""; 
    display: block;  
    position: absolute; 
    top: -26px; 
    left: 0; 
    width: 100%; 
    height: 30px; 
    background-color: linear-gradient(0.7turn, #fe6433, #f53e2d);; 
    opacity: 0.7; 
    z-index: 1;
}

.header__qr-img{ 
    width: 100%; 

} 

.header__qr-apps{ 
    display: flex; 
    justify-content: center;    
}  

.header__qr-download-img{ 
    height: 16px;  
    margin: 0 4px;
} 

.header__qr-download-img{ 


}  

.fa-facebook-f{ 
    font-size: 1.4rem; 
} 

.fa-instagram{ 
    font-size: 1.6rem; 
}

/* Header notification */
.header__notify{ 
    
} 

.header__notify{
    position: absolute; 
    top: 118%; 
    width: 404px;  
    border-radius: 2px;  
    background-color: var(--white-color);
    right: 5px; 
    border: 1px solid rgba(0,0,0,0.1); 
    cursor: default; 
    transform-origin:  top right;  
    /* the center origin */ 
    -webkit-animation: headerNotifyGrowth ease-in 0.2s; 
    -ms-animation: headerNotifyGrowth ease-in 0.2s;  
    animation: headerNotifyGrowth ease-in 0.3s; 
    will-change: opacity, transform; 
    display: none;  
    z-index: 2;

}  

.header__notify::before{ 
    content:""; 
    border-width: 20px 30px;
    border-style: solid; 
    border-color: transparent transparent #fff transparent; 
    position: absolute; 
    right: 12px;
    top: -27px; 
} 

.header__notify::after{ 
    content:""; 
    display: block; 
    position: absolute; 
    width: 90px; 
    right: 0; 
    top: -16px; 
    height: 20px; 
    /* background-color: red; */
}
/* create a block to shift the cursor */

@keyframes headerNotifyGrowth{ 
    from{ 
        transform: scale(0);
    } 
    to{ 
        transform: scale(1); 
    }
}


.header__notify-header{
    height: 40px;  
    background-color: var(--white-color);
} 

.header__notify-header h3{ 
    color: #999;  
    margin: 0;  
    font-weight: 400; 
    font-size: 1.4rem;  
    line-height: 40px; 
    margin: 0 0 0 12px; 
    /* left margin */
    cursor: text; 
    user-select: none; 
    
} 

.header__notify-link{
    display: flex;
    padding-left: 0;  
    width: 100%; 
    /* the class will occupied all the width of the list */
    padding: 12px; 
    background-color: rgba(238, 75, 43, 0.08);

}
.header__notify-item{
    /* display: flex; */
}  

.header__notify-item:hover{ 
    background-color: #f1f1f1;

}

.header__notify-item--viewed{ 
    
}
.header__notify-list{
    padding-left: 0px;
    /* so odds! */
} 

.header__notify-img{ 
    width: 48px;
    object-fit: contain;
    margin-left: 10px;
    margin-right: 21px;
  

}
.header__notify-info{
    margin-right: 15px; 
    

}
.header__notify-title{
    display: block; 
    font-size: 1.4rem;  
    color: var(--black-color);
    font-weight: 400; 
    text-decoration: none; 
    line-height: 1.6; 
}
.header__notify-desc{
    display: block; 
    font-size: 1.2rem; 
    line-height: 1.2rem; 
    color: var(--black-color);  
    text-decoration: none; 
    line-height: 1.6; 
    margin-top: 4px;
}
.header__notify-time{
    font-size: 10px;  
    color: var(--black-color); 
    text-decoration: none; 
    line-height: 1.6;
}

.header__notify-footer{ 
    text-align: center;  
    display: flex;
    padding: 10px 0;
} 

.header__notify-footer-btn{ 
    padding: 10px 50px;
    color: #615f5fbd;
    text-decoration: none;   
    margin: auto;
    font-size: 1.4rem; 
    font-weight: 400; 
    text-align: center;
    width: 100%;
}       


/* Authen modal */
.auth-form{ 
    padding: 0 32px;  
    width: 500px; 
    height: 431px; 
    margin-bottom: 52px; 
    display: none;
} 

.auth-form__header{ 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    padding: 0 12px; 

}
 
.auth-form__input{ 
    display: flex; 

}  
 
.auth-form__heading{ 
    font-size: 2.2rem; 
    font-weight: 400; 
    color: var(--text-color);  
    cursor: pointer;

}  

.auth-form__input{ 
    width: 100%; 
    height: 40px; 
    margin-top: 16px; 
    padding: 0 12px; 
    font-size: 1.4rem; 
    border: 1px solid var(--border-color);  
    border-radius: 2px; 
    outline: none;
} 

.auth-form__input:focus{ 
    border-color: #777;
}

.auth-form__switch-btn{ 
    font-size: 1.6rem;  
    font-weight: 400;
    color: var(--primary-color); 
    cursor: pointer;
}

.auth-form__form{ 
    margin-top: 16px;

}
 
.auth-form__aside{ 
    margin-top: 18px;
}  

.auth-form__needHelp{ 
    display: flex; 
    justify-content: flex-end;
}

.auth-form__needHelp-forgetPassword{
    text-decoration: none; 
    font-size: 1.4rem; 
    margin-right: 30px; 
    color: var(--primary-color);
} 

.auth-form__needHelp-forgetPassword::after{
    content: "";
    display: block;
    position: absolute;
    border-left: 1px solid #EAEAEA;
    height: 11px;
    right: 114px;
    top: 43%;
    transform: translateY(-50%);
 }

.auth-form__needHelp-help{
    text-decoration: none; 
    font-size: 1.4rem; 
    color: #939393;
}

.auth-form__policy-text{ 
    font-size: 1.2rem; 
    line-height: 1.6rem; 
    text-align: center; 
    padding: 0 12px;
}

.auth-form__text-link{ 
    color: var(--primary-color); 
    text-decoration: none;
}

.auth-form__controls{ 
    margin-top: 80px;  
    display: flex; 
    justify-content: flex-end;
} 

.auth-form__social{ 
    display: flex; 
    justify-content: center; 
    margin: 0 -31px; 
    line-height: 2;  

    
} 

.auth-form__controls-back{ 
    margin-right: 8px; 
}

.auth-form__social {
    border-radius: 5px;
    background-color: #F5F5F5;
    padding: 16px 0px;
    display: flex;
    justify-content: space-around;
    margin-top: 35px;
}

.auth-form__socials-icon{ 
    font-size: 1.6rem;
}
 
.auth-form__socials-icon--facebook{ 
    color: var(--white-color); 
    /* background-color: var(--white-color); */
    margin-right: 6px;
}

.auth-form__socials-icon--google{ 
    margin-right: 7px;
}

    /* content: "";
    display: block;
    position: absolute;
    border-left: 1px solid #FB9086; */
    /* height: 13px;
    right: -2px;
    top: 50%;
    transform: translateY(-50%); */

/* Header */
.header-with-search{ 
    height: var(--header-with-search-height);
    display: flex; 
    align-items: center;
    margin: 0 8px;

}

.header__logo{ 
    width: 200px; 
    padding-right: 3rem;
} 

.header__logo-img{ 
    width: 150px; 
    color: var(--white-color); 
    
    
}

.header__search{ 
    flex: 1; 
    height: 40px; 
    background-color: var(--white-color); 
    border-radius: 2px;  
    display: flex; 
    align-items: center; 
    
} 

.header__cart{ 
    width: 150px; 
    text-align: center; 
    /* position: relative;  */
}   

.header__cart-wrap{ 
    position: relative;  
    display: inline-block;
    padding: 0 12px;  
    cursor: pointer;
    top: 0px;

} 

.header__cart-view-cart{ 
    float: right; 
    margin: 0 12px 12px 0; 
} 

.header__cart-view-cart:hover{ 
    background-color: #FD5D21; 
}

.header__cart:hover .header__cart-list{ 
    display: block;
    cursor: pointer;
} 
 
.header__cart-list{  
    display: none;  
    animation: fadeIn ease-in 0.3s; 
    cursor: default;   
    /* z-index: 1;   */
}

.heading__cart-list-product{ 
    background: #fff;
    position: relative;
    /* top: 136px; */
    box-shadow: 0 2px 10px #ccc; 
    right: 200px;
    width: 300px;
    height: 250px;
    top: 165px; 
    z-index: 2; 
}


.header__cart-icon{ 
    color: var(--white-color); 
    font-size: 2.6rem; 
    margin-top: 6px;
} 



.header__cart-list--no-cart > img{ 
    /* font-size: 1.6rem;  */
    /* color: var(--text-color); */ 
    width: 400px;
    background-color: #fff;
    position: absolute; 
    padding: 48px 77px;
    right: -4px;
    top: calc(100% + 4px);
    border-radius: 2px;  
    box-shadow: 0 2px 10px #ccc;
    cursor: default; 
    display: none;
}  

 

.header__cart-list::after{ 
    content:""; 
    position: relative; 
    right: 6px; 
    top: 8px;  
    border-width: 20px; 
    border-style: solid;  
    display: block; 
    border-color: transparent transparent  var(--white-color) transparent;
} 
 
.header__cart-notice{
    position: relative;
    padding: 2px 4px;
    color: var(--primary-color);
    background-color: var(--white-color);
    font-size: 1.4rem;
    line-height: 1.4rem;
    border-radius: 22px;
    top: -23px;
    right: -10px;
} 

.header__cart-icon{ 
    position:relative; 
    top: 0px; 
    right: -10px;
} 

.header__cart-heading{ 
    text-align: left;
    margin: 8px 0 8px 12px; 
    font-size: 1.4rem; 
    color: #999;
    font-weight: 400;
}
 
.header__cart-list-item{ 
    padding-left: 0; 
    list-style: none; 
    overflow-y: auto; 
    z-index: 10; 
    height: 30vh; 
}

.header__cart-item{
    display: flex; 
    align-items: center; 
} 

.header__cart-item:hover{ 
    background-color: #F8F8F8;
}
.header__cart-item img{
    width: 42px; 
    height: 42px; 
    margin: 12px;
    /* height: 100px;  */  
    border: 1px solid var(--border-color);
} 

.header__cart-item-info{
    width: 100%; 
    margin-right: 12px;
}
.header__cart-item-head{
    display:flex;  
    align-items: center; 
    justify-content: space-between; 
    margin-right: 12px;
}
.header__cart-item-name{
    font-size: 1.4rem; 
    line-height: 2rem; 
    max-height: 4rem; 
    overflow: hidden; 
    font-weight: 400; 
    color: var(--text-color); 
    margin: 0; 
    flex: 1; 
    padding-right: 16px;  
    display: -webkit-box; 
    -webkit-box-orient: vertical; 
    -webkit-line-clamp: 2;  
    /* Make the name like ... */ 
    text-align: left; 
}
.header__cart-item-price{
    font-size: 1.4rem; 
    font-weight: 500; 
    color: var(--primary-color); 
}
.header__cart-item-multiply{
    font-size: 0.9rem; 
    margin: 0 4px;
    color: #757575;
}
.header__cart-item-quantity{
    color: #757575; 
    font-size: 1.2rem; 
}
.header__cart-item-body{
    /* text-align: left; */ 
    display: flex;
    justify-content: space-between;
}
.header__cart-item-description{
    color: #757575; 
    font-size: 1.2rem;
    font-weight: 300; 
}
.header__cart-item-remove{
    color: var(--text-color);
    font-size: 1.2rem; 
    font-weight: 300;

}

.header__cart-item-remove:hover{ 
    color: var(--primary-color);
    cursor: pointer; 
}

.header__search-input-wrap{ 
    flex: 1;
    height: 100%; 
    position: relative; 
    
}
.header__search-input{  
    width: 100%;
    height: 100%;
    flex: 1;
    border: none;
    outline: none;
    font-size: 1.6rem;
    color: var(--text-color);  
    padding: 0 16px; 
    border-radius: 3px; 
} 

.header__search-select {
    border-left: 1px solid #ccc;
    padding-left: 16px;
    position: relative;
    cursor: pointer;
    padding-top: 10px;
    padding-bottom: 10px;
}   

.header__search-select:hover  .header__search-option{ 
    background-color: #f5f5f5; 
    display: block; 
    animation: fadeIn ease-out 0.4s;
}  

.header__search-select::after{ 
    content: "";
    position: absolute;
    right: 0px;
    top: 37px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent ;
    border-right: 5px solid transparent ;
    border-top: 5px solid transparent ;
    border-bottom: 5px solid transparent ;
    width: 108px;
}

.header__search-select:focus { 
    /* display: block; */
}

.header__search-select-label{ 
    font-size: 1.4rem; 
    color: var(--text-color); 
}
.header__search-select-icon{ 
    font-size: 1.4rem; 
    color: #4A4A4A;
    margin: 0 16px 0 8px;
    position: relative; 
    top: 1px; 
}  


.header__search-btn{ 
    background-color: var(--primary-color); 
    border: none; 
    height: 34px;  
    width: 60px;
    border-radius: 3px; 
    margin-right: 3px;   
    color: white; 
    outline: none;
 
} 

.header__search-btn:hover{ 
    background-color: #ee7760; 
    cursor: pointer;
}


.header__search-btn-icon{ 
    font-size: 1.4rem; 
    background-color: var(--white-color);

}  


 
.header__search-option{ 
    position: absolute; 
    right: 0; 
    top: 81%;
    width: 130px; 
    background-color: var(--white-color);  
    list-style: none;  
    box-shadow: 0 0 3px #ccc;  
    border-radius: 3px;  
    display: none; 
    z-index: 1; 
    
} 

.header__search-option-item{
    background-color: var(--white-color); 
    /* border-radius: 3px;  */
    padding: 8px 8px;  
    /* text-align: right; */
}   

.header__search-option-item a{ 
    display: block; 
    color: var(--text-color); 
    text-decoration: none;
}

.header__search-option-item:hover{ 
    background-color: #f5f5f5; 
}

.header__search-option-item span{ 
    font-size: 1.2rem; 
    color: var(--text-color); 
} 

.header__search-option-item i{ 
    font-size: 1.2rem; 
    color: var(--primary-color);  
    /* margin: 0 4px 0 8px;   */ 
    margin-left: 10px;
} 

.header__search-option-item--active{ 
    margin-left: -27px;
} 

.header__search-option-item--active i{ 
    display: inline-block; 
    margin-right: 2px;
}

/* Search history */ 
.header__search-history{ 
    position: absolute; 
    top: calc(100% + 1px);
    left: 0; 
    width: calc(100% - 16px); 
    background-color: var(--white-color); 
    border-radius: 3px; 
    box-shadow: 0 1px 5px rgb(189,189,189); 
    display: none; 
    overflow:hidden; 
    z-index: 1; 
} 

.header__search-history-heading{ 
    margin: 8px 12px;  
    font-size: 1.4rem; 
    color: #666; 
    font-weight: 400;
}  

.header__search-history-list{ 
    padding-left: 0; 
    list-style: none;  
    margin: 0;
} 

.header__search-history-item{ 
   height: 38px; 
    padding: 0 12px;  
    line-height: 3.6rem; 
    /* cursor: pointer; */

}    

.header__search-history-item:last-child{ 
    border-bottom-left-radius: 3px;
    border-bottom-right-radius:3px; 
}

.header__search-history-item:hover{ 
    background-color: #fafafa;
} 

.header__search-history-item a{ 
    text-decoration: none; 
    font-size: 1.4rem; 
    color: var(--text-color);  
    cursor: pointer;  
    display: block;
    

}

.header__search-input:focus ~ .header__search-history{ 
    display: block;
} 

/* app content */ 

.app__content{ 
    padding-top: 36px; 
    padding-left: 10px;
}

.app__container{ 
    background-color: #F5F5F5; 

} 

.category{ 
    background-color: var(--white-color);  
    /* padding-left: 27px;  */
}
 
.category__heading{ 
    color: var(--text-color); 
    font-size: 1.5rem; 
    font-weight: 400;   
    padding: 16px 16px 0;   
    margin-top: 0;  
    text-transform: uppercase; 
    border-bottom: 1px solid rgba(0,0,0,0.05); 
} 

.category__heading-icon{ 
    font-size: 1.4rem; 
    margin-right: 4px;  
    position: relative; 
    top: -1px; 
}

.category-list{ 
    padding: 0 0 6px 0; 
    list-style: none;   
    margin: 0 16px;  
    border-top: 1px solid;
} 

.category-item{ 
    position: relative; 
}  

.category-item:first-child::before{ 
    display: none; 
}

.category-item::before{ 
    border-top: 1px solid #E1E1E1; 
    content:"";  
    width: 80%;  
    position: absolute; 
    top: 0; 
    left: 11px; 
    right: 16px;  
}

.category-item--active .category-item__link{ 
     color: var(--primary-color);
}  

.category-item--active .category-item__link:before{ 
    position: absolute;  
    top: 50%; 
    left: 4px;  
    content: ""; 
    border: 4px solid;  
    transform: translateY(-65%);
    border-color: transparent transparent transparent var(--primary-color); 
}

.category-item__link{  
    position: relative; 
    text-decoration: none;  
    color:var(--text-color); 
    font-size: 1.5rem;  
    padding: 4px 20px; 
    display: block;
    transition: right linear 0.1s;  
    right: 0; 
}

.category-item__link:hover{  
    right: -4px; 
    color: var(--primary-color); 
} 

/* Home */ 
.home-filter{
    display: flex; 
    align-items: center;  
    padding: 12px 12px; 
    border-radius: 2px; 
    background-color: rgba(0,0,0,0.04);   
    max-width: 100%;

}    

.home-filter__label{ 
    font-size: 1.4rem; 
    color: #555; 
    margin-right: 16px;
} 

.home-filter__btn{ 
    min-width: 90px;  
    margin-right: 12px; 
    background-color: rgba(0,0,0,0.05); 
}  

.home-filter__page{ 
    display: flex; 
    align-items: center;  
    margin-left: 240px;
}
 
.home-filter__page-num{ 
    font-size: 1.4rem; 
    color: var(--text-color); 
    margin-right: 22px; 
} 

.home-filter__page-current{ 
    color: var(--primary-color); 

} 

.home-filter__page-control{ 
    border-radius: 2px; 
    overflow: hidden;  
    display: flex; 
}

.home-filter__page-btn{ 
    width: 36px; 
    height: 36px; 
} 

.home-filter__page-btn{ 
    width: 36px; 
    height: 36px; 
    background-color: var(--white-color); 
} 

.home-filter__page-btn:first-child{ 
    border-right: 1px solid #eee;
} 

.home-filter__page-btn--disabled{  
    cursor: default;
    background-color: #f9f9f9; 
}  
 
.home-filter__page-btn--disabled .home-filter__page-icon{ 
    color: #ccc;
}

.home-filter__page-icon{  
    margin-left: 11px;
    margin-top: 10px;
    font-size: 1.4rem; 
    color: #555; 
} 

.home-product{ 
    margin-left: 40px;  
    margin-bottom: 10px; 
}

.home-product-item{    
    display: block;
    position: relative; 
    text-decoration: none;
    margin-top: 10px; 
    background-color: var(--white-color); 
    width: 180px;   
    border-radius: 2px; 
    /* border-bottom-left-radius: 3px; */
    /* border-bottom-right-radius: 3px;  */
    box-shadow: 0 0.1rem 0.2rem rgba(0,0,0,0.1); 
    box-shadow: 0 0.0625rem 20px 0 rgba(0,0,0,0.05); 
    transition: transform ease-in 0.1s; 
    will-change: transform;
} 

.home-product-item:hover{  
    transform: translateY(-1px); 
    box-shadow: 0 1rem 2rem 0 rgba(0,0,0,0.1);   
    border: 1px solid var(--primary-color);

}

.home-product-item__img{  
    padding-top: 100%; 
    background-repeat: no-repeat; 
    background-size: contain;  
    background-position: center;  
    border-top-left-radius: 2px; 
    border-top-right-radius: 2px; 
}
.home-product-item__name{  
    font-size: 1.0rem; 
    font-weight: 400; 
    color: var(--text-color); 
    line-height: 1.8rem; 
    padding: 0 10px; 
    margin: 10px 10px 6px;  
    height: 3.6rem;  
    overflow: hidden; 
    display: block; 
    display: -webkit-box;
    -webkit-box-orient: vertical; 
    -webkit-line-clamp: 2;
    text-overflow: ellipsis; 
    

}
.home-product-item__price{  


}
.home-product-item__price-old{   
    margin-left: 10px; 
    font-size: 1.4rem; 
    color: #666;
    text-decoration: line-through; 


}
.home-product-item__price-current{  
    font-size: 1.3rem; 
    color: var(--primary-color); 
    margin-left: 10px;  
}
.home-product-item__action{  
    display: flex;  
    justify-content: space-between;
    margin: 6px 10px 0;

}
.home-product-item__rating{  
    font-size: 1rem;  
    /* zoom: 0.1; */ 
    transform: scale(0.8);   
    margin: -1px 0 0 auto;
}  

.home-product-item__like{ 
    font-size: 1.3rem; 
}  

.home-product-item__sold{ 
    font-size: 1.2rem; 
    color: var(--text-color); 
}

.home-product-item__star--gold{ 
    color: var(--star-gold-color); 
}

i.home-product-item__like-icon-fill{ 
    display: none;  
    color: #F63D30;
}  

.home-product-item__like--liked .home-product-item__like-icon-fill{ 
    display: inline-block; 
} 

.home-product-item__like--liked .home-product-item__like-icon-empty{ 
    display: none; 
}

.home-product-item__origin{  
    /* display: none;  */ 
    display: flex;  
    margin: 3px 10px 0;
    color: #595959; 
    font-size: 1.2rem; 
    font-weight: 300;  
    /* margin-top: 3px;  */
    /* justify-content: space-between;  */
}
.home-product-item__brand{  
    /* margin-right: auto;  */

}
.home-product-item__origin-name{  
    margin-left: auto; 

}
.home-product-item__favorite{  
    position: absolute; 
    top: 10px;  
    left: -4px;  
    background-color: var(--primary-color); 
    color: currentColor;   
    font-size: 1.2rem; 
    font-weight: 500;  
    line-height: 1.6rem;  
    padding-right: 4px;  
    border-bottom-right-radius: 3px; 
}

.home-product-item__favorite i{ 
    font-size: 0.9rem; 
    margin: 0 2px 0 5px;  
}  

.home-product-item__favorite::after{ 
    content:""; 
    position: absolute; 
    left: 0; 
    bottom: -3px; 
    border-top: 3px solid currentColor;  
    border-left: 3px solid transparent;  
    filter: brightness(60%); 
    /* reduce the bright of the item */
}

.home-product-item__favorite span{ 
    color: var(--white-color); 
} 

.home-product-item__favorite i{ 
    color: var(--white-color);
}

.home-product-item__sale-off{  
    position: absolute; 
    right: 0; 
    top: 0; 
    width: 40px; 
    height: 36px;  
    text-align: center;  
    border-top-right-radius: 2px;
    background-color: rgba(255,216,64,0.95);

}  

.home-product-item__sale-off::after{ 
    content: ""; 
    position: absolute; 
    left: 0; 
    bottom: -6px;
    border-width: 0 20px 6px; 
    /* background-color: var(--primary-color);  */
    border-style: solid;  
    color: rgba(255,216,64,0.95);
    border-color: transparent currentColor transparent currentColor;
}


.home-product-item__percent{  
    color: #EE4D2D; 
    font-weight: 500; 
    font-size: 1.2rem;  
    line-height: 1.2rem; 
    position: relative; 
    top: -1px;  

}
.home-product-item__sale-off-label{  
    color: var(--white-color); 
    font-size: 1.3rem;   
    line-height: 1.3rem;   
    position: relative; 
    top: -6px; 
    font-weight: 600;

}  



/* pagination */
.pagination{ 
    display: flex; 
    align-items: center; 
    justify-content: center;  
    list-style: none;  
    padding: 30px 0;
} 

.pagination-item{ 
    margin: 0 8px; 
}  

.pagination-item--active{  
    background-color: var(--primary-color); 
    color: var(--white-color); 
} 

.pagination-item--active .pagination-item__link:hover{ 
    background-color: #ed5c3f;
}

.pagination-item__link{  
    display: block;
    text-decoration: none; 
    font-size: 2rem;  
    color: #939393; 
    min-width: 40px; 
    line-height: 30px;  
    text-align: center;
}  

.pagination-item__link--active{ 
    color: var(--white-color);
}

.pagination-item__icon{ 
    
} 



/* Footer */ 
.footer{ 
    border-top: 4px solid var(--primary-color); 
    padding-top: 20px;  
    background-color: var(--white-color); 
}
 

.footer__heading{ 
    font-size: 1.4rem; 
    text-transform: uppercase; 
    color: var(--text-color); 
}
.footer__list{ 
    padding-left: 0; 
    list-style: none; 
}

.footer-item__link{ 
    text-decoration: none; 
    font-size: 1.2rem; 
    color: #737373; 
    padding: 0px 0; 
    display: flex;  
    /* list-style: none; */  
    text-align: center; 

}  

.footer-item__link:hover{ 
    color: var(--primary-color); 
}

.footer__list-item{ 
    display: block;  
    list-style: none;
}
 
.footer-item__icon{ 
    font-size: 1.8rem;  
    margin: -1px 8px 0 0 ; 
}

.footer__download{ 
    display: flex;  
} 

.footer__download-qr{ 
    width: 80px;  
    height: 80px; 
    object-fit: contain;  
    border: 1px solid var(--border-color);
}  

.footer__download-apps{ 
    flex: 1;  
    margin-left: 16px;  
    display: flex; 
    flex-direction: column;  
    justify-content: center; 
} 

.footer__download-app-img{ 
    height: 16px; 
}  

.footer__download-app-link{ 
    color: transparent; 
    text-decoration: none; 
} 

.footer__bottom{ 
    background-color: #dbdbdb; 
    padding: 8px 0; 
    height: 50rem;
} 

.footer__text{ 
    margin: 0; 
    font-size: 1.4rem; 
    text-align: center;  
    color: #737373;
} 

.footer__bottom--policy{ 
    margin-top: 40px;
}

.footer__bottom--policy-link-list{ 
    list-style: none;
    display: flex;
    justify-content: space-around;
    padding: 0 95px;
    text-decoration: none;
    text-align: center;
     color: #737373;
} 

.footer__bottom--policy-link{ 
    color: #737373;
    text-decoration: none; 
    text-transform: uppercase; 
} 

.footer__bottom--policy-link::after{ 
    content: "";
    display: block;
    position: relative;
    border-left: 1px solid #737373;
    height: 13px;
    right: -2px;
    top: -50%;
    transform: translateX(-50%);
}  

.footer__bottom--policy-link:hover{ 
    color: var(--primary-color);
}

.footer__bottom--policy-link::after:first-child{ 
    border-left: none;
    
} 

.footer__bottom--certificate-list{ 
    display: inline-flex;
    margin-left: 68px;
    list-style: none;
    margin-top: -97px;
} 

.footer__bottom--certificate-list-item-1{ 
    margin-left: 130px;
} 

.footer__bottom--certificate-list-item-2{ 
    margin-left: 192px;
} 

.footer__bottom-address-text{ 
    display: block;
    text-align: center;
    color: #737373;
} 

.footer__bottom-address-text p{ 
    font-size: 1.3rem;
    line-height: 1.3rem;
}