.deal {padding:24px 0;}
.deal h1{padding:0 0 24px 0;
    text-transform: uppercase;
    color: #000;
    margin-top: 5px;
    border-radius: 3px;
    font-weight: 300;
    text-align: center;
}
.deal .product-list {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 24px;}
.deal .product {width:100%;float:left;border-right:0;border-top:0;text-align:center;background:#fff;padding-bottom:12px;border:1px solid #eee;border-radius:5px;overflow:hidden;box-shadow: 2px 2px 20px #00000017;    position: relative;z-index:99;margin-bottom:3%}

.deal .product:nth-child(4n) {margin-right:0;}
.deal .product:hover {background:#fff;}
.deal .product .xemchitiet {display:none;}
.deal .product:hover .xemchitiet{left:0px;display:block;position:absolute;bottom:0px;background:rgba(0,0,0,0.3);padding:10px;color:#fff;font-weight:bold;font-size:16px;width:100%}
.deal .product:hover .xemchitiet:before{content:"";}
.deal .product:hover {}
.deal .last{margin-right:0;}
.deal .hide{display:none}
.deal .product .hinhanh{float:left;padding:0px;position:relative;text-align:center;width:100%;position:relative;overflow:hidden;aspect-ratio: 1/1;background:#eee;}
.deal .product .type {display:flex;gap:6px;justify-content:center;align-items:center;margin-top:12px;}
.deal .product .type span {margin:0;display:block;cursor:pointer;}
.deal .product .type img{width:32px;border-radius:50%;border:1px solid #ccc;padding:6px;float: left;}
.deal .product .detail{float:left;margin-top:0!important;width:100%;}
.deal .product img{max-width:100%;width:100%;max-height:100%;top:0;left:0;right:0;bottom:0;margin:auto;opacity:1;
-moz-animation-delay: 3.5s;
-webkit-animation-delay: 3.5s;
-o-animation-delay: 3.5s;
animation-delay: 3.5s;
-moz-transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.deal .product .name {color:#555;padding:0 10px;margin:10px 0;text-overflow: ellipsis;
    word-wrap: normal;font-weight:300;margin-bottom:24px;
    overflow: hidden;display: inline-block;    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;}
.deal .product .price-wrap {margin-top:8px;display:flex;justify-content:center;align-items:center;}
.deal .product .price-wrap span {margin:0;}
.deal .product .price {text-transform:uppercase;font-size:18px;color:#f7852e;padding:5px 15px;margin-top:10px}
.deal .product .khuyenmai{text-decoration:line-through;color:#ccc;font-weight:300;font-size:12px;}
.deal .product .giakm{color:#aaa;}
.deal .product .addon{font-size:12px;border-top:1px solid #eee;border-bottom:1px solid #eee;margin:10px 0;padding:10px 0;float:left;width:100%;}
.deal .product .addon .city{width:50%;float:left}
.deal .product .addon .rate{width:50%;float:left;color:#ffeb3b;}
.deal .product:hover .btn-flex {opacity:1;}
.deal .product .btn-flex {display:flex;gap:12px;float:left;width:100%;padding:0 12px;font-weight:300;cursor:pointer;margin-top:12px;opacity:0;-moz-animation-delay: 3.5s;
-webkit-animation-delay: 3.5s;
-o-animation-delay: 3.5s;
animation-delay: 3.5s;
-moz-transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;}
.deal .product .btn-flex .fast-view {border: 2px solid #181818;width: 50%;border-radius: 6px;padding:10px 0;}
.deal .product .btn-flex .add-cart {border: 2px solid #181818;background:#181818;color:#fff;width: 50%;border-radius: 6px;padding:10px 0;}
.deal .product .discount {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 9;
    background: #f00;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
}
.product_index .viewmore{text-align:right;clear:both}
p.trang {width:100%;float:left;text-align:center;}
p.trang a{ display:inline-block;padding:5px 10px;border:1px solid #eee;margin:0 3px;}
p.trang a.active {background:#eee;font-weight:bold;}