/*
Theme Name: DoujinPrime
Theme URI: https://doujinprime.com/
Description: ธีมสำหรับ doujinprime.com — ทำงานคู่กับปลั๊กอิน Manga Library Connector (MLC)
             และ mu-plugin mglb-core โครงหน้าอ้างอิงม็อกอัพใน Design/doujinprime/
Author: ทีมงาน doujinprime.com
Version: 1.0.6
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 8.0
Text Domain: doujinprime
*/

/* DoujinPrime — สไตล์ของทั้งธีม
 *
 * ⚠️ ไฟล์นี้ยกมาจาก `Design/doujinprime/assets/style.css` แล้วต่อส่วนที่มีแต่บน WordPress
 *    แก้หน้าตาแล้วควรแก้ทั้งสองที่ให้ตรงกัน ไม่งั้นม็อกอัพกับเว็บจริงจะเพี้ยนจากกัน
 *
 * ⚠️ ของในเรฟที่ "คลังไม่มีข้อมูล" และถูกแทนที่แล้ว — อย่าเอากลับมา
 *    · แถบวัน MON–SUN  → แถบหมวด (คลังไม่มีตารางวันอัปเดต · `update_day` เก็บ "ปี")
 *    · ยอดไลก์ 39.3M ❤ → จำนวนตอน (MLC ส่ง likes/views/rating มาเป็น 0 ทั้งหมด)
 *    · อันดับตามช่วงอายุ → อันดับตามจำนวนตอน (คลังไม่มีข้อมูลอายุผู้อ่าน)
 */

/* ── ตัวแปร ──────────────────────────────────────────────────────────────── */

:root {
  --acc:    #7b2ff7;          /* ม่วง — ตำแหน่งเดียวกับเขียวของเรฟ */
  --acc-d:  #5d19cc;
  --acc-s:  #f1e9ff;          /* ม่วงจาง ใช้เป็นพื้นอ่อน */
  --hot:    #e5247e;          /* ชมพูเข้ม — ป้ายหมวดเหมือนเรฟ */
  --up:     #00bb62;          /* ป้าย "อัป" */

  --bg:     #ffffff;
  --band:   #f4f3f8;          /* แถบพื้นหลังสลับระหว่างบล็อก */
  --ink:    #16161c;
  --dim:    #6f6f7d;
  --line:   #e7e6ee;
  --dark:   #1b1726;          /* การ์ดเด่นพื้นเข้มในเรฟ */

  --sans:   'Noto Sans Thai', 'Segoe UI', system-ui, sans-serif;
  --head:   'IBM Plex Sans Thai', 'Noto Sans Thai', 'Segoe UI', system-ui, sans-serif;

  --w:      1200px;           /* ความกว้างเนื้อหา */
  --pad:    20px;             /* ระยะขอบซ้ายขวา */
  --r:      10px;
}

/* ── พื้นฐาน ─────────────────────────────────────────────────────────────── */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 14px; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--head); margin: 0; line-height: 1.3; font-weight: 600; }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }

/* ⚠️ จำเป็นคู่กับแอตทริบิวต์ width/height บน <img>
      ถ้าไม่มี height:auto เบราว์เซอร์จะใช้ความสูงตามแอตทริบิวต์
      แล้วทับ aspect-ratio ที่ตั้งไว้ ทำให้ปกยืดผิดสัดส่วน */
img { max-width: 100%; height: auto; display: block; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input  { font: inherit; }

:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 4px; }

.wrap { max-width: var(--w); margin: 0 auto; padding-inline: var(--pad); }

/* ข้อความสำหรับโปรแกรมอ่านหน้าจอ — ใช้กับ H1 ที่ต้องมีแต่ไม่อยากให้เห็น */
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

svg { width: 1em; height: 1em; flex: 0 0 auto; }

/* ── หัวเว็บ ─────────────────────────────────────────────────────────────── */

.hd {
  position: sticky; top: 0; z-index: 40;
  background: var(--bg); border-bottom: 1px solid var(--line);
}

.hd-in { display: flex; align-items: center; gap: 22px; height: 62px; }

.logo { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.logo .mark {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px;
  background: var(--acc); color: #fff; font-size: 19px;
}
.logo b {
  font-family: var(--head); font-size: 19px; font-weight: 700; letter-spacing: -.01em;
}
.logo b i { font-style: normal; color: var(--acc); }

.nav { display: flex; gap: 20px; margin-inline-start: 6px; }
.nav a {
  font-family: var(--head); font-size: 14.5px; font-weight: 600; color: #3b3b46;
  padding: 6px 0; border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--acc); }
.nav a.on { color: var(--ink); border-bottom-color: var(--acc); }

.hd-r { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; }

.hsearch {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  background: var(--band); border: 1px solid transparent; border-radius: 999px;
  padding: 0 14px; height: 38px; color: var(--dim);
}
.hsearch:focus-within { border-color: var(--acc); background: #fff; }
.hsearch input {
  border: 0; background: none; outline: 0; width: 220px; min-width: 0;
  font-size: 13.5px; color: var(--ink);
}
.hsearch input::placeholder { color: #9a9aa8; }

.ibtn {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  font-size: 18px; color: #3b3b46;
}
.ibtn:hover { background: var(--band); }

/* ── ฮีโร่ ───────────────────────────────────────────────────────────────── */

/* เรฟ: แบนเนอร์ใหญ่มุมมน + พื้นหลังเบลอเต็มความกว้างทะลุออกนอกกล่อง
   ⚠️ คลังมีแต่ปกแนวตั้ง 3:4 ไม่มีภาพฉากแนวนอน จึงเอาปกมาเบลอทำพื้นหลัง */
.hero { position: relative; overflow: hidden; background: #ddd9e8; }

.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img {
  width: 100%; height: 100%; object-fit: cover;
  filter: blur(34px) saturate(1.3); transform: scale(1.25); opacity: .85;
}
.hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.55));
}

.hero-in { position: relative; z-index: 1; padding-block: 26px 30px; }

.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 14px;
}

/* แผ่นสไลด์หลัก */
.hslides { position: relative; border-radius: 14px; overflow: hidden; background: #0e0a18; }
.hslide { display: none; }
.hslide.on { display: block; }

.hslide a { display: grid; grid-template-columns: minmax(0, 1fr) 42%; min-height: 330px; }

.hs-tx {
  padding: 34px 32px; display: flex; flex-direction: column; justify-content: center;
  gap: 10px; color: #fff; min-width: 0;
}
.hs-kick {
  align-self: flex-start; background: #ffd84d; color: #241a00;
  font-family: var(--head); font-size: 11px; font-weight: 700; letter-spacing: .1em;
  padding: 4px 10px; border-radius: 4px; text-transform: uppercase;
}
.hs-tx h3 {
  font-size: clamp(24px, 3vw, 36px); font-weight: 700; line-height: 1.2;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .45);
}
.hs-sub { font-size: 13.5px; color: #d8d2e6; }
/* ⚠️ อย่าใช้ชื่อคลาส .syn ซ้ำกับกล่องเรื่องย่อของหน้าเรื่อง
      เคยพลาดมาแล้วสองเว็บ: กล่องเรื่องย่อมีพื้นหลัง+กรอบ พอชนกันข้อความในฮีโร่เพี้ยน */
.hs-syn {
  margin: 0; font-size: 13px; color: #cfc8dd; line-height: 1.8;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hs-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12.5px; }
.hs-meta b { font-weight: 700; }
.hs-meta .dot { opacity: .5; }

.hs-cv { position: relative; overflow: hidden; }
.hs-cv img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.hs-cv::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, #0e0a18 0%, rgba(14, 10, 24, .35) 32%, transparent 68%);
}

.hdots {
  position: absolute; left: 32px; bottom: 18px; z-index: 2; display: flex; gap: 7px;
}
.hdots i {
  width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .45);
  cursor: pointer; transition: background .15s, width .15s;
}
.hdots i.on { background: #fff; width: 20px; border-radius: 999px; }

/* สองแผ่นด้านขวา — เรฟใช้โปรโมต Canvas กับแอป
   เว็บนี้ไม่มีของพวกนั้น จึงใส่ทางลัดที่ทำงานได้จริงแทน */
.hside { display: grid; grid-template-rows: 1fr 1fr; gap: 14px; }
.htile {
  border-radius: 14px; padding: 20px 18px; display: flex; flex-direction: column;
  justify-content: space-between; gap: 10px; color: #fff; min-height: 0;
}
.htile h3 { font-size: 17px; font-weight: 700; }
.htile p  { margin: 0; font-size: 12.5px; opacity: .88; line-height: 1.7; }
.htile .go {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255, 255, 255, .22); border-radius: 999px; padding: 5px 13px;
  font-size: 12.5px; font-weight: 600;
}
.htile.a { background: linear-gradient(145deg, #e5247e, #a2176b); }
.htile.b { background: linear-gradient(145deg, #7b2ff7, #4a1bb0); }

/* ── แถบหมวด (แทนแถบวัน MON–SUN ของเรฟ) ──────────────────────────────────── */

.gtabs { background: var(--bg); border-bottom: 1px solid var(--line); }
.gtabs-in { display: flex; align-items: stretch; gap: 0; overflow-x: auto; scrollbar-width: none; }
.gtabs-in::-webkit-scrollbar { display: none; }

.gtabs a {
  flex: 1 0 auto; text-align: center; padding: 15px 20px; white-space: nowrap;
  font-family: var(--head); font-size: 14.5px; font-weight: 600; color: #4a4a56;
}
.gtabs a:hover { color: var(--acc); }
.gtabs a.on { background: var(--acc); color: #fff; border-radius: 8px; margin: 7px 4px; padding: 8px 20px; }
.gtabs .more {
  flex: 0 0 auto; border-inline-start: 1px solid var(--line); color: var(--dim);
  font-size: 13px; font-weight: 500;
}

/* ── การ์ดเรื่อง (ทรงเดียวกับเรฟ: ข้อความซ้ายบน รูปชิดขวาล่าง) ──────────── */

.grid {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px;
}

.card {
  position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; aspect-ratio: 160 / 152; min-width: 0;
}
.card:hover { border-color: #cfcbdd; box-shadow: 0 6px 18px rgba(20, 16, 40, .09); }

.card > a { position: absolute; inset: 0; display: block; }

.card .pic {
  position: absolute; right: 0; bottom: 0; width: 66%; height: 82%; overflow: hidden;
}
.card .pic img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
}
/* ไล่เฉดขาวฝั่งซ้ายของรูป ให้ตัวหนังสือซ้ายบนอ่านออกเมื่อรูปสว่าง */
.card .pic::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, #fff 0%, rgba(255, 255, 255, .55) 22%, transparent 52%);
}

.card h3 {
  position: absolute; top: 10px; left: 11px; right: 38%; z-index: 2;
  font-size: 13.5px; font-weight: 600; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card .eps {
  position: absolute; top: 52px; left: 11px; z-index: 2;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 600; color: var(--hot);
}
.card .eps svg { width: 12px; height: 12px; }

.card .tag {
  position: absolute; left: 11px; bottom: 9px; z-index: 2;
  font-size: 11px; color: var(--hot);
  max-width: 58%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ป้ายกลม "อัป"/"ใหม่" ตำแหน่งเดียวกับเรฟ */
.card .flag {
  position: absolute; left: 11px; top: 74px; z-index: 2;
  display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px;
  border-radius: 999px; font-size: 10.5px; font-weight: 700; color: #fff;
  font-family: var(--head);
}
.card .flag.up  { background: var(--up); }
.card .flag.new { background: #14121c; }
.card .flag.end { background: #8b8898; }

/* การ์ดเด่นกว้าง 2 ช่อง พื้นเข้ม + มีเรื่องย่อ (เรฟมีหนึ่งใบต่อแถว) */
/* ⚠️ ต้องล้าง aspect-ratio ของ .card ทิ้ง
      การ์ดนี้กว้าง 2 ช่อง ถ้าคิดสัดส่วนจากความกว้างจะสูงเป็นสองเท่าของเพื่อนในแถว
      ปล่อยเป็น auto แล้วให้ grid ยืดตามแถว (เหมือนเรฟที่สูงเท่ากันทุกใบ)
      ⚠️ ในเบรกพอยต์ที่การ์ดนี้อยู่ลำพังทั้งแถว ต้องกำหนดสัดส่วนคืน ไม่งั้นสูงเป็น 0 */
.card.wide { grid-column: span 2; aspect-ratio: auto; background: var(--dark);
             border-color: var(--dark); }
.card.wide h3 { color: #fff; right: 42%; font-size: 15px; -webkit-line-clamp: 1; }
.card.wide .wsyn {
  position: absolute; top: 34px; left: 11px; right: 42%; z-index: 2;
  margin: 0; font-size: 11.5px; line-height: 1.75; color: #b9b2cb;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.card.wide .pic { width: 56%; height: 100%; }
.card.wide .pic::after {
  background: linear-gradient(100deg, var(--dark) 0%, rgba(27, 23, 38, .6) 28%, transparent 62%);
}
.card.wide .eps { top: auto; bottom: 32px; color: #ff6fae; }
.card.wide .flag { top: auto; bottom: 8px; left: 11px; }
.card.wide .tag { display: none; }

/* ── บล็อกทั่วไป ─────────────────────────────────────────────────────────── */

.sec { padding-block: 34px; }
.sec.band { background: var(--band); }

.sec-h { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 18px; }
.sec-h h2 { font-size: 20px; font-weight: 600; }
.sec-h a  { display: inline-flex; align-items: center; color: var(--ink); font-size: 18px; }
.sec-h a:hover { color: var(--acc); }

/* หัวบล็อกแบบชิดซ้าย (ใช้ในหน้าอื่นที่ไม่ใช่หน้าแรก) */
.sec-hl { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
          margin-bottom: 14px; }
.sec-hl h2 { font-size: 18px; font-weight: 600; }
.sec-hl > a { font-size: 13px; color: var(--dim); }
.sec-hl > a:hover { color: var(--acc); }

/* ── แถวเลื่อน (บล็อก "New to WEBTOON" ของเรฟ) ───────────────────────────── */

.rail-box { position: relative; }
.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * 14px) / 5);
  gap: 14px; overflow-x: auto; scroll-behavior: smooth;
  scrollbar-width: none; padding-bottom: 2px;
}
.rail::-webkit-scrollbar { display: none; }
/* ⚠️ CSS Grid ให้ min-width:auto กับลูกทุกตัว ชื่อเรื่องยาวจึงดันช่องให้กว้างไม่เท่ากัน */
.rail > * { min-width: 0; }

.rarrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: #fff; border: 1px solid var(--line); color: #3b3b46; font-size: 18px;
  box-shadow: 0 3px 12px rgba(20, 16, 40, .12);
}
.rarrow:hover { color: var(--acc); border-color: var(--acc); }
.rarrow.prev { left: -19px; }
.rarrow.next { right: -19px; }

/* ── บล็อกหมวด (แถวละ: แผ่นสีชื่อหมวด + การ์ด 4 ใบ) ─────────────────────── */

.grow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px;
        margin-bottom: 14px; }
.grow:last-child { margin-bottom: 0; }

.gtile {
  border-radius: var(--r); padding: 18px 16px; color: #fff; position: relative;
  display: flex; flex-direction: column; justify-content: space-between; min-width: 0;
  aspect-ratio: 160 / 152;
}
.gtile h3 { font-size: 17px; font-weight: 700; }
.gtile p  { margin: 0; font-size: 11.5px; opacity: .9; line-height: 1.7; }
.gtile .arr { position: absolute; top: 16px; right: 14px; font-size: 18px; opacity: .9; }

/* ── อันดับ (แทน "Most Popular by Genre/Age Group" ของเรฟ) ───────────────── */

.ranks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }

.rank-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
          padding-bottom: 10px; margin-bottom: 4px; }
.rank-h h2 { font-size: 17px; font-weight: 600; }
.rank-h .note { font-size: 12px; color: var(--dim); }

.rlist { list-style: none; margin: 0; padding: 0; }
.rlist li { border-bottom: 1px solid var(--line); }
.rlist li:last-child { border-bottom: 0; }

.ritem { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px;
         align-items: center; padding: 11px 0; }
.ritem .thumb { position: relative; border-radius: 6px; overflow: hidden; aspect-ratio: 3 / 4; }
.ritem .thumb img { width: 100%; height: 100%; object-fit: cover; }
.ritem .no {
  position: absolute; left: 0; top: -2px; z-index: 2;
  font-family: var(--head); font-size: 26px; font-weight: 700; line-height: 1;
  color: #fff; padding: 3px 5px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}
/* ⚠️ สามบรรทัดนี้เป็น <span> ต้องบังคับ block ไม่งั้นหมวด/ชื่อ/ผู้แต่ง
      ไหลต่อกันเป็นบรรทัดเดียวอ่านไม่ออก (เจอจริงตอนตรวจภาพ) */
.ritem .tx { min-width: 0; }
.ritem .g, .ritem .t, .ritem .a { display: block; }
.ritem .g  { font-size: 11.5px; color: var(--hot); }
.ritem .t  { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis;
             white-space: nowrap; }
.ritem .a  { font-size: 12px; color: var(--dim); overflow: hidden; text-overflow: ellipsis;
             white-space: nowrap; }

/* ── ตัวกรอง / ชิป ───────────────────────────────────────────────────────── */

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px;
  font-size: 13px; color: #4a4a56; background: #fff;
}
.chip:hover { border-color: var(--acc); color: var(--acc); }
.chip.on { background: var(--acc); border-color: var(--acc); color: #fff; }
.chip .n { font-size: 11.5px; opacity: .7; }

/* ── ตารางเรื่องแบบปกตั้ง (หน้ารวมเรื่อง/ค้นหา) ─────────────────────────── */

.pgrid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px 14px; }

.pcard { min-width: 0; }
.pcard .cv {
  display: block; position: relative; border-radius: 8px; overflow: hidden;
  background: var(--band); aspect-ratio: 3 / 4;
}
.pcard .cv img { width: 100%; height: 100%; object-fit: cover; }
.pcard .cv .flag {
  position: absolute; left: 7px; top: 7px; z-index: 2;
  border-radius: 999px; padding: 2px 8px; font-size: 10.5px; font-weight: 700; color: #fff;
  font-family: var(--head);
}
.pcard .cv .flag.up  { background: var(--up); }
.pcard .cv .flag.new { background: #14121c; }
.pcard .cv .flag.end { background: #8b8898; }
.pcard .cv .n {
  position: absolute; right: 7px; bottom: 7px; z-index: 2;
  background: rgba(14, 10, 24, .78); color: #fff; border-radius: 4px;
  padding: 2px 7px; font-size: 11px; font-weight: 600;
}
.pcard h3 {
  margin-top: 8px; font-size: 13.5px; font-weight: 600; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pcard .m { font-size: 11.5px; color: var(--dim); margin-top: 2px;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── หน้าเรื่อง ──────────────────────────────────────────────────────────── */

.thead { position: relative; overflow: hidden; background: #241d33; color: #fff; }
.thead .bg { position: absolute; inset: 0; }
.thead .bg img {
  width: 100%; height: 100%; object-fit: cover;
  filter: blur(30px) saturate(1.25); transform: scale(1.22); opacity: .5;
}
.thead .bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20, 15, 32, .55), rgba(20, 15, 32, .9));
}
.thead-in {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 28px;
  align-items: end;
  /* ⚠️ ต้องเป็น padding-block เพราะ .thead-in ใช้คลาส .wrap ด้วย
        padding แบบย่อจะล้างระยะขอบซ้ายขวาของ .wrap ทิ้ง */
  padding-block: 36px 30px;
}
.thead-cv { border-radius: 10px; overflow: hidden; box-shadow: 0 10px 34px rgba(0, 0, 0, .4); }
.thead-cv img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.thead-tx { min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.thead-tx h1 { font-size: clamp(22px, 3vw, 32px); font-weight: 700; }
.thead-tx .en { font-size: 13.5px; color: #c3bad6; }
.thead-tx .by { font-size: 13px; color: #d7d0e4; }
.thead-tx .mrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
                  font-size: 12.5px; color: #d7d0e4; }
.thead-tx .mrow .dot { opacity: .45; }
.tgenres { display: flex; flex-wrap: wrap; gap: 7px; }
.tgenres a {
  border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px; padding: 3px 11px;
  font-size: 12px; color: #efe9f8;
}
.tgenres a:hover { background: rgba(255, 255, 255, .15); }

.btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.btn {
  display: inline-flex; align-items: center; gap: 7px; border-radius: 999px;
  padding: 10px 22px; font-family: var(--head); font-size: 14px; font-weight: 600;
}
.btn-a { background: var(--acc); color: #fff; }
.btn-a:hover { background: var(--acc-d); }
.btn-o { border: 1px solid rgba(255, 255, 255, .45); color: #fff; }
.btn-o:hover { background: rgba(255, 255, 255, .14); }
.btn-g { border: 1px solid var(--line); color: var(--ink); background: #fff; }
.btn-g:hover { border-color: var(--acc); color: var(--acc); }

/* กล่องเรื่องย่อ — ⚠️ คลาสนี้ใช้เฉพาะหน้าเรื่อง อย่าเอาไปใช้กับหน้าเอกสารยาว */
.syn {
  background: var(--band); border: 1px solid var(--line); border-radius: 10px;
  padding: 16px 18px; font-size: 13.5px; line-height: 1.95; color: #3b3b46;
}

.eprow {
  display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; gap: 14px;
  align-items: center; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 8px; margin-bottom: 8px; background: #fff;
}
.eprow:hover { border-color: var(--acc); }
.eprow .no { font-family: var(--head); font-weight: 700; font-size: 13px; color: var(--acc);
             text-align: center; }
.eprow .t  { font-size: 13.5px; font-weight: 500; overflow: hidden;
             text-overflow: ellipsis; white-space: nowrap; }
.eprow .d  { font-size: 12px; color: var(--dim); white-space: nowrap; }

/* ── หน้าอ่าน ────────────────────────────────────────────────────────────── */

.rdbar {
  position: sticky; top: 62px; z-index: 30; background: #fff;
  border-bottom: 1px solid var(--line);
}
.rdbar-in { display: flex; align-items: center; gap: 14px; height: 52px; }
.rdbar .t { font-family: var(--head); font-size: 14.5px; font-weight: 600;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.rdbar .sp { margin-inline-start: auto; display: flex; gap: 8px; align-items: center; }

.pages { max-width: 760px; margin: 0 auto; padding-block: 18px 26px; }
.pages img { width: 100%; margin: 0 auto 2px; background: var(--band); }

.rdnote {
  max-width: 760px; margin: 0 auto 18px; background: var(--acc-s); border-radius: 10px;
  padding: 13px 16px; font-size: 12.5px; color: #4b2d80; line-height: 1.8;
}

.rdnav { display: flex; justify-content: space-between; gap: 12px; max-width: 760px;
         margin: 0 auto; }

/* ── ท้ายเว็บ ────────────────────────────────────────────────────────────── */

.ft { background: #15121d; color: #a9a3b8; margin-top: 44px; padding-block: 34px 26px;
      font-size: 13px; }
.ft-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
.ft h2 { color: #fff; font-size: 14px; margin-bottom: 11px; font-weight: 600; }
/* ⚠️ หัวคอลัมน์ท้ายเว็บเป็น <h2> ไม่ใช่ <h4> เพราะบล็อกก่อนหน้าจบที่ H2
      ถ้าใช้ H4 จะข้ามระดับ (เจอจริงตอนตรวจลำดับหัวข้อ) */
.ft ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.ft a:hover { color: #fff; }
.ft-bot {
  border-top: 1px solid #2a2437; margin-top: 26px; padding-top: 16px;
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
  font-size: 12px; color: #807a91;
}
.ft .warn { color: #d9a2bd; }

/* ── สถานะว่าง / แบ่งหน้า ────────────────────────────────────────────────── */

.empty { text-align: center; padding: 56px 20px; }
.empty h2 { font-size: 19px; margin-bottom: 8px; }
.empty p  { margin: 0 0 18px; color: var(--dim); font-size: 13.5px; }

.pager { display: flex; justify-content: center; gap: 6px; margin-top: 26px; flex-wrap: wrap; }
.pager a, .pager span {
  display: grid; place-items: center; min-width: 36px; height: 36px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 8px; font-size: 13px; background: #fff;
}
.pager .on { background: var(--acc); border-color: var(--acc); color: #fff; }
.pager a:hover { border-color: var(--acc); color: var(--acc); }

/* ── จอกลาง ──────────────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hside { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
  .htile { min-height: 110px; }
  .grid, .grow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .card.wide { grid-column: span 3; aspect-ratio: 340 / 152; }
  .rail { grid-auto-columns: calc((100% - 2 * 14px) / 3); }
  .pgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hsearch input { width: 150px; }
  .ranks { gap: 28px; }
}

@media (max-width: 900px) {
  .nav { display: none; }
  .ranks { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .thead-in { grid-template-columns: 150px minmax(0, 1fr); gap: 20px; padding-block: 26px 22px; }
  .ft-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── จอแคบ ───────────────────────────────────────────────────────────────── */

@media (max-width: 680px) {
  :root { --pad: 16px; }

  .hd-in { height: 56px; gap: 10px; }
  /* โลโก้แบบเต็มกินที่จนช่องค้นหาแคบเกินใช้งาน — เหลือแต่ไอคอน */
  .logo b { display: none; }
  .hsearch { flex: 1 1 auto; }
  .hsearch input { width: 100%; }

  .hslide a { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hs-cv { order: -1; aspect-ratio: 16 / 10; }
  .hs-cv::after {
    background: linear-gradient(0deg, #0e0a18 2%, rgba(14, 10, 24, .3) 45%, transparent 75%);
  }
  .hs-tx { padding: 18px 18px 26px; }
  /* ⚠️ จุดสไลด์ต้องไม่ทับปุ่ม/ข้อความ — ย้ายมาอยู่ขอบล่างตรงกลาง */
  .hdots { left: 50%; transform: translateX(-50%); bottom: 10px; }

  .grid, .grow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card.wide { grid-column: span 2; aspect-ratio: 340 / 152; }
  .rail { grid-auto-columns: calc((100% - 14px) / 2); }
  .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 10px; }

  /* ⚠️ ห้ามซ่อนลูกศร — แถวนี้ไม่มีปุ่มอื่นให้เลื่อน และบางเครื่องปัดไม่ติด
        ย้ายมาไว้มุมล่างแทน จะได้ไม่ทับปกหรือชื่อเรื่อง */
  .rarrow { top: auto; bottom: -14px; transform: none; width: 32px; height: 32px;
            font-size: 16px; }
  .rarrow.prev { left: auto; right: 40px; }
  .rarrow.next { right: 0; }
  .rail-box { padding-bottom: 20px; }

  .sec { padding-block: 26px; }
  .sec-h h2 { font-size: 18px; }

  .thead-in { grid-template-columns: 110px minmax(0, 1fr); gap: 16px; }
  .btn { padding: 9px 18px; font-size: 13.5px; }

  .rdbar { top: 56px; }
  .ft-cols { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

@media (max-width: 420px) {
  .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card h3 { font-size: 12.5px; right: 34%; }
  .card .eps { top: 48px; }
  .card .flag { top: 68px; }
}

@media (prefers-reduced-motion: reduce) {
  .rail { scroll-behavior: auto; }
  * { transition: none !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   ส่วนที่มีแต่บน WordPress (ม็อกอัพไม่มี)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── แถบผู้ดูแลของ WordPress ─────────────────────────────────────────────────
   แถบ admin สูง 32px (46px บนจอแคบ) และเป็น position:fixed
   หัวเว็บของเราเป็น sticky top:0 จึงมุดไปอยู่ใต้แถบนั้นถ้าไม่ขยับลงมา    */
.admin-bar .hd    { top: 32px; }
.admin-bar .rdbar { top: 94px; }
@media (max-width: 782px) {
  .admin-bar .hd    { top: 46px; }
  .admin-bar .rdbar { top: 102px; }
}

/* ── คลาสของ WordPress เอง ──────────────────────────────────────────────── */

.screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ปุ่ม "ข้ามไปเนื้อหา" — ต้องมองเห็นได้เมื่อโฟกัสด้วยคีย์บอร์ด */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--acc); color: #fff; padding: 10px 18px; border-radius: 0 0 8px 0;
  font-size: 14px; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ── เนื้อหาเอกสารยาว (เพจ about / terms / dmca) ──────────────────────────
   ⚠️ ห้ามใช้คลาส `.syn` กับกล่องนี้
      `.syn` เป็นกล่องเรื่องย่อของหน้าเรื่อง — พื้นเทา ตัวหนังสือเล็ก
      เคยเอาไปครอบเอกสารยาวแล้วอ่านไม่ไหวมาแล้วหนึ่งเว็บในฟลีต           */
.pgdoc { max-width: 760px; margin: 0 auto; padding-block: 26px 10px; }
.pgdoc h1 { font-size: 26px; margin-bottom: 16px; }
.pgdoc h2 { font-size: 18px; margin: 26px 0 8px; }
.pgdoc h3 { font-size: 15.5px; margin: 20px 0 6px; }
.pgdoc p, .pgdoc li { font-size: 14.5px; line-height: 1.95; color: #3b3b46; }
.pgdoc ul, .pgdoc ol { padding-inline-start: 22px; }
.pgdoc li { margin-bottom: 6px; }
.pgdoc a { color: var(--acc); text-decoration: underline; }
.pgdoc img { border-radius: 8px; margin-block: 14px; }
.pgdoc table { width: 100%; border-collapse: collapse; margin-block: 14px; font-size: 13.5px; }
.pgdoc th, .pgdoc td { border: 1px solid var(--line); padding: 8px 10px; text-align: start; }
.pgdoc th { background: var(--band); font-weight: 600; }

/* ── บทความ SEO ท้ายเว็บ ────────────────────────────────────────────────── */

.ftseo { background: var(--band); border-top: 1px solid var(--line); padding-block: 30px; }
.ftseo h2 { font-size: 18px; margin-bottom: 14px; }
.ftseo h3 { font-size: 14.5px; margin: 16px 0 6px; }
.ftseo .cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.ftseo p { margin: 0 0 10px; font-size: 13px; line-height: 1.95; color: #4a4a56; }
.ftseo a { color: var(--acc); }
.ftseo-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.ftseo-tags a {
  border: 1px solid var(--line); background: #fff; border-radius: 999px;
  padding: 4px 12px; font-size: 12.5px; color: #4a4a56;
}
.ftseo-tags a:hover { border-color: var(--acc); color: var(--acc); }
.ftseo-note {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: #6b4155;
}
@media (max-width: 900px) {
  .ftseo .cols { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* ── แถบหมวดบนหน้าแรก (เวอร์ชัน WordPress) ───────────────────────────────
   ม็อกอัพสลับตารางด้วย JS จากข้อมูลทั้งก้อนในหน้า
   บน WordPress ส่งทั้งคลังมาให้เบราว์เซอร์ไม่ได้ จึง **เรนเดอร์ทุกแท็บไว้ล่วงหน้า**
   แล้วซ่อน/โชว์ด้วย CSS — ปิด JS ก็ยังเห็นแท็บแรกและกดลิงก์ไปหน้าหมวดได้    */
.gpanel { display: none; }
.gpanel.on { display: block; }

/* ── ตัวเลือกบนหน้ารวมเรื่อง ─────────────────────────────────────────────── */

.filters { display: grid; gap: 10px; margin-bottom: 18px; }
.filters .frow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filters .flab {
  font-size: 12.5px; color: var(--dim); min-width: 58px; font-family: var(--head);
  font-weight: 600;
}

/* ── หน้าอ่าน: ตัวปรับความกว้าง/ความสว่าง ────────────────────────────────── */

.pages { --rw: 760px; --rb: 1; max-width: var(--rw); }
.pages img { filter: brightness(var(--rb)); }

.rdtools { display: flex; align-items: center; gap: 10px; }
.rdtools label { font-size: 12px; color: var(--dim); white-space: nowrap; }
.rdtools input[type="range"] { width: 92px; accent-color: var(--acc); }
@media (max-width: 900px) { .rdtools { display: none; } }

/* ── ความคิดเห็น (ปิดไว้ทั้งเว็บ แต่กันไว้เผื่อเปิด) ─────────────────────── */

.comments-area { max-width: 760px; margin: 0 auto; padding-block: 20px; }

/* ── หน้าที่เนื้อหาสั้นมาก (404 · คลังว่าง · เพจติดต่อ) ───────────────────
   ไม่ตั้งอะไรเลย ท้ายเว็บจะลอยอยู่กลางจอแล้วเหลือพื้นขาวใต้ลงไปอีกครึ่งจอ
   ดันให้ชิดล่างเสมอ — ไม่กระทบหน้าที่เนื้อหายาวอยู่แล้ว                  */
body { display: flex; flex-direction: column; min-height: 100vh; }
body > main { flex: 1 0 auto; }
body > .ft, body > .ftseo { flex: 0 0 auto; }