/* Shared site bar (MUST-DO §5). Self-contained: same look on the portal, /dict (Bootstrap 4) and the blog (copy in blog.css). */
.mkbar { background: #8f1a1e; color: #fff; font: 14px/1.4 "Noto Sans Thai", "Sarabun", system-ui, sans-serif; }
.mkbar__in { max-width: 1120px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; gap: 12px; height: 36px; }
.mkbar a { color: #fff; text-decoration: none; white-space: nowrap; }
.mkbar a:hover, .mkbar a:focus-visible { color: #fff; text-decoration: none; background: rgba(255,255,255,.16); }
.mkbar a:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.mkbar__brand { font-weight: 700; padding: 4px 6px; border-radius: 4px; }
.mkbar__links { display: flex; gap: 2px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin: 0; padding: 0; }
.mkbar__links::-webkit-scrollbar { display: none; }
.mkbar__links a { padding: 4px 9px; border-radius: 999px; opacity: .9; }
.mkbar__links a.is-current { background: #fff; color: #8f1a1e; opacity: 1; font-weight: 600; }
.mkbar__lang { flex: none; border: 1px solid rgba(255,255,255,.6); border-radius: 4px; padding: 1px 8px; font-weight: 600; font-size: 13px; }
.mkbar__search { flex: none; padding: 2px 8px; border-radius: 4px; font-size: 15px; }
.mkbar__search.is-current { background: #fff; }
@media (max-width: 760px) {
  .mkbar__brand { display: none; }
  .mkbar__links { mask-image: linear-gradient(90deg, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); }
}
@media print { .mkbar { display: none; } }