/*
Theme Name: mi2manga
Theme URI: https://mi2manga.mobi/
Description: ธีมอ่านมังงะของ mi2manga.mobi — ธีมสว่างโทนครีมอุ่น ภาษาไทย พร้อมโหมดมืด
             อ่านข้อมูลจากปลั๊กอิน Manga Library Connector (MLC) ถ้ามี
             ถ้าไม่มีจะแสดงสถานะว่างแบบตรงไปตรงมา ไม่ใส่ข้อมูลปลอม
Author: wordpress_auto
Version: 1.3.2
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: mi2manga
*/

/* ซีเอสเอสด้านล่างยกมาจากม็อกอัพที่ Design/mi2manga/assets/style.css ทั้งก้อน
   แก้ที่ม็อกอัพก่อนเสมอ แล้วค่อยซิงก์มาที่นี่ จะได้ไม่หลุดจากกัน */

/* ===========================================================================
   mi2manga.mobi — ม็อกอัพ
   ธีมสว่างโทนครีมอุ่น · ภาษาไทย

   สีดูดมาจาก ref/01-home.jpg ด้วยการวิเคราะห์พิกเซล ไม่ได้กะเอาเอง
     พื้นหลัง #fbf8f3  แถบหัว #fcfbf9  ฟุตเตอร์ #3a3839
     แบรนด์  #d0545c  ทอง #f2b34a
   =========================================================================== */

:root {
  /* พื้นผิว */
  --bg:      #fbf8f3;   /* ครีมอุ่น */
  --surface: #ffffff;
  --head:    #fcfbf9;
  --soft:    #f6efe7;   /* ครีมเข้มขึ้นหนึ่งขั้น ใช้เป็นพื้นรูป */
  --line:    #ece5dc;
  --line2:   #ded4c8;

  /* ตัวอักษร */
  --ink:     #2b2927;
  --muted:   #7a7471;
  --dim:     #a39c97;

  /* สีแบรนด์ */
  --red:     #d0545c;
  --red-d:   #b8464e;
  --red-bg:  #fdeeef;
  --gold:    #f2b34a;
  --dark:    #3a3839;
  --btn:     #3a3839;   /* ปุ่มหลัก — โหมดมืดเปลี่ยนเป็นสีแบรนด์ */
  --btn-ink: #ffffff;
  --foot:    #3a3839;   /* พื้นฟุตเตอร์ */
  --foot-ink:#e8e4e0;
  --shadow:  rgba(43, 41, 39, .07);

  /* สีประจำอารมณ์ (โทนพาสเทลตามเรฟ) */
  --m-pink:  #fdeaea;
  --m-amber: #fdf3dd;
  --m-red:   #fdeae6;
  --m-blue:  #e9f0fa;
  --m-purple:#efeaf8;
  --m-green: #e8f3e8;

  /* รูปทรง */
  --r-sm: 10px;
  --r:    14px;
  --r-lg: 20px;
  --r-xl: 26px;

  /* ฟอนต์ไทย */
  --head-f: 'Kanit', 'Noto Sans Thai', sans-serif;      /* หัวข้อ หนา กลม */
  --body:   'Noto Sans Thai', 'Inter', sans-serif;
  --hand:   'Itim', cursive;                            /* ลายมือไทย */
  --hand-en:'Caveat', cursive;

  --head-h: 66px;
  --tabbar-h: 60px;
}

/* ── reset ───────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  max-width: 100%;
}

/* ⚠️ height:auto ต้องมี ห้ามเอาออก
   แอตทริบิวต์ width/height บน <img> ถูกเบราว์เซอร์แปลงเป็น presentational hint
   (เหมือนเขียน width:480px;height:640px) ซึ่งทับ aspect-ratio ที่ตั้งไว้ใน CSS
   ถ้าไม่มีบรรทัดนี้ ปกทุกใบจะสูง 640px ตายตัวและยืดผิดสัดส่วน (เกิดจริง 2026-10-09)
   กฎที่ตั้ง height เองอยู่แล้ว (.acct img, .hero .art > img ฯลฯ) specificity สูงกว่า ไม่โดนทับ */
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input { font: inherit; }
ul, ol { list-style: none; margin: 0; padding: 0; }   /* .mini ใส่เลขเอง ไม่ใช้เลขอัตโนมัติของ ol */
h1, h2, h3, h4 { margin: 0; font-family: var(--head-f); font-weight: 600; }

/* inline SVG ไม่มีขนาดในตัว ถ้าไม่กำหนดจะบวมจนดันเลย์เอาต์พัง */
svg { width: 18px; height: 18px; flex: none; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px; }

/* ── header ──────────────────────────────────────────────────────────────── */

.hd {
  position: sticky; top: 0; z-index: 100;
  background: rgba(252, 251, 249, .93); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.hd-in { display: flex; align-items: center; gap: 22px; height: var(--head-h); }

.logo { display: flex; align-items: center; gap: 9px; flex: none; }
.logo .bk { width: 30px; height: 30px; color: var(--red); }
.logo .bk svg { width: 30px; height: 30px; }
.logo .nm { font-family: var(--head-f); font-size: 19px; font-weight: 600; letter-spacing: .4px; line-height: 1.1; }
.logo .sub { display: block; font-family: var(--body); font-size: 8.5px; letter-spacing: 1.4px; color: var(--muted); font-weight: 400; }

.nav { display: flex; align-items: center; gap: 22px; flex: none; }
.nav a { position: relative; font-size: 13.5px; font-weight: 500; color: var(--muted); padding: 6px 0; transition: color .15s; }
.nav a:hover, .nav a.on { color: var(--ink); }
.nav a.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: var(--red); }

.search {
  flex: 1 1 auto; max-width: 300px; margin-left: auto;
  display: flex; align-items: center; gap: 9px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 999px;
  padding: 0 8px 0 15px; height: 38px;
}
.search input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--ink); font-size: 12.5px; }
.search input::placeholder { color: var(--dim); }
.search .go {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg); color: var(--muted); flex: none;
}
.search .go svg { width: 14px; height: 14px; }

.hd-r { display: flex; align-items: center; gap: 12px; flex: none; }
.iconbtn { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); }
.iconbtn:hover { background: var(--bg); color: var(--ink); }
.hd-r .login { font-size: 13px; font-weight: 500; color: var(--muted); }

/* ชิปบัญชีผู้ใช้ (โผล่เมื่อล็อกอินแล้ว) */
.acct {
  display: flex; align-items: center; gap: 8px; flex: none;
  height: 36px; padding: 0 12px 0 4px; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--line); transition: .15s;
}
.acct img { width: 28px; height: 28px; border-radius: 50%; flex: none; }
.acct span { font-size: 12.5px; font-weight: 500; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct:hover { border-color: var(--line2); }
.hd-r .login:hover { color: var(--ink); }
.burger { display: none; color: var(--ink); }

/* ── ปุ่ม ─────────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 22px; border-radius: 999px;
  font-size: 14px; font-weight: 500; white-space: nowrap; transition: .18s;
}
.btn svg { width: 16px; height: 16px; }
.btn-d { background: var(--btn); color: var(--btn-ink); }
.btn-d:hover { filter: brightness(1.12); }
.btn-o { background: var(--surface); border: 1px solid var(--line2); color: var(--ink); }
.btn-o:hover { border-color: var(--dark); }
.btn-r { background: var(--red); color: #fff; }
.btn-r:hover { background: var(--red-d); }
.btn-sm { height: 34px; padding: 0 16px; font-size: 13px; }

/* ── หัวข้อหมวด ──────────────────────────────────────────────────────────── */

.sec { margin-top: 34px; }
.sec-h { display: flex; align-items: flex-end; gap: 11px; margin-bottom: 16px; }
.sec-h .ic { font-size: 20px; line-height: 1; flex: none; }
.sec-h h2 { font-size: 20px; font-weight: 600; }
.sec-h p { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
.sec-h .more {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 500; color: var(--muted); white-space: nowrap;
}
.sec-h .more:hover { color: var(--red); }
.sec-h .more svg { width: 15px; height: 15px; }

/* ── กริดการ์ด ───────────────────────────────────────────────────────────── */

.grid { display: grid; gap: 14px; }
.g8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.g6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.card { position: relative; min-width: 0; display: flex; flex-direction: column; }
.card .cv {
  position: relative; display: block; flex: none;
  border-radius: var(--r); overflow: hidden; background: var(--soft);
  box-shadow: 0 2px 10px rgba(43, 41, 39, .07);
}
.card .cv img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform .3s; }
.card:hover .cv img { transform: scale(1.04); }
.card .t {
  margin-top: 9px; font-size: 13px; font-weight: 500; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card .m { margin-top: 3px; display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--muted); }
.card .m svg { width: 13px; height: 13px; }

/* ป้ายอันดับ */
.card .rank {
  position: absolute; top: 7px; left: 7px; z-index: 2;
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--head-f); font-size: 12.5px; font-weight: 600;
  background: rgba(58, 56, 57, .88); color: #fff; backdrop-filter: blur(4px);
}
.card .rank.top { background: var(--gold); color: #4a3209; }

/* ป้าย NEW */
.card .new {
  position: absolute; top: 7px; left: 7px; z-index: 2;
  padding: 2px 8px; border-radius: 6px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .4px;
  background: var(--red); color: #fff;
}

/* ── ฟุตเตอร์ ────────────────────────────────────────────────────────────── */

.ft { background: var(--foot); color: var(--foot-ink); margin-top: 46px; }
.ft-in { display: flex; align-items: center; gap: 36px; padding: 30px 0; flex-wrap: wrap; }
.ft .logo .nm { color: #fff; }
.ft .logo .sub { color: #a8a2a0; }
.ft .logo .bk { color: #fff; }
.ft .mid { font-family: var(--head-f); font-size: 14.5px; line-height: 1.7; }
.ft .quote { font-size: 12px; color: #b3adaa; font-style: italic; line-height: 1.7; max-width: 300px; }
.ft .right { margin-left: auto; text-align: right; }
.ft .social { display: flex; gap: 10px; justify-content: flex-end; margin-bottom: 9px; }
.ft .social a { color: #d8d3cf; }
.ft .social a:hover { color: #fff; }
.ft .links { display: flex; gap: 14px; font-size: 11.5px; color: #a8a2a0; }
.ft .links a:hover { color: #fff; }

/* ── แถบล่างมือถือ ───────────────────────────────────────────────────────── */

.tabbar { display: none; }

@media (max-width: 900px) {
  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
    height: var(--tabbar-h);
    background: rgba(252, 251, 249, .97); backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .tabbar a {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; font-size: 10px; color: var(--dim);
  }
  .tabbar a.on { color: var(--red); }
  .tabbar svg { width: 19px; height: 19px; }
  body { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
}

/* ── แถวเลื่อนแนวนอนบนมือถือ ─────────────────────────────────────────────── */

@media (max-width: 900px) {
  .scroll-m {
    display: flex; gap: 11px; overflow-x: auto; scroll-snap-type: x proximity;
    margin: 0 -20px; padding: 0 20px 4px; scrollbar-width: none;
  }
  .scroll-m::-webkit-scrollbar { display: none; }
  .scroll-m > * { scroll-snap-align: start; flex: 0 0 auto; }
  .scroll-m.cards > * { width: 126px; }
  .scroll-m.tiles > * { width: 150px; }
}

/* ── จอกลาง / มือถือ ─────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .g8 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .g6 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .nav, .hd-r .login, .search { display: none; }
  .burger { display: grid; place-items: center; }
  .hd-in { gap: 10px; }

  /* โลโก้เต็ม + ปุ่มสมัครทำให้แถวหัวยาวเกินจอ ปุ่มถูกดันหลุดขอบจนกดไม่ได้
     ย่อโลโก้ (ตัดสโลแกน) และบีบปุ่มให้พอดี */
  .logo .sub { display: none; }
  .logo .nm { font-size: 17px; }
  .logo .bk, .logo .bk svg { width: 26px; height: 26px; }
  .hd-r { margin-left: auto; gap: 6px; }
  .hd-r .btn { height: 32px; padding: 0 13px; font-size: 12.5px; }
  .acct { padding: 0; border: 0; background: none; height: auto; }
  .acct span { display: none; }
  .wrap { padding: 0 16px; }
  .g8, .g6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g4, .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ft-in { flex-direction: column; align-items: flex-start; gap: 18px; }
  .ft .right { margin-left: 0; text-align: left; }
  .ft .social { justify-content: flex-start; }
}

@media (max-width: 560px) {
  .g8, .g6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sec-h h2 { font-size: 17px; }
}

/* ===========================================================================
   หน้าแรก
   =========================================================================== */

/* ── hero ────────────────────────────────────────────────────────────────── */

.hero { margin-top: 18px; }
.hero-in {
  position: relative; display: grid; grid-template-columns: 1fr 1.05fr;
  align-items: center; gap: 20px;
  background: linear-gradient(135deg, #fdf3ec 0%, #f8e8e4 48%, #efe2ee 100%);
  border-radius: var(--r-xl); overflow: hidden; min-height: 330px;
}
.hero .tx { padding: 42px 0 42px 46px; position: relative; z-index: 2; }
.hero .kick { font-size: 13px; color: var(--muted); margin: 0 0 8px; }
.hero h1 { font-size: 46px; line-height: 1.18; font-weight: 600; letter-spacing: -.3px; }
.hero h1 em { font-style: normal; color: var(--red); }
.hero .lead { font-size: 13.5px; color: #5d5651; line-height: 1.85; margin: 14px 0 22px; }
.hero .ac { display: flex; gap: 11px; flex-wrap: wrap; }
.hero .ac b { font-weight: 600; margin-left: 3px; }

.hero .art { position: relative; align-self: stretch; }
.hero .art > img { width: 100%; height: 100%; object-fit: cover; }
/* ไล่เฉดทับขอบซ้ายของภาพ ให้กลืนกับพื้นข้อความแทนรอยต่อแข็ง ๆ (ตามเรฟ) */
.hero .art::before {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, #fdf3ec 0%, rgba(253, 243, 236, .72) 14%,
                                      rgba(248, 232, 228, .22) 36%, transparent 62%);
}
.hero .hand {
  position: absolute; top: 26px; right: 128px; z-index: 3; margin: 0;
  font-family: var(--hand); font-size: 15px; line-height: 1.55; color: #6b5c55; text-align: center;
}
.hero .note {
  position: absolute; top: 96px; right: 24px; z-index: 3;
  background: #fbd9e3; color: #7b4a57; border-radius: 4px;
  padding: 14px 16px; font-family: var(--hand-en); font-size: 19px; line-height: 1.25;
  transform: rotate(3deg); box-shadow: 0 6px 16px rgba(123, 74, 87, .18);
}
.hero .note span { display: block; font-size: 15px; margin-top: 4px; }

/* แถบจุดขาย 4 ข้อ */
.feats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 14px 20px; margin: -26px 28px 0;
  position: relative; z-index: 4; box-shadow: 0 4px 18px rgba(43, 41, 39, .06);
}
.feat { display: flex; align-items: center; gap: 11px; min-width: 0; }
.feat .ic { color: var(--red); display: flex; flex: none; }
.feat .ic svg { width: 20px; height: 20px; }
.feat b { display: block; font-size: 12.5px; font-weight: 600; }
.feat small { font-size: 11px; color: var(--muted); }

/* ── ชิปแนวเรื่อง ────────────────────────────────────────────────────────── */

.gchips {
  display: flex; gap: 8px; margin-top: 26px; overflow-x: auto;
  padding-bottom: 4px; scrollbar-width: none;
}
.gchips::-webkit-scrollbar { display: none; }
.gchip {
  display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto;
  height: 36px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 500;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink); transition: .15s;
}
.gchip span { font-size: 14px; line-height: 1; }
.gchip:hover { border-color: var(--line2); }
.gchip.on { background: var(--btn); border-color: var(--btn); color: var(--btn-ink); }
.gchip.more { color: var(--muted); }

/* ── แบนเนอร์คำคม ────────────────────────────────────────────────────────── */

.qbanner {
  position: relative; display: grid; grid-template-columns: 1fr 1.15fr; align-items: center;
  background: linear-gradient(120deg, #fcefe6 0%, #f8dfdc 52%, #efdfe8 100%);
  border-radius: var(--r-xl); overflow: hidden; min-height: 210px;
}
.qbanner .tx { padding: 34px 0 34px 42px; z-index: 2; }
.qbanner h2 { font-size: 25px; line-height: 1.45; font-weight: 600; }
.qbanner p { font-size: 13px; color: #6b625d; margin: 10px 0 18px; }
.qbanner .art { position: relative; align-self: stretch; }
.qbanner .art > img { width: 100%; height: 100%; object-fit: cover; }
.qbanner .hand-en {
  position: absolute; top: 50%; right: 34px; transform: translateY(-50%); z-index: 3; margin: 0;
  font-family: var(--hand-en); font-size: 25px; line-height: 1.2; color: #7a655e; text-align: center;
}
.qbanner .hand-en span { display: block; font-size: 17px; }

/* ── ไทล์อารมณ์ ──────────────────────────────────────────────────────────── */

.mood {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  border-radius: var(--r); padding: 16px 16px; transition: .15s;
}
.mood .ic { font-size: 23px; line-height: 1; flex: none; }
.mood b { display: block; font-family: var(--head-f); font-size: 14px; font-weight: 500; }
.mood small { font-size: 11.5px; color: var(--muted); }
.mood:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(43, 41, 39, .08); }

/* ── จอกลาง / มือถือ ─────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .hero h1 { font-size: 38px; }
  .hero .tx { padding: 34px 0 34px 32px; }
  .hero .hand { right: 110px; font-size: 13px; }
  .hero .note { font-size: 16px; padding: 11px 13px; }
  .qbanner h2 { font-size: 22px; }
}

@media (max-width: 900px) {
  .hero-in { grid-template-columns: 1fr; min-height: 0; }
  .hero .tx { padding: 28px 22px 0; order: 2; }
  .hero .art { order: 1; height: 210px; }
  .hero .art > img { height: 100%; }
  .hero .hand, .hero .note { display: none; }
  .hero h1 { font-size: 32px; }
  .hero-in { padding-bottom: 26px; }
  .feats { grid-template-columns: 1fr 1fr; margin: -14px 14px 0; padding: 14px; }

  .qbanner { grid-template-columns: 1fr; }
  .qbanner .tx { padding: 26px 22px; order: 2; }
  .qbanner .art { order: 1; height: 160px; }
  .qbanner .hand-en { display: none; }
}

@media (max-width: 560px) {
  .hero h1 { font-size: 27px; }
  .hero .lead { font-size: 12.5px; }
  .hero .ac .btn { flex: 1; }
  .feats { grid-template-columns: 1fr; gap: 12px; }
  .qbanner h2 { font-size: 19px; }
}

/* ===========================================================================
   หัวหน้าเพจ + กล่อง + หน้าว่าง (ใช้ร่วมหลายหน้า)
   =========================================================================== */

.phead { padding: 28px 0 18px; }
.phead h1 { font-size: 30px; font-weight: 600; }
.phead p { margin: 6px 0 0; font-size: 13.5px; color: var(--muted); }

.empty { padding: 54px 20px; text-align: center; color: var(--muted); }
.empty h2 { font-family: var(--head-f); font-size: 18px; color: var(--ink); margin-bottom: 6px; }

.box {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 18px; margin-bottom: 14px;
}
.box h3 { font-size: 15px; font-weight: 600; margin-bottom: 11px; }
.boxh { display: flex; align-items: baseline; gap: 10px; margin-bottom: 11px; }
.boxh h3 { margin: 0; }
.boxh .cnt { margin-left: auto; font-size: 12px; color: var(--muted); }
.morehint { margin-top: 12px; text-align: center; font-size: 12px; color: var(--dim); }

/* ===========================================================================
   หน้า มังงะทั้งหมด
   =========================================================================== */

.fbar {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 16px 18px; display: flex; flex-direction: column; gap: 11px;
}
.fsearch {
  display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 15px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 999px;
}
.fsearch .ic { color: var(--dim); display: flex; }
.fsearch input { flex: 1; min-width: 0; background: none; border: 0; outline: none; font-size: 13px; color: var(--ink); }

.frow { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.flab { flex: none; width: 66px; padding-top: 8px; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.fchips { display: flex; gap: 7px; flex-wrap: wrap; min-width: 0; }
.fchips .gchip { height: 32px; padding: 0 12px; font-size: 12.5px; }

.sortrow { align-items: center; }
.sortrow .flab { padding-top: 0; }
.sel {
  height: 34px; padding: 0 11px; border-radius: var(--r-sm);
  background: var(--bg); border: 1px solid var(--line); color: var(--ink); font-size: 12.5px; outline: none;
}
.reset { margin-left: auto; font-size: 12.5px; color: var(--red); }

/* ===========================================================================
   หน้า จัดอันดับ
   =========================================================================== */

.rhero {
  position: relative; margin-top: 18px; padding: 34px 42px;
  background: linear-gradient(120deg, #fdf0e8 0%, #f9e3e0 55%, #f1e4ee 100%);
  border-radius: var(--r-xl); overflow: hidden;
}
.rhero .kick { font-size: 12.5px; color: var(--muted); margin: 0 0 6px; }
.rhero h1 { font-size: 36px; line-height: 1.22; font-weight: 600; }
.rhero h1 em { font-style: normal; color: var(--red); }
.rhero .lead { font-size: 13px; color: #5d5651; margin: 10px 0 18px; }
.rhero .ptabs { display: flex; gap: 8px; flex-wrap: wrap; }
.rhero .hand-en {
  position: absolute; right: 48px; top: 50%; transform: translateY(-50%); margin: 0;
  font-family: var(--hand-en); font-size: 27px; line-height: 1.15; color: #7a655e; text-align: center;
}
.rhero .hand-en span { display: block; font-size: 18px; }

/* แท่นอันดับ 1-3 */
.podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: end; }
.pod {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 16px 14px 18px; transition: .18s;
}
.pod:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(43, 41, 39, .09); }
.pod.p1 { border-color: #f1d79a; background: linear-gradient(180deg, #fffaf0, #fff); padding-top: 24px; }
.pod .medal { font-size: 26px; line-height: 1; margin-bottom: 10px; }
.pod img { width: 118px; aspect-ratio: 3/4; object-fit: cover; border-radius: var(--r); box-shadow: 0 3px 12px rgba(43,41,39,.1); }
.pod.p1 img { width: 140px; }
.pod b { display: block; margin-top: 11px; font-family: var(--head-f); font-size: 14px; font-weight: 500; }
.pod .st { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; font-size: 12px; color: var(--muted); }
.pod .st svg { width: 13px; height: 13px; }
.pod .gn { margin-top: 3px; font-size: 11.5px; color: var(--dim); }

/* อันดับ 4+ แบบรายการ */
.rlist { display: flex; flex-direction: column; gap: 8px; }
.rrow {
  display: flex; align-items: center; gap: 13px; padding: 10px 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); transition: .15s;
}
.rrow:hover { border-color: var(--line2); }
.rrow .n { flex: none; width: 26px; font-family: var(--head-f); font-size: 15px; font-weight: 600; color: var(--dim); text-align: center; }
.rrow img { width: 44px; aspect-ratio: 3/4; object-fit: cover; border-radius: var(--r-sm); flex: none; }
.rrow .in { flex: 1; min-width: 0; }
.rrow b { display: block; font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rrow small { font-size: 11.5px; color: var(--muted); }
.rrow .rt { flex: none; text-align: right; }
.rrow .st { display: flex; align-items: center; gap: 5px; justify-content: flex-end; font-size: 12.5px; color: var(--ink); }
.rrow .st svg { width: 13px; height: 13px; color: var(--muted); }
.rrow .ep { font-size: 11.5px; color: var(--dim); }

/* อันดับแยกตามแนว */
.gbox { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; }
.gbox h3 { font-size: 15px; font-weight: 600; margin-bottom: 10px; }
.mini li a { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.mini li:last-child a { border: 0; }
.mini .n { width: 18px; font-family: var(--head-f); font-size: 13px; font-weight: 600; color: var(--dim); flex: none; }
.mini .n.top { color: var(--gold); }
.mini img { width: 30px; aspect-ratio: 3/4; object-fit: cover; border-radius: 5px; flex: none; }
.mini .t { flex: 1; min-width: 0; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini .v { font-size: 11.5px; color: var(--muted); flex: none; }

/* ===========================================================================
   หน้า รายละเอียดเรื่อง
   =========================================================================== */

.crumb { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); padding: 18px 0 14px; }
.crumb a:hover { color: var(--red); }
.crumb b { color: var(--ink); font-weight: 500; }
.crumb svg { width: 13px; height: 13px; color: var(--dim); }

.shead { position: relative; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.shead .bg { position: absolute; inset: 0; background-size: cover; background-position: center 30%; filter: blur(34px) saturate(.75); transform: scale(1.2); opacity: .45; }
.shead::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.93)); }
.sh-in { position: relative; z-index: 2; display: flex; gap: 26px; padding: 26px; }
.shead .cv { flex: none; width: 190px; border-radius: var(--r); overflow: hidden; box-shadow: 0 6px 20px rgba(43,41,39,.14); }
.shead .cv img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.shead .tx { flex: 1; min-width: 0; }
.shead h1 { font-size: 30px; line-height: 1.25; font-weight: 600; }
.shead .en { font-size: 13.5px; color: var(--muted); margin: 4px 0 0; }
.shead .by { font-size: 13px; color: var(--muted); margin: 8px 0 0; }
.shead .by b { color: var(--ink); font-weight: 500; }
.shead .chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 14px 0; }
.shead .chips .gchip { height: 30px; padding: 0 12px; font-size: 12px; }
.shead .stats { display: flex; gap: 28px; flex-wrap: wrap; margin-bottom: 18px; }
.shead .stats div { display: flex; flex-direction: column; }
.shead .stats b { font-family: var(--head-f); font-size: 19px; font-weight: 600; line-height: 1.2; }
.shead .stats small { font-size: 11.5px; color: var(--muted); }
.shead .ac { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-ico { width: 42px; padding: 0; }

.s2 { display: grid; grid-template-columns: 1.7fr 1fr; gap: 16px; margin-top: 16px; align-items: start; }
.syn { font-size: 13.5px; line-height: 1.85; color: #4e4845; margin: 0; }

.chlist { display: flex; flex-direction: column; }
.chlist .ch {
  display: flex; align-items: center; gap: 12px; padding: 11px 12px;
  border-radius: var(--r-sm); font-size: 13px; transition: .12s;
}
.chlist .ch:nth-child(odd) { background: var(--bg); }
.chlist .ch:hover { background: var(--red-bg); }
.chlist .ch.on { background: var(--red-bg); color: var(--red); font-weight: 500; }
.chlist .no { flex: none; font-weight: 500; min-width: 72px; }
.chlist .t { flex: 1; min-width: 0; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chlist .d { flex: none; font-size: 11.5px; color: var(--dim); }
.chlist .tag { flex: none; padding: 1px 7px; border-radius: 5px; font-size: 10px; font-weight: 600; background: var(--red); color: #fff; }

.kv { display: flex; flex-direction: column; }
.kv li { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.kv li:last-child { border: 0; }
.kv span { flex: none; width: 82px; color: var(--muted); }
.kv b { font-weight: 500; min-width: 0; }

.share .sbtns { display: flex; gap: 8px; }
.share .sbtns a {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg); border: 1px solid var(--line); color: var(--muted);
}
.share .sbtns a:hover { background: var(--red-bg); border-color: var(--red); color: var(--red); }

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

body.reading { background: #f3efe9; }
body.reading .ft { margin-top: 0; }

.rbar { position: sticky; top: var(--head-h); z-index: 90; background: rgba(252,251,249,.96); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.rbar-in { display: flex; align-items: center; gap: 14px; height: 54px; }
.rbar .ttl { flex: 1; min-width: 0; }
.rbar .ttl b { display: block; font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rbar .ttl span { font-size: 11.5px; color: var(--muted); }
.rtools { display: flex; align-items: center; gap: 7px; flex: none; }
.rtools .pg { font-size: 12.5px; color: var(--muted); margin-right: 3px; }
.rtools .pg em { font-style: normal; font-weight: 600; color: var(--ink); }
.ibtn { width: 32px; height: 32px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--bg); border: 1px solid var(--line); color: var(--muted); }
.ibtn:hover, .ibtn.on { border-color: var(--red); color: var(--red); }
.rprog { height: 3px; background: var(--line); }
.rprog i { display: block; height: 100%; width: 0; background: var(--red); transition: width .2s; }

.rgrid { display: grid; grid-template-columns: 250px minmax(0, 820px); gap: 16px; justify-content: center; padding: 16px 20px 40px; align-items: start; }
.rside { position: sticky; top: calc(var(--head-h) + 70px); max-height: calc(100vh - 150px); overflow: auto; }
.rinfo { display: flex; gap: 11px; }
.rinfo img { width: 58px; aspect-ratio: 3/4; object-fit: cover; border-radius: var(--r-sm); flex: none; }
.rinfo .t { display: block; font-size: 13px; font-weight: 500; }
.rinfo small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.rinfo .ep { display: inline-block; margin-top: 6px; font-size: 11.5px; color: var(--red); }
.chlist.mini .ch { padding: 8px 10px; font-size: 12.5px; }
.chlist.mini .no { min-width: 0; flex: 1; }

.rbody { background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.rbody .pg { margin: 0 0 var(--gap, 0); position: relative; }
.rbody img { width: 100%; height: auto; display: block; }
.rbody[data-fit="height"] img { max-height: calc(100vh - 140px); width: auto; margin: 0 auto; }
.rbody[data-fit="orig"] { overflow-x: auto; }
.rbody[data-fit="orig"] img { width: auto; max-width: none; margin: 0 auto; }
.rbody figcaption { position: absolute; right: 10px; bottom: 10px; padding: 3px 9px; border-radius: 6px; font-size: 11px; font-weight: 600; background: rgba(43,41,39,.6); color: #fff; }
.rbody.nonums figcaption { display: none; }
.rend { padding: 30px 20px; text-align: center; background: var(--bg); border-top: 1px solid var(--line); }
.rend h3 { font-size: 16px; margin-bottom: 4px; }
.rend p { font-size: 12.5px; color: var(--muted); margin: 0 0 14px; }
.rend-row { display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; }

.rsheet { position: fixed; inset: 0; z-index: 200; background: rgba(43,41,39,.4); }
.rsheet[hidden] { display: none; }
.rsheet-in { position: absolute; right: 24px; top: calc(var(--head-h) + 66px); width: 300px; background: var(--surface); border: 1px solid var(--line2); border-radius: var(--r-lg); padding: 18px; box-shadow: 0 12px 34px rgba(43,41,39,.18); }
.rsheet-h { display: flex; align-items: center; margin-bottom: 6px; }
.rsheet-h b { font-size: 15px; }
.rsheet-h button { margin-left: auto; color: var(--muted); font-size: 15px; }
.rsheet h4 { font-size: 12px; font-weight: 500; color: var(--muted); margin: 15px 0 7px; }
.seg { display: grid; grid-auto-flow: column; gap: 6px; }
.seg button { height: 44px; border-radius: var(--r-sm); font-size: 11.5px; background: var(--bg); border: 1px solid var(--line); color: var(--muted); padding: 0 4px; }
.seg button.on { background: var(--red-bg); border-color: var(--red); color: var(--red); }
.tog { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 13px; }
.tog span { flex: 1; }
.tog input { display: none; }
.tog i { width: 38px; height: 22px; border-radius: 999px; background: var(--line2); position: relative; transition: .2s; flex: none; }
.tog i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: .2s; }
.tog input:checked + i { background: var(--red); }
.tog input:checked + i::after { left: 19px; }

.rbottom { display: none; }

/* ===========================================================================
   หน้า ข่าวสาร
   =========================================================================== */

.nfeat {
  display: grid; grid-template-columns: 1.1fr 1fr; align-items: stretch;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden;
}
/* ปล่อยให้คอลัมน์ข้อความเป็นตัวกำหนดความสูงแถว ไม่ใช่สัดส่วนรูปปก 3:4
   ไม่งั้นรูปจะยืดสูงเป็น 800px+ */
.nfeat .art { position: relative; min-height: 260px; }
.nfeat .art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nfeat .tx { padding: 28px 30px; display: flex; flex-direction: column; justify-content: center; }
.nfeat h2 { font-size: 24px; line-height: 1.35; margin: 10px 0; }
.nfeat p { font-size: 13.5px; color: var(--muted); line-height: 1.8; margin: 0 0 14px; }
.cat { display: inline-block; align-self: flex-start; padding: 3px 11px; border-radius: 999px; font-size: 11px; font-weight: 500; background: var(--red-bg); color: var(--red); }
.date { font-size: 12px; color: var(--dim); }

.nlist { display: flex; flex-direction: column; gap: 10px; }
.nrow {
  display: flex; gap: 16px; padding: 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); transition: .15s;
}
.nrow:hover { border-color: var(--line2); }
.nrow img { width: 110px; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--r); flex: none; }
.nrow .in { flex: 1; min-width: 0; }
.nrow b { display: block; font-family: var(--head-f); font-size: 15px; font-weight: 500; margin: 7px 0 5px; }
.nrow p { font-size: 12.5px; color: var(--muted); line-height: 1.7; margin: 0 0 7px; }

/* ===========================================================================
   จอกลาง / มือถือ — หน้าที่เพิ่มมาใหม่
   =========================================================================== */

@media (max-width: 1100px) {
  .s2 { grid-template-columns: 1fr; }
  .rgrid { grid-template-columns: minmax(0, 820px); }
  .rside { display: none; }
  .rhero .hand-en { display: none; }
  .rhero h1 { font-size: 29px; }
}

@media (max-width: 900px) {
  .phead h1 { font-size: 25px; }
  .frow { flex-direction: column; gap: 7px; }
  .flab { width: auto; padding-top: 0; }
  .sortrow { flex-direction: row; align-items: center; }

  .podium { grid-template-columns: 1fr; }
  .pod.p1 { order: -1; }
  .pod { flex-direction: row; text-align: left; align-items: center; gap: 13px; padding: 13px; }
  .pod img, .pod.p1 img { width: 76px; }
  .pod .medal { margin: 0; }
  .pod b { margin-top: 0; }

  .sh-in { flex-direction: column; padding: 18px; }
  .shead .cv { width: 150px; }
  .shead h1 { font-size: 24px; }
  .shead .stats { gap: 20px; }

  .rbar { top: var(--head-h); }
  .rbar-in { height: 48px; gap: 10px; }
  .rtools .pg, .rtools .ibtn:not(#btnset) { display: none; }
  .rgrid { padding: 0; }
  .rbody { border-radius: 0; border-left: 0; border-right: 0; }
  .rsheet-in { right: 0; left: 0; top: auto; bottom: 0; width: auto; border-radius: var(--r-xl) var(--r-xl) 0 0; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }

  .rbottom {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
    background: rgba(252,251,249,.97); backdrop-filter: blur(12px); border-top: 1px solid var(--line);
    padding: 8px 14px calc(8px + env(safe-area-inset-bottom));
  }
  .rb-prog { height: 4px; border-radius: 3px; background: var(--line); }
  .rb-prog i { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--red); transition: width .2s; }
  .rb-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
  .rb-row .btn { flex: 1; }
  body.reading .tabbar { display: none; }
  body.reading { padding-bottom: 92px; }

  .nfeat { grid-template-columns: 1fr; }
  .nfeat .art { min-height: 170px; }
  .nfeat .tx { padding: 20px; }
  .nfeat h2 { font-size: 19px; }
  .nrow img { width: 84px; }
}

@media (max-width: 560px) {
  .shead .ac .btn { flex: 1; }
  .chlist .t { display: none; }
  .nrow { gap: 11px; }
  .nrow b { font-size: 13.5px; }
  .nrow p { display: none; }
}

/* ===========================================================================
   โหมดมืด

   เรฟมีปุ่มสลับโหมดแต่ไม่ได้ออกแบบหน้าตาโหมดมืดมาให้ — ชุดสีนี้ออกแบบใหม่
   โดยยึดหลักเดียวกับโหมดสว่าง: โทน "อุ่น" ไม่ใช่เทาอมน้ำเงิน และคงสีแบรนด์ไว้
   แต่ยกความสว่างขึ้นให้อ่านออกบนพื้นเข้ม (#d0545c → #e9838a)

   เปิดด้วย <html data-theme="dark"> · ถ้าผู้ใช้ยังไม่เคยเลือก จะตามค่าของเครื่อง
   =========================================================================== */

:root[data-theme="dark"] {
  --bg:      #1a1715;
  --surface: #232020;
  --head:    #1d1a18;
  --soft:    #2b2725;
  --line:    #332e2b;
  --line2:   #443d39;

  --ink:     #f1ede9;
  --muted:   #a79e98;
  --dim:     #7d746e;

  --red:     #e9838a;
  --red-d:   #f0969c;
  --red-bg:  rgba(233, 131, 138, .14);
  --gold:    #f3bd60;

  --btn:     #e9838a;
  --btn-ink: #2a1b1d;
  --foot:    #141211;
  --foot-ink:#ddd7d2;

  --shadow:  rgba(0, 0, 0, .34);

  --m-pink:  #342526;
  --m-amber: #352d1f;
  --m-red:   #35241f;
  --m-blue:  #1f2733;
  --m-purple:#282334;
  --m-green: #1f2b22;
}

/* ── จุดที่ฮาร์ดโค้ดสีขาว/ครีมไว้ ต้องตามมาแก้ด้วย ───────────────────────── */

:root[data-theme="dark"] .hd { background: rgba(29, 26, 24, .93); }
:root[data-theme="dark"] .tabbar { background: rgba(29, 26, 24, .97); }
:root[data-theme="dark"] .rbar { background: rgba(29, 26, 24, .96); }
:root[data-theme="dark"] .rbottom { background: rgba(29, 26, 24, .97); }

/* hero / แบนเนอร์ / hero อันดับ ใช้ไล่เฉดอ่อนแบบฮาร์ดโค้ด เปลี่ยนเป็นโทนเข้ม */
:root[data-theme="dark"] .hero-in {
  background: linear-gradient(135deg, #2b211f 0%, #33232a 48%, #2a2433 100%);
}
:root[data-theme="dark"] .hero .art::before {
  background: linear-gradient(90deg, #2b211f 0%, rgba(43, 33, 31, .72) 14%,
                                      rgba(51, 35, 42, .22) 36%, transparent 62%);
}
:root[data-theme="dark"] .qbanner,
:root[data-theme="dark"] .rhero {
  background: linear-gradient(120deg, #2c2220 0%, #342429 55%, #2b2533 100%);
}
:root[data-theme="dark"] .hero .lead,
:root[data-theme="dark"] .qbanner p,
:root[data-theme="dark"] .rhero .lead { color: #c3b9b3; }
:root[data-theme="dark"] .hero .hand,
:root[data-theme="dark"] .qbanner .hand-en,
:root[data-theme="dark"] .rhero .hand-en { color: #cdbfb8; }
:root[data-theme="dark"] .hero .note { background: #4a2f38; color: #f3d7df; }

/* หน้าเรื่อง: ฉากหลังเบลอเป็นขาวทับอยู่ ต้องกลับเป็นเข้ม */
:root[data-theme="dark"] .shead::after {
  background: linear-gradient(180deg, rgba(35, 32, 32, .72), rgba(35, 32, 32, .95));
}
:root[data-theme="dark"] .pod.p1 {
  border-color: #5a4524; background: linear-gradient(180deg, #2e2619, var(--surface));
}
:root[data-theme="dark"] .syn { color: #cdc5c0; }

/* หน้าอ่าน: พื้นกระดาษต้องหรี่ลง ไม่งั้นแสบตาในที่มืด */
:root[data-theme="dark"] body.reading { background: #121010; }
:root[data-theme="dark"] .rbody { background: #151312; }
:root[data-theme="dark"] .rbody img { filter: brightness(.82); }
:root[data-theme="dark"] .rend { background: var(--surface); }

/* เงาการ์ดในโหมดมืดต้องเข้มกว่าเดิม ไม่งั้นมองไม่เห็น */
:root[data-theme="dark"] .card .cv { box-shadow: 0 2px 12px var(--shadow); }

/* ===========================================================================
   เข้าสู่ระบบ / สมัครสมาชิก / ของฉัน / แบ่งหน้า / รายการโปรด
   =========================================================================== */

/* ── หน้าฟอร์ม ───────────────────────────────────────────────────────────── */

.authwrap { padding-top: 30px; padding-bottom: 20px; }
.authcard {
  display: grid; grid-template-columns: 1fr .85fr; align-items: stretch;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl); overflow: hidden;
}
.authcard .tx { padding: 36px 40px; }
.authcard h1 { font-size: 27px; font-weight: 600; }
.authcard h1 em { font-style: normal; color: var(--red); }
.authcard > .tx > p { font-size: 13.5px; color: var(--muted); margin: 7px 0 22px; }

.authcard .art { position: relative; min-height: 380px; }
.authcard .art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.authcard .hand {
  position: absolute; right: 26px; bottom: 26px; margin: 0; z-index: 2;
  font-family: var(--hand); font-size: 17px; line-height: 1.5; color: #6b5c55; text-align: right;
}

.perks { margin: 0 0 22px; display: flex; flex-direction: column; gap: 8px; }
.perks li { display: flex; align-items: center; gap: 9px; font-size: 13px; color: #4e4845; }
.perks svg { width: 16px; height: 16px; color: var(--red); }

.fld { display: block; margin-bottom: 15px; }
.fld > span { display: block; font-size: 12.5px; font-weight: 500; margin-bottom: 6px; }
.fld input {
  width: 100%; height: 44px; padding: 0 14px; border-radius: var(--r-sm);
  background: var(--bg); border: 1px solid var(--line); color: var(--ink);
  font-size: 13.5px; outline: none; transition: .15s;
}
.fld input:focus { border-color: var(--red); background: var(--surface); }
.fld input.bad { border-color: var(--red); background: var(--red-bg); }
.err { display: block; min-height: 15px; margin-top: 4px; font-size: 11.5px; font-style: normal; color: var(--red); }

/* แถบวัดความแข็งแรงรหัสผ่าน */
.meter { height: 4px; border-radius: 3px; background: var(--line); overflow: hidden; margin-top: 7px; }
.meter i { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--red); transition: width .25s; }
.meter i[data-level="low"]  { background: #e0736b; }
.meter i[data-level="mid"]  { background: var(--gold); }
.meter i[data-level="high"] { background: #67a06e; }

.chk { display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; cursor: pointer; }
.chk input { display: none; }
.chk i {
  flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 5px;
  border: 1px solid var(--line2); background: var(--bg); position: relative; transition: .15s;
}
.chk input:checked + i { background: var(--btn); border-color: var(--btn); }
.chk input:checked + i::after {
  content: ''; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px;
  border: solid var(--btn-ink); border-width: 0 2px 2px 0; transform: rotate(42deg);
}
.chk a { color: var(--red); }

.frow2 { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 18px; }
.small { font-size: 12.5px; color: var(--red); }
.authcard form .btn { width: 100%; margin-top: 16px; }

.orline { display: flex; align-items: center; gap: 12px; margin: 22px 0 16px; color: var(--dim); font-size: 12px; }
.orline::before, .orline::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.social-login { display: flex; flex-direction: column; gap: 9px; }
.social-login .btn { width: 100%; }
.swap { margin: 22px 0 0; text-align: center; font-size: 13px; color: var(--muted); }
.swap a { color: var(--red); font-weight: 500; }

/* ── หน้าของฉัน ──────────────────────────────────────────────────────────── */

.profile {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 22px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 20px 24px;
}
.pav { width: 62px; height: 62px; border-radius: 50%; flex: none; }
.pin { flex: 1; min-width: 0; }
.pin h1 { font-size: 21px; font-weight: 600; }
.pin p { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
.pstat { display: flex; gap: 26px; flex: none; }
.pstat div { display: flex; flex-direction: column; }
.pstat b { font-family: var(--head-f); font-size: 19px; font-weight: 600; line-height: 1.2; }
.pstat small { font-size: 11.5px; color: var(--muted); }

.atabs {
  display: flex; gap: 6px; margin-top: 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 5px;
}
.atabs button {
  flex: 1; height: 40px; border-radius: var(--r); font-size: 13.5px; font-weight: 500; color: var(--muted);
}
.atabs button.on { background: var(--btn); color: var(--btn-ink); }

.empty.gate { padding: 70px 20px; }
.empty .ac { display: flex; gap: 10px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
.note { font-size: 12.5px; color: var(--muted); line-height: 1.75; margin: 0 0 14px; }

/* แถบความคืบหน้าในรายการอ่านค้าง */
.pbar { height: 4px; border-radius: 3px; background: var(--line); overflow: hidden; margin-top: 7px; max-width: 260px; }
.pbar i { display: block; height: 100%; border-radius: 3px; background: var(--red); }

/* ── ปุ่มรายการโปรดที่กดแล้ว ─────────────────────────────────────────────── */

#favbtn.faved { background: var(--red); border-color: var(--red); color: #fff; }

/* ── แบ่งหน้า ────────────────────────────────────────────────────────────── */

.pager { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; margin-top: 24px; }
.pager button {
  min-width: 36px; height: 36px; padding: 0 12px; border-radius: var(--r-sm);
  background: var(--surface); border: 1px solid var(--line); color: var(--ink); font-size: 13px; transition: .15s;
}
.pager button:hover:not(:disabled) { border-color: var(--line2); }
.pager button.on { background: var(--btn); border-color: var(--btn); color: var(--btn-ink); font-weight: 600; }
.pager button:disabled { opacity: .4; cursor: default; }
.pager .gap { color: var(--dim); padding: 0 2px; }

.loadmore { width: 100%; margin-top: 12px; flex-direction: column; height: auto; padding: 11px; gap: 2px; }
.loadmore small { font-size: 11px; color: var(--muted); font-weight: 400; }

/* ── จอเล็ก ──────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .authcard { grid-template-columns: 1fr; }
  .authcard .art { min-height: 150px; order: -1; }
  .authcard .hand { font-size: 14px; right: 18px; bottom: 16px; }
  .authcard .tx { padding: 24px 20px; }
  .authcard h1 { font-size: 23px; }

  .profile { padding: 16px; gap: 12px; }
  .pstat { gap: 20px; }
  .atabs button { font-size: 12.5px; }
}

@media (max-width: 560px) {
  .pav { width: 50px; height: 50px; }
  .pin h1 { font-size: 18px; }
  .pager button { min-width: 32px; height: 32px; padding: 0 9px; font-size: 12.5px; }
}

/* ===========================================================================
   ส่วนที่มีเฉพาะบนเว็บจริง (ไม่มีในม็อกอัพ)
   — บทความข่าวสาร · หน้าเพจ · ปกที่ไม่มีรูป · ปุ่มกลับในหน้าอ่าน
   =========================================================================== */

/* ── ปกที่คลังไม่มีรูปให้ ────────────────────────────────────────────────── */

.noimg {
  display: block; width: 100%; aspect-ratio: 3 / 4;
  background: linear-gradient(135deg, var(--soft), var(--line));
  position: relative;
}
.noimg::after {
  content: '📖'; position: absolute; inset: 0;
  display: grid; place-items: center; font-size: 26px; opacity: .35;
}
.rinfo .noimg { width: 58px; aspect-ratio: 3 / 4; border-radius: var(--r-sm); }
.shead .cv .noimg { aspect-ratio: 3 / 4; }

/* ── ปุ่ม "กลับ" ในหน้าอ่าน — ไอคอนชุดนี้มีแต่ลูกศรขวา จึงพลิกด้าน ─────── */

.rbar .back svg { transform: scaleX(-1); }

/* ── บทความ / หน้าเพจ ───────────────────────────────────────────────────── */

.post { max-width: 780px; margin: 0 auto; padding: 22px 0 10px; }
.post h1 { font-size: 30px; line-height: 1.3; margin: 10px 0 6px; }
.post .date { font-size: 12.5px; color: var(--dim); margin: 0 0 18px; }
.post .phero { border-radius: var(--r-lg); overflow: hidden; margin-bottom: 22px; }
.post .phero img { width: 100%; height: auto; }

.pbody { font-size: 15px; line-height: 1.95; color: #3f3a37; }
:root[data-theme="dark"] .pbody { color: #ccc4bf; }
.pbody > * + * { margin-top: 18px; }
.pbody h2 { font-size: 21px; margin-top: 30px; }
.pbody h3 { font-size: 17px; margin-top: 24px; }
.pbody a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.pbody img { border-radius: var(--r); height: auto; }
.pbody blockquote {
  margin: 22px 0; padding: 14px 20px; border-left: 3px solid var(--red);
  background: var(--surface); border-radius: 0 var(--r) var(--r) 0; font-style: italic;
}
.pbody ul, .pbody ol { padding-left: 22px; }
.pbody ul li { list-style: disc; }
.pbody ol li { list-style: decimal; }
.pbody li + li { margin-top: 6px; }
.pbody code {
  background: var(--soft); padding: 2px 6px; border-radius: 5px; font-size: .92em;
}

/* ── ปุ่มรายการโปรดที่กดแล้ว ─────────────────────────────────────────────── */

[data-fav].faved { background: var(--red); border-color: var(--red); color: #fff; }
.rtools [data-fav].faved { color: #fff; }

/* ── แบ่งหน้าของ WordPress (paginate_links) ─────────────────────────────── */

.pager a, .pager span.on, .pager span:not(.gap) {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 12px; border-radius: var(--r-sm);
  background: var(--surface); border: 1px solid var(--line); color: var(--ink);
  font-size: 13px; transition: .15s;
}
.pager a:hover { border-color: var(--line2); }
.pager .on { background: var(--btn); border-color: var(--btn); color: var(--btn-ink); font-weight: 600; }

/* ── สถานะว่าง ───────────────────────────────────────────────────────────── */

.note { font-size: 13px; color: var(--muted); line-height: 1.8; margin: 0; }

@media (max-width: 560px) {
  .post h1 { font-size: 23px; }
  .pbody { font-size: 14.5px; }
}


/* ===========================================================================
   รอบแก้เช็กลิสต์ SEO — 2026-10-09
   =========================================================================== */

/* ชื่อเรื่องในการ์ดเปลี่ยนจาก <a class="t"> เป็น <h3 class="t">
   reset ตั้ง h1–h4 ให้ใช้ --head-f จึงต้องดึงกลับเป็นฟอนต์เนื้อหาให้หน้าตาเท่าเดิม */
.card .t { font-family: var(--body); }

/* หัวข้อกล่องในหน้าเรื่อง/หน้าอ่าน บางตัวเลื่อนจาก h3 เป็น h2 */
.box h2 { font-size: 15px; font-weight: 600; margin-bottom: 11px; }
.boxh h2 { font-size: 15px; font-weight: 600; margin: 0; }

/* H1 ในแถบหน้าอ่าน (เคยเป็น <b>) */
.rbar .ttl h1 {
  display: block; font-size: 13.5px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ชื่อข่าวในรายการ (เคยเป็น <b>) */
.nrow .nt {
  display: block; font-family: var(--head-f); font-size: 15px; font-weight: 500; margin: 7px 0 5px;
}

/* ── หน้ารวมประเภท /genres/ ──────────────────────────────────────────────── */

.gidx { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.gcard {
  display: flex; align-items: center; gap: 12px; padding: 14px; min-width: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  transition: border-color .2s, transform .2s;
}
.gcard:hover { border-color: var(--red); transform: translateY(-2px); }
.gcard .ic { font-size: 22px; line-height: 1; flex: none; }
.gcard .tx { min-width: 0; }
.gcard h3 {
  font-size: 14px; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gcard small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--muted); }

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

.ftseo {
  border-top: 1px solid var(--line); margin-top: 46px;
  padding: 34px 0 8px; background: var(--soft);
}
.ftseo + .ft { margin-top: 0; }                 /* ไม่ต้องเว้นสองชั้น */
.ftseo h2 { font-size: 19px; 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: 0 34px; }
.ftseo p { margin: 0 0 10px; font-size: 13px; line-height: 1.85; color: var(--muted); }
.ftseo p b { color: var(--ink); font-weight: 600; }
.ftseo a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.ftseo-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.ftseo-tags a {
  padding: 5px 11px; border: 1px solid var(--line2); border-radius: 999px;
  font-size: 12px; color: var(--muted); text-decoration: none;
}
.ftseo-tags a:hover { border-color: var(--red); color: var(--red); }
.ftseo-note {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px dashed var(--line2); font-size: 12.5px;
}

@media (max-width: 900px) {
  .gidx { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ftseo .cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .gidx { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .gcard { padding: 11px; gap: 9px; }
  .gcard .ic { font-size: 18px; }
  .gcard h3 { font-size: 13px; }
  .ftseo { padding: 26px 0 6px; margin-top: 32px; }
  .ftseo h2 { font-size: 17px; }
  .ftseo p { font-size: 12.5px; }
}

/* แถวตอนที่ยังอ่านไม่ได้ — เป็น <span> ไม่ใช่ <a> จึงต้องปิด hover/cursor ด้วย */
.chlist .ch.off { cursor: default; color: var(--dim); }
.chlist .ch.off:hover { background: none; }
.chlist .ch.off:nth-child(odd):hover { background: var(--bg); }
.chlist .tag.soft { background: var(--soft); color: var(--muted); font-weight: 500; }
.chlist .pager { margin-top: 14px; }

/* ลิงก์แถวท้ายเว็บเคยสูง 18px — เล็กเกินกว่าจะกดด้วยนิ้วบนมือถือ */
.ft .links { flex-wrap: wrap; row-gap: 2px; }
.ft .links a { display: inline-block; padding: 5px 0; }
@media (max-width: 560px) {
  .ft .links { gap: 10px 14px; }
  .ft .links a { padding: 6px 0; }
}