/*==================================================
HongHa UI2026
Module : M02.01.01.03.02
Category Dropdown UI2026
==================================================*/

/*==================================================
Container
==================================================*/

.hh-header__category{
    position:relative;          
}
.hh-header__category .hh-header-danhmucsptilte{
    background-color:#fff;
    color:#333;
    border:0px;
    border-radius:8px; height:48px;
    transition:.2s;
}
    .hh-header__category .hh-header-danhmucsptilte span {
    text-transform:uppercase;
    }
.hh-header__category .hh-header-danhmucsptilte:hover{
    
}
.hh-header-danhmucsptilte {
   padding: 15px 0;    
    text-align:center;    
    color: #333;
    width:100%;
}
    .hh-category-toggle__icon {
        margin-left:3px;
        color: #3e3e3e;
        font-size: 16px;
    }
/*==================================================
Dropdown
==================================================*/

.hh-category-dropdown{
    position:absolute;    
    left:0;
    display:none;
    width:260px;  
    z-index:10000;  overflow:visible;

}

.hh-header__category:hover .hh-category-dropdown{

    display:block;

} 

/*==================================================
Category List
==================================================*/

.hh-category-list{

    margin:0;
    padding:8px 0;
    list-style:none;
    background:#f2f2f2;
    box-shadow:0 10px 30px rgba(0,0,0,.12);

    overflow:visible;

}

/*==================================================
Item
==================================================*/

.hh-category-item{
   display:flex;    
    list-style:none;
    overflow:visible;  position:relative;       
    align-items:center;
        
    transition:background .18s,box-shadow .18s,transform .18s;
    cursor:pointer;
}

.hh-category-item:hover{

    background:#fff; border-radius:8px 0 0 8px;
    box-shadow:0 2px 10px rgba(0,0,0,.06);   transform:translateX(2px);
    z-index:5;

}
.hh-category-item:hover .hh-category-title a{

    color:#dd1f34;

    font-weight:600;

}
.hh-category-arrow{

    margin-left:auto;

    transition:.2s;

}

.hh-category-item:hover .hh-category-arrow{

    transform:translateX(3px);

}
.hh-category-item::after{

    /*content:"";

    position:absolute;

    top:0;

    right:-14px;

    width:18px;

    height:100%;

    background:#fff;

    opacity:0;

    transition:.15s; */

}
.hh-category-item:hover::after{

    opacity:1;

}
/*==================================================
Category Link
==================================================*/

.hh-category-link{
    position:relative;
    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

    height:36px;

    padding:0 12px;

    text-decoration:none;

    color:#333;

    transition:.25s;

}
 .hh-category-content{    
        flex:1;    
    display:flex;
    align-items:center;       
    min-width:0;
    
}
/*.hh-category-item:hover .hh-mega-menu{
    display:grid;
}*/
/*==================================================
Icon
==================================================*/

.hh-category-icon{

    width:22px;
    min-width:22px;

    height:22px;

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

    margin-right:6px;

}

.hh-category-icon img{

     width:20px;
    height:20px;

    object-fit:contain;

}

/*==================================================
Title
==================================================*/

.hh-category-title{

    flex:1;

    overflow:hidden;

    white-space:nowrap;

    text-overflow:ellipsis;

    font-size:14px;

    line-height:20px;

}

.hh-category-title a{

    color:#333;

    text-decoration:none;

}

.hh-category-title a:hover{

    color:#D71920;

}

/*==================================================
Arrow
==================================================*/

.hh-category-arrow{

    width:16px;

    display:flex;

    justify-content:center;

    align-items:center;
   display:none;
}

.hh-category-arrow img{

    width:12px;

    opacity:.45;

}

.hh-category-item:hover .hh-category-arrow img{

    opacity:1;

}

/*==================================================
Mega Menu
==================================================*/

.hh-mega-menu{
    position:absolute;     
    left:100%;
    top:auto;    
    min-width:286px;
    max-height:368px;
    background:#fff;

    border:1px solid #ececec;

    border-radius:0 14px 14px 14px;

    box-shadow:0 10px 35px rgba(0,0,0,.15);

    display:none;

    grid-template-columns:repeat(4,1fr);

    gap:28px;

    padding:28px;
    overflow-y:scroll;

}


/*==================================================
Column
==================================================*/

.hh-mega-column{
    min-width:180px;
    padding-bottom:8px;
    margin-bottom:8px;
    border-bottom:1px solid #f2f2f2;
}

/*==================================================
Title
==================================================*/

.hh-mega-title{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:14px;

    padding-bottom:10px;

    border-bottom:1px solid #f0f0f0;

}

.hh-mega-title>a:first-child{

    font-size:15px;

    font-weight:700;

    color:#222;

    text-decoration:none;

}

.hh-view-all{

    font-size:13px;

    color:#e30019;

    text-decoration:none;
}

/*==================================================
Links
==================================================*/

.hh-mega-links{

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:8px 18px;

}

.hh-mega-link{

    display:block;

    color:#555;

    text-decoration:none;

    font-size:14px;

    transition:.2s;

}

.hh-mega-link:hover{

    color:#D71920;

    padding-left:4px;

}

/*==================================================
Scrollbar
==================================================*/

.hh-category-list{
    max-height:568px;
}

.hh-category-list::-webkit-scrollbar{

    width:6px;

}

.hh-category-list::-webkit-scrollbar-thumb{

    background:#ddd;

    border-radius:20px;

}

/*==================================================
Mega Panel (UI2026)
==================================================*/

.hh-category-dropdown{
    
    width:260px;
}

.hh-mega-panel{

    position:absolute;

    left:100%;

    top:0;

    min-width:568px;

    max-height:568px;
    display:none;
    background:#fff;
    box-shadow:0 10px 35px rgba(0,0,0,.15);
    padding:20px;
    box-sizing:border-box;
    overflow-y:auto;
    z-index:10001;
}
.hh-mega-panel.active{
    display:block;
}
.hh-mega-template{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:28px;
}