body {
    font-family: Arial,Helvetica,sans-serif;
    min-height: 100%;
    padding: 0;
    margin: 0;
    font-size: 14px;
}
/*==================================================
  FLASH SALE
==================================================*/

.hh-flashsale-section{

    background:#F7913B;

    border-radius:16px;

    padding:18px 20px 20px;

    margin-top:2px;

    margin-bottom:8px;

    box-sizing:border-box;

    box-shadow:0 2px 10px rgba(0,0,0,.05);

    width:100%;

}
.hh-promotion-auto__installmentH {
    max-width: calc(100% - 40px);
    color: #f82424;
    font-size: 13px;
    line-height: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hh-promotion-auto__installmentHN {
    max-width: calc(100% - 40px);

    color: #f82424;

    font-size: 13px;
    line-height: 16px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    animation: promotionFlash 1.2s ease-in-out infinite;

    transform-origin: left center;
}

@keyframes promotionFlashH {
    0%,
    100% {
        color: #f82424;
        opacity: 1;
        text-shadow: 0 0 0 rgba(230, 5, 5, 0.00);
        transform: scale(1);
    }

    50% {
        color: #ff6a00;
        opacity: .7;
        text-shadow: 0 0 7px rgba(248, 36, 36, .35);
        transform: scale(1.025);
    }
}
/* =========================================
   PROMOTION - SHINE SWEEP
   ========================================= */

.hh-promotion-auto__installmentH {
    position: relative;

    display: inline-block;

    max-width: calc(100% - 40px);

    color: #f82424;

    font-size: 13px;
    line-height: 16px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    /* tạo vùng để hiệu ứng không phá layout */
    isolation: isolate;
}


/* Vệt sáng */

.hh-promotion-auto__installmentH::after {
    content: "";

    position: absolute;

    top: -20%;
    bottom: -20%;

    left: -60%;

    width: 35%;

    pointer-events: none;

    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.15) 25%,
        rgba(255, 255, 255, 0.95) 50%,
        rgba(255, 255, 255, 0.15) 75%,
        transparent 100%
    );

    transform: skewX(-20deg);

    animation: promotionShine 2.4s ease-in-out infinite;
}


/* Chạy từ trái sang phải */

@keyframes promotionShine {

    0% {
        left: -60%;
    }

    45% {
        left: 120%;
    }

    100% {
        left: 120%;
    }

}
/*==================================================
  HEADER
==================================================*/

.hh-flashsale-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:16px;

}


/* LEFT */

.hh-flashsale-left{

    display:flex;

    align-items:center;

    gap:20px;

}


/* TITLE */

.hh-flashsale-titleO{

    display:flex;

    align-items:center;

    gap:8px;

    color:#ffffff;

    font-size:20px;

    font-weight:800;

    white-space:nowrap;

}


.hh-flashsale-titleO i{

    font-size:22px;

    color:#ffb000;

}
/* =========================================
   FLASH SALE TITLE
   ========================================= */

.hh-flashsale-title {
    display: flex;
    align-items: center;
    gap: 8px;

    color: #ffffff;

    font-size: 20px;
    font-weight: 800;

    white-space: nowrap;
}


/* =========================================
   TITLE TEXT - SHINE
   ========================================= */

.hh-flashsale-title > span {
    position: relative;

    display: inline-block;

    overflow: hidden;

    color: #fff;

    isolation: isolate;
}


/* Vệt sáng */

.hh-flashsale-title > span::after {
    content: "";

    position: absolute;

    top: -50%;
    bottom: -50%;

    left: -70%;

    width: 35%;

    pointer-events: none;

    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, .15) 25%,
        rgba(255, 255, 255, 1) 50%,
        rgba(255, 255, 255, .15) 75%,
        transparent 100%
    );

    transform: translate3d(-150%, 0, 0) skewX(-20deg);

    animation: flashSaleTitleShine 2.6s ease-in-out infinite;
}


/* =========================================
   SHINE ANIMATION
   ========================================= */

@keyframes flashSaleTitleShine {

    0% {
        transform: translate3d(-150%, 0, 0) skewX(-20deg);
    }

    40% {
        transform: translate3d(450%, 0, 0) skewX(-20deg);
    }

    100% {
        transform: translate3d(450%, 0, 0) skewX(-20deg);
    }

}

/*==================================================
  COUNTDOWN
==================================================*/

.hh-flashsale-countdown{

    display:flex;

    align-items:center;

    gap:8px;

}


.hh-countdown-label{

    font-size:13px;

    color:#fff;

}


.hh-countdown-time{

    display:flex;

    align-items:center;

    gap:4px;

}


.hh-countdown-time span{

    min-width:32px;

    height:30px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#fff;

    color:#c80319;

    border-radius:5px;

    font-size:15px;

    font-weight:700;

}


.hh-countdown-time b{

    color:#333;

    font-size:16px;

}


/*==================================================
  VIEW ALL
==================================================*/

.hh-flashsale-viewall{

    display:flex;

    align-items:center;

    gap:5px;

    color:#fff;

    font-size:14px;

    font-weight:600;

    text-decoration:none;

}


.hh-flashsale-viewall:hover{

    color:#ff3b30;

}


/*==================================================
  PRODUCT AREA
==================================================*/

.hh-flashsale-slider{

    position:relative;

}


.hh-flashsale-slider .hh-product-grid{

    gap:16px;

}


/*==================================================
  FLASH CARD
==================================================*/

.hh-flashsale-card{

    position:relative;

}
/* ========================================================= TRẢ GÓP ========================================================= */ 
.hh-flashsale-card .hh-installment-footer 
{ flex: 0 0 20px; width: 100%; 
  height: 20px; min-height: 20px; 
  box-sizing: border-box; padding: 2px 12px 0; 
  olor: #f82424; font-size: 12px; line-height: 17px; 
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 

}
/* Sale badge */

.hh-flashsale-card .badge-sale{

    background:#d70018;

    color:#fff;

    font-size:12px;

    font-weight:700;

    padding:4px 7px;

    border-radius:4px;

}


/* Current price */

.hh-flashsale-card .price-current{

    color:#d70018;

    font-weight:600;

}


/*==================================================
  SLIDER BUTTON
==================================================*/

.hh-flashsale-slider .hh-slider-btn{

    width:36px;

    height:36px;

    border-radius:50%;

    background:#fff;

    border:1px solid #ddd;

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

    z-index:5;

}


.hh-flashsale-slider .hh-slider-btn:hover{

    background:#d70018;

    color:#fff;

    border-color:#d70018;

}