/* ==========================================================================
   theme.css — Nimitr Tarot shared design tokens
   ใช้ร่วมกันระหว่าง index.html / room.html / library.html
   ========================================================================== */

/* ฟ้อนต์หลักของทั้งเว็บ: Anuphan รองรับภาษาไทย+อังกฤษครบถ้วน */
@import url('https://fonts.googleapis.com/css2?family=Anuphan:wght@100..700&display=swap');

/* ===== TOKENS ===== */
:root {
  --bg:        #0d0820;
  --surface:   #1a1245;
  --mid:       #2d1f6e;
  --gold:      #c9a55f;
  --gold-lt:   #e8d5a3;
  --page-top-gap: 130px; /* v49: ระยะห่างจาก nav (fixed) ถึงคอนเทนต์ — ตั้งค่าที่เดียวตรงนี้ ใช้ร่วมกันได้ทุกหน้า */
  --gold-dim:  rgba(201,165,95,0.18);
  --violet:    #927CB4;
  --white:     #f5f3ff;
  --text-muted:#9d92c8;
  --card-w:    88px;
  --card-h:    154px;

  /* v186: ชุดสีมาตรฐานเนื้อหา/ลิงก์ทั้งเว็บ — ตัวหลักที่ยังไม่มีคลาสเฉพาะกำกับจะใช้ชุดนี้ */
  --color-text-body: #ded7ff;
  --color-heading: #ffd700;
  --color-link: #a78bfa;
  --color-link-active: #ffb703;
  --color-link-visited: #c9a55f; /* v52: เปลี่ยนจากชมพู (#f472b6) เป็นสีทอง ให้เข้ากับธีมเว็บ ไม่ใช่สีแปลกแยก */

  /* ===== ขนาด/รูปทรงไพ่ "จุดเดียว" ของทั้งระบบ =====
     ปรับ --card-ratio ตัวเดียว ทุกหน้า (index/room/library) จะตามอัตโนมัติ
     ไฟล์ภาพต้นฉบับแนะนำ: 455×780px (ตรงสัดส่วน 7:12 พอดี ไม่ต้อง crop) */
  --card-ratio: 7 / 12;
  --card-radius: 12px;

  /* category accent colours (ตรงกับ index.html CATEGORIES) */
  --c-daily:    #7b6bb5;
  --c-monthly:  #6b7bb5;
  --c-love:     #b56b8a;
  --c-fellows:  #7bb56b;
  --c-study:    #6bb5a5;
  --c-career:   #b5956b;
  --c-money:    #c9a55f;
  --c-health:   #6ba8b5;
  --c-luck:     #a56bb5;
  --c-yesno:    #b5846b;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

html { background: var(--bg); } /* base color ให้ bg-photo-layer transparent ผ่าน */

/* v74: ย้าย overflow-x:hidden จาก body มาไว้ที่ html แทน — เดิมตั้งไว้ที่ body ทำให้ browser
   บังคับ overflow-y ของ body กลายเป็น auto ไปด้วย (ตาม spec: แกนนึง non-visible บังคับอีกแกนด้วย)
   body เลยกลายเป็น scroll container ของตัวเอง ซึ่งเป็นสาเหตุคลาสสิกที่ทำให้ position:fixed
   (เช่น #music-player) เพี้ยนบนมือถือ — เลื่อนตามเนื้อหาแทนที่จะลอยนิ่งกับจอจริง */
html { overflow-x: hidden; }

/* v101: เพิ่ม overflow-y:auto ให้ html ตรงๆ ด้วย — ตัวเดียวกับที่ room_mobile.html เคยแก้ไว้เอง
   ในหน้านั้นแล้วได้ผลจริง (ดูคอมเมนต์ v81 ในไฟล์นั้น) แต่ตอนนั้นแก้แค่หน้าเดียว ไม่เคยเอามาใส่ที่
   theme.css (ไฟล์กลางที่ทุกหน้าใช้ร่วมกัน) เลย ทำให้หน้าอื่น (index.php ฯลฯ) ไม่ได้รับการแก้นี้ไปด้วย
   music player เลยยังหาย/ขยับตอน address bar หุบ-โผล่อยู่เฉพาะหน้าที่ไม่มีการแก้เฉพาะจุดแบบ room_mobile
   ใส่ตรงนี้ทีเดียว ครอบคลุมทุกหน้า — ไม่กระทบ room_mobile.html เพราะมันประกาศค่าเดียวกันซ้ำอยู่แล้ว
   (ไม่ใช่ conflict แค่ซ้ำกันเฉยๆ ไม่มีผลข้างเคียง) */
html { overflow-y: auto; }
body { overflow-y: visible; }   /* ย้ำให้ชัดว่า body "ไม่ใช่" scroll container ของตัวเอง — html เป็นตัวเดียวที่ scroll */

/* v87: ล็อกให้เลื่อนได้แค่แนวตั้ง (บน-ล่าง) เท่านั้น กันเนื้อหาโดนลากซ้าย-ขวาโดยไม่ตั้งใจ
   (เช่น ตอนลากนิ้วบนการ์ด Daily Good Power เพื่อ tilt — pan-y บอกเบราว์เซอร์ว่า gesture แนวนอน
   ไม่ใช่การเลื่อนหน้า ให้ element ที่ต้องการ handle เอง เช่น handleParallax ใน index.php) */
html, body { touch-action: pan-y; }

body {
  background: transparent;      /* เดิม var(--bg) ทำให้ bg-photo-layer โดนบัง */
  color: var(--color-text-body); /* v186: เดิม var(--white) — เปลี่ยนเป็นสีเนื้อหามาตรฐานที่กำหนดใหม่ */
  font-family: "Anuphan", sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
}

/* v67: reset ฟอนต์ของ form element ทั้งหมดให้รับจากหน้าเว็บ — browser ใส่ font ระบบให้ button/input/select/textarea
   โดยดีฟอลต์เสมอ ไม่รับ font-family จาก body อัตโนมัติเหมือน div/p ทั่วไป (เจอบั๊กนี้จากปุ่มคำถาม FAQ ใน article.php
   ฟอนต์ไม่ตรงกับคำตอบ) แก้ที่นี่ทีเดียวกันบั๊กเดียวกันเกิดซ้ำที่ปุ่มอื่นทั่วเว็บที่ยังไม่เจอ */
button, input, select, textarea {
  font-family: inherit;
}

/* v73: ปุ่มสไตล์กลาง (เดิมมีแค่ใน index.php ชื่อ .dgp-cta) — ย้ายมาไว้ที่นี่ให้ทุกหน้าใช้ร่วมกันได้
   เริ่มใช้กับปุ่มหลักของ index/room/room_mobile/dashboard ก่อนตามที่ขอ */
/* v110: รวมปุ่ม CTA ทั้งเว็บให้ใช้สีเดียวกันหมด ตามที่ขอ — เดิมมี 3 ระบบแยกกัน
   (.dgp-cta สีกลับ [ตัวหนังสือเข้มบนพื้นทองสว่าง], .article-cta__btn เฉพาะ article.php,
   .dash-btn เฉพาะ dashboard.html) หน้าตาไม่ตรงกันเลยทั้งเว็บ ตอนนี้รวมเหลือ .dgp-cta ตัวเดียว
   ทุกหน้าเรียกใช้ผ่าน class นี้ร่วมกัน (ดู article.php/dashboard.html ที่แก้ตามไปด้วย)

   สีอ้างอิงจาก .article-cta__btn เดิม (ขาวบนทอง) ใช้ #C9A55F ตามที่ยืนยันจะใช้เฉดนี้ — หมายเหตุ:
   ขาวบน #C9A55F ให้ contrast แค่ 2.33:1 (สอบตก WCAG AA ที่ต้องการ 4.5:1 ขั้นต่ำ) เคยเสนอ #7A5F30
   (5.99:1 ผ่านสบายๆ) แทนไปแล้วรอบก่อน แต่ยืนยันกลับมาใช้ #C9A55F ตามที่ต้องการเจาะจง

   ไม่มี hover/active ตามที่ขอ — สีเดียวนิ่งตลอด ไม่มี transform/box-shadow เปลี่ยนตอนโฮเวอร์ */
.dgp-cta {
  font-family: "Anuphan", sans-serif;
  font-size: 14px;
  letter-spacing: 1.5px;
  color: #ffffff;
  background: #C9A55F;
  border: none;
  border-radius: 999px;
  padding: 14px 44px;
  cursor: pointer;
  font-weight: 700;
  display: inline-block;
  text-decoration: none;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s; /* v123: เพิ่มกลับมา — รองรับ hover แสงด้านล่าง */
}
.dgp-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(201,165,95,0.35), 0 0 28px rgba(201,165,95,0.22), inset 0 1px 0 rgba(255,255,255,0.12);
} /* v123: เอาสไตล์ hover แสงเดียวกับ .content-card/.ad-affiliate-banner กลับมาใส่ตามที่ขอ */
.dgp-cta:visited { color: #ffffff; }   /* กัน browser default เปลี่ยนสีลิงก์ที่เคยกดแล้ว */
.dgp-cta:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
  transform: none; /* v123: ปุ่มที่กดไม่ได้ต้องไม่มี hover-glow ด้วย ถึงจะสื่อว่า "กดไม่ได้" ชัดเจน */
  /* ยังคงต้องมี state นี้ไว้ — เป็นสัญญาณ "กดไม่ได้ตอนนี้" เชิงฟังก์ชัน ต่างจาก hover ที่เป็นแค่ตกแต่ง
     แต่ทำให้เรียบง่ายที่สุด (แค่จาง ไม่มี transform/shadow เปลี่ยน) ตามหลัก "ไม่มี state แปลกๆ" ที่ขอ */
}
.dgp-cta--sm { padding: 10px 24px; font-size: 12.5px; } /* ขนาดเล็กลง สำหรับปุ่มรองที่ไม่ใช่ CTA หลักของหน้า */

/* v___: ปุ่มรอง (outline) — พื้นโปร่งใส ขอบทอง ใช้คู่กับ .dgp-cta--sm สำหรับลิงก์รองๆ
   เช่น "ดูรายละเอียดไพ่" ใต้ Daily Good Power ที่ต้องดูเป็นปุ่มแต่ไม่แย่งซีนปุ่มหลัก (.dgp-cta เปล่าๆ)
   v110: ตัดนี้ยังเก็บไว้เป็น "ปุ่มรอง" แยกจากปุ่มหลักโดยตั้งใจ (ลำดับความสำคัญภาพต่างกัน)
   แต่ตัด hover ออกตามที่ขอเรื่อง "ไม่มี state" ด้วยเหมือนกัน */
.dgp-cta--outline {
  color: var(--gold-lt);
  background: transparent;
  border: 1px solid rgba(201,165,95,0.35);
  box-shadow: none;
  font-weight: 500;
}

/* v186: สีหัวข้อ/ลิงก์มาตรฐานทั้งเว็บ — เป็น baseline เท่านั้น ถ้า element ไหนมี class เฉพาะกำหนดสีไว้แล้ว
   (เช่น .article-title, .lib-modal-th) จะ specificity สูงกว่า ชนะกฎนี้อัตโนมัติ ไม่ทับของเดิมที่จูนไว้แล้ว */
h1, h2, h3, h4, h5, h6 {
  color: var(--color-heading);
  font-size: clamp(18px, 2vw, 28px);
}
a {
  color: var(--color-link);
  font-size: max(14px, 1em);
  text-decoration: none; /* v52: เอาขีดเส้นใต้ default ออก — ไม่เข้ากับดีไซน์ปุ่ม/ลิงก์ทรงกลมของเว็บนี้ */
}
a:visited { color: var(--color-link-visited); }
a:active { color: var(--color-link-active); }

/* ===== BG HOURLY COLOR TOKENS (ค่า default — JS จะ override ทุก 1 ชม.) ===== */
:root {
  --bg-c1: rgba(45,31,110,0.55);   /* สีหลักวง 1 */
  --bg-c2: rgba(123,107,181,0.2);  /* สีหลักวง 2 */
  --bg-c3: rgba(201,165,95,0.07);  /* accent */
}

/* ===== BG PHOTO LAYERS (ภาพพื้นหลังตามกลุ่มชั่วโมง — สลับ crossfade โดย components.js) ===== */
.bg-photo-layer {
  position: fixed;
  /* v75: เดิมใช้ inset:0 -> บนมือถือ fixed จะอิง "visual viewport" ซึ่งความสูงเปลี่ยน
     ทุกครั้งที่ address bar ย่อ/ขยายระหว่างสกอลล์ -> background-size:cover คำนวณสเกลใหม่
     -> ภาพพื้นหลังขยาย/หดให้เห็น (fullscreen ไม่มี address bar เลยไม่เป็น)
     แก้: ใช้ lvh (large viewport height) = ความสูงตอน browser UI หุบ ซึ่ง "คงที่เสมอ" */
  top: 0; left: 0;
  width: 100%;   /* v___: เดิม 100vw — vw คำนวณจาก layout viewport ซึ่งรวมความกว้าง scrollbar
                    ในบางเบราว์เซอร์/บางอุปกรณ์ ทำให้ element นี้กว้างเกิน viewport จริงเล็กน้อย
                    (ต่างจาก 100% ที่อิงจาก containing block ตรงๆ ไม่รวม scrollbar) เป็นสาเหตุที่ทำให้
                    document กว้างเกิน viewport จริง แม้จะมี overflow-x:hidden ที่ html ก็ตาม เพราะ
                    fixed element ที่กว้างเกินสามารถถูกลาก/ปัดแนวนอนผ่าน touch gesture ได้ในบางเบราว์เซอร์
                    ก่อนที่ overflow-x:hidden จะ clip ทัน */
  height: 100vh;   /* fallback เบราว์เซอร์เก่าที่ยังไม่รู้จัก lvh */
  height: 100lvh;
  z-index: -1;
  pointer-events: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 2.4s ease;
}
.bg-photo-layer.is-active { opacity: 1; }

/* ===== STARS BG / สี tint ตามชั่วโมง (ลอยอยู่เหนือภาพ) ===== */
body::before {
  content: '';
  position: fixed;
  /* v75: เหตุผลเดียวกับ .bg-photo-layer — gradient ที่วางตำแหน่งด้วย % จะเลื่อนตามความสูง viewport */
  top: 0; left: 0;
  width: 100%;   /* เดิม 100vw — ดูเหตุผลเดียวกับ .bg-photo-layer ด้านบน */
  height: 100vh;
  height: 100lvh;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, var(--bg-c1) 0%, transparent 70%),
    radial-gradient(ellipse 40% 30% at 80% 20%, var(--bg-c2) 0%, transparent 60%),
    radial-gradient(ellipse 30% 20% at 10% 60%, var(--bg-c3) 0%, transparent 50%);
  transition: background 2s ease;
}

/* ===== STARFIELD CANVAS — inject โดย components.js (~300 ดวง กระพริบ rAF) ===== */
#star-canvas {
  position: fixed;
  top: 0; left: 0;
  /* v75: height:100% ของ fixed = visual viewport บนมือถือ -> เปลี่ยนตาม address bar */
  width: 100%;   /* เดิม 100vw — ดูเหตุผลเดียวกับ .bg-photo-layer ด้านบน */
  height: 100vh;
  height: 100lvh;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: screen; /* ดำ = transparent, ดาวสว่างผสมกับ bg-photo */
}

/* ===== SHOOTING STARS (pure CSS, สุ่มจังหวะแบบ "ห่าง" ~10-20 วิ ด้วย duration ที่ไม่ลงตัวกัน) =====
   ใช้ html::before / html::after เพราะ body::before/::after ถูกใช้ไปแล้ว (กันชนกับ backdrop-filter ของ nav) */
html::before,
html::after {
  content: '';
  position: fixed;
  width: 130px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,0.95), rgba(255,255,255,0));
  z-index: 0;
  pointer-events: none;
  opacity: 0;
}
html::before {
  top: 8%;
  left: 65%;
  animation: shootingStar1 17s linear infinite;
}
html::after {
  top: 4%;
  left: 25%;
  animation: shootingStar2 23s linear infinite;
  animation-delay: 6s;
}
@keyframes shootingStar1 {
  0%   { opacity: 0; transform: translate(0, 0) rotate(-35deg); }
  3%   { opacity: 1; }
  9%   { opacity: 0; transform: translate(-260px, 200px) rotate(-35deg); }
  100% { opacity: 0; transform: translate(-260px, 200px) rotate(-35deg); }
}
@keyframes shootingStar2 {
  0%   { opacity: 0; transform: translate(0, 0) rotate(-35deg); }
  3%   { opacity: 1; }
  8%   { opacity: 0; transform: translate(-220px, 170px) rotate(-35deg); }
  100% { opacity: 0; transform: translate(-220px, 170px) rotate(-35deg); }
}

@media (max-width: 768px) {
  :root { --page-top-gap: 170px; } /* มือถือ nav สูงกว่า (โลโก้+pill 2 แถว) */
}
/* วิธีใช้: เติม class="page-auto-top-gap" ที่ <body> ของหน้าไหนก็ได้ที่คอนเทนต์แรกสุดชนกับ nav
   (ไม่ต้องเขียน padding-top เองทีละหน้าอีก) — ใช้กับ astrology-guide.php, content.php, article.php */
body.page-auto-top-gap { padding-top: var(--page-top-gap); }

/* ===== SHARED NAVBAR ===== */
nav.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  padding: 20px 40px;
  background: linear-gradient(to bottom, rgba(13,8,32,0.95) 0%, transparent 100%);
  backdrop-filter: blur(2px);
  /* v107: เพิ่ม compositing-layer fix เดียวกับ #music-player (ดูคอมเมนต์ v70 ใน #music-player
     ด้านล่างไฟล์นี้) — เดิม nav ไม่มี translateZ(0)/will-change เลย ทำให้เป็นตัวที่เห็นเลื่อนตอน
     address bar มือถือหุบ/โผล่ระหว่างสกอลล์ ในขณะที่ music-player ถูกแพตช์เรื่องนี้ไปแล้วรอบก่อน */
  transform: translateZ(0);
  will-change: transform;
}

.nav-logo {
  font-family: "Anuphan", sans-serif;
  font-size: 18px;
  color: var(--gold);
  letter-spacing: 2px;
  text-decoration: none;
  white-space: nowrap;
}
.nav-logo span { color: var(--gold-lt); }

/* v61: nav-logo แบบภาพ — โชว์ images/ui/logo.png แทนข้อความ (v76: ไม่สลับตอน onload แล้ว)
   ถ้าโหลดไม่ได้ onerror จะลบ <img> ทิ้ง เหลือข้อความเดิม */
.nav-logo { display: flex; align-items: center; }
/* v76: เดิมซ่อนรูปไว้ก่อน แล้วรอ onload ค่อยสลับจาก "ข้อความ" -> "รูป"
   -> ครั้งแรกที่เข้าเว็บ (รูปยังไม่อยู่ใน cache) จะเห็นเมนูเด้งยืด/หด 1 ครั้งชัดเจน
      เพราะข้อความกับรูปสูงไม่เท่ากัน และเกิดหลังหน้า render ไปแล้ว
   -> ครั้งต่อไปรูปมาจาก cache เลยเร็วจนไม่ทันเห็น = ดูเหมือน "เป็นเฉพาะครั้งแรก"
   แก้: โชว์รูปเลยตั้งแต่แรก ไม่ต้องสลับ + ล็อกความสูงกล่องโลโก้ไว้
        ข้อความเก็บไว้เป็น fallback เฉพาะตอนรูปโหลดไม่ขึ้นจริงๆ */
.nav-logo {
  display: inline-flex;
  align-items: center;
  min-height: 34px;      /* จองความสูงไว้ ให้เท่ากับรูป — ไม่มีทางยืด/หด */
}
.nav-logo__img {
  display: inline-block;
  height: 34px;
  width: auto;
}
.nav-logo__text { display: none; }

/* รูปโหลดไม่ขึ้น (404/เน็ตหลุด) -> ค่อยกลับไปใช้ข้อความ */
.nav-logo.logo-failed .nav-logo__img  { display: none; }
.nav-logo.logo-failed .nav-logo__text { display: inline; }

.nav-links { display: flex; gap: 36px; }
.nav-links a {
  font-family: "Anuphan", sans-serif;
  font-size: 16px;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.2s;
}
.nav-links a:hover,
.nav-links a.is-active { color: var(--gold-lt); }

/* v19/v28: submenu (ความหมายไพ่ > ดาราศาสตร์/บทความน่ารู้) — desktop เป็น dropdown ลอยใต้เมนู
   ทั้งก้อน (label+ลูกศร) เป็นปุ่ม toggle เดียวกันหมด กัน tap target แยกกันบนมือถือ */
.nav-link-group { position: relative; display: flex; align-items: center; }
/* v36: กลุ่ม ☰ โชว์แค่มือถือ — desktop ใช้เมนูยาวแบบเดิม (.nav-link--mobile-hide ซ่อนแค่บนมือถือ) */
.nav-link-group--mobile-only { display: none; }
.nav-link-group__main {
  background: none; border: none; padding: 0; margin: 0; cursor: pointer;
  display: flex; align-items: center; gap: 4px;
  font-family: "Anuphan", sans-serif;
  font-size: 16px;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  transition: color 0.2s;
}
.nav-link-group__main svg { width: 14px; height: 14px; flex-shrink: 0; transition: transform 0.2s, color 0.2s; }
.nav-link-group__icon { font-size: 20px; line-height: 1; }
.nav-link-group.is-open .nav-link-group__main,
.nav-link-group.has-active-child .nav-link-group__main { color: var(--gold-lt); }
.nav-link-group.is-open .nav-link-group__main svg { transform: rotate(180deg); }
.nav-submenu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  display: none;
  flex-direction: column;
  gap: 10px; /* v49: เพิ่มจาก 4px — ของเดิมแน่นเกินไป กดพลาดง่าย */
  min-width: 160px;
  background: linear-gradient(160deg, rgba(30,20,58,0.98), rgba(13,8,32,0.98));
  border: 1px solid rgba(201,165,95,0.3);
  border-radius: 12px;
  padding: 12px;
  z-index: 1001;
}
.nav-link-group.is-open .nav-submenu { display: flex; }
.nav-submenu a {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 700; /* v50: ให้ตรงกับน้ำหนักเมนูหลัก (.nav-links a บนมือถือ) — submenu นี้โชว์แค่บนมือถือเท่านั้นอยู่แล้ว */
  letter-spacing: 0.5px;
}
.nav-submenu a:hover, .nav-submenu a.is-active { background: rgba(201,165,95,0.12); color: var(--gold-lt); }

/* v20: ad-zone-placeholder — กรอบ+ชื่อ zone โชว์เฉพาะตอนแอดมินยังไม่ตั้งค่า/ยังไม่เปิดโซนนั้น
   ให้เห็นตำแหน่งจริงบนเว็บว่าแต่ละโซนอยู่ตรงไหน พอใส่โฆษณาจริงแล้วกรอบนี้จะหายไปเอง (เปลี่ยนเป็นโฆษณาจริงแทน) */
/* v21: การ์ดโฆษณา affiliate — สร้างจากพูลใน admin/affiliate-ads.php (ภาพ+หัวข้อ+คำอธิบาย+ลิงก์) */
.ad-affiliate-card {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border-radius: 14px;
  background: rgba(201,165,95,0.05);
  border: 1px solid rgba(201,165,95,0.2);
  text-decoration: none;
  transition: border-color 0.2s, background-color 0.2s;
}
.ad-affiliate-card:hover { border-color: rgba(201,165,95,0.4); background: rgba(201,165,95,0.08); }
.ad-affiliate-card__img {
  width: 96px; height: 96px; object-fit: cover; border-radius: 10px; flex-shrink: 0;
}
.ad-affiliate-card__title { font-family: "Anuphan", sans-serif; font-size: 14.5px; color: var(--gold-lt); font-weight: 600; margin-bottom: 4px; }
.ad-affiliate-card__desc { font-family: "Anuphan", sans-serif; font-size: 12.5px; color: var(--text-muted); line-height: 1.6; }

/* v78: การ์ดโฆษณาแบบ "แบนเนอร์กว้าง" — สำหรับรูปสัดส่วนแนวนอนยาว (เช่น 1200x280)
   ต่างจาก .ad-affiliate-card เดิมที่ตัดรูปเป็นสี่เหลี่ยมจัตุรัส 96x96 (เหมาะกับรูปสินค้าโฟกัสกลาง)
   ตัวนี้โชว์รูปเต็มความกว้าง ไม่ครอบตัด เหมาะกับแบนเนอร์ที่มีข้อความ/ราคาฝังอยู่ในภาพแล้ว
   เลือกใช้ได้จากช่อง "รูปแบบการ์ด" ใน admin/affiliate-ads.php ต่อโฆษณาแต่ละชิ้น */
.ad-affiliate-banner {
  display: block;
  max-width: var(--content-width, 1180px);
  /* v103: เปลี่ยนจากค่าตายตัว 1180px เป็น CSS variable — แต่ละหน้า (index/library/astrology-guide/
     article) จะประกาศ --content-width ของตัวเองไว้ที่ :root ตามค่าที่ตั้งใน admin ตั้งค่าเว็บไซต์
     (ดู inc/app-settings.php:getContentWidth()) ทำให้ Ads กว้างเท่ากับ content ของหน้านั้นเสมอ
     โดยอัตโนมัติ ไม่ต้องมาคอยแก้ทีละหน้า — ถ้าหน้าไหนไม่ได้ประกาศตัวแปรนี้ไว้ (เช่น room.php)
     จะ fallback กลับไปที่ 1180px ตามเดิม ไม่มีทางพัง */
  margin: 24px auto;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(201,165,95,0.2);
  text-decoration: none;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.ad-affiliate-banner:hover {
  transform: translateY(-3px);
  border-color: rgba(201,165,95,0.9);
  box-shadow: 0 8px 32px rgba(201,165,95,0.4), 0 0 36px rgba(201,165,95,0.28), inset 0 1px 0 rgba(255,255,255,0.12);
} /* v122: สไตล์ hover เดียวกับ .content-card (index.php) — เข้มขึ้นตามที่ขอเพิ่มอีกรอบ */
.ad-affiliate-banner__img {
  display: block;
  width: 100%;
  height: auto;           /* ไม่ครอบตัด รักษาสัดส่วนจริงของรูป */
}
/* คำอธิบายใต้แบนเนอร์ — ไม่บังคับ ซ่อนได้ถ้าไม่ได้กรอก description ไว้ */
.ad-affiliate-banner__caption {
  padding: 10px 14px;
  font-family: "Anuphan", sans-serif;
  font-size: 12.5px;
  color: var(--text-muted);
  background: rgba(201,165,95,0.05);
  line-height: 1.6;
}

/* v22: กรอบทองทึบ กึ่งกลาง เหมือนแบนเนอร์โฆษณาจริง (ของเดิม v20 เป็นเส้นประบางไป ไม่เด่นพอ) */
.ad-zone-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 90px;
  max-width: var(--content-width, 1180px);   /* v103: ต้องเท่ากับ .ad-affiliate-banner เสมอ (ตัวแปรเดียวกัน) กันขนาดกระโดดตอนเปลี่ยนจาก placeholder เป็นโฆษณาจริง */
  margin: 24px auto;
  padding: 20px;
  border: 2px solid var(--gold);
  border-radius: 14px;
  background: rgba(201,165,95,0.06);
  box-shadow: 0 0 24px rgba(201,165,95,0.15);
  color: var(--gold-lt);
  font-family: "Anuphan", sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-align: center;
}

/* ปุ่มเต็มจอ — โชว์เฉพาะมือถือ (ดู @media 768px ด้านล่าง) */
.nav-fullscreen-btn {
  display: none;
  cursor: pointer;
  color: #e8d5a3;
  background: rgba(13,8,32,0.55);
  border: 1px solid rgba(201,165,95,0.3);
}
.nav-fullscreen-icon { width: 16px; height: 16px; display: block; }

/* ===== MEMBER ICON + LOGIN MODAL + DROPDOWN ===== */
.nav-member-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  padding: 2px;
  cursor: pointer;
  background: rgba(13,8,32,0.55);
  border: 1.5px solid rgba(201,165,95,0.4);
  flex-shrink: 0;
  transition: border-color 0.2s;
}
.nav-member-btn:hover { border-color: var(--gold-lt); }
.nav-member-avatar { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }

.login-modal-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(6,4,18,0.75);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.login-modal-overlay[hidden] { display: none; }
.login-modal {
  position: relative;
  width: 100%; max-width: 340px;
  background: linear-gradient(160deg, rgba(30,20,58,0.98), rgba(13,8,32,0.98));
  border: 1px solid rgba(201,165,95,0.35);
  border-radius: 18px;
  padding: 32px 24px 28px;
  text-align: center;
}
.login-modal-close {
  position: absolute; top: 10px; right: 14px;
  background: none; border: none;
  color: var(--text-muted);
  font-size: 22px; cursor: pointer; line-height: 1;
  z-index: 10; pointer-events: auto; /* v181: กันอะไรมาบังพื้นที่คลิกปุ่มปิด */
  width: 32px; height: 32px; /* ขยาย hit-area ให้กดง่ายขึ้น ไม่ใช่แค่ตัวอักษร × เล็กๆ */
}
.login-modal-close:hover { color: var(--gold-lt); }
.login-modal-title {
  font-family: "Anuphan", sans-serif;
  color: var(--gold); font-size: 19px;
  letter-spacing: 1px; margin: 0 0 10px;
}
.login-modal-desc { color: var(--text-muted); font-size: 13.5px; margin: 0 0 22px; line-height: 1.6; }
.google-signin-btn-holder { display: flex; justify-content: center; min-height: 44px; }
.login-modal-error {
  margin-top: 16px; color: #e08787; font-size: 13px; line-height: 1.5;
}

.member-dropdown {
  position: fixed;
  z-index: 1999;
  width: 220px;
  max-width: calc(100vw - 20px);
  background: linear-gradient(160deg, rgba(30,20,58,0.98), rgba(13,8,32,0.98));
  border: 1px solid rgba(201,165,95,0.35);
  border-radius: 14px;
  padding: 16px;
}
.member-dropdown-name { color: var(--gold-lt); font-size: 15px; font-weight: 700; margin: 0 0 4px; }
.member-dropdown-rank { color: var(--text-muted); font-size: 12px; margin: 0 0 2px; line-height: 1.5; }
.member-dropdown-credits { color: var(--text-muted); font-size: 12px; margin: 0 0 14px; line-height: 1.5; }
.member-dropdown-link {
  display: block; text-align: center;
  padding: 9px 0; margin-bottom: 8px;
  border: 1px solid rgba(201,165,95,0.4); border-radius: 999px;
  color: var(--gold); text-decoration: none; font-size: 13px;
  transition: border-color 0.2s;
}
.member-dropdown-link:hover { border-color: var(--gold-lt); }
/* v133: ปุ่ม "ใส่โค้ดรับเครดิต" ในเมนู — ใช้หน้าตาเดียวกับ .member-dropdown-link (ลิงก์แดชบอร์ด)
   แต่เป็น <button> ไม่ใช่ <a> เพราะไม่ได้พาไปหน้าอื่น แค่เปิด popup */
.member-dropdown-link--btn {
  width: 100%;
  background: none;
  font-family: inherit;
  cursor: pointer;
}
.member-dropdown-logout {
  display: block; width: 100%; text-align: center;
  padding: 9px 0;
  background: none; border: 1px solid rgba(224,135,135,0.4); border-radius: 999px;
  color: #e08787; font-size: 13px; cursor: pointer;
  transition: border-color 0.2s;
}
.member-dropdown-logout:hover { border-color: #e08787; }

/* v133: popup ใส่โค้ดรับเครดิต — หน้าตาเดียวกับ login-modal (ใช้ .login-modal-close/.login-modal-title/.login-modal-desc ร่วมกัน) */
.redeem-modal-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(6,4,18,0.75);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.redeem-modal-overlay[hidden] { display: none; }
.redeem-modal {
  position: relative;
  width: 100%; max-width: 340px;
  background: linear-gradient(160deg, rgba(30,20,58,0.98), rgba(13,8,32,0.98));
  border: 1px solid rgba(201,165,95,0.35);
  border-radius: 18px;
  padding: 32px 24px 28px;
  text-align: center;
}
.redeem-modal-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.redeem-modal-input {
  flex: 1; min-width: 160px;
  background: rgba(255,255,255,0.03);
  border: 1.5px solid rgba(201,165,95,0.3);
  border-radius: 999px;
  padding: 10px 16px;
  color: var(--white);
  font-family: "Anuphan", sans-serif;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}
.redeem-modal-input:focus { border-color: rgba(201,165,95,0.75); }
.redeem-modal-btn {
  flex-shrink: 0;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid rgba(201,165,95,0.4);
  background: rgba(201,165,95,0.14);
  color: var(--gold-lt);
  font-family: "Anuphan", sans-serif;
  font-size: 13.5px;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}
.redeem-modal-btn:hover { border-color: var(--gold-lt); background: rgba(201,165,95,0.24); }
.redeem-modal-status { font-size: 12.5px; margin-top: 14px; min-height: 1.4em; }
.redeem-modal-status.is-ok { color: #a8e8bd; }
.redeem-modal-status.is-error { color: #ffb3b3; }

/* ===== PORTRAIT LOCK OVERLAY — บังคับมือถือจริงใช้แนวตั้งเท่านั้น ===== */
#portrait-lock-overlay {
  display: none; /* JS สลับเป็น flex เมื่อ landscape จริง */
  position: fixed; inset: 0; z-index: 99999;
  background: #0d0820;
  flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 30px;
}
.portrait-lock-icon {
  font-size: 56px;
  margin-bottom: 20px;
  animation: portrait-lock-rotate 1.8s ease-in-out infinite;
}
@keyframes portrait-lock-rotate {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-90deg); }
}
.portrait-lock-text {
  font-family: "Anuphan", sans-serif;
  color: var(--gold-lt);
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}
.portrait-lock-sub {
  color: var(--text-muted);
  font-size: 13px;
  max-width: 280px;
  line-height: 1.6;
}

/* ===== ช่องคำถามไม่บังคับ ก่อนกด AI ทำนายละเอียด ===== */
.ai-question-row { margin-bottom: 14px; }
.ai-question-row textarea {
  width: 100%; min-height: 56px; resize: vertical;
  padding: 10px 14px; border-radius: 12px;
  background: rgba(13,8,32,0.5); border: 1px solid rgba(201,165,95,0.25);
  color: var(--white, #f5f3ff); font-size: 13.5px; font-family: "Anuphan", sans-serif;
  line-height: 1.6;
}
.ai-question-row textarea:focus { outline: none; border-color: var(--gold-lt); }
.ai-question-count { display: block; text-align: right; font-size: 12px; color: var(--text-muted); margin-top: 4px; }

/* ===== PARTICLES ===== */
.particle {
  position: fixed;
  pointer-events: none;
  border-radius: 50%;
  background: var(--gold);
  z-index: 490;
  animation: particle-fly 0.8s ease-out forwards;
}
@keyframes particle-fly {
  from { opacity: 1; transform: scale(1) translate(0,0); }
  to   { opacity: 0; transform: scale(0) translate(var(--dx), var(--dy)); }
}

/* ===== FOOTER ===== */
/* v99: เปลี่ยนจาก CSS Grid มาเป็น position:absolute + calc() ทั้งหมด
   เหตุผล: ลอง grid-template-columns มา 4 รอบ (v95-v98) ยังชิดขอบไม่นิ่งจริง แม้ตั้ง justify-self
   ชัดเจนแล้วก็ตาม — grid item มีตัวแปรแทรกซ้อนเยอะ (default stretch, min-width:auto, ฯลฯ) คุมยาก
   เปลี่ยนมาคำนวณตำแหน่งพิกเซลตรงๆ ด้วย calc() แทน — ไม่มีทางเพี้ยนเพราะไม่มี "default behavior"
   ให้เบราว์เซอร์ตัดสินใจเองอีกเลย ทุกจุดกำหนดตายตัวจากสัดส่วน % เดียวกับที่ admin ตั้งได้

   หลักการ: footer มี padding 60px ซ้าย-ขวา, gap ระหว่าง 3 บล็อก 32px คงที่ 2 ช่อง
   .footer-desc  ชิดซ้ายสุด (left:60px เท่ากับ padding)
   .footer-links ชิดขวาสุด (right:60px เท่ากับ padding) — คำนวณ "จากขวา" ตรงๆ ไม่ใช่ผ่าน column
   .footer-version กึ่งกลางจอตายตัว (เหมือนเดิมจาก v96 ใช้ได้ดีอยู่แล้ว ไม่เปลี่ยน) */
footer.site-footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(201,165,95,0.1);
  padding: 40px 60px;
  min-height: 140px;   /* v99: เดิมความสูงมาจาก grid content โดยอัตโนมัติ — ตอนนี้ลูกเป็น absolute
                           ทั้งหมด (หลุดจาก normal flow) ต้องกำหนด min-height เองกันสูง 0
                           v100: ตัวเลขนี้เป็นแค่ fallback ก่อน JS รันเสร็จ/กรณี JS ปิดอยู่เท่านั้น —
                           ตัวจริงถูกคำนวณสดจากความสูงเนื้อหาจริงใน js/components.js
                           (resizeFooterToFitContent) รองรับข้อความยาวสั้นแค่ไหนก็ได้ ไม่ต้องเดาอีก */
}
.footer-desc {
  position: absolute;
  left: 60px;                              /* v99: ชิดซ้ายสุดตรงๆ เท่ากับ padding ของ footer */
  top: 40px;
  width: calc(var(--footer-col-desc, 45%) - 76px);
  /* ลบ 76px ชดเชย: 60px padding ที่กินไปแล้วจาก left offset (คิดจาก % ของทั้งแถบ ไม่ใช่ % ของพื้นที่ที่เหลือ)
     + gap ครึ่งหนึ่งกันบล็อกชนกับ version ตรงกลาง — ตัวเลขนี้คือระยะปลอดภัยเดียวกับที่เคยได้ผลจาก max-width */
  max-width: 480px;
  text-align: left;
}
.footer-links {
  position: absolute;
  right: 60px;                             /* v99: ชิดขวาสุดตรงๆ เท่ากับ padding ของ footer — คำนวณจากขวา
                                                ไม่ผ่าน left เลย จึงไม่มีทางลอยกลางจอไม่ว่า desc จะกว้างแค่ไหน */
  top: 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.footer-links a {
  font-family: "Anuphan", sans-serif;
  font-size: 16px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s;
  white-space: nowrap;   /* v98: กันตัดคำกลางวลี — ยังจำเป็นอยู่แม้เปลี่ยนวิธีจัดตำแหน่งแล้ว */
}
.footer-links a:hover { color: var(--gold); }
.footer-version {
  /* v96: กึ่งกลางจอตายตัว ไม่ขึ้นกับสัดส่วน desc/links เลย — ทำงานถูกต้องดีอยู่แล้ว ไม่แตะ */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: "Anuphan", sans-serif;
  font-size: 13px;
  letter-spacing: 1.5px;
  color: var(--gold);
  opacity: 0.75;
  white-space: nowrap;
}
.footer-desc__logo {
  font-family: "Anuphan", sans-serif;
  font-size: 14px;
  color: var(--gold);
  margin-bottom: 8px;
}
.footer-desc__body {
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1.7;
  overflow-wrap: break-word;   /* v97: กันข้อความยาวที่ admin พิมพ์เอง (คำอังกฤษ/URL) ล้นกรอบ */
}

/* ===== MINI MUSIC PLAYER (compact pill, SVG icons) =====
   v70: ไม่ได้เป็นลูกของ <nav> แล้ว (ดูเหตุผลใน components.js buildNav) — ยึด viewport เอง
   ตำแหน่ง desktop นี้จงใจให้ตรงกับตำแหน่งเดิมตอนยังอยู่ใน nav (มุมขวาบน)
   v83: #music-player เป็นแค่ wrapper ตำแหน่ง (positioning wrapper) เฉยๆ แล้ว — pill styling
   จริงย้ายไปอยู่ที่ .mp-panel แทน เพราะตอนนี้มี .mp-toggle (ปุ่มวงกลม, มือถือ) เป็นพี่น้องด้วย
   translateZ(0)/will-change: บังคับให้ element ได้ compositing layer ของตัวเอง กัน browser
   มือถือบางรุ่นเลื่อน position:fixed ตามเนื้อหาระหว่าง scroll (compositing quirk)

   v89-v91: เคยลองห่อด้วย #mp-viewport-anchor (position:fixed เต็มจอ + 100lvh) เพื่อแก้บั๊ก
   address bar แต่ไปกระทบ room_mobile.html ซึ่งมี scroll container พิเศษของตัวเอง ทำให้กดเลือกไพ่
   แล้วเข้าหน้ากรีดไพ่ไม่ได้ — v92: ถอดกลับเป็น position:fixed ธรรมดาแล้ว ปลอดภัยกว่า
   เรื่อง address bar jump ของเพลเยอร์ยังค้างอยู่ ต้องหาทางแก้ใหม่ที่ไม่กระทบหน้านี้ */
#music-player {
  position: fixed;
  top: auto;
  bottom: 20px;
  left: 20px;
  right: auto;
  z-index: 1000;
  transform: translateZ(0);
  will-change: transform;
} /* v179: ย้ายจากมุมขวาบน (ในแถบเมนู) มาลอยมุมล่างซ้ายเหมือนมือถือ ให้ดีไซน์ตรงกันทั้ง desktop/mobile */
.mp-panel {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(13,8,32,0.55);
  border: 1px solid rgba(201,165,95,0.3);
  border-radius: 999px;
  padding: 4px 10px 4px 4px;
  transition: opacity 0.2s ease, transform 0.2s ease;
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(-8px) scale(0.9);
  transform-origin: left center;
  opacity: 0;
  pointer-events: none;
} /* v179: เปลี่ยนจาก panel โชว์ตรงๆ เป็น expand จากปุ่มวงกลม เหมือนมือถือ */
#music-player.is-expanded .mp-panel {
  opacity: 1;
  transform: translateY(-50%) translateX(0) scale(1);
  pointer-events: auto;
}
#music-player:hover .mp-panel { border-color: rgba(201,165,95,0.6); }
.mp-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(13,8,32,0.75);
  border: 1.5px solid rgba(201,165,95,0.4);
  color: #e8d5a3;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  transition: border-color 0.2s;
} /* v179: ปุ่มวงกลม toggle — ใช้ทุกขนาดจอแล้ว (เดิม desktop:none) */
.mp-toggle-icon { width: 20px; height: 20px; display: block; }
#music-player.is-expanded .mp-toggle { border-color: var(--gold); }

.mp-btn {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(201,165,95,0.35);
  background: rgba(201,165,95,0.1);
  color: #e8d5a3;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, border-color 0.2s;
  flex-shrink: 0;
  padding: 0;
}
.mp-btn:hover { background: rgba(201,165,95,0.25); border-color: #c9a55f; }
.mp-btn.is-muted { color: #9d92c8; border-color: rgba(201,165,95,0.15); }
.mp-icon { width: 13px; height: 13px; display: block; }

/* play button: เน้นนิดหน่อยให้รู้ว่าเป็นปุ่มหลัก */
.mp-play {
  width: 28px; height: 28px;
  background: rgba(201,165,95,0.18);
}

/* แถบ progress ของเพลง — เติม % ผ่าน inline style (ไม่พึ่ง CSS var) */
.mp-track {
  position: relative;
  width: 46px;
  height: 4px;
  border-radius: 3px;
  background: rgba(201,165,95,0.2);
  overflow: hidden;
  flex-shrink: 0;
}
.mp-track__fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 0%;
  background: #c9a55f;
  border-radius: 3px;
}

/* volume slider — fill เติมด้วย inline background (background-size trick, cross-browser) */
.mp-vol {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 52px; height: 14px;
  background: transparent;
  outline: none;
  cursor: pointer;
  flex-shrink: 0;
  margin: 0;
}
.mp-vol::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 3px;
  background: transparent; /* fill มาจาก inline background ของ input เอง ที่ JS เซ็ตเป็น % ตรงๆ */
}
.mp-vol::-moz-range-track {
  height: 4px;
  border-radius: 3px;
  background: rgba(201,165,95,0.2);
}
.mp-vol::-moz-range-progress {
  height: 4px;
  border-radius: 3px;
  background: #c9a55f;
}
.mp-vol::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px; height: 10px;
  margin-top: -3px;
  border-radius: 50%;
  background: #e8d5a3;
  box-shadow: 0 0 4px rgba(201,165,95,0.6);
  cursor: pointer;
}
.mp-vol::-moz-range-thumb {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #e8d5a3;
  border: none;
  cursor: pointer;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  /* nav มือถือ: แถว 1 โลโก้กลาง (+ปุ่มเต็มจอมุมขวาบน) / แถว 2 pill เมนูคั่นด้วยเส้น */
  nav.site-nav {
    position: fixed;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 16px;
    padding: 22px 10px 12px; /* v72: top เพิ่มจาก 14→22 กันโลโก้ติดขอบจอ, sides ลดจาก 16→10 ให้ pill เมนูกว้างขึ้น */
  }
  .nav-logo { order: 1; width: 100%; justify-content: center; font-size: 26px; }
  .nav-logo__img { height: 46px; }
  .nav-logo { min-height: 46px; }   /* v76: ล็อกความสูงให้ตรงกับรูป กันเด้ง */

  .nav-fullscreen-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 20px; /* v72: ตามแนวเดียวกับโลโก้ที่ padding-top ขยับเป็น 22px */
    right: 10px;
    width: 32px;
    height: 32px;
    border-radius: 8px;
  }

  .nav-member-btn {
    position: absolute;
    top: 20px;
    left: 10px;
    width: 48px;   /* v87: ขยายจาก 32px ตามที่ขอ — สูงพอดีกับพื้นที่แถวโลโก้ (top:22px + height:46px = 68px) ไม่ดันเลย์เอาต์ */
    height: 48px;
  }

  /* member-dropdown: ตำแหน่งคำนวณจาก JS ตามตำแหน่งจริงของปุ่ม avatar (ดู js/auth.js positionMemberDropdown)
     ไม่ต้องกำหนด top/left/width ตายตัวที่นี่แล้ว ให้เล็กกะทัดรัดเหมือน desktop เสมอ */

  /* v71: pill เมนู — ไม่กว้างเต็มจอ เว้นช่องไฟจากขอบจอสองข้าง (margin) — ข้างในยังแบ่ง 3 ช่องเท่ากัน (flex:1)
     กัน overflow กรณีข้อความยาว ("คลังความหมายไพ่") บนจอแคบ ให้ตัดขึ้นบรรทัดใหม่ได้แทนล้นออกนอก pill */
  .nav-links {
    order: 2;
    width: auto;
    margin: 0 4px; /* v73: ลดอีกนิดให้กว้างขึ้นอีก ตามภาพอ้างอิง */
    justify-content: center;
    align-items: center;
    gap: 0;
    background: rgba(13,8,32,0.55);
    border: 1.5px solid rgba(201,165,95,0.4);
    border-radius: 999px;
    padding: 15px 6px; /* v73: ขยายวง pill ให้ใหญ่ขึ้นตามภาพที่ 2 */
  }
  .nav-links a {
    flex: 1;
    text-align: center;
    font-size: 13.5px;
    font-weight: 700; /* v72: หนาขึ้นตามที่ขอ */
    line-height: 1.3;
    letter-spacing: 0.1px;
    padding: 0 8px;
    border-right: 1px solid rgba(201,165,95,0.25);
    white-space: nowrap;
  }
  .nav-links > a:last-child,
  .nav-links > .nav-link-group:last-child { border-right: none; }

  /* v19/v28: submenu บนมือถือ — .nav-link-group เข้าไปแทนที่ตำแหน่ง <a> เดิมในช่อง pill ต้องได้ flex:1 เหมือนกัน
     ปุ่ม __main ขยายเต็มพื้นที่ pill segment (ไม่ใช่แค่ขนาดข้อความ) ให้พื้นที่แตะใหญ่สุด กันแตะพลาดไปโดนช่องข้างๆ */
  .nav-links .nav-link-group {
    flex: 1;
    border-right: 1px solid rgba(201,165,95,0.25);
  }
  .nav-links .nav-link-group:last-child { border-right: none; }
  .nav-links .nav-link-group__main {
    flex: 1;
    width: 100%;
    justify-content: center;
    font-size: 13.5px;
    font-weight: 700;
    padding: 0 8px; /* v50: เท่ากับ .nav-links a — ของเดิม padding:0 ทำให้ ☰ ชิดเส้นคั่นเกินไป ไม่มีช่องไฟเหมือนเมนูอื่น */
  }
  .nav-links .nav-link-group__main svg { width: 12px; height: 12px; }
  /* v88: กฎ position/style ของ .nav-links .nav-submenu ย้ายไปรวมจุดเดียวที่ก่อนคอมเมนต์ music player
     ด้านล่างแล้ว (เดิมเคยแยกอยู่ 2 จุด ซ้ำ/ทับกัน) */
  /* v36: มือถือ — สลับกัน: ซ่อนลิงก์เดี่ยว 3 อัน (ย้ายไปอยู่ใน ☰ แทน) โชว์กลุ่ม ☰ แทน
     (desktop ตรงข้าม: โชว์ลิงก์เดี่ยวทั้ง 5 อัน ซ่อนกลุ่ม ☰ — ดูกฎ default ด้านบนไฟล์) */
  .nav-link--mobile-hide { display: none; }
  .nav-link-group--mobile-only { display: flex; }

  /* v88: submenu (☰) เดิมยึดตำแหน่งกับ .nav-link-group (แค่ช่องฮาแบอร์เกอร์เอง) ทำให้ดรอปดาวน์
     โผล่มาแค่มุมขวาแคบๆ ไม่ตรงตามภาพอ้างอิงที่อยากได้ (กว้างเกือบเต็ม pill บาร์ อยู่กึ่งกลาง)
     แก้ด้วยการสลับ containing block: เอา position:relative ออกจาก .nav-link-group แล้วย้ายไปที่
     .nav-links (ทั้งแถบ pill) แทน — .nav-submenu (ลูกของ .nav-link-group) จะยึดตำแหน่งกับ .nav-links
     แทนโดยอัตโนมัติ ไม่ต้องแก้ HTML/JS เลย เป็นแค่การสลับว่าใครเป็น "จุดอ้างอิง" ของ position:absolute */
  .nav-links { position: relative; }
  .nav-links .nav-link-group { position: static; }

  .nav-links .nav-submenu {
    left: 50%;
    top: calc(100% + 10px);
    transform: translateX(-50%);
    width: calc(100% - 8px);   /* กว้างเกือบเท่า pill บาร์ทั้งแถบ ตามภาพอ้างอิง */
    min-width: 0;
    gap: 10px;
    padding: 10px;
  }
  /* แต่ละลิงก์ในดรอปดาวน์ — ปุ่ม pill เต็มความกว้าง ขอบทอง ตามภาพอ้างอิง (แทนลิสต์เล็กๆ แบบเดิม) */
  .nav-links .nav-submenu a {
    display: block;
    width: 100%;
    text-align: center;
    padding: 14px 16px;
    border: 1.5px solid rgba(201,165,95,0.4);
    border-radius: 999px;
    background: rgba(13,8,32,0.55);
    font-size: 14.5px;
  }
  .nav-links .nav-submenu a:hover,
  .nav-links .nav-submenu a.is-active {
    border-color: var(--gold-lt);
    background: rgba(201,165,95,0.12);
  }

  /* music player — v83: มุมซ้ายล่าง เป็นวงกลม toggle เล็กๆ กดแล้ว panel เด้งขึ้นมาด้านบน
     (ลดพื้นที่จอที่บังตลอดเวลา, ไม่ต้องลอยกลางจอเหมือนก่อน) */
  #music-player {
    top: auto;
    bottom: 16px;
    left: 16px;
    right: auto;
  }
  .mp-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(13,8,32,0.75);
    border: 1.5px solid rgba(201,165,95,0.4);
    color: #e8d5a3;
    cursor: pointer;
    padding: 0;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    transition: border-color 0.2s;
  }
  .mp-toggle-icon { width: 20px; height: 20px; display: block; }
  #music-player.is-expanded .mp-toggle { border-color: var(--gold); }
  .mp-panel {
    position: absolute;
    left: calc(100% + 10px); /* v84: เด้งไปทางขวาของปุ่มวงกลม แทนด้านบน */
    top: 50%;
    bottom: auto;
    opacity: 0;
    transform: translateY(-50%) translateX(-8px) scale(0.9);
    transform-origin: left center;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  #music-player.is-expanded .mp-panel {
    opacity: 1;
    transform: translateY(-50%) translateX(0) scale(1);
    pointer-events: auto;
  }

  /* v99: desktop ใช้ position:absolute ทั้ง 3 บล็อกแล้ว (ดู footer.site-footer ด้านบน)
     มือถือรีเซ็ตกลับเป็น position:static ทั้งหมด ให้เข้า normal flow เรียงต่อกันเป็นแถวเดียว
     กึ่งกลางจอ ตามลำดับ DOM เดิม (desc -> version -> links) */
  footer.site-footer {
    padding: 32px 24px;
    min-height: 0;         /* เดิม 120px จำเป็นเฉพาะตอนลูกเป็น absolute (หลุด flow) — มือถือลูกกลับเข้า flow ปกติแล้ว ไม่ต้องกำหนดเอง */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  .footer-desc {
    position: static;
    left: auto; top: auto; width: auto; max-width: 100%;
    text-align: center;
  }
  .footer-links {
    position: static;
    right: auto; top: auto;
    align-items: center;
  }
  .footer-version {
    position: static;
    left: auto; top: auto; transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ===== TITLE BADGE (v1) =====
   ใช้สำหรับหัวข้อที่ต้องการพื้นหลังทอง+ลายจุด ตัดกับพื้นหลังหลัก
   ใช้ร่วมกัน: index.html (guide-card / about-card), library.html ฯลฯ */
.title-badge {
  display: inline-block;
  font-family: "Anuphan", sans-serif;
  font-weight: 700;
  color: var(--white);
  background: var(--gold);
  border-radius: 6px;
  padding: 5px 14px;
  letter-spacing: 0.3px;
}

/* modifier: ข้อควรระวัง - พื้นหลังแดง ตัวอักษรขาว */
.title-badge--danger {
  color: var(--white);
  background: #b33a3a;
}

/* v82: ถอด auto-hide nav ออก (v75 เคยเพิ่มไว้) — กลับเป็น position:fixed ธรรมดา ไม่ซ่อน/โผล่ตามสกอลล์
   เหตุผล: ตอนสกอลล์มีหลายระบบตอบสนอง address bar พร้อมกัน (nav auto-hide + music player fixed)
   ทำให้เห็นการเคลื่อนไหวซ้อนกันแทนที่จะหายไป — ยอมรับ address bar กระตุกเล็กน้อยแบบเว็บทั่วไปแทน
   ง่ายกว่าและคาดเดาพฤติกรรมได้มากกว่า ไม่มีการเพิ่มความซับซ้อนที่ควบคุมไม่ได้ */