/* AstroUI Anatomy — styles/tokens.css
   Biến thiết kế và reset gốc. Đổi màu, khoảng cách, bo góc của cả app ở đây. */

:root{
  --bg:#0d0f13; --bg2:#14171d; --bg3:#1b1f27; --bg4:#232833;
  --line:#2c323d; --line2:#3a4250;
  --tx:#e6e9ef; --tx2:#9aa4b4; --tx3:#6b7688;
  --acc:#5b8cff; --acc2:#7aa2ff;
  --ok:#3ecf8e; --warn:#f5b642; --err:#ff5d5d; --pur:#a97bff;
  --r:10px;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  /* ---- THANG CHỮ — 6 bậc, mỗi bậc cách nhau đủ để mắt phân biệt ----
     Trước đây có 14 cỡ chen nhau, chênh 0.3px — nhìn tổng thể thành phẳng lì.  */
  --fs-xs : 11px;    /* nhãn mono, metadata            */
  --fs-sm : 12.5px;  /* chữ phụ, chú thích             */
  --fs-md : 14px;    /* chữ nội dung                   */
  --fs-lg : 16px;    /* tiêu đề thẻ, tiêu đề mục nhỏ   */
  --fs-xl : 20px;    /* tiêu đề mục lớn                */
  --fs-2xl: 28px;    /* tiêu đề trang                  */

  /* ---- ĐỘ NỔI — 3 tầng, dùng có chủ đích ----
     Bóng đổ để nói "cái này nằm trên cái kia", không phải để trang trí.  */
  --sh-1: 0 1px 2px rgba(0,0,0,.32);                          /* thẻ nghỉ      */
  --sh-2: 0 6px 16px rgba(0,0,0,.4);                          /* hover, dropdown */
  --sh-3: 0 18px 44px rgba(0,0,0,.55);                        /* modal          */

  /* ---- NHỊP KHOẢNG CÁCH — thang 4px ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:48px;

  --dur-fast:120ms; --dur-slow:240ms;
}

/* ---- ICON ----
   Cả bộ dùng chung một khai báo: kích thước ăn theo cỡ chữ, màu ăn theo màu chữ,
   nét không co giãn khi phóng to. */
.ic{flex:none;vertical-align:-.14em;stroke-width:1.75;
  vector-effect:non-scaling-stroke;overflow:visible}
.icwrap{display:inline-flex;align-items:center;justify-content:center;flex:none}
*{box-sizing:border-box}
/* Thuộc tính hidden phải luôn thắng. Nếu không, bất kỳ .lop{display:flex} nào
   cũng vô hiệu hoá nó và để lộ ra một khối rỗng — đúng lỗi đã gặp ở khối resume. */
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--tx);
  font-family:Inter,-apple-system,"Segoe UI",system-ui,sans-serif;font-size:14px;line-height:1.5}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:6px}
::-webkit-scrollbar-track{background:transparent}

/* ---- focus & motion ---- */
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.skip{position:absolute;left:-9999px;top:8px;background:var(--acc);color:#fff;padding:9px 15px;
  border-radius:8px;z-index:999;font-size:13px;text-decoration:none}
.skip:focus{left:20px}