/* Nạp toàn cục (App.razor) nên chỉ giữ phần mọi trang cần — khu quản trị, /login VÀ website công khai:
   reset, kiểu phần tử cơ bản, .stack/.cluster/.sr-only. Bố cục riêng của website công khai (.container,
   .section, .grid-auto, nút, thẻ...) nằm ở site.css, chỉ SiteLayout nạp — xem site.css. Thứ tự layer
   (fonts, tokens, reset, base, rồi components của admin-components.css) quyết định độ ưu tiên, nên file
   này phải nạp sau tokens.css và trước admin-components.css. */
@layer reset, base;
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
  ul[role="list"], ol[role="list"] { list-style: none; margin: 0; padding: 0; }
  img, picture, video, canvas, svg { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; }
  button { cursor: pointer; }
  /* Quy tắc [hidden] của trình duyệt là display:none ở độ đặc hiệu (0,1,0): mọi luật của trang đặt display trên
     cùng phần tử sẽ thắng nó, và phần tử Blazor đã đặt hidden vẫn hiện. !important ở đây thay vì selector đặc
     hiệu hơn, vì thứ tự layer mới là thứ quyết định: reset đứng trước components, và khai báo important đảo
     ngược thứ tự layer, nên đây là dạng duy nhất đúng với mọi phần tử mà một component có thể tạo kiểu. */
  [hidden] { display: none !important; }
}
@layer base {
  body { min-height: 100vh; color: var(--ink-950); background: var(--surface); font-family: var(--font-sans); line-height: 1.65; text-rendering: optimizeLegibility; }
  a { color: inherit; text-decoration: none; }
  a:hover { color: var(--brand-green-700); }
  h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }
  h1 { font-size: clamp(2.1rem, 4.6vw, 4.25rem); }
  h2 { font-size: clamp(1.65rem, 3vw, 2.65rem); }
  h3, h4 { font-family: var(--font-sans); font-weight: 700; font-size: clamp(1.15rem, 1.7vw, 1.45rem); }
  p { color: var(--ink-700); }
  :focus-visible { outline: 3px solid color-mix(in srgb, var(--brand-gold) 75%, white); outline-offset: 3px; }
  ::selection { color: white; background: var(--brand-green); }
  .stack { display: grid; gap: var(--space-6); }
  .cluster { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4); }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }
}