/* ==========================================================================
   Mohun Kronthia — UI v4 ธีม "ชาดทอง" (Crimson & Gold) — 25 ก.ย. 2569
   โทนดำเป็นหลัก + ทองเก่า/ส้ม + แดงชาด (โทนสีอ้างอิงจาก mh.cibmall.net ที่ผู้ใช้ส่งมา)
   เมนูอยู่ด้านบนเสมอ: แถบเมนูเต็มความกว้าง + การ์ดเมนูย่อย (จอ ≥1000px) / ปุ่ม "เมนู" + แผงเลื่อนลง (จอเล็ก)
   แท็บหมวดทุกหน้าเป็น "ป้ายแดงชาดขอบทองมีเพชรหัวท้าย" (.pills/.pill)
   ห้ามมีเมนูด้านข้าง (ผู้ใช้กำหนด)
   ทั้งเว็บใช้ไฟล์นี้ไฟล์เดียว: tokens → base → shell → ส่วนประกอบกลาง → หน้าแรก → หน้าย่อย → responsive
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  --bg: #0c0c0c;
  --bg-2: #070707;
  --surface: #141414;
  --surface-2: #1b1b1b;
  --surface-3: #262626;
  --line: rgba(255, 255, 255, .07);
  --line-2: rgba(255, 255, 255, .12);
  --text: #f3eee8;
  --text-2: #c9c0b6;
  --muted: #8e857b;
  --dim: #635c55;

  --gold: #caa165;
  --gold-2: #ecd0a0;
  --gold-3: #94703b;
  --gold-ink: #1c1207;
  --gold-soft: rgba(202, 161, 101, .12);
  --gold-line: rgba(202, 161, 101, .38);
  --red: #c8161f;
  --red-2: #8a0c13;
  --red-3: #ea3a43;
  --red-soft: rgba(200, 22, 31, .16);
  --orange: #ee8c3a;
  --orange-soft: rgba(238, 140, 58, .15);
  --grad-gold: linear-gradient(180deg, #f4d9a8 0%, #d0a463 55%, #a77b3b 100%);
  --grad-red: linear-gradient(180deg, #dc2b33 0%, #9a0f17 100%);
  --grad-ember: linear-gradient(180deg, #6f0c11 0%, #3a0609 50%, #140304 100%);

  /* พื้นอ่านเนื้อหา (เนื้อหาจากระบบจัดการเขียนมาสำหรับพื้นสว่าง) */
  --paper: #f5efe7;
  --paper-2: #ece2d5;
  --paper-line: #dfd2c0;
  --ink: #1d1712;
  --ink-2: #4a4038;

  --font: "IBM Plex Sans Thai", "Leelawadee UI", "Segoe UI", Tahoma, sans-serif;
  --display: "Kanit", "IBM Plex Sans Thai", "Leelawadee UI", sans-serif;
  --han: "Noto Serif TC", "PMingLiU", "MingLiU", serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;

  --hd-h: 72px;     /* ความสูงแถบเมนูด้านบน */
  --top: var(--hd-h);
  --wrap: 1280px;
  --gutter: clamp(16px, 3vw, 40px);
  --r-lg: 12px;
  --r: 10px;
  --r-sm: 8px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --shadow: 0 24px 48px -24px rgba(0, 0, 0, .95);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .9 0 0 0 0 .8 .07 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--top) + 24px); background: var(--bg); }
body {
  position: relative;
  isolation: isolate;
  margin: 0;
  font-family: var(--font);
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--text);
  background:
    radial-gradient(1100px 520px at 50% -180px, rgba(200, 22, 31, .16), rgba(200, 22, 31, 0) 70%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background-image: var(--grain); opacity: .6; pointer-events: none; }
html.is-locked, html:has(dialog[open]) { overflow: hidden; }
img, svg, video, iframe { max-width: 100%; }
img { height: auto; border: 0; vertical-align: middle; }
/* รูป .webp (inc/media.php) ห่อ <img> ด้วย <picture>: ให้ <picture> ไม่มีกล่องของตัวเอง → <img> จัดวางเหมือนเป็นลูกโดยตรงของกล่องเดิมทุกที่ */
picture { display: contents; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, h5, h6 { margin: 0; line-height: 1.3; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
::selection { background: var(--red); color: #fff; }

/* แถบเลื่อนโทนดำ-ทองทั้งเว็บ: Chrome/Edge/Firefox ใช้ scrollbar-color (สืบทอดถึงทุกกล่องที่เลื่อนได้), Safari ใช้ ::-webkit-scrollbar
   พื้นกระดาษ (เนื้อหาคู่มือ/ตาราง/คำตอบ FAQ) ใช้รางสีกระดาษ; แถบที่ตั้งใจซ่อน (.pills, .strip, .ncards) ยังซ่อนเหมือนเดิม */
:root { scrollbar-color: #9a7644 #0b0b0b; }
* { scrollbar-width: thin; }
.reader, .table-scroll, .qa__body { scrollbar-color: #b08a55 var(--paper-2); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: #0b0b0b; }
::-webkit-scrollbar-thumb { border: 2px solid #0b0b0b; border-radius: 999px; background: linear-gradient(180deg, var(--gold), var(--gold-3)); }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--gold-2), var(--gold)); }
.reader ::-webkit-scrollbar-track, .table-scroll::-webkit-scrollbar-track, .qa__body ::-webkit-scrollbar-track { background: var(--paper-2); }
.reader ::-webkit-scrollbar-thumb, .table-scroll::-webkit-scrollbar-thumb, .qa__body ::-webkit-scrollbar-thumb { border-color: var(--paper-2); }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 16px; top: -64px; z-index: 1000; padding: 10px 18px; border-radius: 8px; background: var(--gold); color: var(--gold-ink); font-weight: 600; transition: top .2s; }
.skip:focus { top: 12px; }
.ico { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.han { font-family: var(--han); font-weight: 900; }

/* กรอบทองเส้นคู่ + เพชรประดับกลางขอบบน/ล่าง (อย่าใส่กับกล่องที่ overflow: hidden) */
.frame { position: relative; border: 1px solid var(--gold-line); outline: 1px solid rgba(202, 161, 101, .16); outline-offset: 5px; }
.frame::before, .frame::after { content: ""; position: absolute; left: 50%; z-index: 4; width: 9px; height: 9px; margin-left: -5px; background: var(--bg); border: 1px solid var(--gold); transform: rotate(45deg); pointer-events: none; }
.frame::before { top: -5px; }
.frame::after { bottom: -5px; }

/* ==========================================================================
   SHELL: แถบเมนูลอยด้านบน / เมนูจอเล็ก
   ========================================================================== */
/* ตราประทับแดง (โลโก้) */
.seal {
  display: grid; place-items: center; flex: none;
  width: 46px; height: 46px; border-radius: 8px;
  font-family: var(--han); font-weight: 900; font-size: 25px; line-height: 1; color: #ffe9c7;
  background: linear-gradient(150deg, #e0343a 0%, #a50f17 60%, #7a0910 100%);
  box-shadow: 0 8px 22px -8px rgba(200, 22, 31, .8), inset 0 0 0 1px rgba(255, 214, 160, .35), inset 0 0 0 3px rgba(122, 9, 16, .6), inset 0 0 0 4px rgba(255, 214, 160, .25);
}
.seal--sm { width: 38px; height: 38px; border-radius: 7px; font-size: 20px; }

/* แถบเมนูเต็มความกว้าง (แบบเว็บเกมอ้างอิง): โลโก้ชิดซ้าย / เมนูสองภาษาตรงกลาง / ปุ่มดาวน์โหลดทองเต็มความสูงชิดขวา
   ติดขอบบนเมื่อเลื่อน; ภาพฉากหลังของหน้าแรก/หัวหน้าย่อยต่อขึ้นมาใต้แถบ (แถบโปร่งแสงเล็กน้อย) */
.hd { position: sticky; top: 0; z-index: 60; }
.hd__bar {
  position: relative; display: flex; align-items: stretch; height: var(--hd-h); padding-left: var(--gutter);
  background: linear-gradient(180deg, rgba(26, 22, 20, .9) 0%, rgba(8, 8, 8, .92) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15);
  border-bottom: 1px solid rgba(202, 161, 101, .26);
  box-shadow: 0 14px 34px -22px rgba(0, 0, 0, .95);
  transition: background-color .3s;
}
.hd__bar::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, #4a060a, var(--red) 50%, #4a060a); pointer-events: none; }
.hd__bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, rgba(202, 161, 101, 0) 6%, var(--gold) 50%, rgba(202, 161, 101, 0) 94%); pointer-events: none; }
.hd.is-stuck .hd__bar { background: linear-gradient(180deg, rgba(22, 19, 18, .97) 0%, rgba(8, 8, 8, .97) 100%); }
.wordmark { display: inline-flex; align-items: center; gap: 12px; flex: none; }
.hd .wordmark { align-self: center; margin-right: 16px; }

/* หัวข้อเมนู: ไทย + อังกฤษตัวเล็กด้านล่าง คั่นด้วยเพชรทองจาง ๆ
   ชี้/เลือก = ตัวอักษรทอง + แสงเรืองแดงจากขอบล่าง + เพชรทองบนเส้นขอบล่างของแถบ */
.hnav { display: flex; justify-content: center; flex: 1; min-width: 0; }
.hnav__list { display: flex; align-items: stretch; list-style: none; }
.hnav__item { position: relative; display: flex; }
.hnav__item + .hnav__item::before { content: ""; position: absolute; left: -2px; top: 50%; width: 4px; height: 4px; margin-top: -2px; background: var(--gold); opacity: .35; transform: rotate(45deg); pointer-events: none; }
.hnav__link {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 0 clamp(12px, 1.5vw, 24px); color: var(--text-2); white-space: nowrap; transition: color .2s;
}
.hnav__th { position: relative; font-family: var(--display); font-size: 16.5px; font-weight: 400; line-height: 1.15; }
.hnav__en { position: relative; font-family: var(--display); font-size: 10px; font-weight: 400; line-height: 1; letter-spacing: .22em; text-transform: uppercase; color: rgba(202, 161, 101, .55); transition: color .2s; }
.hnav__link::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 80% at 50% 100%, rgba(200, 22, 31, .42), rgba(200, 22, 31, 0) 72%); opacity: 0; transition: opacity .3s; }
.hnav__link::after { content: ""; position: absolute; left: 50%; bottom: -6px; z-index: 6; width: 10px; height: 10px; margin-left: -5px; background: var(--grad-gold); border: 1px solid #3a2410; transform: rotate(45deg) scale(0); transition: transform .25s var(--ease); }
.hnav__item:hover > .hnav__link, .hnav__item:focus-within > .hnav__link, .hnav__item.is-active > .hnav__link { color: var(--gold-2); }
.hnav__item:hover .hnav__en, .hnav__item:focus-within .hnav__en, .hnav__item.is-active .hnav__en { color: var(--gold); }
.hnav__item:hover > .hnav__link::before, .hnav__item:focus-within > .hnav__link::before, .hnav__item.is-active > .hnav__link::before { opacity: 1; }
.hnav__item:hover > .hnav__link::after, .hnav__item:focus-within > .hnav__link::after, .hnav__item.is-active > .hnav__link::after { transform: rotate(45deg) scale(1); }

/* การ์ดเมนูย่อย: ห้อยลงจากขอบล่างของแถบ เปิดเมื่อชี้/โฟกัสหัวข้อเมนู (.acct เปิดด้วยคลิกได้ด้วย)
   หัวการ์ดเป็นป้ายแดงชาด + อักษรจีนประจำหมวดในกรอบทองเส้นคู่, รายการมีเพชรทองนำหน้า */
.drop {
  position: absolute; top: calc(100% + 1px); left: 50%; z-index: 5; width: 300px; padding-bottom: 8px;
  background: #0f0f0f; border: 1px solid rgba(202, 161, 101, .34); border-top: 0;
  box-shadow: 0 34px 60px -24px rgba(0, 0, 0, .95);
  opacity: 0; visibility: hidden; transform: translate(-50%, 6px);
  transition: opacity .2s, transform .25s var(--ease), visibility 0s linear .25s;
}
.hnav__item:hover > .drop, .hnav__item:focus-within > .drop { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .2s, transform .25s var(--ease); }
.drop__head { display: flex; align-items: center; gap: 14px; padding: 18px 16px 14px; margin-bottom: 6px; background: linear-gradient(180deg, #6e0b10 0%, #2a0406 100%); border-bottom: 1px solid var(--gold-line); }
.drop__han {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px;
  font-family: var(--han); font-weight: 900; font-size: 21px; line-height: 1; color: var(--gold-2);
  background: rgba(0, 0, 0, .3); border: 1px solid var(--gold); outline: 1px solid rgba(202, 161, 101, .3); outline-offset: 3px;
}
.drop__title { display: block; font-family: var(--display); font-size: 16.5px; font-weight: 500; line-height: 1.3; color: #fff; }
.drop__desc { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.5; color: rgba(243, 238, 232, .62); }
.drop ul { list-style: none; padding: 0 8px; }
.drop a { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px 9px 28px; font-size: 14.5px; color: var(--text-2); transition: background-color .2s, color .2s; }
.drop a::before { content: ""; position: absolute; left: 13px; top: 50%; width: 5px; height: 5px; margin-top: -3px; background: var(--gold); opacity: .4; transform: rotate(45deg); transition: opacity .2s; }
.drop a > .ico { color: var(--gold); opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s; }
.drop a:hover, .drop a:focus-visible { color: var(--gold-2); background: linear-gradient(90deg, rgba(200, 22, 31, .2), rgba(200, 22, 31, 0)); }
.drop a:hover::before, .drop a:focus-visible::before { opacity: 1; }
.drop a:hover > .ico, .drop a:focus-visible > .ico { opacity: 1; transform: none; }
.drop__lead { display: inline-flex; align-items: center; gap: 10px; }
.drop__lead .ico { font-size: 18px; color: var(--muted); transition: color .2s; }
.drop a:hover .drop__lead .ico { color: var(--gold); }

.hd__actions { display: flex; align-items: stretch; flex: none; }
.acct { position: relative; display: flex; align-items: center; padding: 0 14px; }
.acct__btn { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border-radius: 50%; color: var(--text-2); background: rgba(255, 255, 255, .03); border: 1px solid var(--gold-line); transition: .2s; }
.acct__btn .ico { font-size: 19px; }
.acct__btn:hover, .acct.is-open .acct__btn { color: var(--gold-ink); background: var(--grad-gold); border-color: transparent; }
.acct .drop { left: auto; right: 0; width: 230px; padding-top: 8px; transform: translateY(6px); }
.acct .drop a { padding-left: 12px; }
.acct .drop a::before { display: none; }
.acct:hover > .drop, .acct.is-open > .drop { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .25s var(--ease); }

/* ปุ่มดาวน์โหลดทองเต็มความสูงชิดขอบขวาของแถบ (แบบเว็บอ้างอิง) + แสงวาบเมื่อชี้ */
.hd__dl {
  position: relative; display: flex; align-items: center; gap: 10px; padding: 0 clamp(18px, 2vw, 30px); overflow: hidden;
  color: var(--gold-ink); background: var(--grad-gold); box-shadow: inset 1px 0 0 rgba(255, 244, 220, .55);
  transition: filter .2s;
}
.hd__dl::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .45), rgba(255, 255, 255, 0)); transform: skewX(-18deg); transition: left .7s var(--ease); pointer-events: none; }
.hd__dl:hover { filter: brightness(1.06); }
.hd__dl:hover::after { left: 130%; }
.hd__dl .ico { font-size: 24px; }
.hd__dl b { display: block; font-family: var(--display); font-size: 16px; font-weight: 600; line-height: 1.1; white-space: nowrap; }
.hd__dl small { display: block; margin-top: 3px; font-family: var(--display); font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; opacity: .72; white-space: nowrap; }
.hd__dl:focus-visible { outline-offset: -4px; outline-color: var(--gold-ink); }

.shell { display: flex; flex-direction: column; min-height: calc(100vh - var(--top)); }
main { flex: 1; }

/* จอเล็ก: ปุ่ม "เมนู" สี่เหลี่ยมแดงชาดชิดขวาของแถบ เปิดแผงเมนูเต็มความกว้างที่เลื่อนลงจากขอบบน
   (หัวแผงสูงเท่าแถบ และปุ่มปิดอยู่ตำแหน่งเดียวกับปุ่มเมนู) */
.hd__menu, .msheet__close {
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 3px; flex: none; width: var(--hd-h); padding: 0;
  border: 0; border-left: 1px solid var(--gold-line);
  font-family: var(--display); font-size: 10.5px; font-weight: 500; letter-spacing: .1em; line-height: 1; color: var(--gold-2);
  background: linear-gradient(180deg, #8a111a 0%, #3a0508 100%); transition: filter .2s;
}
.hd__menu .ico, .msheet__close .ico { font-size: 22px; }
.hd__menu:hover, .msheet__close:hover { filter: brightness(1.18); }
.hd__menu:focus-visible, .msheet__close:focus-visible { outline-offset: -4px; }
.msheet { position: fixed; inset: 0; z-index: 90; visibility: hidden; transition: visibility 0s linear .3s; }
.msheet.is-open { visibility: visible; transition: none; }
.msheet__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .75); opacity: 0; transition: opacity .3s; }
.msheet.is-open .msheet__backdrop { opacity: 1; }
.msheet__panel {
  position: absolute; top: 0; left: 0; right: 0; max-height: 100vh; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 20px;
  background: #0d0d0d; border-bottom: 1px solid var(--gold-line); box-shadow: var(--shadow);
  opacity: 0; transform: translateY(-16px); transition: opacity .25s, transform .3s var(--ease);
}
.msheet.is-open .msheet__panel { opacity: 1; transform: none; }
.msheet__head {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: stretch; justify-content: space-between;
  height: var(--hd-h); padding-left: var(--gutter); margin-bottom: 16px;
  background: linear-gradient(180deg, #1a1614 0%, #0a0a0a 100%); border-bottom: 1px solid var(--gold-line);
}
.msheet__head::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, #4a060a, var(--red) 50%, #4a060a); }
.msheet__title { display: flex; align-items: center; gap: 12px; font-family: var(--display); font-size: 17px; font-weight: 500; color: var(--gold-2); }
.msheet__close { display: flex; }
.msheet__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0 var(--gutter); }
.mgroup { overflow: hidden; background: var(--surface); border: 1px solid var(--line-2); }
.mgroup.is-active { border-color: var(--gold-line); }
.mgroup h3 { display: flex; align-items: center; gap: 10px; margin: 0; padding: 11px 14px; font-family: var(--display); font-size: 16px; font-weight: 500; color: #fff; background: linear-gradient(90deg, rgba(138, 17, 26, .8), rgba(58, 5, 8, .35)); border-bottom: 1px solid var(--gold-line); }
.mgroup h3 .ico { font-size: 18px; color: var(--gold-2); }
.mgroup h3 small { margin-left: auto; font-size: 10px; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.mgroup ul { list-style: none; padding: 6px 14px 10px; }
.mgroup a { position: relative; display: block; padding: 7px 0 7px 16px; font-size: 14.5px; color: var(--text-2); }
.mgroup a::before { content: ""; position: absolute; left: 2px; top: 50%; width: 5px; height: 5px; margin-top: -3px; background: var(--gold); opacity: .45; transform: rotate(45deg); }
.mgroup a:hover { color: var(--gold-2); }
.mgroup a:hover::before { opacity: 1; }
.msheet__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; padding: 0 var(--gutter); }

/* ==========================================================================
   ส่วนประกอบกลาง
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 22px; border-radius: 8px; border: 1px solid transparent;
  font-family: var(--display); font-size: 15.5px; font-weight: 500; line-height: 1; white-space: nowrap;
  background: none; transition: background-color .2s, color .2s, border-color .2s, filter .2s, transform .2s;
}
.btn .ico { font-size: 1.15em; }
.btn:active { transform: translateY(1px); }
.btn--gold { color: var(--gold-ink); background: var(--grad-gold); border-color: rgba(255, 230, 190, .5); box-shadow: 0 10px 26px -12px rgba(202, 161, 101, .75), inset 0 1px 0 rgba(255, 255, 255, .45); }
.btn--gold:hover { filter: brightness(1.08) saturate(1.05); }
.btn--red { color: #fff; background: var(--grad-red); border-color: rgba(255, 140, 140, .3); box-shadow: 0 10px 26px -12px rgba(200, 22, 31, .85), inset 0 1px 0 rgba(255, 255, 255, .2); }
.btn--red:hover { filter: brightness(1.12); }
.btn--ghost { color: var(--text); border-color: var(--line-2); background: rgba(255, 255, 255, .03); }
.btn--ghost:hover { color: var(--gold-2); border-color: var(--gold-line); background: var(--gold-soft); }
.btn--ink { color: var(--gold-2); background: rgba(8, 8, 8, .85); border-color: var(--gold-line); }
.btn--ink:hover { color: #fff; background: #000; border-color: var(--gold); }
.btn--sm { height: 40px; padding: 0 15px; border-radius: 8px; font-size: 14.5px; }
.btn--lg { height: 56px; padding: 0 30px; border-radius: 10px; font-size: 17px; }
.btn--block { width: 100%; }

.tag {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 4px;
  font-size: 12.5px; font-weight: 600; line-height: 1; white-space: nowrap;
  color: var(--text-2); background: var(--surface-3);
}
.tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--dot, currentColor); }
.tag--plain::before { display: none; }
.tag--notice { color: #fff; background: var(--grad-red); }
.tag--notice::before { background: #ffd9d9; }
.tag--event { color: var(--orange); background: var(--orange-soft); }
.tag--update { color: var(--gold-2); background: var(--gold-soft); }
.tag--gold { color: var(--gold-2); background: var(--gold-soft); }
.new { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; margin-left: 8px; border-radius: 4px; font-size: 11px; font-weight: 700; line-height: 1; vertical-align: 2px; color: var(--gold-ink); background: var(--grad-gold); }

.kicker { margin-bottom: 6px; font-family: var(--display); font-size: 13px; font-weight: 400; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); }
.sec { padding-block: clamp(36px, 5vw, 64px); }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px 20px; flex-wrap: wrap; margin-bottom: 24px; }
/* หัวข้อสองโทน: คำภาษาอังกฤษบางสีทอง + คำไทยหนาสีขาว */
.sec-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 14px; font-family: var(--display); font-size: clamp(27px, 3vw, 38px); font-weight: 600; line-height: 1.25; }
.sec-title__en { font-weight: 300; text-transform: uppercase; letter-spacing: .03em; color: var(--gold); }
.sec-sub { margin-top: 8px; font-size: 15px; color: var(--muted); }
.sec-tools { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.more { display: inline-flex; align-items: center; gap: 6px; font-family: var(--display); font-size: 15px; font-weight: 400; color: var(--gold); transition: gap .2s, color .2s; }
.more:hover { gap: 10px; color: var(--gold-2); }

/* แท็บหมวด (ทุกหน้า): ข้อความคั่นด้วยเพชรทอง
   แท็บที่เลือก = ป้ายแดงชาดขอบทอง มีเพชรประดับหัวท้าย (ตามแบนเนอร์หัวข้อ "GAME NEWS" ของเว็บอ้างอิง) */
.pills { position: relative; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 0; max-width: 100%; padding: 4px 12px; }
.pill {
  position: relative; display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 18px;
  border: 1px solid transparent; background: none;
  font-family: var(--display); font-size: 16px; font-weight: 400; color: var(--text-2); white-space: nowrap;
  transition: color .2s, background-color .2s;
}
.pill + .pill::before { content: ""; position: absolute; left: -3px; top: 50%; width: 5px; height: 5px; margin-top: -3px; background: var(--gold); opacity: .4; transform: rotate(45deg); pointer-events: none; }
.pill:hover { color: var(--gold-2); }
.pill.is-active {
  margin-inline: 12px; color: #fff; font-weight: 500;
  background: linear-gradient(180deg, #8e1118 0%, #560810 55%, #2e0306 100%);
  border-color: var(--gold);
  box-shadow: inset 0 1px 0 rgba(255, 214, 160, .3), inset 0 0 0 3px rgba(46, 3, 6, .5), 0 10px 22px -12px rgba(200, 22, 31, .85);
}
.pill.is-active::before, .pill.is-active::after {
  content: ""; position: absolute; top: 50%; width: 12px; height: 12px; margin-top: -6px;
  background: #3d0509; border: 1px solid var(--gold); opacity: 1; transform: rotate(45deg); pointer-events: none;
}
.pill.is-active::before { left: -7px; }
.pill.is-active::after { right: -7px; }
.pill.is-active + .pill::before { display: none; }
.pill__han { font-size: 16px; line-height: 1; color: var(--gold); }
.pill.is-active .pill__han { color: var(--gold-2); }

.tile { position: relative; padding: 22px 24px; border-radius: var(--r-lg); background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0) 40%), var(--surface); border: 1px solid var(--line); }
.tile-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.tile-title { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 18px; font-weight: 500; }
.tile-title .ico { color: var(--gold); font-size: 20px; }

.empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 56px 16px; text-align: center; color: var(--muted); }
.empty .ico { font-size: 40px; color: var(--dim); stroke-width: 1.4; }

.search { display: flex; align-items: center; gap: 4px; height: 48px; padding: 4px; border-radius: var(--r); background: rgba(20, 20, 20, .85); border: 1px solid var(--line-2); transition: border-color .2s, box-shadow .2s; }
.search:focus-within { border-color: var(--gold-line); box-shadow: 0 0 0 4px var(--gold-soft); }
.search__key {
  -webkit-appearance: none; appearance: none; height: 100%; padding: 0 30px 0 12px; border: 0; border-radius: 7px;
  font-size: 14px; color: var(--text-2); cursor: pointer;
  background: var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23caa165' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center / 15px;
}
.search__key option { color: var(--ink); }
.search__input { flex: 1; width: 220px; min-width: 0; height: 100%; padding: 0 10px; border: 0; background: transparent; }
.search__input::placeholder { color: var(--dim); }
.search__key:focus-visible, .search__input:focus-visible { outline: none; }
.search__btn { display: grid; place-items: center; width: 40px; height: 100%; padding: 0; border: 0; border-radius: 7px; color: var(--gold-ink); background: var(--grad-gold); }
.search__btn .ico { font-size: 18px; }
.note { margin-bottom: 16px; font-size: 14.5px; color: var(--text-2); }
.note a { margin-left: 8px; color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }

.pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 32px; }
.pager a, .pager span { display: inline-grid; place-items: center; min-width: 42px; height: 42px; padding: 0 8px; border-radius: 8px; font-family: var(--display); font-size: 15px; font-weight: 500; color: var(--text-2); background: var(--surface); border: 1px solid var(--line); transition: .2s; }
.pager a:hover { color: var(--gold-2); border-color: var(--gold-line); }
.pager .is-current { color: #fff; background: var(--grad-red); border-color: rgba(255, 140, 140, .3); }
.pager .is-disabled { opacity: .35; }
.pager .ico { font-size: 18px; }

.ava { display: inline-grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; font-family: var(--display); font-size: 16px; font-weight: 600; color: #1a0d05; background: hsl(calc(var(--h, 30) * .12 + 12) 62% 62%); }

/* ---------- เนื้อหาจากระบบจัดการ (อ่านบนพื้นกระดาษสีอุ่น) ---------- */
.reader { padding: clamp(20px, 4vw, 48px); border-radius: 6px; color: var(--ink); background: var(--paper); box-shadow: 0 30px 60px -36px #000; }
.reader.frame { border-color: rgba(202, 161, 101, .55); }
.prose { font-size: 16px; line-height: 1.85; color: var(--ink); overflow-wrap: anywhere; }
.prose p { margin: 0; min-height: 1.85em; }
.prose h1, .prose h2, .prose h3, .prose h4 { margin: 1.1em 0 .5em; line-height: 1.45; color: var(--ink); scroll-margin-top: calc(var(--top) + 24px); }
.prose h2 { font-size: 21px; }
/* <h1> ในเนื้อหาคู่มือ/ข่าวแสดงเป็น <h2 class="prose-h1"> (หน้ามี H1 เดียวคือชื่อบทความ) — ขนาดเท่า h1 เดิม */
.prose h1, .prose .prose-h1 { font-size: 24px; }
.prose h3 { font-size: 18.5px; }
.prose h4 { font-size: 17px; }
.prose > :first-child { margin-top: 0; }
.prose a { color: #a3121a; text-decoration: underline; text-underline-offset: 3px; }
.prose img { max-width: 100%; height: auto; border-radius: 4px; }
.prose ul, .prose ol { margin: .4em 0; padding-left: 1.5em; }
.prose li { margin: .2em 0; }
.prose hr { margin: 1.5em 0; border: 0; border-top: 1px solid var(--paper-line); }
.prose blockquote { margin: 1em 0; padding: 12px 18px; border-left: 3px solid var(--gold-3); background: var(--paper-2); }
.prose figure { max-width: 100%; margin: 1em 0; }
.prose figure.image { text-align: center; }
.prose figure.table { overflow-x: auto; }
.prose figure.media iframe, .prose iframe[src*="youtube"] { width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: 6px; }
.prose table { max-width: 100%; margin: .8em 0; border-collapse: collapse; font-size: 15px; }
.prose th, .prose td { padding: 8px 10px; border: 1px solid var(--paper-line); vertical-align: middle; }
.prose th { background: var(--paper-2); }
/* ภาพจากในเกม (img/shots) ท้ายคู่มือระบบ: ตารางภาพย่อ แตะเพื่อเปิดภาพเต็ม */
.prose .shot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: .8em 0 1.2em; }
.prose .shot-grid--sm { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.prose .shot-grid a { display: block; overflow: hidden; border-radius: 4px; background: #1a1714; border: 1px solid var(--paper-line); transition: border-color .2s, transform .2s; }
.prose .shot-grid a:hover, .prose .shot-grid a:focus-visible { border-color: rgba(163, 18, 26, .5); transform: translateY(-2px); }
.prose .shot-grid img { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 0; }
.prose .shot-grid--sm img { aspect-ratio: 4 / 3; object-fit: contain; background: #393939; }

/* ---------- ชิ้นส่วนลอย ---------- */
.to-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 55; display: grid; place-items: center;
  width: 46px; height: 46px; padding: 0; border-radius: 8px; color: var(--gold-2); background: rgba(20, 20, 20, .9); border: 1px solid var(--gold-line);
  opacity: 0; visibility: hidden; transform: translateY(10px); transition: .3s;
}
.to-top .ico { font-size: 20px; }
.to-top.is-show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { color: var(--gold-ink); background: var(--grad-gold); }
.toasts { position: fixed; left: 50%; bottom: 28px; z-index: 400; display: grid; gap: 10px; width: min(calc(100% - 32px), 440px); transform: translateX(-50%); pointer-events: none; }
.toast {
  padding: 14px 18px; border-radius: 8px; font-size: 14.5px; line-height: 1.6; white-space: pre-line;
  color: var(--text); background: #171717; border: 1px solid var(--gold-line); border-left: 3px solid var(--red); box-shadow: var(--shadow);
  opacity: 0; transform: translateY(12px); transition: opacity .3s, transform .3s var(--ease);
}
.toast.is-in { opacity: 1; transform: none; }

.lightbox { width: min(1100px, calc(100% - 32px)); padding: 0; border: 0; overflow: visible; background: transparent; }
.lightbox::backdrop { background: rgba(0, 0, 0, .9); }
.lightbox__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; color: #fff; }
.lightbox__title { font-family: var(--display); font-size: 17px; font-weight: 500; }
.lightbox__close { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border-radius: 8px; color: #fff; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); }
.lightbox__frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 6px; background: #000; border: 1px solid var(--gold-line); }
.lightbox__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- ท้ายเว็บ: เส้นทองประดับเพชร → แบรนด์ + แผนผังเว็บ 6 คอลัมน์ → แถบล่างชื่อเกม/ลิงก์ด่วน ---------- */
.foot {
  position: relative; isolation: isolate; overflow: hidden; margin-top: clamp(40px, 6vw, 80px); font-size: 14px; color: var(--muted);
  background: radial-gradient(900px 280px at 50% 0, rgba(142, 27, 43, .16), rgba(142, 27, 43, 0) 70%), #0b0b0a;
}
.foot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, rgba(198, 168, 108, 0), rgba(198, 168, 108, .6) 50%, rgba(198, 168, 108, 0)); }
.foot__gem { position: absolute; left: 50%; top: -5px; width: 11px; height: 11px; margin-left: -5px; background: #0b0b0a; border: 1px solid var(--gold); transform: rotate(45deg); }
.foot__han { position: absolute; right: clamp(-10px, 3vw, 60px); bottom: -.22em; z-index: -1; font-size: clamp(200px, 22vw, 320px); line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(198, 168, 108, .1); pointer-events: none; user-select: none; }
.foot__main { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); padding-block: 60px 50px; }
.foot__desc { max-width: 300px; margin: 20px 0 24px; font-size: 13px; line-height: 1.9; }
.foot__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.foot__social { display: flex; gap: 8px; list-style: none; }
.foot__social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-sm); color: var(--gold); border: 1px solid rgba(198, 168, 108, .24); transition: color .2s, background-color .2s, border-color .2s; }
.foot__social a:hover { color: var(--gold-ink); background: var(--grad-gold); border-color: transparent; }
.foot__social .ico { font-size: 18px; }
.foot__map { display: grid; grid-template-columns: repeat(6, auto); justify-content: space-between; align-content: start; gap: 34px 28px; }
.foot__col h3 { position: relative; margin-bottom: 16px; padding-bottom: 12px; font-family: var(--display); font-size: 14.5px; font-weight: 500; white-space: nowrap; color: #ead8b4; }
.foot__col h3::after { content: ""; position: absolute; left: 0; bottom: 0; width: 22px; height: 1px; background: var(--gold); }
.foot__col ul { display: grid; gap: 10px; list-style: none; }
.foot__col a { font-size: 13px; white-space: nowrap; color: #a39c90; transition: color .2s; }
.foot__col a:hover { color: var(--gold-2); }
.foot__base { background: rgba(0, 0, 0, .4); border-top: 1px solid rgba(198, 168, 108, .14); }
.foot__base-in { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; padding-block: 18px; }
.foot__sign { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--dim); }
.foot__sign b { font-family: var(--serif, var(--display)); font-size: 13px; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; color: #cdb887; }
.foot__quick { display: flex; flex-wrap: wrap; gap: 6px 24px; list-style: none; font-size: 12.5px; }
.foot__quick a { color: #a39c90; transition: color .2s; }
.foot__quick a:hover { color: var(--gold-2); }
/* ท้ายเว็บแบบบรรทัดเดียว (page_footer(..., ['slim' => true]) — หน้าระบบสมาชิก) ชิดล่างจอเสมอ */
.foot--slim { margin-top: auto; background: rgba(0, 0, 0, .45); }
.foot--slim .foot__base-in { padding-block: 14px; }

/* ==========================================================================
   หน้าแรก
   ========================================================================== */
/* ฉากหลังด้านบน: ภาพเมืองเพลิง (ต่อใต้แถบเมนู) + ประกายไฟลอยขึ้น */
.hero { position: relative; isolation: isolate; margin-top: calc(-1 * var(--top)); padding-top: var(--top); }
.hero__art { position: absolute; left: 0; right: 0; top: 0; z-index: -2; height: min(640px, 88vh); overflow: hidden; }
.hero__art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; opacity: .62; filter: saturate(1.15) contrast(1.05); }
.hero__art::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(130% 100% at 50% 0%, rgba(12, 12, 12, 0) 35%, rgba(12, 12, 12, .75) 100%),
    linear-gradient(180deg, rgba(12, 12, 12, .25) 0%, rgba(12, 12, 12, .3) 40%, var(--bg) 100%);
}
.embers { position: absolute; left: 0; right: 0; top: 0; z-index: -1; height: min(640px, 88vh); overflow: hidden; pointer-events: none; }
.embers i {
  position: absolute; bottom: -8px; left: var(--x, 50%); width: var(--s, 3px); height: var(--s, 3px); border-radius: 50%;
  background: #ffc48a; box-shadow: 0 0 6px 2px rgba(255, 120, 40, .75), 0 0 14px 4px rgba(255, 70, 20, .35);
  opacity: 0; animation: ember var(--d, 9s) linear var(--delay, 0s) infinite;
}
@keyframes ember {
  0% { transform: translate(0, 0) scale(1); opacity: 0; }
  12% { opacity: .95; }
  70% { opacity: .6; }
  100% { transform: translate(var(--dx, 30px), -560px) scale(.4); opacity: 0; }
}
.home-top { padding-block: 22px 8px; }
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }

/* กิจกรรมเด่น (สไลด์ในกรอบทอง) */
.feat { grid-column: span 8; grid-row: span 2; display: flex; flex-direction: column; min-height: 460px; border-radius: 4px; background: var(--surface); box-shadow: var(--shadow); }
.feat__stage { position: relative; flex: 1; min-height: 300px; overflow: hidden; border-radius: 3px 3px 0 0; background: var(--bg-2); }
.feat__slide { position: absolute; inset: 0; display: block; opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility 0s linear .8s; }
.feat__slide.is-active { opacity: 1; visibility: visible; z-index: 1; transition: opacity .8s ease; }
.feat__slide img { width: 100%; height: 100%; object-fit: cover; object-position: 44% 50%; transform: scale(1.04); transition: transform 6s ease-out; }
.feat__slide.is-active img { transform: none; }
.feat__badge { position: absolute; top: 16px; left: 16px; z-index: 2; box-shadow: 0 8px 20px -8px #000; }
.feat__badge.tag { height: 28px; padding: 0 12px; font-size: 13px; color: #fff; background: var(--grad-red); }
.feat__bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 22px; border-top: 1px solid rgba(202, 161, 101, .22); background: linear-gradient(180deg, #161616, #111); border-radius: 0 0 3px 3px; }
.feat__text { min-width: 0; }
.feat__count { font-family: var(--display); font-size: 14px; font-weight: 300; letter-spacing: .14em; color: var(--gold); }
.feat__title { display: block; overflow: hidden; margin-top: 2px; font-family: var(--display); font-size: clamp(17px, 1.6vw, 21px); font-weight: 500; white-space: nowrap; text-overflow: ellipsis; transition: color .2s; }
.feat__title:hover { color: var(--gold-2); }
.feat__ctrl { display: flex; align-items: center; gap: 10px; flex: none; }
.feat__dots { display: flex; gap: 6px; }
.feat__arrows { display: flex; gap: 6px; }
.feat__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: var(--line-2); transition: width .3s, background-color .3s; }
.feat__dot.is-active { width: 26px; background: var(--grad-gold); }
.feat__btn { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 8px; color: var(--text); background: rgba(255, 255, 255, .04); border: 1px solid var(--line-2); transition: .2s; }
.feat__btn:hover { color: var(--gold-ink); background: var(--grad-gold); border-color: transparent; }
.feat__btn .ico { font-size: 18px; }

/* ไทล์เริ่มเล่น: แผงแดงชาดไล่เข้ม */
.play {
  grid-column: span 4; position: relative; overflow: hidden; isolation: isolate; padding: 26px;
  border-radius: var(--r-lg); color: var(--text); background: var(--grad-ember); border: 1px solid rgba(202, 161, 101, .35);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 200, 150, .12);
}
.play::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(90% 70% at 100% 0%, rgba(238, 140, 58, .35), rgba(238, 140, 58, 0) 70%); }
.play__mark { position: absolute; right: -10px; bottom: -34px; z-index: -1; font-family: var(--han); font-weight: 900; font-size: 150px; line-height: 1; letter-spacing: -.05em; color: rgba(236, 208, 160, .08); pointer-events: none; user-select: none; }
.play__kicker { font-family: var(--display); font-size: 12.5px; font-weight: 400; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }
.play__title { margin: 6px 0 8px; font-family: var(--display); font-size: clamp(25px, 2.4vw, 32px); font-weight: 600; line-height: 1.2; color: #fff; }
.play__text { margin-bottom: 18px; font-size: 14.5px; line-height: 1.6; color: rgba(243, 238, 232, .78); }
.play__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.code-chip { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--gold-2); background: rgba(0, 0, 0, .3); border: 1px dashed rgba(236, 208, 160, .55); transition: .2s; }
.code-chip code { font-family: var(--mono); font-size: 15px; letter-spacing: .08em; color: #fff; }
.code-chip:hover { background: rgba(0, 0, 0, .45); border-style: solid; }

/* ไทล์ประกาศสำคัญ */
.notice { grid-column: span 4; }
.mini { list-style: none; }
.mini a { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 11px 0; border-top: 1px solid var(--line); }
.mini time { font-family: var(--display); font-size: 13.5px; font-weight: 400; color: var(--gold); white-space: nowrap; }
.mini span { overflow: hidden; font-size: 14.5px; color: var(--text-2); white-space: nowrap; text-overflow: ellipsis; transition: color .2s; }
.mini a:hover span { color: var(--gold-2); }

/* การ์ดข่าว */
.ncards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; list-style: none; }
.ncard { position: relative; display: flex; flex-direction: column; gap: 12px; height: 100%; min-height: 220px; padding: 20px; border-radius: var(--r); background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0) 45%), var(--surface); border: 1px solid var(--line); transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; }
.ncard::before { content: ""; position: absolute; left: 20px; right: 20px; top: -1px; height: 2px; background: var(--grad-gold); opacity: 0; transition: opacity .3s; }
.ncard:hover { transform: translateY(-4px); border-color: var(--gold-line); box-shadow: 0 24px 40px -24px rgba(0, 0, 0, .9), 0 0 0 1px rgba(202, 161, 101, .08); }
.ncard:hover::before { opacity: 1; }
.ncard__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ncard__date { font-family: var(--display); font-size: 13.5px; font-weight: 300; color: var(--muted); white-space: nowrap; }
.ncard__title { display: -webkit-box; overflow: hidden; font-family: var(--display); font-size: 18px; font-weight: 500; line-height: 1.45; -webkit-line-clamp: 3; -webkit-box-orient: vertical; transition: color .2s; }
.ncard:hover .ncard__title { color: var(--gold-2); }
.ncard__sum { display: -webkit-box; overflow: hidden; font-size: 14px; color: var(--muted); -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ncard__go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; font-family: var(--display); font-size: 14.5px; font-weight: 400; color: var(--gold); }

/* แถบกว้างเต็มจอ พื้นเป็นภาพย้อมสีแดงอิฐ (อาวุธหน้าแรก) */
.band { position: relative; isolation: isolate; margin-block: clamp(16px, 3vw, 36px); padding-block: clamp(52px, 7vw, 92px); }
.band__art { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: #140605; }
.band__art img { width: 100%; height: 100%; object-fit: cover; opacity: .5; filter: saturate(1.1) blur(1px); }
.band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--bg) 0%, rgba(12, 12, 12, .45) 22%, rgba(12, 12, 12, .5) 78%, var(--bg) 100%), radial-gradient(70% 60% at 50% 55%, rgba(0, 0, 0, 0), rgba(0, 0, 0, .55)); }
.band .sec-head { margin-bottom: 28px; }

/* แผงอาวุธแบบยืดขยาย */
.blades { display: flex; gap: 10px; height: clamp(420px, 40vw, 540px); }
.blade {
  position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; isolation: isolate;
  border-radius: 6px; border: 1px solid rgba(202, 161, 101, .18);
  background:
    radial-gradient(75% 55% at 50% 68%, hsla(var(--glow, 10), 78%, 45%, .5), hsla(var(--glow, 10), 78%, 45%, 0) 72%),
    linear-gradient(180deg, #1d1716, #0b0908);
  transition: flex-grow .6s var(--ease), border-color .3s, box-shadow .3s;
}
.blade.is-active { flex-grow: 5; border-color: var(--gold-line); box-shadow: 0 0 0 1px rgba(202, 161, 101, .12), 0 30px 60px -30px rgba(200, 22, 31, .55); }
.blade__art { position: absolute; left: 50%; bottom: 0; z-index: -2; width: auto; max-width: none; height: 86%; transform: translateX(-50%); transition: transform .6s var(--ease), height .6s var(--ease); }
.blade::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8, 8, 8, .1) 20%, rgba(8, 8, 8, .15) 45%, rgba(8, 8, 8, .92) 100%); }
.blade__han { position: absolute; top: 16px; left: 50%; font-size: 38px; line-height: 1; color: var(--gold-2); text-shadow: 0 4px 18px rgba(0, 0, 0, .8); transform: translateX(-50%); transition: left .5s var(--ease), transform .5s var(--ease), font-size .5s var(--ease); }
.blade__label { position: absolute; left: 50%; bottom: 22px; font-family: var(--display); font-size: 17px; font-weight: 500; color: #fff; white-space: nowrap; text-shadow: 0 2px 10px rgba(0, 0, 0, .9); writing-mode: vertical-rl; transform: translateX(-50%) rotate(180deg); transition: opacity .25s; }
.blade__body { position: absolute; left: 0; bottom: 0; width: min(480px, 100%); padding: 26px 28px; opacity: 0; transform: translateY(14px); transition: opacity .3s, transform .4s var(--ease); pointer-events: none; }
.blade__name, .blade__tag, .blade__desc { display: block; }
.blade__name { font-family: var(--display); font-size: 32px; font-weight: 600; color: #fff; }
.blade__tag { margin: 2px 0 8px; font-family: var(--display); font-size: 16px; font-weight: 400; color: var(--gold-2); }
.blade__desc { max-width: 44ch; font-size: 14.5px; line-height: 1.65; color: var(--text-2); }
.blade__go { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-family: var(--display); font-size: 15px; font-weight: 400; color: var(--gold); }
.blade.is-active .blade__han { left: 28px; font-size: 56px; transform: none; }
.blade.is-active .blade__label { opacity: 0; }
.blade.is-active .blade__body { opacity: 1; transform: none; transition-delay: .18s; pointer-events: auto; }
.blade.is-active .blade__art { transform: translateX(-50%) scale(1.03); }

/* ไทล์หมวดคู่มือ */
.gtiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; list-style: none; }
.gtile { display: flex; flex-direction: column; gap: 12px; height: 100%; padding: 22px; border-radius: var(--r); background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0) 45%), var(--surface); border: 1px solid var(--line); transition: border-color .3s; }
.gtile:hover { border-color: var(--gold-line); }
.gtile__icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 8px; color: #ffe9c7; background: linear-gradient(150deg, #cf2a31, #7f0b12); box-shadow: inset 0 0 0 1px rgba(255, 214, 160, .25); }
.gtile__icon .ico { font-size: 22px; }
.gtile__head { display: flex; align-items: center; justify-content: space-between; }
.gtile__count { font-family: var(--display); font-size: 13.5px; font-weight: 300; color: var(--muted); }
.gtile__title { font-family: var(--display); font-size: 20px; font-weight: 500; color: var(--gold-2); }
.gtile ul { display: grid; grid-template-columns: minmax(0, 1fr); list-style: none; }
.gtile li a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; font-size: 14.5px; color: var(--text-2); border-top: 1px dashed var(--line-2); transition: color .2s; }
.gtile li a .ico { flex: none; color: var(--dim); }
.gtile li a:hover { color: var(--gold-2); }
.gtile li span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.gtile__all { margin-top: auto; }

/* แถบวิดีโอ */
.strip { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 16px) / 4); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; list-style: none; padding-bottom: 4px; }
.strip::-webkit-scrollbar { display: none; }
.strip > li { scroll-snap-align: start; display: flex; }
.strip-nav { display: flex; gap: 8px; }
.strip-btn { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border-radius: 8px; color: var(--text); background: var(--surface); border: 1px solid var(--line-2); transition: .2s; }
.strip-btn:hover:not(:disabled) { color: var(--gold-ink); background: var(--grad-gold); border-color: transparent; }
.strip-btn:disabled { opacity: .35; cursor: default; }
.strip-btn .ico { font-size: 18px; }
.vcard { display: flex; flex-direction: column; width: 100%; padding: 0; overflow: hidden; text-align: left; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); transition: transform .3s var(--ease), border-color .3s; }
.vcard:hover { transform: translateY(-4px); border-color: var(--gold-line); }
.vcard__img { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-2); }
.vcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.vcard:hover .vcard__img img { transform: scale(1.05); }
.vcard__play { position: absolute; left: 12px; bottom: 12px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #fff; background: var(--grad-red); box-shadow: 0 0 0 6px rgba(200, 22, 31, .22), 0 8px 20px -6px rgba(0, 0, 0, .8); }
.vcard__play .ico { font-size: 16px; margin-left: 2px; }
.vcard__ph { display: grid; place-items: center; width: 100%; height: 100%; font-size: 38px; color: var(--dim); }
.vcard__ph .ico { stroke-width: 1.4; }
.vcard__body { display: block; padding: 14px 16px 16px; }
.vcard__title { display: -webkit-box; overflow: hidden; margin-bottom: 4px; font-size: 15px; font-weight: 600; line-height: 1.5; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.vcard__body time { font-size: 12.5px; color: var(--muted); }

/* ==========================================================================
   หน้าย่อย
   ========================================================================== */
/* หัวหน้าย่อย: ภาพแบนเนอร์ของหมวดย้อมโทนแดงอิฐ ต่อใต้แถบเมนู */
.ph { position: relative; isolation: isolate; overflow: hidden; margin-top: calc(-1 * var(--top)); padding-block: calc(var(--top) + clamp(26px, 4vw, 48px)) clamp(26px, 3vw, 40px); }
.ph__art { position: absolute; inset: 0; z-index: -3; overflow: hidden; background: #140806; }
.ph__art img { width: 100%; height: 100%; object-fit: cover; opacity: .7; filter: sepia(.5) saturate(1.35) hue-rotate(-14deg) brightness(calc(1 + var(--flash, 0) * .5)); }
/* สายฟ้า (js/app.js storm()): canvas เหนือภาพพื้นหลัง/ม่านเงา ใต้ตัวหนังสือ · --flash = ความสว่างขณะฟ้าแลบ (0–1) */
.bolt { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.ph::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(10, 10, 10, .9) 0%, rgba(10, 10, 10, .55) 55%, rgba(10, 10, 10, .35) 100%), linear-gradient(180deg, rgba(10, 10, 10, .35) 0%, rgba(10, 10, 10, 0) 45%, var(--bg) 100%); }
.ph::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(202, 161, 101, 0), var(--gold-line), rgba(202, 161, 101, 0)); }
.ph__han { position: absolute; z-index: -1; top: calc(var(--top) - 36px); right: clamp(4px, 5vw, 80px); font-family: var(--han); font-weight: 900; font-size: clamp(150px, 17vw, 250px); line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(236, 208, 160, .22); pointer-events: none; user-select: none; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 16px; font-size: 13.5px; color: var(--muted); }
.crumbs a { display: inline-flex; align-items: center; color: var(--text-2); transition: color .2s; }
.crumbs a:hover { color: var(--gold-2); }
.crumbs .ico { font-size: 15px; }
.crumbs .crumbs__sep { font-size: 13px; color: var(--dim); }
.ph__en { font-family: var(--display); font-size: clamp(22px, 2.6vw, 32px); font-weight: 200; line-height: 1.1; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.ph__title { position: relative; margin-top: 4px; font-family: var(--display); font-size: clamp(34px, 4.6vw, 56px); font-weight: 600; line-height: 1.15; text-shadow: 0 4px 24px rgba(0, 0, 0, .6); }
.ph__desc { position: relative; max-width: 62ch; margin-top: 10px; font-size: 16px; color: var(--text-2); }
.ph__bar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 26px; }
.page { padding-block: 22px 24px; }

/* รายการข่าว */
.plist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; list-style: none; }
.pcard { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 16px; height: 100%; padding: 16px 18px; border-radius: var(--r); background: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, 0) 50%), var(--surface); border: 1px solid var(--line); transition: border-color .25s, background-color .25s; }
a.pcard:hover { border-color: var(--gold-line); }
.pcard.is-pinned { border-color: rgba(200, 22, 31, .45); background: linear-gradient(120deg, rgba(200, 22, 31, .14), var(--surface) 60%); }
.pcard__date { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 8px; background: #0e0e0e; border: 1px solid rgba(202, 161, 101, .25); }
.pcard__date b { font-family: var(--display); font-size: 25px; font-weight: 500; line-height: 1; color: var(--gold-2); }
.pcard__date span { margin-top: 4px; font-size: 11.5px; color: var(--muted); }
.pcard__body { min-width: 0; }
.pcard__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.pcard__title { display: -webkit-box; overflow: hidden; font-size: 16px; font-weight: 600; line-height: 1.5; -webkit-line-clamp: 2; -webkit-box-orient: vertical; transition: color .2s; }
a.pcard:hover .pcard__title { color: var(--gold-2); }
.pcard__go { color: var(--dim); font-size: 20px; transition: color .2s, transform .2s; }
a.pcard:hover .pcard__go { color: var(--gold); transform: translateX(3px); }
.pin { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--red-3); }

/* อ่านบทความ */
.article { width: min(100%, 900px); margin-inline: auto; }
.ahead { margin-bottom: 22px; }
.ahead__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 14px; color: var(--muted); }
.ahead__meta time { display: inline-flex; align-items: center; gap: 6px; }
.ahead__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.ahead__title { font-family: var(--display); font-size: clamp(25px, 3vw, 35px); font-weight: 600; line-height: 1.35; }
.icon-btn { display: inline-flex; align-items: center; gap: 8px; flex: none; height: 40px; padding: 0 14px; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--text-2); background: rgba(255, 255, 255, .03); border: 1px solid var(--line-2); white-space: nowrap; transition: .2s; }
.icon-btn:hover { color: var(--gold-2); border-color: var(--gold-line); }
.icon-btn .ico { font-size: 17px; }
.pn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.pn__item { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 16px 18px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); transition: .2s; }
.pn__item--next { align-items: flex-end; text-align: right; }
a.pn__item:hover { border-color: var(--gold-line); }
a.pn__item:hover .pn__title { color: var(--gold-2); }
.pn__label { display: inline-flex; align-items: center; gap: 6px; font-family: var(--display); font-size: 13px; font-weight: 300; letter-spacing: .06em; color: var(--gold); }
.pn__title { display: -webkit-box; max-width: 100%; overflow: hidden; font-weight: 600; line-height: 1.5; -webkit-line-clamp: 2; -webkit-box-orient: vertical; transition: color .2s; }
.pn__item.is-empty .pn__title { font-weight: 500; color: var(--dim); }
.aback { display: flex; justify-content: center; margin-top: 24px; }

/* ชุมชน */
.feed { display: grid; gap: 10px; list-style: none; }
.post { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 15px 18px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.post.is-pinned { border-color: rgba(200, 22, 31, .45); background: linear-gradient(120deg, rgba(200, 22, 31, .12), var(--surface) 60%); }
.post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 4px; font-size: 13px; color: var(--muted); }
.post__author { font-weight: 600; color: var(--text-2); }
.post__title { font-size: 15.5px; font-weight: 600; line-height: 1.5; }
.bubble { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 6px; font-size: 13px; font-weight: 600; color: var(--gold-2); background: var(--gold-soft); }
.bubble .ico { font-size: 15px; }
.vgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; list-style: none; }
.vgrid > li { display: flex; }

/* อ่านคู่มือ: สารบัญ "ในหน้านี้" อยู่เหนือเนื้อหา + หัวข้ออื่นในหมวดย่อยเดียวกันอยู่ท้ายบทความ (ไม่มีเมนูด้านข้าง) */
.toc { margin-bottom: 18px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.toc > summary { display: flex; align-items: center; gap: 10px; padding: 14px 18px; cursor: pointer; list-style: none; font-family: var(--display); font-size: 16px; font-weight: 500; }
.toc > summary::-webkit-details-marker { display: none; }
.toc > summary .ico { font-size: 18px; color: var(--gold); }
.toc > summary .toc__chev { margin-left: auto; color: var(--muted); transition: transform .25s; }
.toc[open] > summary .toc__chev { transform: rotate(180deg); }
.toc__count { font-family: var(--font); font-size: 13px; font-weight: 500; color: var(--muted); }
.toc ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; padding: 0 18px 12px; list-style: none; counter-reset: t; }
.toc a { display: flex; gap: 10px; padding: 8px 0; font-size: 14.5px; line-height: 1.5; color: var(--text-2); border-top: 1px dashed var(--line-2); transition: color .2s; }
.toc a::before { counter-increment: t; content: counter(t, decimal-leading-zero); min-width: 22px; padding-top: 1px; font-family: var(--display); font-size: 13px; font-weight: 400; color: var(--gold); }
.toc a.toc--sub { padding-left: 12px; font-size: 14px; color: var(--muted); }
.toc a.toc--sub::before { counter-increment: none; content: "–"; min-width: 10px; color: var(--dim); }
.toc a:hover { color: var(--gold-2); }

.related { margin-top: 34px; }
.related__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin-bottom: 12px; }
.related__title { font-family: var(--display); font-size: 21px; font-weight: 500; }
.related ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; list-style: none; counter-reset: r; }
.related li a { display: flex; align-items: center; gap: 12px; height: 100%; padding: 12px 16px; border-radius: var(--r); font-size: 14.5px; font-weight: 500; line-height: 1.5; color: var(--text-2); background: var(--surface); border: 1px solid var(--line); transition: color .2s, border-color .2s; }
.related li a::before { counter-increment: r; content: counter(r, decimal-leading-zero); display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 6px; font-family: var(--display); font-size: 13.5px; font-weight: 500; color: var(--gold-2); background: var(--gold-soft); }
.related li a:hover { color: var(--text); border-color: var(--gold-line); }
.related li a.is-current { color: #fff; border-color: rgba(200, 22, 31, .55); background: linear-gradient(120deg, rgba(200, 22, 31, .2), var(--surface) 70%); }
.related li a.is-current::before { color: #fff; background: var(--grad-red); }

.gtools { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.gsearch { display: flex; align-items: center; gap: 10px; width: min(100%, 420px); height: 48px; padding: 0 16px; border-radius: var(--r); background: rgba(20, 20, 20, .85); border: 1px solid var(--line-2); transition: border-color .2s, box-shadow .2s; }
.gsearch:focus-within { border-color: var(--gold-line); box-shadow: 0 0 0 4px var(--gold-soft); }
.gsearch .ico { font-size: 19px; color: var(--gold); }
.gsearch input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; }
.gsearch input::placeholder { color: var(--dim); }
.gtools__count { font-size: 14.5px; color: var(--muted); }
.gtools__count b { color: var(--gold-2); }
.gcat + .gcat { margin-top: 44px; }
.gcat__head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(202, 161, 101, .22); }
.gcat__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 8px; color: #ffe9c7; background: linear-gradient(150deg, #cf2a31, #7f0b12); box-shadow: inset 0 0 0 1px rgba(255, 214, 160, .25); }
.gcat__icon .ico { font-size: 20px; }
.gcat__title { font-family: var(--display); font-size: clamp(22px, 2.3vw, 27px); font-weight: 500; }
.gcat__count { margin-left: auto; font-family: var(--display); font-size: 14px; font-weight: 300; color: var(--gold); white-space: nowrap; }
.gcat__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; align-items: start; }
.gsub { padding: 16px 18px 10px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); transition: border-color .3s; }
.gsub:hover { border-color: rgba(202, 161, 101, .25); }
.gsub__title { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; font-family: var(--display); font-size: 16px; font-weight: 500; color: var(--gold-2); }
.gsub__title small { font-family: var(--font); font-size: 12.5px; font-weight: 500; color: var(--dim); }
.gsub__list { list-style: none; counter-reset: g; }
.gsub__list a { display: flex; gap: 10px; padding: 7px 0; font-size: 14.5px; line-height: 1.55; color: var(--text-2); border-top: 1px dashed var(--line-2); transition: color .2s; }
.gsub__list a::before { counter-increment: g; content: counter(g, decimal-leading-zero); min-width: 22px; padding-top: 1px; font-family: var(--display); font-size: 13px; font-weight: 400; color: var(--gold); }
.gsub__list a:hover { color: var(--gold-2); }

/* FAQ: หมวดคำถามเป็นปุ่มแนวนอนเหนือรายการ */
.faqbar { margin-bottom: 18px; }
.pill small { font-family: var(--font); font-size: 12px; font-weight: 500; color: var(--gold); opacity: .75; }
.pill.is-active small { color: var(--gold-2); opacity: 1; }
.faq { display: grid; gap: 10px; }
.qa { overflow: hidden; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); transition: border-color .25s; }
.qa[open] { border-color: var(--gold-line); }
.qa__sum { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto 22px; grid-template-areas: "q text cat chev"; align-items: center; gap: 12px 14px; padding: 16px 18px; cursor: pointer; list-style: none; transition: background-color .2s; }
.qa__sum::-webkit-details-marker { display: none; }
.qa__sum:hover { background: rgba(255, 255, 255, .02); }
.qa__q { grid-area: q; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 7px; font-family: var(--display); font-weight: 600; color: #fff; background: var(--grad-red); }
.qa__text { grid-area: text; font-size: 15.5px; font-weight: 600; line-height: 1.5; }
.qa__cat { grid-area: cat; }
.qa__chev { grid-area: chev; font-size: 20px; color: var(--muted); transition: transform .25s; }
.qa[open] .qa__chev { transform: rotate(180deg); color: var(--gold); }
.qa__body { margin: 0 18px 18px; padding: 18px 20px; border-radius: 6px; color: var(--ink); background: var(--paper); border-top: 2px solid var(--gold); }
.helpbox { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-top: 30px; padding: 26px 28px; border-radius: var(--r-lg); background: var(--grad-ember); border: 1px solid rgba(202, 161, 101, .35); }
.helpbox__title { font-family: var(--display); font-size: 21px; font-weight: 600; color: #fff; }
.helpbox__text { margin-top: 2px; font-size: 14.5px; color: rgba(243, 238, 232, .75); }

/* ตัวละคร */
.blades--tall { height: clamp(460px, 46vw, 600px); }
.skills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; list-style: none; }
.skill { display: flex; gap: 14px; height: 100%; padding: 18px 20px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); transition: border-color .2s; }
.skill:hover { border-color: var(--gold-line); }
.hanbadge { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 8px; font-family: var(--han); font-weight: 900; font-size: 22px; line-height: 1; color: #ffe9c7; background: linear-gradient(150deg, #cf2a31, #7f0b12); box-shadow: inset 0 0 0 1px rgba(255, 214, 160, .25); }
.skill__who, .skill__name, .skill__desc { display: block; }
.skill__who { font-size: 13px; color: var(--muted); }
.skill__name { margin: 2px 0 4px; font-family: var(--display); font-size: 19px; font-weight: 500; color: var(--gold-2); }
.skill__desc { font-size: 14px; line-height: 1.75; color: var(--text-2); }

.cd { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(22px, 4vw, 56px); align-items: center; }
.cd__stage { position: relative; display: flex; align-items: flex-end; justify-content: center; height: clamp(440px, 46vw, 640px); padding-top: 24px; overflow: hidden; isolation: isolate; border-radius: 6px; background: var(--surface); border: 1px solid var(--gold-line); }
.cd__bg { position: absolute; inset: 0; z-index: -2; }
.cd__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .55; filter: sepia(.45) saturate(1.2) hue-rotate(-15deg); }
.cd__stage::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 50% at 50% 55%, rgba(200, 22, 31, .32), rgba(200, 22, 31, 0) 70%), linear-gradient(180deg, rgba(8, 8, 8, 0) 55%, rgba(8, 8, 8, .75)); }
.cd__han { position: absolute; top: 12px; left: 18px; z-index: -1; font-size: clamp(120px, 12vw, 180px); line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(236, 208, 160, .4); }
.cd__art { width: auto; max-width: 92%; max-height: 100%; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .7)); }
.cd__switch { display: flex; margin: 0 0 22px -12px; }
.cd__name { font-family: var(--display); font-size: clamp(38px, 4.6vw, 58px); font-weight: 600; line-height: 1.1; }
.cd__name .han { margin-left: 12px; font-size: .7em; color: var(--gold); }
.cd__title { margin: 12px 0 14px; font-family: var(--display); font-size: clamp(18px, 2vw, 23px); font-weight: 400; line-height: 1.5; color: var(--gold-2); }
.cd__text { margin-bottom: 24px; line-height: 1.9; color: var(--text-2); }
.cd__skill { padding: 18px 20px; border-radius: var(--r); background: var(--grad-ember); border: 1px solid rgba(202, 161, 101, .35); }
.cd__skill-label { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-size: 13.5px; font-weight: 400; letter-spacing: .06em; color: var(--gold); }
.cd__skill-name { margin: 4px 0 6px; font-family: var(--display); font-size: 22px; font-weight: 600; color: #fff; }
.cd__skill-desc { line-height: 1.85; color: rgba(243, 238, 232, .82); }

/* แนะนำเกม (เนื้อหาจากระบบจัดการ) */
.gi { text-align: center; }
.gi .intro-image img { width: 120px; }
.gi .mookhon-text-block, .gi .weapon-info-block, .gi .explore-info-block { max-width: 860px; margin: 0 auto; }
.gi .title-main { margin: 26px 0 16px; font-family: var(--display); font-size: clamp(25px, 3vw, 35px); font-weight: 600; line-height: 1.35; }
.gi .title-red { font-family: var(--display); font-size: clamp(21px, 2.4vw, 29px); font-weight: 600; line-height: 1.4; color: #a3121a; }
.gi .desc-bold, .gi .desc-heavy-bold { font-size: 17px; font-weight: 600; line-height: 1.9; }
.gi .desc-normal, .gi .desc-heavy { margin-top: 14px; font-size: 16px; line-height: 1.9; color: var(--ink-2); }
.gi .desc-light { margin-top: 14px; font-size: 15.5px; line-height: 1.9; color: #7a6d62; }
.gi .mookhon-bg-image, .gi .gallery-bottom-visual { margin: 40px auto; }
.gi .mookhon-bg-image img, .gi .gallery-bottom-visual img { width: 100%; border-radius: 4px; }
.gi .mookhon-gallery { max-width: 1000px; margin: 40px auto; }
.gi .main-display img { width: 100%; aspect-ratio: 1120 / 642; object-fit: cover; border-radius: 4px; }
.gi .thumbnail-wrapper { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.gi .thumb { overflow: hidden; border-radius: 4px; border: 2px solid transparent; opacity: .55; cursor: pointer; transition: opacity .2s, border-color .2s; }
.gi .thumb:hover { opacity: .85; }
.gi .thumb.active { opacity: 1; border-color: #a3121a; }
.gi .thumb img { display: block; width: 100%; }
/* ระบบเด่น: การ์ดภาพจากเกม (img/shots — ภาพทางการจาก mookhon.co.kr) ลิงก์ไปคู่มือของแต่ละระบบ */
.gi .gi-feat-wrap { max-width: 1000px; margin: 56px auto 8px; }
.gi .gi-feat__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 24px; text-align: left; }
.gi .gi-feat { display: flex; flex-direction: column; overflow: hidden; border-radius: 4px; color: inherit; text-decoration: none; background: #fffaf3; border: 1px solid var(--paper-line); transition: transform .2s, border-color .2s, box-shadow .2s; }
.gi .gi-feat:hover, .gi .gi-feat:focus-visible { transform: translateY(-3px); border-color: rgba(163, 18, 26, .45); box-shadow: 0 16px 30px -18px rgba(40, 20, 10, .5); }
.gi .gi-feat img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #1a1714; }
.gi .gi-feat__body { display: grid; gap: 4px; padding: 12px 14px 14px; }
.gi .gi-feat__body b { font-family: var(--display); font-size: 16.5px; font-weight: 600; line-height: 1.4; color: #2a1d14; }
.gi .gi-feat__body small { font-size: 13.5px; line-height: 1.65; color: #7a6d62; }
.nextbox { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-top: 30px; padding: 26px 28px; border-radius: var(--r-lg); background: var(--grad-ember); border: 1px solid rgba(202, 161, 101, .35); }
.nextbox h2 { font-family: var(--display); font-size: 23px; font-weight: 600; color: #fff; }
.nextbox p { font-size: 15px; color: rgba(243, 238, 232, .75); }

/* ดาวน์โหลด */
.launch { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 18px; }
.launch__main { position: relative; overflow: hidden; isolation: isolate; padding: clamp(24px, 4vw, 44px); border-radius: var(--r-lg); color: var(--text); background: var(--grad-ember); border: 1px solid rgba(202, 161, 101, .38); box-shadow: var(--shadow); }
.launch__main::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(80% 80% at 100% 0%, rgba(238, 140, 58, .3), rgba(238, 140, 58, 0) 70%); }
.launch__main .play__mark { font-size: 220px; bottom: -50px; }
.launch__title { margin: 8px 0 10px; font-family: var(--display); font-size: clamp(30px, 3.4vw, 44px); font-weight: 600; line-height: 1.15; color: #fff; }
.launch__text { max-width: 46ch; margin-bottom: 24px; color: rgba(243, 238, 232, .78); }
.launch__file { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-family: var(--mono); font-size: 13px; color: rgba(243, 238, 232, .6); }
.launch__side { display: grid; gap: 18px; }
.codebox { display: flex; align-items: stretch; gap: 8px; margin-top: 12px; padding: 6px; border-radius: var(--r); background: var(--bg-2); border: 1px dashed var(--gold-line); }
.codebox code { flex: 1; min-width: 0; padding: 8px 12px; font-family: var(--mono); font-size: 20px; letter-spacing: .12em; color: var(--gold-2); }
.tile p.tile-text { font-size: 14.5px; color: var(--muted); }
.quickspec { display: grid; gap: 8px; margin-top: 12px; list-style: none; }
.quickspec li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 8px; font-size: 14px; background: var(--surface-2); }
.quickspec span { color: var(--muted); }
.quickspec b { font-weight: 600; color: var(--gold-2); text-align: right; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 18px; list-style: none; counter-reset: s; }
.steps li { position: relative; padding: 20px 20px 20px 72px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.steps li::before { counter-increment: s; content: counter(s); position: absolute; left: 18px; top: 18px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; font-family: var(--display); font-size: 18px; font-weight: 600; color: #fff; background: var(--grad-red); }
.steps b { display: block; font-family: var(--display); font-size: 16.5px; font-weight: 500; color: var(--gold-2); }
.steps span { display: block; margin-top: 2px; font-size: 14px; color: var(--muted); }
.specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; list-style: none; }
.spec { padding: 18px 20px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.spec__name { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-family: var(--display); font-size: 17px; font-weight: 500; }
.spec__name .ico { color: var(--gold); }
.spec dl { display: grid; gap: 10px; margin: 0; }
.spec dt { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.spec dd { margin: 2px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--text); }
.spec dd.is-rec { color: var(--gold-2); }
.table-scroll { overflow-x: auto; border-radius: 6px; background: var(--paper); color: var(--ink); }
.table-scroll table { width: 100%; min-width: 620px; border-collapse: collapse; }
.table-scroll th, .table-scroll td { padding: 12px 16px; border-bottom: 1px solid var(--paper-line); text-align: left; vertical-align: top; }

/* ไกด์แนะนำผู้เล่น (guide-advisor.php): ตัวช่วยตาม Level → เส้นทาง → ตารางกิจกรรม → ระบบทั้งหมด → เลือกอาวุธ */
.chip { display: inline-flex; align-items: center; flex: none; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; color: var(--text-2); background: rgba(255, 255, 255, .06); border: 1px solid var(--line-2); }
.chip--gold { color: var(--gold-2); background: var(--gold-soft); border-color: var(--gold-line); }
.chip--red { color: #fff; background: var(--red-soft); border-color: rgba(234, 58, 67, .45); }
.helpbox--top { margin: 0 0 22px; }

.adv { display: grid; gap: 18px; }
.adv-form { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr) auto; align-items: end; gap: 18px 26px; padding: 22px 24px; border-radius: var(--r-lg); background: var(--grad-ember); border: 1px solid rgba(202, 161, 101, .35); box-shadow: var(--shadow); }
.adv-form__label { display: block; margin-bottom: 10px; padding: 0; font-family: var(--display); font-size: 15px; font-weight: 500; color: var(--gold-2); }
.adv-form__w { min-width: 0; margin: 0; padding: 0; border: 0; }
.js .adv-form__go { display: none; }
.adv-lv { display: flex; height: 52px; overflow: hidden; border-radius: var(--r); background: rgba(0, 0, 0, .45); border: 1px solid var(--gold-line); transition: box-shadow .2s; }
.adv-lv:focus-within { box-shadow: 0 0 0 4px var(--gold-soft); }
.adv-lv__step { flex: none; width: 48px; border: 0; font-size: 22px; color: var(--gold-2); background: rgba(255, 255, 255, .04); transition: background-color .2s; }
.adv-lv__step:hover { background: rgba(202, 161, 101, .16); }
.adv-lv__input { flex: 1; min-width: 0; border: 0; outline: 0; text-align: center; font-family: var(--display); font-size: 26px; font-weight: 600; color: #fff; background: transparent; -moz-appearance: textfield; appearance: textfield; }
.adv-lv__input::-webkit-outer-spin-button, .adv-lv__input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.adv-range { width: 100%; margin: 12px 0 0; accent-color: var(--red-3); }
.adv-weps, .adv-q__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.adv-wep { position: relative; }
.adv-wep input { position: absolute; opacity: 0; pointer-events: none; }
.adv-wep > span { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 6px 14px; border-radius: 8px; font-size: 14.5px; font-weight: 600; line-height: 1.4; color: var(--text-2); background: rgba(0, 0, 0, .35); border: 1px solid var(--line-2); cursor: pointer; transition: color .2s, background-color .2s, border-color .2s; }
.adv-wep .han { font-size: 17px; color: var(--gold); }
.adv-wep:hover > span { color: var(--text); border-color: var(--gold-line); }
.adv-wep input:checked + span { color: #fff; background: var(--grad-red); border-color: rgba(255, 140, 140, .35); }
.adv-wep input:checked + span .han { color: #ffe9c7; }
.adv-wep input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }

.adv-out { transition: opacity .2s; }
.adv-out.is-loading { opacity: .55; }
.adv-res { padding: 22px 24px 24px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.adv-res__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px 20px; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid rgba(202, 161, 101, .22); }
.adv-res__lv { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 10px; background: #0e0e0e; border: 1px solid var(--gold-line); }
.adv-res__lv small { font-family: var(--display); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; line-height: 1.2; color: var(--gold); }
.adv-res__lv b { font-family: var(--display); font-size: 34px; font-weight: 600; line-height: 1.1; color: #fff; }
.adv-res__stage { display: flex; flex-wrap: wrap; gap: 0 10px; font-size: 13.5px; font-weight: 600; color: var(--gold); }
.adv-res__stage span { font-family: var(--display); font-weight: 300; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.adv-res__title { margin: 2px 0 4px; font-family: var(--display); font-size: clamp(22px, 2.4vw, 28px); font-weight: 600; }
.adv-res__title small { margin-left: 10px; font-size: .6em; font-weight: 400; color: var(--gold-2); }
.adv-res__sum { font-size: 14.5px; color: var(--text-2); }
.adv-res__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.adv-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 16px 18px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line); }
.adv-card--todo { grid-column: span 2; }
.adv-card--wep { grid-column: 1 / -1; background: linear-gradient(135deg, rgba(200, 22, 31, .14), rgba(200, 22, 31, 0) 60%), var(--surface-2); border-color: rgba(202, 161, 101, .28); }
.adv-card--wep .adv-dl { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 8px 24px; }
.adv-card__title { display: flex; align-items: center; gap: 9px; font-family: var(--display); font-size: 16.5px; font-weight: 500; color: var(--gold-2); }
.adv-card__title .ico, .adv-card__title .han { font-size: 19px; color: var(--gold); }
.adv-card__empty { font-size: 14px; line-height: 1.7; color: var(--muted); }
.adv-card__note { margin-top: auto; font-size: 13px; line-height: 1.6; color: var(--dim); }
.adv-card__text { font-size: 14px; line-height: 1.7; color: var(--text-2); }
.adv-card .more { margin-top: auto; }
.adv-list { display: grid; list-style: none; }
.adv-list li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px dashed var(--line-2); }
.adv-list li:first-child { padding-top: 0; border-top: 0; }
.adv-list a { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.adv-list__name { font-weight: 600; line-height: 1.45; transition: color .2s; }
.adv-list a:hover .adv-list__name { color: var(--gold-2); }
.adv-list__meta { font-size: 13px; line-height: 1.55; color: var(--muted); }
.adv-check { display: grid; gap: 2px; list-style: none; counter-reset: c; }
.adv-check a { display: flex; gap: 10px; padding: 6px 0; font-size: 14.5px; line-height: 1.6; color: var(--text-2); transition: color .2s; }
.adv-check a::before { counter-increment: c; content: counter(c); display: grid; place-items: center; flex: none; width: 24px; height: 24px; margin-top: 1px; border-radius: 6px; font-family: var(--display); font-size: 13px; font-weight: 500; color: var(--gold-2); background: var(--gold-soft); }
.adv-check a:hover { color: var(--gold-2); }
.adv-tip { display: flex; gap: 10px; margin-top: 4px; padding: 10px 12px; border-radius: 8px; font-size: 13.5px; line-height: 1.65; color: var(--text-2); background: rgba(238, 140, 58, .08); border: 1px solid rgba(238, 140, 58, .25); }
.adv-tip b { flex: none; font-family: var(--display); font-weight: 600; color: var(--orange); }
.adv-unlock { display: grid; gap: 12px; list-style: none; }
.adv-unlock > li { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 12px; }
.adv-unlock__lv { display: flex; flex-direction: column; font-family: var(--display); font-size: 17px; font-weight: 600; line-height: 1.3; color: #fff; }
.adv-unlock__lv small { font-family: var(--font); font-size: 12px; font-weight: 500; color: var(--gold); }
.adv-unlock ul { display: grid; gap: 4px; list-style: none; }
.adv-unlock ul a { font-size: 14px; line-height: 1.6; color: var(--text-2); transition: color .2s; }
.adv-unlock ul a:hover { color: var(--gold-2); }
.adv-unlock--sm > li { grid-template-columns: 56px minmax(0, 1fr); }
.adv-unlock--sm .adv-unlock__lv { font-size: 15px; color: var(--gold-2); }
.adv-dl { display: grid; gap: 8px; margin: 0; }
.adv-dl dt { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.adv-dl dd { margin: 0; font-size: 14px; color: var(--text); }
.adv-dl b { color: var(--gold-2); }
.adv-rules { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; list-style: none; }
.adv-rule { display: flex; gap: 12px; height: 100%; padding: 14px 16px; border-radius: var(--r); font-size: 13.5px; line-height: 1.65; color: var(--text-2); background: var(--surface); border: 1px solid var(--line); transition: border-color .2s; }
.adv-rule:hover { border-color: var(--gold-line); }
.adv-rule b { display: block; font-family: var(--display); font-size: 15px; font-weight: 500; color: var(--gold-2); }
.adv-rule__icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 8px; color: #ffe9c7; background: linear-gradient(150deg, #cf2a31, #7f0b12); }
.adv-rule__icon .ico { font-size: 18px; }

.road { position: relative; display: grid; gap: 10px; list-style: none; }
.road::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; background: linear-gradient(180deg, var(--gold-3), rgba(148, 112, 59, .1)); }
.road__item { position: relative; padding-left: 52px; }
.road__item::before { content: ""; position: absolute; left: 14px; top: 23px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 2px solid var(--gold-3); }
.road__item.is-current::before { background: var(--red); border-color: var(--gold-2); box-shadow: 0 0 0 5px var(--red-soft); }
.road__stage { border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); transition: border-color .25s; }
.road__stage[open], .road__item.is-current .road__stage { border-color: var(--gold-line); }
.road__sum { display: grid; grid-template-columns: 104px minmax(0, 220px) minmax(0, 1fr) auto 22px; align-items: center; gap: 6px 16px; padding: 14px 18px; cursor: pointer; list-style: none; }
.road__sum::-webkit-details-marker { display: none; }
.road__range { font-family: var(--display); font-size: 16px; font-weight: 600; color: var(--gold-2); white-space: nowrap; }
.road__name b { display: block; font-family: var(--display); font-size: 18px; font-weight: 500; line-height: 1.35; }
.road__name small { font-family: var(--display); font-size: 12.5px; font-weight: 300; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.road__desc { font-size: 14px; line-height: 1.6; color: var(--text-2); }
.road__here { display: none; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 26px; white-space: nowrap; color: #fff; background: var(--grad-red); }
.road__item.is-current .road__here { display: inline-block; }
.road__chev { font-size: 20px; color: var(--muted); transition: transform .25s; }
.road__stage[open] .road__chev { color: var(--gold); transform: rotate(180deg); }
.road__body { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 18px 26px; padding: 4px 18px 18px; }
.road__h { margin: 14px 0 6px; font-family: var(--display); font-size: 14.5px; font-weight: 500; color: var(--gold); }
.road__col > .road__h:first-child { margin-top: 0; }
.adv-mini { display: grid; list-style: none; }
.adv-mini li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: 14px; border-top: 1px dashed var(--line-2); }
.adv-mini li:first-child { border-top: 0; }
.adv-mini a { color: var(--text-2); transition: color .2s; }
.adv-mini a:hover { color: var(--gold-2); }
.adv-mini span { flex: none; font-size: 12.5px; text-align: right; color: var(--muted); }

.adv-sched { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; list-style: none; }
.adv-slot { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 18px 20px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); transition: border-color .2s; }
.adv-slot:hover { border-color: var(--gold-line); }
.adv-slot__when { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-size: 14.5px; font-weight: 500; color: var(--gold); }
.adv-slot__name { font-family: var(--display); font-size: 19px; font-weight: 500; }
.adv-slot__desc { font-size: 14px; line-height: 1.7; color: var(--text-2); }
.adv-slot__dur { margin-top: auto; font-size: 12.5px; color: var(--muted); }

.adv-sys__count { margin: -8px 0 20px; }
.adv-sysgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 12px; list-style: none; }
.adv-sysgrid > li { display: flex; }
.adv-sys { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); transition: border-color .2s; }
.adv-sys:hover { border-color: var(--gold-line); }
.adv-sys__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.adv-sys__name { font-family: var(--display); font-size: 16.5px; font-weight: 500; color: var(--gold-2); }
.adv-sys__desc { font-size: 14px; line-height: 1.65; color: var(--text-2); }
.adv-sys__aka { margin-top: auto; padding-top: 4px; font-size: 12.5px; line-height: 1.6; color: var(--dim); }

.adv-quiz { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px; margin-bottom: 18px; }
.adv-quiz__qs { display: grid; gap: 14px; }
.adv-q { min-width: 0; margin: 0; padding: 16px 18px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.adv-q__title { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 0; font-family: var(--display); font-size: 17px; font-weight: 500; }
.adv-q__title span { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 6px; font-size: 14px; color: #fff; background: var(--grad-red); }
.adv-quiz__out { display: flex; flex-direction: column; justify-content: center; padding: 24px; border-radius: var(--r-lg); background: var(--grad-ember); border: 1px solid rgba(202, 161, 101, .35); }
.adv-quiz__wait { display: flex; align-items: center; justify-content: center; gap: 10px; text-align: center; color: rgba(243, 238, 232, .7); }
.adv-quiz__wait .ico { font-size: 22px; color: var(--gold); }
.adv-pick__label { font-family: var(--display); font-size: 13.5px; letter-spacing: .06em; color: var(--gold); }
.adv-pick__name { display: flex; align-items: baseline; gap: 12px; margin: 4px 0 10px; font-family: var(--display); font-size: clamp(30px, 3.4vw, 42px); font-weight: 600; color: #fff; }
.adv-pick__name .han { font-size: .9em; color: var(--gold-2); }
.adv-pick__ability, .adv-pick__text { font-size: 14.5px; color: rgba(243, 238, 232, .85); }
.adv-pick__ability b { color: var(--gold-2); }
.adv-pick__text { margin-top: 8px; }
.adv-pick__alt { margin-top: 8px; font-size: 13.5px; color: rgba(243, 238, 232, .6); }
.adv-pick__go { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.adv-wtable td small { color: #7a6d62; }
.adv-wtable th a { font-weight: 600; color: #a3121a; }
.adv-diff { letter-spacing: .12em; white-space: nowrap; color: #a3121a; }
.adv-note { display: flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 13px; color: var(--muted); }

/* ---------- แอนิเมชันตอนเลื่อนถึง ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
}
/* ปิดการเคลื่อนไหวทั้งหมด (ใช้ none ไม่ใช่ระยะเวลาสั้นมาก ๆ เพราะ transition ของ visibility จะทำให้ focus() ในเมนูพลาด) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .embers { display: none; }
}

/* ==========================================================================
   หลายภาษา (TH / EN / CN) — ปุ่มเปลี่ยนภาษา, แถบแนะนำภาษา (แทนหน้าต่างเลือกภาษาเต็มจอเดิม), ฟอนต์ภาษาจีน
   ========================================================================== */
html[lang="zh-Hant"] {
  --font: "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", "IBM Plex Sans Thai", sans-serif;
  --display: "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", "Kanit", sans-serif;
}
/* อังกฤษ/จีน: ตัดบรรทัดตามคำ (overflow-wrap: anywhere ของ .prose ทำให้คอลัมน์ตารางแคบจนคำอังกฤษขาดกลางคำ) */
.lang-en .prose, .lang-cn .prose { overflow-wrap: break-word; }
/* ภาษาอังกฤษ: ป้ายอังกฤษตัวเล็กซ้ำกับหัวข้อ → ซ่อน */
.lang-en .hnav__en, .lang-en .ph__en, .lang-en .mgroup h3 small { display: none; }
.lang-en .hnav__link { gap: 0; }

/* ปุ่มเปลี่ยนภาษาบนแถบเมนู (ใช้โครง .acct เดียวกับปุ่มบัญชี) */
.acct--lang { padding-right: 0; }
.acct--lang .acct__btn { display: inline-flex; gap: 6px; width: auto; padding: 0 12px 0 10px; border-radius: 2px; font-family: var(--display); font-size: 13px; font-weight: 500; letter-spacing: .06em; }
.acct--lang .acct__btn .ico { font-size: 17px; }
.acct--lang .drop { width: 190px; }
.acct--lang .drop a { justify-content: space-between; }
.acct--lang .drop a small { font-size: 11px; letter-spacing: .12em; color: var(--muted); }
.acct--lang .drop a.is-on { color: var(--gold-2); background: rgba(198, 168, 108, .08); }

/* แผงเมนูมือถือ: แถบเลือกภาษา */
.msheet__lang { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 12px 16px 0; }
.msheet__lang a { display: grid; place-items: center; height: 40px; border-radius: 2px; font-family: var(--display); font-size: 15px; color: var(--text-2); background: rgba(255, 255, 255, .03); border: 1px solid var(--line-2); }
.msheet__lang a.is-on { color: var(--gold-ink); background: var(--grad-gold); border-color: transparent; }

/* แถบแนะนำภาษา (ผู้ที่ยังไม่เคยเลือกภาษา + เบราว์เซอร์ไม่ใช่ภาษาไทย) — js/app.js สร้างจาก <template id="lsuggest-tpl"> ของ inc/layout.php
   ลอยมุมล่างซ้าย ไม่บังหน้า/ไม่ล็อกการเลื่อน · เว้นขวา 80px ให้ปุ่มกลับขึ้นด้านบน · z-index อยู่เหนือ .to-top (55) ใต้ .msheet (90) และ .toasts (400) */
.lsuggest { position: fixed; left: 12px; right: 80px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 80; max-width: 520px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: 6px;
  background: #171715; border: 1px solid var(--gold-line); box-shadow: 0 20px 40px -20px #000; animation: lsuggest-in .45s var(--ease) both; }
.lsuggest__go { min-width: 0; line-height: 1.45; color: var(--gold-2); font-weight: 500; }
.lsuggest__go:hover { text-decoration: underline; text-underline-offset: 3px; }
.lsuggest__go[lang="zh-Hant"] { font-family: "Noto Sans TC", "Microsoft JhengHei", var(--display); }
.lsuggest__x { flex: none; padding: 6px 10px; border-radius: 4px; font-size: 14px; line-height: 1.3; color: var(--text-2); background: rgba(255, 255, 255, .04); border: 1px solid var(--line-2); cursor: pointer; transition: color .2s, border-color .2s; }
.lsuggest__x:hover { color: var(--gold-2); border-color: var(--gold-line); }
@keyframes lsuggest-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
/* ขณะแถบแสดง (js/app.js ใส่ html.has-lsuggest + --lsuggest-h): ยืดแถวล่างสุดของ footer (ทั้งแบบเต็มและ --slim) เท่าความสูงแถบ + ระยะลอย 12px
   → เลื่อนถึงท้ายหน้าแล้วแถบวางบนพื้นที่ว่างสีเดียวกับ footer ไม่ทับลิงก์/ช่องกรอก · ปิดแถบ = คลาสหาย ระยะกลับเหมือนเดิม */
@media screen { html.has-lsuggest .foot__base-in { padding-bottom: calc(var(--lsuggest-h, 56px) + 30px + env(safe-area-inset-bottom, 0px)); } }
@media print { .lsuggest { display: none; } }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1280px) {
  .ncards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip { grid-auto-columns: calc((100% - 2 * 16px) / 3); }
}
/* ท้ายเว็บ: เว้นที่ให้ปุ่มกลับขึ้นด้านบน (ลอยมุมขวาล่าง) */
@media (max-width: 1420px) {
  .foot__base-in { padding-right: 60px; }
}
/* ท้ายเว็บจอกลาง: แบรนด์เป็นแถวบน แผนผังเว็บ 6 คอลัมน์เต็มความกว้าง */
@media (max-width: 1300px) {
  .foot__main { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .foot__brand { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px 36px; padding-bottom: 36px; border-bottom: 1px solid rgba(198, 168, 108, .12); }
  .foot__desc { max-width: 560px; margin: 0; }
}
/* แถบเมนูเริ่มแคบ: ลดระยะหัวข้อเมนู + ปุ่มดาวน์โหลดเหลือบรรทัดเดียว */
@media (max-width: 1240px) {
  .hnav__link { padding: 0 11px; }
  .hnav__th { font-size: 15.5px; }
  .hd__dl small { display: none; }
}
@media (max-width: 1100px) {
  .feat { grid-column: span 12; grid-row: auto; min-height: 420px; }
  .play, .notice { grid-column: span 6; }
  .gtiles, .skills, .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plist { grid-template-columns: minmax(0, 1fr); }
  .launch { grid-template-columns: minmax(0, 1fr); }
  .adv-form { grid-template-columns: minmax(0, 1fr); }
  .adv-res__grid, .adv-rules, .adv-sched { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .road__sum { grid-template-columns: 96px minmax(0, 1fr) auto 22px; }
  .road__desc { grid-column: 2 / 4; grid-row: 2; }
  .road__body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .road__col--goals { grid-column: 1 / -1; }
  .adv-quiz { grid-template-columns: minmax(0, 1fr); }
  .gi .gi-feat__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* จอเล็ก (<1000px): เมนูหลักย่อเป็นปุ่ม "เมนู" สี่เหลี่ยมแดงชิดขวาของแถบ เปิดแล้วเป็นแผงเลื่อนลงเต็มความกว้าง */
@media (max-width: 999px) {
  :root { --hd-h: 60px; }
  .hnav, .acct { display: none; }
  .hd__actions { margin-left: auto; }
  .hd__menu { display: flex; }
}
@media (max-width: 1023px) {
  .foot__brand { grid-template-columns: auto minmax(0, 1fr); }
  .foot__actions { grid-column: 1 / -1; }
  .foot__map { grid-template-columns: repeat(3, minmax(0, 1fr)); justify-content: stretch; }
  .cd { grid-template-columns: minmax(0, 1fr); }
  .cd__stage { height: clamp(380px, 70vw, 520px); }
  .vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .hd__dl { justify-content: center; width: var(--hd-h); padding: 0; }
  .hd__dl span { display: none; }
  .toc ol, .related ol { grid-template-columns: minmax(0, 1fr); }
  .hero__art, .embers { height: 520px; }
  .play, .notice { grid-column: span 12; }
  .feat { min-height: 0; }
  .feat__stage { flex: none; aspect-ratio: 1104 / 1424; max-height: 74svh; min-height: 0; }
  .feat__slide img { object-position: 50% 0; }
  .feat__bar { flex-wrap: wrap; }
  .feat__text { flex: 1 0 100%; }
  .feat__ctrl { width: 100%; justify-content: space-between; }
  .ncards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .ncards::-webkit-scrollbar { display: none; }
  .ncards > li { flex: 0 0 82%; scroll-snap-align: center; }
  /* อาวุธ: เรียงแนวตั้ง แตะเพื่อขยาย */
  .blades, .blades--tall { flex-direction: column; height: auto; }
  .blade { flex: none; height: 84px; transition: height .5s var(--ease), border-color .3s; }
  .blade.is-active { height: 400px; }
  .blade__han { top: 50%; left: 22px; font-size: 32px; transform: translateY(-50%); }
  .blade__label { left: 76px; bottom: auto; top: 50%; writing-mode: horizontal-tb; transform: translateY(-50%); }
  .blade--wide .blade__label { left: 110px; }
  .blade__art { top: -10px; right: 0; bottom: auto; left: auto; height: 260%; transform: none; }
  .blade.is-active .blade__art { top: auto; right: auto; bottom: 0; left: 50%; height: 90%; transform: translateX(-50%); }
  .blade.is-active .blade__han { top: 18px; left: 22px; font-size: 44px; transform: none; }
  .blade__body { padding: 20px 22px; }
  .blade__name { font-size: 27px; }
  .gtiles, .skills, .specs, .steps { grid-template-columns: minmax(0, 1fr); }
  .strip { grid-auto-columns: 78%; }
  .strip-nav { display: none; }
  .vgrid { grid-template-columns: minmax(0, 1fr); }
  .ph__han { top: calc(var(--top) - 12px); font-size: 130px; }
  .ph__bar { align-items: stretch; flex-direction: column; }
  /* แท็บหมวดทุกแถวเป็นบรรทัดเดียวเลื่อนแนวนอนได้ (js เลื่อนแท็บที่เลือกมาไว้กลางแถว) */
  .pills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .pills::-webkit-scrollbar { display: none; }
  .faqbar, .cd__switch { margin-right: calc(-1 * var(--gutter)); }
  .search__input { width: auto; }
  .pcard { grid-template-columns: 54px minmax(0, 1fr); gap: 12px; padding: 14px; }
  .pcard__date { width: 54px; height: 54px; }
  .pcard__date b { font-size: 21px; }
  .pcard__go { display: none; }
  .post { grid-template-columns: 38px minmax(0, 1fr); padding: 14px; }
  .post .ava { width: 38px; height: 38px; font-size: 14px; }
  .post .bubble { grid-column: 2; justify-self: start; }
  .ahead__row { flex-direction: column; }
  .pn { grid-template-columns: minmax(0, 1fr); }
  .pn__item--next { align-items: flex-start; text-align: left; }
  .qa__sum { grid-template-columns: 32px minmax(0, 1fr) 22px; grid-template-areas: "q cat chev" "q text chev"; padding: 14px; }
  .qa__q { width: 32px; height: 32px; }
  .qa__cat { justify-self: start; }
  .qa__body { margin: 0 12px 12px; padding: 16px; }
  .foot__main { padding-block: 44px 36px; }
  .foot__brand { grid-template-columns: minmax(0, 1fr); }
  .foot__map { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .foot__col a { white-space: normal; }
  .foot__base-in { flex-direction: column; align-items: flex-start; padding-right: 0; }
  .foot__han { font-size: 170px; }
  .msheet__actions .btn { font-size: 14px; }
  /* ไกด์แนะนำผู้เล่น */
  .adv-form, .adv-res { padding: 18px 16px; }
  .adv-res__grid, .adv-rules, .adv-sched, .road__body { grid-template-columns: minmax(0, 1fr); }
  .adv-card--todo { grid-column: auto; }
  .adv-card--wep .adv-dl { grid-template-columns: minmax(0, 1fr); }
  .adv-res__head { grid-template-columns: auto minmax(0, 1fr); }
  .adv-res__head .more { grid-column: 1 / -1; }
  .adv-res__lv { width: 68px; height: 68px; }
  .adv-res__lv b { font-size: 28px; }
  .road::before { left: 11px; }
  .road__item { padding-left: 34px; }
  .road__item::before { left: 4px; }
  .road__sum { grid-template-columns: minmax(0, 1fr) auto 22px; padding: 14px; }
  .road__range { grid-column: 1; grid-row: 1; }
  .road__here { grid-column: 2; grid-row: 1; }
  .road__chev { grid-column: 3; grid-row: 1; }
  .road__name, .road__desc { grid-column: 1 / -1; grid-row: auto; }
  .road__body { padding: 0 14px 14px; }
  .adv-quiz__out { padding: 20px 16px; }
}
@media (max-width: 420px) {
  .msheet__grid { grid-template-columns: minmax(0, 1fr); }
  .gi .gi-feat__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- หน้าเข้าสู่ระบบ (member/login.php — ใช้โครงเว็บหลัก): การ์ด "ประตูยุทธภพ" ภาพนักรบซ้าย ฟอร์มขวา บนพื้นภาพเดียวกันแบบเบลอ ---------- */
.login { position: relative; isolation: isolate; flex: 1; display: flex; align-items: center; padding-block: clamp(40px, 7vh, 96px); overflow: hidden; }
.login__bg { position: absolute; inset: -40px; z-index: -3; }
.login__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .32; filter: blur(22px) saturate(.9); }
.login::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(760px 480px at 50% 45%, rgba(142, 27, 43, .26), rgba(142, 27, 43, 0) 70%),
    linear-gradient(180deg, rgba(17, 17, 16, .55), rgba(17, 17, 16, .2) 40%, var(--bg));
}
.login .wrap { width: min(100% - 2 * var(--gutter), 1060px); }

.gate {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); min-height: 600px;
  border: 1px solid var(--gold-line); border-radius: var(--r-lg); background: var(--surface);
  box-shadow: 0 40px 80px -40px #000, 0 0 0 6px rgba(0, 0, 0, .25);
}
/* มุมกรอบทอง */
.gate::before, .gate::after { content: ""; position: absolute; z-index: 3; width: 26px; height: 26px; pointer-events: none; border-color: var(--gold); border-style: solid; }
.gate::before { top: -7px; left: -7px; border-width: 2px 0 0 2px; }
.gate::after { right: -7px; bottom: -7px; border-width: 0 2px 2px 0; }

.gate__art { position: relative; isolation: isolate; display: flex; align-items: flex-end; overflow: hidden; border-radius: var(--r-lg) 0 0 var(--r-lg); background: #0c0d0c; }
.gate__art > img, .gate__art > picture > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
.gate__art::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgba(10, 10, 9, .96) 8%, rgba(10, 10, 9, .55) 42%, rgba(10, 10, 9, 0) 70%), linear-gradient(90deg, rgba(10, 10, 9, 0) 70%, rgba(25, 25, 24, .9));
}
.gate__han { position: absolute; top: 18px; right: 22px; z-index: -1; font-size: 150px; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(236, 208, 160, .22); pointer-events: none; user-select: none; }
.gate__notice span, .gate__tips li { text-wrap: pretty; }
.gate__copy { padding: 34px 34px 36px; }
.gate__eyebrow { display: flex; align-items: center; gap: 12px; font-family: var(--display); font-size: 12px; letter-spacing: .3em; color: var(--gold); }
.gate__eyebrow span { width: 28px; height: 1px; background: var(--gold); }
.gate__lead { margin-top: 10px; font-family: var(--display); font-size: clamp(30px, 3.2vw, 40px); font-weight: 500; line-height: 1.2; color: #fff; }
.gate__lead span { display: block; font-size: .56em; font-weight: 400; color: var(--gold-2); }
.gate__tips { display: grid; gap: 10px; margin-top: 22px; list-style: none; }
.gate__tips li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.55; color: var(--text-2); }
.gate__tips .ico { margin-top: 3px; font-size: 16px; color: var(--gold); }

.gate__main { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 48px clamp(28px, 4vw, 56px); background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0) 40%), var(--surface); border-radius: 0 var(--r-lg) var(--r-lg) 0; }
.gate__en { font-family: var(--display); font-size: 12px; letter-spacing: .3em; color: var(--gold); }
.gate__title { margin-top: 6px; font-family: var(--display); font-size: 34px; font-weight: 500; color: #fff; }
.gate__desc { margin-top: 6px; font-size: 14.5px; color: var(--muted); }
.gate__notice {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 20px; padding: 12px 14px; border-radius: var(--r);
  font-size: 14px; line-height: 1.6; color: #f3d0d0; background: rgba(142, 27, 43, .22); border: 1px solid rgba(216, 117, 121, .38);
}
.gate__notice .ico { margin-top: 3px; font-size: 17px; color: var(--red-3); }
.gate__notice b { display: block; font-weight: 600; color: #fff; }

.gate__form { display: grid; gap: 18px; margin-top: 26px; }
.fld__label { display: block; margin-bottom: 8px; font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.fld__box {
  display: flex; align-items: center; gap: 12px; height: 54px; padding: 0 6px 0 16px; border-radius: var(--r);
  background: rgba(0, 0, 0, .38); border: 1px solid var(--line-2); transition: border-color .2s, box-shadow .2s;
}
.fld__box > .ico { font-size: 19px; color: var(--gold-3); transition: color .2s; }
.fld__box:focus-within { border-color: var(--gold-line); box-shadow: 0 0 0 4px var(--gold-soft); }
.fld__box:focus-within > .ico { color: var(--gold); }
.fld__box input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; font-size: 16px; color: var(--text); background: transparent; }
.fld__box input::placeholder { color: var(--dim); }
.fld__box input:-webkit-autofill { -webkit-text-fill-color: var(--text); caret-color: var(--text); box-shadow: 0 0 0 60px #121211 inset; transition: background-color 9999s; }
.fld__box input::-ms-reveal { display: none; }
.fld__eye { display: grid; place-items: center; flex: none; width: 42px; height: 42px; padding: 0; border: 0; border-radius: var(--r-sm); font-size: 19px; color: var(--muted); background: none; transition: color .2s, background-color .2s; }
.fld__eye:hover { color: var(--gold-2); background: var(--gold-soft); }
.fld__eye .fld__hide, .fld__eye[aria-pressed="true"] .fld__show { display: none; }
.fld__eye[aria-pressed="true"] .fld__hide { display: block; }
.fld__caps { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; color: var(--orange); }

.gate__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: -4px; }
.check { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-2); cursor: pointer; user-select: none; }
.check input { position: absolute; opacity: 0; pointer-events: none; }
.check__box { position: relative; width: 18px; height: 18px; flex: none; border-radius: var(--r-sm); border: 1px solid rgba(198, 168, 108, .45); background: rgba(0, 0, 0, .35); transition: background-color .2s, border-color .2s; }
.check__box::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid var(--gold-ink); border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: 0; }
.check input:checked + .check__box { background: var(--grad-gold); border-color: var(--gold); }
.check input:checked + .check__box::after { opacity: 1; }
.check input:focus-visible + .check__box { outline: 2px solid var(--gold); outline-offset: 2px; }
.gate__submit { margin-top: 4px; }

/* แคปช่า: [ภาพรหัส][ปุ่มเปลี่ยนภาพ][ช่องกรอก] */
.cap { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 8px; }
.cap__img { display: block; width: 190px; height: 60px; border-radius: var(--r); border: 1px solid var(--gold-line); background: #141312; user-select: none; -webkit-user-drag: none; }
.cap__new { display: grid; place-items: center; width: 40px; height: 60px; padding: 0; border-radius: var(--r); font-size: 18px; color: var(--gold); background: rgba(0, 0, 0, .38); border: 1px solid var(--line-2); transition: color .2s, border-color .2s, background-color .2s; }
.cap__box { height: 60px; }
.cap__new:hover { color: var(--gold-2); border-color: var(--gold-line); background: var(--gold-soft); }
.cap__new.is-spin .ico { animation: cap-spin .5s var(--ease); }
@keyframes cap-spin { to { transform: rotate(360deg); } }
.cap__box input { text-transform: uppercase; letter-spacing: .18em; }
.cap__box input::placeholder { text-transform: none; letter-spacing: 0; }

/* เข้าสู่ระบบแล้ว */
.gate__done { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding: 16px 18px; border-radius: var(--r); background: var(--gold-soft); border: 1px solid var(--gold-line); }
.gate__done-ico { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; font-size: 21px; color: var(--gold-ink); background: var(--grad-gold); }
.gate__done p { font-size: 14.5px; color: var(--text-2); }
.gate__done b { display: block; margin-top: 2px; font-family: var(--display); font-size: 20px; font-weight: 500; color: #fff; word-break: break-all; }
.gate__done-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.gate__done-actions .btn { flex: 1 1 180px; }
.gate__notice--ok { color: #d6efe2; background: rgba(134, 194, 162, .12); border-color: rgba(134, 194, 162, .35); }
.gate__notice--ok .ico { color: #86c2a2; }

/* เมนูบัญชีตอนล็อกอินแล้ว */
.acct.is-in .acct__btn { color: var(--gold-ink); background: var(--grad-gold); border-color: transparent; }
.acct__me { padding: 6px 14px 10px; margin: 0 8px 6px; border-bottom: 1px solid var(--line-2); font-size: 12px; line-height: 1.4; color: var(--muted); }
.acct__me b { display: block; margin-top: 2px; font-family: var(--display); font-size: 15.5px; font-weight: 500; color: var(--gold-2); word-break: break-all; }
.msheet__me { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-2); }
.msheet__me .ico { color: var(--gold); }
.msheet__me b { color: var(--gold-2); word-break: break-all; }
@media (max-width: 899px) {
  .gate { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .gate__art { min-height: 220px; border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .gate__art::after { background: linear-gradient(0deg, rgba(10, 10, 9, .95) 5%, rgba(10, 10, 9, .35) 55%, rgba(10, 10, 9, .1)); }
  .gate__han { font-size: 110px; top: 12px; right: 16px; }
  .gate__copy { padding: 24px 24px 22px; }
  .gate__tips { display: none; }
  .gate__main { padding: 32px 24px 30px; border-radius: 0 0 var(--r-lg) var(--r-lg); }
}
@media (max-width: 520px) {
  .login { padding-block: 22px 32px; }
  .gate__art { min-height: 180px; }
  .gate__lead { font-size: 28px; }
  .gate__main { padding: 26px 18px 24px; }
  .gate__title { font-size: 28px; }
  .gate__row { flex-wrap: wrap; }
  .cap__box { grid-column: 1 / -1; }   /* ช่องกรอกลงบรรทัดใหม่ ภาพ + ปุ่มอยู่บรรทัดบนชิดซ้าย */
}

/* ---------- หน้าปิดปรับปรุงเต็มจอ (inc/maintenance.php — web_setting mtn_<หน้า> = 0) — ปิดทั้งหน้า ไม่มีแถบเมนู/ท้ายเว็บ ---------- */
.mtn-page { background: var(--bg); }
.mtn {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  min-height: 100vh; min-height: 100svh; padding: clamp(28px, 6vh, 64px) var(--gutter);
}
.mtn::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(820px 560px at 50% 46%, rgba(142, 27, 43, .36), rgba(142, 27, 43, 0) 70%),
    linear-gradient(180deg, #140908 0%, var(--bg) 65%);
}
.mtn::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--grain); opacity: .55; pointer-events: none; }
.mtn__han {
  position: absolute; z-index: -1; right: clamp(-80px, 1vw, 40px); bottom: -.18em; font-size: clamp(260px, 40vw, 560px); line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px rgba(236, 208, 160, .08); pointer-events: none; user-select: none;
}
.mtn__logo { width: clamp(150px, 15vw, 196px); height: auto; filter: drop-shadow(0 14px 30px rgba(0, 0, 0, .85)); }
.mtn__card {
  position: relative; display: grid; justify-items: center; gap: 14px; width: min(100%, 640px);
  padding: clamp(30px, 5vw, 48px) clamp(20px, 5vw, 56px); text-align: center;
  border: 1px solid var(--gold-line); border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, 0) 45%), rgba(20, 20, 20, .92);
  box-shadow: 0 40px 80px -40px #000, 0 0 0 6px rgba(0, 0, 0, .25);
}
.mtn__ico {
  display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  font-size: 28px; color: var(--gold-2); background: var(--grad-ember); box-shadow: inset 0 0 0 1px var(--gold-line), 0 12px 30px -12px rgba(200, 22, 31, .7);
}
.mtn__badge { display: inline-flex; align-items: center; height: 24px; padding: 0 11px; border-radius: 2px; font: 600 11px/1 var(--font); letter-spacing: .18em; color: #fff; background: var(--grad-red); }
.mtn__title { font-family: var(--display); font-size: clamp(24px, 3.4vw, 32px); font-weight: 500; line-height: 1.3; color: var(--gold-2); }
.mtn__text { max-width: 46ch; font-size: 15px; line-height: 1.8; color: var(--text-2); overflow-wrap: break-word; }
.mtn__until {
  display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: var(--r-sm); text-align: left;
  font-size: 13px; line-height: 1.4; color: var(--muted); background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px var(--gold-line);
}
.mtn__until .ico { flex: none; font-size: 22px; color: var(--gold); }
.mtn__until b { display: block; font-size: 15px; font-weight: 600; color: var(--gold-2); }
.mtn__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; }
.mtn__actions:empty { display: none; }
.mtn__lang { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; font-size: 13px; }
.mtn__lang > .ico { margin-right: 4px; font-size: 16px; color: var(--gold); }
.mtn__lang a { padding: 5px 13px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--text-2); transition: color .2s, border-color .2s; }
.mtn__lang a:hover { color: var(--text); border-color: var(--gold-line); }
.mtn__lang a.is-on { color: var(--gold-ink); background: var(--grad-gold); border-color: transparent; }
.mtn__copy { font-size: 12px; color: var(--dim); }
@media (max-width: 520px) {
  .mtn { gap: 18px; }
  .mtn__actions { display: grid; width: 100%; }
}
/* ---------- ช่องทางดาวน์โหลด (download.php — dbo.web_download: Google Drive / OneDrive / Dropbox) ---------- */
.dlm__label { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-family: var(--display); font-size: 13px; letter-spacing: .08em; color: var(--gold); }
.dlm__label .ico { font-size: 16px; }
.dlm { display: grid; gap: 10px; max-width: 480px; margin: 0; padding: 0; list-style: none; }
.dlm__btn {
  display: flex; align-items: center; gap: 14px; min-height: 66px; padding: 10px 12px 10px 10px; border-radius: 10px;
  color: var(--text); background: rgba(0, 0, 0, .38); border: 1px solid var(--gold-line);
  transition: border-color .2s, background .2s, transform .2s, box-shadow .2s;
}
a.dlm__btn:hover, a.dlm__btn:focus-visible { border-color: var(--gold); background: rgba(0, 0, 0, .55); transform: translateY(-1px); box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .9); }
.dlm__logo { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.dlm__logo svg { display: block; width: 28px; height: 28px; }
.dlm__logo .ico { font-size: 24px; color: var(--gold-ink); }
.dlm__txt { flex: 1; min-width: 0; display: grid; gap: 3px; }
.dlm__txt b { font-family: var(--display); font-size: 17px; font-weight: 500; line-height: 1.2; color: #fff; }
.dlm__txt small { overflow: hidden; font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; color: rgba(243, 238, 232, .62); }
.dlm__go { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 8px; font-size: 19px; color: var(--gold-ink); background: var(--grad-gold); }
.dlm__btn.is-soon { cursor: default; border-style: dashed; border-color: var(--line-2); }
.dlm__btn.is-soon .dlm__logo { filter: grayscale(1); opacity: .55; }
.dlm__btn.is-soon .dlm__txt b { color: var(--text-2); }
.dlm__btn.is-soon .dlm__go { color: var(--muted); background: var(--surface-3); }
.dlm__none { display: flex; align-items: center; gap: 10px; max-width: 480px; padding: 14px 16px; border-radius: 10px; font-size: 14px; color: var(--text-2); background: rgba(0, 0, 0, .35); border: 1px dashed var(--gold-line); }
.dlm__none .ico { flex: none; font-size: 20px; color: var(--gold); }