.cart-page{padding-bottom:50px; color:#000; background:var(--color-bg); width:100%; float:left; padding-top:50px;}

.inner-cart{max-width:700px; display:block; margin:0 auto;}
.inner-cart .title-group{width:100%;float:left; position:relative }
.inner-cart .title-group span{float:left;font-weight:500; font-family: "Signika", sans-serif; color:#000; font-size:22px; }
.inner-cart .title-group .nav-deleteCart{float:right; line-height:35px; height:34px; color:#fff; background:#ec1f26; padding: 0 15px 0 33px; display:block; font-size:14px; border-radius:4px; font-weight:500; text-decoration:none; transition:.3s; margin-top:-5px; position:relative;}
.inner-cart .title-group .nav-deleteCart:before{font-family: "Font Awesome 5"; font-weight: 900; font-size:16px; content:"\f1f8"; padding-right:10px; position:absolute; left: 10px; top:0;}
.inner-cart .nav-order{line-height:51px; height:50px; padding: 0 20px; width:100%; background:var(--color1); font-weight:bold; text-align:center; text-transform:uppercase; color:#fff; text-decoration:none; display:block; border-radius:5px; transition:.3s; box-shadow:inset 0 0 rgba(0,0,0,0); float:left; margin-top:20px;}
.inner-cart .nav-order:hover{box-shadow:inset 0 50px rgba(0,0,0,.2)}

.row-group{width:100%; float:left; position:relative; padding:17px 20px 20px 20px;  border-radius:12px; margin-top:20px; background:#fff;}
.row-group .title-group{width:100%; text-transform:uppercase; font-weight:900; color:#000; font-size:15px;}

ul.list-products{width:100%; margin:-5px 0 0 0; padding:0; list-style:none; float:left; display:block;}
ul.list-products li{width:100%; float:left; position:relative; border-top:1px solid rgba(0,0,0,.07); padding: 20px 0}
ul.list-products li:first-child{border-top:0;}
ul.list-products li:first-child:last-child{padding-bottom:0;}
ul.list-products li .wrap-img{width:100px; float:left; position:relative; margin: 0 0 ;}
ul.list-products li .wrap-img:before{content:''; display:block; padding-bottom:100%;}
ul.list-products li .wrap-img a{position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden; border-radius:5px; box-shadow: 0 0 0 1px rgba(0,0,0,.1)}
ul.list-products li .wrap-img a img{width:inherit!important; height:inherit!important; object-fit:cover}
ul.list-products li .wrap-info{width:calc(100% - 120px); float:right; position:relative;}
ul.list-products li .menuId{display:inline-block; font-size:11px; line-height:20px; height:18px; text-transform:uppercase; background:var(--color2); font-weight:500; color:#fff; padding: 0 5px; letter-spacing:1px; border-radius:3px; margin-bottom:10px;}
ul.list-products li .name{color:var(--color1); font-size:18px; line-height:22px; text-decoration:none;  font-weight:500; font-family: "Signika", sans-serif; transition:.3s; width:100%; float:left; margin-top:0px;}
ul.list-products li .name:hover{color:var(--color3)}
ul.list-products li .wrap-price{width:100%; float:left; position:relative; margin-top:7px; color:#000; padding-right:60px;}
ul.list-products li .wrap-price label{margin:0; display:block; font-weight:normal; opacity:.75}
ul.list-products li .wrap-price .unit{position:relative; float:left;  }
ul.list-products li .wrap-price .unit b{font-weight:bold; position:relative; float:left; padding-right:10px;  font-size:16px; outline:none; margin-top:5px;}
ul.list-products li .wrap-price .unit b:after{content:"₫"; padding-left:3px; font-size:14px; position:absolute; top:0; right:0; font-weight:500;}
ul.list-products li .wrap-price .unit:first-of-type{padding-right:15px;}
ul.list-products li .wrap-price .quantity{display:block; float:left; margin-left:25px;}
ul.list-products li .wrap-price .subTotal{position:relative; float:right;  text-align:right; }
ul.list-products li .wrap-price .subTotal b{font-weight:bold; position:relative; float:right; padding-right:10px;  font-size:16px; outline:none; margin-top:3px;}
ul.list-products li .wrap-price .subTotal b:after{content:"₫"; padding-left:3px; font-size:14px; position:absolute; top:0; right:0; font-weight:500;}
ul.list-products li .wrap-price .nav-delete{position:absolute; right:0; top:9px; line-height:30px; padding: 0 8px; border-radius:5px; background:#ec1f26; font-weight:500; font-size:13px; color:#fff;}

.total-price{width:100%; margin:25px 0 0 0; list-style:none; float:left; }
.total-price span{float:left; font-size:16px; font-weight:bold}
.total-price span i{clear:both; display:block; font-weight:normal; font-size:13px;}
.total-price b{font-weight:900; position:relative; float:right; padding-right:11px; font-size:18px; color:#ec1f26}
.total-price b:after{content:"₫"; padding-left:3px; font-size:16px; position:absolute; top:0; right:0; font-weight:bold}

.minusPlus{width:90px; height:32px; padding: 0 32px; position:relative; box-shadow: inset 0 0 0 1px #ececec; border-radius:5px; margin:0px auto 0 auto; display:block; z-index:2; background:#fff;}
.minusPlus a{width:26px; height:26px; line-height:26px; text-align:center; font-size:16px; background:#ececec; color:#000; position:absolute; top:3px; border-radius:3px; text-decoration:none; transition:.3s;}
.minusPlus a:hover{color:#fff; background:var(--color2)}
.minusPlus a.nav-minus{left:3px;}
.minusPlus a.nav-plus{right:3px;}
.minusPlus input[type="text"]{width:100%; height:32px; border:none; outline:none; text-align:center; font-weight:bold; font-size:16px; background:none; z-index:2; position:relative; border:none;}

@media (max-width:767px) {
    .cart-page{padding-top:30px; padding-bottom:10px;}
    ul.list-products li{border-top:1px solid #ececec; margin-top:0; padding-top:20px; padding-bottom:20px;}
    ul.list-products li:first-child{border:none;}
    ul.list-products li:last-child{padding-bottom:0;}
    ul.list-products li .wrap-info{width:calc(100% - 110px)}
    ul.list-products li .wrap-price{padding-bottom:0px; padding-right:0; position:initial}
    ul.list-products li .wrap-price .unit{width:50%; padding:0 0 15px 0!important; }
    ul.list-products li .wrap-price .unit:nth-of-type(2){padding-left:10px!important;}
    ul.list-products li .wrap-price .quantity{margin-left:0; float:left; width:50%;}
    ul.list-products li .wrap-price .subTotal{position:relative; text-align:left; float:left; float:right; width:50%; padding-left:10px;}
    ul.list-products li .wrap-price .subTotal b{float:left; color:#ec1f26; font-size:18px;}
    ul.list-products li .wrap-price .nav-delete{right:100%; top:110px; margin-right:50px;}
    .minusPlus{margin:0;}
}











.cart-page .empty-cart{width:100%; max-width:750px;  position:relative; display:block; margin: 0 auto; padding:50px 0 40px 0;}
.cart-page .empty-cart .icon{position: relative;text-align: center;width:140px;height:140px;border-radius: 50%;background-color: #eaecef;overflow: hidden; display:block; margin: 0 auto}
.cart-page .empty-cart .icon svg{width:80px; margin-left:-40px; position:absolute; bottom:0; left:50%; }
.cart-page .empty-cart label{display:block; text-align:center; font-size:20px; font-weight:bold; padding-top:30px; text-transform:uppercase; color:var(--color3)}
.cart-page .empty-cart span{display:block; text-align:center; font-size:16px; line-height:28px; color:#000; padding-top:10px;}
.cart-page .empty-cart .nav-backShop{height:42px; line-height:42px; text-align:center; width:180px; border-radius:22px; display:block; margin: 30px auto 0 auto; box-shadow: 0 0 60px 0 rgb(53 57 69 / 15%); font-weight:bold; color:#000; transition:.3s; background:#fff;}
.cart-page .empty-cart .nav-backShop:hover{background:var(--color1); color:#fff;}
.cart-page .exist-cart{width:100%; float:left; position:relative;}

.tbl-cart{width:100%; float:left; position:relative; margin:0; padding:0; }
.tbl-cart thead{}
.tbl-cart thead tr th{background:#f3f3f6; padding: 0 10px; height:45px; text-transform:uppercase; text-align:left; }
.tbl-cart thead tr th:first-child{text-align:center; width:20px;}
.tbl-cart thead tr th:nth-child(3){text-align:right}
.tbl-cart thead tr th:nth-child(4){text-align:center; width:120px;}
.tbl-cart thead tr th:nth-child(5){text-align:right}
.tbl-cart thead tr th:nth-child(6){width:45px;}
.tbl-cart tbody tr td{padding:15px 10px; border-bottom:1px solid #f3f3f6}
.tbl-cart tbody tr td:first-child{text-align:center; font-weight:bold}
.tbl-cart tbody tr td:nth-child(3){text-align:right}
.tbl-cart tbody tr td:nth-child(5){text-align:right}
.tbl-cart tbody tr td b{font-weight:bold; position:relative; padding-right:11px; font-size:15px;}
.tbl-cart tbody tr td b:after{content:'₫'; position:absolute; bottom:-1px; right:0; font-weight:500; font-size:13px;}
.tbl-cart tbody tr td:nth-child(5) b{color:#ec1f26}
.tbl-cart tbody tr td .nav-delete{line-height:24px; padding: 0 0px; height:24px; border-radius:12px; color:#000; text-decoration:none; width:45px; text-align:center; }
.tbl-cart tbody tr td .nav-delete:hover{color:#ec1f26}
.tbl-cart tfoot tr td{padding: 15px 0; text-align:right;}
.tbl-cart tfoot tr td label{margin:0; padding:0 20px 0 0 ; font-weight:bold; }
.tbl-cart tfoot tr td b{font-weight:bold; position:relative; padding-right:11px; font-size:18px; color:#ec1f26}
.tbl-cart tfoot tr td b:after{content:'₫'; position:absolute; top:0; right:0; font-size:15px;}

.wrap-nav{ text-align:right; padding-top:20px;}
.wrap-nav a{background:var(--color1); line-height:45px; padding: 0 20px; font-weight:bold; text-transform:uppercase; font-size:13px; color:#fff; text-decoration:none; display:inline-block; border-radius:3px; transition:.3s; margin-left:10px; box-shadow:inset 0 0 rgba(0,0,0,0)}
.wrap-nav a:hover{box-shadow:inset 0 45px rgba(0,0,0,.2)}
.wrap-nav a.nav-deleteCart{background:#ec1f26}


.product-item{width:100%; float:left; position:relative; display:flex; align-items:center}
.product-item .wrap-img{width:80px; position:relative; border:1px solid #e4e5ee; border-radius:5px; }
.product-item .wrap-img:before{content:''; padding-top:100%; display:block;}
.product-item .wrap-img a{width:calc(100% - 10px); height:calc(100% - 10px); display:block; position:absolute; top:5px; left:5px;}
.product-item .wrap-img a img{width:100%; height:100%; object-fit:cover;}
.product-item h3{margin:0; padding:0; line-height:inherit; font-size:15px; font-weight:normal; padding-left:20px;}
.product-item h3 a{text-decoration:none; color:#000; transition:.3s;}
.product-item h3 a:hover{color:var(--color1)}



@media (min-width:768px) and (max-width:991px) {
    .tbl-cart thead tr th:first-child,
    .tbl-cart tbody tr td:first-child{font-size:0; padding:0; width:0px;}

}
@media (max-width:767px) {
    .tbl-cart thead{display:none;}
    .tbl-cart tbody tr{position:relative; height:140px; margin: 0 0; padding: 20px 0; float:left; width:100%; border-bottom:1px dashed var(--color-border)}
    .tbl-cart tbody tr td{display:block; border:none; padding:0 0 0 120px; width:100%; float:left; clear:both; text-align:left!important;}
    .tbl-cart tbody tr td:first-child{display:none;}
    .tbl-cart tbody tr td:nth-child(5) b{display:none;}
    .tbl-cart tbody tr td .nav-delete{width:32px; height:32px; line-height:32px; border-radius:50%; font-size:0; box-shadow: 0 0 0 1px var(--color-border); display:block; float:left; position:absolute; bottom:20px; right:0; }
    .tbl-cart tbody tr td .nav-delete:before{font-family: "Font Awesome 5"; font-weight:400; content: "\f1f8"; font-size:16px; color:#ec1f26 }
    .tbl-cart tfoot tr td:first-child{width:100%;}

    .product-item{position:inherit;}
    .product-item .wrap-img{width:100px; height:100px; position:absolute; top:20px; left:0;}
    .product-item h3{padding-left:0; font-weight:bold; padding-bottom:2px;}
   
}