/* Chiến Quốc Remaster: trang tải game.
   Bảng màu lấy từ giao diện trong game: nền xanh mực, viền vàng kim, điểm ngọc lam.
   2026-10-02 làm gọn (chủ repo: "làm đẹp lại, đơn giản hơn"): bỏ bảng so sánh, lời mở đầu, hạt sáng;
   thư viện ảnh thành ảnh trượt ngang ở đầu trang. Còn: đầu trang, "Bản 3.0 có gì", "Lời hứa",
   "Cài đặt 3 bước", "Lộ trình", chân trang. */

:root {
  --ink-900: #070d22;
  --ink-800: #0a1330;
  --ink-700: #0f1d44;
  --ink-600: #16295a;
  --gold-300: #fff1b8;
  --gold-400: #f3d98a;
  --gold-500: #e8c36a;
  --gold-600: #c99a3e;
  --jade-400: #6fd6e2;
  --text: #e9eefb;
  --muted: #a8b3d1;
  --line: rgba(232, 195, 106, .22);
  --line-strong: rgba(232, 195, 106, .5);

  --font-body: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --radius: 16px;
  --gutter: 16px;
}
@media (min-width: 720px) { :root { --gutter: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink-800);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold-400); text-decoration: none; }
a:hover { color: var(--gold-300); }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 2px solid var(--jade-400); outline-offset: 3px; border-radius: 6px; }

.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- nút ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn--sm { padding: 8px 18px; font-size: .9rem; }
.btn--lg { padding: 15px 30px; font-size: 1.05rem; }
.btn--gold {
  color: #2a1a02;
  background: linear-gradient(180deg, var(--gold-300), var(--gold-500) 55%, var(--gold-600));
  box-shadow: 0 8px 26px rgba(232, 195, 106, .3), inset 0 1px 0 rgba(255, 255, 255, .6);
}
.btn--gold:hover { color: #2a1a02; transform: translateY(-2px); box-shadow: 0 12px 32px rgba(232, 195, 106, .45), inset 0 1px 0 rgba(255, 255, 255, .6); }
.btn--ghost { color: var(--text); border: 1px solid var(--line-strong); background: rgba(15, 29, 68, .5); }
.btn--ghost:hover { color: var(--gold-300); background: rgba(22, 41, 90, .8); }

/* ---------- thanh trên ---------- */
.bar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(7, 13, 34, .85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.bar__in { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 60px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; }
.brand em { font-style: normal; color: var(--gold-500); }
.brand:hover { color: var(--text); }

/* ---------- đầu trang ---------- */
/* Nền không dùng ảnh (đã thử ảnh làm mờ: chủ repo chê "mờ khó chịu"): gradient + hoạ tiết mây lành. */
.hero {
  padding: 64px 0 72px;
  background:
    url("../assets/pattern-cloud.svg") repeat,
    radial-gradient(ellipse at 15% 0%, rgba(232, 195, 106, .16), transparent 55%),
    radial-gradient(ellipse at 90% 80%, rgba(63, 184, 201, .14), transparent 55%),
    linear-gradient(180deg, var(--ink-900), var(--ink-800));
  border-bottom: 1px solid var(--line);
}
.hero__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; align-items: center; }
.pill {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--jade-400);
  border: 1px solid rgba(111, 214, 226, .4);
  background: rgba(111, 214, 226, .08);
}
.hero__title {
  margin-top: 18px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.6rem, 7vw, 4.4rem);
  line-height: 1.05;
  background: linear-gradient(180deg, var(--gold-300), var(--gold-500) 60%, var(--gold-600));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__title span { display: block; }
.hero__lead { margin-top: 18px; font-size: 1.1rem; color: #d3dcf3; max-width: 520px; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.hero__meta { margin-top: 16px; font-size: .9rem; color: var(--muted); }

.shot {
  margin: 0;
  padding: 8px;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(243, 217, 138, .8), rgba(143, 106, 35, .5) 45%, rgba(63, 184, 201, .5));
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
.shot { position: relative; }

/* ---------- ảnh trượt ngang ở đầu trang ---------- */
.slider { min-width: 0; }
.slider__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  border-radius: 14px;
  scrollbar-width: none;
}
.slider__track::-webkit-scrollbar { display: none; }
.slide { position: relative; flex: 0 0 100%; margin: 0; scroll-snap-align: start; }
.slide img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.slide figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 28px 16px 12px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--gold-300);
  text-align: left;
  background: linear-gradient(180deg, transparent, rgba(7, 13, 34, .85));
}
.slide__tag {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
  color: #2a1a02;
  background: linear-gradient(180deg, var(--gold-300), var(--gold-500));
}
.slider__nav {
  position: absolute;
  top: 50%;
  width: 38px;
  height: 38px;
  margin-top: -19px;
  display: grid;
  place-items: center;
  padding: 0 0 3px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--gold-300);
  background: rgba(7, 13, 34, .7);
  cursor: pointer;
}
.slider__nav:hover { background: rgba(22, 41, 90, .95); }
.slider__nav[hidden] { display: none; }
.slider__nav--prev { left: 16px; }
.slider__nav--next { right: 16px; }
.slider__dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; min-height: 10px; }
.slider__dots button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(232, 195, 106, .3);
  cursor: pointer;
  transition: width .25s ease, background .25s ease;
}
.slider__dots button.is-on { width: 26px; background: var(--gold-500); }

@media (max-width: 859px) {
  .hero { padding: 40px 0 48px; }
  .hero__in { grid-template-columns: minmax(0, 1fr); gap: 32px; text-align: center; }
  .hero__lead { margin-left: auto; margin-right: auto; }
  .actions { justify-content: center; }
}
@media (max-width: 459px) {
  .actions .btn { width: 100%; }
}

/* ---------- mục ---------- */
.section { padding: 72px 0; }
.section--alt { background: linear-gradient(180deg, var(--ink-700), var(--ink-800)); border-top: 1px solid var(--line); }
@media (max-width: 719px) { .section { padding: 52px 0; } }
.title {
  text-align: center;
  margin-bottom: 36px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  color: var(--gold-400);
}

.sub { max-width: 640px; margin: -20px auto 32px; text-align: center; color: var(--muted); }

/* lưới "Bản 3.0 có gì" và "Lời hứa" */
.grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 859px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 539px) { .grid { grid-template-columns: minmax(0, 1fr); } }
.card {
  padding: 22px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(22, 41, 90, .75), rgba(15, 29, 68, .6));
  border: 1px solid var(--line);
}
.card svg {
  width: 40px;
  height: 40px;
  padding: 8px;
  border-radius: 12px;
  fill: none;
  stroke: var(--gold-400);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  background: rgba(232, 195, 106, .12);
  border: 1px solid var(--line);
}
.card h3 { margin-top: 14px; font-size: 1.08rem; color: var(--gold-300); }
.card h3 a { color: inherit; border-bottom: 1px dashed rgba(232, 195, 106, .45); }
.card h3 a:hover { color: var(--gold-400); }
.card p { margin-top: 6px; font-size: .95rem; color: var(--muted); }
/* Điện thoại: biểu tượng nằm cạnh tiêu đề cho thẻ thấp, đỡ phải cuộn dài. */
@media (max-width: 539px) {
  .card { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; padding: 18px; }
  .card svg { grid-row: span 2; }
  .card h3 { margin-top: 0; }
}
.card--gift { border-color: var(--line-strong); background: linear-gradient(180deg, rgba(232, 195, 106, .14), rgba(15, 29, 68, .6)); }
.card code {
  font-family: ui-monospace, Consolas, monospace;
  font-size: .95em;
  padding: 1px 8px;
  border-radius: 6px;
  color: #2a1a02;
  background: var(--gold-400);
}

/* "Cài đặt 3 bước" */
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 859px) { .steps { grid-template-columns: minmax(0, 1fr); } }
.steps li {
  counter-increment: step;
  position: relative;
  padding: 22px 22px 22px 74px;
  border-radius: var(--radius);
  background: rgba(7, 13, 34, .5);
  border: 1px solid var(--line);
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 20px;
  top: 20px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
  color: #2a1a02;
  background: linear-gradient(180deg, var(--gold-300), var(--gold-500));
}
.steps h3 { font-size: 1.05rem; color: var(--gold-300); }
.steps p { margin-top: 6px; font-size: .95rem; color: var(--muted); overflow-wrap: anywhere; }

.install { margin: 32px auto 0; max-width: 640px; text-align: center; }
.note { margin-top: 14px; font-size: .88rem; color: var(--muted); }
@media (max-width: 459px) { .install .btn { width: 100%; } }

.spec { margin: 32px auto 0; max-width: 860px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.spec div { padding: 10px 16px; border-radius: 12px; background: rgba(7, 13, 34, .5); border: 1px solid var(--line); }
.spec dt { font-size: .78rem; font-weight: 600; color: var(--gold-500); }
.spec dd { margin: 0; font-size: .95rem; }
@media (max-width: 459px) { .spec div { flex: 1 1 100%; display: flex; justify-content: space-between; gap: 12px; align-items: baseline; } }

/* ---------- lộ trình ---------- */
.timeline { list-style: none; margin: 0 auto; padding: 0; max-width: 720px; position: relative; }
.timeline::before { content: ""; position: absolute; left: 9px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, var(--gold-600), var(--jade-400)); opacity: .6; }
.timeline li { position: relative; padding: 0 0 28px 44px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--gold-600);
  background: var(--ink-800);
}
.timeline li.is-done::before { background: var(--gold-500); border-color: var(--gold-300); box-shadow: 0 0 14px rgba(232, 195, 106, .6); }
.timeline li.is-next::before { border-color: var(--jade-400); }
.timeline time, .timeline .tl-when { font-size: .85rem; font-weight: 600; color: var(--jade-400); }
.timeline h3 { margin-top: 2px; font-size: 1.15rem; color: var(--gold-300); }
.timeline p { margin-top: 6px; color: var(--muted); }

/* ---------- chân trang ---------- */
.foot { padding: 40px 0; background: var(--ink-900); border-top: 1px solid var(--line); }
.foot__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 40px; }
.foot__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: .95rem; color: var(--muted); }
.foot__links a { text-decoration: underline; text-underline-offset: 3px; }
.foot__small { margin-top: 10px; font-size: .85rem; color: var(--muted); }
.foot__legal { grid-column: 1 / -1; margin-top: 0; padding-top: 18px; border-top: 1px solid var(--line); }
@media (max-width: 719px) { .foot__in { grid-template-columns: minmax(0, 1fr); } }

/* ---------- thanh trên: link phụ (Hướng dẫn) ---------- */
.bar__nav { display: flex; align-items: center; gap: 18px; }
.bar__link { color: var(--text); font-weight: 600; font-size: .95rem; }
.bar__link:hover, .bar__link[aria-current="page"] { color: var(--gold-400); }
@media (max-width: 379px) { .bar__nav { gap: 12px; } .brand span { font-size: 1rem; } }

/* ---------- trang hướng dẫn (huong-dan/index.html) ---------- */
/* 2026-10-04 (chủ repo: "làm dạng tab, cần có ảnh, viết ngắn gọn cho game thủ"): 5 tab lớn dính dưới
   thanh trên, tab con dạng chip, mỗi mục một thẻ chữ + ảnh chụp game. Tab do js/tabs.js bật; không JS
   thì mọi mục hiện liền nhau, thanh tab thành mục lục neo. */
.guide-hero { padding: 40px 0 32px; text-align: center; background:
    url("../assets/pattern-cloud.svg") repeat,
    radial-gradient(ellipse at 50% 0%, rgba(232, 195, 106, .16), transparent 60%),
    linear-gradient(180deg, var(--ink-900), var(--ink-800)); }
.guide-hero .hero__title { margin-top: 0; font-size: clamp(2.2rem, 6vw, 3.4rem); }
.guide-hero .hero__lead { margin: 12px auto 0; }

/* Tab lớn: dính ngay dưới thanh trên (60 px); điện thoại vuốt ngang. */
.tabs-bar { position: sticky; top: 60px; z-index: 9; background: rgba(7, 13, 34, .92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 14px 16px 11px;
  font-weight: 600; font-size: .98rem; color: var(--muted); border-bottom: 3px solid transparent; white-space: nowrap; }
.tabs a:first-child { margin-left: auto; }
.tabs a:last-child { margin-right: auto; }
.tabs a:hover { color: var(--gold-300); }
.tabs a.is-on { color: var(--gold-300); border-bottom-color: var(--gold-500); }
.tabs svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Điện thoại: bỏ biểu tượng, thu lề để đủ 5 tab trong 375 px (có biểu tượng thì "Tiện ích" khuất). */
@media (max-width: 539px) {
  .tabs { padding: 0 4px; gap: 0; }
  .tabs a { padding: 12px 5px 9px; font-size: .82rem; }
  .tabs svg { display: none; }
}
/* 6 tab (thêm Chủ tuyến 2026-10-05): chữ .82rem thì hàng tab rộng 429 px, "Tiện ích" khuất ở 375 px.
   Thu chữ và lề để vẫn một hàng ở 375 px và 360 px (cỡ màn Android phổ biến). */
@media (max-width: 419px) {
  .tabs { padding: 0 2px; }
  .tabs a { padding: 12px 3px 9px; font-size: .74rem; }
}
@media (max-width: 374px) { .tabs a { font-size: .7rem; } }

/* Có tab thì chỉ hiện mục đang chọn; neo #id chừa chỗ cho thanh trên + thanh tab. */
html.tabs-on { scroll-padding-top: 124px; }
html.tabs-on .tab-panel:not(.is-active), html.tabs-on .sub-panel:not(.is-active) { display: none; }
.tab-panel { padding: 32px 0 64px; }
.tab-panel + .tab-panel { border-top: 1px solid var(--line); }
html.tabs-on .tab-panel + .tab-panel { border-top: 0; }
.tab-panel .lead { max-width: 720px; margin: 0 auto 20px; text-align: center; color: var(--muted); }
.tab-panel .lead strong { color: var(--gold-300); font-weight: 600; }

/* Tab con: chip; điện thoại một hàng vuốt ngang. */
.subtabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 20px; }
.subtabs a { padding: 7px 16px; border-radius: 999px; font-size: .92rem; font-weight: 600; color: var(--text);
  border: 1px solid var(--line-strong); background: rgba(15, 29, 68, .6); white-space: nowrap; }
.subtabs a:hover { color: var(--gold-300); background: rgba(22, 41, 90, .9); }
.subtabs a.is-on { color: #2a1a02; border-color: var(--gold-400);
  background: linear-gradient(180deg, var(--gold-300), var(--gold-500)); }
@media (max-width: 539px) {
  .subtabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none;
    margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 2px; }
  .subtabs::-webkit-scrollbar { display: none; }
}
.guide { display: grid; gap: 16px; }

/* Một mục: thẻ, đầu (tên + chip thông tin nhanh), chữ, ảnh chụp game.
   Máy tính: chữ trái, ảnh phải (dính khi cuộn). `--wide` (môn phái): ảnh cạnh đầu, hai nhánh chiêu
   trải hết chiều ngang. Điện thoại: đầu, ảnh, chữ. */
.gcard { padding: 24px; border-radius: var(--radius); border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(22, 41, 90, .7), rgba(15, 29, 68, .55)); min-width: 0; }
@media (max-width: 539px) { .gcard { padding: 18px; } }
.gpanel { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-areas: "head shot" "text shot";
  grid-template-rows: auto 1fr; gap: 0 32px; align-items: start; }
.gpanel--wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-areas: "head shot" "text text";
  grid-template-rows: auto auto; }
.ghead { grid-area: head; min-width: 0; }
.gtext { grid-area: text; min-width: 0; }
.gshot { grid-area: shot; position: sticky; top: 140px; margin: 0; }
.gpanel--wide .gshot { position: static; }
@media (max-width: 859px) {
  .gpanel, .gpanel--wide { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "shot" "text"; }
  .gshot { position: static; margin-top: 16px; }
}
.gshot img { width: 100%; border-radius: 12px; border: 1px solid var(--line-strong); box-shadow: 0 14px 36px rgba(0, 0, 0, .45); }
.gshot figcaption { margin-top: 8px; font-size: .85rem; color: var(--muted); text-align: center; }

.gcard h3 { font-size: 1.3rem; color: var(--gold-300); }
.gcard h4 { margin: 18px 0 6px; font-size: 1rem; color: var(--gold-400); }
.gcard p, .gcard li { color: #d3dcf3; font-size: .97rem; }
.gcard p { margin-top: 10px; }
.gcard ul, .gcard ol { margin: 8px 0 0; padding-left: 1.2em; display: grid; gap: 5px; }
.gcard strong { color: var(--gold-300); font-weight: 600; }
.gcard kbd { padding: 0 6px; border-radius: 5px; font-family: var(--font-body); font-size: .88em; font-weight: 600;
  color: var(--gold-300); border: 1px solid var(--line-strong); background: rgba(7, 13, 34, .6); }
.facts { list-style: none; margin: 12px 0 0 !important; padding: 0 !important; display: flex !important; flex-wrap: wrap; gap: 8px !important; }
.facts li { padding: 3px 12px; border-radius: 999px; font-size: .85rem; color: var(--jade-400);
  border: 1px solid rgba(111, 214, 226, .35); background: rgba(111, 214, 226, .07); }
/* Icon món cạnh tên mục (Bùa Ma Thuật, ảnh 79x128). */
.gicon { display: inline-block; width: 32px; height: auto; margin-right: 10px; vertical-align: middle;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .5)); }
.tip { margin-top: 14px !important; padding: 10px 14px; border-radius: 10px; font-size: .92rem !important;
  border-left: 3px solid var(--gold-500); background: rgba(232, 195, 106, .08); }
/* Luật bản đang chạy khi trang đã ghi luật bản kế tiếp (2026-10-07): gập lại, bấm để xem. Phát bản mới thì xoá khối. */
.was { margin-top: 14px; padding: 8px 14px; border-radius: 10px; border: 1px dashed var(--line); }
.was summary { cursor: pointer; font-size: .9rem; color: var(--muted); }
.was[open] summary { margin-bottom: 6px; }

/* Danh sách bước: nhãn vàng bên trái (10 việc sư môn...). */
.steps-mini { list-style: none; padding: 0 !important; gap: 8px !important; }
.steps-mini li { display: grid; grid-template-columns: 6.2em minmax(0, 1fr); gap: 10px; align-items: baseline; }
.steps-mini b { padding: 1px 6px; border-radius: 6px; font-size: .8rem; font-weight: 600; text-align: center;
  color: #2a1a02; background: var(--gold-500); }

/* Bảng số liệu: điện thoại cuộn ngang trong khung, trang không tràn. */
.tbl { margin-top: 12px; overflow-x: auto; border-radius: 10px; border: 1px solid var(--line); }
.tbl table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tbl th, .tbl td { padding: 7px 12px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl th { color: var(--gold-500); font-weight: 600; background: rgba(7, 13, 34, .5); }
.tbl tr:last-child td { border-bottom: 0; }
/* Bảng thẻ lật theo nhịp (2026-10-07): ô nhiều chữ, cho xuống dòng thay vì cuộn ngang. */
.tbl--cards td { white-space: normal; }

/* Môn phái: hai nhánh cạnh nhau. */
.sect__role { display: block; margin-top: 2px; font-size: .92rem; color: var(--jade-400); font-weight: 600; }
.branches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
@media (max-width: 719px) { .branches { grid-template-columns: minmax(0, 1fr); } }
.branch { padding: 16px; border-radius: 12px; background: rgba(7, 13, 34, .45); border: 1px solid var(--line); min-width: 0; }
.branch h4 { margin: 0; }
.branch > p { margin-top: 2px; font-size: .9rem; color: var(--muted); }
.skills { list-style: none; padding: 0 !important; margin-top: 10px !important; gap: 8px !important; }
.skills li { font-size: .93rem; }
.skills b { color: var(--gold-300); font-weight: 600; }
.skills .lv { display: inline-block; min-width: 3.4em; margin-right: 6px; padding: 0 6px; border-radius: 6px;
  font-size: .78rem; font-weight: 600; text-align: center; color: #2a1a02; background: var(--gold-500); }
.badge { display: inline-block; margin-left: 8px; padding: 2px 10px; border-radius: 999px; vertical-align: middle;
  font-family: var(--font-body); font-size: .75rem; font-weight: 600; color: #2a1a02; background: var(--jade-400); }
.badge--lock { color: var(--muted); background: rgba(168, 179, 209, .15); border: 1px solid rgba(168, 179, 209, .35); }

/* Chủ tuyến (tab #chu-tuyen, 2026-10-05): bảng nhiệm vụ nhiều chữ nên cho xuống dòng (bảng `.tbl` thường
   giữ một dòng). Điện thoại (< 540 px): mỗi nhiệm vụ thành một khối dọc (tên, việc, quà), không cuộn ngang:
   cuộn ngang bảng ba cột chữ dài thì phải vuốt qua lại từng dòng. */
.tbl--quest th, .tbl--quest td, .tbl td.wrap-cell { white-space: normal; vertical-align: top; }
.tbl--quest td:first-child { min-width: 10em; }
.tbl--quest td.qgift { min-width: 14em; }
.tbl--quest b { color: var(--text); font-weight: 600; }
.qlv { display: block; margin: 1px 0 2px; font-size: .82rem; color: var(--jade-400); }
.tbl tfoot td { color: var(--gold-300); font-weight: 600; background: rgba(232, 195, 106, .06);
  border-top: 1px solid var(--line-strong); }
@media (max-width: 539px) {
  .tbl--quest table, .tbl--quest tbody, .tbl--quest tfoot, .tbl--quest tr, .tbl--quest td { display: block; }
  .tbl--quest thead { display: none; }
  .tbl--quest tr { padding: 10px 12px; border-bottom: 1px solid var(--line); }
  .tbl--quest tbody:last-child tr:last-child { border-bottom: 0; }
  .tbl--quest td, .tbl--quest tfoot td { min-width: 0 !important; padding: 2px 0; border: 0; background: none; }
  .tbl--quest tfoot tr { background: rgba(232, 195, 106, .06); border-top: 1px solid var(--line-strong); }
  .tbl--quest td.qgift::before { content: "Qu\E0:"; display: block; font-size: .82rem; font-weight: 600; color: var(--gold-500); }
}

/* ---------- video trailer (trang chủ, #trailer) ---------- */
.trailer {
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(232, 195, 106, .14), transparent 60%),
    radial-gradient(ellipse at 50% 100%, rgba(255, 140, 170, .08), transparent 55%),
    linear-gradient(180deg, var(--ink-800), var(--ink-900));
  border-bottom: 1px solid var(--line);
}
.trailer__pill { margin-bottom: 14px; }
.trailer__frame {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding: 8px;
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(243, 217, 138, .9), rgba(143, 106, 35, .55) 45%, rgba(63, 184, 201, .55));
  box-shadow: 0 0 0 1px rgba(243, 217, 138, .25), 0 30px 80px rgba(0, 0, 0, .6), 0 0 90px rgba(232, 195, 106, .18);
}
.trailer__frame video { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 15px; background: #000; }
.trailer__play {
  position: absolute; left: 50%; top: 50%;
  width: 92px; height: 92px; margin: -46px 0 0 -46px;
  border-radius: 50%; border: 2px solid rgba(255, 241, 184, .85); cursor: pointer;
  background: radial-gradient(circle, rgba(232, 195, 106, .95), rgba(201, 154, 62, .9));
  box-shadow: 0 0 0 10px rgba(232, 195, 106, .2), 0 12px 40px rgba(0, 0, 0, .55);
  transition: transform .2s ease, box-shadow .2s ease;
}
.trailer__play svg { width: 40px; height: 40px; margin-left: 6px; fill: #2a1a02; }
.trailer__play:hover, .trailer__play:focus-visible { transform: scale(1.08); box-shadow: 0 0 0 16px rgba(232, 195, 106, .22), 0 12px 40px rgba(0, 0, 0, .55); }
@media (prefers-reduced-motion: no-preference) {
  .trailer__play:not([hidden]) { animation: trailer-pulse 2.4s ease-in-out infinite; }
}
@keyframes trailer-pulse { 50% { box-shadow: 0 0 0 18px rgba(232, 195, 106, .08), 0 12px 40px rgba(0, 0, 0, .55); } }
@media (max-width: 459px) {
  .trailer__frame { padding: 5px; border-radius: 16px; }
  .trailer__play { width: 68px; height: 68px; margin: -34px 0 0 -34px; }
  .trailer__play svg { width: 30px; height: 30px; }
}

/* ba thẻ ảnh dưới video, dẫn sang trang hướng dẫn */
.showcase { list-style: none; margin: 28px auto 0; padding: 0; max-width: 900px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; text-align: left; }
@media (max-width: 719px) { .showcase { grid-template-columns: minmax(0, 1fr); } }
.showcase__item { display: flex; flex-direction: column; height: 100%; overflow: hidden; color: var(--muted);
  border-radius: var(--radius); border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(22, 41, 90, .75), rgba(15, 29, 68, .6));
  transition: transform .2s ease, border-color .2s ease; }
.showcase__item:hover, .showcase__item:focus-visible { transform: translateY(-3px); border-color: var(--line-strong); }
.showcase__item img { width: 100%; height: 150px; object-fit: cover; object-position: center 40%; display: block; }
.showcase__body { display: block; padding: 14px 16px 16px; font-size: .92rem; }
.showcase__body strong { display: block; margin-bottom: 4px; font-size: 1.05rem; color: var(--gold-300); }
@media (max-width: 719px) {
  .showcase__item { flex-direction: row; }
  .showcase__item img { width: 120px; height: auto; min-height: 96px; flex: 0 0 120px; }
}

.hero__watch { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-weight: 600; color: var(--gold-400); }
.hero__watch svg { width: 22px; height: 22px; padding: 4px; border-radius: 50%; fill: #2a1a02; background: var(--gold-500); }
.swatch { display: inline-block; width: .8em; height: .8em; margin-right: 8px; border-radius: 50%; vertical-align: -.05em;
  background: var(--c); box-shadow: 0 0 8px var(--c); }

/* ---------- thanh trên: 3 mục (Hướng dẫn, Phiên bản, Tải game), 2026-10-06 ----------
   Thêm "Phiên bản" thì logo + tên + 3 mục rộng ~500 px: màn hẹp ẩn chữ tên (giữ logo, có aria-label),
   thu chữ link để vừa 360 px. */
@media (max-width: 559px) {
  .bar__in { gap: 8px; }
  .bar .brand span { display: none; }
  .bar__nav { gap: 14px; }
  .bar__link { font-size: .88rem; }
  .bar__nav .btn--sm { padding: 7px 14px; font-size: .85rem; }
}
@media (max-width: 379px) { .bar__nav { gap: 10px; } .bar__nav .btn--sm { padding: 7px 11px; } }

/* ---------- trang phiên bản (làm lại 2026-10-27, chủ repo: "rối, làm tinh giản gọn gàng lại") ----------
   phien-ban/index.html: danh sách gọn, mỗi bản một dòng .rrow, nhóm theo số bản lớn .rseries, bản mới nhất khung .rlatest.
   phien-ban/<bản>/index.html: đầu trang .rhero, khung tóm tắt .rsum (kèm số mục mỗi nhóm), ghi chú .rnote,
   mỗi nhóm một thẻ .rgroup (Tính năng mới vàng, Cân bằng ngọc, Giao diện tím nhạt, Sửa lỗi hồng), chuyển bản trước / sau .pnav. */
.rhero { padding: 28px 0 24px; }
.rhero .wrap { max-width: calc(860px + 2 * var(--gutter)); }
.rhero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 10px; }
.rhero__date { font-weight: 600; color: var(--jade-400); }
.rtag { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .75rem; font-weight: 600; line-height: 1.5;
  white-space: nowrap; color: #04262b; background: var(--jade-400); }
.rtag--new { color: #2a1a02; background: linear-gradient(180deg, var(--gold-300), var(--gold-500)); }
.rtag--gold { color: #2a1a02; background: var(--gold-400); }
.rtag--muted { color: var(--muted); background: rgba(168, 179, 209, .15); border: 1px solid rgba(168, 179, 209, .35); }

.rbody { padding-top: 28px; padding-bottom: 64px; }
.rdoc { max-width: 860px; margin: 0 auto; display: grid; gap: 16px; }
.rdoc > * { min-width: 0; }
.rsum, .rgroup, .rlatest { padding: 20px 24px; border-radius: var(--radius); border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(22, 41, 90, .7), rgba(15, 29, 68, .55)); }
@media (max-width: 539px) { .rsum, .rgroup, .rlatest { padding: 16px 16px; } }
.rsum { border-color: var(--line-strong); border-left: 4px solid var(--gold-500);
  background: radial-gradient(ellipse at 0% 0%, rgba(232, 195, 106, .14), transparent 60%), linear-gradient(180deg, rgba(22, 41, 90, .85), rgba(15, 29, 68, .65)); }
.rsum h2, .rgroup h2 { font-size: 1.15rem; font-weight: 700; color: var(--gold-300); }
.rsum ul, .rgroup ul, .rlatest ul { margin: 8px 0 0; padding-left: 1.2em; display: grid; gap: 6px; }
.rsum li { color: var(--text); font-size: 1rem; }
.rsum li::marker, .rgroup li::marker, .rlatest li::marker { color: var(--gold-600); }
.rsum__counts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.rcount { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: .85rem; font-weight: 600;
  color: var(--text); border: 1px solid var(--line); background: rgba(7, 13, 34, .45); }
.rcount::before { content: ""; width: 9px; height: 9px; border-radius: 3px; background: var(--c, var(--gold-500)); }
.rcount b { color: var(--gold-300); }
.rcount:hover { color: var(--gold-300); border-color: var(--line-strong); }
.rnote { padding: 12px 16px; border-radius: 12px; font-size: .95rem; color: #d3dcf3;
  border-left: 3px solid var(--jade-400); background: rgba(111, 214, 226, .07); }
.rnote a { text-decoration: underline; text-underline-offset: 3px; }

.rgroup { scroll-margin-top: 76px; border-top: 3px solid var(--c, var(--gold-500)); }
.rgroup h2 { display: flex; align-items: center; gap: 10px; color: var(--text); }
.rgroup h2::before { content: ""; width: 12px; height: 12px; border-radius: 3px; background: var(--c, var(--gold-500)); }
.rgroup h3 { margin: 18px 0 2px; font-size: .98rem; font-weight: 700; color: var(--gold-400); }
.rgroup li { color: #d3dcf3; font-size: .97rem; }
.rgroup strong { color: var(--gold-300); font-weight: 600; }
.rgroup a { text-decoration: underline; text-decoration-color: rgba(232, 195, 106, .45); text-underline-offset: 3px; }
.rgroup kbd { padding: 0 6px; border-radius: 5px; font-family: var(--font-body); font-size: .88em; font-weight: 600;
  color: var(--gold-300); border: 1px solid var(--line-strong); background: rgba(7, 13, 34, .6); }
.rgroup code { font-family: ui-monospace, Consolas, monospace; font-size: .92em; padding: 1px 7px; border-radius: 6px;
  color: #2a1a02; background: var(--gold-400); }
.rgroup--g-new, .rcount--g-new { --c: var(--gold-500); }
.rgroup--g-bal, .rcount--g-bal { --c: var(--jade-400); }
.rgroup--g-ui, .rcount--g-ui { --c: #b9a6ff; }
.rgroup--g-fix, .rcount--g-fix { --c: #f29b8b; }
.rgroup--x, .rcount--x { --c: var(--muted); }
.rdoc .pnav { margin-top: 12px; }
/* Ảnh trong trang bản (từ 8.0.0): lưới 2 cột, điện thoại 1 cột; ảnh JPEG rộng <= 960 px ở assets/img/phien-ban/<bản>/. */
.rshots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.rshots--one { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
.rshot { margin: 0; }
.rshot img { width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line-strong); box-shadow: 0 10px 26px rgba(0, 0, 0, .4); }
.rshot figcaption { margin-top: 6px; font-size: .85rem; color: var(--muted); text-align: center; }
@media (max-width: 539px) { .rshots { grid-template-columns: minmax(0, 1fr); } }

/* Danh sách */
.rlatest { display: block; color: var(--text); border-color: var(--line-strong); transition: border-color .2s ease;
  background: radial-gradient(ellipse at 0% 0%, rgba(232, 195, 106, .18), transparent 60%), linear-gradient(180deg, rgba(22, 41, 90, .85), rgba(15, 29, 68, .65)); }
.rlatest:hover { color: var(--text); border-color: var(--gold-400); }
.rlatest__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.rlatest__ver { display: block; margin-top: 6px; font-family: var(--font-display); font-weight: 800; font-size: 1.9rem; line-height: 1.15; color: var(--gold-400); }
.rlatest li { color: #d3dcf3; }
.rlatest .btn { margin-top: 14px; }
.rseries { margin-top: 18px; }
.rseries h2 { font-family: var(--font-display); font-size: 1.45rem; color: #f3eee2; }
.rseries h2 small { margin-left: 8px; font-family: var(--font-body); font-size: .85rem; font-weight: 500; color: var(--muted); }
.rseries__sub { margin-top: 2px; color: var(--muted); font-size: .92rem; }
.rlist { list-style: none; margin: 10px 0 0; padding: 0; border-radius: 14px; border: 1px solid var(--line); overflow: hidden;
  background: rgba(15, 29, 68, .5); }
.rlist li + li { border-top: 1px solid var(--line); }
.rrow { display: grid; grid-template-columns: 72px 92px minmax(0, 1fr); gap: 4px 14px; align-items: baseline; padding: 12px 18px;
  color: var(--text); transition: background .2s ease; }
.rrow:hover { color: var(--text); background: rgba(232, 195, 106, .07); }
.rrow__ver { font-weight: 700; font-size: 1.05rem; color: var(--gold-400); }
.rrow__date { font-size: .88rem; font-weight: 600; color: var(--jade-400); }
.rrow__sum { color: #d3dcf3; font-size: .95rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rrow__sum .rtag { margin-right: 8px; vertical-align: .08em; }
@media (max-width: 619px) {
  .rrow { grid-template-columns: auto minmax(0, 1fr); padding: 12px 14px; }
  .rrow__sum { grid-column: 1 / -1; -webkit-line-clamp: 3; }
}
.vend { margin-top: 20px; text-align: center; color: var(--muted); font-size: .9rem; }

/* =====================================================================
   Trang chủ làm lại (2026-10-06, chủ repo: "giờ xấu quá chưa thấy cuốn hút").
   Đầu trang toàn khung: ảnh bìa trailer (máy tính: video tắt tiếng chạy lặp), ảnh để RÕ, chỉ phủ tối dải bên
   trái sau chữ và mép dưới (chủ repo từng chê nền mờ, nền phủ tối cả khung là "xỉn"). Điện thoại: ảnh ở trên,
   chữ dưới. Hiệu ứng: CSS thuần; xuất hiện khi cuộn dùng animation-timeline: view() (trình duyệt không có thì
   hiện sẵn, không ẩn gì). ===================================================================== */

/* ---------- đầu trang (lần 3: ảnh Đào Hoa phủ toàn khung) ----------
   Lớp màu: tối dần về bên trái (khối chữ nằm trên sông) và mép dưới (dải số liệu), giữ hoa đào bên phải rõ.
   Điện thoại: ảnh dọc riêng, tối dần từ dưới lên, chữ căn giữa. */
/* Không phóng ảnh quá cỡ gốc (chủ repo: "ảnh nền to quá bị mờ") và KHÔNG làm mờ hai bên (chủ repo 2026-10-06): hai ảnh
   chụp từ game (`./run.sh shot --demo-hero`, tools/README "Ảnh nền nhân vật"): màn <= 1508 px dùng bản 1508x1131 (nhân vật to,
   1440 px hiện 0,955 lần), màn rộng hơn dùng bản rộng 2880x1200 zoom 1 (1920 px: 0,67 lần; 2560 px: 0,89 lần), luôn <= 1:1.
   Màn rộng hơn 2880 px (hiếm): khung ảnh dừng ở 2880, hai bên nền tối trơn. */
.hero3 { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column;
  min-height: clamp(560px, 74vh, 660px); background: var(--ink-900); border-bottom: 1px solid var(--line); }
.hero3__bg { position: absolute; top: 0; bottom: 0; left: 50%; width: 100%; max-width: 2880px; transform: translateX(-50%); z-index: -2; }
.hero3__bg picture { display: block; width: 100%; height: 100%; }
.hero3__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
@media (min-width: 1509px) { .hero3__bg img { object-position: 60% 45%; } }
.hero3::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(7, 13, 34, .84) 0%, rgba(7, 13, 34, .66) 32%, rgba(7, 13, 34, .22) 56%, rgba(7, 13, 34, 0) 74%),
    linear-gradient(0deg, rgba(7, 13, 34, .92) 0%, rgba(7, 13, 34, .35) 18%, rgba(7, 13, 34, 0) 36%),
    linear-gradient(180deg, rgba(7, 13, 34, .45) 0%, rgba(7, 13, 34, 0) 16%); }

.hero3__in { flex: 1; display: flex; align-items: center; padding-top: 48px; padding-bottom: 40px; }
.hero3__copy { max-width: 620px; }
.hero2__news { display: inline-flex; align-items: center; gap: 10px; padding: 5px 12px 5px 5px; border-radius: 999px;
  font-size: .9rem; font-weight: 600; color: var(--gold-300); border: 1px solid var(--line-strong);
  background: rgba(7, 13, 34, .62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: border-color .2s ease, background .2s ease; }
.hero2__news:hover { color: var(--gold-300); border-color: var(--gold-400); background: rgba(22, 41, 90, .85); }
.hero2__new { padding: 3px 10px; border-radius: 999px; font-size: .75rem; color: #2a1a02;
  background: linear-gradient(180deg, var(--gold-300), var(--gold-500)); white-space: nowrap; }
.hero2__news svg { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* Chữ đầu trang tiết chế (chủ repo 2026-10-06 "làm lại chuyên nghiệp hơn, nhìn xấu quá màu mè"): bỏ gradient vàng / hồng,
   tiêu đề màu ngà trơn, "Remaster" vàng trầm trơn nét mảnh hơn, dòng nhỏ xám xanh, bóng chữ nhẹ. */
.hero3__kicker { margin-top: 28px; display: flex; align-items: center; gap: 12px; font-size: .84rem; font-weight: 600;
  letter-spacing: .08em; color: #b9c4dc; text-shadow: 0 1px 8px rgba(0, 0, 0, .55); }
.hero3__kicker::before { content: ""; width: 28px; height: 1px; background: rgba(217, 181, 106, .8); }
.hero3__title { margin-top: 12px; font-family: var(--font-display); font-weight: 700; line-height: 1.02;
  letter-spacing: -.01em; font-size: clamp(2.6rem, 6.2vw, 4.8rem); color: #f3eee2;
  text-shadow: 0 2px 22px rgba(0, 0, 0, .5); }
.hero3__title span { display: block; font-weight: 500; color: #d9b56a; }
.hero3__tag { margin-top: 16px; font-size: clamp(1.05rem, 1.8vw, 1.22rem); font-weight: 500; color: #e8e2d3;
  letter-spacing: .01em; text-shadow: 0 1px 10px rgba(0, 0, 0, .6); }
.hero3__lead { margin-top: 10px; max-width: 520px; font-size: 1.08rem; color: #e6ecfb; text-shadow: 0 1px 10px rgba(0, 0, 0, .75); }
.hero3__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.hero3__actions .btn--ghost { background: rgba(7, 13, 34, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hero3__meta { margin-top: 14px; font-size: .9rem; color: #c3cde6; text-shadow: 0 1px 8px rgba(0, 0, 0, .8); }
.hero3__meta a { color: var(--gold-400); text-decoration: underline; text-underline-offset: 3px; }
.hero3 .hero__watch { text-shadow: 0 1px 8px rgba(0, 0, 0, .8); }

/* Dải số liệu: thanh kính mờ ở chân đầu trang. */
.hero3__band { position: relative; border-top: 1px solid rgba(232, 195, 106, .3);
  background: rgba(7, 13, 34, .66); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.hero3__stats { list-style: none; margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hero3__stats li { display: flex; align-items: center; gap: 12px; padding: 18px 16px; min-width: 0; }
.hero3__stats li + li { border-left: 1px solid var(--line); }
/* Số dùng chữ thân bài: Playfair có số kiểu cổ (7, 5, 3 thòng xuống dưới dòng), đứng cạnh chữ trông lệch. */
.hero3__stats b { font-family: var(--font-body); font-weight: 700; font-size: 2.1rem; line-height: 1; color: var(--gold-400);
  text-shadow: 0 0 18px rgba(232, 195, 106, .35); }
.hero3__stats span { font-size: .88rem; line-height: 1.35; color: var(--muted); }

/* Cánh hoa đào bay (CSS thuần): mỗi <i> một cánh, vị trí / nhịp / cỡ khác nhau. */
.petals { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.petals i { position: absolute; top: -6%; left: var(--x); width: var(--s); height: calc(var(--s) * .72);
  border-radius: 80% 0 80% 0; opacity: .85;
  background: radial-gradient(ellipse at 30% 30%, #fff0f6, #ffb3cf 55%, #f07aa6);
  box-shadow: 0 0 6px rgba(255, 170, 200, .4); animation: petal-fall var(--d) linear var(--w) infinite; }
.petals i:nth-child(1) { --x: 6%; --s: 12px; --d: 13s; --w: -2s; }
.petals i:nth-child(2) { --x: 14%; --s: 9px; --d: 16s; --w: -9s; }
.petals i:nth-child(3) { --x: 23%; --s: 14px; --d: 12s; --w: -5s; }
.petals i:nth-child(4) { --x: 31%; --s: 8px; --d: 18s; --w: -12s; }
.petals i:nth-child(5) { --x: 40%; --s: 11px; --d: 14s; --w: -1s; }
.petals i:nth-child(6) { --x: 48%; --s: 13px; --d: 15s; --w: -7s; }
.petals i:nth-child(7) { --x: 56%; --s: 9px; --d: 17s; --w: -14s; }
.petals i:nth-child(8) { --x: 63%; --s: 15px; --d: 12.5s; --w: -4s; }
.petals i:nth-child(9) { --x: 70%; --s: 10px; --d: 16.5s; --w: -10s; }
.petals i:nth-child(10) { --x: 77%; --s: 12px; --d: 13.5s; --w: -6s; }
.petals i:nth-child(11) { --x: 84%; --s: 8px; --d: 19s; --w: -15s; }
.petals i:nth-child(12) { --x: 90%; --s: 14px; --d: 14.5s; --w: -3s; }
.petals i:nth-child(13) { --x: 95%; --s: 10px; --d: 17.5s; --w: -11s; }
.petals i:nth-child(14) { --x: 52%; --s: 7px; --d: 20s; --w: -17s; }
@keyframes petal-fall {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); }
  25% { transform: translate3d(40px, 26vh, 0) rotate(110deg); }
  50% { transform: translate3d(-10px, 52vh, 0) rotate(200deg); }
  75% { transform: translate3d(50px, 78vh, 0) rotate(300deg); }
  100% { transform: translate3d(10px, 105vh, 0) rotate(400deg); }
}
@media (prefers-reduced-motion: reduce) { .petals { display: none; } }

@media (max-width: 859px) {
  .hero3__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero3__stats li:nth-child(3) { border-left: 0; }
  .hero3__stats li:nth-child(n + 3) { border-top: 1px solid var(--line); }
}
@media (max-width: 719px) {
  .hero3 { min-height: 0; }
  .hero3__bg img { object-position: 78% 50%; } /* nhân vật cưỡi Hỏa Hồ Ly ở nửa phải ảnh (cầu gỗ) */
  .hero3::before { background:
      linear-gradient(0deg, rgba(7, 13, 34, .96) 0%, rgba(7, 13, 34, .74) 48%, rgba(7, 13, 34, .1) 74%, rgba(7, 13, 34, .25) 100%); }
  .hero3__in { padding-top: 230px; padding-bottom: 28px; text-align: center; }
  .hero3__copy { max-width: none; width: 100%; }
  .hero3__kicker { justify-content: center; margin-top: 20px; font-size: .74rem; letter-spacing: .1em; }
  .hero3__kicker::before { display: none; }
  .hero3__lead { margin-left: auto; margin-right: auto; font-size: 1rem; }
  .hero3__actions { justify-content: center; }
  .hero3__stats li { padding: 12px 10px; gap: 8px; }
  .hero3__stats b { font-size: 1.5rem; }
  .hero3__stats span { font-size: .78rem; }
}
@media (max-width: 459px) {
  .hero2__news { font-size: .8rem; gap: 8px; text-align: left; }
  .hero3__actions .btn { width: 100%; }
}

/* ---------- dải bản 4.0 ---------- */
.next4-wrap { position: relative; z-index: 2; padding: 0 0 8px; background: var(--ink-800); }
.next4 { position: relative; margin-top: 40px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 24px 32px;
  align-items: center; padding: 28px 30px; border-radius: 20px; overflow: hidden;
  border: 1px solid var(--line-strong);
  background: radial-gradient(ellipse at 0% 0%, rgba(232, 195, 106, .2), transparent 55%),
    radial-gradient(ellipse at 100% 100%, rgba(196, 64, 48, .22), transparent 55%),
    linear-gradient(135deg, #17244f, #0d1735);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }
.next4::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 241, 184, .09) 45%, transparent 60%); background-size: 250% 100%; }
@media (prefers-reduced-motion: no-preference) { .next4::before { animation: sheen 6s ease-in-out infinite; } }
@keyframes sheen { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.next4__label { font-size: .8rem; font-weight: 700; letter-spacing: .06em; color: var(--jade-400); }
.next4__title { margin-top: 6px; font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.2; color: var(--gold-300); }
.next4__text p:not(.next4__label) { margin-top: 10px; color: #d3dcf3; }
.next4__text .btn { margin-top: 18px; }
.next4__facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.next4__facts li { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: rgba(7, 13, 34, .45); }
.next4__facts b { display: block; font-family: var(--font-display); font-size: 1.45rem; color: var(--gold-400); line-height: 1.15; }
.next4__facts span { display: block; margin-top: 4px; font-size: .88rem; color: var(--muted); }
@media (max-width: 859px) { .next4 { grid-template-columns: minmax(0, 1fr); margin-top: 28px; padding: 22px 20px; } }
@media (max-width: 379px) { .next4__facts { gap: 8px; } .next4__facts li { padding: 12px; } .next4__facts b { font-size: 1.2rem; } }

/* ---------- lưới tính năng ảnh thật ---------- */
.feats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 250px; gap: 16px; }
.feats > li { min-width: 0; }
.feats__wide { grid-column: span 2; }
@media (max-width: 859px) {
  .feats { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 240px; }
  .feats__last { grid-column: auto; }
}
@media (max-width: 539px) {
  .feats { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .feats__wide { grid-column: auto; }
}
.feat { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; overflow: hidden;
  border-radius: var(--radius); border: 1px solid var(--line); color: var(--text); background: var(--ink-700);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.feat:hover, .feat:focus-visible { color: var(--text); transform: translateY(-4px); border-color: var(--gold-500);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5), 0 0 0 1px rgba(232, 195, 106, .25); }
.feat > img:first-child { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.feat:hover > img:first-child { transform: scale(1.06); }
.feat::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(7, 13, 34, .96) 0%, rgba(7, 13, 34, .78) 40%, rgba(7, 13, 34, 0) 72%); }
.feat__body { position: relative; z-index: 1; display: block; padding: 18px 20px 20px; font-size: .92rem; color: #d3dcf3; }
.feat__body strong { display: block; margin: 6px 0 4px; font-family: var(--font-display); font-size: 1.3rem; line-height: 1.2; color: var(--gold-300); }
.feats__lead .feat__body strong { font-size: 1.7rem; }
.feat__tag { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .03em;
  color: var(--jade-400); border: 1px solid rgba(111, 214, 226, .45); background: rgba(7, 13, 34, .55); }
.feat__tag--new { color: #2a1a02; border-color: var(--gold-400); background: linear-gradient(180deg, var(--gold-300), var(--gold-500)); }
.feat__icon { position: absolute; z-index: 1; top: 16px; right: 18px; width: 44px; height: auto; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .6)); }
/* Thẻ chưa có ảnh chụp: nền vẽ bằng CSS. */
.feat--art::after { display: none; }
.feat__art { position: absolute; inset: 0 0 auto; display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start;
  gap: 8px; padding: 18px 20px 0; }
.feat--war { background: radial-gradient(ellipse at 50% 0%, rgba(232, 95, 70, .4), transparent 65%), linear-gradient(180deg, #3a1420, #120b22 70%); }
.feat--war .feat__art span { padding: 4px 12px; border-radius: 8px; font-family: var(--font-display); font-weight: 700; font-size: .95rem;
  color: #ffd9c2; border: 1px solid rgba(255, 140, 110, .45); background: rgba(40, 8, 16, .6); box-shadow: 0 0 18px rgba(232, 95, 70, .25); }
.feat--lake { background: radial-gradient(ellipse at 50% 10%, rgba(111, 214, 226, .35), transparent 60%), linear-gradient(180deg, #0f3a52, #0a1733 75%); }
.feat--lake .feat__art { justify-content: flex-end; }
.feat--lake .feat__art svg { width: 76px; height: 76px; fill: rgba(111, 214, 226, .18); stroke: var(--jade-400); stroke-width: 2; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) { .feat--lake .feat__art svg { animation: bob 3.6s ease-in-out infinite; } }
@keyframes bob { 50% { transform: translateY(-8px) rotate(-4deg); } }
@media (max-width: 539px) {
  .feat { min-height: 240px; }
  .feats__lead .feat { min-height: 300px; }
  .feat--art { min-height: 0; }
  .feat__art { position: relative; height: auto; padding: 22px 18px 4px; }
}

.chips { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.chips a { display: inline-block; padding: 6px 14px; border-radius: 999px; font-size: .88rem; font-weight: 600; color: var(--text);
  border: 1px solid var(--line); background: rgba(15, 29, 68, .6); transition: border-color .2s ease, color .2s ease; }
.chips a:hover { color: var(--gold-300); border-color: var(--line-strong); }

/* ---------- bảy môn phái ---------- */
.sects { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.sects > li { flex: 0 0 250px; min-width: 0; }
.sect { display: block; height: 100%; overflow: hidden; border-radius: var(--radius); color: var(--text);
  border: 1px solid var(--line); background: linear-gradient(180deg, rgba(22, 41, 90, .8), rgba(15, 29, 68, .7));
  box-shadow: inset 0 3px 0 var(--c, var(--gold-500)); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.sect:hover, .sect:focus-visible { color: var(--text); transform: translateY(-4px); border-color: var(--c, var(--gold-500));
  box-shadow: inset 0 3px 0 var(--c, var(--gold-500)), 0 16px 40px rgba(0, 0, 0, .45); }
.sect img { width: 100%; height: 150px; object-fit: cover; transition: transform .5s ease; }
.sect:hover img { transform: scale(1.05); }
.sect__body { display: block; padding: 12px 16px 16px; font-size: .88rem; color: var(--muted); }
.sect__body strong { display: block; font-size: 1.05rem; color: var(--c, var(--gold-300)); }
@media (max-width: 719px) {
  .sects { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 8px; gap: 12px; }
  .sects::-webkit-scrollbar { display: none; }
  .sects > li { flex: 0 0 72%; max-width: 260px; scroll-snap-align: start; }
}

/* ---------- lời hứa + ảnh trượt ---------- */
.promise { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px; align-items: center; }
.promise__title { text-align: left; margin-bottom: 14px; }
.promise__lead { color: var(--muted); }
.promise__list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 16px; }
.promise__list li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; }
.promise__list svg { width: 40px; height: 40px; padding: 8px; border-radius: 12px; fill: none; stroke: var(--gold-400); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; background: rgba(232, 195, 106, .12); border: 1px solid var(--line); }
.promise__list h3 { font-size: 1.02rem; color: var(--gold-300); }
.promise__list p { margin-top: 2px; font-size: .93rem; color: var(--muted); }
@media (max-width: 859px) {
  .promise { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .promise__title { text-align: center; }
  .promise__lead { text-align: center; }
}

/* ---------- quà tân thủ ---------- */
.gift { display: flex; gap: 16px; align-items: flex-start; max-width: 640px; margin: 28px auto 0; padding: 18px 20px; border-radius: var(--radius);
  border: 1px solid var(--line-strong); background: linear-gradient(180deg, rgba(232, 195, 106, .14), rgba(15, 29, 68, .6)); }
.gift svg { flex: 0 0 40px; width: 40px; height: 40px; padding: 8px; border-radius: 12px; fill: none; stroke: var(--gold-400); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; background: rgba(232, 195, 106, .12); border: 1px solid var(--line); }
.gift h3 { font-size: 1.02rem; color: var(--gold-300); }
.gift p { margin-top: 4px; font-size: .93rem; color: var(--muted); }
.gift code { font-family: ui-monospace, Consolas, monospace; font-size: .92em; padding: 1px 8px; border-radius: 6px; color: #2a1a02; background: var(--gold-400); }
.timeline a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- xuất hiện khi cuộn (chỉ trình duyệt có animation-timeline) ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
  }
}
@keyframes rise { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }

/* =====================================================================
   Bản 5.0 (web-5.0, 2026-10-08, chủ repo: "làm lại trang chủ và hướng dẫn theo bản mới, trang chủ làm đẹp hơn").
   - Nhãn "Bản 5.0" màu ngọc (.v5tag, .facts li.v5, khối .v5note): mọi chỗ chỉ áp dụng từ 5.0.
   - Hướng dẫn tách trang con huong-dan/<chủ đề>/: đầu trang .ghero, hàng mục dính .ptoc, chuyển trang .pnav;
     mục lục huong-dan/ có ô tìm nhanh (.gsearch, js/guide.js) và lưới thẻ chủ đề .topics.
   - Trang chủ: dấu triện đỏ .seal, hoa văn dưới tiêu đề mục (.title::after), khối "Bản 5.0 sắp ra mắt" .v5sec + lưới .bento,
     nút cộng đồng (.hero3__comm, .comm, .foot__soc).
   ===================================================================== */

/* Hoa văn dưới tiêu đề mục: hai nét vàng, hạt thoi vàng giữa, hai hạt ngọc (kiểu viền khung giao diện game). */
.title::after { content: ""; display: block; width: 150px; height: 12px; margin: 14px auto 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 12'%3E%3Cpath d='M0 6h58M92 6h58' stroke='%23c99a3e' stroke-width='1'/%3E%3Cpath d='M75 1l5 5-5 5-5-5z' fill='%23e8c36a'/%3E%3Cpath d='M63 6l3-3 3 3-3 3zM81 6l3-3 3 3-3 3z' fill='%236fd6e2'/%3E%3C/svg%3E") center / contain no-repeat; }
.promise__title::after { margin-left: 0; }
@media (max-width: 859px) { .promise__title::after { margin-left: auto; } }

/* ---------- nhãn Bản 5.0 ---------- */
.v5tag { display: inline-block; padding: 1px 9px; border-radius: 999px; font-family: var(--font-body); font-size: .72rem; font-weight: 700;
  letter-spacing: .02em; line-height: 1.5; vertical-align: .12em; white-space: nowrap; color: #04262b;
  background: linear-gradient(180deg, #b4f3f8, var(--jade-400)); }
.v5tag--lg { padding: 3px 12px; font-size: .8rem; vertical-align: .35em; }
.facts li.v5 { color: #04262b; font-weight: 700; border-color: transparent; background: linear-gradient(180deg, #b4f3f8, var(--jade-400)); }

/* ---------- trang con hướng dẫn ---------- */
.ghero { padding: 32px 0 26px; border-bottom: 1px solid var(--line);
  background: url("../assets/pattern-cloud.svg") repeat,
    radial-gradient(ellipse at 12% 0%, rgba(232, 195, 106, .16), transparent 55%),
    radial-gradient(ellipse at 100% 100%, rgba(111, 214, 226, .08), transparent 50%),
    linear-gradient(180deg, var(--ink-900), var(--ink-800)); }
.crumb { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; font-size: .85rem; color: var(--muted); }
.crumb a { color: var(--gold-400); }
.ghero__row { display: flex; gap: 18px; align-items: center; }
.ghero__icon { flex: 0 0 64px; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 18px;
  border: 1px solid var(--line-strong); background: radial-gradient(circle at 30% 20%, rgba(232, 195, 106, .26), rgba(15, 29, 68, .85));
  box-shadow: 0 10px 30px rgba(0, 0, 0, .4), inset 0 0 0 4px rgba(7, 13, 34, .45); }
.ticon { width: 30px; height: 30px; fill: none; stroke: var(--gold-400); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ghero__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 4.6vw, 2.8rem); line-height: 1.15; color: #f3eee2; }
.ghero__lead { margin-top: 6px; max-width: 780px; color: #d3dcf3; }
.ghero__lead a { text-decoration: underline; text-underline-offset: 3px; }
.ghero__lead strong { color: var(--gold-300); font-weight: 600; }
.ghero kbd { padding: 0 6px; border-radius: 5px; font-family: var(--font-body); font-size: .88em; font-weight: 600;
  color: var(--gold-300); border: 1px solid var(--line-strong); background: rgba(7, 13, 34, .6); }
@media (max-width: 539px) {
  .ghero__row { align-items: flex-start; gap: 14px; }
  .ghero__icon { flex-basis: 48px; width: 48px; height: 48px; border-radius: 14px; }
  .ghero__icon .ticon { width: 24px; height: 24px; }
}
.ghero--index { padding: 44px 0 34px; text-align: center; }
.ghero--index .ghero__lead { margin: 10px auto 0; }

/* Hàng mục trong trang: dính dưới thanh trên, một hàng vuốt ngang khi không đủ chỗ. */
.ptoc-bar { position: sticky; top: 60px; z-index: 9; background: rgba(7, 13, 34, .92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.ptoc { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-top: 9px; padding-bottom: 9px; }
.ptoc::-webkit-scrollbar { display: none; }
.ptoc a { flex: 0 0 auto; padding: 5px 14px; border-radius: 999px; font-size: .88rem; font-weight: 600; white-space: nowrap;
  color: var(--text); border: 1px solid var(--line); background: rgba(15, 29, 68, .6); }
.ptoc a:first-child { margin-left: auto; }
.ptoc a:last-child { margin-right: auto; }
.ptoc a:hover { color: var(--gold-300); border-color: var(--line-strong); }
.ptoc a.is-on { color: #2a1a02; border-color: var(--gold-400); background: linear-gradient(180deg, var(--gold-300), var(--gold-500)); }
.ptoc a.is-v5::after, .topic__links a.is-v5::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 7px;
  border-radius: 50%; vertical-align: .1em; background: var(--jade-400); box-shadow: 0 0 6px var(--jade-400); }
.dot5 { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: .1em; background: var(--jade-400); box-shadow: 0 0 6px var(--jade-400); }
.gbody { padding-top: 28px; padding-bottom: 64px; }
.gcard { scroll-margin-top: 124px; }
.gcard code { font-family: ui-monospace, Consolas, monospace; font-size: .92em; padding: 1px 7px; border-radius: 6px;
  color: #2a1a02; background: var(--gold-400); }
.gtext a, .gcard > p a, .gcard > ul a, .gcard .tbl a { text-decoration: underline; text-decoration-color: rgba(232, 195, 106, .45); text-underline-offset: 3px; }
.tbl--wrap th, .tbl--wrap td { white-space: normal; vertical-align: top; }
.tbl td[rowspan] { color: var(--gold-300); font-weight: 600; border-right: 1px solid var(--line); }

/* Chuyển trang trước / sau ở cuối trang con. */
.pnav { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; margin-top: 32px; }
.pnav > a { padding: 14px 18px; border-radius: 14px; color: var(--text); border: 1px solid var(--line); background: rgba(15, 29, 68, .6);
  transition: border-color .2s ease; }
.pnav > a:hover { color: var(--text); border-color: var(--line-strong); }
.pnav a span { display: block; font-size: .8rem; color: var(--muted); }
.pnav a strong { color: var(--gold-300); font-weight: 600; }
.pnav__next { text-align: right; }
.pnav__all { display: grid; place-items: center; font-size: .9rem; font-weight: 600; }
@media (max-width: 619px) {
  .pnav { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pnav__all { grid-column: 1 / -1; grid-row: 2; }
}

/* ---------- mục lục hướng dẫn ---------- */
.gsearch { position: relative; max-width: 560px; margin: 22px auto 0; }
.gsearch[hidden] { display: none; }
.gsearch svg { position: absolute; left: 17px; top: 50%; width: 20px; height: 20px; margin-top: -10px; fill: none; stroke: var(--muted);
  stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.gsearch input { width: 100%; padding: 14px 18px 14px 48px; border-radius: 999px; font: inherit; font-size: 1rem; color: var(--text);
  border: 1px solid var(--line-strong); background: rgba(7, 13, 34, .72); outline: none; -webkit-appearance: none; appearance: none; }
.gsearch input::placeholder { color: #8390b3; }
.gsearch input:focus { border-color: var(--gold-400); box-shadow: 0 0 0 3px rgba(232, 195, 106, .18); }
.gsearch__none { margin-top: 12px; color: var(--muted); }


.topics { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 959px) { .topics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .topics { grid-template-columns: minmax(0, 1fr); } }
.topic { display: flex; flex-direction: column; min-width: 0; padding: 20px; border-radius: var(--radius); border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(22, 41, 90, .7), rgba(15, 29, 68, .55)); transition: border-color .2s ease; }
.topic[hidden] { display: none; }
.topic:hover { border-color: var(--line-strong); }
.topic--new { border-color: rgba(111, 214, 226, .45);
  background: radial-gradient(ellipse at 100% 0%, rgba(111, 214, 226, .13), transparent 55%), linear-gradient(180deg, rgba(22, 41, 90, .75), rgba(15, 29, 68, .6)); }
.topic__head { display: flex; gap: 14px; align-items: center; color: var(--text); }
.topic__head:hover { color: var(--text); }
.topic__head .ticon { flex: 0 0 46px; width: 46px; height: 46px; padding: 10px; border-radius: 13px; border: 1px solid var(--line);
  background: rgba(232, 195, 106, .1); }
.topic--new .topic__head .ticon { stroke: var(--jade-400); border-color: rgba(111, 214, 226, .35); background: rgba(111, 214, 226, .08); }
.topic__head strong { display: block; font-family: var(--font-display); font-size: 1.25rem; line-height: 1.2; color: var(--gold-300); }
.topic__head:hover strong { color: var(--gold-400); }
.topic > p { margin-top: 10px; font-size: .92rem; color: var(--muted); }
.topic__links { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px dashed var(--line); display: flex; flex-wrap: wrap; gap: 6px; }
.topic__links a { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .82rem; font-weight: 600; color: var(--text);
  border: 1px solid var(--line); background: rgba(7, 13, 34, .4); }
.topic__links a:hover { color: var(--gold-300); border-color: var(--line-strong); }
.topic__links a.is-hit { color: #2a1a02; border-color: var(--gold-400); background: var(--gold-400); }

/* Bảng phím tắt. */
.keys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
@media (max-width: 719px) { .keys { grid-template-columns: minmax(0, 1fr); } }
.keys section { min-width: 0; padding: 16px; border-radius: 12px; border: 1px solid var(--line); background: rgba(7, 13, 34, .45); }
.keys h4 { margin: 0 0 10px; }
.keys dl { margin: 0; display: grid; gap: 8px; }
.keys dl div { display: grid; grid-template-columns: minmax(0, 10em) minmax(0, 1fr); gap: 12px; align-items: baseline; }
.keys dt { font-size: .9rem; font-weight: 600; color: var(--gold-300); }
.keys dd { margin: 0; font-size: .93rem; color: #d3dcf3; }
@media (max-width: 379px) { .keys dl div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* ---------- nút cộng đồng ---------- */
.soc { fill: currentColor; }
.soc__cut { fill: none; stroke: var(--c, #0068ff); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.comm { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 759px) { .comm { grid-template-columns: minmax(0, 1fr); } }
.gcard .comm--compact { margin-top: 14px; padding: 0; gap: 10px; }
.comm__card { --c: var(--gold-500); display: flex; gap: 14px; align-items: center; height: 100%; padding: 16px 18px; border-radius: 16px;
  color: var(--text); text-decoration: none; border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(22, 41, 90, .82), rgba(15, 29, 68, .66));
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.comm__card:hover, .comm__card:focus-visible { color: var(--text); transform: translateY(-3px); border-color: var(--c);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .4); }
.comm__card .soc { flex: 0 0 48px; width: 48px; height: 48px; padding: 11px; border-radius: 14px; fill: #fff; background: var(--c);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .35); }
.comm__card strong { display: block; font-size: 1.05rem; color: var(--gold-300); }
.comm__card span span { display: block; margin-top: 2px; font-size: .88rem; color: var(--muted); }
.comm__card--fb { --c: #1877f2; }
.comm__card--zalo { --c: #0068ff; }
.comm__card--dc { --c: #5865f2; }
.foot__soc { list-style: none; margin: 14px 0 0; padding: 0; display: flex; gap: 10px; }
.foot__soc a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: var(--muted);
  border: 1px solid var(--line); background: rgba(15, 29, 68, .6); }
.foot__soc a:hover { color: var(--gold-300); border-color: var(--line-strong); }
.foot__soc .soc { width: 18px; height: 18px; }
.foot__soc .soc__cut { stroke: var(--ink-900); }

/* Đầu trang chủ: hàng nút cộng đồng dưới hai nút chính. */
.hero3__comm { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; font-size: .88rem; color: #c3cde6;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .8); }
.hero3__comm a { --c: var(--gold-500); display: inline-flex; align-items: center; gap: 7px; padding: 5px 13px 5px 6px; border-radius: 999px;
  font-weight: 600; color: #fff; text-shadow: none; border: 1px solid rgba(255, 255, 255, .2); background: rgba(7, 13, 34, .58);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: border-color .2s ease, background .2s ease; }
.hero3__comm a:hover { color: #fff; border-color: var(--c); background: rgba(22, 41, 90, .88); }
.hero3__comm .soc { width: 24px; height: 24px; padding: 4px; border-radius: 50%; fill: #fff; background: var(--c); }
.hero3__comm .fb { --c: #1877f2; }
.hero3__comm .zalo { --c: #0068ff; }
.hero3__comm .dc { --c: #5865f2; }
@media (max-width: 719px) { .hero3__comm { justify-content: center; } }
.hero2__new--v5 { color: #04262b; background: linear-gradient(180deg, #b4f3f8, var(--jade-400)); }

/* ---------- trang chủ: khối bản mới nhất (2026-10-27 thay khối "Bản 5.0" + lưới .bento + 9 hàng chip cũ) ---------- */
.newrel { padding-top: 56px; padding-bottom: 56px; border-bottom: 1px solid var(--line);
  background: url("../assets/pattern-cloud.svg") repeat,
    radial-gradient(ellipse at 8% 0%, rgba(111, 214, 226, .12), transparent 50%),
    radial-gradient(ellipse at 92% 100%, rgba(232, 195, 106, .12), transparent 55%), var(--ink-800); }
.newrel__card { max-width: 760px; margin: 0 auto; padding: 26px 30px; border-radius: var(--radius); border: 1px solid var(--line-strong);
  border-left: 4px solid var(--gold-500); background: linear-gradient(180deg, rgba(22, 41, 90, .85), rgba(15, 29, 68, .7)); }
@media (max-width: 539px) { .newrel { padding-top: 40px; padding-bottom: 40px; } .newrel__card { padding: 20px 18px; } }
.newrel__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: .9rem; font-weight: 600; color: var(--jade-400); }
.newrel__title { margin-top: 8px; font-family: var(--font-display); font-size: clamp(1.6rem, 4vw, 2.1rem); line-height: 1.2; color: #f3eee2; }
.newrel__card ul { margin: 14px 0 0; padding-left: 1.2em; display: grid; gap: 6px; }
.newrel__card li { color: #d3dcf3; }
.newrel__card li::marker { color: var(--gold-600); }
.newrel__card li a { text-decoration: underline; text-decoration-color: rgba(232, 195, 106, .45); text-underline-offset: 3px; }
.newrel__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
@media (max-width: 459px) { .newrel__cta .btn { width: 100%; } }
.feat__art svg.art { width: 72px; height: 72px; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.feat--forge .feat__art svg.art { stroke: #ffc27a; }
.feat--coin .feat__art svg.art { stroke: var(--gold-300); }
@media (prefers-reduced-motion: no-preference) { .feat__art svg.art { animation: bob 3.8s ease-in-out infinite; } }

/* ---------- hướng dẫn, phiên bản: làm gọn (2026-10-14) ---------- */
/* Thanh trên: chữ link không gãy dòng ở màn hẹp (390 px từng gãy "Hướng / dẫn", thanh cao 45 px). */
.bar__link { white-space: nowrap; }
@media (max-width: 459px) {
  .bar__nav { gap: 12px; }
  .bar__link { font-size: .84rem; }
  .bar__nav .btn--sm { padding: 6px 12px; font-size: .82rem; }
}
@media (max-width: 359px) { .bar__nav { gap: 8px; } .bar__link { font-size: .78rem; } .bar__nav .btn--sm { padding: 6px 9px; font-size: .78rem; } }

/* Hàng mục dính: mép mờ báo còn mục khuất để vuốt ngang. */
.ptoc { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 28px), transparent);
  padding-left: 14px; padding-right: 28px; }

/* Mục chữ trái ảnh phải: chữ rộng hơn để bảng số đủ cột (bảng Cổ Mộ 6 cột từng bị cắt cột Phiếu ở 1280 px). */
@media (min-width: 860px) {
  .gpanel { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 0 28px; }
  .gshot { top: 132px; }
}

/* Bảng số: chữ số cùng bề rộng, cột toàn số căn phải (lớp .num do js/guide.js gắn); bảng rộng hơn khung
   (cuộn ngang được) có mép phải sáng nhẹ (lớp .is-scroll, cũng do js/guide.js). Bóng nền kiểu "local" đã thử: lộ dải màu
   lệch nền thẻ ở mép phải. */
.tbl { font-variant-numeric: tabular-nums; }
.tbl.is-scroll { box-shadow: inset -16px 0 14px -12px rgba(232, 195, 106, .45); }
.tbl th.num, .tbl td.num { text-align: right; }
.tbl tbody tr:hover td { background: rgba(232, 195, 106, .05); }
.gtext .tbl th, .gtext .tbl td { padding: 7px 10px; }
@media (max-width: 539px) {
  .tbl table { font-size: .88rem; }
  .tbl th, .tbl td { padding: 7px 10px; }
}

/* Mục lục hướng dẫn: hai bản mới nhất cạnh nhau, các bản trước gập lại để thẻ chủ đề lên gần đầu trang. */
.gnews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
@media (max-width: 859px) { .gnews { grid-template-columns: minmax(0, 1fr); } }
.gnews-wrap[hidden] { display: none; }
.gnews-old { margin-bottom: 28px; border: 1px solid var(--line); border-radius: 16px; background: rgba(15, 29, 68, .45); }
.gnews-old > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 20px;
  cursor: pointer; list-style: none; font-weight: 600; color: var(--gold-400); }
.gnews-old > summary::-webkit-details-marker { display: none; }
.gnews-old > summary::after { content: ""; flex: 0 0 auto; width: 9px; height: 9px; margin-top: -4px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s ease; }
.gnews-old[open] > summary::after { margin-top: 4px; transform: rotate(-135deg); }
.gnews-old > summary:hover { color: var(--gold-300); }
.gnews-old[open] > summary { border-bottom: 1px solid var(--line); }
.gnews-old .gnews { margin: 0; padding: 16px; }

/* ===== Hướng dẫn gọn (2026-10-17): mỗi mục một khuôn, chỉ ghi luật đang chạy (lịch sử ở trang Phiên bản).
   .sum   khung tóm tắt đầu mục: Mở từ / Ở đâu / Mấy lượt / Được gì (ô tự xếp theo bề ngang).
   .more  phần gập "Số liệu chi tiết": công thức, bảng tỉ lệ; người mới không cần đọc.
   .badge-new  nhãn "Mới" cho thứ của bản đang chạy (chỉ một bản, phát bản sau thì bỏ).
   Bảng: chữ được xuống dòng (trước đây nowrap làm bảng tràn, phải cuộn ngang). Điện thoại: bảng từ 3 cột,
   không rowspan/colspan, tự thành thẻ dọc (guide.js gắn data-label từ hàng tiêu đề). ===== */
.sum { margin: 14px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.sum > div { padding: 9px 12px; border-radius: 10px; border: 1px solid rgba(111, 214, 226, .28); background: rgba(111, 214, 226, .06); min-width: 0; }
.sum dt { font-size: .8rem; font-weight: 700; color: var(--jade-400); }
.sum dd { margin: 2px 0 0; font-size: .93rem; color: var(--text); }
.more { margin-top: 16px; border: 1px solid var(--line); border-radius: 12px; background: rgba(7, 13, 34, .35); }
.more > summary { padding: 10px 14px; cursor: pointer; font-weight: 600; font-size: .93rem; color: var(--gold-400); list-style: none;
  display: flex; align-items: center; gap: 10px; }
.more > summary::-webkit-details-marker { display: none; }
.more > summary::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .2s ease; }
.more[open] > summary::before { transform: rotate(45deg); }
.more[open] > summary { border-bottom: 1px solid var(--line); }
.more > :not(summary) { margin-left: 14px; margin-right: 14px; }
.more > :last-child { margin-bottom: 14px; }
.badge-new { display: inline-block; padding: 1px 8px; margin-left: 6px; border-radius: 999px; font-family: var(--font-body);
  font-size: .7rem; font-weight: 700; vertical-align: .2em; color: #04262b; background: var(--jade-400); }
.gcard ol.steps { list-style: none; padding: 0; counter-reset: st; gap: 8px; grid-template-columns: minmax(0, 1fr); }
.gcard ol.steps > li { position: relative; padding: 0 0 0 36px; counter-increment: st; border: 0; border-radius: 0; background: none; }
.gcard ol.steps > li::before { content: counter(st); position: absolute; left: 0; top: 1px; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--font-body); font-size: .8rem; font-weight: 700; color: #2a1a02; background: var(--gold-500); }
.tbl th, .tbl td { white-space: normal; vertical-align: top; }
.tbl td.num, .tbl th.num { white-space: nowrap; }
@media (max-width: 639px) {
  .tbl--stack { border: 0; overflow: visible; }
  .tbl--stack table, .tbl--stack tbody, .tbl--stack tr, .tbl--stack td { display: block; width: auto; }
  .tbl--stack thead { display: none; }
  .tbl--stack tr { margin-top: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(7, 13, 34, .35); }
  .tbl--stack td { display: grid; grid-template-columns: minmax(7em, 40%) minmax(0, 1fr); gap: 10px; padding: 3px 0; border: 0; text-align: left !important; white-space: normal !important; }
  .tbl--stack td::before { content: attr(data-label); font-size: .82rem; font-weight: 600; color: var(--gold-500); }
  .tbl--stack td:first-child { display: block; padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid var(--line); font-weight: 600; color: var(--gold-300); }
  .tbl--stack td:first-child::before { content: none; }
  .tbl--stack td:empty { display: none; }
}
/* Mục lục: nhóm thẻ chủ đề theo hành trình, hàng cẩm nang nhanh ở đầu. */
.ggroup { margin-top: 34px; }
.ggroup:first-of-type { margin-top: 0; }
.ggroup > h2 { margin-bottom: 14px; font-size: 1.25rem; color: var(--gold-400); }
.ggroup > h2 small { display: block; margin-top: 2px; font-family: var(--font-body); font-size: .88rem; font-weight: 400; color: var(--muted); }
.quick { list-style: none; margin: 0 0 40px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 859px) { .quick { grid-template-columns: minmax(0, 1fr); } }
.quick a { display: flex; gap: 14px; align-items: center; height: 100%; padding: 16px 18px; border-radius: var(--radius);
  border: 1px solid rgba(232, 195, 106, .45); background: linear-gradient(135deg, rgba(232, 195, 106, .14), rgba(15, 29, 68, .6)); }
.quick a:hover { border-color: var(--gold-400); }
.quick b { display: block; color: var(--gold-300); font-size: 1.05rem; }
.quick span { display: block; margin-top: 2px; font-size: .88rem; color: var(--muted); }
.quick .ticon { flex: 0 0 auto; }
/* Cộng điểm: thanh tỉ lệ cho mỗi chỉ số. */
.pts { margin-top: 10px; display: grid; gap: 6px; }
.pts > div { display: grid; grid-template-columns: 11em minmax(0, 1fr) 3.2em; gap: 10px; align-items: center; font-size: .92rem; }
.pts i { display: block; height: 10px; border-radius: 99px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.pts i::after { content: ""; display: block; height: 100%; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, var(--gold-600), var(--gold-300)); }
.pts b { text-align: right; color: var(--gold-300); font-weight: 600; }
.ggroup[hidden] { display: none; }
@media (max-width: 539px) { .pts > div { grid-template-columns: minmax(0, 1fr) 3.2em; gap: 4px 10px; } .pts i { grid-column: 1 / -1; grid-row: 2; } }
@media (max-width: 539px) { .tbl th, .tbl td { padding: 6px 8px; font-size: .88rem; } }
/* Phiên bản: lời tựa đầu trang bản (8.1.0), trước khung Tóm tắt. */
.rpreface { padding: 20px 24px; border-radius: var(--radius); border: 1px solid rgba(232, 195, 106, .45); border-left: 4px solid var(--gold-400);
  background: linear-gradient(135deg, rgba(232, 195, 106, .12), rgba(15, 29, 68, .6)); }
@media (max-width: 539px) { .rpreface { padding: 16px; } }
.rpreface h2 { font-size: 1.15rem; font-weight: 700; color: var(--gold-300); }
.rpreface p { margin: 8px 0 0; color: var(--text); font-size: 1rem; line-height: 1.65; }
.rpreface ul { margin: 8px 0 0; padding-left: 1.3em; list-style: disc; }
.rpreface li { margin: 6px 0 0; color: var(--text); font-size: 1rem; line-height: 1.6; }
.rpreface li::marker { color: var(--gold-400); }

/* Khung quà mừng bản (trang phiên bản, chủ repo 2026-10-29 "highlight thật to") */
.rgift { display: flex; align-items: center; gap: 20px; margin: 0 0 22px; padding: 22px 26px; border-radius: var(--radius);
  border: 2px solid var(--gold-400); background: radial-gradient(120% 140% at 0% 0%, rgba(232, 195, 106, .32), rgba(15, 29, 68, .85) 60%);
  box-shadow: 0 0 0 4px rgba(232, 195, 106, .12), 0 12px 36px rgba(232, 195, 106, .25); animation: rgift-glow 2.4s ease-in-out infinite; }
@keyframes rgift-glow { 50% { box-shadow: 0 0 0 6px rgba(232, 195, 106, .22), 0 14px 44px rgba(232, 195, 106, .42); } }
@media (prefers-reduced-motion: reduce) { .rgift { animation: none; } }
.rgift__icon { flex: none; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(232, 195, 106, .18); border: 1px solid rgba(232, 195, 106, .55); }
.rgift__icon svg { width: 40px; height: 40px; fill: none; stroke: var(--gold-300); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rgift__tag { margin: 0; font-size: .85rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-300); }
.rgift__title { margin: 4px 0 0; font-size: clamp(1.5rem, 4.2vw, 2.2rem); font-weight: 800; line-height: 1.2; color: #fff; }
.rgift__title strong { color: var(--gold-300); }
.rgift__note { margin: 8px 0 0; font-size: 1rem; color: var(--text); line-height: 1.55; }
@media (max-width: 539px) { .rgift { flex-direction: column; text-align: center; padding: 18px 16px; gap: 12px; } .rgift__icon { width: 60px; height: 60px; } }