/* =========================================================
   เรียนเพลิน — ส่วนเสริมของระบบ + แก้จุดหลุดกรอบ
   โหลดต่อจาก styles.css (ใช้หน่วย rem ตามสเกลเดิมของงานออกแบบ)
   ========================================================= */

[hidden] { display: none !important; }

/* ---------- ขยายเต็มจอกว้าง (เดิมล็อกไว้ 1440px ขอบซ้ายขวาเลยว่าง) ---------- */
@media (min-width: 761px) {
  :root { font-size: clamp(0.85px, 0.12345679vw, 3.1605px); }
}
body { background: #fff7e7; overflow-x: clip; }
.site-shell { max-width: 2560px; }
@media (min-width: 1441px) {
  .site-shell { box-shadow: none; }
}

/* ---------- ช่องใส่ภาพ ---------- */
.slot { display: block; width: 100%; height: 100%; object-fit: cover; }
.slot.contain { object-fit: contain; }
.ph {
  display: grid; place-content: center; justify-items: center; gap: 0.3em;
  width: 100%; height: 100%; min-height: 3em; padding: 0.6em; text-align: center;
  color: #073780; font-size: max(9px, 0.7em); line-height: 1.25;
  background:
    repeating-linear-gradient(-45deg, #ffffff 0 8px, #fff4d6 8px 16px);
  border: 1.5px dashed #d8b67f; border-radius: inherit;
}
.ph__label { font-weight: 700; }
.ph__file { opacity: 0.7; font-size: 0.85em; word-break: break-all; }
.ph__size {
  font-size: 0.85em; font-weight: 800; color: #fff; background: #073780;
  border-radius: 99px; padding: 0.05em 0.7em;
}
.ph--tiny .ph__label, .ph--tiny .ph__file { display: none; }

/* ---------- หัวเว็บ: เหรียญ + จุดเตือนเช็คอิน ---------- */
.my-coins { position: relative; }
.my-coins b { color: #f05b39; }
.dot-alert {
  position: absolute; top: -2rem; left: 10rem; width: 6rem; height: 6rem;
  background: #ff336b; border: 1rem solid #fff; border-radius: 50%;
  animation: rp-pulse 1.6s ease-in-out infinite;
}

/* ---------- ปุ่มใส่ตะกร้าเมื่ออยู่ในตะกร้าแล้ว ---------- */
.btn.is-added {
  background: linear-gradient(#10d984, #00b467);
  border-color: #18cc87;
}

/* ---------- หัวข้อบนพื้นลายเยอะ: เพิ่มขอบขาวให้อ่านง่าย ---------- */
/* หัวข้อที่วางบนภาพพื้นหลัง: ใส่ป้ายพื้นครีมทึบให้อ่านง่าย */
.reviews-section > h2,
.faq-section > h2,
.ease-section h2,
.related > h2 {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4rem 0;
  width: fit-content; background: #fffaf0f5; border: 1rem solid #ecdcc2;
  border-radius: 10rem; padding: 2rem 12rem; box-shadow: 0 2rem 6rem #7a4a1e1a;
}
.section-title h2 {
  paint-order: stroke fill; -webkit-text-stroke: 4rem #fff;
  text-shadow: 0 2.5rem 0 #e9d3b0, 0 3rem 6rem #7a4a1e33;
}
.checkin-help {
  display: flex; width: fit-content; margin-inline: auto; align-items: center; gap: 3rem;
  background: #fffaf0f5; border: 1rem solid #ecdcc2; border-radius: 99rem; padding: 2rem 10rem;
}
.product-page > .breadcrumb {
  display: inline-flex; align-items: center; gap: 4rem;
  background: #fffdf9ee; border: 1rem solid #ead9be; border-radius: 99rem;
  padding: 3rem 12rem; margin-bottom: 8rem;
}

/* ---------- ของขวัญประจำวัน: หัวข้อไม่ทับแถบเวลา ---------- */
.gift-note b { font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---------- เช็คอิน ---------- */
.checkin-days > div.is-done b { color: #00b187; }
.checkin-days > div.is-done .icon { color: #00b187; fill: none; }
.checkin-days > div { padding: 5rem 0; justify-content: center; }
.checkin-days > div.is-today {
  position: relative; z-index: 1;
  margin: -2rem 1.5rem; padding: 7rem 0;
  background: linear-gradient(#fff6ea, #ffe9d6); border-radius: 9rem; border-right-color: transparent;
  box-shadow: 0 0 0 1.5rem #ff5a82, 0 3rem 8rem #ff386c40;
}
.checkin-days > div.is-today span { color: #e0245e; font-weight: 800; }
.checkin-days > div:has(+ .is-today) { border-right-color: transparent; }
.btn:disabled { filter: grayscale(0.4); opacity: 0.75; cursor: default; transform: none; }
.checkin-days.mini { margin: 10rem 0 12rem; }
.checkin-days.mini > div { font-size: 0.7em; }
.checkin-days.mini b { font-size: 1.1em; }

/* ---------- การ์ดวิชา: ภาพอยู่ในช่องซุ้ม หัวข้อเป็นป้ายเล็ก ---------- */
.subject-portal .portal-copy {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 5rem; padding: 6rem 22% 0; grid-template-columns: none;
}
.subject-portal .subject-image-blank {
  width: 100%; height: auto; aspect-ratio: 4 / 3; flex: none;
  border-radius: 6rem; overflow: hidden; background: #ffffffc0; box-shadow: none;
}
.subject-portal .portal-copy ul {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem 3rem;
  margin: 0; max-width: 100%;
  font-size: 6rem; line-height: 1.5;
}
.subject-portal .portal-copy li {
  background: #fff; border-radius: 99rem; padding: 0.5rem 4rem; white-space: nowrap;
  box-shadow: 0 1rem 2rem #56748d1a;
}
.subject-portal .portal-copy li:before { display: none; }

/* ---------- ข้อตัวอย่าง: นับดาว ---------- */
.difficulty-card { position: relative; }
.quiz-kicker {
  position: absolute; top: 6rem; left: 50%; transform: translateX(-50%);
  font-size: 7rem; font-weight: 700; color: #008fee; white-space: nowrap;
}
.difficulty-links button {
  background: #fff; border: 1rem solid #bad6ee; border-radius: 5rem;
  min-width: 28rem; padding: 4rem; font-size: 12rem; font-weight: 800;
  cursor: pointer; transition: transform 0.12s, background 0.15s;
}
.difficulty-links button:hover { transform: translateY(-1rem); }
.difficulty-links button.is-right { background: #00b187; border-color: #00b187; color: #fff; }
.difficulty-links button.is-wrong { background: #ffe1e8; animation: rp-shake 0.4s; }
.quiz-next {
  display: inline-flex; align-items: center; gap: 3rem; margin-top: 6rem;
  font-size: 8rem; font-weight: 800; color: #ff386c;
}
.quiz-next .icon { width: 10rem; height: 10rem; }

/* ---------- รีวิว: ป้ายตัวอย่าง ---------- */
.sample-note {
  display: inline-block; vertical-align: middle; margin-left: 6rem;
  font-size: 0.45em; font-weight: 700; color: #ff386c; text-shadow: none;
  border: 1.5px dashed #ff386c; border-radius: 6px; padding: 0.1em 0.6em; background: #fff;
}
.avatar { background: #fff4d6; }
.avatar .ph { border-radius: 50%; border: 0; }

/* ---------- ตะกร้า ---------- */
.cart-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 20rem; align-items: start; }
.cart-list { list-style: none; margin: 0; padding: 0; }
.cart-list li {
  display: grid; grid-template-columns: 64rem 1fr auto auto; gap: 12rem; align-items: center;
  padding: 12rem 0; border-bottom: 1rem solid #efe3cf;
}
.cart-list li:last-child { border-bottom: 0; }
.cart-thumb {
  display: block; width: 64rem; aspect-ratio: 3 / 2; border-radius: 8rem; overflow: hidden;
  background: repeating-linear-gradient(-45deg, #fff 0 6px, #fff4d6 6px 12px); border: 1rem solid #ead9be;
}
.cart-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-item { display: grid; gap: 2rem; min-width: 0; }
.cart-item b { font-size: 1.05em; }
.cart-item small { color: #5b6d8c; }
.cart-price { text-align: right; display: grid; }
.cart-price del { color: #9aa7b8; font-size: 0.85em; }
.cart-price b { color: #ff355f; white-space: nowrap; }
.cart-remove {
  width: 30rem; height: 30rem; border-radius: 50%; border: 1rem solid #ead9be; background: #fff;
  font-size: 1.3em; line-height: 1; cursor: pointer; color: #8a6d4a;
}
.cart-remove:hover { background: #ffe1e8; color: #ff355f; }
.cart-summary { position: sticky; top: 70rem; }
.sum-row { display: flex; justify-content: space-between; gap: 10rem; padding: 6rem 0; }
.sum-row.total { border-top: 1.5rem dashed #ead9be; margin-top: 6rem; padding-top: 12rem; font-size: 1.2em; }
.sum-row.total b { color: #ff355f; }
.discount-row b { color: #00b187; }
.use-coins {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6rem;
  background: #fff7e2; border: 1rem solid #f7d7a7; border-radius: 10rem; padding: 8rem 10rem; margin: 6rem 0;
  cursor: pointer;
}
.use-coins input { width: 16rem; height: 16rem; accent-color: #ff386c; }
.use-coins small { color: #8a6d4a; width: 100%; }
.use-coins.is-disabled { opacity: 0.55; cursor: default; }
.cart-summary .btn { width: 100%; margin-top: 10rem; }

/* ---------- ตารางเหรียญ / โค้ดชวนเพื่อน ---------- */
.coin-table { width: 100%; max-width: 520rem; border-collapse: collapse; margin-bottom: 10rem; }
.coin-table td { padding: 7rem 10rem; border-bottom: 1rem solid #efe3cf; }
.coin-table td:last-child { text-align: right; font-weight: 800; color: #f05b39; }
.ref-code {
  display: inline-flex; gap: 8rem; align-items: center; margin: 4rem 0 12rem;
  background: #fff; border: 1.5rem dashed #ff386c; border-radius: 10rem; padding: 6rem 14rem;
}
.ref-code b { letter-spacing: 0.08em; color: #ff386c; }
.contact-channels a.line-add { display: contents; }

/* ---------- แจ้งเตือน + ของตกแต่ง ---------- */
.rp-toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 100; transform: translate(-50%, 20px);
  max-width: calc(100% - 32px); padding: 10px 20px; border-radius: 99px;
  background: #073780; color: #fff; font-size: 15px; font-weight: 700;
  box-shadow: 0 6px 18px #07378040; opacity: 0; pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
}
.rp-toast.is-show { opacity: 1; transform: translate(-50%, 0); }
.rp-confetti { position: fixed; inset: 0; z-index: 99; pointer-events: none; overflow: hidden; }
.rp-confetti i {
  position: absolute; top: -16px; width: 9px; height: 13px; border-radius: 2px;
  animation: rp-fall 1.5s ease-in forwards;
}
@keyframes rp-fall { to { transform: translateY(110vh) rotate(680deg); } }
@keyframes rp-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.3); } }
@keyframes rp-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4rem); } 75% { transform: translateX(4rem); } }

/* ---------- หัวข้อบนริบบิ้น / ป้ายไม้ ---------- */
.daily-section h2 {
  paint-order: stroke fill;
  -webkit-text-stroke: 4rem var(--title-stroke, #b3264f);
  text-shadow: 0 2rem 0 var(--title-stroke, #b3264f);
  letter-spacing: 0.01em;
}
.daily-gift { --title-stroke: #c42a57; }
.daily-checkin { --title-stroke: #7a4518; }
.daily-section h2 .icon { -webkit-text-stroke: 0; }

@media (min-width: 761px) {
  /* ภาพพื้นหลังมีโบว์และปฏิทินอยู่แล้ว ไม่ต้องมีไอคอนซ้ำ */
  .daily-section h2 .icon { display: none; }
  .daily-section { display: block; }

  /* ---- การ์ดของขวัญ: อยู่ในกระดานซ้าย (x 5–268, y 42–165) ---- */
  .daily-section .daily-gift { position: absolute; left: 5rem; width: 263rem; top: 0; bottom: 0; padding: 0; }
  .daily-section .daily-gift h2 { transform: translateY(10.5rem); padding-left: 14rem; font-size: 16rem; }
  .daily-gift .gift-note {
    margin: 13rem 6rem 0; height: 16rem; padding: 0 8rem; text-align: center;
    display: flex; align-items: center; justify-content: center; gap: 4rem; font-size: 8.5rem;
  }
  .daily-gift .gift-note span { font-size: 7.5rem; }
  .daily-gift .gift-content {
    grid-template-columns: 76rem 1fr; gap: 10rem; margin: 6rem 6rem 0; align-items: center;
  }
  .daily-gift .daily-image { height: 95rem; border-radius: 5rem; }
  .daily-gift .gift-content h3 { font-size: 11rem; line-height: 1.25; margin: 0 0 4rem; }
  .daily-gift .gift-tags { margin: 3rem 0; gap: 4rem; }
  .daily-gift .gift-tags span { font-size: 7.5rem; padding: 1rem 6rem; }
  .daily-gift .gift-content p { font-size: 7.5rem; margin: 2rem 0; }
  .daily-gift .gift-content .btn { min-height: 22rem; font-size: 10rem; margin-top: 5rem; }
  .daily-gift .gift-content .btn .icon { width: 12rem; height: 12rem; }

  /* ---- การ์ดเช็คอิน: อยู่ในกระดานขวา (x 361–653, y 50–168) ---- */
  .daily-section .daily-checkin { position: absolute; left: 361rem; width: 292rem; top: 0; bottom: 0; padding: 0 2rem; }
  .daily-section .daily-checkin h2 { transform: translateY(17rem); padding-left: 10rem; justify-content: center; font-size: 16rem; }
  .daily-checkin .coin-balance { top: 58rem; right: 6rem; padding: 3rem 8rem; font-size: 8rem; }
  .daily-checkin .coin-balance .icon { width: 13rem; height: 13rem; }
  .daily-checkin .checkin-intro { height: 34rem; margin: 20rem 0 0 4rem; font-size: 8rem; gap: 5rem; max-width: 170rem; }
  .daily-checkin .checkin-intro .mascot { width: 36rem; height: 33rem; }
  .daily-checkin .checkin-days { margin: 4rem 0 5rem; padding: 4rem 2rem; }
  .daily-checkin .checkin-days > div { gap: 2rem; font-size: 6.5rem; padding: 3rem 0; }
  .daily-checkin .checkin-days > div.is-today { margin: -1rem 1rem; padding: 4rem 0; }
  .daily-checkin .checkin-days .icon { width: 13rem; height: 13rem; }
  .daily-checkin .checkin-days b { font-size: 8.5rem; }
  .daily-checkin > .btn { min-height: 22rem; font-size: 10rem; }
  .daily-checkin > .btn .icon { width: 12rem; height: 12rem; }
  .daily-checkin .checkin-help { font-size: 7rem; margin-top: 2rem; }

  /* ---- ชื่อวิชาอยู่กลางป้ายบนซุ้ม ---- */
  .subject-portal h3 {
    position: absolute; top: 15rem; left: 0; right: 0; height: 29rem; padding: 0;
    display: flex; align-items: center; justify-content: center; line-height: 1;
    font-size: 12.5rem; paint-order: stroke fill; -webkit-text-stroke: 3rem #fff;
  }
  .subject-portal .portal-copy { margin-top: 40rem; }
  /* ป้ายซุ้มไทยในภาพต่ำกว่าอันอื่น ~10px ดันภาพขึ้นให้ป้ายเสมอกัน */
  .portal-thai .portal-art img { top: -25rem; }

  /* ---- แถวอายุ: สัดส่วนจริง ระยะเท่ากัน ป้ายกว้างเท่ากัน ---- */
  .age-grid { padding-right: 30rem; }
  .age-art { width: 56rem; height: 94rem; left: 0; }
  .age-art img { height: 94rem; width: 500%; }
  .age-label {
    left: 58rem; top: 22rem; width: 60rem; min-width: 0; padding: 4rem 2rem;
    background: #fffffff0; border: 1rem solid color-mix(in srgb, var(--age), white 75%);
  }
  .age-label b { font-size: 12rem; line-height: 1.2; }
  .age-label small { font-size: 7.5rem; line-height: 1.3; }

  .age-art { clip-path: inset(0 4rem 0 1rem); }

  /* ---- การ์ดสมาชิก: รายการไม่โดนมาสคอตบัง ---- */
  .membership-card { padding-left: 100rem; }
  .membership-card > .mascot { left: -14rem; width: 104rem; }

  /* ---- แถบหัวข้อ: ค่อย ๆ จาง ไม่ตัดผ่านภาพเป็นเส้นแข็ง ---- */
  .subject-section:before, .age-section:before { display: none; }
  .subject-section > .section-title, .age-section > .section-title {
    width: fit-content; gap: 10rem; padding: 3rem 16rem 3rem 12rem; margin: 3rem 0 0 4rem;
    background: linear-gradient(#fffdf8, #fff6e6);
    border: 1.5rem solid #e9d3b0; border-radius: 14rem;
    box-shadow: inset 0 0 0 2.5rem #fffdf8, inset 0 0 0 3.2rem #f3e2c6, 0 3rem 8rem #7a4a1e24;
  }
  .subject-section > .section-title p, .age-section > .section-title p { color: #6b4a2b; }
}


/* =========================================================
   มือถือ
   ========================================================= */
@media (max-width: 760px) {
  .site-header .my-coins { display: flex; font-size: 13rem; margin-left: auto; }
  .site-header .my-coins small { display: none; }
  .site-header .my-coins .icon { width: 20rem; height: 20rem; }
  .dot-alert { top: -3rem; left: 13rem; width: 9rem; height: 9rem; }

  .subject-portal .portal-copy { padding: 4rem 20% 0; gap: 5rem; }
  .subject-portal .portal-copy ul { font-size: 9rem; }

  .quiz-kicker { font-size: 10rem; top: 8rem; }
  .difficulty-links { gap: 5rem; padding: 0 4rem; }
  .difficulty-links button { font-size: 16rem; min-width: 0; flex: 1 1 0; max-width: 36rem; min-height: 34rem; padding: 4rem 0; }
  .difficulty-card { overflow: hidden; }
  .quiz-next { font-size: 11rem; }

  /* การ์ดสมาชิก: มาสคอตอยู่ข้างหัวข้อ ไม่ทับรายการ */
  .membership-card {
    grid-template-columns: 100rem 1fr; padding: 14rem; gap: 6rem 10rem; align-items: center;
  }
  .membership-card > .mascot {
    position: relative; left: auto; bottom: auto; grid-column: 1; grid-row: 1;
    width: 100rem; height: 104rem;
  }
  .membership-copy { grid-column: 2; grid-row: 1; padding-left: 0; }
  .membership-copy ul { grid-column: 1 / -1; }
  .member-price { margin: 0; }

  .cart-layout { grid-template-columns: 1fr; }
  .cart-list li { grid-template-columns: 56rem 1fr auto; }
  .cart-thumb { width: 56rem; }
  .cart-price { grid-column: 2; text-align: left; display: flex; gap: 6rem; align-items: baseline; }
  .cart-remove { grid-row: 1 / span 2; grid-column: 3; }
  .cart-summary { position: static; }
  .rp-toast { bottom: 16px; font-size: 14px; }
}

/* ---------- hero: ยกแถบ "พิมพ์ได้ไม่จำกัด" ให้อยู่ในกระดาษ ไม่ตกลงโต๊ะ ---------- */
@media (min-width: 761px) {
  .hero-finder { top: 60rem; }
  .hero-description { margin-bottom: 4rem; }
  .hero fieldset { margin: 3rem 0; }
  .finder-submit { margin-bottom: 4rem; }
}

/* ---------- แถวอายุ (มือถือ): การ์ดสีอ่อนตามวัย ตัวเลขใหญ่ + ป้ายชั้นเรียน ---------- */
.age-1 { --age: #e8457a; }
@media (max-width: 760px) {
  .age-choice {
    background: linear-gradient(135deg, #fff 35%, color-mix(in srgb, var(--age), white 88%));
    border: 1.5rem solid color-mix(in srgb, var(--age), white 78%);
    box-shadow: 0 3rem 8rem color-mix(in srgb, var(--age), transparent 88%);
  }
  .age-art { clip-path: inset(0 8rem 0 0); left: -8rem; }
  .age-label {
    left: auto; right: 6rem; top: 50%; transform: translateY(-50%);
    width: 70rem; min-width: 0; padding: 0;
    background: none; box-shadow: none;
    display: flex; flex-direction: column; align-items: center; gap: 5rem;
  }
  .age-label b {
    font-size: 22rem; font-weight: 800; line-height: 1; letter-spacing: -0.3rem;
    white-space: nowrap; text-shadow: 0 2rem 0 #fff;
  }
  .age-label small {
    font-size: 9.5rem; font-weight: 700; line-height: 1; white-space: nowrap;
    color: #fff; background: var(--age); border-radius: 20rem; padding: 4rem 8rem;
  }
  .age-choice:last-child .age-label { right: 12rem; }
}
@media (max-width: 359px) {
  .age-label b { font-size: 18rem; }
  .age-label { width: 60rem; right: 4rem; }
}

/* ---- สินค้าจริงจากสคริปต์อัพเว็บ: ปกแนวตั้ง แกลเลอรี 4 หน้า ---- */
.sample-pages.n4 { grid-template-columns: repeat(4, 1fr); }
.sample-pages .slot.contain { background: #fff; }
.product-sku { margin-top: 8rem; font-size: 10rem; color: #9a8a74; }
@media (max-width: 760px) { .sample-pages.n4 { grid-template-columns: repeat(2, 1fr); } }

/* ---- ปกสินค้าจริง: กรอบขนาดเดิม ปกแสดงครบ พื้นหลังเป็นปกเดียวกันแบบเบลอ (ไม่มีขอบว่าง) ---- */
.product-image.has-cover { isolation: isolate; }
.product-image.has-cover::before { content: ""; position: absolute; inset: -12%; z-index: -1; background: var(--cover) center / cover; filter: blur(9rem) saturate(1.15) brightness(1.05); }
.product-image.has-cover .slot.contain { position: relative; background: none; filter: drop-shadow(0 2rem 4rem #0003); }

/* ---- คำโปรยสั้นบนการ์ด ---- */
.product-hook { margin: -2rem 0 5rem; font-size: 6.6rem; line-height: 1.45; color: #7a6450; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.9em; }
@media (max-width: 760px) { .product-hook { font-size: 10.5rem; margin: -3rem 0 7rem; } }

/* ---- เรื่องราวในเล่ม ---- */
.story-panel .story-lead { font-size: 13rem; line-height: 1.8; color: #5b4630; margin: 0 0 14rem; }
.story-panel h2 + .check-list { margin-bottom: 18rem; }
.lesson-grid { list-style: none; padding: 0; margin: 10rem 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10rem; }
.lesson-grid li { display: flex; gap: 10rem; align-items: flex-start; background: #fffaf2; border: 1rem solid #f0dfc4; border-radius: 12rem; padding: 10rem 12rem; }
.lesson-no { flex: none; width: 26rem; height: 26rem; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(#ff8aa6, #ff386c); color: #fff; font-weight: 800; font-size: 12rem; }
.lesson-grid b { display: block; font-size: 12.5rem; color: #16336e; }
.lesson-topic { display: inline-block; margin: 3rem 0 4rem; padding: 1.5rem 8rem; border-radius: 8rem; background: #e2f6ff; color: #0079c2; font-size: 9.5rem; font-weight: 700; }
.lesson-grid p { margin: 0; font-size: 10.5rem; line-height: 1.6; color: #6b5a45; }
@media (max-width: 760px) {
  .lesson-grid { grid-template-columns: 1fr; }
  .story-panel .story-lead { font-size: 15rem; }
  .lesson-grid b { font-size: 15rem; } .lesson-grid p { font-size: 13.5rem; } .lesson-topic { font-size: 12rem; }
  .lesson-no { width: 30rem; height: 30rem; font-size: 14rem; }
}

/* ---- ไฟล์ยอดนิยม: สไลด์ทีละ 8 ชิ้น ---- */
.home-products.one-row:before { display: none; }
.home-products.slide-next { animation: rp-slide-next .35s ease both; }
.home-products.slide-prev { animation: rp-slide-prev .35s ease both; }
@keyframes rp-slide-next { from { opacity: 0; transform: translateX(28rem); } }
@keyframes rp-slide-prev { from { opacity: 0; transform: translateX(-28rem); } }
.product-pager { display: flex; justify-content: center; align-items: center; gap: 5rem; margin-top: 18rem; position: relative; z-index: 2; }
.product-pager[hidden] { display: none; }
.pager-pages { display: flex; gap: 5rem; }
.product-pager button { min-width: 20rem; height: 20rem; padding: 0 6rem; border-radius: 10rem; border: 1rem solid #eed9c0; background: #fffdf8; color: #16336e; font: inherit; font-size: 9rem; font-weight: 800; cursor: pointer; box-shadow: 0 1.5rem 0 #d9b98f; }
.product-pager button.active { background: linear-gradient(#ff7b9b, #ff386c); border-color: #ff386c; color: #fff; box-shadow: 0 1.5rem 0 #c9214f; }
.product-pager .pager-arrow { font-size: 13rem; line-height: 1; }
.product-pager button:disabled { opacity: .4; cursor: default; }
@media (max-width: 760px) {
  .product-pager { margin-top: 20rem; gap: 7rem; }
  .pager-pages { gap: 7rem; }
  .product-pager button { min-width: 34rem; height: 34rem; font-size: 14rem; border-radius: 17rem; }
  .product-pager .pager-arrow { font-size: 20rem; }
}
@media (prefers-reduced-motion: reduce) { .home-products.slide-next, .home-products.slide-prev { animation: none; } }

/* ---- ท้ายเว็บ: ไลน์ + โลโก้โซเชียลจริง จัดกึ่งกลาง ---- */
.footer-social { display: flex; flex-direction: column; align-items: center; gap: 8rem; padding-right: 65rem; }
.footer-social .social-icons { display: flex; justify-content: center; gap: 8rem; margin: 0; }
.footer-social .social-icons a { width: 21rem; height: 21rem; border-radius: 50%; display: grid; place-items: center; color: #fff; box-shadow: 0 2rem 5rem #0002; transition: transform .15s; }
.footer-social .social-icons a:hover { transform: translateY(-2rem); }
.footer-social .social-icons svg { width: 11rem; height: 11rem; }
.social-icons .social-facebook svg { width: 21rem; height: 21rem; }
.footer-social .social-icons .social-facebook { background: #fff; color: #0866ff; }
.social-icons .social-youtube { background: #ff0000; }
.social-icons .social-youtube svg { width: 12rem; }
.social-icons .social-instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.social-icons .social-tiktok { background: #111; }
.social-icons .social-tiktok svg { filter: drop-shadow(-.8rem -.6rem 0 #25f4ee) drop-shadow(.8rem .6rem 0 #fe2c55); }
.footer-social em { margin: 0; text-align: center; }
@media (max-width: 760px) {
  .footer-social { padding: 0; gap: 12rem; }
  .footer-social .social-icons { gap: 14rem; }
  .footer-social .social-icons a { width: 38rem; height: 38rem; }
  .footer-social .social-icons svg { width: 19rem; height: 19rem; }
  .social-icons .social-facebook svg { width: 38rem; height: 38rem; }
  .social-icons .social-youtube svg { width: 21rem; }
}

/* ---- ปกสินค้าจริงเต็มกรอบ: กรอบรูปเป็นสัดส่วนเดียวกับปก (4:5) ปกเต็มพอดี ไม่ถูกตัด ---- */
.product-card > .product-image.has-cover { height: auto; aspect-ratio: 4 / 5; }
.product-card > .product-image.has-cover::before { display: none; }
.product-card > .product-image.has-cover .slot.contain { object-fit: cover; filter: none; }
.detail-image.has-cover { min-height: 0; aspect-ratio: 4 / 5; align-self: start; overflow: hidden; }
.detail-image.has-cover::before { display: none; }
.detail-image.has-cover .slot.contain { object-fit: cover; filter: none; }

/* ---- ของขวัญประจำวัน: ปกจริง + ปุ่มโหลดฟรี + ลิงก์ซื้อฉบับเต็ม ---- */
.daily-gift .daily-image .slot.contain, .free-feature .detail-image .slot.contain { object-fit: cover; }
.daily-gift .gift-content p small { font-size: .85em; color: #8a7560; }
.daily-gift .gift-hook { font-size: 6.4rem; line-height: 1.45; color: #7a6450; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.daily-gift .gift-full { display: inline-flex; align-items: center; gap: 2rem; margin-top: 4rem; font-size: 7rem; font-weight: 700; color: #e0245e; }
.daily-gift .gift-full .icon { width: 8rem; height: 8rem; }
.free-feature .detail-image { aspect-ratio: 4 / 5; min-height: 0; overflow: hidden; align-self: start; }
.free-actions { display: flex; flex-wrap: wrap; gap: 8rem; margin: 10rem 0 4rem; }
@media (max-width: 760px) {
  .daily-gift .gift-hook { font-size: 12rem; }
  .daily-gift .gift-full { font-size: 12.5rem; margin-top: 6rem; }
  .daily-gift .gift-full .icon { width: 13rem; height: 13rem; }
}
@media (min-width: 761px) {
  .daily-gift .gift-content p.gift-hook { font-size: 6.5rem; margin: 1rem 0 0; -webkit-line-clamp: 2; }
  .daily-gift .gift-content h3 { margin-bottom: 2rem; }
  .daily-gift .gift-tags { margin: 2rem 0; }
  .daily-gift .gift-content .btn { margin-top: 4rem; min-height: 20rem; }
  .daily-gift .gift-full { margin-top: 3rem; font-size: 6.8rem; }
}

/* ---------- สมาชิกผ่าน LINE + ไฟล์เรียนของฉัน ---------- */
.btn.line-login { background: linear-gradient(180deg, #13d36b, #00b458); border-color: #06c755; font-size: 14rem; min-height: 36rem; padding: 6rem 18rem; }
.join-panel { display: grid; grid-template-columns: 1fr 170rem; gap: 20rem; align-items: center; }
.join-panel h2 { font-size: 24rem; margin: 8rem 0 6rem; }
.join-panel > p, .join-copy > p { margin: 0 0 10rem; }
.join-panel .check-list { margin: 0 0 16rem; }
.join-panel .mascot { width: 170rem; }
.join-panel .connection-note { margin-top: 10rem; }
.member-area { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16rem; }
.member-area > *, .member-area .account-preview > * { min-width: 0; }
.member-area[hidden], [data-guest][hidden] { display: none; }
.member-card { display: flex; align-items: center; gap: 16rem; }
.member-card img { width: 64rem; height: 64rem; border-radius: 50%; object-fit: cover; border: 3rem solid #fff; box-shadow: 0 0 0 2rem #06c755; flex: none; }
.member-card > div { flex: 1; min-width: 0; }
.member-card small { color: #8a7a66; }
.member-card h2 { font-size: 20rem; margin: 0 0 4rem; overflow-wrap: anywhere; }
.member-card p { margin: 0; }
.member-card b { color: var(--pink); letter-spacing: .04em; }
.member-card .member-hint { font-size: 11rem; color: #8a7a66; margin-top: 3rem; }
.copy-code { border: 1rem solid #bddcf3; background: #fff; color: var(--blue); border-radius: 6rem; font: inherit; font-size: 10rem; padding: 1rem 7rem; cursor: pointer; }
.my-files h2 { display: flex; align-items: center; gap: 7rem; font-size: 19rem; }
.my-files h2 .icon { color: var(--green); }
.my-file { display: flex; gap: 14rem; align-items: flex-start; padding: 12rem 0; border-top: 1rem dashed #ecd9bb; }
.my-file:first-child { border-top: 0; }
.my-file img { width: 64rem; aspect-ratio: 4/5; object-fit: cover; border-radius: 8rem; box-shadow: 0 2rem 6rem #7a4a1e22; flex: none; }
.my-file h3 { font-size: 15rem; margin: 0 0 8rem; }
.my-file > div { display: flex; flex-wrap: wrap; gap: 6rem; align-items: center; flex: 1; min-width: 0; }
.my-file h3 { flex-basis: 100%; }
.my-file .btn { font-size: 11rem; min-height: 26rem; background: linear-gradient(180deg, #25c79e, #00a57d); border-color: #00b187; }
.my-file .btn small { opacity: .85; font-weight: 400; }
.empty-files { text-align: center; color: #8a7a66; line-height: 1.7; }
.empty-files .btn { margin-top: 10rem; }
.member-area .account-preview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16rem; }
.login-link.is-member { display: inline-flex; align-items: center; gap: 5rem; }
.login-link.is-member img { width: 20rem; height: 20rem; border-radius: 50%; object-fit: cover; }
@media (max-width: 760px) {
  .join-panel { grid-template-columns: 1fr; }
  .join-panel .mascot { display: none; }
  .join-panel h2 { font-size: 24rem; }
  .btn.line-login { width: 100%; font-size: 16rem; min-height: 48rem; }
  .member-card { flex-wrap: wrap; }
  .member-card h2 { font-size: 20rem; }
  .member-card .member-hint, .copy-code { font-size: 12rem; }
  .member-area .account-preview { grid-template-columns: minmax(0, 1fr); }
  .my-file .btn { font-size: 13rem; min-height: 40rem; width: 100%; white-space: normal; }
  .my-file h3 { font-size: 16rem; }
  .login-link.is-member span { display: none; }
  .login-link.is-member img { width: 28rem; height: 28rem; }
}
/* รูปรีวิวแยกไฟล์ (images/reviews/N.jpg) ไม่ใช่สไปรต์ → แสดงเต็มวง */
.avatar img.slot { position: static; width: 100%; height: 100%; left: auto; object-fit: cover; }

/* ---------- ชำระเงิน (QR พร้อมเพย์ + แนบสลิป) ---------- */
.pay-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 20rem; align-items: start; }
.pay-qr { text-align: center; }
.qr-box { width: 230rem; max-width: 100%; margin: 12rem auto 6rem; padding: 10rem; background: #fff; border-radius: 16rem; border: 3rem solid #113566; }
.qr-box img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.pay-amount { font-size: 16rem; margin: 8rem 0 2rem; }
.pay-amount b { font-size: 34rem; color: var(--pink); }
.pay-to { color: #6b5a44; margin: 0 0 12rem; }
.pay-state { padding: 20rem 6rem; }
.pay-state > .icon { width: 56rem; height: 56rem; color: var(--green); }
.pay-state h2 { margin: 8rem 0; }
.pay-done > .icon { background: #e4f8f0; border-radius: 50%; padding: 10rem; }
.pay-side h2 small { font-size: 12rem; color: #8a7a66; font-weight: 400; }
.pay-items { list-style: none; margin: 0 0 8rem; padding: 0; }
.pay-items li { display: flex; justify-content: space-between; gap: 10rem; padding: 8rem 0; border-bottom: 1rem dashed #ecd9bb; }
.pay-steps { margin: 16rem 0 12rem; padding-left: 20rem; line-height: 1.8; color: #4b3a28; }
.slip-btn { width: 100%; cursor: pointer; }
.slip-btn.is-busy { opacity: .6; pointer-events: none; }
.slip-msg { margin: 10rem 0 0; padding: 10rem 12rem; border-radius: 10rem; background: #f3f7fb; color: #33506e; }
.slip-msg.is-ok { background: #e7f8f1; color: #0a7a55; }
.slip-msg.is-bad { background: #fff0f3; color: #c0224c; }
.cancel-order { display: block; margin: 14rem auto 0; background: none; border: 0; color: #8a7a66; font: inherit; font-size: 12rem; text-decoration: underline; cursor: pointer; }
.my-orders h2 { display: flex; align-items: center; gap: 7rem; font-size: 19rem; }
.my-orders h2 .icon { color: #ff9823; }
.my-order { display: flex; justify-content: space-between; align-items: center; gap: 12rem; padding: 10rem 12rem; margin-top: 8rem; border-radius: 12rem; background: #fff7ea; border: 1rem solid #f5dcb3; color: inherit; text-decoration: none; }
.my-order small { display: block; color: #8a7a66; }
.my-order > span { min-width: 0; overflow-wrap: anywhere; }
.my-order em { font-style: normal; font-weight: 700; color: var(--pink); white-space: nowrap; }
@media (max-width: 760px) {
  .pay-layout { grid-template-columns: 1fr; gap: 16rem; }
  .qr-box { width: 260rem; }
  .pay-amount b { font-size: 34rem; }
  .pay-steps { font-size: 14rem; }
  .slip-btn { min-height: 52rem; font-size: 16rem; }
  .cancel-order { font-size: 14rem; }
  .my-order { flex-direction: column; align-items: flex-start; }
}
.bank-card { display: grid; justify-items: center; gap: 4rem; margin: 10rem auto 12rem; padding: 18rem 14rem; max-width: 320rem; border-radius: 16rem; background: linear-gradient(160deg, #00a950, #007a3d); color: #fff; box-shadow: 0 6rem 16rem #00783c33; }
.bank-logo { width: 38rem; height: 38rem; border-radius: 50%; background: #fff; color: #00a950; display: grid; place-items: center; font-weight: 800; font-size: 20rem; }
.bank-card small { opacity: .9; }
.bank-acc { font-size: 28rem; letter-spacing: .05em; }
.bank-card > span:not(.bank-logo) { font-size: 13rem; opacity: .95; text-align: center; }
.bank-card .btn { margin-top: 8rem; background: #fff; color: #007a3d; border-color: #fff; }
.copy-amt { margin-top: 2rem; }
@media (max-width: 760px) { .bank-acc { font-size: 30rem; } .bank-card > span:not(.bank-logo) { font-size: 14rem; } .bank-card .btn, .copy-amt { font-size: 15rem; min-height: 44rem; } }

/* ---------- ตั้งค่าจากหลังบ้าน: แถบประกาศ + ซ่อนบางส่วน ---------- */
.announce-bar { display: block; background: linear-gradient(90deg, #ff386c, #ff7a45); color: #fff; text-align: center; font-weight: 700; font-size: 12rem; padding: 6rem 14rem; text-decoration: none; position: relative; z-index: 60; }
a.announce-bar[href]:hover { filter: brightness(1.05); }
.daily-section.single, .membership-referral.single { grid-template-columns: 1fr; }
@media (max-width: 760px) { .announce-bar { font-size: 13rem; } }
.announce-bar { min-height: 28rem; box-sizing: border-box; line-height: 16rem; }
.home .announce-bar + .site-header { top: 28rem; }

/* ---------- บังคับแนบสลิป: แถบแจ้ง ตรวจอัตโนมัติทันที + เวลาที่เหลือ ---------- */
.slip-rule { display: grid; gap: 3rem; margin: 4rem 0 12rem; padding: 10rem 12rem; border-radius: 12rem; background: #e7f8f1; border: 1rem solid #b5e8d3; color: #0a6b4b; }
.slip-rule > b { display: flex; align-items: center; gap: 5rem; font-size: 15rem; }
.slip-rule .icon { width: 18rem; height: 18rem; }
.slip-rule span { font-size: 12rem; color: #33584a; }
.slip-rule [data-pay-left] { font-variant-numeric: tabular-nums; color: var(--pink); }
@media (max-width: 760px) { .slip-rule > b { font-size: 16rem; } .slip-rule span { font-size: 13rem; } }