/* NUT-232: nút chọn ngôn ngữ cho trang chủ và demo tĩnh (landing.css). Cùng quy tắc với khối NUT-225 trong seo.css (nguồn thiết kế:
   .jc-docs/design/NUT-225/design.md); seo.css dùng biến --sp-*, landing.css không có nên ở đây ghi thẳng 4/8/12 px.
   Chỉ được nạp khi trang có nút (trang Anh không có bản dịch live không nạp file này). Sửa khối bên seo.css thì sửa cả bên này. */

/* NUT-225 (D-14): chọn ngôn ngữ ở góc phải header, chỉ trên trang có cụm hreflang live. Popover HTML, không JS.
   .nav > nav margin-left auto: khi không có nút ngôn ngữ, bố cục giữ nguyên (space-between hai phần tử). */
.nav > nav {
  margin-left: auto;
}

.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 0 6px;
  border: 0;
  background: none;
  color: var(--ink);
  font: 600 0.88rem/1 var(--mono);
  cursor: pointer;
}

/* Mũi tên chỉ để nhìn: alt rỗng để không vào tên đọc của nút (dòng đầu cho trình duyệt chưa hỗ trợ cú pháp "/"). */
.lang-btn::after {
  content: "\25BE";
  content: "\25BE" / "";
}

/* Cờ SVG 20x14; viền mảnh để phần trắng/vàng không chìm vào nền giấy. */
.flag {
  flex: none;
  width: 20px;
  height: 14px;
  box-shadow: 0 0 0 1px rgb(26 26 26 / 0.3);
}

.lang-list {
  inset: 61px max(16px, calc((100vw - var(--maxw)) / 2 + 16px)) auto auto;
  min-width: 220px;
  margin: 0;
  padding: 6px;
  border: 3px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
}

.lang-list ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lang-list a {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.lang-list a:hover:not([aria-current]) {
  background: var(--star);
}

.lang-list [aria-current] {
  background: var(--ink);
  color: var(--paper);
}

/* Chuột: mục gọn 36 px; màn hình chạm giữ 44 px. */
@media (pointer: fine) {
  .lang-list a {
    min-height: 36px;
  }
}

/* Có nút ngôn ngữ thì header cần thêm chỗ: gộp link vào menu tới 1023 px (không có nút thì vẫn 800 px như cũ). */
@media (min-width: 801px) and (max-width: 1023.98px) {
  .nav:has(.lang-menu) .nav-links .opt {
    display: none;
  }
  .nav:has(.lang-menu) .nav-links .menu {
    display: list-item;
  }
}

@media (max-width: 480px) {
  .nav:has(.lang-menu) .nav-links {
    column-gap: 12px;
  }
}

/* Trình duyệt cũ không có popover: bỏ nút, hiện danh sách link thường dưới hàng header. */
@supports not selector(:popover-open) {
  .lang-btn {
    display: none;
  }
  .nav:has(.lang-menu) {
    flex-wrap: wrap;
  }
  .lang-list {
    min-width: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
  }
  .lang-list ul {
    display: flex;
    flex-wrap: wrap;
  }
}