/* =========================================
	NAVBAR
========================================= */

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

	background:#fff;

	position:relative;

	margin-bottom:unset;
	border-radius:unset;

	z-index:9999;
}

/* =========================================
	LOGO
========================================= */

.logo{
	position:relative;
	left:0;
}

.logo img{
	height:auto;
	max-height:50px;
	display:block;
}

/* =========================================
	MENU LEVEL 1
========================================= */

.nav-links{
	list-style:none;

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

	gap:20px;

	margin:0;
	padding:0;

	margin-left:20px;
}

.nav-links > li{
	position:relative;
}

/* =========================================
	MENU ITEM
========================================= */

.menu-item{
	display:flex;
	align-items:center;
	justify-content: space-between;
}


.menu-item > a{
	color:#db3832;
	text-decoration:none;
	font-weight:500;

	padding:8px 12px;

	display:flex;
	align-items:center;

	min-height:40px;

	transition:
	background .2s ease,
	color .2s ease;
}
.nav-links li a {
	padding: 8px 12px;
	color: #3d3d3d;
	text-decoration: none;
	font-weight: 500;
	min-height: 40px;
	transition: background .2s ease, color .2s ease;
}

.dropdown > li a {
	padding: 8px 12px;
	color: #3d3d3d;
	text-decoration: none;
	font-weight: 500;
	min-height: 40px;
	transition: background .2s ease, color .2s ease;
}

/* =========================================
	SUBMENU BUTTON
========================================= */

.submenu-toggle{
	border:none;
	background:none;

	cursor:pointer;

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

	padding:8px;

	min-width:36px;
	min-height:36px;

	color:#db3832;

	flex-shrink:0;

	-webkit-appearance:none;
	appearance:none;

	transition:
	background .2s ease,
	color .2s ease;
}

.nav-links a:hover {
	font-weight: bold;
}

/* =========================================
	HOVER
========================================= */

.menu-item > a:hover{
	font-weight: bold;
}

.arrow{
	display:inline-block;
	font-size:12px;
	transition:transform .25s ease;
}

/* =========================================
	DROPDOWN LEVEL 2
========================================= */

.dropdown{
	position:absolute;

	top:100%;
	right:0;

	min-width:220px;

	list-style:none;

	margin:0;
	padding-bottom: 20px;
	padding-top: 10px;

	background:#f4f4f4;

	box-shadow:0 12px 26px rgba(0,0,0,.18);

	visibility:hidden;
	opacity:0;

	transform:translateY(8px);

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

	pointer-events:none;

	z-index:1000;

}

.dropdown > li{
	position:relative;
}

.dropdown li{
	padding: 10px 14px;
	width:100%;
	white-space:nowrap;
}
.dropdown-sub li {
	padding: 10px 14px;
}


/* SHOW DROPDOWN */

.nav-links > li:hover > .dropdown{
	visibility:visible;
	opacity:1;

	transform:translateY(0);

	transition-delay:0s;

	pointer-events:auto;
}

/* ROTATE LEVEL 1 */

.nav-links > li:hover > .menu-item .arrow{
	transform:rotate(180deg);
}




/* =========================================
	DROPDOWN LEVEL 3
========================================= */

.dropdown-sub{
	position:absolute;

	top:0;
	left:100%;

	min-width:220px;

	margin:0;
	padding:0;

	list-style:none;

	background:#f4f4f4;

	box-shadow:0 12px 26px rgba(0,0,0,.18);

	visibility:hidden;
	opacity:0;

	transform:translateX(8px);

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

	pointer-events:none;

	z-index:1001;
}

/* SHOW LEVEL 3 */

.dropdown > li:hover > .dropdown-sub{
	visibility:visible;
	opacity:1;

	transform:translateX(0);

	transition-delay:0s;

	pointer-events:auto;
}

/* ROTATE LEVEL 3 */

.dropdown > li:hover > .menu-item .arrow{
	transform:rotate(90deg);
}

/* =========================================
	BURGER
========================================= */

.burger{
	display:none;

	font-size:28px;
	color:#3d3d3d;

	cursor:pointer;
}

/* =========================================
	FIXED MENU
========================================= */

.icbm-menu.fixed{
	position:fixed;

	top:0;
	left:0;

	width:100%;

	background:#fff;

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

	z-index:9999;

	animation:menuFade .25s ease;
}

@keyframes menuFade{

	from{
		transform:translateY(-100%);
		opacity:0;
	}

	to{
		transform:translateY(0);
		opacity:1;
	}

}

/* =========================================
	MOBILE
========================================= */

@media (max-width:768px){

	/* BURGER */

	.burger{
		display:block;
	}

	/* NAV */

	.nav-links{
		position:absolute;

		top:100%;
		right:0;

		width:100%;

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

		background:#fff;

		padding:10px 12px;

		gap:6px;

		display:none;

		z-index:999;
	}

	.nav-links.active{
		display:flex;
	}
	
	.nav-links > li {
		width: 100%;
	}

	/* MENU ITEM */

	.menu-item{
		width:100%;
		justify-content:space-between;
	}

	.menu-item > a{
		flex:1;
		width:100%;
	}

	/* MOBILE DROPDOWN */

	.dropdown,
	.dropdown-sub{
		position:static;

		width:100%;
		min-width:100%;

		box-shadow:none;

		background:#f5f5f5;

		padding-left:12px;

		visibility:visible;
		opacity:1;

		transform:none;

		pointer-events:auto;

		max-height:0;

		overflow:hidden;

		transition:max-height .25s ease;
	}

	/* OPEN LEVEL 2 */

	.nav-links li.open > .dropdown{
		max-height:1000px;
	}

	/* OPEN LEVEL 3 */

	.dropdown li.open > .dropdown-sub{
		max-height:1000px;
	}

	/* ROTATE MOBILE */

	.nav-links li.open > .menu-item .arrow{
		transform:rotate(180deg);
	}

	.dropdown li.open > .menu-item .arrow{
		transform:rotate(90deg);
	}


}



@media (max-width: 768px) {
    
    .mobile-menu .menu-items ul li ul li ul {
        display: none !important;
    }

    ul#nav.nav-links.active {
        display: flex !important;
        height: auto !important;
        max-height: 85vh !important; /* Giới hạn để không tràn quá màn hình phone */
        overflow-y: auto !important;  /* Nếu menu dài quá tự sinh thanh cuộn nội bộ */
        padding-bottom: 20px !important;
    }

    .nav-links .dropdown,
    .nav-links .dropdown-sub {
        position: static !important;
        width: 100% !important;
        min-width: 100% !important;
        box-shadow: none !important;
        background: #f9f9f9 !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;

        max-height: 0 !important;
        overflow: hidden !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin: 0 !important;
        transition: max-height .25s ease-in-out !important;
    }

    .nav-links .dropdown li {
        padding: 0 !important; 
        width: 100% !important;
    }

    .nav-links .dropdown li a {
        display: block !important;
        width: 100% !important;
        padding: 10px 14px 10px 30px !important; 
        border-bottom: 1px solid #eee !important;
        min-height: unset !important; /* Reset lại min-height cố định */
    }


    .nav-links li.open > .dropdown,
    .dropdown li.open > .dropdown-sub {
        max-height: 999px !important; 
        padding-top: 5px !important;   
        padding-bottom: 5px !important;
    }

    .nav-links li.open > .menu-item .arrow,
    .nav-links li.open > a .arrow {
        transform: rotate(180deg) !important;
        color: #db3832 !important;
    }
}
.container 
{
max-width: 1200px;
}