.site-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.site-header__inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--space-2) var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.site-header__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--font-size-lg);
  color: var(--color-text);
  text-decoration: none;
}

.site-header__brand,
.site-header__action .button {
  white-space: nowrap;
}

.site-header__logo {
  width: 36px;
  height: 36px;
}

.site-header__nav {
  display: flex;
  gap: var(--space-1);
  margin-left: auto;
}

.site-header__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target);
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  font-weight: 700;
  text-decoration: none;
  transition: background var(--duration-fast);
}

.site-header__link:hover,
.site-header__link[aria-current='page'] {
  background: var(--color-surface-muted);
  color: var(--color-text);
}

/* Khi thanh điều hướng ẩn (điện thoại), khối người dùng tự đẩy sang phải. */
.site-header__action {
  margin-left: auto;
}

.site-header__nav + .site-header__action {
  margin-left: 0;
}

.user-menu {
  position: relative;
  min-width: 0;
}

.user-menu__summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-target);
  padding: 0 var(--space-3);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}

.user-menu__summary::-webkit-details-marker {
  display: none;
}

/* Menu điều hướng rút gọn cho khách trên điện thoại (thanh điều hướng chính đã ẩn ở đó) — chỉ hiện icon ☰,
   không có tên/avatar vì khách chưa có tài khoản. Ẩn hẳn trên màn hình rộng vì thanh điều hướng chính đã đủ. */
.user-menu--compact {
  display: none;
}

.user-menu__summary--icon-only {
  justify-content: center;
  width: var(--touch-target);
  padding: 0;
  font-size: 20px;
}

.user-menu__summary:hover,
.user-menu[open] > .user-menu__summary {
  background: var(--color-surface-muted);
}

.user-menu__avatar {
  font-size: 20px;
}

.user-menu__name {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu__caret {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  transition: transform var(--duration-fast);
}

.user-menu[open] .user-menu__caret {
  transform: rotate(180deg);
}

.user-menu__panel {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  z-index: 30;
  width: 250px;
  max-width: calc(100vw - 2 * var(--space-4));
  padding: var(--space-2);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-lift);
}

.user-menu__list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.user-menu__logout {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

/* Ba liên kết chính chỉ hiện khi thanh điều hướng ở đầu trang bị ẩn (điện thoại). */
.user-menu__list--main {
  display: none;
}

.user-menu__logout {
  margin-bottom: 0;
}

.user-menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--touch-target);
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-text);
  font: inherit;
  font-weight: 700;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.user-menu__item:hover,
.user-menu__item:focus-visible {
  background: var(--color-surface-muted);
}

.user-menu__item--button {
  color: var(--color-wrong);
}

.user-menu__cta {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

.user-menu__cta .button {
  width: 100%;
}

@media (max-width: 640px) {
  .site-header__nav {
    display: none;
  }

  .site-header__nav + .site-header__action {
    margin-left: auto;
  }

  .site-header__brand {
    font-size: var(--font-size-md);
  }

  .user-menu__name {
    max-width: 110px;
    font-size: var(--font-size-sm);
  }

  .user-menu__list--main {
    display: grid;
    margin-bottom: var(--space-2);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border);
  }

  .user-menu--compact {
    display: block;
  }

  /* "Vào lớp" chuyển vào trong menu ☰ ở màn hình hẹp, khỏi chiếm chỗ ngoài thanh đầu trang.
     Cần 2 lớp (.guest-cta.button) để thắng độ ưu tiên của .button trong button.css (nạp sau header.css). */
  .guest-cta.button {
    display: none;
  }
}

/* Màn hình rất hẹp: menu chỉ giữ avatar và mũi tên để còn chỗ cho logo và nút đổi giao diện. */
@media (max-width: 420px) {
  .user-menu__name {
    display: none;
  }

  .site-header__inner {
    gap: var(--space-2);
  }
}

/* Nút đổi giao diện sáng/tối (bước B12) */
.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: var(--touch-target);
  height: var(--touch-target);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-size: 20px;
  cursor: pointer;
}

.theme-toggle:hover {
  background: var(--color-surface-muted);
}