.wrap-comment .title{width:100%; float:left; position:relative;}
.wrap-comment .title b{font-size:20px; font-weight:bold;}
.wrap-comment .title span{font-weight:normal; font-size:17px; margin-left:5px;}
.wrap-comment .title span:before{content:'('}
.wrap-comment .title span:after{content:')'}
.wrap-comment .bar-filter{width:100%; float:left; position:relative; margin: 20px 0 20px 0;}
.wrap-comment .bar-filter label{margin:0; float:left; line-height:32px; font-weight:500; color:#000;}
.wrap-comment .bar-filter ul{margin:0; padding:0 0 0 15px; list-style:none;}
.wrap-comment .bar-filter ul li{float:left; position:relative; line-height: 32px; height:32px; padding: 0 10px; border-radius:16px; box-shadow: 0 0 0 1px var(--color-border); margin-left:10px; cursor:pointer; transition:.3s; }
.wrap-comment .bar-filter ul li.active{color:var(--color2); box-shadow: 0 0 0 1px var(--color2); cursor:default; padding-left:32px; font-weight:500;}
.wrap-comment .bar-filter ul li.active:before{ font-family: "Font Awesome 5"; content: "\f00c"; font-weight:500; line-height:22px; font-size:12px; text-align:center; background:var(--color2); color:#fff; width:22px; height:22px; border-radius:50%; position:absolute; top:5px; left:5px; }
.wrap-comment .bar-filter ul.star-filter li:after{font-family: "Font Awesome 5"; content: "\f005"; font-weight:900; font-size:14px; color:#ff9f00; margin-left:5px;}
.wrap-comment .wrap-more{text-align:center; width:100%; float:left; position:relative; margin-top:20px; }
.wrap-comment .wrap-more a{display:inline-block; color:#000; position:relative; }
.wrap-comment .wrap-more a:before{font-family: "Font Awesome 5";font-weight: 900; content: "\f322"; font-size:16px; float:left; margin-right:8px;}
.wrap-comment .wrap-more a b{padding: 0 5px;}


.progressStar{}
.progressStar i{opacity:.3}
.progressStar.star-1 i:first-child{color:#ff9f00; opacity:1;}
.progressStar.star-2 i:nth-child(1),
.progressStar.star-2 i:nth-child(2){color:#ff9f00; opacity:1;}
.progressStar.star-3 i:nth-child(1),
.progressStar.star-3 i:nth-child(2),
.progressStar.star-3 i:nth-child(3){color:#ff9f00; opacity:1;}
.progressStar.star-4 i:nth-child(1),
.progressStar.star-4 i:nth-child(2),
.progressStar.star-4 i:nth-child(3),
.progressStar.star-4 i:nth-child(4){color:#ff9f00; opacity:1;}
.progressStar.star-5 i{color:#ff9f00; opacity:1!important;}

.rate-topStar{width:100%; float:left; display:table; position:relative; border-bottom:1px solid var(--color-border); padding:20px 0 30px 10px;}
.rate-topStar .col-totalStar{width:160px; display:table-cell; vertical-align:middle}
.rate-topStar .col-totalStar b{font-weight:900; color:#000; font-size:50px;}
.rate-topStar .col-totalStar b:after{content:'/5'; font-weight:500; font-size:25px; opacity:.7}
.rate-topStar .col-totalStar i{font-size:40px; color:#ff9f00; margin:15px 5px 0 0; float:left; }
.rate-topStar .col-totalStar a{color:#000; text-decoration:none; font-weight:500;font-size:16px; display:block; clear:both;}
.rate-topStar .col-barStar{ padding-left:20px; display:table-cell; width:400px;}
.rate-topStar .col-barStar ul{margin:0; padding:0; list-style:none; position:relative; width:380px;}
.rate-topStar .col-barStar ul li{width:100%; float:left; position:relative; padding-left:90px; padding-right:50px; margin-top:15px;}
.rate-topStar .col-barStar ul li:first-child{margin-top:0;}
.rate-topStar .col-barStar ul li .progressStar{position:absolute; top:0; left:0;} 
.rate-topStar .col-barStar ul li .progressStar i{font-size:12px; margin-right:3px;}
.rate-topStar .col-barStar ul li .progress{height:8px; margin-top:2px;}
.rate-topStar .col-barStar ul li .progress .progress-bar{background:#ff9f00; border-radius:4px;}
.rate-topStar .col-barStar ul li b{position:absolute; top:-5px; right:0; font-weight:500; text-align:left; width:40px;  }
.rate-topStar .col-btn{display:table-cell; position:relative; vertical-align:middle; text-align:left;}
.rate-topStar .col-btn .nav-evaluate,
.rate-topStar .col-btn .nav-question{width:250px; line-height:45px; padding: 0 20px; text-align:center; background:var(--color1); border-radius:7px; color:#fff; display:inline-block; font-weight:500; font-size:16px;}
.rate-topStar .col-btn .nav-back{line-height:46px; background:var(--color-border); padding: 0 20px; border-radius:7px; margin-right:10px; display:inline-block; color:#000; font-weight:bold}


ul.list-comment{width:100%; margin:0; padding:0; list-style:none;}
ul.list-comment li{width:100%; float:left; padding-top:20px}
ul.list-comment ul{margin:0; padding:0px 0 0 50px; list-style:none; float:left; width:100%; position:relative; }
ul.list-comment ul li{width:100%; float:left; position:relative}

.obj-comment{width:100%; float:left; position:relative; margin:0; padding:0 0 0 50px; list-style:none; font-size:16px;}
.obj-comment .obj-avatar{width:40px; height:40px; line-height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--color-border); position:absolute; top:0; left:0; z-index:3;}
.obj-comment .obj-avatar abbr{text-decoration:none!important; cursor:initial!important; font-weight:bold}
.obj-comment .obj-name{width:100%; float:left; font-weight:bold; font-size:16px;}
.obj-comment .obj-rating{}
.obj-comment .obj-star{width:100%; float:left; position:relative; font-size:12px; margin-top:5px; }
.obj-comment .obj-star i{margin-right:5px; float:left; opacity:.3}
.obj-comment .obj-info{width:100%; float:left; position:relative; margin-top:7px; line-height:24px;}
.obj-comment .obj-attr{width:100%; float:left; position:relative; margin: 5px 0 0px 0; top:0; left:0; color:#000}
.obj-comment .obj-attr .ele{display:block; float:left; position:relative; margin-right:30px; font-size:14px; font-weight:500; color:rgba(0,0,0,.65);}
.obj-comment .obj-attr .ele:after{content:''; width:5px; height:5px; border-radius:50%; background:rgba(0,0,0,.3); position:absolute; right:-18px; top:8px; }
.obj-comment .obj-attr .ele:last-of-type{margin-right:0;}
.obj-comment .obj-attr .ele:last-of-type:after{display:none;}
.obj-comment .obj-attr .ele-like{cursor:pointer; color:#000; padding-left:20px;}
.obj-comment .obj-attr .ele-like:before{font-family: "Font Awesome 5"; font-weight:300; content: "\f164"; font-size:14px; position:absolute; top:-1px; left:0;}
.obj-comment .obj-attr .ele-like.active:before{font-weight:900; }
.obj-comment .obj-attr .ele-like b{padding-left:5px;}
.obj-comment .obj-attr .ele-like b:before{content:'(';font-weight:normal}
.obj-comment .obj-attr .ele-like b:after{content:')';font-weight:normal}
.obj-comment .obj-attr .ele-reply{cursor:pointer; color:var(--color2); padding-left:20px;}
.obj-comment .obj-attr .ele-reply:before{font-family: "Font Awesome 5"; font-weight:300; content: "\f3e5"; font-size:14px; position:absolute; top:-1px; left:0;}

.obj-comment.obj-admin .obj-avatar{background:var(--color2) url(../Default/avatar-tk-white.png) no-repeat center; background-size: auto 22px; box-shadow: 0 0 0 0px var(--color-border)}
.obj-comment.obj-admin .obj-name:after{content:'Quản trị viên'; font-size:14px; font-weight:normal; background:#edf4fc; padding: 0 10px; line-height:22px; border-radius:5px; margin-left:10px; color:var(--color2); display:inline-block;}

ul.list-comment li.sub>.obj-comment:before{content:''; width:2px; height:100%; background:var(--color-border); position:absolute; left:19px;}
ul.list-comment>li.sub ul{overflow:hidden;}
ul.list-comment>li.sub ul li:after{content:''; height:40px; width:23px; border-radius: 0 0 0 12px; position:absolute; top:0; left:-31px ; border:2px solid var(--color-border); border-top:none; border-right:none;  }
ul.list-comment>li.sub ul li:last-child:before{content:''; width:2px; height:5000px; background:var(--color-border); position:absolute; left:-31px; bottom:100%;}

/* Modal */
.modal-comment{}
.modal-comment .modal-dialog{max-width:600px;} 
.modal-comment .modal-header{padding-left:25px; padding-top:20px;}
.modal-comment .modal-header .modal-title{font-weight:bold; color:#000; font-size:20px;  width:100%; float:left}
.modal-comment .modal-body{padding: 0 25px 25px 25px;}
.modal-comment .modal-body ul.form li{margin-top:10px;}
.modal-comment .modal-body ul.form li input[type='text'], 
.modal-comment .modal-body ul.form li select{height:40px;} 
.modal-comment .modal-body ul.form li textarea{height:120px;}
.modal-comment .modal-body ul.form li .checkbox{cursor:pointer;}
.modal-comment .modal-body ul.form li .checkbox a{color:var(--color2)}
.modal-comment .modal-body .nav-btnSen{width:100%; line-height:45px; text-align:center; display:block; background:var(--color2); color:#fff; font-size:16px; font-weight:bold; border-radius:7px; margin-top:10px;}
.modal-comment .modal-body .wrap-navBottom{width:100%; float:left; position:relative; text-align:center; margin-top:10px;}
.modal-comment .modal-body .wrap-navBottom a{font-size:14px; display:inline-block; color:var(--color2); transition:.3s; position:relative;}
.modal-comment .modal-body .wrap-navBottom a:hover{text-decoration:underline!important}
.modal-comment .modal-body .wrap-navBottom a:first-child{margin-right:30px;}
.modal-comment .modal-body .wrap-navBottom a:first-child:after{content:''; width:1px; height:16px; margin-top:-8px; background:rgba(0,0,0,.2); position:absolute; top:50%; right:-17px; }


/* Modal Đánh giá sản phẩm */
#myModal-Evaluate .product-modal{width:100%; float:left; position:relative; display:table; border-bottom:1px solid var(--color-border); padding-bottom:15px; margin-bottom:15px;}
#myModal-Evaluate .product-modal .col-avatar{width:100px; display:table-cell; position:relative;}
#myModal-Evaluate .product-modal .col-avatar:before{content:''; padding-top:100%; display:block;} 
#myModal-Evaluate .product-modal .col-avatar .inner{width:100%; height:100%; position:absolute; top:0; left:0; border-radius:7px; overflow:hidden; display:flex; align-items:center; justify-content:center;}
#myModal-Evaluate .product-modal .col-avatar .inner img{max-width:100%; max-height:100%; object-fit:cover;}
#myModal-Evaluate .product-modal .col-name{display:table-cell; vertical-align:middle; text-align:left; padding-left:15px;}
#myModal-Evaluate .product-modal .col-name h3{margin:0; font-size:16px; color:#000; line-height:24px;}
#myModal-Evaluate .rating-star{width:100%; float:left; position:relative;margin-bottom:10px;}
#myModal-Evaluate .rating-star label{float:left; margin:0; position:absolute; bottom:0px; left:0; font-weight:bold;}
#myModal-Evaluate .rating-star ul{margin:0; padding:0; list-style:none; text-align:center; display:block; clear:both; float:right}
#myModal-Evaluate .rating-star ul li{width:60px; text-align:center; margin: 0; position:relative; padding-top:45px; font-size:15px; color:#000; cursor:pointer; float:left;}
#myModal-Evaluate .rating-star ul li:before{font-family: "Font Awesome 5"; color:#ff9f00; font-weight:300; content: "\f005"; font-size:32px; text-align:center; width:100%; position:absolute; top:0; left:0; opacity:.7}
#myModal-Evaluate .rating-star ul.star-1 li:nth-child(1){color:#ff9f00; font-weight:bold;}
#myModal-Evaluate .rating-star ul.star-1 li:nth-child(1):before{opacity:1; font-weight:900; }
#myModal-Evaluate .rating-star ul.star-2 li:nth-child(1):before,
#myModal-Evaluate .rating-star ul.star-2 li:nth-child(2):before{opacity:1; font-weight:900; }
#myModal-Evaluate .rating-star ul.star-2 li:nth-child(2){color:#ff9f00; font-weight:bold;}
#myModal-Evaluate .rating-star ul.star-3 li:nth-child(1):before,
#myModal-Evaluate .rating-star ul.star-3 li:nth-child(2):before,
#myModal-Evaluate .rating-star ul.star-3 li:nth-child(3):before{opacity:1; font-weight:900; }
#myModal-Evaluate .rating-star ul.star-3 li:nth-child(3){color:#ff9f00; font-weight:bold;}
#myModal-Evaluate .rating-star ul.star-4 li:nth-child(1):before,
#myModal-Evaluate .rating-star ul.star-4 li:nth-child(2):before,
#myModal-Evaluate .rating-star ul.star-4 li:nth-child(3):before,
#myModal-Evaluate .rating-star ul.star-4 li:nth-child(4):before{opacity:1; font-weight:900; }
#myModal-Evaluate .rating-star ul.star-4 li:nth-child(4){color:#ff9f00; font-weight:bold;}
#myModal-Evaluate .rating-star ul.star-5 li::before{opacity:1; font-weight:900; }
#myModal-Evaluate .rating-star ul.star-5 li:nth-child(5){color:#ff9f00; font-weight:bold;}

/* Modal Trả lời Đánh giá */
#myModal-replyEvaluate .nav-btnSen{margin-top:20px}
#myModal-replyEvaluate ul.form{margin-top:0px;}

/* Modal Trả lời Đánh giá */
#myModal-comment .nav-btnSen{margin-top:20px}
#myModal-comment ul.form{margin-top:0px;}


.product-comment{width:100%;  float:left; position:relative;}
.product-comment .wrap-img{width:130px; float:left; margin: 0 15px 0 0 ; position:relative;}
.product-comment .wrap-img:before{display:block; padding-top:100%; content:''}
.product-comment .wrap-img a{width:100%; height:100%; position:absolute; top:0; left:0; display:flex; align-items:center; justify-content:center}
.product-comment .wrap-img a img{max-height:100%; max-width:100%; object-fit:cover;}
.product-comment h3{margin:0; padding:0; font-size:17px; font-weight:bold}
.product-comment h3 a{color:#000; line-height:26px;}
.product-comment .price{position:relative; text-align:left; margin-top:10px; z-index:4;}
.product-comment .price .old{display:inline-block; height:17px; margin: 0 0 0 10px; padding-right:9px; position:relative; font-weight:normal; font-size:16px; color:#7d7d7d; line-height:initial;}
.product-comment .price .old:before{content:''; width:100%; height:1px; position:absolute; top:50%; margin-top:0px; left:0; background:#9c9c9c; margin-top:-1px;}
.product-comment .price .old .unit{position:absolute; right:0; top:1px; text-decoration:underline; text-transform:lowercase; font-size:14px;}
.product-comment .price .new{display:inline-block; margin:0; padding-right:11px; position:relative; font-weight:bold; color:var(--color3); font-size:17px;}
.product-comment .price .new .unit{position:absolute; top:1px; right:0; text-transform:lowercase; text-decoration:underline; font-size:15px;}

/* Detail product Page */

.product-detail-preview,
.product-detail-comment{width:100%; float:left; position:relative; border:1px solid var(--color-border); border-radius:10px; margin-top:25px; padding:20px;}
.product-detail-comment .title{border-bottom:1px solid var(--color-border); padding-bottom:25px;}
.product-detail-comment .title a.nav-question{clear:both; display:block; width:250px; line-height:45px; padding: 0 20px; text-align:center; background:var(--color1); border-radius:7px; color:#fff; font-weight:500; font-size:16px; margin-top:15px;}

@media (max-width:767px){
    .product-detail-preview,
    .product-detail-comment{width:calc(100% + 30px); margin-left:-15px; border:none; padding: 15px; border-top:1px solid var(--color-border); border-radius:0; background:#fff!important; margin-top:30px; box-shadow: 0 -30px #fff;}

    .product-detail-preview .rate-topStar{padding-bottom:95px; padding-left:0;}
    .product-detail-preview .rate-topStar .col-barStar{width:calc(100% - 150px); padding-left:10px;}
    .product-detail-preview .rate-topStar .col-barStar ul{width:calc(100% + 20px);}
    .product-detail-preview .rate-topStar .col-btn{display:block; position:absolute; bottom:25px; left:0;}
}

@media (min-width: 768px) and (max-width:991px){
    .product-detail-preview .rate-topStar{padding-bottom:95px; padding-left:0;}
    .product-detail-preview .rate-topStar .col-barStar{width:calc(100% - 150px)}
    .product-detail-preview .rate-topStar .col-barStar ul{width:100%;}
    .product-detail-preview .rate-topStar .col-btn{display:block; position:absolute; bottom:25px; left:0;}
}

/* Trang đánh giá */
.evaluate-detail-page{}
.evaluate-detail-page .rate-topStar{padding-bottom:95px; padding-left:0;}
.evaluate-detail-page .rate-topStar .col-product{display:table-cell; vertical-align:top; padding-right:30px; border-right:1px solid var(--color-border)}
.evaluate-detail-page .rate-topStar .col-totalStar{padding-left:30px; width:180px;}
.evaluate-detail-page .rate-topStar .col-btn{display:block; position:absolute; bottom:25px; left:0;}

@media (max-width:767px){
    .evaluate-detail-page{padding-bottom:90px;}
    .evaluate-detail-page .rate-topStar{padding-bottom:110px;}
    .evaluate-detail-page .rate-topStar{display:block;}
    .evaluate-detail-page .rate-topStar .col-totalStar{padding-left:0; width:150px; display:block; float:left;}
    .evaluate-detail-page .rate-topStar .col-barStar{width:calc(100% - 150px); display:block; float:right; padding-left:10px;}
    .evaluate-detail-page .rate-topStar .col-barStar ul{width:calc(100% + 20px)}
    .evaluate-detail-page .rate-topStar .col-product{width:100%; display:block; padding-bottom:20px; float:left; padding-right:0; border:none;}
}


@media (min-width:768px) and (max-width:991px){
    .evaluate-detail-page .rate-topStar{padding-bottom:110px;}
    .evaluate-detail-page .rate-topStar{display:block;}
    .evaluate-detail-page .rate-topStar .col-product{width:100%; display:block; padding-bottom:20px; float:left; padding-right:0; border:none;}
}

@media (min-width:992px) and (max-width:1199px){
    .evaluate-detail-page .rate-topStar .col-barStar{width:300px;}
    .evaluate-detail-page .rate-topStar .col-barStar ul{width:100%;}
}

.product-detail-preview.is-empty .title{padding-bottom:20px;}
.product-detail-preview.is-empty .rate-topStar .col-totalStar,
.product-detail-preview.is-empty .rate-topStar .col-barStar,
.product-detail-preview.is-empty .bar-filter,
.product-detail-preview.is-empty .list-comment{display:none;}  
.product-detail-preview.is-empty .rate-topStar{border:none; padding:0 0 10px 0;}
.product-detail-preview.is-empty .rate-topStar .col-btn{text-align:center; padding-top: 140px!important; background:url(../Default/icon/rating.svg) no-repeat center 0; background-size:120px auto; position:relative!important; bottom:0!important}
.product-detail-preview.is-empty .rate-topStar .col-btn:before{content:"Hãy sử dụng sản phẩm và trở thành người đầu tiên đánh giá trải nghiệm của bạn"; width:100%; float:left; font-size:16px; margin-bottom:15px;} 
@media (max-width:767px){
    .product-detail-preview.is-empty{padding-bottom:0;}
}


/* Trang hỏi đáp */
.comment-detail-page{}
.comment-detail-page .rate-topStar{ padding-left:0;}
.comment-detail-page .rate-topStar .col-product{display:table-cell; width:500px; vertical-align:top; padding-right:30px; border-right:1px solid var(--color-border)}
.comment-detail-page .rate-topStar .col-btn{padding-left:30px;}
.comment-detail-page .title{margin-top:25px;}

@media (max-width:767px){
    .comment-detail-page{padding-bottom:90px}
}

@media (max-width:991px){
    .comment-detail-page .rate-topStar{display:block;}
    .comment-detail-page .rate-topStar .col-product{width:100%; display:block; padding-bottom:20px; float:left; padding-right:0; border:none;}
    .comment-detail-page .rate-topStar .col-btn{width:100%; padding-left:0; display:block;}
}

.product-detail-comment.is-empty .title{padding-bottom:0px; border:none;}
.product-detail-comment.is-empty .list-comment{display:none;}