.order-page{padding-bottom:50px; width:100%; float:left; position:relative;}
.order-page:before{ content:''; display:none;  width: 100%; height:200px; position: absolute; top:0; left:0; float: left; background-image: linear-gradient(rgba(0,0,0,.015) , #fff);}
.order-page .container{position:relative; z-index:2;}
.order-page .title-group{width:100%;float:left; position:relative }
.order-page .title-group .number{position:absolute; top:-4px; left:0; width:28px; line-height:28px; height:28px; font-size:15px; text-align:center; background:var(--color2); color:#fff; font-weight:bold; border-radius:2px;}
.order-page .title-group .number:before{content:''; border-left:6px solid var(--color2); border-top: 14px solid transparent; border-bottom: 14px solid transparent; position:absolute; top:0; left:100%;}
.order-page .title-group span{float:left;font-weight:bold; text-transform:uppercase; color:#000; font-size:15px; padding-left:44px; }
.order-page .title-group .nav-backCart{float:right; line-height:31px; height:30px; color:#fff; background:var(--color3); 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;}
.order-page .title-group .nav-backCart:before{font-family: "Font Awesome 5"; font-weight: 900; font-size:16px; content: "\f30a"; padding-right:10px; position:absolute; left: 10px; top:0;}
.order-page .title-group .nav-adrress{float:right; line-height:31px; height:30px; color:var(--color1); background:#f3f3f6; padding: 0 15px; display:block; font-size:14px; border-radius:4px; font-weight:500; text-decoration:none; transition:.3s; margin-top:-5px;}
.order-page .title-group .nav-adrress:hover{background:var(--color1); color:#fff;}
.order-page .col-product{width:400px; position:relative; float:left;}
.order-page .col-info{width:calc(100% - 400px); float:right; padding-left:40px; position:relative;}
.order-page .wrap-order{max-width:700px; display:block; margin:0 auto;}
.order-page .wrap-order .order-cart{width:100%; float:left; position:relative; padding:30px 0;}
.order-page .wrap-order .order-info{width:100%; float:left; position:relative; padding:30px 0; }
.order-page .wrap-order .order-payment{width:100%; float:left; position:relative; padding-top:15px;  }
.order-page .wrap-order .order-payment .note{padding: 10px 0 0 44px; width:100%; float:left; color:#ec1f26}
.order-page .wrap-order .order-payment .total{width:100%; float:left; position:relative; padding: 20px 0}
.order-page .wrap-order .order-payment .total span{float:left; font-size:15px; font-weight:bold;}
.order-page .wrap-order .order-payment .total b{font-weight:bold; position:relative; float:right; color:#ec1f26; font-size:20px; padding-right:11px;}
.order-page .wrap-order .order-payment .total b:after{content:"₫"; padding-left:3px; font-size:16px; position:absolute; top:3px; right:0;}
.order-page .wrap-order .order-payment a.nav-finish{line-height:51px; height:50px; padding: 0 20px; pointer-events:none; width:100%; background:#ec1f26; opacity:.6; font-weight:bold; text-align:center; text-transform:uppercase; font-size:0px; color:#fff; text-decoration:none; display:block; border-radius:5px; transition:.3s; box-shadow:inset 0 0 rgba(0,0,0,0); float:left;}
.order-page .wrap-order .order-payment a.nav-finish:hover{box-shadow:inset 0 50px rgba(0,0,0,.2)}
.order-page .wrap-order .order-payment a.nav-finish:before{content:'Chưa chọn phương thức thanh toán'; font-size:15px;}
.order-page .wrap-order.is-selected .order-payment a.nav-finish{pointer-events:initial; font-size:15px; opacity:1; }
.order-page .wrap-order.is-selected .order-payment a.nav-finish:before{display:none;}

.account-customer{float:left; position:relative; width:100%; float:left; position:relative; text-align:center; padding: 20px; border:1px solid #ffc107; background:#fffcf4; margin-top:25px; border-radius:5px;}
.account-customer ul{margin:0; padding:10px 0 0 0; list-style:none; width:100%;}
.account-customer ul li{width:50%; float:left; position:relative;}
.account-customer ul li label{display:block; font-weight:500; }
.account-customer ul li a{line-height:33px; height:34px; color:#fff; background:var(--color1); padding: 0 15px; display:inline-block; width:200px; font-size:14px; border-radius:4px; font-weight:500; text-decoration:none; transition:.3s;}

.adrress-order{width:100%; float:left;padding: 20px; border:1px solid #ffc107; background:#fffcf4; margin-top:25px; border-radius:5px;}
.adrress-order .checkbox{float:left; clear:both;}
.adrress-order .nav-adrress{float:right; line-height:31px; height:30px; background:var(--color1); color:#ffff; padding: 0 15px; display:block; font-size:14px; border-radius:4px; font-weight:500; text-decoration:none; transition:.3s;}

.row-group{width:100%; float:left; position:relative; padding:17px 20px 20px 20px; border:1px solid #ececec; border-radius:7px; margin-top:20px;}
.row-group .title-group{width:100%; text-transform:uppercase; font-weight:900; color:var(--color3); font-size:15px;}
.row-group .receive-food{width:100%; float:left; position:relative; background:#fcf6d1; border-radius:5px; margin-top:20px; display:table; }
.row-group .receive-food label{background:#ffc107; display:block; float:left; color:#000; line-height:28px; padding: 0 20px 0 15px; border-radius: 5px 0 28px 0; margin:0 0; text-transform:uppercase; font-size:12px; font-weight:bold;position: absolute; top:0; left:0;  }
.row-group .receive-food .item-col{display:table-cell; width:50%; position:relative; padding: 35px 20px 15px 110px;}
.row-group .receive-food .item-col:last-of-type:after{content:''; background:#000; width:1px; height:20px; position:absolute; left:0; bottom:22px; opacity:.5}
.row-group .receive-food .item-col p{display:block; margin:0; text-transform:uppercase; padding:0; text-transform:uppercase; font-weight:bold; font-weight:bold; color:#000; font-size:13px; position:absolute; top:42px; left:20px; opacity:.7}
.row-group .receive-food .date-receive{color:#000; font-size:15px;}
.row-group .receive-food .date-receive b{font-weight:900; font-size:16px;}
.row-group .receive-food .date-receive i:before{content:','; padding: 0 5px 0 3px;}
.row-group .receive-food .date-receive span{font-weight:500; padding-left:3px;}
.row-group .receive-food select{background:#fff; border:1px solid rgba(0,0,0,.1); height:32px; border-radius:5px; padding-right:15px; outline:none; width:100%;}

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; margin-top:20px;}
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:5px;}
ul.list-products li .name{color:#000; font-size:15px; line-height:20px; text-decoration:none; font-weight:500; transition:.3s; width:100%; float:left;  }
ul.list-products li .name:hover{color:var(--color1)}
ul.list-products li .wrap-price{width:100%; float:left; position:relative; margin-top:15px;}
ul.list-products li .wrap-price .unit{font-weight:500; position:relative; float:left; padding-right:9px; margin-top:5px; font-size:15px; outline:none;}
ul.list-products li .wrap-price .unit:after{content:"₫"; padding-left:3px; font-size:13px; position:absolute; top:0; right:0;}
ul.list-products li .wrap-price .quantity{display:block; float:left; margin-left:15px;}
ul.list-products li .wrap-price .quantity:before{content:'x'; padding-right:15px; text-transform:uppercase; opacity:.5}
ul.list-products li .wrap-price .quantity input{width:40px; height:30px; border:1px solid rgba(0,0,0,.15); text-align:center; border-radius:5px; font-weight:bold; outline:none; }
ul.list-products li .wrap-price .quantity input:focus{border-color:var(--color1)}
ul.list-products li .wrap-price .subTotal{font-weight:bold; position:relative; float:right; padding-right:9px; margin-top:5px; font-size:15px;}
ul.list-products li .wrap-price .subTotal:after{content:"₫"; padding-left:3px; font-size:13px; position:absolute; top:0; right:0;}
ul.total-price{width:100%; margin:25px 0 0 0; padding:5px 0 0 0; list-style:none; float:left; border-top:1px solid #ececec; }
ul.total-price li{width:100%; float:left; position:relative; padding-top:10px; }
ul.total-price li span{float:left; font-size:15px; font-weight:500}
ul.total-price li span i{clear:both; display:block; font-weight:normal; font-size:13px;}
ul.total-price li b{font-weight:bold; position:relative; float:right; padding-right:9px; font-size:15px;}
ul.total-price li b:after{content:"₫"; padding-left:3px; font-size:13px; position:absolute; top:0; right:0;}
ul.total-price li:last-child b{color:#ec1f26; font-size:17px; padding-right:11px;}
ul.total-price li:last-child b:after{font-size:15px;}
ul.total-price li.weight b{padding-right:0;}
ul.total-price li.weight b:after{display:none;}

.payment-methods{width:100%; float:left; position:relative;}
.payment-methods a.nav-payment{display:block; float:left; width:100%; color:#000; padding: 15px 15px 15px 68px; border:1px solid rgba(0,0,0,.15); text-decoration:none; border-radius:5px; margin-top:15px; position:relative;}
.payment-methods a.nav-payment:before{font-family: "Font Awesome 5"; font-size:16px; font-weight:900; content: ""; width:32px; margin-top:-16px; height:32px; text-align:center; line-height:32px; background:#f3f3f6; display:block; position:absolute; top:50%; left:20px; border-radius:3px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.0)}
.payment-methods a.nav-payment i{font-size:32px; position:absolute; top:15px; left:15px; opacity:.5; display:none;}
.payment-methods a.nav-payment b{font-weight:500; color:#000; font-size:15px; display:block; padding-bottom:5px;}
.payment-methods a.nav-payment span{display:block; opacity:.75}
.payment-methods a.selected{border-color:#fd7e14}
.payment-methods a.selected:before{content: "\f00c"; background:#fd7e14; color:#fff}

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

#myModal-selectAddress{}
#myModal-selectAddress .row-item{width:100%; float:left; position:relative; margin-bottom:20px; }
#myModal-selectAddress .row-item a{position:absolute; width:100%; height:100%; top:0; left:0; z-index:2; border:1px solid var(--color-border); border-radius:7px;}
#myModal-selectAddress .row-item a:before{font-family: "Font Awesome 5"; font-weight: 400; content: "\f00c"; width:24px; height:24px; line-height:23px; margin-top:-12px; border:1px solid var(--color-border); display:block; font-size:16px; position:absolute; left:20px; top:50%; text-align:center; border-radius:4px; color:#fff;}
#myModal-selectAddress .row-item a.selected:before{border-color:var(--color2); background:var(--color2)}
#myModal-selectAddress .row-item:last-of-type{margin:0;}
#myModal-selectAddress ul{width:100%; margin:0; padding:20px 20px 20px 80px; list-style:none; float:left;}
#myModal-selectAddress ul li{width:100%; float:left; position:relative; padding-left:110px; margin-top:10px; color:#000}
#myModal-selectAddress ul li:first-child{margin:0;}
#myModal-selectAddress ul li label{margin:0; position:absolute; top:0; left:0; font-weight:500; opacity:.8; width:100px;}
#myModal-selectAddress ul li label:after{content:':'; float:right; font-weight:normal}



@media (max-width:767px) {
    .order-page{padding-bottom:85px;}
    .order-page:before{display:none;}
    .account-customer ul li{width:100%;}
    .account-customer ul li:nth-child(2){margin-top:25px;}
    .adrress-order .nav-adrress{clear:both; float:left; margin-top:15px;}
    ul.list-products li{border-top:1px solid #ececec; padding-top:20px;}
    ul.list-products li:first-child{border:none; padding-top:0;}
    ul.list-products li .wrap-price .subTotal{float:left; clear:left; }

    .row-group .receive-food{width:100%; float:left; display:block; padding-top:45px;}
    .row-group .receive-food .item-col{display:block; width:100%; padding: 0 20px 20px 110px; float:left; }
    .row-group .receive-food .item-col p{top:1px;}
    .row-group .receive-food .item-col select{margin-top:-5px;}
    .row-group .receive-food .item-col:last-of-type:after{display:none;}

    #myModal-selectAddress{}
    #myModal-selectAddress .modal-content{position:fixed; width:100%; height:100%; top:0; left:0; border-radius:0; padding:55px 0; width:100%; background:#fff;}
    #myModal-selectAddress .modal-content .modal-header{padding: 0 15px; height:55px; width:100%; position:absolute; top:0; left:0;}
    #myModal-selectAddress .modal-content .modal-header .modal-title{line-height:55px;}
    #myModal-selectAddress .modal-content .modal-header .nav-close{right:15px;}
    #myModal-selectAddress .modal-content .modal-body{background:rgba(0,0,0,.03); padding: 15px; overflow-y:auto; overflow-x:hidden;}
    #myModal-selectAddress .row-item{background:#fff; border-radius:7px;}
    #myModal-selectAddress .row-item a{border:none; border:none;}
    #myModal-selectAddress ul{width:100%; padding-left:60px;}
    #myModal-selectAddress ul li{padding-left:0; color:#000; margin-top:5px;}
    #myModal-selectAddress ul li:first-child{margin:0; text-transform:uppercase; font-weight:bold; }
    #myModal-selectAddress ul li:nth-child(2){margin:5px 0 0 0; text-transform:uppercase; font-weight:bold; color:#ec1f26; font-size:16px; }
    #myModal-selectAddress ul li label{margin:0; position:relative; top:0; left:0; font-weight:bold; width:100%; float:left; opacity:.9; text-transform:uppercase; font-size:13px; display:none;}
    #myModal-selectAddress ul li label:after{display:none}

     #myModal-selectAddress .modal-content .modal-footer{position:absolute; left:0; bottom:0; width:100%; height:55px; background:#fff; padding: 5px 5px 5px 0; display:block;}
     #myModal-selectAddress .modal-content .modal-footer a{width:calc(50% - 5px); margin:0 0 0 5px; float:left; height:45px; line-height:45px;}
     #myModal-selectAddress .modal-content .modal-footer a i{line-height:45px; font-size:20px;}
     #myModal-selectAddress .modal-content .modal-footer a span{font-weight:bold;}
}

@media (min-width:768px) and (max-width:991px) {
    .order-page:before{display:none;}
}