/* CƠ BẢN — token màu/chữ lấy từ webapp/css/van-phong.css (kính tối). Không có cuộn ngang ở bất kỳ bề rộng nào. */
:root {
  --ink-950: #06080c; --ink-900: #0a0e14; --ink-850: #0e131b; --ink-800: #121823; --ink-700: #1a2230; --ink-600: #263041;
  --mist-100: #eef2f7; --mist-300: #b7c1cf; --mist-500: #8793a4;
  --signal: #7cc4d6; --signal-strong: #9ad7e6; --ok: #6fe3a4; --warn: #f2b46a; --bad: #ff8a7a; --gold: #e8b04a;
  --vien: rgba(183, 193, 207, 0.13);
  --bk: 14px; --chieu-cao-nav: 60px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--ink-950); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh; color: var(--mist-100); background: var(--ink-950);
  font: 14px/1.45 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent; overflow-wrap: anywhere;
  padding-bottom: calc(var(--chieu-cao-nav) + env(safe-area-inset-bottom));
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
img, svg { max-width: 100%; }
:focus-visible { outline: 2px solid var(--signal-strong); outline-offset: 2px; border-radius: 6px; }
.bo-qua { position: absolute; left: -999px; top: 0; background: var(--signal); color: #04121a; padding: 10px 14px; z-index: 50; }
.bo-qua:focus { left: 8px; top: 8px; }

/* Thanh trên */
#thanh-tren {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; background: rgba(6, 8, 12, .97); /* không dùng backdrop-filter: nó biến thanh này thành khung chứa của thanh điều hướng fixed */
  border-bottom: 1px solid var(--vien); min-height: 52px;
}
.logo {
  width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none;
  font-weight: 800; color: #1a1205; background: linear-gradient(135deg, #f5c96b, #e8b04a);
}
.ten-trang { min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.ten-trang b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ten-trang small { font-size: 11.5px; color: var(--mist-500); display: flex; align-items: center; gap: 5px; }
.ten-trang small .bieu-tuong { width: 12px; height: 12px; }

/* Điều hướng: điện thoại = thanh dưới 5 cột; máy tính = hàng trên */
#dieu-huong {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  height: calc(var(--chieu-cao-nav) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: rgba(10, 14, 20, .94); backdrop-filter: blur(14px); border-top: 1px solid var(--vien);
}
#dieu-huong a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 48px;
  color: var(--mist-500); font-size: 11.5px; font-weight: 600; border-top: 2px solid transparent; transition: color .15s, background-color .15s;
}
#dieu-huong a .bieu-tuong { width: 22px; height: 22px; }
#dieu-huong a:hover { color: var(--mist-100); }
#dieu-huong a[aria-current="page"] { color: var(--signal-strong); border-top-color: var(--signal); background: rgba(124, 196, 214, .06); }
body.chua-vao #dieu-huong, body.chua-vao #nut-thoat, body.chua-vao #nut-tai-khoan { display: none; }
#nut-tai-khoan {
  margin-left: auto; display: grid; place-items: center; min-height: 44px; min-width: 44px; border-radius: 10px;
  color: var(--mist-500); border: 1px solid var(--vien);
}
#nut-tai-khoan .bieu-tuong { width: 18px; height: 18px; }
#nut-tai-khoan:hover { color: var(--mist-100); }
#nut-tai-khoan[aria-current="page"] { color: var(--signal-strong); border-color: var(--signal); }
#nut-tai-khoan + #nut-thoat { margin-left: 0; }
#nut-thoat {
  margin-left: auto; min-height: 44px; min-width: 44px; padding: 0 14px; border-radius: 10px; font: inherit; font-size: 13px;
  font-weight: 600; color: var(--mist-500); background: none; border: 1px solid var(--vien); cursor: pointer;
}
#nut-thoat:hover { color: var(--mist-100); }
body.chua-vao { padding-bottom: 0; }

@media (min-width: 760px) {
  body { padding-bottom: 0; }
  #thanh-tren { padding: 8px max(20px, calc((100% - 1180px) / 2)); }
  #dieu-huong {
    position: static; margin-left: auto; display: flex; gap: 4px; height: auto; padding: 0; background: none;
    border: 0; backdrop-filter: none;
  }
  #dieu-huong a { flex-direction: row; gap: 7px; padding: 8px 14px; min-height: 40px; border-radius: 10px; border-top: 0; font-size: 13.5px; }
  #dieu-huong a .bieu-tuong { width: 18px; height: 18px; }
  #dieu-huong a[aria-current="page"] { background: rgba(124, 196, 214, .12); }
  #nut-tai-khoan { margin-left: 4px; }
  #nut-tai-khoan + #nut-thoat { margin-left: 0; }
}

/* Nội dung */
#noi-dung { width: 100%; max-width: 1180px; margin: 0 auto; padding: 16px 14px 28px; outline: none; }
@media (min-width: 760px) { #noi-dung { padding: 24px 20px 40px; } }
.trang { animation: vao .22s ease-out both; }
@keyframes vao { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.tieu-de-trang { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; min-width: 0; }
.tieu-de-trang h1 { font-size: 20px; line-height: 1.2; }
.tieu-de-trang .bieu-tuong { width: 22px; height: 22px; color: var(--signal); flex: none; }
.muc { margin: 22px 0 10px; display: flex; align-items: center; gap: 8px; min-width: 0; }
.muc h2 { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--mist-500); font-weight: 700; }
.muc .dem { font-size: 11px; color: var(--mist-300); font-variant-numeric: tabular-nums; }
.trong { color: var(--mist-500); text-align: center; padding: 28px 10px; border: 1px dashed var(--vien); border-radius: var(--bk); }
.mo { color: var(--mist-500); font-size: 12px; }
.so { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}