/*
Theme Name: WESTERNTECH
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

/*
Css menu đa cấp cho Flatsome
*/
.nav-dropdown-default {
    padding: 0px;
}
.nav-dropdown .menu-item-has-children>a, .nav-dropdown .nav-dropdown-col>a, .nav-dropdown .title>a {
    font-size: 14px;
}
@media (min-width: 650px){
    header#header .nav-dropdown {
        display: block;
    }
    header#header .nav-dropdown ul.sub-menu {
        position: absolute;
        left: 100%;
        top: 0;
        background: #fff;
        width: 300px;
        padding: 0;
        display: none !important;
        border-radius: 5px;
        -webkit-box-shadow: 1px 1px 15px rgb(0 0 0 / 15%);
        box-shadow: 1px 1px 15px rgb(0 0 0 / 15%);
    }
    header#header .nav-dropdown ul.sub-menu a {
        white-space: normal;
        margin: 0;
        padding: 10px 15px;
        border: 0;
        font-weight: 300;
    }
    header#header .nav-dropdown li:hover > ul.sub-menu{
        display: block !important;
    }
    header#header .nav-dropdown li {
        border-right: 0;
        white-space: normal;
        width: 100%;
        display: block;
        position: relative;
    }
    header#header .nav-dropdown li.menu-item-has-children > a {
        font-weight: 300;
        text-transform: none;
        color: #333;
    }
    header#header .nav-dropdown li.active>a {
        color: #e82c2a;
    }
}

/* Thêm mũi tên xuống ở cuối mục menu đa cấp */
.menu-item-has-children.nav-dropdown-col::after {
    content:"\f105";
	font-family:fl-icons;
    font-size: 14px;
    color: #fff;
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
}
/* Thay đổi mũi tên khi mở submenu (hoặc hover) */
header#header .nav-dropdown li.menu-item-has-children {
    position: relative;
}

header#header .nav-dropdown li.menu-item-has-children > a::after {
    content:"\f105";
	font-family:fl-icons;
    font-size: 14px;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
    color: #333; /* Màu mũi tên */
}
/* Khi hover vào mục có submenu, mũi tên sẽ xoay xuống */
header#header .nav-dropdown li.menu-item-has-children:hover > a::after {
    transform: translateY(-50%) rotate(90deg);
}

/* Khi hover vào menu chính sẽ đổi màu*/

/*header#header .nav-dropdown li.menu-item a:hover{
	color: #ffffff;
	background-color: #CDDAFF;
}*/

/* Mũi tên phải cho các submenu con */
header#header .nav-dropdown li.menu-item-has-children > ul.sub-menu li.menu-item-has-children > a::after {
    content:"\f105";
	font-family:fl-icons;
    font-size: 14px;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
    color: #333;
}

/* Khi hover vào submenu con, mũi tên xoay để chỉ submenu con mở */
header#header .nav-dropdown li.menu-item-has-children > ul.sub-menu li.menu-item-has-children:hover > a::after {
    transform: translateY(-50%) rotate(90deg);
}


@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}