.fixed-nav-bar {
	position: absolute;

	min-height: 90px;

	top: 0;

	left: 0;

	right: 0;

	padding: 0 8%;

	box-sizing: border-box;

	background-color: transparent;

	z-index: 100;

	-webkit-backface-visibility: hidden;

	backface-visibility: hidden;

	transition: 0.35s ease;

	/* background-image: url(../img/bg-menu-trang-con.jpg); */

	background-repeat: no-repeat;

	background-size: cover;
}

.fixed-nav-bar.page-home {
	position: fixed;

	min-height: 100px;

	background-image: none;
}

.fixed-nav-bar .logo {
	position: absolute;

	left: 8%;

	top: 50%;

	transform: translateY(-50%);

	text-transform: uppercase;

	color: #ccc;

	cursor: pointer;

	max-width: 100%;

	object-fit: cover;
}

.fixed-nav-bar .logo span {
	color: #e78533;

	font-weight: 600;
}

.fixed-nav-bar.scrolled {
	min-height: 80px;

	background: #3f3f3f;

	position: fixed;
}

.box-menu {
	/* background: linear-gradient(198.87deg, #653e2cd9 0.67%, #c6803bd9 40.17%, #ecd69fd9 79.67%); */
	background: url("/wp-content/uploads/2024/08/bg-menu-2.png");
	background-size: cover;
	height: 100%;

	position: fixed;

	right: -360px;

	top: 0;

	-moz-transition: right 0.5s linear;

	-o-transition: right 0.5s linear;

	-webkit-transition: right 0.5s linear;

	transition: right 0.5s linear;

	width: 360px;

	z-index: 9001;
}
@media (max-width: 640px) {
	.box-menu {
		right: -100%;
		width: 100%;
	}
	.box-menu #menuToggle {
		width: 40px;
	}
	.box-menu #menuToggle span {
		width: 60%;
	}
}

.box-menu #menuToggle {
	background: transparent;

	display: block;

	position: relative;

	height: 40px;

	left: calc(-50px - 42%);

	top: 30px;

	width: 50px;

	font-size: 0;
}

.box-menu #menuToggle span {
	background: white;

	display: block;

	height: 6%;

	left: 10%;

	position: absolute;

	top: 45%;

	width: 80%;
}

.box-menu #menuToggle span:before,
.box-menu #menuToggle span:after {
	background: white;

	content: "";

	display: block;

	height: 80%;

	position: absolute;

	top: -400%;

	-moz-transform: rotate(0deg);

	-ms-transform: rotate(0deg);

	-webkit-transform: rotate(0deg);

	transform: rotate(0deg);

	width: 100%;
}

.box-menu #menuToggle span:after {
	top: 390%;
}

.box-menu.open #menuToggle {
	position: absolute;

	left: unset;

	right: 8%;
}

.box-menu.open {
	right: 0;
}

.open #menuToggle span {
	background: transparent;

	left: 10%;

	top: 45%;
}

.open #menuToggle span:before,
.open #menuToggle span:after {
	background: white;

	top: 0;

	-moz-transform: rotate(45deg);

	-ms-transform: rotate(45deg);

	-webkit-transform: rotate(45deg);

	transform: rotate(45deg);
}

.open #menuToggle span:after {
	-moz-transform: rotate(-45deg);

	-ms-transform: rotate(-45deg);

	-webkit-transform: rotate(-45deg);

	transform: rotate(-45deg);
}

#menuToggle .navClosed {
	-moz-transition: background 0.1s linear;

	-o-transition: background 0.1s linear;

	-webkit-transition: background 0.1s linear;

	transition: background 0.1s linear;
}

#menuToggle .navClosed:before,
#menuToggle .navClosed:after {
	-moz-transition: top 0.2s linear 0.1s, -moz-transform 0.2s linear 0.1s;

	-o-transition: top 0.2s linear 0.1s, -o-transform 0.2s linear 0.1s;

	-webkit-transition: top 0.2s linear, -webkit-transform 0.2s linear;

	-webkit-transition-delay: 0.1s, 0.1s;

	transition: top 0.2s linear 0.1s, transform 0.2s linear 0.1s;
}

#menuToggle .navOpen {
	-moz-transition: background 0.1s linear 0.2s;

	-o-transition: background 0.1s linear 0.2s;

	-webkit-transition: background 0.1s linear;

	-webkit-transition-delay: 0.2s;

	transition: background 0.1s linear 0.2s;
}

#menuToggle .navOpen:before,
#menuToggle .navOpen:after {
	-moz-transition: top 0.2s linear, -moz-transform 0.2s linear;

	-o-transition: top 0.2s linear, -o-transform 0.2s linear;

	-webkit-transition: top 0.2s linear, -webkit-transform 0.2s linear;

	transition: top 0.2s linear, transform 0.2s linear;
}

#header-menu {
	padding-top: 80px;

	padding-right: 8%;

	text-align: right;
}

#header-menu li {
	height: auto;

	width: 100%;

	transition: 0.3s ease;

	position: relative;

	min-height: 60px;
}

#header-menu li:not(:last-child)::before {
	position: absolute;

	content: "";

	width: 80%;

	right: 0;

	bottom: 5px;

	height: 4px;

	background-image: url(../img/line-menu.png);

	background-size: cover;

	background-repeat: no-repeat;
}

#header-menu li a {
	position: relative;

	font-size: 20px;

	color: #fff;

	padding-left: 20px;

	font-family: "SVN-Servetica";

	font-weight: 400;

	text-transform: uppercase;

	display: block;

	line-height: 40px;
}

#header-menu > li .sub-menu {
	display: none;
}

#header-menu > li.open-sub-menu .sub-menu {
	display: inline-block;
	margin: 5px 0 17px 0;
}
#header-menu > li.open-sub-menu .sub-menu > li {
	min-height: 30px;
}

#header-menu li a .fa-play {
	position: absolute;

	left: 20%;

	top: 50%;

	transform: translateY(-50%);

	transition: all 0.4s ease-in-out;
	font-size: 16px;
}

#header-menu li.open-sub-menu > a {
	color: #edd8a0;
}

#header-menu li a:hover {
	color: #edd8a0;
}

#header-menu li.open-sub-menu > .sub-menu li::before {
	content: none;
}

#header-menu li.open-sub-menu a .fa-play {
	transform: translateY(-50%) rotate(90deg);

	color: #edd8a0;
}

#header-menu .sub-menu li a {
	line-height: 40px;
	text-transform: none;
	font-weight: 100;
}

.box-menu.open #menuToggle img {
	transform: rotate(90deg);
	transition: 1s;
}

@media (max-width: 768px) {
	.box-menu #menuToggle {
		left: -70px;
		width: 40px;
	}

	.the-bass {
		width: 100%;

		top: 140px;
	}

	#header-menu li a {
		font-size: 16px;
	}

	.fixed-nav-bar.scrolled {
		position: fixed;
	}

	.fixed-nav-bar .logo {
		left: 50%;

		transform: translate(-50%, -50%);
	}
}


/* custom header language flag */
.custom_language-switcher {
	display: flex;
	justify-content: flex-start;	
	position: fixed;
	z-index: 999;
	top: 35px;
	left: 20px;
}

@media screen and (min-width: 969px) {
	.custom_language-switcher {
		display: flex;
		justify-content: flex-start;	
		position: fixed;
		z-index: 999;
		top: 35px;
		right: 200px;
		left: inherit;
	}
  }

.custom_language-switcher .item-flag {
	margin-right: 1rem;
}
.custom_language-switcher .item-flag:last-of-type {
	margin-right: 0;
}
.custom_language-switcher .img-flag {
	width: 22px;
	object-fit: cover;
}