.navbar{
	display:flex;
  justify-content:space-between;
  align-items:center;
  background:#f4f4f4;
  position:relative;
  margin-bottom: unset;
  border-radius: unset;
  z-index: 9999;
}

.logo {
	position: relative;
	left: 0;

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

/* cấp 1 */
.nav-links{
	list-style:none;
	justify-content: center;
	display:flex;
	gap:20px;
	margin:0;
	padding:0;
	margin-left: 20px;
}
.nav-links>li{
	position:relative;
}
.nav-links a{
  color:#146076;
  text-decoration:none;
  font-weight:500;
  padding:8px 15px;
  border-radius:6px;
  display:flex;
  align-items:center;
  gap:10px;
  min-height:40px;
  transition:background .2s,color .2s;
}
.nav-links a:hover{
	background:#146076;
	color:#fff;
}

/* mũi tên nằm cuối bên phải */
.arrow{
	margin-left:auto;
	display:inline-block;
	transition:transform .25s ease;
}

/* ====== Dropdown cấp 2 (căn mép phải, không tạo gap) ====== */
.dropdown{
  position:absolute;
  top:100%;
  right:0; /* căn phải */
  min-width:200px;
  list-style:none;
  margin:0;
  padding:0px 0;
  background:rgba(244,244,244,.98);
  border-radius:unset;
  box-shadow:0 12px 26px rgba(0,0,0,.18);
  /* Ẩn/hiện mượt, không dùng display:none để tránh mất hover */
  visibility:hidden;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s;
  pointer-events:none; /* tránh bắt chuột khi ẩn */
  z-index:1000;
}
.dropdown>li{
	position:relative;
}
.dropdown a{
	padding:10px 14px;
	white-space:nowrap;
}

/* Hover vào li cấp 1 => hiện dropdown, mũi tên quay xuống */
.nav-links>li:hover>.dropdown{
  visibility:visible;
  opacity:1;
  transform:translateY(0);
  transition-delay:0s;
  pointer-events:auto;
}
.nav-links>li:hover>a .arrow{
	transform:rotate(180deg);
} /* ▼ */

/* ====== Dropdown cấp 3 (mở ngang sang trái, căn mép phải) ====== */
.dropdown-sub{
  position:absolute;
  top:0;
  right:100%; /* mở sang trái, sát mép phải của cấp 2 */
  min-width:200px;
  margin:0;
  padding:0px 0;
  list-style:none;
  background:rgba(244,244,244,.98);
  border-radius:unset;
  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;
}
.dropdown>li:hover>.dropdown-sub{
  visibility:visible;
  opacity:1;
  transform:translateX(0);
  transition-delay:0s;
  pointer-events:auto;
}
.dropdown>li:hover>a .arrow{
	transform:rotate(-90deg);
} /* ▶ quay sang trái */

/* ====== Burger / Mobile ====== */
.burger{
	display:none;
	font-size:28px;
	color:#146076;
	cursor:pointer;
}

.icbm-menu.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #f4f4f4; /* nên set nền để không trong suốt */
  box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* đổ bóng nhẹ */
  z-index:9999;
}

/* Mobile styles */
@media (max-width:768px){
  .burger{
	display:block;
	}
  .nav-links{
    position:absolute;
	right:0;
	top:100%;
	width:100%;
    flex-direction:column;
	background:#fff;
	padding:10px 12px;
	gap:6px;
    display:none;
	z-index:999;
  }
  .nav-links.active{
	  display:flex;
	  }

  /* Biến dropdown thành accordion mượt trên mobile */
  .dropdown, .dropdown-sub{
    position:static;
	right:auto;
	top:auto;
	box-shadow:none;
	border-radius:8px;
    background:rgba(245,245,245,0.96);
	padding:0 0 0 10px;
    visibility:visible;
	opacity:1;
	transform:none;
	pointer-events:auto;
    max-height:0;
	overflow:hidden;
	transition:max-height .25s ease;
  }
  /* mở cấp 2 */
  .nav-links li.open > .dropdown{
	  max-height:1000px;
	  }
  /* mở cấp 3 */
  .dropdown li.open > .dropdown-sub{
	  max-height:1000px;
	  }

  /* mũi tên quay khi mở */
  .nav-links li.open > a .arrow{
	  transform:rotate(180deg);
	  }
  .dropdown li.open > a .arrow{
	  transform:rotate(90deg)
	  }
}