.topnav {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;  /* สำคัญ! */
  background: #20232c;
  color: #fff;
  padding: 0 1.3rem;
  min-height: 60px;
  position: sticky;
  top: 0;
  z-index: 999;
  box-shadow: 0 2px 16px rgba(44,54,80,0.07);
}

.nav-title {
  font-size: 1.16rem;
  font-weight: bold;
  letter-spacing: 0.01em;
}

/* กลุ่มขวาสุด */
.nav-right {
  display: flex;
  align-items: center;
  gap: 0.4em;
  margin-left: auto;
}

.user-h-group {
  display: flex;
  align-items: center;
  gap: 0.45em;
  background: #242631;
  border-radius: 22px;
  padding: 0.31em 1em 0.31em 0.8em;
  box-shadow: 0 2px 8px rgba(60,60,60,0.02);
  min-width: 94px;
  height: 2.2em;
}

.user-icon {
  width: 1.15em;
  height: 1.15em;
  vertical-align: middle;
  stroke: #ffd88d;
  opacity: 0.89;
}

.user-name {
  font-size: 1.03rem;
  color: #ffd88d;
  font-weight: 500;
  letter-spacing: 0.01em;
  margin: 0;
  background: none;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}

.hamburger {
  background: none;
  border: none;
  outline: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  z-index: 1002;
  margin-left: 0.7em;
}

.hamburger span {
  width: 27px;
  height: 3.1px;
  background: #ffbc00;
  border-radius: 3px;
  display: block;
  transition: 0.18s;
}

.menu-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(25,28,37,0.94);
  z-index: 1001;
  display: none;
  align-items: flex-start;
  justify-content: flex-end;
  animation: fadeIn 0.18s;
}
.menu-overlay.active {
  display: flex;
  animation: fadeIn 0.18s;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.menu-content {
  min-width: 220px;
  max-width: 80vw;
  background: #232537;
  border-radius: 0 0 18px 18px;
  margin-top: 0;
  margin-right: 0;
  padding: 2em 0.6em 1em 0.6em;
  box-shadow: 0 8px 38px rgba(80,60,80,0.14);
  display: flex;
  flex-direction: column;
  gap: 0.38em;
  position: relative;
  height: 100vh;
}
.close-menu {
  position: absolute;
  right: 14px;
  top: 10px;
  background: none;
  border: none;
  font-size: 2.2em;
  color: #ffbc00;
  cursor: pointer;
}
.menu-link {
  display: flex;
  align-items: center;
  gap: 0.68em;
  color: #f7eab2;
  text-decoration: none;
  font-size: 1.14em;
  font-weight: 500;
  padding: 1em 1.2em 1em 0.7em;
  border-radius: 12px;
  margin: 0.19em 0;
  background: none;
  border: none;
  transition: background .13s, color .16s;
  cursor: pointer;
}
.menu-link:hover,
.menu-link.active {
  background: #2d3044;
  color: #ffbc00;
}
.logout-btn {
  color: #ef5757;
  justify-content: flex-start;
}
.logout-btn:hover {
  background: #2c1920;
  color: #fff;
}
/* Responsive: เล็กลง */
@media (max-width: 600px) {
  .menu-content { min-width: 145px; }
  .user-h-group { gap: 0.32em; }
  .user-name { font-size: 0.97rem; padding: 0.31em 0.78em; }
  .nav-title { font-size: 1.01rem; }
}

.nav-title {
  font-size: 1.16rem;
  font-weight: bold;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: #fff;
  transition: color 0.16s;
  outline: none;
  padding: 0.14em 0.3em;
  border-radius: 8px;
}
.nav-title:hover,
.nav-title:focus {
  color: #ffbc00;
  background: #181b20;
}