.purchase-history{width:100%; float:left; position:relative;}

.filter-order{}
@media (max-width: 767px) {
     .wrap-page .right-page .body-row{height:calc(100% - 102px)} 
    .filter-order{width:100%; float:left; position:fixed; top:60px; left:0; padding: 0 10px; z-index:1;}
    .filter-order:before{content:'Trạng thái đơn hàng'; position:absolute; top:0; left:10px; font-size:13px; line-height:42px; opacity:.7}
    .filter-order .nav-drop{width:100%; line-height:42px; text-align:right; float:left; font-size:14px; font-weight:500;  position:relative; padding-right:15px;}
    .filter-order .nav-drop:after{font-family: "Font Awesome 5"; font-weight: 900; content: "\f0dd"; font-size:10px; position:absolute; top:0; right:0; line-height:42px;}
    .filter-order .dropdown-menu{display:block; left:initial!important; right:10px!important; border:none; border-radius:7px;box-shadow: 0 0 60px 0 rgba(0, 0, 0, .1); padding: 10px 0; top:100%!important; float:left;transition:.3s; opacity:0; visibility:hidden; pointer-events:none; transform:initial!important; margin-top:-10px; }
    .filter-order .dropdown-menu a{display:block; font-size:14px; padding: 5px 20px; min-width:180px }
    .filter-order.show .dropdown-menu{opacity:1; pointer-events:initial; visibility:initial; margin-top:0;}
}

@media (min-width: 768px){
    .filter-order{width:100%;}
    .filter-order .nav-drop{display:none;}
    .filter-order .dropdown-menu{display:block; position:relative; border:none; width:100%; display:flex; margin:0 0 20px 0; padding:0; z-index:initial; background:var(--color-bg); padding:5px; border-radius:7px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.01)}
    .filter-order .dropdown-menu a{font-size:14px; height:34px; padding: 0 15px; border-radius:7px; margin-left:5px; display:flex; align-items:center; white-space:nowrap; transition:.3s;}
    .filter-order .dropdown-menu a:first-child{margin-left:0;}
    .filter-order .dropdown-menu a.current{background:var(--color-blue); color:#fff; font-weight:bold;}
}


ul.list-order{margin:0; padding:0; list-style:none; width:100%; float:left; }
ul.list-order li{width:100%; float:left; position:relative;  padding:20px 20px; border:1px solid var(--color-border); margin-top:15px; border-radius:10px; transition:.3s; }
ul.list-order li:hover{border-color:var(--color2)}
ul.list-order li:first-child{margin-top:0;}
ul.list-order li .head-order{width:100%; float:left; position:relative;font-size:13px; display:flex; padding-bottom:15px; }
ul.list-order li .head-order span{margin-right:15px; padding-right:15px; position:relative; font-weight:500}
ul.list-order li .head-order span:after{content:''; width:1px; height:16px; margin-top:-8px; background:#000; display:block; position:absolute; top:50%; right:0; display:block; opacity:.2}
ul.list-order li .head-order span:first-child:before{content:'Đơn hàng:'; padding-right:5px; font-weight:normal; opacity:.7}
ul.list-order li .head-order span:nth-child(2):before{content:'Ngày đặt:'; padding-right:5px; font-weight:normal; opacity:.7}
ul.list-order li .head-order span:last-child{padding: 0 10px; line-height:20px; position:relative;  border-radius:5px; margin-right:0;   overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
ul.list-order li .head-order span:last-child:after{display:none}
ul.list-order li .body-order{width:100%; float:left; position:relative; display:table;}
ul.list-order li .body-order .col-left{display:table-cell; position:relative; padding-right:20px;}
ul.list-order li .body-order .col-right{display:table-cell; position:relative; width:240px; vertical-align:top; padding-left:20px; border-left:1px solid var(--color-border)}
ul.list-order li .body-order .col-right .row-item{width:100%; display:table; font-size:14px; padding-bottom:3px;}
ul.list-order li .body-order .col-right .row-item:last-of-type{padding:0;}
ul.list-order li .body-order .col-right .row-item span{opacity:.7; display:table-cell; font-size:13px; padding-right:10px;}
ul.list-order li .body-order .col-right .row-item b{text-align:right; display:table-cell; position:relative; font-weight:500; font-size:14px;}
ul.list-order li .body-order .col-right .row-item.total b{font-weight:bold; color:var(--color3); font-size:16px; padding-right:12px;}
ul.list-order li .body-order .col-right .row-item.total b:after{content: "₫"; padding-left: 3px; font-size: 14px; position: absolute; top:0;right: 0;}
ul.list-order li .body-order .col-right .row-item.re-payment{font-size:0; }
ul.list-order li .body-order .col-right .row-item.re-payment a{font-size:13px; width:100%; float:left; border:1px solid var(--color-border); line-height:28px; border-radius:14px; padding: 0 10px; margin-top:3px; color:var(--color1); font-weight:500; background:rgba(0,0,0,.02); position:relative;}
ul.list-order li .body-order .col-right .row-item.re-payment a:before{content:''; background:url(../Logo-VNPAY.png) no-repeat right center; background-size:auto 40%; width:50%; height:100%; position:absolute; top:0; right:10px;}
ul.list-order li .foot-order{width:100%; float:left; display:flex; margin-top:10px;}
ul.list-order li .foot-order .totalProducts{font-size:14px; color:var(--color3); line-height:28px; padding-right: 10px; font-weight:500;}
ul.list-order li .foot-order a{line-height:28px; background:rgba(0,0,0,.05); font-size:14px; margin-right:10px; border-radius:5px; padding: 0 10px; transition:.3s;}
ul.list-order li .foot-order a:hover{color:var(--color1)}

@media (max-width: 767px) {
    ul.list-order{width:calc(100% + 20px); margin-left:-10px;}
    ul.list-order li{border-radius:0; border:none; border-top:4px solid var(--color-border)!important; padding: 15px 10px; margin:0;}
    ul.list-order li .head-order{display:block; width:100%;}
    ul.list-order li .head-order span{display:block; width:50%; float:left; margin:0; white-space:nowrap;}
    ul.list-order li .head-order span:after{display:none;}
    ul.list-order li .head-order span:first-child{width:100%; display:block; padding-bottom:5px;}
    ul.list-order li .head-order span:nth-child(2){}
    ul.list-order li .head-order span:nth-child(2):before{display:none;}
    ul.list-order li .head-order span:last-child{max-width:50%; width:auto; float:right;}
    ul.list-order li .body-order{display:block; width:100%; float:left;}
    ul.list-order li .body-order .col-left{width:100%; display:block; padding-right:0;}
    ul.list-order li .body-order .col-right{border:none; padding-left:0; float:right; padding-top:20px; width:auto}
    ul.list-order li .body-order .col-right .status,
    ul.list-order li .body-order .col-right .re-payment{display:none;}
    ul.list-order li .foot-order{justify-content:end; position:relative;}
    ul.list-order li .foot-order .totalProducts{position:absolute; bottom:100%; left:0px; margin-bottom:10px; font-size:13px;}
    ul.list-order li .foot-order a{margin: 0 0 0 10px;}
}


/* Đặt thành công*/
span[data-status="ORDER-PROCESS-WAITING"]{color:#e76900;} 
span[data-status="ORDER-PROCESS-WAITING"]:before{content:''; background:#e76900; width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1; opacity:.1 }
/* Đã xác nhận*/
span[data-status="ORDER-PROCESS-COMPLETE"]{color:#4e209f;} 
span[data-status="ORDER-PROCESS-COMPLETE"]:before{content:''; background:#4e209f; width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1; opacity:.1 }
/* Đã hủy đơn hàng */
span[data-status="ORDER-PROCESS-CANCEL"]{color:#dc3545;} 
span[data-status="ORDER-PROCESS-CANCEL"]:before{content:''; background:#dc3545; width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1; opacity:.1 }
/* Đang vận chuyển */
span[data-status=""]{background:#e83e8c;} 
/* Đã nhận*/
span[data-status=""]{background:#28a745;} 

.item-product{width:100%; float:left; position:relative; margin-top:0; display:none;}
.item-product:first-of-type{display:block}
.item-product .wrap-img{width:75px; float:left; position:relative; margin: 0 0 ;}
.item-product .wrap-img:before{content:''; display:block; padding-bottom:100%;}
.item-product .wrap-img a{position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden;}
.item-product .wrap-img a img{width:inherit!important; height:inherit!important; object-fit:cover; border-radius:7px;}
.item-product .wrap-info{width:calc(100% - 90px); float:right; position:relative;}
.item-product .wrap-info .name{font-size:15px; text-decoration:none; font-weight:500; transition:.3s; width:100%; float:left; }
.item-product .wrap-info .wrap-price{width:100%; float:left; position:relative; margin-top:5px; display:flex;}
.item-product .wrap-info .wrap-price .unit{font-weight:500; position:relative; float:left; padding-right:9px; font-size:14px; outline:none;}
.item-product .wrap-info .wrap-price .unit:before{content:'Đơn giá:'; padding-right:5px; font-weight:normal; opacity:.7; font-size:13px;}
.item-product .wrap-info .wrap-price .unit:after{content:"₫"; padding-left:3px; font-size:13px; position:absolute; top:0; right:0;}
.item-product .wrap-info .wrap-price .quantity{font-weight:bold;}
.item-product .wrap-info .wrap-price .quantity:before{content:'x'; padding: 0 10px; font-weight:normal; opacity:.75}

@media (max-width: 767px) {
    .item-product .wrap-info .name{font-size:14px;}
}