﻿
.wrap-viewedProducts{max-width:350px; width:100%; height:100%; float:left; position:fixed; top:0; right:-50px; background:#fff; z-index:50; visibility:hidden; opacity:0; pointer-events:none; transition:.3s;}
.wrap-viewedProducts:before{width:calc(100% - 40px); height:1px; background:#000; position:absolute; top:50px; left:20px; display:block;}
.wrap-viewedProducts .title{float:left; position:absolute; top:15px; left:30px; }
.wrap-viewedProducts .title label{font-size:18px; font-weight:600; color:#000; margin:0px; float:left;}
.wrap-viewedProducts .title b{padding:4px 0 0 5px; color:#000; font-size:14px; float:right; font-weight:bold;}
.wrap-viewedProducts .title b:before{content:'('; opacity:.5; font-weight:400;}
.wrap-viewedProducts .title b:after{content:')'; opacity:.5; font-weight:400}
.wrap-viewedProducts .nav-close{position:absolute; top:15px; right:20px; font-size:14px; color:var(--color3); font-weight:500; line-height:24px; }

.nav-toggleViewedProducts{position:relative; width:44px; height:44px; margin:0 0 10px 0; border-radius:7px; display:flex; align-items:center; justify-content:center; color:#000; box-shadow: inset 0 0 0 2px rgba(0,0,0,.1); transition:.3s; background:#fff; }
.nav-toggleViewedProducts i{font-size:16px; position:relative; z-index:2;}
.nav-toggleViewedProducts b{min-width:18px; height:18px; line-height:18px; border-radius:0 7px 0 7px; padding: 0; background:#2196f3; color:#fff; text-align:center; font-weight:bold; font-size:11px; position:absolute; top:0px; right:0; display:block; z-index:3; text-align:center; }
.nav-toggleViewedProducts span{ position:absolute; right:100%; color:#fff; font-size:13px; z-index:5; background:rgba(0,0,0,.75); border-radius:5px; line-height:26px; height:26px; display:block; transition:.0s; opacity:0; visibility:hidden; z-index:2; transition:.1s; padding:0 10px; white-space:nowrap }
.nav-toggleViewedProducts span:after{content:''; margin-top:-7px; border-left:5px solid rgba(0,0,0,.75); border-top:7px solid transparent; border-bottom:7px solid transparent; position:absolute; top:50%; left:100%;}
.nav-toggleViewedProducts:hover{background:var(--color1); color:#fff; box-shadow:none;}
.nav-toggleViewedProducts:hover span{margin-right:7px; opacity:1; visibility:initial}

.isOpenPanle-ViewedProducts{overflow-y:hidden}
.isOpenPanle-ViewedProducts:before{content:''; width:100%; height:100%; position:fixed; top:0; left:0; z-index:49; background:rgba(0,0,0,.2); -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px);}
.isOpenPanle-ViewedProducts .wrap-viewedProducts{right:0; opacity:1; pointer-events:initial; visibility:initial}

ul.list-viewedProducts{width:100%; margin:0; padding:0 30px; list-style:none; float:left; height:calc(100% - 60px); position:absolute; bottom:0; right:0; overflow-y:auto; overflow-x:hidden}
ul.list-viewedProducts li{width:100%; float:left; position:relative; display:table; margin-bottom:20px; }
ul.list-viewedProducts li .wrap-img{width:100px; position:relative; display:table-cell; vertical-align:top}
ul.list-viewedProducts li .wrap-img img{width:100%; float:left; border-radius:7px;}
ul.list-viewedProducts li .wrap-info{display:table-cell; position:relative; text-align:left; vertical-align:top; padding-left:20px;}
ul.list-viewedProducts li .wrap-info .nav-catalog{font-size:13px; font-weight:normal; color:rgba(0,0,0,.8); height:24px; line-height:25px; border-radius:12px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.1); display:inline-block; padding: 0 15px; transition:.3s;}
ul.list-viewedProducts li .wrap-info .nav-catalog:hover{background:var(--color1); color:#fff; box-shadow:none;}
ul.list-viewedProducts li .wrap-info .name{display:block; text-align:left; margin-top:5px; width:100%; float:left; padding: 0 0px; z-index:5; position:relative; color:#000; font-weight:500;}
ul.list-viewedProducts li .wrap-info .name:hover{color:var(--color1)}
ul.list-viewedProducts li .wrap-info .name h3{font-size:15px; font-weight:normal; transition:.3s; line-height:24px; margin:0; -webkit-line-clamp: 2; -webkit-box-orient: vertical;  white-space: normal; overflow:hidden; text-overflow:ellipsis; display:-webkit-box}
ul.list-viewedProducts li .wrap-info .specifications{width:100%; float:left; font-size:13px; color:rgba(0,0,0,.75); margin-top:0px;}
ul.list-viewedProducts li .price{width:100%; float:left; position:relative; text-align:left; margin-top:5px; z-index:4; padding-left:0px;}
ul.list-viewedProducts li .price .old{display:inline-block; height:17px; margin: 0 0 0 10px; padding-right:9px; position:relative; font-weight:normal; font-size:15px; color:#7d7d7d; line-height:initial;}
ul.list-viewedProducts li .price .old:before{content:''; width:100%; height:1px; position:absolute; top:50%; margin-top:0px; left:0; background:#9c9c9c; margin-top:-1px;}
ul.list-viewedProducts li .price .old .unit{position:absolute; right:0; top:1px; text-decoration:underline; text-transform:lowercase; font-size:13px;}
ul.list-viewedProducts li .price .new{display:inline-block; margin:0; padding-right:11px; position:relative; font-weight:bold; color:var(--color3); font-size:16px;}
ul.list-viewedProducts li .price .new .unit{position:absolute; top:1px; right:0; text-transform:lowercase; text-decoration:underline; font-size:14px;}
ul.list-viewedProducts li .price .save:after{content: '₫'; position:absolute; top:-3px; right:0; font-size:13px; font-weight:500}
ul.list-viewedProducts li.contact .price .new,
ul.list-viewedProducts li.contact .price .old{display:none;} 
ul.list-viewedProducts li.contact .price:before{content:'Giá:'; opacity:.75; font-size:13px;}
ul.list-viewedProducts li.contact .price:after{content:'Liên hệ'; font-weight:600; color:var(--color3); padding-left:5px; font-size:15px;}
ul.list-viewedProducts li.contact:before,
ul.list-viewedProducts li.noneHover:before{display:none;}

@media (max-width:767px) {
    
}