/* Thanh đầu trang dùng chung (templates/_thanh_dau_trang.html, 2026-10-20).
   Màu chỉ từ tokens.css: nền trắng chạy hết chiều ngang, dải --mt-red 3px ở đáy.
   Phông khai ngay trên .mt-tdt để trang nào nạp file này cũng đúng (trang phải nạp
   Playfair Display + Be Vietnam Pro từ Google Fonts như mọi trang).
   Tương phản trên nền trắng: logo + công tắc --mt-primary 9,8:1; link --mt-text
   16:1; chữ phụ --mt-muted 6,3:1; nút đỏ chữ trắng trên --mt-red 6,5:1; ô công
   tắc đang chọn chữ trắng trên --mt-primary 9,8:1.
   Mỗi thanh tối đa MỘT nút đỏ (tham số `nut` của macro) — hành động chính của
   trang; mọi link khác là chữ thường. */

.mt-tdt { background: #fff; color: var(--mt-text);
  box-shadow: inset 0 -3px 0 var(--mt-red);
  padding: .55rem clamp(1rem, 4vw, 3rem) calc(.55rem + 3px);
  font-family: 'Be Vietnam Pro', system-ui, -apple-system, sans-serif; box-sizing: border-box; }
.mt-tdt *, .mt-tdt *::before, .mt-tdt *::after { box-sizing: border-box; }
.mt-tdt-trong { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }

.mt-tdt-logo { display: inline-flex; align-items: center; min-height: 44px; margin-right: auto;
  font-family: 'Playfair Display', Georgia, serif; font-weight: 600; font-size: 23px;
  letter-spacing: -0.01em; color: var(--mt-primary); text-decoration: none; }

/* Chữ phụ cạnh logo (/plan "Explore the world your way"): xám */
.mt-tdt-phu { font-size: .85rem; color: var(--mt-muted); }
.mt-tdt-logo:has(+ .mt-tdt-phu) { margin-right: 0; }
.mt-tdt-phu { margin-right: auto; }

.mt-tdt-menu { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.1rem; }
.mt-tdt-menu a { display: inline-flex; align-items: center; min-height: 44px; font-size: .9rem;
  font-weight: 500; line-height: 1.2; color: var(--mt-text); text-decoration: none; white-space: nowrap; }
.mt-tdt-menu a:hover { color: var(--mt-primary); text-decoration: underline; }
/* Nút hành động chính của trang: nền đỏ chữ trắng, bo tròn */
.mt-tdt-menu a.mt-tdt-nut { min-height: 40px; padding: 0 1rem; border-radius: 999px;
  background: var(--mt-red); color: var(--mt-on-primary); font-weight: 600; }
.mt-tdt-menu a.mt-tdt-nut:hover { text-decoration: none; color: var(--mt-on-primary); background: var(--mt-red-hover); }

/* Công tắc ngôn ngữ: viền --mt-primary, ô đang chọn nền --mt-primary chữ trắng */
.mt-tdt-cong-tac { display: inline-flex; padding: 3px; border-radius: 999px;
  border: 1px solid var(--mt-primary); }
.mt-tdt-cong-tac a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 .85rem;
  border-radius: 999px; font-size: .85rem; font-weight: 500; color: var(--mt-primary);
  text-decoration: none; white-space: nowrap; }
.mt-tdt-cong-tac a[aria-current="true"] { background: var(--mt-primary); color: var(--mt-on-primary); font-weight: 600; }

.mt-tdt :focus-visible { outline: 2px solid var(--mt-primary); outline-offset: 3px; }

@media (max-width: 600px) {
  .mt-tdt-logo { font-size: 20px; }
  .mt-tdt-menu { gap: .25rem .8rem; }
}
/* Có công tắc ngôn ngữ + màn hình hẹp: menu là hàng riêng dưới logo + công tắc,
   quá dài thì cuộn ngang TRONG hàng (trang không bao giờ cuộn ngang). */
@media (max-width: 859px) {
  .mt-tdt--cong-tac .mt-tdt-menu { order: 3; width: 100%; flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .mt-tdt--cong-tac .mt-tdt-menu::-webkit-scrollbar { display: none; }
}