/* lucky-number main.css (UI v3 รอบ 1 2026-10-29: สี หัวเว็บ เมนู หน้าแรก ท้ายเว็บ ตามแบบ Main.dc.html Menu.dc.html · เดิม v0.8.0 · โครงหน้า หัวเว็บ เมนูเต็มจอ hero การ์ด ตาราง หน้าเอกสาร 404 · แผนข้อ 4.1 6.3 6.5) */

/* ---------- ฉากหลังเรืองม่วง (แผน 6.3 · ไม่ใช้ SVG filter) ---------- */
body {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 900px;
  background: var(--glow-1), var(--glow-2);
  /* v0.23.0: จางลงเป็นศูนย์ก่อนขอบล่าง 900px · เดิมแสงม่วงยังไม่หมดที่ขอบจึงขาดเป็นเส้นตรง */
  -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}
.site-head,
.crumbs,
main,
.site-foot { position: relative; z-index: 1; }
/* v0.9.0 G1: หัวเว็บอยู่เหนือ main (การ์ดเช็คเร็ว sticky) เมนูเลื่อนลงจึงกดได้ · เมนูเต็มจอเหนือหัวเว็บ · ลิงก์ข้ามบนสุด */
.site-head { z-index: 4; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.wrap-doc {
  width: 100%;
  max-width: calc(var(--wrap-doc) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}
@media (min-width: 768px) {
  :root { --gutter: 24px; }
}

/* ---------- ตัวอักษรพื้นฐาน ---------- */
a {
  color: var(--violet-ink);
  text-underline-offset: 3px;
  transition: color var(--speed);
}
a:hover { color: var(--violet-soft); }
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}
h1, h2, h3 {
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.3;
}
h3 { font-size: var(--text-lg); }
.eyebrow {
  font-size: var(--text-xs);
  letter-spacing: 2px;
  color: var(--muted-2);
  font-family: var(--font-body);
  font-weight: 400;
}
.lede {
  color: var(--ink-2);
  font-size: var(--text-base-s);
  max-width: 34em;
}
.muted { color: var(--muted); }
.small { font-size: var(--text-sm); }
.center { text-align: center; }
.opt { color: var(--muted); font-weight: 400; font-size: var(--text-sm); }
.h2-display {
  font-size: var(--text-2xl);
  line-height: 1.3;
  margin-top: 6px;
}
.h2-plain {
  font-size: 1.5rem;
  font-weight: 500;
  margin-bottom: var(--sp-3);
}
@media (min-width: 768px) {
  .h2-display { font-size: var(--text-3xl); }
}

/* h1 สองบรรทัด: คำค้นบรรทัดเล็ก + ข้อความของแบบบรรทัดใหญ่ (มติ E10) */
h1 { font-size: 2.125rem; line-height: 1.25; letter-spacing: -0.3px; }
h1 .h1-kw {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--violet-ink);
  margin-bottom: var(--sp-2);
}
h1 .h1-display { display: block; }

.skip-link {
  position: absolute;
  left: var(--sp-2);
  top: -60px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--sp-2) var(--sp-4);
  background: var(--fill-light);
  color: var(--ground);
  border-radius: var(--radius-pill);
  font-weight: 700;
}
.skip-link:focus { top: var(--sp-2); color: var(--ground); }

/* ---------- ปุ่ม ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid var(--line-input);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink);
  font-size: var(--text-base-s);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--speed), border-color var(--speed), color var(--speed);
}
.btn:hover { border-color: var(--violet-ink); color: var(--ink); }
/* UI v3: ปุ่มหลัก = ทอง ตัวอักษรพื้นเข้ม (10.8:1) · .btn-primary ชื่อใหม่ ใช้ซ้ำได้ · .btn-light คงชื่อเดิม (เทสต์ + tool.js) แต่หน้าตาเท่าปุ่มหลัก */
.btn-primary,
.btn-light {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--on-gold);
  font-weight: 700;
}
.btn-primary:hover,
.btn-light:hover { background: var(--gold-hover); border-color: var(--gold-hover); color: var(--on-gold); }
.btn-primary:focus-visible,
.btn-light:focus-visible { outline-color: var(--violet-soft); }
.btn-outline { background: transparent; border-color: var(--line); }
.btn-outline:hover { border-color: var(--gold); color: var(--gold-2); }
.btn-ghost { border-color: var(--line-input); }
.btn-block { display: flex; width: 100%; }
.btn-small { min-height: 44px; padding: 0 18px; font-size: var(--text-md); color: var(--violet-ink); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
.btn .icon-arrow { flex: none; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-input);
  border-radius: var(--radius-pill);
  background: rgba(12, 10, 26, 0.4);
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--speed);
}
.icon-btn:hover { border-color: var(--violet-ink); }

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  font-weight: 500;
  text-decoration: none;
}
.chip-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line-input);
  border-radius: var(--radius-pill);
  background: rgba(12, 10, 26, 0.35);
  color: var(--ink);
  font-size: var(--text-md);
  text-decoration: none;
  transition: border-color var(--speed), background-color var(--speed);
}
.chip-link:hover { border-color: var(--violet-ink); color: var(--ink); }
.chip-link.is-current,
.chip-link[aria-current] {
  background: var(--violet-dim);
  border-color: var(--violet-edge);
  font-weight: 700;
}
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  list-style: none;
}

/* ---------- หัวเว็บ (UI v3: โปร่ง ไล่เงาลงจากขอบบน ลอยเหนือฉากหน้าแรก) ---------- */
.site-head { background: linear-gradient(rgba(12, 10, 26, 0.75), rgba(12, 10, 26, 0)); }
.site-head-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 64px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
}
.brand:hover { color: var(--ink); }
.brand .icon-star { color: var(--gold); flex: none; }
/* v0.19.0 B3 C7: โลโก้แมวกวัก WebP โปร่งใส (1x 40 · 2x 80) */
.brand-logo { display: block; flex: none; width: 40px; height: 40px; }
.brand-name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--ink-strong);
}
.site-head .brand-name { white-space: nowrap; }
/* จอแคบ: ชื่อเว็บ (EN "Lucky Number") + กลุ่มปุ่มภาษา + ปุ่มเมนู ต้องอยู่แถวเดียว */
@media (max-width: 399px) {
  .site-head-inner { gap: var(--sp-2); }
  .site-head .brand-name { font-size: var(--text-lg); }
  .site-head-inner > .lang-pill + .nav-toggle { margin-left: 0; }
}
@media (max-width: 359px) {
  .lang-cur { display: none; }
  .site-head .brand-logo { width: 32px; height: 32px; }
}
.nav-desk { display: none; }
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-2);
  font-size: var(--text-base-s);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--speed), background-color var(--speed);
}
.nav-link:hover { color: var(--ink); background: var(--surface-2); }
.nav-link[aria-current] { color: var(--ink); font-weight: 700; }
.nav-drop { position: relative; }
.nav-drop-btn .icon-caret { transition: transform var(--speed); }
.nav-drop-btn[aria-expanded="true"] .icon-caret { transform: rotate(180deg); }
.nav-drop-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 3;
  min-width: 280px;
  max-height: 80vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sp-2);
  background: var(--surface);
  border: 1px solid var(--panel);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--speed), transform var(--speed), visibility var(--speed);
}
.nav-drop-btn[aria-expanded="true"] + .nav-drop-list,
.no-js .nav-drop:focus-within .nav-drop-list {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.nav-drop-list a {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  color: var(--ink);
  text-decoration: none;
}
.nav-drop-list a:hover,
.nav-drop-list a[aria-current] { background: var(--surface-2); color: var(--ink); }
.drop-num { width: 24px; color: var(--gold); font-size: var(--text-base-s); letter-spacing: 1px; }
/* v0.9.0 H10: หัวกลุ่มระบบในเมนูเลื่อนลง (แบบ eyebrow) */
.drop-items { list-style: none; }
.drop-group + .drop-group { margin-top: var(--sp-1); padding-top: var(--sp-1); border-top: 1px solid var(--panel); }
.drop-group-head { padding: 10px 12px 4px; }

@media (min-width: 1024px) {
  .nav-desk { display: flex; align-items: center; gap: var(--sp-1); }
  .nav-toggle { display: none; }
}
/* v0.15.0: 1024 ถึง 1279 เมนูเลื่อนลง (กว้าง 280) ชนขอบขวา จึงชิดขวาของปุ่มแทน · จอกว้างกว่านี้ชิดซ้ายเดิม */
@media (min-width: 1024px) and (max-width: 1279px) {
  .nav-drop-list { left: auto; right: 0; }
}
/* ไม่มีสคริปต์: เมนูเต็มจอเปิดไม่ได้ จึงแสดงแถวลิงก์แทนทุกขนาดจอ */
.no-js .nav-toggle { display: none; }
.no-js .nav-desk { display: flex; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- เมนูเต็มจอ (แบบ Menu · มติ E15: inert ไม่ใช้ hidden เพื่อให้ transition ทำงาน) ---------- */
.site-menu {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  /* UI v3 แบบ Menu: แสงม่วงมุมล่างขวา + วงโคจรตกแต่ง (data URI ไม่มีตัวอักษร · ไม่เพิ่ม request) */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420' fill='none'%3E%3Ccircle cx='210' cy='210' r='190' stroke='%237B5CE6' stroke-width='.7' opacity='.45'/%3E%3Ccircle cx='210' cy='210' r='150' stroke='%237B5CE6' stroke-width='.7' opacity='.6' stroke-dasharray='2 8'/%3E%3Ccircle cx='210' cy='210' r='110' stroke='%23B39CF5' stroke-width='.6' opacity='.35'/%3E%3Cg fill='%23EBB869'%3E%3Ccircle cx='210' cy='20' r='3'/%3E%3Ccircle cx='344' cy='76' r='2'/%3E%3Ccircle cx='400' cy='210' r='2.5'/%3E%3C/g%3E%3Cpath d='M210 20L344 76L400 210' stroke='%23EBB869' stroke-width='.8' opacity='.6'/%3E%3C/svg%3E") right -170px bottom -140px / 420px 420px no-repeat,
    radial-gradient(circle at 90% 95%, rgba(123, 92, 230, 0.32), rgba(123, 92, 230, 0) 45%),
    radial-gradient(circle at 0% 15%, rgba(59, 35, 150, 0.4), rgba(59, 35, 150, 0) 45%),
    var(--ground);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--speed), transform var(--speed), visibility var(--speed);
}
.site-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
}
html.menu-open,
html.menu-open body { overflow: hidden; }
.site-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  flex: none;
}
.site-menu-body { flex: 1; padding-top: var(--sp-4); }
.menu-tools { list-style: none; margin-top: 4px; }
/* v0.9.0 H10: หัวกลุ่มระบบในเมนูเต็มจอ */
.menu-group-head {
  margin-top: 22px;
  margin-bottom: 4px;
  font-size: var(--text-xs);
  letter-spacing: 2px;
  color: var(--muted-2);
}
#menu-title + .menu-group-head { margin-top: var(--sp-2); }
.menu-tools a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 52px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink);
  text-decoration: none;
}
.menu-tools a:hover { color: var(--violet-soft); }
.menu-tools a[aria-current] .menu-name { color: var(--gold-2); }
.menu-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.375rem;
  line-height: 1.3;
}
.menu-num { font-size: var(--text-md); letter-spacing: 2px; color: var(--gold); }
.menu-sub { margin-top: var(--sp-6); margin-bottom: var(--sp-2); }
.menu-read { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.site-menu-foot {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-top: var(--sp-5);
  padding-bottom: var(--sp-8);
}
@media (min-width: 1024px) {
  .site-menu { display: none; }
}

/* ---------- เส้นทางหน้า ---------- */
.crumbs { padding-top: var(--sp-3); font-size: var(--text-sm); color: var(--muted); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; }
.crumbs li + li::before { content: "\203A"; margin-right: 6px; color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink-2); }

/* ---------- ตกแต่ง (แผน 6.3 · SVG inline aria-hidden) ---------- */
.decor { pointer-events: none; }
.decor-num { font-family: var(--font-num); font-variant-numeric: lining-nums; font-weight: 500; }

/* ---------- ส่วนเนื้อหา ---------- */
main { display: block; padding-bottom: var(--sp-12); }
.section { padding-top: var(--sp-12); }
.section-tight { padding-top: var(--sp-6); }
@media (min-width: 1024px) {
  .section { padding-top: var(--sp-14); }
}
.prose-block { max-width: var(--wrap-doc); }
.prose-block p { margin-top: var(--sp-3); color: var(--ink-2); }
.prose h2 { font-size: 1.375rem; margin-top: var(--sp-8); margin-bottom: var(--sp-3); }
.prose p,
.prose li { color: var(--ink-2); }
.prose p + p { margin-top: var(--sp-3); }
.prose ul,
.prose-in { padding-left: 1.25rem; display: flex; flex-direction: column; gap: var(--sp-2); }
.prose-in { padding-left: 0; }
/* v0.27.1 /about/ ข้อมูลอ้างอิง: ชื่อโดเมนเป็นข้อความล้วน (ไม่มีลิงก์ออก) */
.about-src-list .src-host { color: var(--ink); overflow-wrap: anywhere; }
ul.prose-in { padding-left: 1.25rem; }
.panel-card {
  padding: var(--sp-6) var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--panel);
  border-radius: var(--radius-xl);
}

/* แถบสถานะ */
.bar,
.bar-warn,
.note-box {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}
.bar-info,
.note-box { background: var(--ground); color: var(--muted); border: 1px solid var(--surface-2); }
.bar-warn { background: var(--warn-dim); color: var(--warn); border: 1px solid var(--warn-edge); margin-bottom: var(--sp-3); }

/* ป้าย */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--ink);
  font-size: var(--text-sm);
  line-height: 1.6;
  white-space: nowrap;
}
.badge-ok { background: var(--pass-dim); color: var(--pass); }
.badge-warn,
.badge-fail { background: var(--warn-dim); color: var(--warn); }
.badge-gold { background: var(--gold-dim); color: var(--gold-2); }
.badge-info { background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--panel); }

/* ตาราง */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--panel);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.data-table { width: 100%; font-size: var(--text-md); }
.data-table th,
.data-table td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--panel);
}
.data-table thead th {
  border-top: 0;
  color: var(--muted-2);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 1px;
}
.data-table tbody th { font-weight: 500; color: var(--ink); }
.data-table td { color: var(--ink-2); }
/* ตารางกฎบนจอแคบ: แถวละการ์ด (ชื่อกฎเต็มบรรทัด แล้วสถานะ จำนวนแหล่ง โดเมนเรียงต่อกัน) แทน 4 คอลัมน์ที่ตัดคำทีละพยางค์ */
@media (max-width: 767px) {
  .rules-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .rules-table tbody,
  .rules-table tr { display: block; }
  .rules-table tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    padding: 14px;
    border-top: 1px solid var(--panel);
  }
  .rules-table tbody tr:first-child { border-top: 0; }
  .rules-table th,
  .rules-table td { display: block; padding: 0; border-top: 0; }
  .rules-table tbody th { flex: 1 1 100%; }
  .rules-table td:last-child { flex: 1 1 100%; }
  .rules-table td:last-child:empty { display: none; }
}
.domain-list { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: var(--text-sm); color: var(--muted); }

/* ขั้นตอนเลขวงกลม (วิธีคิด · ทุกผลลัพธ์บอกที่มาได้) */
.step-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: var(--sp-5);
  counter-reset: step;
}
.step-list > li { display: flex; gap: var(--sp-4); counter-increment: step; }
.step-num {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--violet);
  border-radius: var(--radius-pill);
  color: var(--violet-ink);
  font-size: var(--text-lg);
}
.step-num::before { content: counter(step); }
.step-list p { padding-top: 6px; color: var(--ink-2); }
.proof-list + .btn { margin-top: var(--sp-5); }

/* FAQ */
.faq-list { border-top: 1px solid var(--panel); }
.faq-item { border-bottom: 1px solid var(--panel); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 54px;
  padding: 10px 0;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  flex: none;
  color: var(--violet-ink);
  font-family: var(--font-num);
  font-variant-numeric: lining-nums tabular-nums;
  font-size: 1.5rem;
  line-height: 1;
  transition: transform var(--speed);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding: 0 0 var(--sp-4); color: var(--ink-2); }

/* ลิงก์ตามบริบท */
.related-grid {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.related-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 52px;
  height: 100%;
  padding: 10px 16px;
  background: var(--surface);
  border: 1px solid var(--panel);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: var(--text-base-s);
  text-decoration: none;
  transition: border-color var(--speed);
}
.related-card:hover { border-color: var(--violet-ink); color: var(--ink); }
.related-card .icon-chevron { flex: none; color: var(--placeholder); }
@media (min-width: 480px) {
  .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .related-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- หน้าแรก (UI v3 แบบ Main.dc.html) ---------- */
/* ฉากเปิด: SVG inline อยู่บนสุด ดึงขึ้นใต้หัวเว็บ (หัวเว็บโปร่ง) · ข้อความ h1 คำโปรย ปุ่ม ไม่มีแอนิเมชัน ไม่เริ่มที่ opacity 0 */
.hero { position: relative; margin-top: -64px; }
.hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 560px;
  background:
    radial-gradient(circle at 50% 46%, rgba(123, 92, 230, 0.5), rgba(74, 45, 176, 0.22) 26%, rgba(42, 26, 110, 0) 52%),
    radial-gradient(circle at 12% 14%, rgba(176, 92, 200, 0.28), rgba(176, 92, 200, 0) 36%),
    radial-gradient(circle at 90% 78%, rgba(59, 107, 214, 0.22), rgba(59, 107, 214, 0) 36%);
  -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
  pointer-events: none;
}
.hero-grid { position: relative; display: grid; gap: var(--sp-8); }
.hero-copy { position: relative; min-width: 0; }
.hero-scene {
  position: relative;
  margin: 0 calc(-1 * var(--gutter)) -48px;
  pointer-events: none;
}
.hero-scene-svg { width: 100%; max-width: 480px; height: auto; margin: 0 auto; overflow: visible; }
.hero-eyebrow { position: relative; }
.hero-title { position: relative; margin-top: 14px; }
.hero-title h1 { font-size: var(--text-hero); max-width: 11em; text-shadow: 0 2px 18px rgba(12, 10, 26, 0.9); }
.hero-title .h1-display { max-width: 8em; }
.hero-title h1 .h1-kw { color: var(--gold-2); }
.hero-lede { position: relative; margin-top: 14px; max-width: 22em; color: var(--ink-2); font-size: var(--text-base-s); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 26px; }
.hero-actions .btn { min-height: 50px; }
.center-row { justify-content: center; }
.play-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  color: var(--ink);
  font-size: var(--text-base-s);
  text-decoration: none;
}
.play-link:hover { color: var(--violet-soft); }
.play-icon { flex: none; }
.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-10);
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
}
.hero-stats > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; }
.stat-num { font-size: var(--text-3xl); font-weight: 500; line-height: 1; color: var(--ink); }
.hero-stats > div:first-child .stat-num { color: var(--gold-2); }
.stat-label { margin-top: 4px; font-size: var(--text-xs); letter-spacing: 1px; color: var(--muted-2); line-height: 1.5; }
.stat-label .num { font-size: var(--text-md); }

/* การ์ดเช็คเร็ว: ขอบม่วงเด่น เรืองม่วง */
.quick-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: 22px 18px;
  background: var(--surface-glass);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-glow);
  align-self: start;
}
.quick-title { margin-top: 4px; font-size: 1.5rem; font-weight: 500; }
.quick-result-inner { max-width: 760px; }

/* ส่วนใต้ fold: ข้ามการวาดจนเลื่อนใกล้ (devSeo ข้อ 4) · ข้อความยังอยู่ใน HTML */
.section-lazy { content-visibility: auto; contain-intrinsic-size: auto 720px; }
/* content-visibility มี paint containment ตัดภาพที่ขอบ section: เผื่อพื้นล่าง 8px (หักคืนด้วย margin ติดลบ ระยะหน้าเท่าเดิม) ให้กรอบโฟกัสทองของตัวสุดท้ายครบ · overflow-clip-margin ให้เงาเรือง (--shadow-glow 60px) ไม่ถูกตัด */
.section-lazy { padding-bottom: var(--sp-2); margin-bottom: calc(var(--sp-2) * -1); overflow-clip-margin: var(--sp-14); }

.section-head-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); }
.section-head-row .h2-plain { margin-bottom: 0; font-size: var(--text-2xl); }
.section-count { color: var(--muted-2); font-size: var(--text-lg); letter-spacing: 1px; }
.tool-list { list-style: none; margin-top: 14px; border-top: 1px solid var(--panel); }
.tool-item a {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  padding: 10px 0;
  border-bottom: 1px solid var(--panel);
  color: var(--ink);
  text-decoration: none;
  transition: background-color var(--speed);
}
.tool-item a:hover { color: var(--ink); background: rgba(28, 23, 54, 0.6); }
.tool-num { width: 28px; flex: none; color: var(--gold); font-size: var(--text-base-s); letter-spacing: 1px; }
.tool-text { flex: 1; min-width: 0; }
.tool-text strong { display: block; font-weight: 500; }
.tool-blurb { display: block; font-size: var(--text-sm); color: var(--muted); }
.tool-item .icon-chevron { flex: none; color: var(--placeholder); }
.tool-item a:hover .icon-chevron { color: var(--gold); }
/* v0.9.0 H10: การ์ดเครื่องมือแบ่งกลุ่มตามระบบ · จอใหญ่ ไทยซ้าย จีนกับสากลซ้อนขวา */
.tool-groups { display: grid; gap: 22px; margin-top: var(--sp-4); }
.tool-group-head { display: flex; align-items: baseline; gap: var(--sp-2); }
.tool-group-count { color: var(--violet-ink); font-size: var(--text-sm); }
.tool-group .tool-list { margin-top: 6px; }

/* แถบปีนี้ */
.year-card {
  position: relative;
  overflow: hidden;
  padding: var(--sp-6) var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--panel);
  border-radius: var(--radius-xl);
}
.year-card::before {
  content: "";
  position: absolute;
  right: -60px;
  top: -60px;
  width: 200px;
  height: 200px;
  border-radius: var(--radius-pill);
  background: radial-gradient(circle, rgba(123, 92, 230, 0.45), rgba(123, 92, 230, 0) 70%);
  pointer-events: none;
}
.year-card > * { position: relative; }
.year-card-main { display: flex; align-items: center; gap: var(--sp-4); margin: 10px 0 var(--sp-3); }
.year-ganzhi {
  flex: none;
  white-space: nowrap;
  font-size: 3rem;
  font-weight: 500;
  line-height: 1;
  color: var(--violet-soft);
  text-shadow: 0 0 24px rgba(179, 156, 245, 0.25);
}
.year-card-name { font-size: 1.25rem; font-weight: 500; line-height: 1.35; }
.year-card-link { margin-top: var(--sp-4); min-height: 44px; font-size: var(--text-md); }

/* มากกว่าคำทำนาย: วงดาวตกแต่งมุมขวา (ไม่มีตัวอักษร) */
.proof-wrap { position: relative; overflow: hidden; }
.proof-decor { position: absolute; right: -50px; top: 0; opacity: 0.55; }
.proof .eyebrow,
.proof .h2-display,
.proof .step-list,
.proof .btn { position: relative; }
.proof .h2-display { max-width: 9em; }

@media (min-width: 768px) {
  .hero::before { height: 640px; }
  .hero-scene { margin-left: 0; margin-right: 0; }
}
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: 55fr 45fr; align-items: start; gap: var(--sp-10); }
  .hero::before { height: 720px; background-size: 60% 100%, 100% 100%, 100% 100%; background-repeat: no-repeat; }
  .hero-scene { margin: 0 0 -56px; }
  .hero-scene-svg { max-width: 400px; margin: 0; }
  .hero-title h1 { font-size: 2.75rem; }
  .hero-lede { max-width: 26em; }
  .quick-card { position: sticky; top: var(--sp-6); margin-top: 96px; }
  /* 2 คอลัมน์แบบ columns: ไทย 5 รายการเต็มคอลัมน์ซ้าย จีนกับสากลต่อกันคอลัมน์ขวา ไม่มีช่องว่างกลาง */
  .tool-groups { display: block; columns: 2; column-gap: var(--sp-8); }
  .tool-group { break-inside: avoid; }
  .tool-group + .tool-group { margin-top: 0; }
  .tool-group-chinese + .tool-group-western { padding-top: var(--sp-6); }
  .proof-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .proof-decor { right: 0; top: -56px; width: 160px; height: 160px; }
  .proof-wrap { overflow: visible; }
}

/* ฉากเปิด: แอนิเมชันเฉพาะภาพ SVG (devSeo ข้อ 2) · หยุดเมื่อพ้นจอ (home.js ใส่ .is-off) · prefers-reduced-motion ปิดทั้งหมดใน tokens.css */
@media (prefers-reduced-motion: no-preference) {
  @keyframes hs-fade { from { opacity: 0; } }
  @keyframes hs-twk { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
  @keyframes hs-spin { to { transform: rotate(360deg); } }
  @keyframes hs-ring { from { opacity: 0; transform: rotate(-140deg) scale(0.55); } }
  @keyframes hs-draw { from { stroke-dashoffset: 1; } }
  @keyframes hs-core { 0% { opacity: 0; transform: scale(0.1) rotate(-90deg); } 60% { opacity: 1; transform: scale(1.25) rotate(10deg); } }
  @keyframes hs-shoot { 0% { opacity: 0; transform: none; } 2% { opacity: 1; } 10%, 100% { opacity: 0; transform: translate(-300px, 180px); } }
  .hs-tw { animation: hs-twk 3.6s ease-in-out infinite; }
  .hs-tw2 { animation-delay: -1.2s; }
  .hs-tw3 { animation-delay: -2.4s; }
  .hs-ring { transform-box: view-box; transform-origin: 195px 255px; animation: hs-ring 1.6s cubic-bezier(0.15, 0.85, 0.25, 1) 0.2s both; }
  .hs-rev { transform-box: view-box; transform-origin: 195px 255px; animation: hs-spin 240s linear infinite reverse; }
  .hs-orbit { transform-box: view-box; transform-origin: 195px 255px; animation: hs-fade 1s ease 0.6s both, hs-spin 150s linear 0.6s infinite; }
  .hs-up { transform-box: fill-box; transform-origin: center; animation: hs-spin 150s linear 0.6s infinite reverse; }
  .hs-line { stroke-dasharray: 1; animation: hs-draw 1.4s ease-out 0.9s both; }
  .hs-node { animation: hs-fade 0.6s ease 1s both; }
  .hs-rays { transform-box: view-box; transform-origin: 195px 255px; animation: hs-fade 1.4s ease-out 1.8s both; }
  .hs-core { transform-box: fill-box; transform-origin: center; animation: hs-core 1s cubic-bezier(0.2, 0.9, 0.3, 1.2) 1.6s both; }
  .hs-shoot { animation: hs-shoot 9s ease-in 4s infinite; }
  .hero-scene.is-off * { animation-play-state: paused !important; }
}
/* ดาวตกซ่อนถาวร (reduced-motion ไม่ค้างเป็นเส้นเฉียง) · keyframe hs-shoot ด้านบนเปิดให้เห็นเฉพาะ no-preference */
.hs-shoot { opacity: 0; }
.hs-orbit text,
.hs-node text { font-family: var(--font-num); }
.hs-up circle { stroke-width: 11; stroke-opacity: 0.18; }

/* ---------- หัวหน้าเครื่องมือและหน้าเอกสาร ---------- */
.page-head { position: relative; padding-top: var(--sp-8); }
.page-head-decor {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
/* v0.23.0: จอต่ำกว่า 1024 กล่อง h1 (14em) กินถึงตำแหน่งวงล้อ → ซ่อน · จอ 1024 ขึ้นไป ย่อวงให้อยู่ในความสูงหัวหน้า (ไม่ถูกตัดขอบล่าง) */
.page-head-decor { display: none; }
.page-head-decor .decor-mini { position: absolute; opacity: 0.85; }
.page-head-inner { position: relative; }
.page-head h1 { margin-top: 10px; max-width: 14em; }
.page-head h1 .h1-display { max-width: 9em; }
.page-head .lede { margin-top: 14px; max-width: 30em; }
@media (min-width: 768px) {
  .page-head h1 { font-size: 2.5rem; }
}
@media (min-width: 1024px) {
  .page-head-decor { display: block; }
  .page-head-decor .decor-mini {
    right: 4%;
    top: 12px;
    width: auto;
    height: calc(100% - 24px);
    max-height: 220px;
    aspect-ratio: 1;
  }
}

/* ---------- ท้ายหน้า ---------- */
.site-foot {
  margin-top: var(--sp-14);
  padding: 28px 0 36px;
  border-top: 1px solid var(--panel);
  font-size: var(--text-sm);
  color: var(--muted);
}
.site-foot-inner { display: grid; gap: var(--sp-6); }
.brand-foot { min-height: 0; }
.brand-foot .icon-star { width: 16px; height: 16px; }
.brand-foot .brand-logo { width: 36px; height: 36px; }
.brand-foot .brand-name { font-size: var(--text-lg); }
.foot-brand .muted { margin-top: var(--sp-3); }
/* UI v3: กลุ่มลิงก์ 2 คอลัมน์ตั้งแต่จอมือถือ · ลิงก์เรียงลง พื้นที่แตะสูง 44 */
.foot-navs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-3); }
.foot-head { color: var(--muted-2); letter-spacing: 1.5px; font-size: var(--text-xs); margin-bottom: var(--sp-1); }
.foot-links { list-style: none; display: flex; flex-direction: column; }
.foot-links a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; line-height: 1.35; }
.foot-meta { font-size: var(--text-xs); }
@media (min-width: 1024px) {
  .site-foot-inner { grid-template-columns: 1fr 2fr; }
  .foot-navs { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .foot-meta { grid-column: 1 / -1; }
}

/* ---------- ประกาศความเป็นส่วนตัว ---------- */
.notice {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: var(--sp-3) 0;
  background: var(--surface-glass);
  border-top: 1px solid var(--line-2);
  box-shadow: 0 -8px 28px rgba(12, 10, 26, 0.5);
  font-size: var(--text-sm);
}
.notice-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.notice-inner p { color: var(--ink-2); flex: 1 1 260px; }
/* พื้นที่แตะลิงก์นโยบาย: padding แนวตั้งของ inline ไม่ดันบรรทัดและกล่องแจ้ง */
.notice-inner p a { padding-block: 13px; }
/* v0.26.2: พื้นที่ท้ายหน้า = ความสูงจริงของแถบ (main.js ตั้ง --notice-h · ก่อนวัด = 140px) · โฟกัส/เลื่อนหาช่องกรอกไม่จมใต้แถบ */
/* v0.30.x: ที่ว่างท้ายหน้าเท่าส่วนของ footer ที่แถบทับจริง (main.js ตั้ง --notice-pad) · จอกว้างการ์ดมุมขวาทับแต่พื้นที่ว่าง จึงไม่เกิดแถบว่างใต้ footer */
body.has-notice { padding-bottom: var(--notice-pad, var(--notice-h, 140px)); }
html.has-notice { scroll-padding-bottom: var(--notice-h, 140px); }
/* จอแคบ: แถบกะทัดรัด ข้อความกับปุ่มอยู่แถวเดียว (บังจอน้อยลง) */
@media (max-width: 479px) {
  .notice { padding: var(--sp-2) 0; font-size: var(--text-xs); }
  .notice-inner { flex-wrap: nowrap; gap: var(--sp-2); }
  .notice-inner p { flex: 1 1 auto; }
  .notice-ok { flex: none; min-height: 44px; padding: 0 14px; }
}
/* จอกว้าง: การ์ดมุมขวาล่าง ไม่คาดทับฟอร์มที่อยู่ซ้าย/กลางจอ */
@media (min-width: 1024px) {
  .notice { left: auto; right: var(--sp-6); bottom: var(--sp-6); width: 400px; padding: var(--sp-4) 0;
    border: 1px solid var(--line-2); border-radius: var(--radius-xl); box-shadow: var(--shadow-glow); }
  .notice-inner { padding: 0 var(--sp-4); }
}

/* ---------- 404 ---------- */
.not-found { position: relative; padding-top: var(--sp-12); text-align: center; }
.not-found-decor { position: absolute; left: 50%; top: 0; margin-left: -110px; opacity: 0.7; }
.not-found-code {
  position: relative;
  font-size: 6rem;
  font-weight: 500;
  line-height: 1;
  color: var(--gold-2);
  text-shadow: 0 0 30px rgba(157, 123, 255, 0.7);
}
.not-found h1 { position: relative; margin-top: var(--sp-4); }
.not-found .lede { margin: var(--sp-3) auto 0; }

/* หน้าเอกสาร: ตารางกว้างเต็ม wrap (แผน 6.5) */
.page-head-doc + .wrap-doc,
.page-head-doc + .wrap { margin-top: var(--sp-6); }
.prose-in { max-width: var(--wrap-doc); }

/* ปุ่มภาษาเตรียมโครงไว้ (แผน 3.1 · ยังไม่มี markup) */
.lang-switch { display: none; }

/* ---------- v0.16.0 สองภาษา (มติ I1 N9): ปุ่มสลับภาษาในแถบบน · ชิปในเมนูมือถือใช้ .chip-link เดิม ---------- */
/* UI v3: กลุ่มปุ่มภาษาแบบแคปซูล · ภาษาปัจจุบันเป็นป้ายจาก data-code (::before ไม่ใช่ข้อความในหน้า · aria-hidden) · ลิงก์สลับภาษาคงเดิม */
.lang-pill {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: rgba(12, 10, 26, 0.5);
}
.lang-cur {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  background: var(--fill-light);
  color: var(--ground);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
}
.lang-cur::before { content: attr(data-code); }
.lang-pill[data-lang="en"] .lang-cur { order: 2; }
.lang-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin: -6px 0;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--speed);
}
.lang-switch:hover { color: var(--gold-2); }
.site-head-inner > .lang-pill + .nav-toggle { margin-left: calc(-1 * var(--sp-2)); }
@media (min-width: 1024px) {
  .nav-desk { margin-left: auto; }
  .lang-pill { margin-left: 0; }
}

/* === UI v3 ปิดช่องว่าง: หน้าแรก เมนู หัวท้ายเว็บ (CEO 2026-10-29 "เหมือนแบบ 100%" · ค่าตามแบบ Main.dc.html Menu.dc.html ที่ 390px) === */
/* หัวเว็บ: โลโก้ดาวทอง 22px + ชื่อเว็บ serif 21px (แบบใช้ 600 · โปรเจคมี 500/700 เบราว์เซอร์จึงใช้ 700) */
.brand { gap: 8px; }
.brand-logo { display: block; flex: none; width: 22px; height: 22px; color: var(--gold); }
.brand-name { font-size: 1.3125rem; font-weight: 600; letter-spacing: 0; color: var(--ink); }
.site-head-inner { min-height: 64px; gap: var(--sp-2); }
.site-head-inner > .lang-pill + .nav-toggle { margin-left: 0; }
.nav-toggle,
#menu-close { border-color: var(--line); background: rgba(12, 10, 26, 0.4); }
.lang-cur { font-size: 0.8125rem; }
/* v0.30.x: ปุ่มเมนูไม่ถูกบีบ (เดิม EN 320px เหลือกว้าง 14px ชิดขอบขวา) · จอต่ำกว่า 360px ซ่อนป้ายภาษาปัจจุบันตามกติกาเดิมบรรทัด 249 ที่ถูกกฎ .lang-cur ของ UI v3 ทับ */
.nav-toggle { flex: none; }
@media (max-width: 359px) {
  .site-head .lang-cur { display: none; }
}
.lang-switch { font-size: 0.8125rem; }
@media (max-width: 399px) {
  .site-head .brand-name { font-size: 1.3125rem; }
}
/* 360–389px: ชื่อ EN "Lucky Number" 21px + กลุ่มภาษา + ปุ่มเมนู เกินแถว จึงลดชื่อเว็บเป็น text-lg (แบบอ้างอิงที่ 390px ไม่เปลี่ยน) */
@media (min-width: 360px) and (max-width: 389px) {
  .site-head .brand-name { font-size: var(--text-lg); }
}
@media (max-width: 359px) {
  .site-head .brand-logo { width: 20px; height: 20px; }
  .site-head .brand-name { font-size: var(--text-lg); }
}

/* เมนูเต็มจอ (แบบ Menu): ฉากวงเลขมุมขวาล่าง · หน้าแรก + กลุ่ม + ภาษา + อ่าน + ปุ่มอ่อน */
.site-menu { background: radial-gradient(circle at 90% 95%, rgba(123, 92, 230, 0.32), rgba(123, 92, 230, 0) 45%), radial-gradient(circle at 0% 15%, rgba(59, 35, 150, 0.4), rgba(59, 35, 150, 0) 45%), var(--ground); }
.menu-decor { position: fixed; right: -170px; bottom: -140px; pointer-events: none; }
.menu-decor-num { font-family: var(--font-num); font-variant-numeric: lining-nums; font-weight: 500; }
.site-menu-head,
.site-menu-body,
.site-menu-foot { position: relative; z-index: 1; }
.site-menu-tools { display: flex; align-items: center; gap: 8px; }
.site-menu-tools .lang-pill { margin-left: 0; }
.site-menu-body { padding-top: 18px; }
.menu-tools { margin-top: 0; }
.menu-tools a { min-height: 51px; border-bottom: 1px solid rgba(196, 181, 253, 0.16); }
.menu-group-head { margin: 22px 0 4px; font-size: var(--text-xs); letter-spacing: 2px; color: var(--muted-2); }
.menu-sub { margin: 24px 0 8px; }
.menu-num { font-size: var(--text-md); letter-spacing: 2px; color: var(--gold); }
.menu-lang {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--panel);
  border-radius: var(--radius-pill);
}
.menu-lang-cur,
.menu-lang-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: var(--radius-pill);
  font-size: var(--text-base-s);
  text-decoration: none;
}
.menu-lang-cur { background: var(--fill-light); color: var(--ground); font-weight: 700; }
.menu-lang-link { color: var(--ink); }
.menu-lang-link:hover { color: var(--gold-2); }
.menu-lang[data-lang="en"] .menu-lang-cur { order: 2; }
.menu-read .chip-link { min-height: 44px; padding: 0 16px; border-color: var(--line); background: transparent; font-size: var(--text-md); }
.site-menu-foot { gap: 12px; padding-top: 24px; padding-bottom: 32px; }
.menu-cta { min-height: 52px; background: var(--fill-light); border-color: var(--fill-light); color: var(--ground); font-weight: 700; }
.menu-cta:hover { background: var(--fill-light-hover); border-color: var(--fill-light-hover); color: var(--ground); }
.site-menu-foot .small { font-size: var(--text-xs); }

/* หน้าแรก: ฉาก 520px ด้านบน ข้อความเริ่มที่ 404px (แบบ) */
.hero-scene { margin: 0 calc(-1 * var(--gutter)) -52px; }
.hero-scene-svg { max-width: 390px; }
.hero-h1 {
  position: relative;
  margin-top: 14px;
  max-width: 340px;
  font-size: var(--text-hero);
  line-height: 1.25;
  letter-spacing: 0;
  text-shadow: 0 2px 18px rgba(12, 10, 26, 0.9);
}
/* inline-block ตัดช่องว่างท้ายคำทิ้ง ("line up as " + "your numbers" ติดกัน) · break-spaces เก็บช่องว่างไว้และยังตัดบรรทัดได้ */
.hero-h1 .hw { display: inline-block; white-space: break-spaces; }
.hero-h1 .hw-gold { color: var(--gold-2); }
.hero-lede { max-width: 330px; }
.hero-actions .hero-cta { min-height: 50px; height: 50px; padding: 0 22px; }
.hero-about {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  font-size: var(--text-base-s);
  text-decoration: none;
}
.hero-about:hover { color: var(--violet-soft); }
.hero-stats { margin-top: 40px; gap: 12px; }
.hero-stats > .hero-stat { display: flex; flex-direction: column; justify-content: flex-start; min-width: 0; }
/* แบบใช้ Cormorant ค่าเริ่ม (ตัวเลขแบบ old-style) ในหน้าแรก เมนู ท้ายเว็บ */
.hero .num,
.home-tools .num,
.home-year .num,
.proof .num,
.site-menu .num,
.site-foot .num,
.quick-card .input-num { font-variant-numeric: normal; }
.quick-card .check-label input { color-scheme: light; }
.hero-stat .stat-num { font-size: var(--text-3xl); font-weight: 500; line-height: 1; color: var(--ink); white-space: nowrap; }
.hero-stat .stat-num.is-gold { color: var(--gold-2); }
.hero-stat .stat-label { margin-top: 4px; line-height: 1.6; }
.hero-h1,
.quick-card .quick-title,
.home-tools .h2-plain,
.proof .h2-display { color: var(--ink); }
.star-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 20px;
  list-style: none;
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--muted);
}
.star-legend li { display: inline-flex; align-items: center; gap: 5px; }
.star-dot { width: 9px; height: 9px; border-radius: var(--radius-pill); }
.sd-1 { background: #E5634B; }
.sd-2 { background: #F2D06B; }
.sd-3 { background: #C98AA3; }
.sd-4 { background: #6FAF8C; }
.sd-5 { background: #F0A04B; }
.sd-6 { background: #7EC8F0; }
.sd-7 { background: #9B74FF; }
.sd-8 { background: #8E8AA8; }
.sd-9 { background: var(--fill-light); }
.hero-grid { gap: 32px; }
.hero-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* เลขเด่นวันนี้ */
.today-link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  background: linear-gradient(135deg, var(--surface-2), var(--surface));
  border: 1px solid var(--panel);
  border-radius: var(--radius-xl);
  color: var(--ink);
  text-decoration: none;
  transition: border-color var(--speed);
}
.today-link:hover { color: var(--ink); border-color: var(--line-2); }
.today-ring {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 66px;
  height: 66px;
  border: 1px solid var(--gold);
  border-radius: var(--radius-pill);
  box-shadow: 0 0 24px rgba(235, 184, 105, 0.35);
}
.today-ring-num { font-size: 2.25rem; font-weight: 500; line-height: 1; color: var(--gold-2); }
.today-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.today-eyebrow { font-size: var(--text-xs); letter-spacing: 2px; color: var(--muted-2); }
.today-title { margin-top: 2px; font-family: var(--font-display); font-weight: 500; font-size: var(--text-lg); line-height: 1.6; }
.today-lp { font-size: var(--text-sm); color: var(--muted); }
.today-link .icon-chevron { flex: none; color: #6B6294; }

/* การ์ดเช็คเร็ว (ค่าตามแบบ · tool.css โหลดทีหลังจึงใช้ 2 คลาส) */
.quick-card .quick-title { font-size: 1.5rem; line-height: 1.6; }
.quick-card .quick-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.quick-card .seg-tab { min-height: 44px; font-size: var(--text-md); }
.quick-card .field-label { font-size: var(--text-md); }
.quick-card legend.field-label { margin-bottom: 0; }
.quick-card .field-help { font-size: var(--text-sm); }
.quick-card .opt { font-size: inherit; color: var(--muted); }
.quick-birth { display: flex; flex-direction: column; gap: 16px; }
.quick-birth[hidden] { display: none; }
.quick-time { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: end; }
.quick-card .quick-time .input-time { max-width: none; }
.quick-card .check-label { min-height: 48px; gap: 10px; }
.quick-card .check-label input { margin: 3px 3px 3px 4px; }
.quick-goal[hidden] { display: none; }
.quick-card .pick-chip span { min-height: 44px; padding: 0 14px; }
.quick-card .quick-goal .chip-row { gap: 8px; flex-wrap: nowrap; }
.quick-card .btn-submit { font-size: 1.0625rem; }

/* เครื่องมือทั้งหมด */
.home-tools { padding-top: 52px; }
.home-tools .section-head-row .h2-plain { font-size: var(--text-2xl); line-height: 1.6; }
.home-tools .tool-blurb { display: inline; }
/* แบบใช้ content-box: สูงต่ำสุด 60 + ระยะใน 20 + เส้น 1 */
.home-tools .tool-item a { min-height: 81px; }
.home-tools .section-count { font-size: var(--text-base-s); letter-spacing: 1px; color: var(--muted-2); }
.home-tools .tool-groups { gap: 0; margin-top: 0; }
.home-tools .tool-group-head { margin-top: 22px; }
.home-tools .tool-num { font-size: var(--text-base-s); letter-spacing: 0; }
.home-tools .tool-item .icon-chevron { color: #6B6294; }
.color-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
  padding: 16px;
  background: radial-gradient(circle at 10% 0%, rgba(123, 92, 230, 0.16), var(--surface) 62%);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-glow);
  transition: border-color var(--speed);
}
.color-card:hover { border-color: var(--violet-edge); }
.color-card-main { display: flex; align-items: center; gap: 14px; min-height: 44px; color: var(--ink); text-decoration: none; }
.color-card-main:hover { color: var(--ink); }
.color-card-main .tool-text strong { font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.6; }
.color-card-main .tool-blurb { display: block; font-size: var(--text-md); line-height: 1.6; color: var(--ink-2); }
.color-card .icon-chevron { flex: none; color: #6B6294; }
.color-sw { flex: none; display: flex; }
.color-sw span { width: 26px; height: 26px; border-radius: var(--radius-pill); background: radial-gradient(circle at 38% 35%, rgba(255, 255, 255, 0.35), rgb(var(--tc)) 60%); box-shadow: 0 0 14px rgba(var(--tc), 0.4); }
.color-sw span + span { margin-left: -6px; }
.color-card-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.color-card-chips .chip-link { padding: 0 14px; background: var(--surface-2); border-color: var(--panel); }
@media (min-width: 768px) {
  .color-card { flex-direction: row; align-items: center; gap: 20px; padding: 16px 20px; }
  .color-card-main { flex: 1; min-width: 0; }
  .color-card-chips { flex: none; }
}

/* การ์ดปีนี้ */
.home-year { padding-top: 48px; }
.home-year .year-card { padding: 24px 20px; }
.home-year .year-card-main { margin: 10px 0 0; }
.home-year .year-card-name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; line-height: 1.35; color: var(--ink); }
.year-rel-head { margin: 18px 0 8px; font-size: var(--text-md); color: var(--ink-2); }
.year-rels { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.year-rel { padding: 8px 14px; border-radius: var(--radius-pill); background: var(--surface-2); border: 1px solid var(--panel); color: var(--ink-2); font-size: var(--text-md); line-height: 1.6; }
.year-rel.is-chong { padding: 6px 12px; border: 0; background: #35221E; color: #E8957E; }
.year-actions { display: flex; gap: 10px; margin-top: 18px; }
.year-actions .btn { flex: 1; min-height: 46px; height: 46px; padding: 0 8px; border-color: var(--line); font-size: var(--text-md); }
.home-year .btn, .proof .btn { font-weight: 400; }
/* แบบใช้ Noto Serif Thai กับปีและอักษรจีนของปี (ไม่ใช่ Cormorant / ฟอนต์จีนของ .han) */
.home-year .year-card-name .num { font-family: inherit; }
.home-year .year-ganzhi { font-family: var(--font-display); }
.year-actions .btn.is-gold { border-color: var(--gold); color: var(--gold-2); }

/* ทุกผลลัพธ์อธิบายได้ */
.home-year + .proof { padding-top: 56px; }
.proof-decor { top: 20px; }
.proof-decor-num { font-family: var(--font-num); font-variant-numeric: lining-nums; }
.proof .h2-display { font-size: var(--text-3xl); line-height: 1.25; }
.proof-list { margin-top: 22px; }
.proof-list .step-num { width: 42px; height: 42px; font-size: var(--text-lg); font-weight: 500; }
.proof-list + .btn { margin-top: 20px; min-height: 44px; padding: 0 18px; border-color: var(--line); }

/* หน้าแรก: ท้ายเว็บห่างปุ่มสุดท้าย 56px ตามแบบ */
main:has(> .proof) { padding-bottom: 0; }
/* แบบ: คำใน h1 และส่วนนำเลื่อนขึ้นเล็กน้อย (transform เท่านั้น ไม่เริ่มที่ opacity 0) · ปุ่มเริ่มเรืองเป็นจังหวะ */
@media (prefers-reduced-motion: no-preference) {
  @keyframes gap-rise { from { transform: translateY(10px); } }
  @keyframes gap-cta { 0%, 100% { box-shadow: 0 0 0 rgba(235, 184, 105, 0); } 50% { box-shadow: 0 0 30px rgba(235, 184, 105, 0.6); } }
  .hero-h1 .hw,
  .hero-eyebrow,
  .hero-lede,
  .hero-stats,
  .star-legend { animation: gap-rise 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .hero-cta { animation: gap-cta 2.8s ease-in-out 3.4s infinite; }
}

/* ท้ายเว็บ (แบบ): แถวโลโก้ + โดเมนชิดขวา · หมายเหตุ · ลิงก์ 2 คอลัมน์ (พื้นที่แตะคง 44px) · ลิขสิทธิ์ */
.site-foot { margin-top: 56px; padding: 28px 0 36px; }
.site-foot-inner { gap: 0; }
.brand-foot { display: flex; color: var(--ink); }
.brand-foot .brand-logo { width: 16px; height: 16px; }
.brand-foot .brand-name { font-size: var(--text-lg); font-weight: 600; }
.foot-domain { margin-left: auto; font-size: var(--text-md); letter-spacing: 1px; color: var(--ink); }
.foot-brand .muted { margin-top: 12px; }
.foot-navs { margin-top: 16px; gap: 14px 10px; }
.foot-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.foot-head { margin-bottom: 0; font-size: 0.6875rem; letter-spacing: 1.5px; color: var(--muted-2); }
.foot-links a { min-height: 44px; }
.foot-meta { margin-top: 18px; font-size: var(--text-xs); }
@media (min-width: 1024px) {
  .site-foot-inner { gap: 0 var(--sp-8); }
  .foot-navs { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
  .foot-col:last-child { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 10px; align-items: start; }
  .hero-side { position: sticky; top: var(--sp-6); margin-top: 96px; }
  .hero-side .quick-card { position: static; margin-top: 0; }
  .hero-h1 { max-width: 12em; font-size: 2.75rem; }
  .hero-lede { max-width: 26em; }
}

/* ---------- v0.16.0 หน้าความหมายและหน้ารวม (มติ K2 K6) ---------- */
.meaning-h1 { font-family: var(--font-display); font-size: clamp(1.5rem, 4.6vw, 2.25rem); line-height: 1.35; color: var(--ink-strong); }
.meaning-grade { margin-top: var(--sp-3); }
.grade-chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--ink);
  font-size: var(--text-md);
  font-weight: 500;
}
.grade-chip.grade-good { border-color: var(--gold-dim-2); background: var(--gold-dim); color: var(--gold-2); }
.grade-chip.grade-warn,
.grade-chip.grade-bad { border-color: var(--warn-edge); background: var(--warn-dim); color: var(--warn); }
.grade-chip.grade-mid { border-color: var(--pass-edge); background: var(--pass-dim); color: var(--pass); }
.meaning-body { padding-bottom: var(--sp-6); }
.meaning-block + .meaning-block { margin-top: var(--sp-5); }
.meaning-tags { margin-top: var(--sp-5); }
.meaning-tags .chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--ink-2);
  font-size: var(--text-md);
}
.meaning-cta { margin-top: var(--sp-5); }
.meaning-pager { margin-top: var(--sp-6); }
.pager-list { display: grid; gap: var(--sp-2); list-style: none; padding: 0; }
.pager-list a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--line-input);
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
}
.pager-list a:hover { border-color: var(--violet-ink); }
.pager-next { text-align: right; }
@media (min-width: 576px) {
  .pager-list { grid-template-columns: 1fr 1fr; }
  .pager-next:only-child { grid-column: 2; }
}
.meaning-foot { margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--panel); }
/* v0.20.0 ส่วน W (สรุป รายด้าน คำถาม) และส่วน D (ข้อมูลตามตำรา ตัวอย่าง วันเกิด เลขข้างเคียง) */
.meaning-summary,
.meaning-aspects,
.meaning-data,
.meaning-faq { margin-top: var(--sp-5); }
.meaning-h3 { margin: var(--sp-4) 0 var(--sp-2); font-size: var(--text-md); font-weight: 600; color: var(--ink-strong); }
/* v0.25.0 สารบัญหมวดของผลรวมเบอร์ (≥ 3 หมวด · ลิงก์ในหน้า aspect-<key>) */
/* .prose ul ตั้ง flex-direction: column ไว้ (บรรทัด 405) ต้องกลับเป็นแถวที่นี่ ชิปจึงเรียงแนวนอนแล้วขึ้นบรรทัดใหม่ · gap เท่า .chip-row ของ "ความหมายย่อ" */
.sum-toc { margin: var(--sp-3) 0 var(--sp-8); }
.prose .sum-toc-list { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--sp-3) var(--sp-2); margin: 0; padding: 0; list-style: none; } /* ช่องแถว 12px: พื้นที่แตะ 44px ของชิปสูง 35px ไม่ทับแถวถัดไป */
.prose .sum-toc-list li { margin: 0; }
.sum-toc-link { display: inline-block; padding: 6px 12px; border: 1px solid var(--panel); border-radius: var(--radius-pill);
  font-size: var(--text-sm); color: var(--ink); text-decoration: none; }
.sum-toc-link:hover { background: var(--surface-2); }
/* หัวรองของแต่ละหมวด: ใหญ่กว่าเนื้อ (16) เล็กกว่า h2 ใน .prose (22) · ระยะบนมากกว่าระยะล่าง */
.sum-aspect-h3 { margin: var(--sp-6) 0 var(--sp-2); font-size: var(--text-lg); line-height: 1.3; scroll-margin-top: var(--sp-6); }
.meaning-dl { display: grid; gap: var(--sp-2); margin: 0; }
.meaning-dl > div { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--panel); }
.meaning-dl dt { font-size: var(--text-sm); color: var(--muted); }
.meaning-dl dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
@media (min-width: 576px) {
  .meaning-dl > div { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--sp-3); }
}
.near-list { display: grid; gap: var(--sp-2); }
.near-item { display: flex; flex-direction: column; gap: 2px; padding: 10px 16px; border: 1px solid var(--line-input); border-radius: var(--radius); }
.near-item a { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); min-height: 32px; color: var(--ink); text-decoration: none; }
.near-item a:hover .near-name { text-decoration: underline; text-underline-offset: 3px; }
.prophecy-link { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* รายการในหน้าความหมายอยู่ใน .prose: ล้างระยะเยื้องและสัญลักษณ์รายการของ .prose ul */
.prose .meaning-tags .chip-row,
.prose .near-list,
.prose .pager-list { padding-left: 0; margin-left: 0; list-style: none; }
.prose .meaning-tags .chip-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.prose .meaning-tags .chip-row li,
.prose .pager-list li { margin: 0; padding: 0; }
.prose .near-list li { margin: 0; }
.prose .meaning-tags .chip-row li::before,
.prose .near-list li::before,
.prose .pager-list li::before { content: none; }
.prose .meaning-tags .chip-row { flex-direction: row; }
.prose .pager-list { display: grid; gap: var(--sp-2); }
.prose .meaning-tags .chip-row li.chip { padding: 0 14px; }

/* ---------- v0.27.0 หน้าปีชง + หน้าสีมงคล (pages/season.html) ---------- */
.season-facts .num-value { font-family: inherit; font-size: var(--text-lg); line-height: 1.5; }
.season-list-wrap { margin-top: var(--sp-4); }
.season-list { margin-top: var(--sp-2); padding-left: 0; list-style: none; }
.season-list li { padding: var(--sp-2) 0; border-top: 1px solid var(--panel); color: var(--ink-2); }
.season-list li strong { color: var(--ink-strong); font-weight: 500; }
.season-sep { color: var(--muted-2); }

/* === UI v3 รอบ 3: หน้าเนื้อหา === */
/* แบบ Article BirthMonday Colors PeeChong · เฉพาะหน้าเนื้อหา · ไม่มีแอนิเมชัน */
.section-lazy.lazy-sm { contain-intrinsic-size: auto 320px; }

.meaning-h1 { font-size: clamp(1.75rem, 7.6vw, 2.25rem); font-weight: 500; line-height: 1.25; max-width: 18em; }

.fact-card {
  padding: 18px;
  background: var(--surface-glass);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-glow);
}
.fact-card .num-box { padding: 14px 6px; }
.fact-card > p { margin-top: var(--sp-3); }

.doc-sec .h2-plain,
.doc-sec .h2-display { font-size: var(--text-2xl); line-height: 1.3; }
.prose h2 { font-size: 1.5rem; line-height: 1.3; }
.doc-sec .prose-block p,
.prose p { line-height: 1.75; }

.list-card {
  margin-top: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--panel);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.list-card .season-legend { margin: 0; padding: 10px 14px; font-size: var(--text-xs); letter-spacing: 1px; color: var(--muted-2); }
.list-card .season-list { margin-top: 0; }
.list-card .season-list li { padding: 12px 14px; }

.dl-card {
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--panel);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.dl-card > div { padding: 12px 16px; border-bottom: 0; border-top: 1px solid var(--panel); }
.dl-card > div:first-child { border-top: 0; }
.dl-card + .small { margin-top: var(--sp-3); }

.kal-card .letter-chip { min-width: 44px; padding: 8px 10px; font-size: 1.25rem; }

.day-chips .chip-link { padding: 0 14px; background: var(--surface-2); border-color: var(--panel); font-size: var(--text-md); }
.day-chips .chip-link:hover { border-color: var(--violet-ink); }
.day-chips .chip-link.is-current { background: var(--violet-dim); border-color: var(--violet-edge); }

.prose .meaning-summary {
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-md);
}
.prose .meaning-summary h2 { margin-top: 0; }
.meaning-lead .meaning-summary { margin-top: var(--sp-6); }

.meaning-tags .chip { background: var(--surface-2); border-color: var(--panel); }

.prose .cta-card {
  margin-top: var(--sp-8);
  padding: 20px 18px;
  background: radial-gradient(circle at 50% 0%, rgba(106, 79, 208, 0.35), var(--surface) 70%);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-xl);
}
.cta-card .btn { display: flex; width: 100%; min-height: 50px; }

.meaning-pager .near-item {
  padding: 12px 16px;
  background: var(--surface);
  border-color: var(--panel);
  border-radius: var(--radius-md);
  transition: border-color var(--speed);
}
.meaning-pager .near-item:hover { border-color: var(--line-2); }
.meaning-pager .near-item a { min-height: 44px; }
.meaning-pager .near-name { font-weight: 500; }

.prose .about-groups { padding-left: 0; list-style: none; gap: var(--sp-2); }
.about-groups li { padding: 12px 16px; background: var(--surface); border: 1px solid var(--panel); border-radius: var(--radius); }
.about-groups strong { display: block; margin-bottom: 2px; color: var(--ink-strong); font-weight: 500; }
.about-src-group { margin-top: var(--sp-5); font-size: var(--text-base); }

.not-found-code { font-family: var(--font-num); font-variant-numeric: lining-nums; font-size: 7.5rem; line-height: 0.95; }

/* --- รอบ 4 (CEO "เหมือนแบบ 100%"): หัวหน้า การ์ดเลือกวัน ตารางหลัก ปีชง FAQ เรื่องที่เกี่ยวข้อง ตามแบบ Colors PeeChong --- */
.page-head-c { overflow-x: clip; padding-top: var(--sp-6); }
.page-head-c .wrap,
.c-sec .wrap { padding-left: 20px; padding-right: 20px; }
.page-head-c .eyebrow { margin: 0; font-size: var(--text-xs); letter-spacing: 2px; color: var(--muted-2); }
.page-head-c .h1-c { margin-top: 10px; max-width: 270px; font-size: 2.125rem; line-height: 1.25; letter-spacing: 0; }
.page-head-c .lede { margin-top: 14px; max-width: 270px; font-size: var(--text-base-s); color: var(--ink-2); line-height: 1.6; }
.ph-chong .h1-c { max-width: 300px; }
.c-hero-art { position: absolute; pointer-events: none; }
.ph-blobs { left: 0; top: -100px; }
.ph-wheel { right: -96px; top: -44px; }
.wh-t { font-family: var(--font-display); font-size: 14px; fill: #9D90D6; }
.wh-t-rel { font-size: 15px; fill: #D9846E; }
.wh-t-self { font-size: 17px; fill: #E3C98D; }
.wh-c { font-family: var(--font-display); font-size: 26px; fill: #E3C98D; }
.wh-glow { opacity: 0.3; }
@media (min-width: 768px) {
  .ph-blobs { left: auto; right: 0; }
  .ph-wheel { right: 0; }
  .page-head-c .h1-c { max-width: 14em; font-size: 2.5rem; }
  .page-head-c .lede { max-width: 30em; }
}

.c-sec { padding-top: 44px; }
.c-sec-first { padding-top: var(--sp-6); }
.c-sec + .c-sec.section-lazy.lazy-sm { padding-top: var(--sp-12); }
.c-eyebrow { margin: 0; font-size: var(--text-xs); letter-spacing: 2px; color: var(--muted-2); }
.c-h2 { margin: 6px 0 0; font-size: 1.75rem; line-height: 1.3; }
.c-h2-sm { margin: 0 0 12px; font-size: 1.5rem; }
.c-h2-xs { margin: 0 0 12px; font-size: 1.375rem; }
.c-note { margin-top: 10px; font-size: var(--text-sm); color: var(--muted); }

/* การ์ดเรือง (rv-card): การ์ดเลือกวัน + การ์ดเช็คปีเกิด · ม่านและแสงกวาดเล่นเฉพาะหลังกด (rv-on) */
.rv-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 18px;
  background: var(--surface-glass);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-glow);
}
.chk-card { gap: 12px; box-shadow: 0 0 60px rgba(106, 79, 208, 0.2); }
.rv-veil { display: none; }
.c-emblem { display: block; flex: none; }
.pick-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.pick-date { font-size: var(--text-xs); color: var(--muted); white-space: nowrap; }
.pick-days { display: flex; flex-direction: column; gap: 6px; }
.pick-label { font-size: var(--text-md); color: var(--ink-2); }
.pick-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pick-day {
  min-height: 44px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  border: 1px solid var(--panel);
  color: var(--ink-2);
  font: inherit;
  font-size: var(--text-md);
  cursor: pointer;
  transition: border-color var(--speed), background-color var(--speed);
}
.pick-day:hover { border-color: var(--line-2); color: var(--ink); }
.pick-day[aria-pressed="true"] { background: var(--violet-dim); border-color: var(--violet-edge); color: var(--ink); font-weight: 700; }
.pick-panel { display: flex; flex-direction: column; gap: 14px; }
.pick-panel[hidden] { display: none; }
.pick-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pick-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 8px 12px;
  background: radial-gradient(circle at 50% 0%, rgba(var(--tc), 0.28), var(--surface) 75%);
  border: 1px solid rgba(var(--tc), 0.45);
  border-radius: var(--radius-md);
  text-align: center;
  color: var(--ink);
}
.pick-tile.is-avoid { border-style: dashed; }
.sw { flex: none; display: inline-block; width: 18px; height: 18px; border-radius: var(--radius-pill); background: rgb(var(--tc)); border: 1px solid rgba(255, 255, 255, 0.12); }
.sw-lg { display: block; width: 28px; height: 28px; margin: 0 auto 6px; border: 0; background: radial-gradient(circle at 38% 35%, rgba(255, 255, 255, 0.35), rgb(var(--tc)) 60%); box-shadow: 0 0 14px rgba(var(--tc), 0.35); }
.pick-tl { font-size: 0.6875rem; letter-spacing: 1px; color: var(--muted); }
.pick-tn { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); line-height: 1.4; color: rgb(var(--tt, var(--tc))); }
.pick-note { font-size: var(--text-sm); color: var(--muted); }
.c-dust { display: block; width: 100%; height: 12px; margin-top: -4px; }

/* โทนวงสีตามชื่อสี (การเลือกสีแสดงผล ไม่ใช่ข้อมูล) · --tc = สีวง · --tt = สีตัวอักษรเมื่อสีวงเข้มเกินอ่าน */
.swc, .pick-tile { --tc: 163, 155, 198; }
.tn-pink { --tc: 201, 138, 163; } .tn-rose, .tn-lotus-pink, .tn-rose-red { --tc: 199, 118, 140; }
.tn-green { --tc: 111, 175, 140; } .tn-light-green, .tn-light-leaf-green { --tc: 156, 199, 154; } .tn-emerald-green { --tc: 80, 170, 130; }
.tn-blue { --tc: 110, 134, 201; } .tn-sky-blue { --tc: 127, 179, 217; } .tn-sea-blue { --tc: 90, 150, 200; } .tn-indigo { --tc: 76, 90, 168; --tt: 160, 170, 230; }
.tn-yellow, .tn-deep-yellow, .tn-turmeric-yellow { --tc: 216, 190, 92; } .tn-light-yellow, .tn-lemon-yellow { --tc: 224, 208, 138; } .tn-creamy-yellow, .tn-pale-cream, .tn-cream { --tc: 217, 200, 144; } .tn-gold { --tc: 235, 184, 105; }
.tn-orange { --tc: 217, 146, 87; } .tn-vermilion, .tn-red-orange { --tc: 210, 112, 79; }
.tn-red, .tn-flame-red, .tn-brick-red, .tn-ruby, .tn-light-red { --tc: 201, 96, 90; --tt: 226, 140, 134; }
.tn-purple { --tc: 154, 123, 208; } .tn-dark-purple { --tc: 110, 80, 160; --tt: 180, 160, 225; }
.tn-white { --tc: 228, 226, 238; } .tn-light-gray { --tc: 190, 188, 200; } .tn-gray { --tc: 138, 135, 154; --tt: 186, 178, 214; } .tn-dark-gray { --tc: 90, 88, 100; --tt: 186, 178, 214; }
.tn-black, .tn-dull-black { --tc: 58, 54, 66; --tt: 186, 178, 214; }
.tn-qing { --tc: 72, 160, 160; } .tn-li-huang { --tc: 122, 104, 58; --tt: 206, 186, 130; }
.tn-brown, .tn-cocoa { --tc: 154, 114, 84; --tt: 206, 170, 140; } .tn-dark-brown, .tn-burnt-brown { --tc: 110, 80, 60; --tt: 206, 170, 140; }

/* ตารางการ์ด (ตารางหลักสี · ตาราง 8 รอบ) */
.ctbl { margin-top: var(--sp-4); background: var(--surface); border: 1px solid var(--panel); border-radius: var(--radius-lg); overflow: hidden; }
.ctbl-head { display: grid; gap: 8px; padding: 10px 14px; font-size: 0.6875rem; letter-spacing: 1px; color: var(--muted-2); }
.ctbl-rows { list-style: none; margin: 0; padding: 0; }
.ctbl-row { display: grid; gap: 8px; align-items: center; padding: 12px 14px; border-top: 1px solid var(--panel); }
.shirt-tbl .ctbl-head,
.shirt-tbl .ctbl-row { grid-template-columns: 96px minmax(0, 1fr) 70px; }
.ct-day { display: flex; flex-direction: column; }
.ct-name { color: var(--ink); font-weight: 500; text-decoration: none; }
.ct-name:hover { color: var(--violet-soft); text-decoration: underline; }
.ct-sub { font-size: var(--text-xs); color: var(--muted); }
.ct-sw { display: flex; flex-wrap: wrap; gap: 8px; }
.swc { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); }
.ct-none { font-size: var(--text-sm); color: var(--muted); }

/* ปีชง: การ์ดเช็คปีเกิด ความสัมพันธ์ ประเพณี ตาราง */
.chk-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.chk-input {
  width: 100%;
  height: 54px;
  padding: 0 16px;
  background: var(--ground);
  color: var(--ink);
  border: 1px solid var(--line-input);
  border-radius: var(--radius);
  font-family: var(--font-num);
  font-size: 1.5rem;
  letter-spacing: 2px;
}
.chk-btn {
  height: 54px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--gold);
  color: var(--on-gold);
  font: inherit;
  font-size: var(--text-base-s);
  font-weight: 700;
  cursor: pointer;
}
.chk-btn:hover { background: var(--gold-hover); }
.chk-res { display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 14px; background: var(--ground); border: 1px solid var(--panel); border-radius: var(--radius); }
.chk-han { flex: none; font-family: var(--font-display); font-size: 2.125rem; line-height: 1.2; color: var(--violet-soft); }
.chk-txt { display: flex; flex-direction: column; }
.chk-year { font-weight: 500; }
.chk-rel { font-size: var(--text-sm); color: #6FBFB2; }
.chk-rel.is-chong { color: #E89A84; }
.chk-rel.is-rel, .chk-rel.is-self { color: var(--violet-ink); }
.chk-note { font-size: var(--text-sm); color: var(--muted); }
.chk-note a { color: var(--muted); }
.rel-cards { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rel-card { display: flex; align-items: center; gap: 14px; padding: 14px; background: var(--surface); border: 1px solid var(--panel); border-radius: var(--radius-md); }
.rel-card.is-chong { background: #33211D; border-color: #4A2E28; }
.rel-han { flex: none; min-width: 30px; font-family: var(--font-display); font-size: 1.875rem; line-height: 1.6; color: var(--violet-ink); }
.rel-card.is-chong .rel-han { color: #D9846E; }
.rel-card.is-self .rel-han { color: #E3C98D; }
.rel-txt { display: flex; flex-direction: column; }
.rel-txt strong { font-weight: 500; }
.rel-txt span { font-size: var(--text-sm); color: var(--ink-2); }
.fix-card { padding: 20px 18px; background: var(--surface); border: 1px solid var(--panel); border-radius: var(--radius-xl); }
.fix-list { list-style: none; counter-reset: fix; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: var(--text-md); color: var(--ink-2); }
.fix-list li { counter-increment: fix; position: relative; min-height: 32px; padding-left: 44px; }
.fix-list li::before {
  content: counter(fix);
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid #E0B56A;
  border-radius: var(--radius-pill);
  color: #E3C98D;
  font-family: var(--font-num);
  font-size: var(--text-base);
}
.fix-list strong { font-weight: 500; color: var(--ink); }
.fix-note { margin-top: 14px; font-size: var(--text-xs); color: var(--muted); }
.yr-tbl .ctbl-head,
.yr-tbl .ctbl-row { grid-template-columns: 70px minmax(0, 1fr) 90px; gap: 0; }
.yr-tbl .ctbl-row { padding: 10px 14px; }
.yr-tbl .ctbl-head span:last-child,
.yr-rel { text-align: right; }
.yr-be { font-family: var(--font-num); font-size: var(--text-lg); line-height: 1.6; }
.yr-rel { color: var(--muted); }
.yr-tbl .is-rel .yr-rel,
.yr-tbl .is-self .yr-rel { color: var(--violet-ink); }
.yr-tbl .ctbl-row.is-chong { background: #33211D; }
.yr-tbl .is-chong .yr-rel { color: #E89A84; }
.yr-more { border-top: 1px solid var(--panel); }
.yr-more > summary { display: flex; align-items: center; justify-content: center; min-height: 48px; color: var(--violet-ink); font-size: var(--text-md); cursor: pointer; list-style: none; }
.yr-more > summary::-webkit-details-marker { display: none; }
.yr-more > summary:hover { color: var(--violet-soft); }
.yr-more[open] > summary { border-bottom: 0; }

/* FAQ และ เรื่องที่เกี่ยวข้อง ของหน้าเนื้อหา */
.c-faq .faq-item summary { padding: 0; }
.c-faq .faq-item summary::after { font-family: var(--font-body); font-size: var(--text-base); color: var(--violet-ink); }
.c-faq .faq-item p { margin: 0; padding: 0 0 14px; font-size: var(--text-md); }
.c-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.c-link,
.c-links .related-card {
  display: flex;
  align-items: center;
  min-height: 52px;
  height: 100%;
  padding: 8px 16px;
  background: var(--surface);
  border: 1px solid var(--panel);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: var(--text-base-s);
  line-height: 1.4;
  text-decoration: none;
  transition: border-color var(--speed);
}
.c-link:hover { border-color: var(--violet-ink); color: var(--ink); }
.c-links .related-card .icon-chevron { display: none; }
@media (min-width: 1024px) {
  .c-links { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: no-preference) {
  .rv-card.rv-on { animation: c-glow 2.2s ease-out both; }
  .rv-card.rv-on > .rv-veil {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #120E26;
    border-radius: inherit;
    animation: c-veil 1.1s ease both;
    pointer-events: none;
  }
  .rv-on > .rv-veil .c-emblem { animation: c-spin 1.8s linear infinite; }
  .rv-veil-t { font-family: var(--font-display); font-size: 1.0625rem; color: var(--ink); }
  .rv-veil-s { font-size: var(--text-xs); letter-spacing: 1px; color: var(--muted); }
  .rv-on .dot { animation: c-dots 1s infinite; }
  .rv-on .dot:nth-child(2) { animation-delay: 0.2s; }
  .rv-on .dot:nth-child(3) { animation-delay: 0.4s; }
  .rv-on .pick-panel:not([hidden]) .pick-tile { animation: c-flip 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.8s both; }
  .rv-on .pick-panel:not([hidden]) .pick-tile:nth-child(2) { animation-delay: 0.95s; }
  .rv-on .pick-panel:not([hidden]) .pick-tile:nth-child(3) { animation-delay: 1.1s; }
  .rv-on .chk-res { animation: c-up 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.8s both; }
  .ph-wheel .wh-spin { transform-origin: 150px 150px; animation: c-spin 90s linear infinite; }
  @keyframes c-veil { 0%, 70% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
  @keyframes c-spin { to { transform: rotate(360deg); } }
  @keyframes c-dots { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } }
  @keyframes c-flip { from { transform: perspective(600px) rotateY(90deg); } to { transform: none; } }
  @keyframes c-up { from { transform: translateY(12px); } to { transform: none; } }
  @keyframes c-glow { 0% { box-shadow: 0 0 0 rgba(124, 92, 255, 0); } 35% { box-shadow: 0 0 90px rgba(124, 92, 255, 0.55), 0 0 0 1px rgba(217, 192, 138, 0.7); } 100% { box-shadow: var(--shadow-glow); } }
}

/* --- รอบ 4 ส่วน B: หน้าย่อยวันเกิดตามแบบ BirthMonday --- */
.ph-day { padding-top: 28px; }
.ph-day .h1-c { max-width: 220px; font-size: 2.25rem; line-height: 1.2; }
.ph-day .lede { max-width: 250px; }
.ph-orb { right: -10px; top: -14px; }
.ph-orb .o1 { stop-color: #F1EAD2; } .ph-orb .o2 { stop-color: #D9C7A0; } .ph-orb .o3 { stop-color: #A89878; }
.ph-orb .orb-crater { fill: #A89878; }
.orb-sun .o1 { stop-color: #FFE3B0; } .orb-sun .o2 { stop-color: #EBB869; } .orb-sun .o3 { stop-color: #C77A3A; } .orb-sun .orb-crater { opacity: 0; }
.orb-tue .o1 { stop-color: #F4D3DC; } .orb-tue .o2 { stop-color: #D99AAE; } .orb-tue .o3 { stop-color: #A86A80; }
.orb-wed .o1 { stop-color: #D6EEDD; } .orb-wed .o2 { stop-color: #8FC6A2; } .orb-wed .o3 { stop-color: #5E9474; }
.orb-rahu .o1 { stop-color: #CFCBD8; } .orb-rahu .o2 { stop-color: #8E8A9C; } .orb-rahu .o3 { stop-color: #5A5668; }
.orb-thu .o1 { stop-color: #F8DCC0; } .orb-thu .o2 { stop-color: #E0A26A; } .orb-thu .o3 { stop-color: #AE7240; }
.orb-fri .o1 { stop-color: #D3E0F6; } .orb-fri .o2 { stop-color: #8EA6D9; } .orb-fri .o3 { stop-color: #5E74A8; }
.orb-sat .o1 { stop-color: #E2D6F4; } .orb-sat .o2 { stop-color: #A890D6; } .orb-sat .o3 { stop-color: #7460A6; }
.orb-n { font-family: var(--font-num); font-weight: 500; font-size: 15px; }
.orb-n-star { fill: #E3C98D; }
.orb-n-kal { font-size: 14px; fill: #D9846E; }
@media (min-width: 768px) {
  .ph-orb { right: 0; }
  .ph-day .h1-c { max-width: 14em; font-size: 2.5rem; }
  .ph-day .lede { max-width: 30em; }
}
.c-sec-day { padding-top: 28px; }
.day-card { padding: 18px; }
.day-card .day-facts { margin-bottom: 0; }
.day-card .num-box { padding: 14px 6px; background: var(--ground); border: 1px solid var(--panel); border-radius: var(--radius-md); }
.day-card .num-label { font-size: var(--text-xs); letter-spacing: 1px; color: var(--muted-2); line-height: 1.4; }
.day-card .num-value { font-size: 2.25rem; line-height: 1.2; color: var(--violet-soft); white-space: nowrap; }
.day-card .num-box.tone-warn .num-value { color: #D9846E; }
.day-card .num-box.tone-gold .num-value { color: #E3C98D; }
.c-para { margin: 8px 0 14px; font-size: var(--text-base-s); color: var(--ink-2); }
.kal-chips { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 66px); gap: 8px; }
.kal-chip { min-width: 44px; min-height: 50px; padding: 8px 4px; border-radius: 10px; background: #33211D; border: 1px solid #4A2E28; color: #D9846E; text-align: center; font-family: var(--font-display); font-size: 1.25rem; line-height: 1.6; }
.c-h2-tbl { margin-bottom: 14px; }
.c-h2-tbl + .ctbl { margin-top: 0; }
.bh-tbl .ctbl-head,
.bh-tbl .ctbl-row { grid-template-columns: 100px minmax(0, 1fr); gap: 0; padding: 12px 16px; }
.bh-tbl .ctbl-head { font-size: var(--text-xs); }
.bh-letters { font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.6; letter-spacing: 1px; word-spacing: 3px; }
.bh-tbl .is-good { background: #14302D; }
.bh-tbl .is-good .bh-name { color: #6FBFB2; font-weight: 500; }
.bh-tbl .is-kal { background: #33211D; }
.bh-tbl .is-kal .bh-name { color: #D9846E; font-weight: 500; }
.go-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 20px;
  border: 1px solid var(--panel);
  border-radius: var(--radius-xl);
  background: radial-gradient(circle at 50% 0%, rgba(106, 79, 208, 0.35), var(--surface) 70%);
}
.go-h { margin: 0; font-size: 1.625rem; text-align: center; }
.go-card .go-main { min-height: 52px; font-weight: 700; }
.go-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.go-two .btn { min-height: 48px; padding: 0 12px; border-color: var(--line); font-weight: 400; }
.c-h2-light { font-weight: 400; }
.c-sec .day-chips .chip-link { min-height: 44px; padding: 0 14px; background: var(--surface-2); border-color: var(--panel); color: var(--ink); font-size: var(--text-md); }
.c-sec .day-chips .chip-link.is-current { background: var(--violet-dim); border-color: var(--violet-edge); }
.c-sec-src { padding-top: 36px; }
.src-box { padding: 14px 16px; border: 1px solid var(--panel); border-radius: var(--radius); font-size: var(--text-sm); color: var(--muted); }
.src-box strong { color: var(--ink); font-weight: 500; }

/* ส่วน C D ย้ายไป web/static/css/content.css (โหลดเฉพาะหน้าเนื้อหา) */
/* --- จบรอบ 4 ส่วน A --- */

/* === UI v3 แก้ตามรีวิว: พื้นที่แตะ ≥ 44px บนมือถือ === */
/* ขยายด้วย ::after โปร่งใสกึ่งกลางตัว (อย่างน้อย 44×44) · รูปลักษณ์ ระยะ และกรอบโฟกัสเท่าเดิม · ลิงก์ในย่อหน้าข้อความไม่อยู่ในรายการนี้ */
.crumbs a,
.eyebrow a,
.season-list a,
.prose-block > p.small > a,
.sum-toc-link,
label.field-label { position: relative; }
/* พื้นที่แตะของเส้นทางนำทางยื่นลงเหนือขอบบนของ main (z-index 1 มาทีหลัง) จึงยก .crumbs ขึ้นหนึ่งชั้น · ไม่มีส่วนอื่นซ้อนบริเวณนี้ */
.crumbs { z-index: 2; }
.crumbs a::after,
.eyebrow a::after,
.season-list a::after,
.prose-block > p.small > a::after,
.sum-toc-link::after,
label.field-label::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 44px);
  height: max(100%, 44px);
  transform: translate(-50%, -50%);
}

/* ---------- แถบแชร์ (CEO 2026-10-31: อยู่ในกล่องผลเครื่องมือ + ต่อจากส่วนสรุปหัวหน้าของหน้าความหมาย) · ปุ่มภาษาภาพเดียวกับปุ่มรอง .v3c00e9 ---------- */
.share-bar { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(58, 50, 99, 0.7); }
.share-bar[hidden] { display: none; }
.share-head { margin: 0 0 8px; font-size: 0.8125rem; font-weight: 600; color: #9D97B6; }
.share-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.share-btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 48px; padding: 0 10px; border: 1px solid #3A3263; border-radius: 999px; background: transparent; color: #CFCAE0; font: inherit; font-size: 0.9375rem; line-height: 1.2; text-decoration: none; cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease; }
.share-btn[hidden] { display: none; }
#share-native { grid-column: 1 / -1; }
.share-btn:hover { border-color: #6A4FD0; background: rgba(106, 79, 208, 0.12); color: #E3DDF2; }
.share-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.share-icon { flex: none; color: #CFCAE0; }
.share-link { display: block; width: 100%; min-height: 44px; margin-top: 8px; padding: 0 12px; border: 1px solid #3A3263; border-radius: 12px; background: transparent; color: #CFCAE0; font: inherit; font-size: 0.875rem; }
.share-link[hidden] { display: none; }
.share-clip { position: fixed; top: 0; left: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; font-size: 1rem; }
.share-status { margin: 8px 0 0; min-height: 1.4em; font-size: 0.8125rem; color: var(--pass); }
.share-status:empty { min-height: 0; margin: 0; }
.share-preview { margin: 8px 0 0; font-size: 0.75rem; line-height: 1.5; color: #9D97B6; overflow-wrap: anywhere; }
.share-label::after { content: ":"; }
.share-text { color: #CFCAE0; }
.share-note { margin: 2px 0 0; font-size: 0.75rem; color: #9D97B6; }
.no-js .share-copy, .no-js #share-native { display: none; }
.share-mount { box-sizing: border-box; width: 100%; max-width: 600px; min-height: 136px; margin: 16px auto 0; padding: 0 16px; }
.no-js .share-mount { display: none; }
.share-bar[data-share-page] { margin: 0; padding: 0; border-top: 0; }
.share-bar[data-share-page] #share-native { display: none; }
@media (min-width: 560px) {
  .share-btns { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .share-mount { min-height: 80px; }
}

/* ---------- ปุ่มกลับขึ้นบน: อยู่ใน HTML ตั้งแต่โหลด ซ่อนด้วยคลาส (main.js สลับ is-on เมื่อเลื่อนเกิน 600px) · แถบแจ้งเตือนเปิดอยู่ = ยกเหนือแถบด้วย --notice-h ที่ main.js วัดอยู่แล้ว ---------- */
.rv-card .share-bar { position: relative; z-index: 1; }
.to-top { position: fixed; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 2; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0; border: 1px solid #3A3263; border-radius: 999px; background: #15112A; color: #CFCAE0; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease, bottom 0.2s ease, border-color 0.15s ease; }
.to-top.is-on { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { border-color: #6A4FD0; color: #E3DDF2; }
.to-top:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
html.has-notice .to-top { bottom: calc(var(--notice-h, 140px) + 12px); }
.main:focus { outline: 0; }
.no-js .to-top { display: none; }
@media (min-width: 1024px) {
  .to-top { right: 24px; bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .to-top { transition: none; }
}