/* ===== NAV THEME SYSTEM =========================================
   Nav không chứa màu cụ thể. Mọi thứ đọc từ 3 biến.
   Layer 1: [data-nav-theme]  — do scroll quyết định
   Layer 2: :has(.w--open)    — menu mở, đè lên layer 1
   ================================================================ */

.navbar21_component {
  --nav-ease: cubic-bezier(.65, 0, .35, 1);
  --nav-dur: .45s;

  color: var(--nav-fg);
  background-color: var(--nav-bg);
  box-shadow: inset 0 -1px 0 0 var(--nav-line);
  border-bottom: 0;
  transition:
    color var(--nav-dur) var(--nav-ease),
    background-color var(--nav-dur) var(--nav-ease),
    box-shadow var(--nav-dur) var(--nav-ease);
}

/* ---- LAYER 1: theme theo section ---- */
.navbar21_component[data-nav-theme="dark"] {
  --nav-fg: #ffffff;
  --nav-bg: rgba(1, 19, 20, .01);
  --nav-line: rgba(255, 255, 255, .10);
}

.navbar21_component[data-nav-theme="light"] {
  --nav-fg: var(--color-scheme-1--black-green);
  --nav-bg: rgba(255, 255, 255, .01);
  --nav-line: rgba(1, 19, 20, .15);
}

/* ---- LAYER 2: menu mở. Không cần JS — bắt trực tiếp class
       .w--open mà Webflow tự gắn lên nav button ---- */
.navbar21_component:has(.w-nav-button.w--open) {
  --nav-fg: #ffffff;
  --nav-bg: var(--color-scheme-1--black-green);
  --nav-line: rgba(255, 255, 255, .10);
}

/* ---- Element con đọc chung biến ---- */
.navbar21_component .button.is-nav-cta {
  color: var(--nav-fg);
  transition: color var(--nav-dur) var(--nav-ease);
}

.navbar21_component .menu-icon4 {
  color: var(--nav-fg);
  border-left-color: var(--nav-line);
  transition: color var(--nav-dur) var(--nav-ease),
    border-color var(--nav-dur) var(--nav-ease);
}

.navbar21_component .navbar21_menu-dropdown {
  border-right-color: var(--nav-line);
  transition: border-color var(--nav-dur) var(--nav-ease);
}

/* 3 gạch hamburger — giữ nguyên cách làm bằng div, chỉ đổi nguồn màu */
.navbar21_component .menu-icon4_line-top,
.navbar21_component .menu-icon4_line-middle,
.navbar21_component .menu-icon4_line-middle-base,
.navbar21_component .menu-icon4_line-bottom {
  background-color: var(--nav-fg);
  transition: background-color var(--nav-dur) var(--nav-ease);
}

/* Panel mở luôn nền tối => nội dung bên trong luôn trắng,
   không dính theo theme của section phía sau */
.navbar21_component .navbar21_menu {
  --nav-fg: #ffffff;
}

/* Chống nhảy layout khi khoá scroll lúc mở menu */
html {
  scrollbar-gutter: stable;
}

@media (prefers-reduced-motion: reduce) {

  .navbar21_component,
  .navbar21_component * {
    transition-duration: .01ms !important;
  }
}