/* ─────────────────────────── Khung trang chung (base.html) theo bộ tt- ───────────────────────────
   Thanh điều hướng, menu tài khoản, menu điện thoại, thông báo flash và chân trang.

   Token màu (--tt-ink, --tt-paper…) đã dời lên :root / html.dark trong tinvan.css — nguồn duy nhất,
   base.html nạp tinvan.css qua _tt_head.html trước file này. Ở đây chỉ còn kích thước riêng của khung. */

:root {
  --tt-bar-h: 3.5rem;
}
/* Điện thoại: thanh trên cùng thấp đi 8px (03/10/2026) — nút bấm vẫn cao 40px, phần bớt đi là khoảng đệm. */
@media (max-width: 639px) { :root { --tt-bar-h: 3rem; } }

.tt-skip {
  position: absolute; left: .75rem; top: -3rem; z-index: 80; padding: .55rem .9rem; border-radius: .6rem;
  background: var(--tt-ink); color: var(--tt-paper); font-size: .875rem; font-weight: 600; transition: top .2s var(--tt-ease);
}
.tt-skip:focus { top: .6rem; }
.tt-shell-ic { width: 1.1rem; height: 1.1rem; flex: none; }

/* ── Thanh trên cùng ──
   Nhiều trang đo `document.querySelector('nav').offsetHeight` để biết chỗ dính thanh công cụ của
   mình, nên <nav> đầu tiên trong DOM PHẢI là đúng thanh này và không được cao lên khi mở menu. */
.tt-top {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--tt-paper) 90%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--tt-rule);
}
.tt-nav { max-width: none; height: var(--tt-bar-h); margin: 0 auto; padding: 0 var(--tt-gutter, .75rem); display: flex; align-items: center; gap: .5rem; }
@media (min-width: 640px) { .tt-nav { padding: 0 1rem; } }
.tt-brand { display: inline-flex; align-items: center; gap: .4rem; margin-right: .5rem; padding: .35rem .25rem; font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; color: var(--tt-ink); }
.tt-brand svg { width: 1.45rem; height: 1.45rem; color: var(--tt-accent); }

.tt-links { display: none; align-self: stretch; align-items: stretch; gap: .1rem; }
@media (min-width: 1024px) { .tt-links { display: flex; } }
.tt-link {
  position: relative; display: inline-flex; align-items: center; padding: 0 .7rem;
  font-size: .875rem; font-weight: 550; color: var(--tt-muted); white-space: nowrap; transition: color .2s;
}
.tt-link:hover, .tt-link[aria-current="page"] { color: var(--tt-ink); }
.tt-link::after {
  content: ""; position: absolute; left: .7rem; right: .7rem; bottom: -1px; height: 2px; border-radius: 2px;
  background: var(--tt-accent); transform: scaleX(0); transform-origin: 50% 50%; transition: transform .35s var(--tt-ease);
}
.tt-link:hover::after { transform: scaleX(.35); }
.tt-link[aria-current="page"]::after { transform: scaleX(1); }

.tt-nav-end { margin-left: auto; display: flex; align-items: center; gap: .35rem; }
.tt-desk { display: none !important; }
@media (min-width: 1024px) { .tt-desk { display: inline-flex !important; } .tt-mob { display: none !important; } }

.tt-iconbtn {
  width: var(--tt-hit); height: var(--tt-hit); display: inline-grid; place-items: center; border-radius: var(--tt-r-md);
  color: var(--tt-muted); transition: background-color .2s, color .2s, transform .15s var(--tt-ease);
}
.tt-iconbtn:hover { background: var(--tt-sunk); color: var(--tt-ink); }
.tt-iconbtn:active { transform: scale(.94); }
html:not(.dark) .tt-ic-sun, html.dark .tt-ic-moon { display: none; }

.tt-find {
  display: inline-flex; align-items: center; gap: .5rem; height: var(--tt-hit); padding: 0 .45rem 0 .7rem;
  border: 1px solid var(--tt-rule); border-radius: .7rem; background: var(--tt-paper);
  font-size: .875rem; color: var(--tt-muted); transition: border-color .2s, color .2s;
}
.tt-find:hover { color: var(--tt-ink); border-color: color-mix(in srgb, var(--tt-ink) 30%, var(--tt-rule)); }
.tt-find kbd { white-space: nowrap; font: 600 .68rem/1 var(--tt-sans); padding: .25rem .35rem; border: 1px solid var(--tt-rule); border-radius: .35rem; color: var(--tt-muted); }
.tt-find .tt-find-label { min-width: 4.5rem; text-align: left; }
/* 1024–1279px: đủ chỗ cho 7 link nhưng KHÔNG đủ thêm ô Tìm đầy đủ + tên tài khoản (đo 25/09/2026:
   tràn 152px ở 1024, 219px với tên dài). Thu hai nút về dạng icon, khép khoảng cách link. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .tt-link { padding: 0 .5rem; }
  .tt-link::after { left: .5rem; right: .5rem; }
  .tt-user-name, .tt-user-btn .tt-chev { display: none; }
  .tt-user-btn { padding: 0 .35rem; }
  .tt-find { width: var(--tt-hit); padding: 0; justify-content: center; }
  .tt-find kbd, .tt-find .tt-find-label { display: none; }
}
/* 1280–1439px: 8 link (thêm Soát lỗi 15/10/2026) + Admin + ô Tìm — bỏ chữ "Ctrl K" cho đủ chỗ. */
@media (min-width: 1280px) and (max-width: 1439px) { .tt-find kbd { display: none; } }
@media (hover: none), (max-width: 1023px) {
  .tt-find { width: var(--tt-hit); padding: 0; justify-content: center; border-color: transparent; background: transparent; }
  .tt-find kbd, .tt-find .tt-find-label { display: none; }
}

/* Admin: lối vào công cụ quản trị, không phải hành động chính của trang — giữ màu nhận diện
   nhưng bỏ khối nền vàng đặc từng là thứ chói nhất trên thanh. */
.tt-admin { display: inline-flex; align-items: center; gap: .4rem; height: var(--tt-hit); padding: 0 .75rem; border-radius: .7rem; font-size: .8125rem; font-weight: 650; color: var(--tt-amber); transition: background-color .2s; }
.tt-admin:hover, .tt-admin[aria-current="page"] { background: color-mix(in srgb, var(--tt-amber) 12%, transparent); }

.tt-user { position: relative; }
.tt-user-btn {
  display: inline-flex; align-items: center; gap: .45rem; height: var(--tt-hit); max-width: 14rem; padding: 0 .55rem 0 .35rem;
  border-radius: .7rem; font-size: .875rem; font-weight: 550; color: var(--tt-ink-2); transition: background-color .2s;
}
.tt-user-btn:hover, .tt-user-btn[aria-expanded="true"] { background: var(--tt-sunk); }
.tt-avatar { width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; font-weight: 700; background: var(--tt-accent-soft); color: var(--tt-accent-strong); flex: none; }
.tt-user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-user-btn .tt-chev { transition: transform .25s var(--tt-ease); }
.tt-user-btn[aria-expanded="true"] .tt-chev { transform: rotate(180deg); }
.tt-menu {
  position: absolute; right: 0; top: calc(100% + .45rem); min-width: 14rem; padding: .35rem;
  background: var(--tt-paper); border: 1px solid var(--tt-rule); border-radius: .9rem; box-shadow: var(--tt-lift);
  transform-origin: top right; animation: tt-menu-in .2s var(--tt-ease) both;
}
.tt-menu-who { padding: .5rem .7rem .55rem; border-bottom: 1px solid var(--tt-rule); margin-bottom: .3rem; font-size: .75rem; color: var(--tt-muted); }
.tt-menu-who b { display: block; font-size: .875rem; color: var(--tt-ink); font-weight: 650; }
.tt-menu a, .tt-menu button {
  display: flex; align-items: center; gap: .6rem; width: 100%; padding: .55rem .7rem; border-radius: .6rem;
  font-size: .875rem; color: var(--tt-ink-2); text-align: left; transition: background-color .15s, color .15s;
}
.tt-menu a:hover, .tt-menu button:hover, .tt-menu a:focus-visible, .tt-menu button:focus-visible { background: var(--tt-sunk); color: var(--tt-ink); outline: none; }
.tt-menu hr { border: 0; border-top: 1px solid var(--tt-rule); margin: .3rem 0; }
.tt-menu .is-danger, .tt-mnav .is-danger { color: var(--tt-danger); }

.tt-login { display: inline-flex; align-items: center; height: var(--tt-hit); padding: 0 1rem; border-radius: var(--tt-r-md); background: var(--tt-grad-brand); color: var(--tt-on-accent); font-size: .875rem; font-weight: 650; }

/* ── Menu điện thoại: tấm trượt xuống ngay dưới thanh, nền phía sau mờ đi ── */
.tt-mnav { position: fixed; left: 0; right: 0; bottom: 0; top: var(--tt-bar-h); z-index: 49; background: var(--tt-backdrop); animation: tt-fade .25s ease both; }
.tt-mnav-panel {
  max-height: calc(100dvh - var(--tt-bar-h)); overflow-y: auto; overscroll-behavior: contain;
  background: var(--tt-paper); border-bottom: 1px solid var(--tt-rule); box-shadow: var(--tt-lift);
  padding: .5rem .75rem calc(1rem + env(safe-area-inset-bottom));
  animation: tt-mnav-in .32s var(--tt-ease) both;
}
.tt-mnav a, .tt-mnav button {
  display: flex; align-items: center; gap: .8rem; width: 100%; min-height: 3rem; padding: 0 .75rem; border-radius: .7rem;
  font-size: .9375rem; color: var(--tt-ink-2); text-align: left; transition: background-color .15s;
}
.tt-mnav a:hover, .tt-mnav button:hover { background: var(--tt-sunk); }
.tt-mnav a[aria-current="page"] { background: var(--tt-accent-soft); color: var(--tt-accent-strong); font-weight: 650; }
.tt-mnav .tt-shell-ic { color: var(--tt-muted); }
.tt-mnav a[aria-current="page"] .tt-shell-ic { color: var(--tt-accent-strong); }
.tt-mnav-group { margin-top: .4rem; padding-top: .4rem; border-top: 1px solid var(--tt-rule); }
.tt-mnav-who { display: flex; align-items: center; gap: .6rem; padding: .6rem .75rem .8rem; font-size: .8125rem; color: var(--tt-muted); }
.tt-mnav-who b { display: block; color: var(--tt-ink); font-size: .9375rem; }
body.tt-mnav-open { overflow: hidden; }
@media (min-width: 1024px) { .tt-mnav { display: none !important; } }

/* ── Thông báo flash ── */
.tt-flashes { display: grid; gap: .5rem; margin-bottom: 1rem; }
.tt-flash {
  display: flex; align-items: flex-start; gap: .65rem; padding: .7rem .6rem .7rem .9rem; overflow: hidden;
  border: 1px solid var(--tt-rule); border-radius: .8rem; background: var(--tt-paper); color: var(--tt-ink);
  font-size: .9rem; line-height: 1.5; max-height: 20rem;
  animation: tt-flash-in .4s var(--tt-ease) both;
  transition: opacity .35s ease, max-height .4s ease, padding .4s ease, margin .4s ease, border-width .4s ease;
}
.tt-flash-dot { width: .55rem; height: .55rem; margin-top: .45rem; border-radius: 50%; flex: none; background: var(--tt-muted); }
.tt-flash--ok { background: var(--tt-success-soft); border-color: color-mix(in srgb, var(--tt-success) 30%, var(--tt-rule)); }
.tt-flash--ok .tt-flash-dot { background: var(--tt-success); }
.tt-flash--err { background: var(--tt-danger-soft); border-color: var(--tt-danger-rule); }
.tt-flash--err .tt-flash-dot { background: var(--tt-danger); }
.tt-flash--warn { background: var(--tt-warning-soft); border-color: color-mix(in srgb, var(--tt-warning) 35%, var(--tt-rule)); }
.tt-flash--warn .tt-flash-dot { background: var(--tt-warning); }
.tt-flash--info { background: var(--tt-info-soft); border-color: color-mix(in srgb, var(--tt-info) 30%, var(--tt-rule)); }
.tt-flash--info .tt-flash-dot { background: var(--tt-info); }
.tt-flash-msg { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tt-flash-x { width: var(--tt-hit); height: var(--tt-hit); margin: -.55rem -.2rem -.55rem 0; display: grid; place-items: center; border-radius: .5rem; color: var(--tt-muted); flex: none; }
.tt-flash-x:hover { background: var(--tt-sunk); color: var(--tt-ink); }
.tt-flash.is-leaving { opacity: 0; max-height: 0 !important; padding-top: 0; padding-bottom: 0; border-width: 0; }

/* ── Chân trang ── */
.tt-foot { margin-top: 2rem; border-top: 1px solid var(--tt-rule); background: var(--tt-paper); }
.tt-foot-in { max-width: 80rem; margin: 0 auto; padding: .85rem 1rem; display: flex; align-items: center; justify-content: center; gap: .45rem; font-size: .8125rem; color: var(--tt-muted); }
.tt-foot-in svg { width: 1rem; height: 1rem; color: var(--tt-accent); }
.tt-foot-in b { color: var(--tt-ink-2); font-weight: 650; }

@keyframes tt-menu-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
@keyframes tt-mnav-in { from { opacity: 0; transform: translateY(-10px); } }
@keyframes tt-flash-in { from { opacity: 0; transform: translateY(-6px); } }

@media print { .tt-top, .tt-mnav, .tt-foot, .tt-skip { display: none !important; } }