/*
  Header/menu dùng chung cho hannom.org, tudien.hannom.org, bogo.hannom.org.
  tudien và bogo nạp file này qua <link href="/assets/nav.css"> (đường dẫn gốc, xem
  ghi chú alias trong assets/theme.css) để menu luôn giống hannom.org — mỗi site chỉ
  tự thêm các link riêng bên trong <nav class="links">.
  Cần theme.css nạp trước để có các biến màu (--paper, --ink, --seal, ...).
*/
header.nav{
  position:sticky;top:0;z-index:40;
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  border-bottom:1px solid var(--border);
}
/* .wrap canh giữa + giới hạn bề rộng thân trang. hannom.org tự định nghĩa lại y hệt
   trong assets/styles.css (đã @import nav.css); tudien/bogo không có bản đó nên cần
   khai báo ở đây để phần header không tràn sát mép màn hình. */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.nav-in{display:flex;align-items:center;gap:20px;height:62px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;font-family:var(--font-display);letter-spacing:.02em;flex-shrink:0;white-space:nowrap}
.brand img{width:30px;height:30px;display:block;flex-shrink:0}
.brand b{font-weight:600;font-size:17px;white-space:nowrap}
.brand span{font-family:var(--font-han);color:var(--seal);font-size:15px;white-space:nowrap}
nav.links{margin-left:auto;display:flex;align-items:center;gap:4px}
nav.links a{
  text-decoration:none;color:var(--ink-soft);font-size:15px;
  padding:7px 12px;border-radius:7px;transition:color .2s,background .2s;
}
nav.links a:hover{color:var(--ink);background:var(--seal-soft)}
nav.links a[aria-current="page"]{color:var(--seal)}
.theme-btn{
  margin-left:6px;border:1px solid var(--border);background:transparent;color:var(--ink-soft);
  width:34px;height:34px;border-radius:8px;cursor:pointer;font-size:15px;line-height:1;
  font-family:var(--font-han);transition:border-color .2s,color .2s;
}
.theme-btn:hover{border-color:var(--seal);color:var(--seal)}
.theme-btn .ico{
  display:block;margin:auto;width:17px;height:17px;
  fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.theme-btn .ico-sun{display:none}
.theme-btn.is-dark .ico-sun{display:block}
.theme-btn.is-dark .ico-moon{display:none}
#lang{
  font-family:var(--font-display);font-size:12.5px;font-weight:600;
  letter-spacing:.08em;width:auto;min-width:34px;padding:0 9px;
}
:root[lang^="zh"] #lang{font-family:var(--font-han);font-size:15px;letter-spacing:0;padding:0}
@media(max-width:720px){ nav.links a.opt{display:none} }