/* ==========================================================
   PRODUCT V2
   ==========================================================*/

.hh-product-section{

    width:100%;
    margin:28px 0 40px;
   background:#dd1729;
}

/*==========================================================*/

.hh-section-header{

    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:22px;

}

.hh-section-left{

    display:flex;
    align-items:center;
    gap:18px;

}

.hh-section-icon{

    width:58px;
    height:58px;

    border-radius:18px;

    background:linear-gradient(135deg,#ff4d4f,#d70018);

    display:flex;
    justify-content:center;
    align-items:center;

    color:#fff;

    font-size:26px;

    box-shadow:0 8px 24px rgba(215,0,24,.25);

}

.hh-section-title{

    margin:0;

    font-size:16px;

    font-weight:600;

    color:#fff;

}

.hh-section-desc{

    margin-top:4px;

    color:#eaeaea;

    font-size:13px;

}

.hh-section-viewall{

    color:#fff;

    font-weight:600;

    text-decoration:none;
    margin-right:8px;
}

.hh-section-viewall:hover{

    text-decoration:underline;

}

/*==========================================================*/

.hh-category-banner{

    margin-bottom:18px;

}

/*==========================================================*/

.hh-product-slider{

    position:relative;
}

.hh-product-track{

    overflow:hidden;

    width:100%;

    position:relative;
    overflow-x:auto;

    overflow-y:hidden;
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom:10px;
    scroll-behavior:smooth;

}
.hh-product-track::-webkit-scrollbar{
    display:none;
}

.hh-product-track{
    -ms-overflow-style:none;
    scrollbar-width:none;
}
.hh-product-grid{
    display:flex;
    flex-wrap:nowrap;
    gap:16px;    
    transition:transform .35s ease;
    will-change:transform;    
}
/* =========================================
   PROMOTION TABS
========================================= */

.hh-promotion-tabs-wrap {
    width: 100%;
    padding: 0 32px 18px;
    box-sizing: border-box;
}

.hh-promotion-tabs {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}

.hh-promotion-tabs::-webkit-scrollbar {
    display: none;
}

.hh-promotion-tab-list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: max-content;
}


/* TAB */
.hh-promotion-tab {
    position: relative;

    min-width: 130px;
    height: 42px;

    padding: 0 22px;

    border: 1px solid rgba(255,255,255,.45);
    border-radius: 8px;

    background: rgba(255,255,255,.14);

    color: #fff;

    font-size: 15px;
    font-weight: 600;

    cursor: pointer;

    white-space: nowrap;

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}


/* Hover */
.hh-promotion-tab:hover {
    background: rgba(255,255,255,.28);

    transform: translateY(-1px);
}


/* ACTIVE */
.hh-promotion-tab.active {
    background: #fff;

    color: #f44336;

    border-color: #fff;

    box-shadow: 0 3px 10px rgba(0,0,0,.12);
}


/* ACTIVE indicator */
.hh-promotion-tab.active::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: -7px;

    width: 0;
    height: 0;

    transform: translateX(-50%);

    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid #fff;
}
/*==========================================================*/

.hh-card{
    flex-shrink:0;
    flex:0 0 calc((100% - 80px)/6);

    background:#fff;

    border:1px solid #e6e6e6;

    border-radius:12px;

    overflow:hidden;

    transition:.25s;

}

.hh-card:hover{

    transform:translateY(-5px);
    box-shadow:0 14px 30px rgba(0,0,0,.08);

}

/*==========================================================*/

.hh-card-link{

    display:block;

    color:inherit;

    text-decoration:none;

    padding:14px;

}

/*==========================================================*/

.hh-card-badges{

    display:flex;

    justify-content:space-between;

    margin-bottom:10px;

}

.badge-installment{

    background:#2979ff;

    color:#fff;

    padding:4px 10px;

    border-radius:30px;

    font-size:12px;

    font-weight:600;

}

.badge-sale{

    background:#e30019;

    color:#fff;

    padding:4px 10px;

    border-radius:16px;

    font-size:12px;

    font-weight:700;

}

/*==========================================================*/

.hh-card-image{

    height:165px;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:14px;

}

.hh-card-image img{

    max-width:100%;

    max-height:160px;

    transition:.25s;

}

.hh-card:hover img{

    transform:scale(1.04);

}

/*==========================================================*/

.hh-card-title{

    margin:0;

    height:48px;

    overflow:hidden;

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

    line-height:22px;

    font-size:14px;

    font-weight:500;

    color:#333;

}

/*==========================================================*/

.hh-card-rating{

    display:none;

    align-items:center;

    gap:6px;

    margin-top:8px;

    font-size:13px;

    color:#888;

    min-height:22px;

}

.hh-rating-count{

    color:#999;

}

/*==========================================================*/

.hh-card-price{

    margin-top:10px;

}

.price-current{

    color:#d70018;

    font-size:17px;

    font-weight:700;

}

.price-old{

    margin-top:3px;

    font-size:13px;

    color:#999;

    text-decoration:line-through;

}

/* ==================================================
   CARD FOOTER
   ================================================== */

.hh-card-footer {
    border-top: 1px solid #f3f3f3;

    padding: 10px 14px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 10px;

    box-sizing: border-box;
}


/* ==================================================
   SALE BADGE - NẰM CÙNG HÀNG VỚI CART
   ================================================== */

.hh-card-footer .hh-card-badges {
    display: flex;
    align-items: center;

    margin: 0;
    padding: 0;

    /* cho phép co lại nếu tên badge dài */
    min-width: 0;

    flex: 1;
}


/* Bỏ background của badge */

.hh-card-footer .badge-saleH {
    display: inline-flex;
    align-items: center;

    padding: 0;

    background: transparent;

    border: 0;
    border-radius: 0;

    color: #d70018;

    font-size: 12px;
    font-weight: 600;

    line-height: 18px;

    white-space: nowrap;
}


/* ==================================================
   CART BUTTON
   ================================================== */

.hh-card-footer .hh-cart-btnH {
    flex: 0 0 38px;

    width: 30px;
    height: 30px;

    padding: 0;

    border-radius:6px;

    border: 1px solid #d70018;

    background: #fff;

    color: #d70018;

    cursor: pointer;

    transition: all .25s ease;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* Hover */

.hh-card-footer .hh-cart-btn:hover {
    background: #d70018;

    color: #fff;

    transform: scale(1.05);

    box-shadow: 0 4px 10px rgba(215, 0, 24, .20);
}

.hh-installment-footer{   
    color:#ed1f36;

    border-radius:18px;

    padding:5px 10px;

    font-size:12px;

    font-weight:600;

}

.hh-cart-btn{

    width:38px;

    height:38px;

    border-radius:50%;

    border:1px solid #d70018;

    background:#fff;

    color:#d70018;

    cursor:pointer;

    transition:.25s;   display:block;

}

.hh-cart-btn:hover{

    background:#d70018;

    color:#fff;

}

/*==========================================================*/

.hh-card-spec{

    display:none;

}

/*==========================================================*/

.hh-slider-btn{

    position:absolute;

    top:38%;

    transform:translateY(-50%);

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    background:#fff;

    box-shadow:0 6px 20px rgba(0,0,0,.15);

    cursor:pointer;

    z-index:20;

}

.hh-prev{

    left:-18px;

}

.hh-next{

    right:-18px;

}

.hh-slider-btn:hover{

    background:#d70018;

    color:#fff;

}
/*==========================================================
  RESPONSIVE PRODUCT CARD
==========================================================*/

/* 6 card */
@media (max-width:1500px){

    .hh-card{

        flex:0 0 calc((100% - 80px)/6);

    }

}


/* 6 card */
@media (max-width:1200px){

    .hh-card{

        flex:0 0 calc((100% - 80px)/6);

    }

}


/* 5 card */
@media (max-width:992px){

    .hh-card{

        flex:0 0 calc((100% - 64px)/5);

    }

}


/* 4 card */
@media (max-width:768px){

    .hh-card{

        flex:0 0 calc((100% - 48px)/4);

    }

}


/* 3 card */
@media (max-width:500px){

    .hh-card{

        flex:0 0 calc((100% - 32px)/3);

    }

}

/* 2 card */
@media (max-width:500px){

    .hh-card{

        flex:0 0 calc((100% - 16px)/2);

    }

}
/* 1 card */
@media (max-width:325px){

    .hh-card{

        flex:0 0 100%;

    }

}