/* nav.css – thanh điều hướng gọn của các trang môn (app.js: initTabs): Tổng quan · Học ▾ · Luyện tập ▾ · Trò chơi · Theo dõi.
   Một hàng, dính dưới thanh môn học; bấm nhóm mới xổ bảng liệt kê (kiểu thanh công cụ cóc vàng). Chỉ dùng token của web (đổi bảng màu là đổi theo). */
.nv{position:sticky;top:var(--nv-top,56px);z-index:45;display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:18px 0 16px;padding:7px;border-radius:20px;
  background:color-mix(in srgb,var(--card) 90%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border);box-shadow:var(--shadow);scroll-margin-top:calc(var(--nv-top,56px) + 8px)}
.nv-top,.nv-it{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 14px;border:1px solid transparent;border-radius:14px;background:transparent;color:var(--ink);
  font:600 14.5px/1.2 var(--ui);cursor:pointer;white-space:nowrap;text-align:left;transition:background-color .15s,color .15s,border-color .15s,box-shadow .15s}
.nv-top:hover,.nv-it:hover{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 30%,var(--border))}
.nv-top:focus-visible,.nv-it:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:1px}
.nv-e{font-size:1.1em;line-height:1}
.nv-n{min-width:20px;padding:1px 6px;border-radius:99px;background:var(--sunk);color:var(--muted);font:700 11.5px/1.5 var(--ui);text-align:center}
.nv-gb::after{content:"";width:7px;height:7px;margin:0 0 3px 2px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .15s;opacity:.7}
.nv-gb[aria-expanded="true"]::after{transform:rotate(-135deg);margin-bottom:-2px}
.nv-top[data-here],.nv-dd[data-here]>.nv-gb,.nv-top[aria-selected="true"],.nv-it[aria-selected="true"]{background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--sea-c) 62%,var(--accent)));color:var(--on-accent);border-color:transparent;box-shadow:0 6px 18px color-mix(in srgb,var(--accent) 38%,transparent)}
.nv-dd[data-here]>.nv-gb .nv-n,.nv-top[aria-selected="true"] .nv-n{background:rgba(255,255,255,.22);color:inherit}
.nv-dd{position:static}
.nv-menu[hidden]{display:none}
.nv-menu{position:absolute;left:0;right:0;top:calc(100% + 8px);display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px;padding:10px;max-height:min(70vh,520px);overflow:auto;
  background:var(--card);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow-lg);animation:nv-in .14s ease-out}
.nv-it{width:100%;white-space:normal;background:var(--sunk)}
@keyframes nv-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.nv-menu{animation:none}.nv-top,.nv-it,.nv-gb::after{transition:none}}
@media (max-width:640px){
  .nv{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:6px;margin:12px 0}
  .nv-dd{display:contents}
  .nv>:last-child:nth-child(odd){grid-column:1/-1}
  .nv-top{justify-content:center;min-height:44px;padding:8px 10px;font-size:13.5px}
  .nv-it{min-height:44px}
  .nv-menu{grid-template-columns:1fr 1fr}
}
@media (max-width:400px){.nv-menu{grid-template-columns:1fr}.nv-n{display:none}}
#panel{scroll-margin-top:calc(var(--nv-top,56px) + 70px)}