body {
}
/*==================================================
    UI2026 - HOME HERO BANNER
==================================================*/
.hh-home-hero{

    display:flex;
    gap:16px;
    align-items:stretch;

    width:100%;
    flex:1;

}

.hh-home-banner{
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    box-sizing: border-box;

}

.outthanhdieuhuongbottomhome {
    display:none;
}
/*.hh-home-flash{

    flex:0 0 320px;

    background:#fff;

    border-radius:12px;

    overflow:hidden;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    display:flex;

    flex-direction:column;

    box-sizing:border-box;

} */
.hh-home-flash {
    flex: 0 0 320px;

    background: #fff;

    border-radius: 12px;

    overflow: hidden;

    box-shadow: 0 10px 30px rgba(0,0,0,.08);

    display: flex;

    flex-direction: column;

    box-sizing: border-box;

    min-height: 0;
}
.hh-flash-header{

    height:58px;

    background:#ea1c24;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 18px;

}
.hh-flash-title{

    color:#fff;

    font-size:16px;

    font-weight:700;

    display:flex;

    align-items:center;

    gap:8px;  padding-top:10px;

}
.hh-flash-title i{

    color:#ffd200;

    font-size:22px;

}

.hh-countdown{

    display:flex;

    align-items:center;

    gap:6px;

}

.hh-time{

    width:36px;

    height:22px;

    background:#fff;

    border-radius:8px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:16px;

    font-weight:700;

    color:#ea1c24;

}

.hh-dot{

    color:#fff;

    font-size:22px;

    font-weight:bold;

}
.hh-flash-time{

    display:flex;

    gap:4px;

}
.hh-flash-time span{

    width:28px;

    height:28px;

    border-radius:6px;

    background:#fff;

    color:#d70018;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

}
/*.hh-flash-image{
    flex:1;

    min-height:0;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:12px;

    overflow:hidden;

} */
.hh-flash-image {
    width: 100%;
    height: 120px;

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

    overflow: hidden;
}
.hh-flash-image::before{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    border-radius:50%;

    background:radial-gradient(
        rgba(215,0,24,.08),
        transparent 70%
    );

    z-index:0;

}
.hh-flash-image img {
    display: block;

    width: 100%;
    height: 100%;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;
}
/*.hh-flash-image img{
   
    display:block;

    max-width:100%;

    max-height:100%;

    object-fit:contain;

    transition:.35s;
        position:relative;

    z-index:1;

}  */
.hh-flash-name{
    margin-top:6px;

    line-height:2.45;

    font-size:14px;

    font-weight:600;

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

    overflow:hidden;

}
.hh-flash-price{
margin:6px 0;
}
.sale{

    color:#d70018;

    font-size:16px;

    font-weight:700;

}
.old{

    margin-left:8px;

    color:#999;

    text-decoration:line-through;

}
.hh-flash-discount{

    position:absolute;

    top:12px;

    right:12px;

    background:#ff1744;

    color:#fff;

    padding:6px 8px;

    border-radius:8px;

    font-weight:700;

    font-size:13px;

}
.hh-flash-progress{
    margin-bottom:10px;

    position:relative;

    height:24px;

    background:#f3f3f3;

    border-radius:20px;

    overflow:hidden;

}
.hh-flash-progress-bar{

    width:68%;

    height:100%;

    background:linear-gradient(90deg,#ff9800,#ff5722);

}
.hh-flash-progress span{

    position:absolute;

    left:0;

    right:0;

    top:0;

    bottom:0;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:12px;

    font-weight:600;

}
.hh-flash-buy{

    margin-top:auto;

    display:flex;

    justify-content:center;

    align-items:center;

    height:38px;

    background:#d70018;

    color:#fff;

    border-radius:8px;

    font-weight:700;

    text-decoration:none;

    transition:.25s;

}
.hh-flash-buy:hover{

    background:#bf0015;

}
.hh-flash-slider{

    flex:1;

    min-height:0;

    overflow:hidden;

    position:relative;

    width:100%;

}

.hh-flash-track{
    display:flex;
    flex-wrap:nowrap;
       height:100%;
    width:100%;

    transition:transform .45s ease;

    will-change:transform;

}
.hh-flash-item{    
    flex:0 0 100%;
    width:100%;
    min-width:100%;
    box-sizing:border-box;
}
.hh-flash-item-inner{
    display:flex;

    flex-direction:column;

    height:100%;

    padding:18px;

    box-sizing:border-box;  

}

.hh-flash-footer{

    height:52px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 18px;

    border-top:1px solid #f2f2f2;

    background:#fff;

    flex-shrink:0;

}

.hh-flash-dots{

    display:flex;

    align-items:center;

    gap:8px;

}

.hh-flash-dot{

    width:8px;

    height:8px;

    border-radius:50%;

    background:#ddd;

    cursor:pointer;

    transition:.3s;

}

.hh-flash-dot.active{

    width:22px;

    border-radius:20px;

    background:#d70018;

}

.hh-flash-viewall{

    display:flex;

    align-items:center;

    gap:6px;

    color:#d70018;

    font-size:13px;

    font-weight:600;

    text-decoration:none;

    transition:.25s;

}

.hh-flash-viewall:hover{

    color:#ff3b30;

}
/*======================================
    SERVICE ICONS
======================================*/

.hh-services{

    margin:8px 0 6px;

}

.hh-services-list{
    display:flex;
    gap:12px;
}

.hh-service-item{

    flex:1;

    display:flex;

    align-items:center;

    gap:14px;

    padding:6px 6px;
    background:#d70018;
    
    border:1px solid #ececec;

    border-radius:12px;

    text-decoration:none;

    transition:all .25s ease;

}

.hh-service-item:hover{

    transform:translateY(-4px);

    border-color:#d70018;
    background:#db0f22;
    box-shadow:0 10px 24px rgba(0,0,0,.08);

}

.hh-service-icon{

    width:38px;

    height:38px;

    border-radius:40%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:22px;

    flex-shrink:0;

    transition:.25s;

}

.hh-service-item:hover .hh-service-icon{

    transform:scale(1.08);

}

.hh-service-icon i{

    line-height:1;

}

.hh-service-title{

    color:#fff;

    font-size:14px;

    font-weight:500;

}

.hh-service-desc{

    margin-top:4px;

    color:#ddd;

    font-size:12px;

}

/*=============
    ICON COLORS
==============*/

.hh-service-icon.blue{

    background:#eef6ff;

    color:#1976d2;

}

.hh-service-icon.orange{

    background:#fff5eb;

    color:#f57c00;

}

.hh-service-icon.green{

    background:#eefaf2;

    color:#2e7d32;

}

.hh-service-icon.red{

    background:#fff1f1;

    color:#d70018;

}

.hh-service-icon.purple{

    background:#f4f0ff;

    color:#7b1fa2;

}

.rightcolinhome {
    float:left;width:0;margin:auto;display:none;
}
.divallbanneradvnewversion{

    display:flex;

    align-items:flex-start;

    gap:20px;

    margin:8px 0 8px;

}

.rightbanneradvhomenerversion{

    position:relative;

    flex:1;

    width:auto;

    margin:0;
    float:none;

}
.menuinhome {
    display:none;
}
/*==================================================
  FEATURED CATEGORY
==================================================*/

.hh-featured-category{
    background:#fff;
    border-radius:16px;
    padding:6px 18px 6px;
    margin-top:2px;
    margin-bottom:6px;
    box-sizing:border-box;
    box-shadow:0 2px 10px rgba(0,0,0,.05);
    width:100%;
}
/*==================================================
  HEADER
==================================================*/

.hh-featured-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:10px;

}

.hh-featured-title{

    margin:0;

    font-size:22px;

    font-weight:700;

    color:#222;

    line-height:1;

}

.hh-featured-viewall{

    display:flex;

    align-items:center;

    gap:6px;

    color:#d70018;

    font-size:14px;

    font-weight:600;

    text-decoration:none;

    transition:.25s;

}

.hh-featured-viewall:hover{

    color:#ff3b30;

}


/*==================================================
  CATEGORY GRID
==================================================*/
.hh-featured-grid{
    display:grid;
    grid-template-columns:repeat(8, 120px);
    justify-content:center;
    gap:10px 12px;
}

/*==================================================
  CATEGORY ITEM
==================================================*/

.hh-featured-item{

    width:120px;
    height:93px;

    justify-self:center;

    background:#fff;

    border:1px solid #ececec;

    border-radius:12px;

    text-decoration:none;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    padding:6px 7px;

    box-sizing:border-box;

    transition:all .25s ease;

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

}

.hh-featured-item:hover{

    transform:translateY(-3px);

    border-color:#d70018;

    box-shadow:0 8px 20px rgba(0,0,0,.10);

}


/*==================================================
  IMAGE
==================================================*/

.hh-featured-image{

    width:52px;
    height:52px;

    display:flex;

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

    margin-bottom:5px;

}

.hh-featured-image img{

    width:48px;
    height:48px;

    object-fit:contain;

    transition:transform .25s ease;

}

.hh-featured-item:hover .hh-featured-image img{

    transform:scale(1.08);

}


/*==================================================
  NAME
==================================================*/

.hh-featured-name{

    width:100%;

    text-align:center;

    color:#333;

    font-size:14px;

    font-weight:600;

    line-height:18px;

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

    overflow:hidden;

}
/*===banner mục sản phẩm đề xuất*/
/* =========================================================
   PROMOTION BANNER - HOVER ZOOM
   Không ảnh hưởng Flash Sale
   ========================================================= */

.banneriteminbanneradvhome {
    overflow: hidden;
    cursor: pointer;
}

.banneriteminbanneradvhome img {    
    transition: transform .4s ease;
}

/* Hover vào banner -> ảnh zoom nhẹ */
.banneriteminbanneradvhome:hover img {
    transform: scale(1.05);
}
/*---------------------OLDVER*/

#inrightbanneradvhomenerversionbb{

    position:relative;

    overflow:hidden;

    background:#fff;

    border-radius:18px;

    border:none; margin:0;

    box-shadow:0 12px 35px rgba(0,0,0,.08);

}
.inrightbanneradvhomenerversion{
        position: relative;
    overflow: hidden;
    border-radius: 12px;height:300px;

}

.itemadvhomenewversion{

    position:absolute;

    inset:0;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transform:scale(1.03);

    transition:
        opacity .45s ease,
        transform .6s ease,
        visibility 0s linear .45s;

}
.itemadvhomenewversion img{

    width:100%;
    height:100%;
   display:block;
    object-fit:var(--banner-fit, fill);

}
.itemadvhomenewversion.active{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

    transform:scale(1);

    z-index:2;

    transition:
        opacity .45s ease,
        transform .6s ease;

}

#btnleftadvhome,
#btnrightadvhome{

    position:absolute;

    top:50%;

    width:46px;

    height:46px;

    margin-top:-23px;

    border-radius:50%;

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

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    box-shadow:0 8px 20px rgba(0,0,0,.12);

    transition:.25s;

    opacity:0;

    z-index:20;

}

#btnleftadvhome{

    left:18px;

}

#btnrightadvhome{

    right:18px;

}
#btnleftadvhome:hover,
#btnrightadvhome:hover{

    background:#d70018;

    transform:scale(1.08);

}
#btnleftadvhome img,
#btnrightadvhome img{

    width:18px;

    height:18px;

}
#inrightbanneradvhomenerversionbb:hover #btnleftadvhome,
#inrightbanneradvhomenerversionbb:hover #btnrightadvhome{

    opacity:1;

}
.listtabitembannerhomenewversion{
    background:#fff;
    border-radius:0 0 18px 18px;
    overflow:hidden;
}
.tabitembannerhomenv{
        flex:1;
    min-width:0;
}
.inlisttabitembannerhomenewversion{

    display:flex;   width:100%;

}
.inlisttabitembannerhomenewversion .tabitembannerhomenv div{
    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:0 12px;

    font-size:13px;

    color:#555;

    border-top:1px solid #f2f2f2;

    border-right:1px solid #f2f2f2;

    transition:.25s;
    position:relative;

}
.tabitembannerhomenv:last-child>div{
    border-right:none;
}

.tabitembannerhomenv span{

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

    overflow:hidden;

    text-align:center;

    font-size:12px;

    font-weight:300;

    color:#444;

    line-height:20px;

    transition:.25s;
}
.inlisttabitembannerhomenewversion .tabitembannerhomenv:hover div{
    color:#d70018;

    background:#fafafa;

}
.inlisttabitembannerhomenewversion .tabitembannerhomenv:first-child div{

    background:#fff;
    color:#d70018;
    font-weight:600;   
}
.tabitembannerhomenv div::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:0;

    height:3px;

    background:#d70018;

    transition:.25s;

}
.tabitembannerhomenv.active>div{

    background:#fff;
}

.tabitembannerhomenv.active span{

    color:#d70018;
}
 .tabitembannerhomenv.active>div::before{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    height:3px;

    background:#ff4d4f;

    animation:bannerProgress 4s linear;

}

@keyframes bannerProgress{

    from{

        width:0;

    }

    to{

        width:100%;

    }

}
.tabitembannerhomenv.active>div::after{

    content:"";

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    height:3px;

    background:#d70018;

    border-radius:3px 3px 0 0;
}
.tabitembannerhomenv:hover>div{

    background:#fafafa;
}

.tabitembannerhomenv:hover span{

    color:#d70018;
}

.hh-flash-status{

    color:#fff;

    font-size:12px;

    margin-bottom:4px;

    text-align:center;

}

.hh-flash-buy.disabled{

    background:#c7c7c7;

    cursor:not-allowed;

    pointer-events:none;

    opacity:.75;
}
/* Desktop / Tablet: ẩn */
.tabkhuyenmaiintopmenumb {
    display: none;
}
/* ==========================================================
   MOBILE QUICK TABS
   ========================================================== */
 .hh-mobile-quick-tabs-wrapper {
    display: none;
}

/* =========================================================
   HongHa UI2026
   CATEGORY RESPONSIVE
   < 1220px
========================================================= */

@media (max-width: 1219px) {

    /* =====================================================
       CONTAINER
    ===================================================== */

    .hh-featured-category {
        width: 100%;

        padding: 6px 10px 7px;

        box-sizing: border-box;

        overflow: hidden;
    }


    /* =====================================================
       HEADER CATEGORY
    ===================================================== */

    .hh-featured-header {
        margin-bottom: 6px;
    }


    /* =====================================================
       HORIZONTAL SCROLL AREA
    ===================================================== */

    .hh-featured-grid {

        display: flex;

        flex-wrap: nowrap;

        justify-content: flex-start;
        align-items: stretch;

        gap: 8px;

        width: 100%;
        max-width: 100%;

        overflow-x: auto;
        overflow-y: hidden;

        padding: 2px 2px 7px;

        box-sizing: border-box;

        /* Touch */
        touch-action: pan-x;

        /* Smooth scroll */
        scroll-behavior: smooth;

        -webkit-overflow-scrolling: touch;

        /* Hide scrollbar */
        scrollbar-width: none;

        /* Mouse drag */
        cursor: grab;

        /* Không bôi đen text khi kéo */
        user-select: none;
    }

    .hh-featured-grid::-webkit-scrollbar {
        display: none;
    }


    /* Khi đang kéo chuột */

    .hh-featured-grid.hh-dragging {

        cursor: grabbing;

        scroll-behavior: auto;
    }


    /* =====================================================
       CATEGORY ITEM
    ===================================================== */

    .hh-featured-item {

        flex: 0 0 104px;

        width: 104px;
        min-width: 104px;

        height: 96px;

        box-sizing: border-box;

        justify-self: auto;
    }


    /* =====================================================
       IMAGE
    ===================================================== */

    .hh-featured-image {

        width: 44px;
        height: 44px;

        margin-bottom: 4px;

        display: flex;

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

    .hh-featured-image img {

        width: 42px;
        height: 42px;

        object-fit: contain;
    }


    /* =====================================================
       NAME
    ===================================================== */

    .hh-featured-name {

        width: 100%;

        font-size: 12px;
        line-height: 1.2;

        text-align: center;

        overflow: hidden;

        display: -webkit-box;

        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

}

/* =========================================================
   TABLET
   768px -> 1023px
========================================================= */

@media (min-width: 768px) and (max-width: 1023px) {

    .hh-featured-category {
        padding: 6px 10px 7px;
    }

    .hh-featured-grid {
        gap: 7px;
        padding-bottom: 6px;
    }

    .hh-featured-item {

        flex-basis: 96px;

        width: 96px;
        min-width: 96px;

        height: 90px;
    }

    .hh-featured-image {
        width: 40px;
        height: 40px;
    }

    .hh-featured-image img {
        width: 38px;
        height: 38px;
    }

    .hh-featured-name {
        font-size: 11px;
        line-height: 1.2;
    }
    .hh-service-item {
        column-gap:2px;
    }
    .hh-services-list{
    display:grid;
    gap:1px;
}

}
/* =========================================================
   HOME HERO
   MOBILE / TABLET NHỎ
   < 768px

   Banner 1 dòng
   Flash Sale 1 dòng
========================================================= */

@media (max-width: 768px) {

    .hh-home-hero {
        display: flex;
        flex-direction: column;

        gap: 10px;

        width: 100%;

        box-sizing: border-box;
    }


    /* =====================================================
       BANNER
    ===================================================== */

    .hh-home-banner {
        width: 100%;
        min-width: 0;

        flex: none;
    }

    .inrightbanneradvhomenerversion {
        width: 100%;

        height: auto !important;
        aspect-ratio: 16 / 7;

        min-height: 0;

        overflow: hidden;

        border-radius: 12px;
    }

    .itemadvhomenewversion {
        width: 100%;
        height: 100%;

        overflow: hidden;
    }

    .itemadvhomenewversion img {
        display: block;

        width: 100%;
        height: 100%;

        object-fit: cover;
    }


    /* =====================================================
       BANNER TABS
    ===================================================== */

    .listtabitembannerhomenewversion {
        width: 100%;
        height: 52px;

        overflow: hidden;
    }

    .inlisttabitembannerhomenewversion {

        display: flex;

        width: 100%;
        height: 52px;

        overflow-x: auto;
        overflow-y: hidden;

        scrollbar-width: none;
    }

    .inlisttabitembannerhomenewversion::-webkit-scrollbar {
        display: none;
    }

    .tabitembannerhomenv {

        flex: 0 0 25%;

        min-width: 25%;

        height: 52px;
    }

    .tabitembannerhomenv > div {

        width: 100%;
        height: 52px;

        display: flex;

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

        padding: 0 6px;

        text-align: center;

        box-sizing: border-box;
    }

    .tabitembannerhomenv span {

        display: -webkit-box;

        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;

        overflow: hidden;

        font-size: 11px;
        line-height: 15px;
    }


    /* =====================================================
       FLASH SALE
    ===================================================== */

    .hh-home-flash {

        width: 100%;
        min-width: 0;

        flex: none;

        height: auto !important;

        box-sizing: border-box;
    }


    /* Không để JS cũ ép height */
    .hh-home-flash[style] {
        height: auto !important;
    }
   .hh-flash-slider {
        width: 100%;
        overflow: hidden;
    }

    .hh-flash-track {
        display: flex;
        flex-wrap: nowrap;
    }

    .hh-flash-item {
        flex: 0 0 50%;
        width: 50%;
        min-width: 50%;

        box-sizing: border-box;
        padding: 6px;
    }

    .hh-flash-item-inner {
        width: 100%;
        height: 100%;

        padding: 10px;

        box-sizing: border-box;
    }

    .hh-flash-image {
        width: 100%;
        height: 130px;
    }

    .hh-flash-name {
        font-size: 12px;
        line-height: 1.35;

        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;

        overflow: hidden;
    }

    .hh-flash-price .sale {
        font-size: 15px;
    }

    .hh-flash-price .old {
        font-size: 11px;
    }

    .hh-flash-progress {
        height: 19px;
    }

    .hh-flash-buy {
        height: 34px;
        font-size: 12px;
    }
.hh-featured-category {
        padding: 6px 8px 7px;

        border-radius: 12px;
    }

    .hh-featured-header {
        margin-bottom: 5px;
    }

    .hh-featured-title {
        font-size: 18px;
    }

    .hh-featured-grid {
        gap: 6px;

        padding:
            1px
            1px
            6px;
    }

    .hh-featured-item {

        flex-basis: 84px;

        width: 84px;
        min-width: 84px;

        height: 82px;

        border-radius: 10px;
    }

    .hh-featured-image {
        width: 36px;
        height: 36px;

        margin-bottom: 3px;
    }

    .hh-featured-image img {
        width: 34px;
        height: 34px;
    }

    .hh-featured-name {
        font-size: 10px;
        line-height: 1.15;
    }
}
/* =========================================================
   FLASH SALE HEADER
   Responsive: 451px - 650px
========================================================= */

@media (min-width: 550px) and (max-width: 650px) {

    .hh-flashsale-header {
        width: 100%;
        max-width: 100%;
        min-width: 0;

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

        gap: 8px;

        box-sizing: border-box;
    }

    .hh-flashsale-left {
        min-width: 0;
        flex: 1 1 auto;

        display: flex;
        align-items: center;

        gap: 8px;
    }

    .hh-flashsale-title {
        flex: 0 1 auto;
        min-width: 0;

        display: flex;
        align-items: center;

        white-space: nowrap;
    }

    .hh-flashsale-title span {
        font-size: 15px;

        white-space: nowrap;
    }

    .hh-flashsale-countdown {
        flex: 0 1 auto;
        min-width: 0;

        display: flex;
        align-items: center;

        gap: 5px;

        white-space: nowrap;
    }
    #hh-flashsale-slider .hh-prev {
        left: 0;
    }

    #hh-flashsale-slider .hh-next {
        right: 0;
    }
    .hh-countdown-label {
        white-space: nowrap;
        font-size: 12px;
    }

    .hh-countdown-time {
        display: flex;
        align-items: center;

        white-space: nowrap;
    }

    .hh-countdown-time span {
        min-width: 22px;
        padding: 3px 4px;

        font-size: 12px;
        text-align: center;

        box-sizing: border-box;
    }

    .hh-countdown-time b {
        font-size: 12px;
        margin: 0 1px;
    }

    .hh-flashsale-viewall {
        flex: 0 0 auto;

        white-space: nowrap;

        font-size: 12px;
    }

}
/* =========================================================
   FLASH SALE HEADER
   Responsive: <= 450px
========================================================= */

@media (max-width: 549px) {

    .hh-flashsale-header {
        width: 100%;
        max-width: 100%;
        min-width: 0;

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

        gap: 6px;

        box-sizing: border-box;
    }

    .hh-flashsale-left {
        min-width: 0;
        flex: 1 1 auto;

        display: flex;
        flex-direction: column;
        align-items: flex-start;

        gap: 3px;
    }

    .hh-flashsale-title {
        white-space: nowrap;
    }

    .hh-flashsale-title span {
        font-size: 14px;
    }

    .hh-flashsale-countdown {
        display: flex;
        align-items: center;

        gap: 4px;

        white-space: nowrap;
    }

    .hh-countdown-label {
        font-size: 11px;
    }

    .hh-countdown-time span {
        min-width: 20px;
        padding: 2px 3px;

        font-size: 11px;
    }

    .hh-countdown-time b {
        font-size: 11px;
        margin: 0 1px;
    }

    .hh-flashsale-viewall {
        flex: 0 0 auto;

        white-space: nowrap;

        font-size: 11px;
    }

}
@media (max-width:500px) {

    .inrightbanneradvhomenerversion
    .itemadvhomenewversion.active {

        display:block !important;

        opacity:1 !important;

        visibility:visible !important;

        pointer-events:auto !important;

        z-index:2 !important;
    }
     /* =====================================================
       WRAPPER
    ===================================================== */

    .tabkhuyenmaiintopmenumb {

        display: block;

        width: 100%;

        margin: 0;

        padding: 5px 6px;

        box-sizing: border-box;

        overflow: hidden;
    }


    /* =====================================================
       3 TAB CONTAINER
    ===================================================== */

    .hh-mobile-quick-tabs {

        display: flex;

        flex-direction: row;

        flex-wrap: nowrap;

        align-items: stretch;

        justify-content: stretch;

        width: 100%;

        gap: 6px;

        margin: 0;

        padding: 0;

        box-sizing: border-box;
    }


    /* =====================================================
       TAB
    ===================================================== */

    .hh-mobile-quick-tabs
    .intabkhuyenmaiintopmenumb {

        flex: 1 1 0;

        width: 0;

        min-width: 0;

        max-width: none;

        height: 64px;

        margin: 0;

        padding: 0;

        display: flex;

        align-items: stretch;

        justify-content: stretch;

        box-sizing: border-box;

        background: #fff;

        border: 1px solid #e8e8e8;

        border-top-width: 3px;

        border-radius: 10px;

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

        overflow: hidden;

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


    /* =====================================================
       3 MÀU NHẬN DIỆN
    ===================================================== */

    .hh-mobile-quick-tabs
    .intabkhuyenmaiintopmenumb:nth-child(1) {
        border-top-color: #d70018;
    }

    .hh-mobile-quick-tabs
    .intabkhuyenmaiintopmenumb:nth-child(2) {
        border-top-color: #f7913b;
    }

    .hh-mobile-quick-tabs
    .intabkhuyenmaiintopmenumb:nth-child(3) {
        border-top-color: #555;
    }


    /* =====================================================
       TAB CONTENT
    ===================================================== */

    .hh-mobile-quick-tabs
    .intabkhuyenmaiintopmenumb
    .divtabkm {

        width: 100%;

        height: 100%;

        margin: 0;

        padding: 5px 4px;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        box-sizing: border-box;

        text-align: center;
    }


    /* =====================================================
       ICON
    ===================================================== */

    .hh-mobile-quick-tabs
    .divtabkmimg {

        width: 24px;

        height: 24px;

        margin: 0 0 3px;

        padding: 0;

        display: flex;

        align-items: center;

        justify-content: center;

        flex: 0 0 auto;

        box-sizing: border-box;
    }

    .hh-mobile-quick-tabs
    .divtabkmimg img {

        display: block;

        width: 22px;

        height: 22px;

        max-width: 100%;

        max-height: 100%;

        object-fit: contain;
    }


    /* =====================================================
       TITLE
    ===================================================== */

    .hh-mobile-quick-tabs
    .titletabkm {

        width: 100%;

        min-width: 0;

        margin: 0;

        padding: 0;

        text-align: center;

        overflow: hidden;

        box-sizing: border-box;
    }

    .hh-mobile-quick-tabs
    .titletabkm a {

        display: -webkit-box;

        width: 100%;

        margin: 0;

        padding: 0;

        color: #222;

        font-size: 10px;

        font-weight: 700;

        line-height: 12px;

        text-align: center;

        text-decoration: none;

        white-space: normal;

        overflow: hidden;

        text-overflow: ellipsis;

        -webkit-line-clamp: 2;

        -webkit-box-orient: vertical;
    }
}
@media (max-width:499px) {
    .tabkhuyenmaiintopmenumb {
        display: block !important;
    }
    .inrightbanneradvhomenerversion
    .itemadvhomenewversion {
        display:block !important;
    }

    .inrightbanneradvhomenerversion
    .itemadvhomenewversion:not(.active) {
        opacity:0 !important;
        visibility:hidden !important;
        pointer-events:none !important;
        z-index:1 !important;
    }

    .inrightbanneradvhomenerversion
    .itemadvhomenewversion.active {
        opacity:1 !important;
        visibility:visible !important;
        pointer-events:auto !important;
        z-index:2 !important;
    }
 /* ==============================================
       BỎ HẲN TAB CHỮ
    ============================================== */

    .listtabitembannerhomenewversion {
        display: none !important;
    }
     .menumobileV1{
        display: none !important;
    }
    /* ==============================================
       DOT WRAPPER
    ============================================== */

    .hh-home-banner-dots {

        display: flex;

        width: 100%;
        height: 22px;

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

        gap: 6px;

        margin-top: 4px;

        box-sizing: border-box;
    }

    .hh-home-banner-dot {
        display: block;
        width: 7px;
        height: 7px;
        padding: 0;
        margin: 0;
        border: none;
        border-radius: 50%;
        background: #d5d5d5;
        cursor: pointer;
        transition:
            width .25s ease,
            background-color .25s ease,
            transform .2s ease;
    }

    .hh-home-banner-dot.active {

        width: 20px;
        height: 7px;

        background: #d70018;

        border-radius: 10px;
    }

    .hh-home-banner-dot:hover {
        background: #f7913b;
    }


    /* ==============================================
       BANNER WRAPPER
    ============================================== */

    .inrightbanneradvhomenerversion {

        width: 100%;

        aspect-ratio: 16 / 8.2;

        height: auto !important;

        min-height: 0;

        overflow: hidden;

        border-radius: 12px;
    }


    /* ==============================================
       SLIDE
    ============================================== */

    .itemadvhomenewversion,
    .itemadvhomenewversion.active {

        width: 100%;
        height: 100%;
    }


    .itemadvhomenewversion img {

        display: block;

        width: 100%;
        height: 100%;

        object-fit: cover;
    }
}
@media (max-width: 480px) {

    .inrightbanneradvhomenerversion {
        aspect-ratio: 16 / 8;
    }

    .listtabitembannerhomenewversion,
    .inlisttabitembannerhomenewversion {
        height: 48px;
    }

    .tabitembannerhomenv,
    .tabitembannerhomenv > div {
        height: 48px;
    }

    .tabitembannerhomenv span {
        font-size: 10px;
        line-height: 14px;
    }

}
@media (max-width: 380px) {

    .inrightbanneradvhomenerversion {
        aspect-ratio: 16 / 8.5;
    }

    .tabitembannerhomenv {
        flex-basis: 33.333%;
        min-width: 33.333%;
    }
       .hh-featured-category {
        padding-left: 6px;
        padding-right: 6px;
    }

    .hh-featured-grid {
        gap: 5px;
    }

    .hh-featured-item {

        flex-basis: 80px;

        width: 80px;
        min-width: 80px;

        height: 78px;
    }

    .hh-featured-image {
        width: 34px;
        height: 34px;
    }

    .hh-featured-image img {
        width: 32px;
        height: 32px;
    }

    .hh-featured-name {
        font-size: 10px;
    }
     .tabkhuyenmaiintopmenumb {

        padding: 4px 5px;
    }

    .hh-mobile-quick-tabs {

        gap: 5px;
    }

    .hh-mobile-quick-tabs
    .intabkhuyenmaiintopmenumb {

        height: 60px;
    }

    .hh-mobile-quick-tabs
    .divtabkm {

        padding: 4px 3px;
    }

    .hh-mobile-quick-tabs
    .divtabkmimg {

        width: 21px;

        height: 21px;

        margin-bottom: 2px;
    }

    .hh-mobile-quick-tabs
    .divtabkmimg img {

        width: 20px;

        height: 20px;
    }

    .hh-mobile-quick-tabs
    .titletabkm a {

        font-size: 9px;

        line-height: 11px;
    }
}