/* ===========================================
   หงส์มณี — ธีมขาวสะอาด เรียบหรู มินิมอล (v2)
   =========================================== */

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

:root {
  --bg: #FFFFFF;
  --bg-soft: #FAFAF8;
  --card: #FFFFFF;
  --card-soft: #FAFAF8;
  --ink: #222222;
  --ink-soft: #9A958D;
  --line: #ECEAE6;
  --brand: #3D7A6E;
  --brand-deep: #2C5F55;
  --brand-soft: #D7E6E0;
  --brand-fade: #EFF5F2;
  --rose: #B56576;
  --rose-soft: #F2E4E7;
  --shadow: 0 1px 3px rgba(0, 0, 0, .05);
  --shadow-lift: 0 12px 28px rgba(0, 0, 0, .10);
  --radius: 16px;
  --font-head: 'Sarabun', sans-serif;
  --font-body: 'Sarabun', sans-serif;
}

[data-theme="dark"] {
  --bg: #141514;
  --bg-soft: #1A1C1B;
  --card: #1E211F;
  --card-soft: #232624;
  --ink: #E8EAE8;
  --ink-soft: #8C918E;
  --line: #2B2F2D;
  --brand: #7FAEA2;
  --brand-deep: #93BFB4;
  --brand-soft: #2C443D;
  --brand-fade: #1F2E29;
  --rose: #C98A97;
  --rose-soft: #36272B;
  --shadow: 0 1px 3px rgba(0, 0, 0, .4);
  --shadow-lift: 0 12px 28px rgba(0, 0, 0, .5);
}

html { scroll-behavior: auto; }

/* พื้นหลังย้ายไปไว้ที่ html เพื่อให้ body::before (ก้อนสีนุ่ม) มีที่ยืนอยู่ "เหนือพื้น แต่ใต้เนื้อหา"
   ถ้าปล่อยพื้นไว้ที่ body ตัว ::before ที่ z-index:-1 จะมุดไปอยู่หลังพื้นแล้วมองไม่เห็นเลย */
html { background: var(--bg); }

body {
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  transition: background .3s, color .3s;
}

h1, h2, h3, h4, h5, .font-head { font-family: var(--font-head); }

a { color: var(--brand-deep); text-decoration: none; }
a:hover { color: var(--brand); }

::selection { background: var(--brand-soft); }

/* ---------- Navbar: โลโก้กลาง ลิงก์ซ้าย แอ็กชันขวา ---------- */
.aw-navbar {
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 1020;
}
.nav-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .5rem;
}
.nav-grid > .aw-logo { justify-self: center; }
.nav-right {
  display: flex;
  align-items: center;
  gap: .4rem;
  justify-self: end;
}
@media (max-width: 860px) {
  .nav-grid { display: flex; flex-wrap: wrap; justify-content: center; }
  .nav-grid > .aw-logo { order: -1; width: 100%; justify-content: center; }
}
.aw-logo {
  font-family: 'Mali', cursive;
  font-weight: 700;
  font-size: 1.45rem;
  color: var(--brand-deep);
  display: flex;
  align-items: center;
  gap: .55rem;
}
.aw-logo:hover { color: var(--brand); }
.aw-nav-links { display: flex; align-items: center; gap: .15rem; flex-wrap: wrap; }
.aw-nav-link {
  font-size: .95rem;
  font-weight: 600;
  color: var(--ink);
  padding: .42rem .9rem;
  border-radius: 999px;
  transition: all .2s;
}
.aw-nav-link:hover { color: var(--brand-deep); background: var(--bg-soft); }
.aw-nav-link.active { color: var(--brand-deep); }

/* ---------- Mascot (SVG — รูปร่างตั้งค่าได้ที่หลังบ้าน) ----------
   สีอิงตัวแปรธีม จึงเปลี่ยนตามโทนที่แอดมินตั้งเองอัตโนมัติ
   คลาส .mascot ห้ามเปลี่ยนชื่อ cute.js ผูกไว้ (ตามองตามเมาส์ · หลับ · จิ้มแล้วยุบ) */
.mascot {
  --mc-fill:  var(--brand-fade);
  --mc-line:  var(--brand);
  --mc-ink:   var(--ink);
  --mc-blush: var(--rose);
  --mc-star:  #F6C744;
  --mc-leaf:  #86BE7A;
  --mc-beak:  #F0A344;
  position: relative;
  width: 40px; height: 40px;
  flex: none;
  display: block;
}
.mascot .mascot-svg,
.mascot > img { width: 100%; height: 100%; display: block; overflow: visible; }
.mascot > img { object-fit: contain; }
.mascot--lg { width: 88px; height: 88px; }
.mascot--xs { width: 30px; height: 30px; }

/* ---------- ปุ่ม ---------- */
.btn-aw {
  font-weight: 600;
  background: var(--brand);
  color: #FFFFFF;
  border: none;
  border-radius: 999px;
  padding: .55rem 1.5rem;
  transition: all .15s;
}
.btn-aw:hover { background: var(--brand-deep); color: #FFFFFF; }
.btn-aw-ghost {
  font-weight: 600;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .5rem 1.4rem;
  transition: all .15s;
}
.btn-aw-ghost:hover { border-color: var(--brand); color: var(--brand-deep); background: var(--brand-fade); }
.btn-aw-rose {
  font-weight: 600;
  background: var(--rose);
  color: #FFFFFF;
  border: none;
  border-radius: 999px;
  padding: .55rem 1.5rem;
  transition: all .15s;
}
/* ต้องระบุ background ตอน hover ด้วย มิฉะนั้น .btn:hover ของ bootstrap
   (background-color: var(--bs-btn-hover-bg) = transparent) จะลบพื้นหลังทิ้ง
   จนเหลือตัวหนังสือขาวบนพื้นขาว = ปุ่มหายไปตอนเอาเมาส์ไปวาง */
.btn-aw-rose:hover { background: var(--rose); color: #FFFFFF; filter: brightness(.93); }
/* สถานะถูกใจแล้ว */
.btn-aw-rose.on { background: var(--rose); box-shadow: inset 0 0 0 2px rgba(255,255,255,.55); }
.btn-aw-rose.on:hover { background: var(--rose); filter: brightness(1.04); }

/* ปุ่มสลับธีม */
.theme-toggle {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font-size: 1.05rem;
  display: grid;
  place-items: center;
  transition: all .2s;
}
.theme-toggle:hover { border-color: var(--brand); color: var(--brand-deep); }

/* ---------- การ์ดกล่อง ---------- */
.aw-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform .2s, box-shadow .2s;
}
.aw-card-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }

/* ---------- การ์ดนิยายแบบมินิมอล ---------- */
/* จัดเป็นคอลัมน์แล้วดันแถวตัวเลขไปติดขอบล่างด้วย margin-top:auto
   เดิมใช้ min-height 2 บรรทัดที่ .nc-title เพื่อให้การ์ดสูงเท่ากัน
   แต่เรื่องที่ชื่อบรรทัดเดียวจะเหลือช่องว่างเปล่าคั่นระหว่างชื่อเรื่องกับชื่อผู้เขียน
   (เจ้าของโปรเจกต์ทักว่า "ห่างกันเกิน") วิธีนี้ชื่อผู้เขียนชิดใต้ชื่อเรื่องเสมอ
   ที่ว่างส่วนเกินไปกองอยู่เหนือแถวตัวเลขแทน และแถวตัวเลขยังตรงกันทั้งแถว */
.novel-card { color: var(--ink); display: flex; flex-direction: column; }
.novel-card:hover { color: var(--ink); }
.novel-card .nc-stats { margin-top: auto; }
/* ยกทั้งใบตอนชี้ ไม่ใช่ยกเฉพาะปก — เดิมปกลอยขึ้นแต่ตัวหนังสืออยู่กับที่ ดูเหมือนหลุดจากกัน */
.novel-card .cover { transition: transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s; }
.novel-card:hover .cover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.novel-card:hover .nc-title { color: var(--brand-deep); }
/* รูปปกจริงค่อย ๆ ซูมเล็กน้อยตอนชี้ ให้รู้สึกว่ากดได้ */
.novel-card .cover img { transition: transform .45s cubic-bezier(.2,.8,.3,1); }
.novel-card:hover .cover img { transform: scale(1.05); }

.nc-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .15s;
}
.nc-author { color: var(--ink-soft); font-size: .8rem; margin: .1rem 0 .3rem; }
/* bootstrap 5.3 ไม่มี utility ตัวนี้ แต่หน้าเว็บเรียกใช้อยู่ 13 จุด
   ถ้าไม่นิยาม ลูกของ flex จะไม่ยอมหดต่ำกว่าความกว้างเนื้อหา แล้วทะลุจอบนมือถือ */
.min-w-0 { min-width: 0 !important; }

/* ชิป 4 ตัว (ดาว/ยอดวิว/จำนวนตอน/เวลาอ่าน) ต้องขึ้นบรรทัดใหม่ได้
   ไม่งั้นชิปสุดท้ายดันทะลุการ์ดออกไป แล้วทั้งหน้าเลื่อนแนวนอนได้บนจอ 375px */
.nc-stats { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .7rem;
  color: var(--ink-soft); font-size: .76rem; }
.nc-stats span { display: inline-flex; align-items: center; gap: .28rem; }
.nc-stats .bi { font-size: .82rem; opacity: .75; }
/* คะแนนดาวคือตัวเลขที่คนดูก่อนเสมอ ให้เด่นกว่าตัวอื่นเล็กน้อย */
.nc-stats .nc-rating { color: #E2870A; font-weight: 700; }
.nc-stats .nc-rating .bi { filter: drop-shadow(0 0 3px rgba(240, 170, 40, .55)); }
.nc-stats .nc-rating .bi { opacity: 1; }
/* เวลาอ่านอยู่บรรทัดล่างสุดเสมอ ไม่ปนกับชิปตัวเลข */
.nc-time { display: flex; align-items: center; gap: .28rem; margin-top: .18rem;
  color: var(--ink-soft); font-size: .73rem; }
.nc-time .bi { font-size: .8rem; opacity: .7; }
@media (max-width: 480px) { .nc-stats { column-gap: .5rem; font-size: .72rem; } .nc-time { font-size: .7rem; } }

/* ---------- ชั้นวางเลื่อนแนวนอน (ใช้กับแถว "อัปเดตใหม่ล่าสุด") ---------- */
.shelf-rail {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding: .25rem .15rem 1rem;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  /* จางที่ขอบขวา บอกใบ้ว่ายังเลื่อนต่อได้ */
  -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent);
          mask-image: linear-gradient(90deg, #000 92%, transparent);
}
.shelf-rail::-webkit-scrollbar { height: 8px; }
.shelf-rail::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; }
.shelf-rail-item { flex: 0 0 auto; width: 150px; scroll-snap-align: start; }
/* เคยมี .shelf-rail-plank (แผ่นไม้ใต้ชั้น) ตรงนี้ — ถอดออกแล้ว
   เพราะการ์ดมีชื่อเรื่องกับตัวเลขต่อท้ายปก เส้นจึงไปอยู่ใต้ข้อความ
   อ่านเป็น "เส้นคั่นส่วน" ไม่ใช่ "ชั้นวางหนังสือ" ตามที่ตั้งใจ */
@media (max-width: 640px) {
  .shelf-rail-item { width: 132px; }
  .shelf-rail { gap: .7rem; }
}

/* ---------- ปกนิยาย (placeholder) ---------- */
.cover {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 14px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0, 0, 0, .06);
  box-shadow: var(--shadow);
}
/* สันหนังสือด้านซ้าย + ริมกระดาษด้านขวา + แสงเงาบาง ๆ
   สามชั้นนี้ทำให้ปกสำรองอ่านเป็น "หนังสือ" ไม่ใช่สี่เหลี่ยมสีเปล่า */
.cover::before {
  content: "";
  position: absolute; inset: 0;
  background:
    /* สันปกด้านซ้าย */
    linear-gradient(90deg, rgba(0,0,0,.18) 0, rgba(0,0,0,.05) 7px, transparent 15px),
    /* ริมกระดาษด้านขวา — เส้นบางสามเส้นเลียนแบบขอบหน้ากระดาษที่ซ้อนกัน */
    linear-gradient(270deg,
      rgba(255,255,255,.30) 0 1.5px, rgba(0,0,0,.06) 1.5px 3px,
      rgba(255,255,255,.22) 3px 4.5px, rgba(0,0,0,.05) 4.5px 6px,
      rgba(255,255,255,.14) 6px 7px, transparent 7px),
    /* แสงตกบนปก */
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.28), transparent 60%);
  pointer-events: none;
  /* ลำดับการวางทับในกรอบปก: .cv-fx(0) → ::before สัน/ริมกระดาษ/แสง(1) → .big-char(2)
     ถ้าไม่กำหนด ทั้งสามตัวเป็น z-index auto แล้วเรียงตามลำดับใน DOM
     .cv-fx จะไปทับสันหนังสือ ส่วน ::before ก็จะไปฉาบทับตัวอักษรจนดูซีด */
  z-index: 1;
}
/* เคยเติมประกาย 3 จุดตายตัวที่ ::before ของปกสำรองทุกใบ — ถอดออกแล้ว
   เพราะทุกเล่มได้จุดตำแหน่งเดียวกันหมด ตอนนี้ลาย fx4 "ประกายดาว" ทำหน้าที่นี้
   และจะได้เฉพาะเล่มที่สุ่มมาลงลายนั้น */

.cover .big-char {
  position: relative;
  z-index: 2;
  font-family: 'Mali', cursive;
  font-size: 3.6rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 3px 10px rgba(0, 0, 0, .18);
  line-height: 1;
  user-select: none;
}
/* เคยมีวงแหวนบาง ๆ รอบตัวอักษร (.big-char::after) — **ถอดออกแล้ว ห้ามใส่กลับ**
   ปกทุกใบได้วงเดียวกันหมด เรียงกันทั้งแถวแล้วอ่านเป็น "กรอบ" ครอบทุกเล่ม
   ตอนนี้ความต่างของแต่ละเล่มมาจากเอฟเฟกต์ fx1-fx8 ใน App\Support\CoverTheme แทน */

/* กล่องข้อความกำกับใต้ปกในหน้านิยาย (ข้อจำกัดการตรวจ AI / การกันคัดลอก) */
.nv-note {
  display: flex;
  gap: .5rem;
  padding: .6rem .7rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-soft);
  color: var(--ink-soft);
  font-size: .73rem;
  line-height: 1.65;
}
.nv-note > .bi { flex: none; margin-top: .12rem; color: var(--brand); font-size: .85rem; }
.nv-note p { margin: 0; }

/* ลูกเล่นตอนชี้การ์ด — ป้ายเด้ง ตัวอักษรบนปกเอียงนิดหน่อย
   ทั้งหมดผูกกับ :hover ของการ์ด ไม่ใช่ของตัวมันเอง จะได้ขยับพร้อมกันทั้งใบ */
.novel-card .cover .big-char,
.novel-card .nc-pin,
.novel-card .sticker { transition: transform .28s cubic-bezier(.34, 1.5, .64, 1); }
.novel-card:hover .cover .big-char { transform: rotate(-4deg) scale(1.05); }
.novel-card:hover .nc-pin { transform: scale(1.14) rotate(-7deg); }
.novel-card .sticker { transform: rotate(-3deg); }
.novel-card:hover .sticker { transform: rotate(-3deg) translateY(-2px) scale(1.07); }

/* ป้าย "อ่านเลย" ที่โผล่ตอนชี้ — ลอยขึ้นมาจากขอบล่างของปก */
.nc-go {
  position: absolute;
  /* วางกลางปก ไม่ใช่ขอบล่าง เพราะขอบล่างมีป้ายอายุอยู่ซ้ายและป้ายชนิดนิยายอยู่ขวา
     พอการ์ดแคบ (6 ใบ/แถว) ป้ายสามอันจะชนกันพอดี */
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(.86);
  padding: .34rem 1rem;
  border-radius: 99px;
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
  color: #fff;
  background: var(--brand);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .28s cubic-bezier(.34, 1.5, .64, 1);
}
.novel-card:hover .nc-go { opacity: 1; transform: translate(-50%, -50%) scale(1); }
/* โหมดมืด --brand เป็นสีอ่อน ตัวหนังสือขาวบนพื้นนั้นอ่านแทบไม่ออก ต้องพลิกเป็นตัวเข้ม */
[data-theme="dark"] .nc-go { color: #12211E; }
/* จอสัมผัสไม่มี hover จริง ป้ายจะค้างอยู่ตลอด — ซ่อนไปเลยดีกว่า */
@media (hover: none) { .nc-go { display: none; } }

/* ป้ายไอคอนล้วนบนปก (ชนิดนิยาย / ปกวาดมือ) */
.nc-pin {
  position: absolute; width: 26px; height: 26px; border-radius: 9px;
  display: grid; place-items: center; color: #fff; font-size: .82rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25); backdrop-filter: blur(2px);
}
.nc-pin-chat  { right: .45rem; bottom: .45rem; background: rgba(33, 115, 201, .92); }
.nc-pin-comic { right: .45rem; bottom: .45rem; background: rgba(124, 92, 252, .92); }
.nc-pin-art   { right: .45rem; top: .45rem;    background: var(--brand); }

/* ลายปก 8 แบบ (g1-g8) ย้ายไปอยู่ที่ App\Support\CoverTheme แล้ว
   เหตุผล: ที่นี่ประกาศไว้แค่ .cover ทำให้กรอบปกอีก 4 แบบ
   (.rs-cover .hs-cover .hl-cover .fw-cover) ไม่เคยได้ลายเลย
   ตอนนี้ layout ฉีด CoverTheme::css() ที่แจกลายให้ครบทุกกรอบแทน
   ห้ามเพิ่มลายกลับมาที่นี่ จะกลายเป็นสองแหล่งแล้วเพี้ยนกัน */

/* ---------- ป้าย ---------- */
.sticker {
  font-size: .72rem;
  font-weight: 700;
  padding: .2rem .6rem;
  border-radius: 999px;
  display: inline-block;
  /* ขอบขาวบาง ๆ + เงา ทำให้ดูเหมือน "สติกเกอร์ที่แปะลงไป" ไม่ใช่สี่เหลี่ยมสีที่วาดติดกับปก */
  border: 1.5px solid rgba(255, 255, 255, .8);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .16);
}
.sticker-hot { background: var(--rose); color: #FFFFFF; }
.sticker-new { background: var(--brand); color: #FFFFFF; }
.sticker-end { background: rgba(255, 255, 255, .92); color: #555; }
.sticker-cat {
  background: var(--bg-soft);
  color: var(--ink-soft);
  border: 1px solid var(--line);
  font-weight: 600;
}
.tag-chip {
  font-size: .78rem;
  background: var(--bg-soft);
  color: var(--ink-soft);
  border-radius: 999px;
  padding: .2rem .7rem;
  border: 1px solid var(--line);
}

/* แท็กที่กดได้ — แท็กคู่ไปหน้าคู่, นอกนั้นไปหน้าค้นหาที่กรองแท็กนั้นไว้ */
a.tag-chip-link {
  display: inline-block;
  text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

a.tag-chip-link:hover,
a.tag-chip-link:focus-visible {
  background: var(--brand-fade);
  color: var(--brand-deep);
  border-color: var(--brand-soft);
}

/* แท็กที่ยังรอแอดมินอนุมัติ — เจ้าของเรื่องเห็นคนเดียว กดไม่ได้ */
.tag-chip-wait {
  border-style: dashed;
  opacity: .7;
  cursor: help;
}

/* ---------- หัวข้อ section ----------
   ทุกหน้าหน้าบ้านใช้โครงเดียวกันคือ .section-head > span.dot + h2 (+ a.more)
   ถ้าเพิ่มหัวข้อใหม่ให้คงโครงนี้ไว้ ไม่งั้นจะไม่มีแถบสีนำหน้า          */
.section-head {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: 1.2rem;
}
/* แถบสีเล็ก ๆ นำหน้าหัวข้อ — ให้สายตาจับได้ว่าเริ่มส่วนใหม่ โดยไม่ต้องขีดเส้นทั้งแถว */
.section-head .dot {
  display: block;
  flex: none;
  width: 5px;
  height: 1.35em;
  border-radius: 99px;
  background: linear-gradient(180deg, var(--brand), var(--brand-deep));
}
.section-head .dot.rose {
  background: linear-gradient(180deg, var(--rose), color-mix(in srgb, var(--rose) 70%, #000));
}
.section-head h2 {
  font-family: var(--font-head);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 0;
  color: var(--ink);
}
/* ไฮไลต์ปากกาเมจิกจาง ๆ ใต้ตัวหนังสือ — ใช้ background ของ h2 เอง ไม่ใช้ pseudo + z-index
   เพราะ z-index ติดลบมีสิทธิ์มุดหายไปหลังพื้นหน้า ([[stacking-context-traps]]) */
.section-head h2 {
  background: linear-gradient(180deg, transparent 62%, color-mix(in srgb, var(--brand) 15%, transparent) 62%);
  padding-inline: .12em;
  border-radius: .2em;
}
.section-head .dot.rose ~ h2 {
  background: linear-gradient(180deg, transparent 62%, color-mix(in srgb, var(--rose) 17%, transparent) 62%);
}
.section-head h2 > i { color: var(--brand); font-size: .9em; }
.section-head .dot.rose ~ h2 > i { color: var(--rose); }
.section-head .more {
  margin-left: auto;
  flex: none;
  font-size: .88rem;
  font-weight: 600;
  color: var(--brand-deep);
  padding: .3rem .7rem;
  border-radius: 99px;
  transition: background .15s, color .15s;
}
/* เฉพาะที่เป็นลิงก์จริง — บางหน้าใช้ span.more เป็นคำอธิบายเฉย ๆ */
.section-head a.more:hover {
  background: var(--brand-fade);
  color: var(--brand-deep);
}
.section-head span.more { color: var(--ink-soft); font-weight: 500; padding-inline: 0; }
/* คำโปรยใต้หัวข้อ (มีบางหน้า) ให้เยื้องเท่าความกว้างแถบสี + gap */
.section-sub {
  margin: -.9rem 0 1.1rem calc(5px + .65rem);
  font-size: .9rem;
  color: var(--ink-soft);
}

/* เหรียญของสามอันดับแรก — เดิมเป็นเลขเปล่า ๆ ทั้งห้าอัน มองไม่ออกว่าอันไหนที่หนึ่ง */
.rank-num.rk1, .rank-num.rk2, .rank-num.rk3 {
  color: #fff;
  border-radius: 50%;
  width: 1.85rem; height: 1.85rem;
  line-height: 1.85rem;
  font-size: 1rem;
  text-align: center;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .18);
}
.rank-num.rk1 { background: linear-gradient(140deg, #F5C242, #D99A18); }
.rank-num.rk2 { background: linear-gradient(140deg, #C9CDD4, #9AA1AB); }
.rank-num.rk3 { background: linear-gradient(140deg, #D8A273, #B07A48); }

/* ---------- อันดับฮิต ---------- */
.rank-num {
  font-family: 'Mali', cursive;
  font-weight: 700;
  font-size: 1.4rem;
  width: 2.2rem;
  text-align: center;
  color: var(--brand);
  flex: none;
}
.rank-item { display: flex; gap: .9rem; align-items: center; padding: .65rem .5rem; border-radius: 12px; transition: background .15s; }
.rank-item:hover { background: var(--bg-soft); }

/* ---------- meta เล็กๆ ---------- */
.meta { font-size: .8rem; color: var(--ink-soft); }
.meta b { color: var(--ink); font-weight: 600; }

/* ---------- ฟอร์ม ---------- */
.form-control, .form-select, textarea.form-control {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  padding: .6rem 1rem;
}
.form-control:focus, .form-select:focus {
  background: var(--card);
  border-color: var(--brand);
  box-shadow: 0 0 0 .2rem var(--brand-fade);
  color: var(--ink);
}
.form-control::placeholder { color: var(--ink-soft); opacity: .7; }
.form-label { font-weight: 600; color: var(--ink); }
.form-text { color: var(--ink-soft); }

/* ---------- Select2 skin ---------- */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  min-height: 46px;
  font-family: var(--font-body);
}
.select2-container--default .select2-selection--single { height: 46px; }
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 44px;
  color: var(--ink);
  padding-left: 1rem;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 44px; right: 8px; }
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
  border-color: var(--brand);
  box-shadow: 0 0 0 .2rem var(--brand-fade);
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered { padding: .25rem .5rem; }
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: var(--brand-fade);
  border: 1px solid var(--brand-soft);
  border-radius: 999px;
  color: var(--brand-deep);
  font-size: .82rem;
  font-weight: 600;
  padding: .1rem .6rem .1rem .3rem;
  margin: .25rem .25rem .1rem 0;
  display: inline-flex;
  align-items: center;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--brand-deep);
  border: none;
  background: transparent;
  font-weight: 700;
  margin-right: .15rem;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { color: var(--rose); background: transparent; }
.select2-dropdown {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-lift);
}
.select2-container--default .select2-results__option { color: var(--ink); padding: .5rem 1rem; }
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background: var(--bg-soft);
  color: var(--brand-deep);
}
.select2-container--default .select2-results__option--selected { background: var(--brand-fade); color: var(--brand-deep); }
.select2-search--dropdown .select2-search__field {
  background: var(--bg-soft);
  border: 1px solid var(--line) !important;
  border-radius: 8px;
  color: var(--ink);
  padding: .4rem .7rem;
}
.select2-container--default .select2-search--inline .select2-search__field { color: var(--ink); font-family: var(--font-body); margin-top: .45rem; }

/* ---------- SweetAlert2 skin ---------- */
.aw-swal-popup {
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  border-radius: 20px !important;
  color: var(--ink) !important;
  font-family: var(--font-body) !important;
  box-shadow: var(--shadow-lift) !important;
}
.aw-swal-title { font-family: var(--font-head) !important; font-weight: 700 !important; color: var(--ink) !important; font-size: 1.35rem !important; }
.aw-swal-html { color: var(--ink-soft) !important; font-size: 1rem !important; }
.aw-swal-confirm {
  font-weight: 600 !important;
  background: var(--brand) !important;
  color: #FFFFFF !important;
  border-radius: 999px !important;
  padding: .55rem 1.6rem !important;
}
.aw-swal-confirm:hover { background: var(--brand-deep) !important; }
.aw-swal-cancel {
  font-weight: 600 !important;
  background: var(--bg-soft) !important;
  color: var(--ink-soft) !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  padding: .55rem 1.6rem !important;
}
.aw-swal-deny {
  font-weight: 600 !important;
  background: var(--rose) !important;
  border-radius: 999px !important;
  padding: .55rem 1.6rem !important;
}

/* ---------- Footer ---------- */
/* หน้าที่เนื้อหาสั้น (เช่น ผลค้นหาว่าง) ฟุตเตอร์เคยลอยกลางจอแล้วเหลือพื้นขาวใต้ลงไป
   ดันฟุตเตอร์ลงไปติดขอบล่างเสมอด้วย flex — ลูกของ body ยังเรียงบนลงล่างเหมือนเดิม
   และยังกว้างเต็มจอเพราะ flex item ยืดตามแกนขวางให้อยู่แล้ว */
body { min-height: 100vh; display: flex; flex-direction: column; }
body > .aw-footer { margin-top: auto; }

.aw-footer {
  position: relative;
  background: var(--brand-fade);
  color: var(--ink-soft);
  font-size: .88rem;
}
/* ขอบบนเป็นลอนคลื่น — วงกลมเรียงต่อกัน โผล่ครึ่งบนขึ้นมาจากพื้นฟุตเตอร์
   ต้องใช้สีเดียวกับพื้นฟุตเตอร์เป๊ะ ไม่งั้นจะเห็นเป็นเส้นคาดแทนที่จะเป็นลอน */
.aw-footer::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -13px;
  height: 14px;
  background: radial-gradient(circle 13px at 13px 14px, var(--brand-fade) 98%, transparent 100%) 0 0/26px 14px repeat-x;
  pointer-events: none;
}
.aw-footer a {
  color: var(--ink-soft);
  padding: .25rem .55rem;
  border-radius: 99px;
  transition: color .15s, background .15s;
}
.aw-footer a:hover {
  color: var(--brand-deep);
  background: color-mix(in srgb, var(--brand) 12%, transparent);
}
/* มาสคอตในฟุตเตอร์เอียงทักทายตอนเอาเมาส์เข้าไปในแถบ */
.aw-footer .container .mascot { transition: transform .35s cubic-bezier(.34, 1.45, .64, 1); }
.aw-footer:hover .container .mascot { transform: rotate(-9deg) translateY(-3px); }

/* ---------- Hero ---------- */
.hero-wrap {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
  position: relative;
}
.hero-bubbles i {
  position: absolute;
  border-radius: 50%;
  background: var(--brand-fade);
  opacity: .7;
}

/* ---------- แบนเนอร์สไลด์เต็มความกว้าง ---------- */
.hero-carousel {
  position: relative;
  padding: 1.6rem 0 0;
  overflow: hidden;
}
.hc-viewport { overflow: hidden; width: 100%; }
.hc-track {
  display: flex;
  gap: 20px;
  align-items: center;
  will-change: transform;
  /* เผื่อที่ให้ใบกลางขยายและทิ้งเงาโดยไม่โดนขอบ viewport ตัด */
  padding: 14px 0 18px;
}
.hc-slide {
  flex: none;
  width: min(620px, 86vw);
  height: clamp(190px, 24vw, 310px);
  border-radius: 22px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  color: #FFFFFF;
  /* ใบที่ไม่ได้อยู่ตรงกลางหรี่และย่อลง เหลือใบเดียวที่ "เด่น" สายตาจะได้รู้ว่าต้องอ่านใบไหน
     JS เป็นคนแปะ .is-active ให้ใบที่อยู่กลางจอในฟังก์ชัน layout() */
  opacity: .5;
  transform: scale(.93);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .10);
  transition: opacity .45s ease, transform .45s cubic-bezier(.33, .8, .33, 1), box-shadow .45s;
}
.hc-slide.is-active {
  opacity: 1;
  transform: scale(1);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .20);
}
.hc-slide:hover { color: #FFFFFF; }
.hc-slide.is-active:hover { transform: scale(1.012); }

/* วงกลมโปร่งสองวงมุมขวา — ให้พื้นไล่สีไม่โล่งจนเกินไป (ใช้ box-shadow ปลอมวงที่สอง) */
.hc-slide::after {
  content: "";
  position: absolute;
  right: -46px; bottom: -78px;
  width: 230px; height: 230px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .10);
  box-shadow: -104px -136px 0 rgba(255, 255, 255, .07);
  pointer-events: none;
}
.hc-slide.hc-img::after { display: none; }

.hc-bigchar {
  position: absolute;
  right: 7%;
  top: 50%;
  transform: translateY(-50%) rotate(-6deg);
  font-family: 'Mali', cursive;
  font-weight: 700;
  font-size: clamp(5rem, 8.5vw, 8.5rem);
  line-height: 1;
  color: rgba(255, 255, 255, .16);
  user-select: none;
}
/* ม่านมืดจาง ๆ ไล่จากซ้าย — แบนเนอร์โทนสว่าง (ส้ม/ชมพู) ตัวหนังสือขาวจะจมหายถ้าไม่มี */
.hc-slide > .hc-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.34), rgba(0,0,0,.10) 52%, transparent 78%);
  pointer-events: none;
}
.hc-content {
  position: relative;
  z-index: 2;
  padding: 0 clamp(1.5rem, 3vw, 2.6rem);
  max-width: 78%;
}
.hc-tag {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  background: rgba(255, 255, 255, .22);
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  padding: .2rem .75rem;
  margin-bottom: .6rem;
  backdrop-filter: blur(2px);
}
.hc-title {
  font-weight: 700;
  font-size: clamp(1.15rem, 2vw, 1.65rem);
  line-height: 1.3;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}
.hc-sub {
  font-size: clamp(.82rem, 1.1vw, .95rem);
  opacity: .92;
  margin: .4rem 0 .9rem;
}
.hc-cta {
  display: inline-block;
  font-weight: 700;
  font-size: .88rem;
  background: rgba(255, 255, 255, .92);
  color: var(--brand-deep);
  border-radius: 999px;
  padding: .42rem 1.15rem;
  transition: all .15s;
}
.hc-slide:hover .hc-cta { background: #FFFFFF; transform: translateY(-2px); }

/* พื้นหลังแบนเนอร์ 5 แบบ — b1/b3 เกาะโทนที่แอดมินตั้งไว้ อีก 3 แบบเป็นสีประดับให้สลับกันไม่ซ้ำ */
.hc-b1 { background: linear-gradient(115deg, var(--brand-deep), var(--brand) 55%,
         color-mix(in srgb, var(--brand) 62%, #fff)); }
.hc-b2 { background: linear-gradient(115deg, #3E3A52, #5A5478 55%, #8C84AE); }
.hc-b3 { background: linear-gradient(115deg, color-mix(in srgb, var(--rose) 78%, #000),
         var(--rose) 55%, color-mix(in srgb, var(--rose) 58%, #fff)); }
.hc-b4 { background: linear-gradient(115deg, #4F5B4A, #6E7E66 55%, #9AAB8F); }
.hc-b5 { background: linear-gradient(115deg, #34495C, #4D6B85 55%, #7E9DB8); }

.hc-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--card) 88%, transparent);
  backdrop-filter: blur(4px);
  color: var(--ink);
  font-size: 1.5rem;
  line-height: 1;
  display: grid;
  place-items: center;
  z-index: 5;
  transition: all .15s;
  box-shadow: var(--shadow);
}
.hc-arrow:hover { color: var(--brand-deep); border-color: var(--brand); }
.hc-arrow:active { transform: translateY(-50%) scale(.92); }
/* ชิดริมจอ ไม่ใช่ริมสไลด์ — ของเดิมอยู่ในระยะ 2.5rem จากขอบ ซึ่งตกลงบนตัวหนังสือของใบกลางพอดี */
.hc-prev { left: clamp(.4rem, 1.2vw, 1rem); }
.hc-next { right: clamp(.4rem, 1.2vw, 1rem); }

.hc-dots {
  display: flex;
  justify-content: center;
  gap: .5rem;
  padding: .9rem 0 .35rem;
}
.hc-dot {
  width: 8px; height: 8px;
  border-radius: 999px;
  border: none;
  padding: 0;
  background: var(--line);
  transition: all .25s;
}
.hc-dot.on { width: 22px; background: var(--brand); }

/* ---------- ตัวอ่าน ---------- */
.reader-paper {
  max-width: 760px;
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: clamp(1.5rem, 4vw, 3.2rem);
}
.reader-paper p { line-height: var(--reader-lh, 2); margin-bottom: 1.35em; text-indent: 2.5em; }
body[data-reader="sepia"] { --bg: #F7F1E3; --bg-soft: #F1E9D8; --card: #FCF7EA; --line: #E8DFC9; }
body[data-reader="night"] { --bg: #17150F; --bg-soft: #1E1B14; --card: #211E16; --ink: #D8CBB6; --ink-soft: #9C8C74; --line: #322C20; }
/* หน้าอ่านต้องทาพื้นที่ body เอง — ธีมกระดาษ (sepia/night/…) ประกาศ --bg ทับไว้ที่ body
   แต่พื้นหลังของทั้งหน้าอยู่ที่ html ซึ่งเป็น "พ่อ" ตัวแปรจึงส่งขึ้นไปไม่ถึง
   ถ้าไม่มีบรรทัดนี้ เลือกธีมซีเปีย/กลางคืนแล้วพื้นหลังจะยังเป็นสีเดิมของเว็บ
   ผลพลอยได้: ก้อนสีประดับถูกพื้นทึบของ body บังไปเอง หน้าอ่านจึงสะอาดไม่มีของประดับ */
body[data-reader] { background: var(--bg); }

/* ---------- อื่นๆ ---------- */
.divider-dots { display: flex; justify-content: center; gap: .6rem; margin: 1.5rem 0; }
.divider-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.divider-dots i:nth-child(2) { background: var(--brand); }

.chapter-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .8rem 1rem;
  border-radius: 12px;
  border: 1px solid transparent;
  color: var(--ink);
  transition: all .15s;
}
.chapter-row:hover {
  background: var(--bg-soft);
  color: var(--brand-deep);
  transform: translateX(4px);
}
/* เลขตอนเป็นวงกลมนุ่ม ๆ พอชี้แถวแล้วเปลี่ยนเป็นสีแบรนด์เต็มวง */
.chapter-row .ch-no {
  font-weight: 700;
  font-size: .88rem;
  color: var(--brand-deep);
  background: var(--brand-fade);
  width: 2.1rem;
  height: 2.1rem;
  line-height: 2.1rem;
  border-radius: 50%;
  flex: none;
  text-align: center;
  transition: background .18s, color .18s, transform .22s cubic-bezier(.34, 1.45, .64, 1);
}
.chapter-row:hover .ch-no {
  background: var(--brand);
  color: #fff;
  transform: scale(1.08);
}

.stat-pill {
  background: color-mix(in srgb, var(--brand) 7%, var(--card));
  border: 1px solid color-mix(in srgb, var(--brand) 16%, transparent);
  border-radius: 16px;
  padding: .55rem 1rem;
  text-align: center;
  transition: transform .22s cubic-bezier(.34, 1.45, .64, 1), box-shadow .22s;
}
.stat-pill:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.stat-pill .v { font-weight: 700; color: var(--brand-deep); font-size: 1.05rem; }
.stat-pill .k { font-size: .74rem; color: var(--ink-soft); }

/* ===========================================
   ลูกเล่นน่ารัก — ของประดับล้วน ถอดบล็อกนี้ทิ้งเว็บยังใช้งานได้ครบ
   ทุกตัวหยุดเองเมื่อผู้ใช้ตั้งค่าเครื่องว่า "ลดการเคลื่อนไหว"
   =========================================== */

@keyframes aw-bob   { 0%, 100% { transform: translateY(0) rotate(0); }
                      30%  { transform: translateY(-5px) rotate(-8deg); }
                      60%  { transform: translateY(-2px) rotate(5deg); } }
@keyframes aw-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes aw-pop   { from { opacity: 0; transform: translateY(-8px) scale(.96); }
                      to   { opacity: 1; transform: none; } }

/* ก้อนสีนุ่ม ๆ จาง ๆ ในพื้นหลัง ติดอยู่กับจอ (ไม่เลื่อนตามหน้า) ให้พื้นขาวไม่โล่งเกินไป
   ต้องเป็น position:fixed เท่านั้น เพราะ body เป็น flex — ถ้าไม่ fixed มันจะกลายเป็นลูก flex
   แล้วไปแทรกเป็นแถวหนึ่งในหน้าเว็บจริง ๆ */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(620px circle at 4% 8%,   color-mix(in srgb, var(--brand) 18%, transparent), transparent 66%),
    radial-gradient(520px circle at 96% 22%, color-mix(in srgb, var(--rose)  15%, transparent), transparent 66%),
    radial-gradient(700px circle at 50% 99%, color-mix(in srgb, var(--brand) 13%, transparent), transparent 64%);
}

/* หน้าแจ้งข้อผิดพลาด (404/403/500/…) — ใช้มาสคอตกับเลขตัวโต ไม่ใช่หน้าดิบของ Laravel */
.err-card { max-width: 560px; }
.err-code {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(3.2rem, 12vw, 5rem);
  line-height: 1;
  letter-spacing: -.04em;
  background: linear-gradient(140deg, var(--brand), var(--rose));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.err-title { font-size: 1.3rem; font-weight: 700; margin: .4rem 0 .5rem; }

/* การ์ดในแถวเดียวกันไล่โผล่ทีละใบ ไม่ใช่โผล่พรวดพร้อมกัน
   cute.js เป็นคนแปะ .aw-reveal ให้ทุกคอลัมน์ใน main .row อยู่แล้ว ที่นี่แค่หน่วงเวลาให้เหลื่อมกัน */
@media (prefers-reduced-motion: no-preference) {
  .row > .aw-reveal:nth-child(1) { transition-delay: 0s; }
  .row > .aw-reveal:nth-child(2) { transition-delay: .05s; }
  .row > .aw-reveal:nth-child(3) { transition-delay: .10s; }
  .row > .aw-reveal:nth-child(4) { transition-delay: .15s; }
  .row > .aw-reveal:nth-child(5) { transition-delay: .20s; }
  .row > .aw-reveal:nth-child(6) { transition-delay: .25s; }
  .row > .aw-reveal:nth-child(n+7) { transition-delay: .3s; }
}

/* ช่องติ๊ก/ปุ่มตัวเลือก ให้เป็นสีแบรนด์และกลมมนขึ้น แทนสีฟ้ามาตรฐาน */
.form-check-input { border-color: var(--line); cursor: pointer; transition: background .15s, border-color .15s, box-shadow .15s; }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.form-check-input:focus { border-color: var(--brand); box-shadow: 0 0 0 .18rem color-mix(in srgb, var(--brand) 22%, transparent); }
.form-check-label { cursor: pointer; }

/* มาสคอตตัวเล็กนั่งลอยอยู่บนลอนคลื่นขอบฟุตเตอร์ เหมือนหงส์ลอยน้ำ
   วางเป็นลายน้ำจาง ๆ ในฟุตเตอร์แล้วดูเหมือนรอยเปื้อน (ลองมาแล้ว)
   ต้องวางให้ "นั่งบนคลื่น" ถึงจะอ่านออกว่าตั้งใจ */
.foot-mascot {
  position: absolute;
  right: 5%;
  top: -40px;
  width: 52px; height: 52px;
  opacity: .85;
  pointer-events: none;
  z-index: 0;
}
.foot-mascot .mascot { width: 100%; height: 100%; }
.aw-footer > .container { position: relative; z-index: 1; }
@media (max-width: 860px) { .foot-mascot { display: none; } }

/* ปุ่มหลัก: กดแล้วยุบ + แสงวิ่งผ่านตอนชี้ */
.btn-aw { position: relative; overflow: hidden; }
.btn-aw::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 32%, rgba(255,255,255,.38) 50%, transparent 68%);
  transform: translateX(-130%);
  transition: transform .65s cubic-bezier(.2, .8, .3, 1);
  pointer-events: none;
}
.btn-aw:hover::after { transform: translateX(130%); }
.btn-aw:active { transform: scale(.96); }
.btn-aw-ghost:active { transform: scale(.96); }

/* เมนูบน: ขีดใต้ค่อย ๆ ยืดออกจากกลาง */
.aw-nav-link { position: relative; }
.aw-nav-link::after {
  content: "";
  position: absolute;
  left: .55rem; right: .55rem; bottom: .16rem;
  height: 2px;
  border-radius: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transition: transform .22s cubic-bezier(.34, 1.45, .64, 1);
}
.aw-nav-link:hover::after, .aw-nav-link.active::after { transform: scaleX(1); }

/* โลโก้: มาสคอตกระโดดทักทายตอนชี้
   ใส่ animation ที่ .mascot-svg ไม่ใช่ .mascot เพราะ cute.js จองการ transform ของ .mascot ไว้
   ทำเอฟเฟกต์จิ้มแล้วยุบ ถ้าใส่ทับกันจะแย่งกันจนกระตุก */
.aw-logo:hover .mascot-svg { animation: aw-bob .62s ease-in-out; }

/* มาสคอตในกล่อง "ยังไม่มีอะไรตรงนี้" ลอยขึ้นลงเบา ๆ */
.aw-card.text-center > .mascot .mascot-svg { animation: aw-float 3.6s ease-in-out infinite; }

/* แท็กกดได้: ยกขึ้นนิดตอนชี้ */
a.tag-chip-link:hover { transform: translateY(-2px); }

/* ช่องกรอก: โฟกัสแล้วเรืองแสงสีแบรนด์ แทนสีฟ้ามาตรฐานของ bootstrap */
.form-control:focus, .form-select:focus, .aw-input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--brand) 20%, transparent);
}
/* วงโฟกัสตอนกด Tab ให้เป็นสีแบรนด์ทั้งเว็บ (คนใช้คีย์บอร์ดจะเห็นชัดขึ้นด้วย) */
:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand) 45%, transparent);
  outline-offset: 2px;
}

/* โซน "คัดสรรโดยทีมงาน" มีพื้นนุ่ม ๆ กับฟองลอย ให้ต่างจากแถวอื่นในหน้าแรก */
.pick-zone {
  position: relative;
  padding: 1.3rem 1.3rem .4rem;
  border-radius: 26px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 11%, transparent), transparent 74%);
}
.pick-zone::before, .pick-zone::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  pointer-events: none;
  z-index: 0;
}
/* เกาะขอบซ้าย/ขวาแบบโผล่พ้นกรอบ — เคยวางไว้มุมขวาบนแล้วไปทับลิงก์ "ดูทั้งหมด" พอดี */
.pick-zone::before { width: 78px; height: 78px; right: -26px; top: 42%; }
.pick-zone::after  { width: 40px; height: 40px; left: -18px;  bottom: 14%; }
.pick-zone > * { position: relative; z-index: 1; }

/* ข้อความแจ้งผลสำเร็จ: เด้งลงมาจากขอบบน */
.aw-flash { animation: aw-pop .38s cubic-bezier(.34, 1.45, .64, 1); }

@media (max-width: 700px) {
  .pick-zone { padding: 1rem .8rem .3rem; border-radius: 20px; }
  .pick-zone::before, .pick-zone::after { display: none; }
}

/* เคารพการตั้งค่าเครื่องผู้ใช้ — ปิดของที่ขยับเองทั้งหมด แต่ hover ยังทำงานปกติ */
@media (prefers-reduced-motion: reduce) {
  .cover:has(.big-char)::before,
  .aw-logo:hover .mascot-svg,
  .aw-card.text-center > .mascot .mascot-svg,
  .aw-flash { animation: none !important; }
  .btn-aw::after { transition: none; }
}

/* ===========================================
   Responsive — จอเล็ก/แท็บเล็ต/มือถือ
   =========================================== */

/* แท็บเล็ตลงไป: เมนูพับเป็นสองแถว เลิก sticky เพื่อคืนพื้นที่จอ */
@media (max-width: 860px) {
  .aw-navbar { position: static; }
  .reader-toolbar { top: .6rem; }
  .nav-grid { row-gap: .1rem; }
}

/* มือถือ */
@media (max-width: 640px) {
  body { font-size: 15px; }
  .aw-logo { font-size: 1.25rem; }
  .aw-nav-link { font-size: .85rem; padding: .35rem .65rem; }
  .theme-toggle { width: 36px; height: 36px; }

  .section-head h2 { font-size: 1.15rem; }
  .section-head { margin-bottom: .9rem; }

  /* จอเล็กสไลด์กว้างเกือบเต็มจอ ปุ่มลูกศรจึงตกลงบนตัวหนังสือพอดี
     ซ่อนไปเลย — แถวจุดด้านล่างกดเปลี่ยนสไลด์ได้ และแบนเนอร์เลื่อนเองอยู่แล้ว */
  .hc-arrow { display: none; }
  .hc-content { max-width: 88%; }
  .hc-bigchar { font-size: 5rem; }
  .hc-slide { width: 92vw; height: clamp(180px, 46vw, 260px); }

  .rank-item { gap: .6rem; padding: .55rem .35rem; }
  .rank-num { width: 1.5rem; font-size: 1.1rem; }
  .rank-item .sticker { display: none; }
  .rank-item .meta { font-size: .74rem; }

  .stat-pill { flex: 1 1 calc(50% - .5rem); }
  .reader-paper p { text-indent: 1.6em; }
  .chapter-row { padding: .7rem .6rem; gap: .7rem; }

  .aw-footer .container { justify-content: center !important; text-align: center; }
}

/* จอเล็กมาก */
@media (max-width: 380px) {
  .aw-nav-link { font-size: .8rem; padding: .3rem .5rem; }
  .cover .big-char { font-size: 3.4rem; }
}