/* === MAIN BAR WRAPPER === */
.mocas-header-main-bar {
	background: rgba(1, 61, 90);
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 24px;
	height: 64px;
	position: sticky;
	top: 0;
	z-index: 999;
	box-shadow: 0 1px 10px 0 rgba(84, 84, 83, 0.9);
}

.mocas-main-menu {
	display: flex;
	align-items: center;
	gap: 24px;
}

/*DROPDOWN MENU*/
/**WRAPPER**/
.menu-dropdown {
	position: relative;
}

.menu-dropdown::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 12px;
}

/**LABEL**/
.menu-dropdown__label {
	cursor: pointer;
}

/**MENU**/
.menu-dropdown__menu {
	position: absolute;
	top:120%;
	left: 0;
	min-width: 180px;
	
	background: rgba(1, 61, 90, 1);
	border-radius: 5px;
	padding: 15px 0;
	
	opacity: 0;
	transform: translateY(10px);
	pointer-events: none;
	
	transition: all 0.25s ease;
	z-index: 99;
}

.menu-dropdown__menu a {
	display: block;
	padding: 10px 10px;
}

/**HOVER**/
.menu-dropdown:hover .menu-dropdown__menu {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/**ACTIVE STATE**/
.menu-dropdown.active > .menu-dropdown__label {
	
}

/* === CỘT CHUNG === */
.mocas-header-column {
  	display: flex;
	align-items: center;
}

/* === LEFT: LOGO === */
.mocas-header-main-bar-left {
	flex: 0 0 auto;
}

.mocas-header-main-bar-left .mocas-logo {
	max-height: 75px;
}

.mocas-header-main-bar-left img {
	height: 75px;
	width: auto;
	display: block;
}

/* === MIDDLE: MENU === */
.mocas-header-main-bar-middle {
  	flex: 1;
	justify-content: center;
  	gap: 32px;
}

.mocas-header-main-bar-middle a,.mocas-header-main-bar-middle span {
	color: rgba(252, 243, 227, 0.95);
	text-decoration: none;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.08rem;
	text-transform: uppercase;
	position: relative;
	/*padding: 15px;*/
}

.mocas-header-main-bar-middle a::after {
  	content: "";
  	position: absolute;
  	left: 0;
  	bottom: -6px;
  	width: 0;
  	height: 2px;
  	background: rgba(252, 243, 227, 0.65);
  	transition: width 0.3s ease;
}



.mocas-header-main-bar-middle a.active::after {
  	width: 100%;
}

.mocas-header-main-bar-middle a:hover::after {
	background: rgba(252, 243, 227, 1);
	width: 100%;
}

/* === RIGHT: ICON / SOCIAL === */
.mocas-header-main-bar-right {
  	flex: 0 0 auto;
	gap: 16px;
}

.mocas-header-main-bar-right a {
	color: #cfcfcf;
	font-size: 18px;
	text-decoration: none;
}

.mocas-header-main-bar-right a:hover {
	
}

/**MOBILE DRAWER CSS**/
/* HAMBURGER */
.hamburger {
	display: none;
	font-size: 24px;
	cursor: pointer;
	color: #f0f0f3;
}

.mobile-drawer {
	display: none;
	color: #f0f0f3;
}

@media (max-width: 768px) {

  .mocas-header-main-bar-middle,
  .mocas-header-main-bar-right {
    display: none;
  }

  .hamburger {
    display: block;
  }
	

  
  .mobile-drawer {
    position: fixed;
    top: 0;
    right: -260px;
    width: 260px;
    height: 100vh;

	background: rgba(225, 225,225, 0.2);
    padding: 20px;
	backdrop-filter: blur(10px);
	  
	

    display: flex;
    flex-direction: column;
    gap: 16px;

    transition: right 0.3s ease;
    z-index: 999;
  }

  .mobile-drawer a {
    color: #eee;
    text-decoration: none;
    font-size: 16px;
  }

  .mobile-drawer.open {
    right: 0;
	box-shadow: 
		2px 0 10px 0 rgba(225, 225, 225, 1),
		inset 1px 0 3px 0 rgba(0,0,0,0.75),
		inset 2px 0 3px 0 rgba(225,225,225,1);
  }
  .mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
	 
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 998;
}

  .mobile-overlay.show {
    opacity: 1;
    pointer-events: auto;
}

}

/* ===== FORCE RESET MOBILE DRAWER SUBMENU ===== */

.mobile-drawer .drawer-group {
  display: block !important;
}

.mobile-drawer .drawer-toggle {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  cursor: pointer;
}

/* LOCK SUBMENU */
.mobile-drawer .drawer-submenu {
  display: block !important;
  max-height: 0 !important;
  overflow: hidden !important;
  padding-left: 16px !important;
  transition: max-height 0.3s ease !important;
}

/* FORCE LINK COLUMN */
.mobile-drawer .drawer-submenu a {
  display: block !important;
  width: 100% !important;
  padding: 10px 0 !important;
}

/* OPEN SUBMENU */
.mobile-drawer .drawer-group.open .drawer-submenu {
  max-height: 200px !important;
}

/* ROTATE ARROW */
.mobile-drawer .drawer-group.open .arrow {
  transform: rotate(180deg);
}

.mobile-drawer .arrow {
  transition: transform 0.25s ease;
}