/* 
  ห้ามลบ

  nav {
  font-size: 0.95rem;
  margin: auto;
  display: grid;
  grid-template-columns: auto 20% 5%;
  padding: 5px 5px;
  align-items: center;
  gap: 0;
}
nav .nav-2{ grid-area: 1/1/2/3; justify-self: start;}
nav .nav-3{ grid-area: 1/3/2/4; justify-self: end;}
nav .nav-1{ grid-area: 2/1/3/4; justify-self: center; margin-top: 3px;} 
*/
nav {
  font-size: 0.95rem;
  margin: auto;
  display: flex;
  flex-wrap: wrap; 
  align-items: flex-start; 
  justify-content: space-between; 
  padding: 5px 5px;
  gap: 0;
}
nav .nav-1{ order: 1;}
nav .nav-2{ order: 2;}
nav .nav-3{ order: 3;}

/**** Nav Left ***/
nav .nav-1 .nav-link { margin-right: 0.5rem; }
nav .nav-1 select{ 
  border-radius: 3px;
  color: blue;
  width: auto;
  border: none;
  font-size: 0.75rem;
}


/*** dropdown ***/
nav .nav-3 {
  display: flex;
  position: relative;
}
.nav-dropdown-menu {
  display: none;
  position: absolute;
  right: 0;
  top: 1.5rem;
  background: #222;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  min-width: 200px;
  z-index: 9999;
  border-radius: 5px;
  overflow: hidden;
}
.nav-dropdown-menu .nav-link {
  display: block;
  color: #fff;
  border-radius: 0;
  text-align: left;
  line-height: 1.5rem;
  padding: 5px 10px 5px 10px;
}
.nav-dropdown-menu .nav-link:first-child { margin-top: 7px; }
.nav-dropdown-menu .nav-link:last-child { margin-bottom: 7px; }
.nav-dropdown-menu .nav-link:hover {
  background: #005646;
  color: #b0ffb0;
}
.nav-dropdown-toggle {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  /* padding: 0.5rem 0.7rem; */
  border-radius: 5px;
}
.nav-dropdown-toggle:focus {
  outline: none;
  background: #005646;
}

/*** nav-link : ทุกตัว ***/
.nav-link.active {
  color: lightskyblue;
  border-radius: 3px;
  font-weight: bold;
  text-decoration: none;
  pointer-events: none; 
}
.nav-link:hover { color: dodgerblue; }

nav a{ text-decoration: none; }
nav a:link { color: white; }
nav a:visited { color: white; }
nav a:hover { color: dodgerblue; }
nav a:active { color: white; } 


/* Responsive Design */
@media screen and (min-width: 768px) {  
  nav {
    font-size: 1rem;
    padding: 5px 0px;
  }
  nav .nav-1{ grid-area: 1/1/2/2; justify-self: start; margin-top: 0px;}
  nav .nav-2{ grid-area: 1/2/2/3; justify-self: center;}
  nav .nav-3{ grid-area: 1/3/2/4; justify-self: end;}

  nav .nav-1 select{ 
    font-size: 0.85rem;
  }
}



@media screen and (min-width: 1000px) {

}