/**
* Menu đa cấp dạng fly-out cho header của Flatsome (#masthead)
* Menu cấp 1 hiển thị trên 1 cột, di chuột vào mục có menu con sẽ hiển thị cấp tiếp theo sang bên phải
*/
@media (min-width: 850px) {
#masthead .header-nav .nav-dropdown {
display: block;
width: auto;
min-width: 240px;
padding: 10px 0;
}
#masthead .header-nav .nav-dropdown li,
#masthead .header-nav .nav-dropdown > li.nav-dropdown-col {
display: block;
position: relative;
width: auto;
min-width: 0;
margin: 0;
border: 0;
white-space: nowrap;
}
#masthead .header-nav .nav-dropdown li > a,
#masthead .header-nav .nav-dropdown .menu-item-has-children > a,
#masthead .header-nav .nav-dropdown .nav-dropdown-col > a {
display: block;
position: relative;
margin: 0;
padding: 10px 35px 10px 20px;
border-bottom: 1px solid #ececec;
color: rgba(74, 74, 74, .85);
font-size: 1em;
font-weight: normal;
line-height: 1.3;
text-transform: none;
}
#masthead .header-nav .nav-dropdown li:last-child > a {
border-bottom: 0;
}
#masthead .header-nav .nav-dropdown li:hover > a,
#masthead .header-nav .nav-dropdown li:focus-within > a {
background-color: rgba(0, 0, 0, .04);
color: hsla(0, 0%, 7%, .85);
}
/* mũi tên báo hiệu có menu con */
#masthead .header-nav .nav-dropdown li.menu-item-has-children > a::after {
content: "";
position: absolute;
top: 50%;
right: 18px;
width: 6px;
height: 6px;
margin-top: -3px;
border-top: 1px solid currentColor;
border-right: 1px solid currentColor;
transform: rotate(45deg);
opacity: .6;
}
/* menu cấp 2 trở đi: ẩn bằng visibility vì Flatsome ép display:block!important cho .active > ul.sub-menu */
#masthead .header-nav .nav-dropdown ul.sub-menu {
display: block;
position: absolute;
top: -10px;
left: 100%;
z-index: 10;
min-width: 240px;
margin: 0;
padding: 10px 0;
background-color: #fff;
box-shadow: 1px 1px 15px rgba(0, 0, 0, .15);
opacity: 0;
visibility: hidden;
transition: opacity .2s, visibility .2s;
}
#masthead .header-nav .nav-dropdown li:hover > ul.sub-menu,
#masthead .header-nav .nav-dropdown li:focus-within > ul.sub-menu {
opacity: 1;
visibility: visible;
}
/* danh sách dài thì cho cuộn, chỉ áp dụng cho cấp cuối để không cắt mất menu con bay ra ngoài */
#masthead .header-nav .nav-dropdown ul.sub-menu:not(:has(ul.sub-menu)) {
max-height: 75vh;
overflow-y: auto;
}
/* menu nằm bên phải header thì cho bay sang trái để không tràn màn hình */
#masthead .header-nav.nav-right .nav-dropdown ul.sub-menu {
left: auto;
right: 100%;
}
}