/* ===== ฟอนต์ Chulabhorn Likit Text (ไฟล์อยู่ในโฟลเดอร์ fonts/) =====
 * ตัวปกติใช้ Light, ตัวหนาปานกลางใช้ Medium, ตัวหนาใช้ Bold */
@font-face {
  font-family: "Chulabhorn Likit Text";
  src: url("fonts/ChulabhornLikitText-Light.woff2") format("woff2");
  font-weight: 100 400;
  font-display: swap;
}
@font-face {
  font-family: "Chulabhorn Likit Text";
  src: url("fonts/ChulabhornLikitText-Medium.woff2") format("woff2");
  font-weight: 500 600;
  font-display: swap;
}
@font-face {
  font-family: "Chulabhorn Likit Text";
  src: url("fonts/ChulabhornLikitText-Bold.woff2") format("woff2");
  font-weight: 700 900;
  font-display: swap;
}

/* ===== สีและขนาดหลัก (แก้ตรงนี้ได้เลย) =====
 * ธีมเขียวสมุนไพรให้เข้ากับตัวเล่ม
 * อยากได้สีแบบ Heyzine เดิม: --primary: #6a1bff; --badge: #e5202a; */
:root {
  --primary: #2f7d4f;        /* ปุ่มหลัก / ลูกศร / ปุ่มเริ่มอ่าน */
  --primary-soft: rgba(47, 125, 79, .12);
  --page-btn: #6a1bff;       /* ปุ่มบนหน้า: บ้าน / ลำโพง / ลูกศร (สีเดียวกับใน Canva) */
  --page-num: #e5202a;       /* เลขหน้าบนหน้า */
  --badge: #1f2d24;          /* พื้นหลังเลขหน้า */
  --ink: #1f2d24;            /* สีไอคอนและตัวอักษร */
  --muted: #5d6b61;
  --bg-1: #fbfaf6;           /* พื้นหลังตรงกลาง */
  --bg-2: #e6ece0;           /* พื้นหลังขอบจอ */
  --glass: rgba(255, 255, 255, .72);
  --glass-line: rgba(255, 255, 255, .85);
  --shadow: 0 10px 30px rgba(31, 45, 36, .12), 0 2px 6px rgba(31, 45, 36, .06);
  --btn: 44px;               /* ขนาดปุ่ม */
  --arrow: 52px;             /* ขนาดลูกศร */
  --gap: 16px;
  --radius: 999px;
  --font: "Chulabhorn Likit Text", "Tahoma", system-ui, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  color: var(--ink);
  font-family: var(--font);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
body {
  background:
    radial-gradient(1100px 760px at 50% 45%, var(--bg-1) 0%, rgba(251, 250, 246, 0) 70%),
    linear-gradient(180deg, #f1f4ec 0%, var(--bg-2) 100%);
  background-color: var(--bg-2);
}

button { font: inherit; }

svg .line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.glass {
  background: var(--glass);
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
}

/* ===== พื้นที่วางหนังสือ ===== */
#stage {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:
    calc(var(--btn) + var(--gap) * 2 + env(safe-area-inset-top))
    calc(var(--arrow) + var(--gap) * 2 + env(safe-area-inset-right))
    calc(var(--gap) * 2 + env(safe-area-inset-bottom))
    calc(var(--arrow) + var(--gap) * 2 + env(safe-area-inset-left));
}

/* StPageFlip ใส่ min-width ให้เองแบบ inline — ปิดไว้เพราะเราคำนวณขนาดเอง */
#book { min-width: 0 !important; min-height: 0 !important; flex: none; }

/* ===== ตัวเล่ม ===== */
.page {
  background: #fff;
  overflow: hidden;
  box-shadow: 0 18px 40px -12px rgba(31, 45, 36, .35), 0 4px 10px rgba(31, 45, 36, .08);
}
.page.--left { border-radius: 6px 0 0 6px; }
.page.--right { border-radius: 0 6px 6px 0; }
.--portrait .page { border-radius: 6px; }

.page > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* เงาสันหนังสือตรงกลาง (เฉพาะโหมด 2 หน้า) */
.page::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 9%;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
}
.--landscape .page.--left:not(.--hard)::before {
  right: 0;
  opacity: 1;
  background: linear-gradient(to left, rgba(0, 0, 0, .16), rgba(0, 0, 0, .05) 35%, rgba(0, 0, 0, 0));
}
.--landscape .page.--right:not(.--hard)::before {
  left: 0;
  opacity: 1;
  background: linear-gradient(to right, rgba(0, 0, 0, .14), rgba(0, 0, 0, .04) 35%, rgba(0, 0, 0, 0));
}

/* รูปโหลดไม่ขึ้น */
.page.broken::after {
  content: "โหลดรูปไม่ได้: " attr(data-file);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1em;
  text-align: center;
  color: var(--muted);
  background: #f4f4f0;
  font-size: 14px;
}

/* ===== แถบบน ===== */
.topbar {
  position: fixed;
  top: calc(var(--gap) + env(safe-area-inset-top));
  left: calc(var(--gap) + env(safe-area-inset-left));
  right: calc(var(--gap) + env(safe-area-inset-right));
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding-left: 4px;
}
.brand-mark { width: 26px; height: 26px; flex: none; color: var(--primary); fill: currentColor; }
.brand-mark .line { stroke: #fff; stroke-width: 1.4; }
.brand-title {
  font-weight: 600;
  font-size: 17px;
  letter-spacing: .2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5;
  padding: .15em 0;
}

.toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  padding: 4px;
  border-radius: var(--radius);
}

.btn {
  position: relative;
  width: var(--btn);
  height: var(--btn);
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background .2s, color .2s, transform .15s, opacity .2s;
}
.btn svg { width: 22px; height: 22px; }
.btn:hover:not(:disabled) { background: var(--primary-soft); color: var(--primary); }
.btn:active:not(:disabled) { transform: scale(.92); }
.btn:disabled { opacity: .3; cursor: default; }
.btn:focus-visible, .arrow:focus-visible, .start-btn:focus-visible, .modal-close:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* สลับไอคอนตามสถานะ */
.btn .icon-off, .btn .icon-exit, .btn .eq { display: none; }
#btnBgm.off .icon-on { display: none; }
#btnBgm.off .icon-off { display: block; }
#btnFull.active .icon-enter { display: none; }
#btnFull.active .icon-exit { display: block; }

/* ปุ่มลำโพงตอนกำลังเล่น: พื้นเขียว + แท่งเสียงขยับ */
#btnAudio.playing { background: var(--primary); color: #fff; }
#btnAudio.playing .icon-play { display: none; }
#btnAudio.playing .eq { display: flex; }
.eq { align-items: flex-end; gap: 3px; height: 16px; }
.eq i {
  width: 3px;
  height: 100%;
  border-radius: 2px;
  background: currentColor;
  transform-origin: bottom;
  animation: eq 0.9s ease-in-out infinite;
}
.eq i:nth-child(2) { animation-delay: -.3s; }
.eq i:nth-child(3) { animation-delay: -.6s; }
@keyframes eq {
  0%, 100% { transform: scaleY(.3); }
  50% { transform: scaleY(1); }
}

.page-num {
  height: var(--btn);
  min-width: var(--btn);
  margin-left: 4px;
  padding: 0 14px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: var(--badge);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.page-total { opacity: .55; font-weight: 500; }

/* ===== กล่องไปหน้า ===== */
.goto {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  width: 300px;
  padding: 18px;
  border-radius: 22px;
  background: rgba(255, 255, 255, .94);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 24px 48px -16px rgba(31, 45, 36, .35), 0 4px 12px rgba(31, 45, 36, .08);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  animation: goto-in .22s cubic-bezier(.2, .8, .2, 1);
  transform-origin: calc(100% - 64px) -8px;
}
@keyframes goto-in { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
/* หางชี้ไปที่ปุ่มค้นหา */
.goto::before {
  content: "";
  position: absolute;
  top: -7px;
  right: 57px;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: inherit;
  transform: rotate(45deg);
}
.goto-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.goto-icon {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--primary-soft);
  color: var(--primary);
}
.goto-icon svg { width: 22px; height: 22px; }
.goto-title { display: block; font-size: 17px; font-weight: 700; color: var(--ink); }
.goto-hint { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.goto-field {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 5px 5px 6px;
  border-radius: 999px;
  background: #f2f5ef;
  border: 2px solid transparent;
  transition: border-color .2s, background .2s;
}
.goto-field:focus-within { border-color: var(--primary); background: #fff; }
.goto-field input {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 22px;
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
  outline: none;
}
.goto-field input::placeholder { color: #a3ada5; font-weight: 400; font-size: 18px; }
.goto-go {
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 14px -6px rgba(47, 125, 79, .7);
  transition: transform .15s, filter .2s;
}
.goto-go svg { width: 22px; height: 22px; }
.goto-go:hover { transform: translateX(2px); filter: brightness(1.1); }
.goto-go:active { transform: scale(.94); }
.goto-msg { margin: 10px 4px 0; font-size: 14px; color: var(--muted); text-align: center; }
.goto-msg:empty { display: none; }
.goto-msg.error { color: #c62828; }
.goto.shake { animation: goto-shake .35s; }
@keyframes goto-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@media (max-width: 560px) {
  .goto { left: 0; right: 0; width: auto; } /* มือถือ: ยาวเต็มความกว้างแถบบน */
  .goto::before { right: 51px; }
}
@media (max-height: 520px) {
  .goto { top: 0; right: calc(100% + 10px); }
  .goto::before { display: none; }
}

/* ===== ลูกศร ===== */
.arrow {
  position: fixed;
  z-index: 20;
  top: 50%;
  width: var(--arrow);
  height: var(--arrow);
  margin-top: calc(var(--arrow) / -2);
  padding: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--ink);
  cursor: pointer;
  transition: transform .15s, opacity .2s, background .2s, color .2s;
}
.arrow svg { width: 26px; height: 26px; }
.arrow:hover:not(:disabled) { background: var(--primary); color: #fff; border-color: var(--primary); }
.arrow:active:not(:disabled) { transform: scale(.92); }
.arrow:disabled { opacity: 0; pointer-events: none; }
.arrow-prev { left: calc(var(--gap) + env(safe-area-inset-left)); }
.arrow-next { right: calc(var(--gap) + env(safe-area-inset-right)); }

/* ===== แถบความคืบหน้า ===== */
.pagebar {
  --bar: 44px;
  position: fixed;
  left: 50%;
  bottom: calc(var(--gap) + env(safe-area-inset-bottom));
  z-index: 18;
  transform: translateX(-50%);
  width: min(1100px, calc(100% - var(--gap) * 2 - env(safe-area-inset-left) - env(safe-area-inset-right)));
  display: flex;
  align-items: center;
  gap: 8px;
}
.pb-track {
  position: relative;
  flex: 1;
  min-width: 0;
  height: var(--bar);
  padding: 0 4px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  user-select: none;
}
.pb-arrow {
  flex: none;
  width: calc(var(--bar) - 8px);
  height: calc(var(--bar) - 8px);
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background .2s, color .2s, opacity .2s;
}
.pb-arrow svg { width: 20px; height: 20px; }
.pb-arrow:hover:not(:disabled) { background: var(--primary-soft); color: var(--primary); }
.pb-arrow:disabled { opacity: .25; cursor: default; }
/* ช่องมองจุด: เลื่อนตามหน้าที่เปิด ขอบจางลงเมื่อยังมีจุดต่อ */
.pb-view {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  cursor: pointer;
  touch-action: none;
  --fade-l: 0px;
  --fade-r: 0px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
}
.pb-view.more-left { --fade-l: 36px; }
.pb-view.more-right { --fade-r: 36px; }
.pb-dots {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.pb-dots i {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(31, 45, 36, .16);
  color: #fff;
  font-style: normal;
  font-size: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: transform .2s, background .2s, box-shadow .2s;
}
.pb-dots i.done { background: rgba(47, 125, 79, .4); }
.pb-dots i.hover { transform: scale(1.35); background: rgba(47, 125, 79, .7); }
/* วงกลมหน้าที่เปิดอยู่: ใหญ่ขึ้นและมีเลขหน้า */
.pb-dots i.active {
  width: 34px;
  height: 34px;
  transform: none;
  background: var(--primary);
  font-size: 13px;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .95), 0 3px 10px rgba(47, 125, 79, .45);
}
/* ป้ายบอกเลขหน้าเหนือจุดตอนชี้/ลาก */
.pb-tip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  transform: translateX(-50%);
  padding: 6px 12px;
  border-radius: 10px;
  background: var(--badge);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: var(--shadow);
}
.pb-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -6px;
  border: 6px solid transparent;
  border-top-color: var(--badge);
}
/* เว้นที่ด้านล่างให้แถบ */
html body.has-pagebar #stage { padding-bottom: calc(44px + var(--gap) * 2 + 4px + env(safe-area-inset-bottom)); }
html body.has-pagebar .toast { bottom: calc(44px + var(--gap) * 3 + env(safe-area-inset-bottom)); }
@media (max-width: 560px) {
  .pagebar { --bar: 38px; gap: 6px; }
  .pb-dots { gap: 9px; padding: 0 8px; }
  .pb-arrow svg { width: 18px; height: 18px; }
  .pb-dots i { width: 8px; height: 8px; }
  .pb-dots i.active { width: 30px; height: 30px; font-size: 12px; }
  html body.has-pagebar #stage { padding-bottom: calc(38px + var(--gap) * 2 + 4px + env(safe-area-inset-bottom)); }
}
/* จอเตี้ย: ซ่อนแถบเพื่อให้หนังสือใหญ่ที่สุด */
@media (max-height: 520px) {
  .pagebar { display: none !important; }
  html body.has-pagebar #stage { padding-bottom: calc(var(--gap) + 4px + env(safe-area-inset-bottom)); }
  html body.has-pagebar .toast { bottom: calc(var(--gap) * 2); }
}

/* ===== ข้อความแนะนำ ===== */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--gap) * 2 + env(safe-area-inset-bottom));
  z-index: 25;
  transform: translateX(-50%);
  max-width: calc(100% - 32px);
  padding: 10px 18px;
  border-radius: var(--radius);
  font-size: 15px;
  text-align: center;
  animation: toast 4s ease forwards;
  pointer-events: none;
}
@keyframes toast {
  0% { opacity: 0; transform: translate(-50%, 10px); }
  10%, 80% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, 0); }
}

/* ===== มือถือ / จอแคบ: ลูกศรลงไปมุมล่าง ===== */
@media (max-width: 767px), (orientation: portrait) and (max-width: 1024px) {
  :root { --gap: 12px; --arrow: 48px; }
  #stage {
    padding:
      calc(var(--btn) + var(--gap) * 2 + env(safe-area-inset-top))
      calc(var(--gap) + env(safe-area-inset-right))
      calc(var(--arrow) + var(--gap) * 2 + env(safe-area-inset-bottom))
      calc(var(--gap) + env(safe-area-inset-left));
  }
  .arrow { top: auto; margin-top: 0; bottom: calc(var(--gap) + env(safe-area-inset-bottom)); }
  .arrow:disabled { opacity: .3; }
  .toast { bottom: calc(var(--arrow) + var(--gap) * 2 + env(safe-area-inset-bottom)); }
}
@media (max-width: 560px) {
  .brand-title { display: none; }
  .btn { width: 40px; height: 40px; }
  .btn svg { width: 20px; height: 20px; }
  .page-num { height: 40px; padding: 0 12px; font-size: 14px; }
  .page-total { display: none; }
}

/* จอเตี้ย (มือถือแนวนอน): แถบปุ่มเป็นแนวตั้งด้านขวา */
@media (max-height: 520px) {
  :root { --btn: 38px; --arrow: 40px; --gap: 8px; }
  #stage {
    padding:
      calc(var(--gap) + env(safe-area-inset-top)) calc(var(--btn) + 8px + var(--gap) * 2 + env(safe-area-inset-right))
      calc(var(--gap) + 4px + env(safe-area-inset-bottom)) calc(var(--arrow) + var(--gap) * 2 + env(safe-area-inset-left));
  }
  .brand { display: none !important; }
  .topbar { left: auto; }
  .toolbar { flex-direction: column; border-radius: 22px; }
  .btn svg { width: 19px; height: 19px; }
  .page-num { order: -1; margin: 0 0 4px; padding: 0 6px; font-size: 13px; }
  .page-total { display: none; }
  .arrow { top: auto; margin-top: 0; bottom: calc(var(--gap) + env(safe-area-inset-bottom)); }
  .arrow:disabled { opacity: .3; }
}

/* ===== ปุ่มบนหน้า (แบบที่ออกแบบใน Canva) ===== */
/* ขนาดปุ่มอิงความกว้างหน้า (cqw) จึงเล็ก/ใหญ่ตามหนังสือเสมอ */
.page { container-type: inline-size; }
.page-ui { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.pg-top {
  position: absolute;
  top: 2.4cqw;
  right: 2.4cqw;
  display: flex;
  align-items: center;
  gap: 1.2cqw;
}
.pg-btn, .pg-num {
  width: clamp(30px, 6.6cqw, 56px);
  height: clamp(30px, 6.6cqw, 56px);
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
  pointer-events: auto;
}
.pg-btn {
  padding: 0;
  border: 0;
  display: grid;
  place-items: center;
  background: var(--page-btn);
  color: #fff;
  cursor: pointer;
  transition: transform .15s, filter .2s, opacity .2s;
}
.pg-btn svg { width: 58%; height: 58%; fill: currentColor; }
.pg-btn svg .line { stroke-width: 2.6; }
.pg-btn:hover:not(:disabled) { transform: scale(1.1); filter: brightness(1.12); }
.pg-btn:active:not(:disabled) { transform: scale(.94); }
.pg-btn:disabled { opacity: .4; cursor: default; }
.pg-btn:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.pg-audio svg:last-child { display: none; }
.pg-audio.playing svg:first-child { display: none; }
.pg-audio.playing svg:last-child { display: block; }
.pg-audio.playing { animation: pg-pulse 1.4s ease-out infinite; }
@keyframes pg-pulse {
  0% { box-shadow: 0 0 0 0 rgba(106, 27, 255, .55); }
  100% { box-shadow: 0 0 0 3cqw rgba(106, 27, 255, 0); }
}
.pg-num {
  width: auto;
  min-width: clamp(30px, 6.6cqw, 56px);
  padding: 0 1cqw;
  display: grid;
  place-items: center;
  background: var(--page-num);
  color: #fff;
  font-weight: 700;
  font-size: clamp(12px, 2.9cqw, 24px);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.pg-prev, .pg-next { position: absolute; bottom: 2.4cqw; }
.pg-prev { left: 2.4cqw; }
.pg-next { right: 2.4cqw; }
/* โหมด 2 หน้า: ลูกศรย้อนอยู่หน้าซ้าย ลูกศรไปต่ออยู่หน้าขวา */
.--landscape .page.--left .pg-next,
.--landscape .page.--right .pg-prev { display: none; }

/* มีปุ่มบนหน้าแล้ว ไม่ต้องเว้นที่ให้ลูกศรลอย หนังสือจึงใหญ่ขึ้น */
body.has-page-ui #stage {
  padding-left: calc(var(--gap) * 2 + env(safe-area-inset-left));
  padding-right: calc(var(--gap) * 2 + env(safe-area-inset-right));
  padding-bottom: calc(var(--gap) * 2 + env(safe-area-inset-bottom));
}
@media (max-width: 767px), (orientation: portrait) and (max-width: 1024px) {
  body.has-page-ui #stage {
    padding-left: calc(var(--gap) + env(safe-area-inset-left));
    padding-right: calc(var(--gap) + env(safe-area-inset-right));
  }
  body.has-page-ui .toast { bottom: calc(var(--gap) * 2 + env(safe-area-inset-bottom)); }
}
@media (max-height: 520px) {
  body.has-page-ui #stage { padding-left: calc(var(--gap) + env(safe-area-inset-left)); }
}

/* ===== จุดกด (hotspot) บนหน้า ===== */
.hotspots { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hotspot {
  position: absolute;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  pointer-events: auto;
  transition: background .2s, box-shadow .2s;
}
.hotspot > * { pointer-events: none; } /* ให้ target ของคลิกเป็นตัว hotspot เสมอ */
.hotspot:hover, .hotspot:focus-visible {
  background: rgba(47, 125, 79, .08);
  box-shadow: inset 0 0 0 2px rgba(47, 125, 79, .6);
  outline: none;
}
.hotspot-icon {
  width: clamp(36px, 22%, 68px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .9);
  color: var(--primary);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
  opacity: 0;
  transform: scale(.85);
  transition: opacity .2s, transform .2s;
}
.hotspot-icon svg { width: 45%; height: 45%; fill: currentColor; }
.hotspot-video .hotspot-icon svg { margin-left: 8%; }
.hotspot-link .hotspot-icon { width: clamp(24px, 16%, 40px); position: absolute; top: 6px; right: 6px; }
.hotspot:hover .hotspot-icon, .hotspot:focus-visible .hotspot-icon { opacity: 1; transform: scale(1); }
@media (hover: none) {
  .hotspot-video .hotspot-icon { opacity: .9; transform: scale(1); } /* จอสัมผัสไม่มี hover: แสดงไว้ตลอด */
}

/* ===== popup วิดีโอ ===== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) 16px;
  background: rgba(14, 20, 16, .82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  animation: fade .2s ease;
}
@keyframes fade { from { opacity: 0; } }
.modal-box {
  position: relative;
  width: min(100%, 1100px, (100vh - 120px) * 16 / 9);
  width: min(100%, 1100px, (100dvh - 120px) * 16 / 9);
  animation: pop .25s ease;
}
@keyframes pop { from { transform: scale(.96); opacity: 0; } }
.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.modal-close {
  position: absolute;
  top: -56px;
  right: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  cursor: pointer;
  transition: background .2s;
}
.modal-close svg { width: 20px; height: 20px; }
.modal-close:hover { background: rgba(255, 255, 255, .28); }
@media (max-height: 520px) {
  .modal { padding-right: 68px; }
  .modal-close { top: 0; right: -58px; }
}

/* ===== หน้าแนะนำหนังสือ (เลื่อนลงแล้วหนังสือหมุน) ===== */
.landing {
  --ld-bg: #fbfbf8;
  --ld-ink: #1b2a21;
  --ld-muted: rgba(27, 42, 33, .62);
  --ld-accent: #2f7d4f;
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--ld-bg);
  color: var(--ld-ink);
  transition: opacity .9s ease;
}
.landing.closing { opacity: 0; pointer-events: none; }
.ld-glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(42vmax 34vmax at 22% 18%, rgba(186, 228, 196, .55), rgba(186, 228, 196, 0) 70%),
    radial-gradient(38vmax 30vmax at 82% 30%, rgba(246, 230, 186, .45), rgba(246, 230, 186, 0) 70%),
    radial-gradient(46vmax 36vmax at 60% 92%, rgba(196, 222, 240, .45), rgba(196, 222, 240, 0) 70%);
  filter: blur(30px);
  animation: drift 24s ease-in-out infinite alternate;
}
@keyframes drift {
  to { transform: translate3d(-3vw, 2vh, 0) scale(1.06); }
}


/* พื้นที่เลื่อนยาว + ฉากที่ค้างอยู่กับจอ */
.ld-track { position: relative; height: 820vh; }
.ld-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* จุดยึดขนาด 0: เล่มหนังสืออยู่กึ่งกลางจุดนี้ และขยาย/ย่อรอบจุดนี้ */
.ld-book {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  z-index: 1;
}
/* เงาเรืองแสงหลังเล่ม */
.book3d::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150%;
  height: 120%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(47, 125, 79, .16), rgba(47, 125, 79, 0));
  filter: blur(24px);
  pointer-events: none;
}

/* ข้อความแต่ละช่วง: ความทึบและการเลื่อนมาจาก JS (--py) */
.ld-panel {
  --py: 30px;
  position: absolute;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
}
.ld-panel.on { pointer-events: auto; }
.ld-kicker { margin: 0 0 14px; color: #1f6b3f; font-size: clamp(24px, 2.4vw, 34px); font-weight: 700; letter-spacing: .01em; }
.ld-title {
  margin: 0;
  font-size: clamp(52px, 8.8vw, 136px);
  font-weight: 700;
  line-height: 1.32;
  padding: .06em 0;
  color: var(--ld-ink);
  letter-spacing: -.01em;
}
.ld-sub { margin: 16px 0 0; color: var(--ld-muted); font-size: clamp(24px, 3vw, 40px); }
.ld-h2 { margin: 0; font-size: clamp(38px, 5.4vw, 84px); font-weight: 700; line-height: 1.3; padding: .04em 0; letter-spacing: -.01em; }
.ld-p { margin: 20px 0 0; color: var(--ld-muted); font-size: clamp(22px, 2.4vw, 32px); line-height: 1.6; }

.ld-hero {
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: calc(env(safe-area-inset-top) + 10vh);
  text-align: center;
  transform: translateY(var(--py));
}
.ld-scroll-hint {
  margin: 22px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--ld-muted);
  font-size: 19px;
}
.ld-scroll-hint svg { width: 26px; height: 26px; animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(6px); } }

.ld-left, .ld-right {
  top: 50%;
  width: min(46vw, 680px);
  transform: translateY(calc(-50% + var(--py)));
}
.ld-left { left: 6vw; }
.ld-right { right: 6vw; }

.ld-list { margin: 30px 0 0; padding: 0; list-style: none; counter-reset: n; display: grid; gap: 14px; }
.ld-list li {
  counter-increment: n;
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: clamp(24px, 2.6vw, 36px);
}
.ld-list li::before {
  content: counter(n);
  flex: none;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(47, 125, 79, .08);
  border: 1px solid rgba(47, 125, 79, .28);
  color: var(--ld-accent);
  font-size: .72em;
  font-weight: 600;
}
/* การ์ดกลุ่มโรค: ไอคอน + ชื่อโรค เรียง 2 คอลัมน์ */
.ld-chips { margin: 28px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ld-chips li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px 12px 12px;
  border-radius: 22px;
  border: 1px solid rgba(27, 42, 33, .08);
  background: rgba(255, 255, 255, .8);
  box-shadow: 0 10px 26px -14px rgba(27, 42, 33, .3);
  font-size: clamp(20px, 1.9vw, 27px);
  font-weight: 600;
  line-height: 1.3;
}
.ld-chips img {
  flex: none;
  width: clamp(54px, 5.2vw, 78px);
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(27, 42, 33, .15));
}

.ld-top { top: calc(env(safe-area-inset-top) + 7vh); left: 6vw; right: 6vw; text-align: center; transform: translateY(var(--py)); }

/* แถวการ์ดสมุนไพรที่เลื่อนผ่าน */
.ld-cards {
  position: absolute;
  left: 0;
  right: 0;
  top: 42%;
  height: 42vh;
  height: 42dvh;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
}
.ld-cards-row { display: flex; gap: 24px; height: 100%; will-change: transform; }
.ld-cards-row img {
  flex: none;
  height: 100%;
  aspect-ratio: 596 / 842;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 26px 50px -18px rgba(27, 42, 33, .35), 0 6px 14px -6px rgba(27, 42, 33, .15);
}

.ld-final { left: 6vw; right: 6vw; bottom: 7vh; text-align: center; transform: translateY(var(--py)); }
.ld-final .start-btn { margin-top: 24px; }

.ld-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(27, 42, 33, .05); }
.ld-progress span { display: block; height: 100%; width: 0; background: var(--ld-accent); }

/* ปุ่มเริ่มอ่าน */
.start-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 38px 18px 44px;
  border: 0;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 14px 34px -8px rgba(72, 180, 110, .55);
  transition: transform .2s, box-shadow .2s, filter .2s;
}
.start-btn svg { width: 24px; height: 24px; transition: transform .2s; }
.start-btn:hover { transform: translateY(-2px); filter: brightness(1.1); }
.start-btn:hover svg { transform: translateX(4px); }

/* ===== แสงขาววาบตอนสลับจากหน้าแนะนำเข้าหน้าอ่าน ===== */
.flash {
  position: fixed;
  inset: 0;
  z-index: 45;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 50%, #fff 0%, #fff 35%, rgba(255, 255, 255, .92) 70%, rgba(240, 248, 240, .9) 100%);
}
.flash.quick { animation: flash .8s ease-out forwards; }
@keyframes flash {
  0% { opacity: 0; }
  25% { opacity: .9; }
  100% { opacity: 0; }
}
body.reader-in .topbar,
body.reader-in .pagebar { animation: fade-in .6s .35s ease both; }
@keyframes fade-in { from { opacity: 0; } }

/* ===== หนังสือ 3 มิติ =====
 * กล่อง 6 ด้าน: ปกหน้า, ปกหลัง, สันปก, ขอบกระดาษ — มุมหมุนจาก JS ผ่าน --ry / --rx */
/* --s = ขนาดจาก JS: ปรับความสูงจริงของเล่ม (ไม่ใช้ transform: scale) ภาพจึงคมทุกขนาด */
@property --s {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}
.book3d {
  --h0: min(56vh, 520px, 80vw);
  --h0: min(56dvh, 520px, 80vw);
  --h: calc(var(--h0) * var(--s));
  --w: calc(var(--h) * .7078);       /* สัดส่วนปก A4 */
  --t: calc(var(--w) * .1);          /* ความหนาของเล่ม */
  --ry: 0deg;
  --rx: 0deg;
  position: relative;
  width: var(--w);
  height: var(--h);
  transform: translate(-50%, -50%);
  perspective: 2200px;
}
.book3d-body {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
}
/* ตอนกดเริ่มอ่าน: หมุนหน้าตรง + ปรับขนาดให้เท่าปกในหน้าอ่าน พร้อมกับการบิน */
.book3d.flying .book3d-body { transition: transform .9s cubic-bezier(.3, .1, .2, 1); }
.book3d.flying { transition: --s .9s cubic-bezier(.3, .1, .2, 1); }
.book3d-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background: #fff;
}
.book3d-front { border-radius: 2px 7px 7px 2px; transform: translateZ(calc(var(--t) / 2)); }
.book3d-back { border-radius: 7px 2px 2px 7px; transform: rotateY(180deg) translateZ(calc(var(--t) / 2)); }
.start-cover {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
/* รอยพับตรงสันปก + แสงสะท้อนบนปก (ปกหลังสันอยู่ด้านขวา) */
.book3d-front::after,
.book3d-back::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(0, 0, 0, .30) 0,
      rgba(0, 0, 0, .06) 1.4%,
      rgba(255, 255, 255, .38) 2.4%,
      rgba(255, 255, 255, 0) 4.2%,
      rgba(0, 0, 0, .10) 5.2%,
      rgba(0, 0, 0, 0) 8.5%),
    linear-gradient(120deg, rgba(255, 255, 255, .24) 0%, rgba(255, 255, 255, 0) 38%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, .08) 100%);
}
.book3d-back::after { transform: scaleX(-1); }
/* สันปก (ซ้าย) */
.book3d-spine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--t) / -2);
  width: var(--t);
  transform: rotateY(-90deg);
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .35), rgba(255, 255, 255, .16) 22%, rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, .12) 80%, rgba(0, 0, 0, .3)),
    linear-gradient(180deg, #3a7a4b, #2a5e38);
}
.book3d-spine::before,
.book3d-spine::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 236, 170, .6);
}
.book3d-spine::before { top: 7%; }
.book3d-spine::after { bottom: 7%; }
/* ขอบกระดาษ (ขวา / บน / ล่าง) */
.book3d-pages {
  position: absolute;
  top: 1%;
  bottom: 1%;
  left: calc(var(--w) - var(--t) / 2 - 3px);
  width: calc(var(--t) - 2px);
  transform: rotateY(90deg);
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .16), rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 78%, rgba(0, 0, 0, .16)),
    repeating-linear-gradient(90deg, #fbf8ef 0 1.5px, #e2dbc8 1.5px 2.5px);
}
.book3d-edge {
  position: absolute;
  left: 2px;
  width: calc(var(--w) - 6px);
  height: calc(var(--t) - 2px);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .14), rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, .14)),
    repeating-linear-gradient(180deg, #fbf8ef 0 1.5px, #e2dbc8 1.5px 2.5px);
}
.book3d-top { top: calc(var(--t) / -2 + 3px); transform: rotateX(90deg); }
.book3d-bottom { top: calc(var(--h) - var(--t) / 2 - 3px); transform: rotateX(-90deg); }

/* ===== มือถือ / จอแนวตั้ง: หนังสืออยู่บน ข้อความอยู่ล่าง ===== */
@media (max-width: 820px), (orientation: portrait) and (max-width: 1024px) {
  .book3d { --h0: min(44vh, 420px, 92vw); --h0: min(44dvh, 420px, 92vw); }
  .ld-hero { padding-top: calc(env(safe-area-inset-top) + 7vh); }
  .ld-left, .ld-right {
    top: auto;
    left: 6vw;
    right: 6vw;
    bottom: 6vh;
    width: auto;
    text-align: center;
    transform: translateY(var(--py));
  }
  .ld-list { justify-items: start; width: fit-content; margin-inline: auto; grid-template-columns: 1fr 1fr; gap: 10px 18px; }

  .ld-chips { text-align: left; gap: 10px; }
  .ld-cards { top: 46%; height: 36vh; height: 36dvh; }
  .ld-cards-row { gap: 14px; }
}
@media (max-width: 420px) {
  .ld-list { grid-template-columns: 1fr; gap: 10px; }
  .ld-list li { font-size: 20px; gap: 12px; white-space: nowrap; }
  .ld-title { font-size: 46px; }
  .ld-h2 { font-size: 34px; }
  .ld-p { font-size: 19px; }
  .ld-chips li { font-size: 17px; padding: 8px 10px 8px 8px; gap: 8px; border-radius: 18px; }
  .ld-chips img { width: 46px; }
}
@media (max-height: 520px) {
  .book3d { --h0: 62vh; --h0: 62dvh; }
  .ld-scroll-hint { margin-top: 10px; }
}


/* ===== Loading ===== */
.loading {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: var(--bg-1);
  color: var(--muted);
  transition: opacity .35s;
}
.loading.hidden { opacity: 0; pointer-events: none; }
.loading p { margin: 0; font-size: 15px; }
.loading-mark { width: 40px; height: 40px; fill: var(--primary); animation: sway 1.6s ease-in-out infinite; }
@keyframes sway { 50% { transform: rotate(-12deg) scale(1.05); } }
.loading-bar { width: 140px; height: 3px; border-radius: 3px; overflow: hidden; background: var(--primary-soft); }
.loading-bar span {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: 3px;
  background: var(--primary);
  animation: slide 1.1s ease-in-out infinite;
}
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

/* ===== โหมดหาตำแหน่ง hotspot (?edit=1) ===== */
.edit-mode #stage { padding-bottom: 150px; }
.edit-mode .hotspot {
  pointer-events: none;
  outline: 2px dashed #e5202a;
  outline-offset: -2px;
  background: rgba(229, 32, 42, .08);
}
.edit-mode .hotspot::after {
  content: attr(data-label);
  position: absolute;
  top: 2px;
  left: 4px;
  font: 600 11px var(--font);
  color: #e5202a;
}
.draw-layer { position: absolute; inset: 0; cursor: crosshair; touch-action: none; z-index: 4; }
.draw-box {
  position: absolute;
  border: 2px solid #00b0ff;
  background: rgba(0, 176, 255, .15);
  pointer-events: none;
}
.edit-panel {
  position: fixed;
  left: 50%;
  bottom: calc(var(--gap) + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 30;
  width: min(720px, calc(100% - var(--arrow) * 2 - var(--gap) * 6));
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(20, 28, 23, .88);
  color: #fff;
  font-size: 14px;
}
.edit-head { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.edit-head strong { color: #ffd54f; }
.edit-hint { margin: 4px 0 0; opacity: .75; }
.edit-row { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.edit-row code {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: 6px;
  background: #1e1e1e;
  color: #9cdcfe;
  font-size: 13px;
}
.edit-copy {
  flex: none;
  font-size: 13px;
  padding: 5px 10px;
  border: 0;
  border-radius: 6px;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ไม่ตัดวลีภาษาไทยกลางคำในหน้าแนะนำ */
.nw { white-space: nowrap; }
.ld-h2, .ld-p, .ld-sub { text-wrap: balance; }

/* จอเตี้ย (เช่นโน้ตบุ๊ก): ลดขนาดหัวข้อ/รายการเล็กน้อยไม่ให้ชนแถบบน */
@media (max-height: 820px) and (min-width: 821px) {
  .ld-h2 { font-size: clamp(34px, 4.4vw, 60px); }
  .ld-kicker { margin-bottom: 8px; }
  .ld-list { margin-top: 18px; gap: 8px; }
  .ld-list li { font-size: clamp(20px, 2vw, 28px); }
  .ld-chips { margin-top: 18px; }
}

/* ปุ่มเริ่มอ่านในช่วงแรก (ระหว่างคำโปรยกับ "เลื่อนลงเพื่อดูเพิ่มเติม") */
.ld-hero-btn { margin-top: 26px; }
@media (max-width: 820px), (orientation: portrait) and (max-width: 1024px) {
  .ld-hero-btn { margin-top: 18px; padding: 14px 30px 14px 34px; font-size: 20px; }
}

@media (max-width: 420px) {
  .ld-chips li { font-size: 16px; }
  .ld-chips img { width: 40px; }
}

/* ===== สมุนไพรตกแต่งรอบขอบ (ลอยขึ้นลงเบา ๆ) ===== */
.ld-deco {
  position: absolute;
  z-index: -1;
  width: var(--sz);
  height: auto;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 16px 22px rgba(27, 42, 33, .16));
  transform: rotate(var(--r));
  animation: herb-float 7s ease-in-out var(--d, 0s) infinite alternate;
}
@keyframes herb-float {
  from { transform: translateY(0) rotate(var(--r)); }
  to { transform: translateY(-16px) rotate(calc(var(--r) + 5deg)); }
}
.ld-hero { isolation: isolate; }
.ld-deco-layer { inset: 0; pointer-events: none !important; z-index: 0; }
/* จอแคบ (มือถือ/แท็บเล็ตแนวตั้ง): ไม่แสดงสมุนไพรตกแต่ง */
@media (max-width: 820px), (orientation: portrait) and (max-width: 1024px) {
  .ld-deco { display: none; }
}

/* ปุ่มกลับหน้าแรก (มุมซ้ายบนของหน้าอ่าน) */
.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: calc(var(--btn) + 8px);
  padding: 0 18px 0 12px;
  border-radius: var(--radius);
  color: var(--ink);
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, color .2s, transform .15s;
}
.btn-back svg { width: 22px; height: 22px; }
.btn-back:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-back:active { transform: scale(.96); }
.btn-back:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
@media (max-width: 560px) {
  .btn-back { height: 48px; padding: 0 14px 0 10px; font-size: 16px; }
}
@media (max-height: 520px) {
  .btn-back { position: fixed; left: calc(var(--gap) + env(safe-area-inset-left)); top: calc(var(--gap) + env(safe-area-inset-top)); height: 40px; font-size: 15px; }
}

/* ===== ปุ่มเสียงบรรยายหน้าแนะนำ (มุมขวาบน) ===== */
.ld-voice {
  position: fixed;
  top: calc(18px + env(safe-area-inset-top));
  right: calc(18px + env(safe-area-inset-right));
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  padding: 0 20px 0 16px;
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: 999px;
  background: rgba(255, 255, 255, .78);
  color: var(--ld-ink);
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 10px 26px -10px rgba(27, 42, 33, .3);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: background .2s, color .2s, transform .15s;
}
.ld-voice svg { width: 24px; height: 24px; fill: currentColor; }
.ld-voice svg .line { stroke-width: 2.2; }
.ld-voice:hover { transform: translateY(-1px); }
.ld-voice[aria-pressed="true"] { background: var(--primary); color: #fff; border-color: var(--primary); }
.ld-voice.speaking svg { animation: pulse-icon 1.2s ease-in-out infinite; }
@keyframes pulse-icon { 50% { transform: scale(1.15); } }
@media (max-width: 560px) {
  .ld-voice { height: 46px; padding: 0 14px 0 12px; font-size: 16px; }
}

/* ===== ขยาย / ย่อหนังสือ (ด้านบนกึ่งกลาง) ===== */
.zoom-ctl {
  position: fixed;
  top: calc(var(--gap) + env(safe-area-inset-top));
  left: 50%;
  z-index: 22;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
}
#zoomOut { order: 1; }
.zoom-level { order: 2; }
#zoomIn { order: 3; }
.zoom-btn {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  transition: transform .15s, filter .2s, opacity .2s;
}
.zoom-btn svg { width: 22px; height: 22px; }
.zoom-btn svg .line { stroke-width: 2.6; }
.zoom-btn:hover:not(:disabled) { transform: scale(1.08); filter: brightness(1.1); }
.zoom-btn:active:not(:disabled) { transform: scale(.94); }
.zoom-btn:disabled { opacity: .3; cursor: default; }
.zoom-level {
  min-width: 58px;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.zoom-btn:focus-visible, .zoom-level:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
@media (max-width: 560px) {
  .zoom-ctl { padding: 3px; gap: 2px; }
  .zoom-btn { width: 34px; height: 34px; }
  .zoom-btn svg { width: 18px; height: 18px; }
  .zoom-level { min-width: 44px; font-size: 13px; }
}
@media (max-height: 520px) {
  .zoom-btn { width: 32px; height: 32px; }
  .zoom-level { min-width: 44px; font-size: 12px; }
}

/* ตอนซูม: ลากเพื่อเลื่อนดู */
#book { transform-origin: center center; }
#book.zoom-anim { transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.zoom-pan {
  position: fixed;
  inset: 0;
  z-index: 12;
  cursor: grab;
  touch-action: none;
}
.zoom-pan.dragging { cursor: grabbing; }

/* จอแคบมาก: ปุ่มหน้าแรกเหลือแค่ลูกศร ไม่ชนปุ่มซูมตรงกลาง */
@media (max-width: 370px) {
  .btn-back { padding: 0 12px; }
  .btn-back-label { display: none; }
}

/* ===== แถบเมนูด้านบนขนาดกะทัดรัด ===== */
:root { --btn: 38px; }
.btn svg { width: 19px; height: 19px; }
.btn-back { height: calc(var(--btn) + 6px); padding: 0 14px 0 10px; font-size: 15px; }
.btn-back svg { width: 19px; height: 19px; }
.zoom-ctl { padding: 3px; gap: 2px; }
.zoom-btn { width: 38px; height: 38px; }
.zoom-btn svg { width: 19px; height: 19px; }
.zoom-level { min-width: 50px; font-size: 14px; }
@media (max-width: 560px) {
  .btn { width: 34px; height: 34px; }
  .btn svg { width: 17px; height: 17px; }
  .btn-back { height: 40px; font-size: 14px; }
  .zoom-btn { width: 30px; height: 30px; }
  .zoom-btn svg { width: 16px; height: 16px; }
  .zoom-level { min-width: 40px; font-size: 12px; }
}

/* ===== ภาพย่อทุกหน้า ===== */
.thumbs {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: flex;
  flex-direction: column;
  background: rgba(244, 246, 240, .9);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  animation: fade .2s ease;
}
.thumbs-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(14px + env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 10px max(24px, env(safe-area-inset-left));
}
.thumbs-title { margin: 0; font-size: 24px; font-weight: 700; color: var(--ink); }
.thumbs-close {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--shadow);
}
.thumbs-close svg { width: 20px; height: 20px; }
.thumbs-close:hover { background: var(--primary); color: #fff; }
.thumbs-grid {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
  gap: 22px 18px;
  padding: 10px max(24px, env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  align-content: start;
}
.thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.thumb-img {
  width: 100%;
  aspect-ratio: 596 / 842;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 18px -10px rgba(31, 45, 36, .45), 0 1px 3px rgba(31, 45, 36, .12);
  transition: transform .2s, box-shadow .2s;
}
.thumb-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.thumb:hover .thumb-img { transform: translateY(-3px); box-shadow: 0 14px 24px -12px rgba(31, 45, 36, .55); }
.thumb-label {
  min-width: 40px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #fff;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 6px rgba(31, 45, 36, .1);
}
.thumb.current .thumb-img { box-shadow: 0 0 0 3px var(--primary), 0 12px 22px -10px rgba(47, 125, 79, .6); }
.thumb.current .thumb-label { background: var(--primary); color: #fff; }
.thumb:focus-visible { outline: none; }
.thumb:focus-visible .thumb-img { box-shadow: 0 0 0 3px var(--ink); }
@media (max-width: 560px) {
  .thumbs-grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 16px 12px; padding-left: 14px; padding-right: 14px; }
  .thumbs-title { font-size: 20px; }
  .thumb-label { font-size: 13px; }
}

/* ปุ่มด้านบนสูงเท่ากันทั้ง 3 กลุ่ม (ซ้าย / กลาง / ขวา) */
:root { --bar-h: calc(var(--btn) + 10px); }
.btn-back { height: var(--bar-h); }
.toolbar { height: var(--bar-h); }
.zoom-ctl { height: var(--bar-h); padding: 0 4px; }
@media (max-width: 560px) {
  :root { --bar-h: 44px; }
  .btn-back { height: var(--bar-h); }
  .zoom-ctl { padding: 0 6px; }
}

/* กล่องไปหน้า: ขนาดกะทัดรัดขึ้น */
.goto { padding: 14px; border-radius: 18px; }
.goto-head { gap: 10px; margin-bottom: 10px; }
.goto-icon { width: 34px; height: 34px; border-radius: 11px; }
.goto-icon svg { width: 18px; height: 18px; }
.goto-title { font-size: 15px; }
.goto-hint { font-size: 12px; }
.goto-field { padding: 3px 3px 3px 4px; }
.goto-field input { height: 36px; font-size: 18px; }
.goto-field input::placeholder { font-size: 15px; }
.goto-go { width: 36px; height: 36px; }
.goto-go svg { width: 18px; height: 18px; }
.goto-msg { margin-top: 8px; font-size: 13px; }

/* ===== วิดีโอในหน้า: ภาพตัวอย่าง + ปุ่มเล่นแบบ YouTube ===== */
.hotspot.vid-inline {
  overflow: hidden;
  border-radius: 0;
  background: #111;
}
.hotspot.vid-inline:hover, .hotspot.vid-inline:focus-visible { background: #111; box-shadow: none; }
.vid-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease, filter .3s;
}
.vid-inline::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, .25));
  pointer-events: none;
}
.vid-play {
  position: relative;
  z-index: 1;
  width: clamp(48px, 13%, 84px);
  line-height: 0;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35));
  transition: transform .2s;
}
.vid-play svg { width: 100%; height: auto; }
.vid-play .yt-bg { fill: #f00; transition: fill .2s; }
.vid-play .yt-tri { fill: #fff; }
.vid-inline:hover .vid-play, .vid-inline:focus-visible .vid-play { transform: scale(1.06); }
.vid-inline:hover .yt-bg { fill: #e00; }
.vid-inline:hover .vid-poster { transform: scale(1.03); }
.vid-frame {
  position: absolute;
  z-index: 3;
  pointer-events: auto;
}
/* ซ่อนเครื่องเล่นไว้จนโหลดเสร็จ (เห็นภาพตัวอย่างด้านล่างแทนจอดำ) */
.vid-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity .25s; }
.vid-frame.ready iframe { opacity: 1; }