@charset "utf-8";
/* ═══════════════════════════════════════════════════════════════════════════
   Dino4VN — hệ thống giao diện, viết lại 2026-08-30.
   ═══════════════════════════════════════════════════════════════════════════

   Site chuyển từ "tờ rơi giới thiệu" sang "cổng người chơi": có đăng nhập, có
   bảng xếp hạng, có dữ liệu của riêng từng người. Hai thứ đó có luật thiết kế
   khác hẳn nhau — một cái bán, một cái phục vụ — nên bản này dựng lại từ đầu
   thay vì vá tiếp bản cũ.

   ⚠️ BA RÀNG BUỘC CỨNG, đọc trước khi sửa:
   1. CSP: `style-src 'self'` -> KHÔNG inline `style=`. Quy ước repo còn chặt hơn:
      KHÔNG đụng `.style` trong JS. Muốn đổi bề rộng thanh thì đổi thuộc tính
      `width` của `<rect>` SVG (xem `gara.js`).
   2. `font-src 'self'` -> bộ chữ BẮT BUỘC tự host. Không Google Fonts.
   3. Mọi thứ động phải chiếm sẵn chỗ. Nội dung "hiện ra sau" khi JS trả lời là
      nhảy layout, và trang chủ có hero là LCP.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Bộ chữ ────────────────────────────────────────────────────────────────
   Be Vietnam Pro — thiết kế cho tiếng Việt, nên dấu chồng (ế ộ ữ ằ) dựng đúng.
   Nhiều bộ chữ đẹp dựng sai chỗ đó và chỉ lộ ra khi đọc một đoạn dài.
   Tách `unicode-range`: trang thuần latin không tải file tiếng Việt.
   `swap` — thà thấy chữ hệ thống ngay còn hơn nhìn khoảng trắng.               */
@font-face {
  font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("/assets/fonts/be-vietnam-pro-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("/assets/fonts/be-vietnam-pro-vietnamese-400-normal.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("/assets/fonts/be-vietnam-pro-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("/assets/fonts/be-vietnam-pro-vietnamese-600-normal.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 800;
  font-display: swap; src: url("/assets/fonts/be-vietnam-pro-latin-800-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 800;
  font-display: swap; src: url("/assets/fonts/be-vietnam-pro-vietnamese-800-normal.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* ── Mã màu & thang ───────────────────────────────────────────────────────── */
:root {
  --nen:      #07100C;   /* đêm trong rừng */
  --nen-1:    #0C1913;
  --nen-2:    #12241B;
  --nen-3:    #172E22;
  --vien:     #1E3A2C;
  --vien-sang:#2B5340;

  --chu:      #E9F3EC;
  --chu-mo:   #9EB5A7;
  --chu-nhat: #6C8579;

  --vang:     #E8B84B;   /* thương hiệu */
  --vang-dam: #C79A2E;
  --vang-chu: #221A05;
  --luc:      #4ADE80;   /* đang chạy */
  --do:       #F87171;   /* cảnh báo */

  --r-nho: 8px;
  --r:     14px;
  --r-to:  22px;
  --r-tron: 999px;

  --bong-1: 0 1px 2px rgb(0 0 0 / .4);
  --bong-2: 0 10px 30px -12px rgb(0 0 0 / .7);
  --bong-vang: 0 8px 26px -14px rgb(232 184 75 / .55);

  --font: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Thang chữ co giãn theo bề rộng màn — không cần media query cho từng cỡ. */
  --b--1: clamp(.82rem, .78rem + .2vw, .9rem);
  --b-0:  clamp(.95rem, .9rem + .25vw, 1.05rem);
  --b-1:  clamp(1.1rem, 1rem + .5vw, 1.3rem);
  --b-2:  clamp(1.35rem, 1.15rem + 1vw, 1.8rem);
  --b-3:  clamp(1.7rem, 1.3rem + 2vw, 2.6rem);
  --b-4:  clamp(2.1rem, 1.5rem + 3.4vw, 3.6rem);

  --cot: 1140px;   /* bề rộng nội dung tối đa */
}

/* ── Nền tảng ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font: 400 var(--b-0)/1.65 var(--font);
  color: var(--chu);
  background: var(--nen);
  /* Hai vệt sáng rất nhạt để nền không phẳng lì. Không dùng ảnh -> 0 request. */
  background-image:
    radial-gradient(60rem 40rem at 15% -10%, rgb(74 222 128 / .07), transparent 60%),
    radial-gradient(50rem 34rem at 100% 0%, rgb(232 184 75 / .06), transparent 60%);
  background-attachment: fixed;
  overflow-wrap: break-word;
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; font-weight: 800; letter-spacing: -.02em; }
h1 { font-size: var(--b-4); }
h2 { font-size: var(--b-3); }
h3 { font-size: var(--b-1); }
p, ul, ol, dl, table { margin: 0 0 1em; }
a { color: var(--vang); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: #F5D27E; }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--vang); outline-offset: 3px; border-radius: 4px; }

/* 🔴 `[hidden]` PHẢI có `!important`.
   Trình duyệt đặt `[hidden] { display: none }` trong stylesheet của CHÍNH NÓ, mà
   mọi rule của ta đều là author style nên THẮNG nó. Hệ quả: bất cứ phần tử nào có
   `display:` tường minh — `.btn` là `inline-flex` — sẽ **vẫn hiện dù đã `hidden`**.

   Đã xảy ra thật trên production 2026-08-30: thanh app hiện ĐỒNG THỜI nút "Đăng
   nhập Steam" và tên tài khoản đã đăng nhập. JS chạy đúng (`vao.hidden = true`),
   CSS mới là chỗ sai. Không có lỗi nào trong console — chỉ nhìn mới thấy.

   Đặt Ở ĐÂY, ngay đầu file, để mọi rule sau không cần nhớ tới nó nữa. */
[hidden] { display: none !important; }

.wrap { width: min(100% - 2rem, var(--cot)); margin-inline: auto; }
.dim   { color: var(--chu-nhat); }
.muted { color: var(--chu-mo); }
.nho   { font-size: var(--b--1); }
.giua  { text-align: center; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.so { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--vang); color: var(--vang-chu); padding: 10px 16px;
  border-radius: 0 0 var(--r-nho) 0; font-weight: 800;
}
.skip:focus { left: 0; }

/* ═══ THANH APP ═══════════════════════════════════════════════════════════ */
.app {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--nen) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--vien);
}
.app__hang {
  display: flex; align-items: center; gap: 12px;
  min-height: 58px; padding-block: 6px;
}

.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--chu); }
.brand img { border-radius: var(--r-nho); }
.brand__txt { font-weight: 800; font-size: var(--b-1); letter-spacing: -.02em; }
@media (max-width: 400px) { .brand__txt { display: none; } }

/* Trạng thái server — luôn chiếm chỗ, kể cả lúc chưa biết gì. */
.tt {
  margin: 0 auto 0 8px; display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--b--1); color: var(--chu-mo); white-space: nowrap;
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.tt__cham {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--chu-nhat); box-shadow: 0 0 0 3px rgb(108 133 121 / .18);
}
.tt--song  .tt__cham { background: var(--luc); box-shadow: 0 0 0 3px rgb(74 222 128 / .2); }
.tt--tat   .tt__cham { background: var(--do);  box-shadow: 0 0 0 3px rgb(248 113 113 / .2); }
@media (max-width: 560px) { .tt { display: none; } }

.tk { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.tk__ten { font-size: var(--b--1); font-weight: 600; color: var(--chu-mo); }
.tk__ra  { font-size: var(--b--1); font-weight: 600; }

/* ── Điều hướng ───────────────────────────────────────────────────────────
   Cuộn ngang trên màn hẹp; thanh cuộn ẩn nên PHẢI có vệt mờ ở mép phải làm
   dấu hiệu, nếu không người dùng không biết còn mục bị cắt. Comment cũ trong
   repo khẳng định "4 trang vừa màn 360px" — sai, nó đã tràn từ lâu.          */
.nav { border-top: 1px solid color-mix(in srgb, var(--vien) 55%, transparent); }
.nav__trong {
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 26px);
  mask-image: linear-gradient(to left, transparent 0, #000 26px);
}
.nav__trong::-webkit-scrollbar { display: none; }
@media (min-width: 760px) { .nav__trong { -webkit-mask-image: none; mask-image: none; } }
.nav a {
  display: inline-flex; align-items: center; white-space: nowrap;
  min-height: 44px; padding: 0 13px; color: var(--chu-mo);
  text-decoration: none; font-size: var(--b--1); font-weight: 600;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--chu); }
.nav a[aria-current="page"] { color: var(--vang); border-bottom-color: var(--vang); }

/* ═══ Khối nội dung ══════════════════════════════════════════════════════ */
.doan { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.doan--hep { padding-block: clamp(1.8rem, 4vw, 3rem); }
.doan + .doan { border-top: 1px solid color-mix(in srgb, var(--vien) 50%, transparent); }

.nhan {
  display: inline-block; font-size: var(--b--1); font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--vang);
  margin-bottom: .6em;
}
.dat { font-size: var(--b-1); color: var(--chu-mo); max-width: 62ch; }

.the {
  background: linear-gradient(180deg, var(--nen-1), var(--nen));
  border: 1px solid var(--vien); border-radius: var(--r-to);
  padding: clamp(1.1rem, 3vw, 1.8rem); box-shadow: var(--bong-2);
}
.the--sang { border-color: var(--vien-sang); }
.the > :last-child { margin-bottom: 0; }

.luoi { display: grid; gap: 16px; }
@media (min-width: 720px) {
  .luoi--2 { grid-template-columns: repeat(2, 1fr); }
  .luoi--3 { grid-template-columns: repeat(3, 1fr); }
}

/* ── Nút ─────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: 12px 24px; border: 1px solid transparent;
  border-radius: var(--r-tron); font: 700 var(--b-0)/1.2 var(--font);
  text-decoration: none; cursor: pointer; color: var(--chu);
  background: var(--nen-2); border-color: var(--vien-sang);
  transition: background-color .15s, border-color .15s, transform .06s;
}
.btn:hover { background: var(--nen-3); color: var(--chu); }
.btn:active { transform: translateY(1px); }
.btn--chinh { background: var(--vang); color: var(--vang-chu); border-color: var(--vang); box-shadow: var(--bong-vang); }
.btn--chinh:hover { background: #F2C763; color: var(--vang-chu); }
.btn--nho { min-height: 38px; padding: 6px 14px; font-size: var(--b--1); }
.hang-nut { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 479px) { .hang-nut .btn { flex: 1 1 100%; } }

.pill {
  display: inline-flex; align-items: center; gap: .4em;
  padding: 3px 11px; border-radius: var(--r-tron);
  border: 1px solid var(--vien-sang); background: var(--nen-2);
  font-size: var(--b--1); font-weight: 600; color: var(--chu-mo);
}
.pill--vang { border-color: var(--vang-dam); color: var(--vang); background: rgb(232 184 75 / .08); }
.pill--luc  { border-color: #2F6B45; color: var(--luc); background: rgb(74 222 128 / .08); }
.canhbao { color: var(--do); }
.canhbao::before { content: "⚠ "; }

/* ═══ HERO ═══════════════════════════════════════════════════════════════ */
.hero { position: relative; isolation: isolate; overflow: hidden; }
.hero__anh {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.hero__phu {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgb(7 16 12 / .55) 0%, rgb(7 16 12 / .82) 55%, var(--nen) 100%);
}
.hero__trong { padding-block: clamp(3.5rem, 12vw, 7rem); }
.hero h1 { max-width: 16ch; }
.hero__sub { font-size: var(--b-1); color: var(--chu-mo); max-width: 52ch; }

/* ═══ Thẻ trạng thái lớn (trang chủ) ═════════════════════════════════════ */
.tthai { display: grid; gap: 6px; }
.tthai__dau { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tthai__ten { font-weight: 800; font-size: var(--b-1); }
.tthai__chinh { font-size: var(--b-2); font-weight: 800; }
.tthai__phu { color: var(--chu-mo); }
.tthai__meta { color: var(--chu-nhat); font-size: var(--b--1); }

/* ═══ BẢNG XẾP HẠNG ══════════════════════════════════════════════════════ */
/* Bục top-3. Đây là thứ chụp màn hình đăng Facebook có người bấm vào. */
.buc { display: grid; gap: 14px; margin-bottom: 22px; }
@media (min-width: 720px) {
  .buc { grid-template-columns: 1fr 1.15fr 1fr; align-items: end; }
  .buc__o:nth-child(1) { order: 2; } /* hạng 1 vào giữa và cao hơn */
  .buc__o:nth-child(2) { order: 1; }
  .buc__o:nth-child(3) { order: 3; }
}
.buc__o {
  background: linear-gradient(180deg, var(--nen-2), var(--nen-1));
  border: 1px solid var(--vien); border-radius: var(--r-to);
  padding: 18px 16px; text-align: center; box-shadow: var(--bong-2);
}
.buc__o--1 { border-color: var(--vang-dam); box-shadow: var(--bong-vang), var(--bong-2); }
.buc__hang {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; font-weight: 800;
  background: var(--nen-3); color: var(--chu-mo); margin-bottom: 8px;
}
.buc__o--1 .buc__hang { background: var(--vang); color: var(--vang-chu); }
.buc__ten { font-weight: 800; font-size: var(--b-1); overflow-wrap: anywhere; }
.buc__loai { color: var(--chu-mo); font-size: var(--b--1); }
.buc__diem { font-size: var(--b-2); font-weight: 800; color: var(--vang); }
.buc__avt {
  width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 8px;
  display: grid; place-items: center; font-weight: 800; font-size: var(--b-1);
  background: var(--nen-3); color: var(--chu-mo); border: 1px solid var(--vien-sang);
  object-fit: cover;
}

/* Bảng. Repo không có component bảng nào ngoài `.spec` 2 cột, và rule `table`
   chung giấu `thead` dưới 560px — với 7 cột là MẤT NGHĨA CỘT. Nên trên màn hẹp
   mỗi `<tr>` thành một thẻ, nhãn bơm từ `data-nhan` (hợp lệ: nằm trong
   stylesheet, không phải inline style).                                       */
.bxh { width: 100%; border-collapse: collapse; font-size: var(--b--1); }
.bxh caption { text-align: left; color: var(--chu-nhat); padding-bottom: 10px; }
.bxh th, .bxh td { padding: 11px 10px; text-align: left; border-bottom: 1px solid var(--vien); }
.bxh thead th { color: var(--vang); font-weight: 800; white-space: nowrap; }
.bxh tbody tr:hover { background: color-mix(in srgb, var(--nen-2) 60%, transparent); }
.bxh__ten { font-weight: 800; overflow-wrap: anywhere; }
.bxh__diem { font-weight: 800; color: var(--vang); }
.bxh tbody tr:nth-child(-n+3) .bxh__hang { color: var(--vang); font-weight: 800; }

@media (max-width: 660px) {
  .bxh thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .bxh, .bxh tbody, .bxh tr, .bxh td { display: block; width: auto; }
  /* 🔴 `caption` PHẢI đổi theo. Nó giữ `display: table-caption` trong khi cha đã
     thành `block` -> caption mồ côi, co lại theo nội dung. Đo được trên viewport
     360px thật: rộng **42px**, cao 119px, câu "Đang tải bảng xếp hạng…" xuống
     dòng MỖI CHỮ MỘT HÀNG. Đó là thứ người vào bằng điện thoại nhìn thấy đầu
     tiên, trước khi dữ liệu về. Không lỗi console, không cổng chặn nào bắt. */
  .bxh caption { display: block; }
  .bxh tr { padding: 12px 0; border-bottom: 1px solid var(--vien); }
  .bxh td { border: 0; padding: 2px 0; display: flex; gap: 10px; justify-content: space-between; }
  .bxh td::before { content: attr(data-nhan); color: var(--chu-nhat); }
  /* ⚠️ PHẢI viết `.bxh td.bxh__hang`, KHÔNG được `.bxh__hang` trần.
     `.bxh td` có độ đặc hiệu (0,1,1) — cao hơn `.bxh__hang` (0,1,0) — nên hai
     dòng dưới ở dạng trần **chưa từng chạy ngày nào**: thẻ trên điện thoại vẫn
     hiện "Hạng  #1" và "Người chơi  hung36acd" thay vì một dòng tiêu đề.
     Đo trên viewport 360px thật: `display` vẫn là `flex`, `::before` vẫn `"Hạng"`.
     CSS chết thì im lặng tuyệt đối — không cảnh báo, không lỗi console. */
  .bxh td.bxh__hang, .bxh td.bxh__ten { display: inline-block; }
  /* Hai ô nằm cạnh nhau thành dòng tiêu đề của thẻ. Không có khoảng này thì
     nó dính thành "#2Bui Anh Hung" — nhìn thấy ngay trên ảnh chụp 360px. */
  .bxh td.bxh__hang { margin-right: 6px; }
  .bxh td.bxh__hang::before, .bxh td.bxh__ten::before { content: none; }
  .bxh__ten { font-size: var(--b-0); }
}

/* Bốn ô tổng */
.tong { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); margin-bottom: 20px; }
@media (min-width: 720px) { .tong { grid-template-columns: repeat(4, 1fr); } }
.tong__o { background: var(--nen-1); border: 1px solid var(--vien); border-radius: var(--r); padding: 14px; }
.tong__nhan { font-size: var(--b--1); color: var(--chu-nhat); }
.tong__so { font-size: var(--b-2); font-weight: 800; }

/* Nút chuyển tab mùa / mọi thời */
.tab { display: inline-flex; gap: 4px; padding: 4px; background: var(--nen-1);
       border: 1px solid var(--vien); border-radius: var(--r-tron); margin-bottom: 18px; }
.tab button {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  color: var(--chu-mo); font: 700 var(--b--1)/1 var(--font);
  padding: 9px 16px; border-radius: var(--r-tron);
}
.tab button[aria-selected="true"] { background: var(--vang); color: var(--vang-chu); }

/* ═══ Bảng thông số (data-cfg) ═══════════════════════════════════════════ */
.thongso { width: 100%; border-collapse: collapse; }
.thongso th, .thongso td { padding: 13px 14px; text-align: left; vertical-align: top;
                           border-bottom: 1px solid var(--vien); }
.thongso th { width: 36%; color: var(--vang); font-weight: 800; }
.thongso td { color: var(--chu-mo); }
.thongso tr:last-child :is(th, td) { border-bottom: 0; }
@media (max-width: 560px) {
  .thongso, .thongso tbody, .thongso tr, .thongso th, .thongso td { display: block; width: auto; }
  .thongso tr { padding: 12px 0; border-bottom: 1px solid var(--vien); }
  .thongso th { padding: 0 0 4px; border: 0; }
  .thongso td { padding: 0; border: 0; }
}

/* ═══ Các bước ═══════════════════════════════════════════════════════════ */
.buoc { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; counter-reset: b; }
.buoc > li {
  counter-increment: b; position: relative; padding-left: 52px;
  background: var(--nen-1); border: 1px solid var(--vien);
  border-radius: var(--r); padding-block: 16px; padding-right: 16px;
}
.buoc > li::before {
  content: counter(b); position: absolute; left: 14px; top: 14px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--vang); color: var(--vang-chu);
  display: grid; place-items: center; font-weight: 800; font-size: var(--b--1);
}
.buoc h3 { margin-bottom: .25em; font-size: var(--b-0); }
.buoc p { margin: 0; color: var(--chu-mo); }

/* ═══ FAQ — <details> thuần, không JS ════════════════════════════════════
   Bàn phím, screen reader, Ctrl+F đều chạy sẵn, và Google index được nội dung
   bên trong. Một accordion tự viết bằng JS thì mất cả bốn.                    */
.faq { background: var(--nen-1); border: 1px solid var(--vien);
       border-radius: var(--r); overflow: hidden; }
.faq details + details { border-top: 1px solid var(--vien); }
.faq summary { cursor: pointer; padding: 15px 18px; font-weight: 800; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; color: var(--vang); font-weight: 800; }
.faq details[open] summary::after { content: "−"; }
.faq__than { padding: 0 18px 15px; color: var(--chu-mo); }
.faq__than > :last-child { margin-bottom: 0; }

/* ═══ Danh sách loài ═════════════════════════════════════════════════════ */
.loai { display: grid; gap: 16px; grid-template-columns: 1fr; margin: 0; }
@media (min-width: 640px) { .loai { grid-template-columns: repeat(2, 1fr); } }
.loai dt { color: var(--vang); font-weight: 800; margin-bottom: .3em; }
.loai dd { margin: 0; color: var(--chu-mo); }
.sp { display: inline-flex; align-items: center; gap: 5px; }
.sp--on { color: var(--chu); font-weight: 600; }
.sp--on b { background: var(--luc); color: #06180E; border-radius: var(--r-tron);
            padding: 0 6px; font-size: .8em; }

/* ═══ Luật ═══════════════════════════════════════════════════════════════ */
.luat { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.luat > li { padding-left: 30px; position: relative; }
.luat > li::before { content: "✕"; position: absolute; left: 6px; color: var(--do); font-weight: 800; }
.luat--ok > li::before { content: "✓"; color: var(--luc); }

/* ═══ Thẻ khủng long (gara / khủng long của tôi) ═════════════════════════ */
.dino { display: flex; flex-direction: column; gap: 12px;
        background: var(--nen-1); border: 1px solid var(--vien);
        border-radius: var(--r); padding: 14px; }
.dino__dau { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.dino__ten { font-weight: 800; font-size: var(--b-1); }
.dino__meta { color: var(--chu-nhat); font-size: var(--b--1); }
.chiso { display: grid; gap: 7px; }
.chiso__hang { display: flex; justify-content: space-between; font-size: var(--b--1); }
.chiso__so { color: var(--chu-mo); }
.o-mau { display: inline-block; width: 22px; height: 22px; border-radius: 6px;
         border: 1px solid var(--vien-sang); vertical-align: middle; }

/* ═══ Chân trang ═════════════════════════════════════════════════════════ */
.chan { border-top: 1px solid var(--vien); background: var(--nen-1);
        margin-top: clamp(2.5rem, 6vw, 4.5rem); padding-block: 28px; }
.chan__trong { display: grid; gap: 20px; }
@media (min-width: 720px) { .chan__trong { grid-template-columns: 1fr auto; align-items: start; } }
.chan__ten { font-weight: 800; font-size: var(--b-1); margin: 0 0 .2em; }
.chan__ds { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px 24px;
            grid-template-columns: repeat(2, auto); }
.chan__ds a { color: var(--chu-mo); text-decoration: none; font-size: var(--b--1); }
.chan__ds a:hover { color: var(--vang); }

/* ═══ Trạng thái rỗng / lỗi ══════════════════════════════════════════════ */
.trong { text-align: center; padding: 34px 16px; color: var(--chu-nhat); }

/* ═══════════════════════════════════════════════════════════════════════════
   LỚP TƯƠNG THÍCH cho `gara.js` và `dino3d.js`
   ═══════════════════════════════════════════════════════════════════════════
   Hai file đó dựng DOM bằng JS với một bộ tên class riêng (`stat`, `swatch`,
   `act`, `v3d`, `grid--2`, `row`…). Chúng đang chạy production, vừa được cập
   nhật (trần chỉ số + xem 3D), và một luồng làm việc khác đang đụng tới chúng.

   Nên bản thiết kế mới KHÔNG đổi tên class trong JS — nó cấp style cho đúng
   những tên đó. Đổi tên trong JS là vừa có nguy cơ phá một tính năng đang chạy,
   vừa giẫm lên việc của người khác, để đổi lấy đúng một chút gọn gàng.

   ⚠️ Khi nào dọn được: chỉ sau khi `gara.js` được viết lại có chủ đích, và
   phải cùng một lần thay đổi.                                                 */
.grid { display: grid; gap: 16px; }
@media (min-width: 720px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.dino__top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.dino__o { color: var(--chu-nhat); font-size: var(--b--1); }
.dino__nut { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }

/* Thanh chỉ số. Bề rộng do JS đặt qua thuộc tính `width` của <rect> SVG, KHÔNG
   qua `.style` — CSP `style-src 'self'` và quy ước repo cấm đụng `.style`. */
.stat { display: grid; gap: 3px; }
.stat__bar { display: block; width: 100%; height: 7px; border-radius: var(--r-tron);
             background: var(--nen-3); overflow: hidden; }
.stat__fill { fill: var(--luc); }
.stat--low .stat__fill { fill: var(--do); }
.stat__so { color: var(--chu-mo); font-size: var(--b--1); font-variant-numeric: tabular-nums; }

.swatch { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.swatch img, .swatch__pick {
  width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--vien-sang);
  padding: 0; cursor: pointer; background: var(--nen-2);
}
.swatch__pick { appearance: none; }

.act {
  appearance: none; display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 8px 16px; cursor: pointer;
  border: 1px solid var(--vien-sang); border-radius: var(--r-tron);
  background: var(--nen-2); color: var(--chu);
  font: 700 var(--b--1)/1.2 var(--font);
}
.act:hover { background: var(--nen-3); }
.act:disabled { opacity: .5; cursor: not-allowed; }
.act--primary { background: var(--vang); color: var(--vang-chu); border-color: var(--vang); }
.act--primary:hover { background: #F2C763; }

.pill--gold { border-color: var(--vang-dam); color: var(--vang); background: rgb(232 184 75 / .08); }

/* Khung xem 3D — `dino3d.js` không đụng `.style`, nó gọi setSize(w, h, false). */
.v3d { position: relative; background: var(--nen); border: 1px solid var(--vien);
       border-radius: var(--r); overflow: hidden; min-height: 260px; }
.v3d__canvas { display: block; width: 100%; height: 320px; }
.v3d__san { position: absolute; inset: 0; display: grid; place-items: center; }
.v3d__msg { color: var(--chu-nhat); font-size: var(--b--1); padding: 16px; text-align: center; }
.v3d__ghi { color: var(--chu-nhat); font-size: var(--b--1); padding: 8px 12px; }
.v3d__quay { position: absolute; right: 10px; bottom: 10px; }