.navbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 20px;
  background:#0b5ed7;
  color:#fff;
}

.logo { height:40px; }

/* CENTER MENU */
.nav-center a {
  margin:0 10px;
  color:#fff;
  text-decoration:none;
}

/* RIGHT */
.nav-right {
  display:flex;
  align-items:center;
  gap:12px;
}

.btn {
  background:#fff;
  color:#0b5ed7;
  padding:6px 10px;
  border-radius:4px;
}
.btn-outline {
  border:1px solid #fff;
  padding:6px 10px;
}

/* Notification */
.notify {
  position:relative;
  cursor:pointer;
}
.badge {
  position:absolute;
  top:-5px;
  right:-8px;
  background:red;
  color:#fff;
  font-size:10px;
  padding:2px 5px;
  border-radius:50%;
}

/* Profile */
.profile-wrapper {
  display:flex;
  align-items:center;
  position:relative;
  cursor:pointer;
}
.user-name { margin-right:6px; }

.avatar {
  width:38px;
  height:38px;
  border-radius:50%;
  background:#fff;
  color:#0b5ed7;
  display:flex;
  justify-content:center;
  align-items:center;
  font-weight:bold;
  overflow:hidden;
}
.avatar img {
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Dropdown */
.dropdown {
  display:none;
  position:absolute;
  top:48px;
  right:0;
  background:#fff;
  color:#000;
  border-radius:6px;
  min-width:140px;
}
.dropdown a {
  display:block;
  padding:10px;
}
.dropdown a:hover { background:#eee; }
.logout { color:red; }

.profile-wrapper:hover .dropdown {
  display:block;
}

/* Hamburger */
.hamburger {
  display:none;
  font-size:24px;
  cursor:pointer;
}

/* MOBILE */
@media(max-width:768px) {
  .nav-center {
    display:none;
    flex-direction:column;
    background:#0b5ed7;
    position:absolute;
    top:60px;
    left:0;
    width:100%;
  }
  .nav-center a {
    padding:10px;
    border-top:1px solid rgba(255,255,255,.3);
  }
  .hamburger { display:block; }
}