* {
      box-sizing: border-box;
    }
  .logo-mahidol{
      max-width:300px;
  }
  .logo-cdp{
      max-width: 150px;
  }
@media only screen and (max-width: 420px) {
  .logo-mahidol{
      max-width:200px;
  }
  .logo-cdp{
      max-width: 100px;
  }
}
    
 .navbar-wrapper { 
  display: flex;
  justify-content: center;  
  padding: 0px;
  z-index: 10000;
}
.navbar {
  display: flex;
  justify-content: center;
  align-items: center;  
  gap: 20px;
  padding: 10px 30px; 
}

.navbar > div {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white; 
  padding: 12px 0px;
  height: 100%;
}

.divider {
  width: 1px;              
  height: 20px!important;            
  background-color: white;  
  margin: 0 20px;          /
}
.dropdown {
  position: relative;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;  
  transform: translateX(-48%);  
  background-color: white;
  min-width: 250px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  border: 1px solid #ccc;
  z-index: 2000;
  text-align: left;
}
.dropdown-content div:hover {
 background:#f2f2f2;   
 cursor: pointer;
 cursor: hand;
}
.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown-content div {
  padding: 12px;
  border-bottom: 1px solid #eee;
  color: #333;
  white-space: nowrap;
}

.dropdown-content div:last-child {
  border-bottom: none;
}



.hcontainer{
    position: relative;
    padding:19px;
    z-index:110!important;
}
.logo-cdp{
    max-width: 120px;
}
 .logo-mahidol{
     max-width:250px;
 }