/* ============================================================================
Design tokens — ธีมมืด 3 แบบ ผู้ใช้สลับได้เอง
สลับด้วย ผ่านปุ่มบน header
ทุกสีอยู่ในบล็อกธีมทั้งหมด — ห้ามเขียนค่าสีลงในหน้า HTML ตรงๆ ไม่งั้นสลับธีมแล้วเพี้ยน
ค่าเริ่มต้นคือ "ไม้อบอุ่น" (มติผู้ใช้ 2026-07-29) · ธีมสว่างถูกเอาออกหมดแล้ว —
เดิมมีมินต์กับชมพู ทั้งคู่ถูกแทนที่ด้วยธีมมืด · ธีมมืดทุกตัวตรวจค่า contrast จริงแล้ว
ผ่านเกณฑ์ WCAG AA (>=4.5:1) ครบ 18 คู่สีต่อธีม ค่าต่ำสุด 6.06:1
⚠️ ธีมมืดต้องใช้สีเน้น "สว่าง" ตรงข้ามกับธีมสว่างที่ใช้สีเน้นเข้ม ไม่งั้นตัวอักษรจม
========================================================================== */
/* ── ธีม 1 · ไม้อบอุ่น (ค่าเริ่มต้น) — น้ำตาลถ่าน + เหลืองอำพัน ──────────
เข้ากับห้องไม้ยุค 90 ในภาพพื้นหลังหน้าแรก โทนอุ่น สบายตา */
:root,
html[data-theme="dark-wood"] {
--bg: #16110d;
--bg-alt: #1e1813;
--surface: #241d17;
--surface-2: #2b231b;
--border: #3f342a;
--border-soft: #2f271f;
--text: #f5ece1; /* 16.04:1 บนพื้นหน้า */
--text-2: #d6c5b2;
--muted: #b09880; /* 6.83:1 — ธีมมืดต้องสว่างกว่าที่คิด ไม่งั้นจม */
--accent: #fbbf24; /* 11.23:1 เหลืองอำพัน */
--accent-hot: #f59e0b;
--accent-soft: #3a2a0c;
--accent-2: #fb923c;
--grad: linear-gradient(135deg, #f59e0b, #fb923c);
--ok: #86efac; --ok-soft: #122c1c; --ok-line: #245537; --ok-ink: #bbf7d0;
--warn: #fcd34d; --warn-soft: #352508; --warn-line: #5f4514; --warn-ink: #fde68a;
--danger: #fca5a5; --danger-soft: #3b1616; --danger-line: #6d2626; --danger-ink: #fecaca;
--info: #7dd3fc; --info-soft: #10293a; --info-line: #1d5070; --info-ink: #bae6fd;
/* เงาแบบธีมสว่างจางจนหายบนพื้นมืด ต้องใช้เงาดำเข้มแทน */
--sh-1: 0 1px 2px rgba(0, 0, 0, .5), 0 3px 10px rgba(0, 0, 0, .45);
--sh-2: 0 2px 5px rgba(0, 0, 0, .55), 0 14px 32px rgba(0, 0, 0, .6);
}
/* ── ธีม 2 · มิดไนต์ — น้ำเงินเทา + เขียวมิ้นต์ ───────────────────────── */
html[data-theme="dark-mid"] {
--bg: #0e1620;
--bg-alt: #131f2b;
--surface: #172433;
--surface-2: #1c2c3d;
--border: #2c4056;
--border-soft: #1f2f42;
--text: #e8f0f9; /* 15.82:1 */
--text-2: #b9cadd;
--muted: #93a8c0;
--accent: #5eead4; /* 12.30:1 */
--accent-hot: #2dd4bf;
--accent-soft: #123b3a;
--accent-2: #a78bfa;
--grad: linear-gradient(135deg, #14b8a6, #7c3aed);
--ok: #4ade80; --ok-soft: #0f2e1d; --ok-line: #1d5738; --ok-ink: #bbf7d0;
--warn: #fbbf24; --warn-soft: #332309; --warn-line: #5c4114; --warn-ink: #fde68a;
--danger: #fb7185; --danger-soft: #3a1119; --danger-line: #6b1f2e; --danger-ink: #fecdd3;
--info: #38bdf8; --info-soft: #0c2b3e; --info-line: #17506e; --info-ink: #bae6fd;
--sh-1: 0 1px 2px rgba(0, 0, 0, .5), 0 3px 10px rgba(0, 0, 0, .45);
--sh-2: 0 2px 5px rgba(0, 0, 0, .55), 0 14px 32px rgba(0, 0, 0, .6);
}
/* ── ธีม 3 · นีออนอาร์เคด — ดำอมม่วง + ฟ้า/ชมพูนีออน ─────────────────
เข้ากับป้ายไฟนีออนในภาพพื้นหลังโดยตรง */
html[data-theme="dark-neon"] {
--bg: #0b0a12;
--bg-alt: #12111c;
--surface: #171526;
--surface-2: #1d1b30;
--border: #332f4d;
--border-soft: #252239;
--text: #eeeaff; /* 16.74:1 */
--text-2: #c2bbe0;
--muted: #9d95c0;
--accent: #22d3ee; /* 10.90:1 */
--accent-hot: #f472b6;
--accent-soft: #152f3d;
--accent-2: #f472b6;
--grad: linear-gradient(135deg, #f472b6, #22d3ee);
--ok: #4ade80; --ok-soft: #0f2b1e; --ok-line: #1e5539; --ok-ink: #bbf7d0;
--warn: #fcd34d; --warn-soft: #332508; --warn-line: #5c4413; --warn-ink: #fde68a;
--danger: #fb7185; --danger-soft: #3a1220; --danger-line: #6d2038; --danger-ink: #fecdd3;
--info: #38bdf8; --info-soft: #0d2739; --info-line: #194b68; --info-ink: #bae6fd;
--sh-1: 0 1px 2px rgba(0, 0, 0, .55), 0 3px 10px rgba(0, 0, 0, .5);
--sh-2: 0 2px 5px rgba(0, 0, 0, .6), 0 14px 32px rgba(0, 0, 0, .65);
}
/* ── โทเคนที่ไม่ขึ้นกับธีม ─────────────────────────────────────────── */
:root {
--r-sm: 10px;
--r: 16px;
--r-lg: 24px;
--r-pill: 999px;
--gap: 20px;
--pad: 24px;
--max: 1120px;
/* สีของ "แถบเครื่องมือ mockup" — ตั้งใจให้เป็นกลาง ไม่ใช่ส่วนของดีไซน์ */
--chrome: #1e2430;
--chrome-2: #2c3444;
--chrome-ink: #e8edf6;
--font: "IBM Plex Sans Thai", "Noto Sans Thai", "Leelawadee UI",
"Segoe UI", system-ui, -apple-system, sans-serif;
--mono: "JetBrains Mono", "Cascadia Mono", ui-monospace, "Consolas", monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: var(--font);
font-size: 16px;
line-height: 1.72;
-webkit-font-smoothing: antialiased;
}
/* ภาษาไทยไม่เว้นวรรคระหว่างคำ เบราว์เซอร์จึงตัดกลางคำได้ตามปกติ
แต่ค่าแฮชกับชื่อไฟล์ต้องไม่ถูกตัดมั่ว จึงคุมที่ .mono แยก */
p, li, td, dd { overflow-wrap: break-word; }
.mono { font-family: var(--mono); font-size: .88em; overflow-wrap: anywhere; }
code { font-family: var(--mono); font-size: .88em; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
outline: 3px solid var(--accent-2);
outline-offset: 2px;
border-radius: 6px;
}
h1, h2, h3, h4 { line-height: 1.34; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(30px, 5vw, 46px); font-weight: 800; }
h2 { font-size: clamp(23px, 3.2vw, 31px); font-weight: 750; }
h3 { font-size: 19px; font-weight: 700; }
h4 { font-size: 16px; font-weight: 700; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 860px; }
.center { text-align: center; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.tint { color: var(--accent); }
/* ---------- แถบเครื่องมือ mockup (ลบทั้งบล็อกตอนทำของจริง) --------------- */
.mockbar {
background: var(--chrome);
color: var(--chrome-ink);
font-size: 13px;
padding: 9px 20px;
}
.mockbar .in {
max-width: var(--max); margin: 0 auto;
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
justify-content: space-between;
}
.mockbar b { color: #ffd166; }
/* ---------- ปุ่มสลับธีม (ฟีเจอร์จริง อยู่บน header) ---------------------- */
.themebar {
display: flex; align-items: center; gap: 2px; flex: none;
padding: 3px; border-radius: var(--r-pill);
background: var(--bg-alt); border: 1px solid var(--border);
}
.themebar button {
font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 12px; border-radius: var(--r-pill);
background: transparent; color: var(--muted); border: 0;
white-space: nowrap;
}
.themebar button .sw {
width: 13px; height: 13px; border-radius: 50%; flex: none;
/* ⚠️ เดิมเป็น rgba(0,0,0,.12) ซึ่งมองไม่เห็นเลยบนพื้นมืด
ใช้สีตัวอักษรแบบจางแทน จึงเห็นขอบได้ทั้งธีมสว่างและธีมมืด */
border: 1px solid color-mix(in srgb, var(--text) 25%, transparent);
}
.themebar button:hover { color: var(--text); }
.themebar button[aria-pressed="true"] {
background: var(--surface); color: var(--text); box-shadow: var(--sh-1);
}
/* บนจอแคบเหลือแค่วงกลมสี ไม่งั้นเมนูล้น */
@media (max-width: 760px) {
.themebar button .lb { display: none; }
.themebar button { padding: 6px 9px; }
}
/* ---------- Header ------------------------------------------------------- */
.site-head {
position: sticky; top: 0; z-index: 50;
background: color-mix(in srgb, var(--bg) 88%, transparent);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border);
}
.site-head .row { display: flex; align-items: center; gap: 18px; height: 66px; }
.brand {
display: flex; align-items: center; gap: 9px;
font-weight: 800; font-size: 18px; color: var(--text); white-space: nowrap;
}
.brand:hover { text-decoration: none; }
.brand .mark {
width: 32px; height: 32px; display: grid; place-items: center;
border-radius: 9px; font-size: 17px; background: var(--grad); color: #fff;
}
/* โลโก้วาดด้วย CSS mask ไม่ใช่ ![]()
— เพราะ SVG ใน ![]()
ถูกตัดขาดจาก CSS ของหน้า
ทำให้ fill="currentColor" ในไฟล์โลโก้ใช้ไม่ได้ · mask ทำให้รูปทรงรับสีจาก color
ของกล่อง (ขาว) ได้จริง และยังเหลือไฟล์ต้นทางเพียงไฟล์เดียวคือ logo.svg */
.brand .mark::before {
content: ""; width: 19px; height: 19px; background: currentColor;
-webkit-mask: url("logo.svg") center / contain no-repeat;
mask: url("logo.svg") center / contain no-repeat;
}
.nav { display: flex; gap: 4px; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a {
padding: 8px 13px; border-radius: var(--r-pill);
color: var(--text-2); font-size: 15px; font-weight: 600; white-space: nowrap;
}
.nav a:hover { background: var(--bg-alt); text-decoration: none; color: var(--text); }
.nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
/* ---------- ปุ่ม -------------------------------------------------------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 12px 22px; border-radius: var(--r-pill);
border: 1px solid transparent;
font: inherit; font-weight: 700; font-size: 15px;
cursor: pointer; white-space: nowrap;
transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--grad); color: #fff; box-shadow: var(--sh-1); }
.btn-primary:hover { box-shadow: var(--sh-2); }
.btn-ghost { background: var(--surface); border-color: var(--border); color: var(--text); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-lg { padding: 15px 30px; font-size: 17px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.btn, .btn:hover { transition: none; transform: none; }
}
/* ---------- ป้าย -------------------------------------------------------- */
.pill {
display: inline-flex; align-items: center; gap: 6px;
padding: 3px 11px; border-radius: var(--r-pill);
font-size: 13px; font-weight: 700;
background: var(--bg-alt); color: var(--text-2);
}
.pill-ok { background: var(--ok-soft); color: var(--ok); }
.pill-warn { background: var(--warn-soft); color: var(--warn); }
.pill-danger { background: var(--danger-soft); color: var(--danger); }
.pill-info { background: var(--info-soft); color: var(--info); }
.pill-accent { background: var(--accent-soft); color: var(--accent); }
.pill-plat {
background: var(--surface); border: 1px solid var(--border);
color: var(--muted); font-weight: 600; letter-spacing: .02em;
}
/* ---------- ส่วนหน้า ---------------------------------------------------- */
section { padding: 62px 0; }
.sec-head { margin-bottom: 30px; }
.sec-kicker {
font-size: 13px; font-weight: 800; letter-spacing: .16em;
color: var(--accent); text-transform: uppercase; margin-bottom: 6px;
}
.band { background: var(--bg-alt); border-block: 1px solid var(--border-soft); }
/* ---------- Hero -------------------------------------------------------- */
/* ภาพพื้นหลังเป็นภาพประกอบที่มีรายละเอียดเยอะ ตัวหนังสือทับตรงๆ จะอ่านไม่ออก
จึงมี ::before เป็นฉากบังแบบไล่เฉด — ทึบตรงบนที่มีตัวหนังสือ แล้วจางลงด้านล่าง
ให้เห็นภาพ · ปรับความทึบได้ที่ตัวเลข 80%/55% ด้านล่าง
ใช้สีจากตัวแปรธีม ไม่ฝังค่าสี เพื่อให้ทำงานถูกทั้งธีมมินต์และชมพู
⚠️ ตำแหน่งของเนื้อหาผูกกับองค์ประกอบในภาพ (วัดจากไฟล์จริง):
ป้ายไฟนีออน y 3-32% · หน้าเด็กสองคน y 40-62% · ใต้ 65% เป็นพื้น/พรม
จึงดันคำอธิบายไปไว้ล่างสุดด้วย margin-top:auto ให้พ้นหน้าเด็ก — และบังเอิญ
เป็นโซนที่ฉากบังทึบที่สุด (ไล่ถึง 100%) ตัวหนังสือจึงอ่านง่ายที่สุดตรงนั้นพอดี
⚠️ ถ้าเปลี่ยนภาพพื้นหลัง ต้องวัดตำแหน่งใหม่แล้วปรับ min-height ตาม */
/* padding-top ผูกกับ min-height โดยตรง — คิดเป็น 30% ของความสูง hero
ป้ายไฟนีออนในภาพจบราว 32% แต่ผู้ใช้ขอให้ขยับขึ้น จึงยอมให้เหลื่อมขอบล่างของ
กรอบป้ายไฟเล็กน้อย (ตัวอักษรในป้ายจบก่อนหน้านั้นแล้ว จึงไม่ทับตัวหนังสือ)
⚠️ ภาพถูกวางแบบ cover และสูงพอเสมอ ทำให้ %ในภาพ = %ในกล่องพอดี 1:1
ถ้าแก้ min-height ต้องคำนวณ padding-top ใหม่ให้ได้สัดส่วน 30% เท่าเดิม */
.hero {
position: relative; display: grid; min-height: 460px;
padding: 138px 0 58px;
background: url("hero-bg.jpg") center / cover no-repeat;
}
.hero::before {
content: ""; position: absolute; inset: 0;
background: linear-gradient(
to bottom,
color-mix(in srgb, var(--bg) 80%, transparent) 0%,
color-mix(in srgb, var(--bg) 55%, transparent) 55%,
var(--bg) 100%);
}
.hero > * { position: relative; } /* ดันเนื้อหาขึ้นเหนือฉากบัง */
.hero > .wrap { display: flex; flex-direction: column; }
/* คำที่ต้องการเน้นในหัวข้อ — ใช้ --accent จึงเปลี่ยนสีตามธีมเองทุกแบบ
(ไม้=เหลืองอำพัน · มิดไนต์=เขียวมิ้นต์ · นีออน=ฟ้านีออน · มินต์=เขียวเข้ม)
ทุกค่าผ่าน contrast AA บนพื้นของธีมตัวเองแล้ว ตรวจไว้ตอนทำธีมมืด */
.hero h1 .hl { color: var(--accent); }
.hero .lead {
font-size: clamp(17px, 2.2vw, 20px); color: var(--text-2);
max-width: 60ch;
margin: auto auto 0; /* บน auto = ถูกดันลงล่างสุดของ hero */
}
@media (max-width: 640px) {
/* จอแคบภาพถูกครอบตัดด้านข้างมาก คนในภาพเลยใหญ่ขึ้น — ลดความสูงลงไม่ให้ hero ยาวเกิน
padding-top คิดสัดส่วนเดียวกับจอใหญ่: 30% ของ 380px = 114px */
.hero { min-height: 380px; padding: 114px 0 40px; }
}
.hero .cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero-note {
margin-top: 26px; display: inline-flex; align-items: center; gap: 8px;
padding: 8px 16px; border-radius: var(--r-pill);
background: var(--ok-soft); color: var(--ok);
font-size: 14px; font-weight: 600;
}
/* ---------- การ์ด ------------------------------------------------------- */
.grid { display: grid; gap: var(--gap); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
/* ⚠️ แยกคลาสจาก .grid-3 โดยตั้งใจ — .grid-3 ยังถูกใช้กับส่วน "แพตช์เสร็จใน 3 ขั้น"
ซึ่งมี 3 การ์ดพอดี ถ้าไปแก้ตัวนั้นให้เป็น 4 คอลัมน์จะเหลือช่องโหว่ 1 ช่อง
250px คำนวณจากพื้นที่จริง 1080px: 4*250 + 3*20(gap) = 1060 <= 1080 พอดี 4 ใบ */
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r);
padding: var(--pad);
box-shadow: var(--sh-1);
}
.card-flat { box-shadow: none; }
/* การ์ดแจ้งสถานะ — ใช้คลาส ห้ามใส่ค่าสีใน HTML */
.card-ok { background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok-ink); }
.card-warn { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn-ink); }
.card-danger { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger-ink); }
.card-ok h3, .card-warn h3, .card-danger h3 { color: inherit; }
.game-card { display: flex; flex-direction: column; gap: 12px; }
.game-card .top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.game-card h3 { margin: 0; }
.game-card .desc { color: var(--text-2); font-size: 15px; margin: 0; flex: 1; }
.game-card.soon { background: var(--surface-2); box-shadow: none; border-style: dashed; }
/* แถบความคืบหน้า */
.prog { display: flex; align-items: center; gap: 10px; }
.prog-track { flex: 1; height: 9px; border-radius: var(--r-pill); background: var(--bg-alt); overflow: hidden; }
.prog-fill { height: 100%; border-radius: var(--r-pill); background: var(--grad); }
.prog-num { font-size: 14px; font-weight: 800; color: var(--accent); min-width: 42px; text-align: right; }
.prog-lite .prog-fill { background: var(--accent-hot); }
/* ตัวเลขสถิติ */
.stats { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.stat { background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--r-sm); padding: 14px 16px; }
.stat b { display: block; font-size: 25px; font-weight: 800; line-height: 1.25; color: var(--accent); }
.stat span { font-size: 13px; color: var(--muted); }
/* ---------- 3 ขั้นตอนแนวนอน --------------------------------------------- */
.steps-strip { counter-reset: s; }
.steps-strip .card { position: relative; padding-top: 30px; }
.steps-strip .card::before {
counter-increment: s; content: counter(s);
position: absolute; top: -14px; left: 22px;
width: 34px; height: 34px; border-radius: 50%;
display: grid; place-items: center;
background: var(--surface); border: 2px solid var(--accent-hot);
color: var(--accent); font-weight: 800;
}
/* ---------- ขั้นตอนแบบรายการเลข (หน้าคู่มือ) ---------------------------- */
.ol-steps { list-style: none; counter-reset: g; margin: 0; padding: 0; }
.ol-steps > li {
counter-increment: g; position: relative;
padding: 0 0 24px 56px; border-left: 2px solid var(--border); margin-left: 17px;
}
.ol-steps > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.ol-steps > li::before {
content: counter(g); position: absolute; left: -18px; top: 0;
width: 36px; height: 36px; border-radius: 50%;
display: grid; place-items: center; font-weight: 800;
background: var(--grad); color: #fff;
box-shadow: 0 0 0 5px var(--bg);
}
.ol-steps h3 { margin: 4px 0 6px; }
.ol-steps p { margin: 0 0 8px; color: var(--text-2); }
/* ---------- Timeline ---------------------------------------------------- */
.tl { list-style: none; margin: 0; padding: 0 0 0 26px; border-left: 2px solid var(--border); }
.tl li { position: relative; padding: 0 0 26px 20px; }
.tl li::before {
content: ""; position: absolute; left: -33px; top: 9px;
width: 12px; height: 12px; border-radius: 50%;
background: var(--accent-hot); box-shadow: 0 0 0 4px var(--bg);
}
.tl time { font-size: 13px; font-weight: 700; color: var(--muted); }
.tl h3 { margin: 2px 0 4px; font-size: 17px; }
.tl p { margin: 0; color: var(--text-2); font-size: 15px; }
/* ---------- Breadcrumb -------------------------------------------------- */
.crumb { font-size: 14px; color: var(--muted); padding: 20px 0 0; }
.crumb a { color: var(--muted); }
.crumb a:hover { color: var(--accent); }
/* ---------- ที่วางภาพหน้าจอ (mockup ยังไม่มีภาพจริง) -------------------- */
.shots { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.shot {
aspect-ratio: 4 / 3; border-radius: var(--r-sm);
border: 2px dashed var(--border);
background:
repeating-linear-gradient(135deg,
transparent 0 10px, color-mix(in srgb, var(--accent-soft) 70%, transparent) 10px 20px),
var(--surface-2);
display: grid; place-items: center; text-align: center;
color: var(--muted); font-size: 13.5px; font-weight: 600; padding: 12px;
}
/* ---------- ตาราง ------------------------------------------------------- */
.tablewrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); }
table.t { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 480px; }
table.t th, table.t td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
table.t th { background: var(--surface-2); font-weight: 700; color: var(--text-2); white-space: nowrap; }
table.t tr:last-child td { border-bottom: 0; }
/* ---------- คู่คีย์-ค่า -------------------------------------------------- */
.kv { display: grid; grid-template-columns: 148px 1fr; gap: 8px 16px; font-size: 15px; }
.kv dt { color: var(--muted); font-weight: 600; }
.kv dd { margin: 0; }
/* ---------- กล่องอธิบาย ------------------------------------------------- */
.note { border-radius: var(--r-sm); padding: 14px 16px; font-size: 14.5px; border: 1px solid var(--border); background: var(--surface-2); }
.note-ok { background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok-ink); }
.note-warn { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn-ink); }
.note-danger { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger-ink); }
.note-info { background: var(--info-soft); border-color: var(--info-line); color: var(--info-ink); }
.note + .note { margin-top: 10px; }
/* accordion */
details.acc { border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); padding: 0; }
details.acc + details.acc { margin-top: 10px; }
details.acc > summary {
cursor: pointer; padding: 14px 18px; font-weight: 700;
list-style: none; display: flex; align-items: center; gap: 10px;
}
details.acc > summary::-webkit-details-marker { display: none; }
details.acc > summary::before { content: "▸"; color: var(--accent); font-size: 13px; }
details.acc[open] > summary::before { content: "▾"; }
details.acc > summary:hover { background: var(--surface-2); border-radius: var(--r-sm); }
details.acc .body { padding: 0 18px 16px; color: var(--text-2); font-size: 15px; }
details.acc .body > :first-child { margin-top: 0; }
details.acc .body > :last-child { margin-bottom: 0; }
hr.soft { border: 0; border-top: 1px solid var(--border); margin: 40px 0; }
/* ---------- Footer ------------------------------------------------------ */
.site-foot { background: var(--surface-2); border-top: 1px solid var(--border); padding: 46px 0 30px; font-size: 15px; }
.foot-tag { font-size: 13px; font-weight: 800; letter-spacing: .22em; color: var(--accent); text-transform: uppercase; }
.legal {
margin-top: 22px; padding: 16px 18px;
background: var(--warn-soft); border: 1px solid var(--warn-line);
border-radius: var(--r-sm); font-size: 14px; color: var(--warn-ink);
}
@media (max-width: 640px) {
section { padding: 44px 0; }
.hero { padding: 48px 0 40px; }
:root { --pad: 18px; }
.kv { grid-template-columns: 1fr; gap: 2px 0; }
.kv dd { margin-bottom: 8px; }
.ol-steps > li { padding-left: 44px; }
}