/* ============================================
   สไตล์หลัก Edu Comic
   ใช้ TH Sarabun New และ fallback ภาษาไทย
   ============================================ */
:root {
  --edu-primary: #78AEEA;
  --edu-secondary: #EAF5FF;
  --edu-dark: #23415F;
  --edu-soft: #F5FBFF;
  --edu-border: #D8EAF7;
}

html, body {
  min-height: 100%;
}

body {
  font-family: "TH Sarabun New", "TH SarabunPSK", Tahoma, sans-serif;
  font-size: 1.35rem;
  line-height: 1.45;
  color: var(--edu-dark);
  background: var(--edu-soft);
}

h1,h2,h3,h4,h5,h6,.navbar-brand,.btn,.form-label,.badge,.table {
  font-family: "TH Sarabun New", "TH SarabunPSK", Tahoma, sans-serif;
}

.navbar-brand strong { font-size: 1.45rem; }
.navbar-brand small { font-size: .9rem; line-height: 1; }
.brand-logo { width: 46px; height: 46px; object-fit: contain; }

.hero {
  background: linear-gradient(135deg, #ffffff 0%, #EAF5FF 100%);
  border-bottom: 1px solid var(--edu-border);
  padding: 5rem 0;
}
.hero h1 { font-size: clamp(2.5rem, 6vw, 4.8rem); font-weight: 700; }
.hero-visual {
  min-height: 360px;
  border-radius: 2rem;
  background: radial-gradient(circle at 30% 30%, #fff 0 10%, transparent 11%), linear-gradient(145deg, #9ACAF2, #5D96D6);
  position: relative;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(120,174,234,.22);
}
.hero-visual::after {
  content: "DNA • Gene • Chromosome";
  position: absolute;
  inset: auto 1.5rem 1.5rem 1.5rem;
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
}

.section-title { font-weight: 700; font-size: 2.4rem; }
.card-soft, .lesson-card, .stat-card, .comic-panel {
  border: 1px solid var(--edu-border);
  border-radius: 1.25rem;
  background: #fff;
  box-shadow: 0 8px 30px rgba(52,95,128,.06);
}
.lesson-card { transition: transform .2s ease, box-shadow .2s ease; height: 100%; }
.lesson-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(52,95,128,.11); }
.lesson-number {
  width: 52px; height: 52px; border-radius: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; background: var(--edu-primary); font-weight: 700;
}
.btn { border-radius: .85rem; padding: .55rem 1rem; font-size: 1.15rem; }
.btn-primary { background: var(--edu-primary); border-color: var(--edu-primary); }
.form-control,.form-select { border-radius: .85rem; font-size: 1.2rem; padding: .65rem .9rem; }
.form-control:focus,.form-select:focus { border-color: var(--edu-primary); box-shadow: 0 0 0 .2rem rgba(120,174,234,.16); }

.progress { height: 1rem; border-radius: 99px; background: #E1F0FA; }
.progress-bar { background: var(--edu-primary); }

.comic-panel { padding: 1.2rem; margin-bottom: 1.25rem; }
.comic-panel img { width: 100%; max-height: 680px; object-fit: contain; border-radius: 1rem; background: #F1F8FD; }
.dialogue { background: #EEF8FF; border-left: 5px solid var(--edu-primary); border-radius: .75rem; padding: 1rem 1.2rem; }
.key-point { background: #fff8dc; border: 1px solid #f2dc8c; border-radius: 1rem; padding: 1rem 1.2rem; }

.status-step { display:flex; gap:.75rem; align-items:flex-start; padding:.8rem 0; border-bottom:1px solid var(--edu-border); }
.status-step:last-child { border-bottom:0; }
.status-icon { width:36px; height:36px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:#EAF5FF; color:var(--edu-primary); flex:0 0 auto; }
.status-icon.done { background:#e7f7ef; color:#16824a; }

.admin-shell { min-height: 100vh; }
.admin-sidebar { background:#23415F; color:#fff; min-height:100vh; }
.admin-sidebar a { color:#D6EAF8; text-decoration:none; display:block; padding:.7rem .9rem; border-radius:.75rem; }
.admin-sidebar a:hover,.admin-sidebar a.active { background:#4F7FA8; color:#fff; }

.table { font-size: 1.05rem; }
.table > :not(caption) > * > * { vertical-align: middle; }

@media (max-width: 767.98px) {
  body { font-size: 1.2rem; }
  .hero { padding: 3rem 0; }
  .hero-visual { min-height: 250px; margin-top: 1.5rem; }
  .section-title { font-size: 2rem; }
  .admin-sidebar { min-height:auto; }
}

/* ============================================
   Hero หน้าแรกแบบ Edu Comic
   ตกแต่งด้วยภาพ DNA / โครโมโซม / หนังสือการ์ตูน
   ============================================ */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 10% 20%, rgba(154, 202, 242, .20), transparent 26%),
    radial-gradient(circle at 90% 15%, rgba(191, 227, 248, .24), transparent 24%),
    linear-gradient(135deg, #FFFFFF 0%, #F4FAFF 55%, #EAF5FF 100%);
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}

.hero::before {
  width: 240px;
  height: 240px;
  left: -120px;
  bottom: -100px;
  background: rgba(120, 174, 234, .09);
}

.hero::after {
  width: 160px;
  height: 160px;
  right: -60px;
  top: 40px;
  border: 26px solid rgba(191, 227, 248, .22);
}

.hero .container { position: relative; z-index: 1; }

.hero .badge {
  background: rgba(255,255,255,.82) !important;
  border-color: rgba(120,174,234,.18) !important;
  color: #4778A4;
  backdrop-filter: blur(8px);
}

.hero h1 {
  letter-spacing: -.02em;
  line-height: 1.05;
}

.hero .lead {
  max-width: 660px;
  color: #567087;
}

.edu-hero-art {
  min-height: 465px;
  padding: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  overflow: visible;
  background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(234,245,255,.95));
  border: 1px solid rgba(120,174,234,.16);
  box-shadow: 0 28px 70px rgba(120,174,234,.20);
}

.edu-hero-art::before {
  content: "";
  position: absolute;
  inset: 12% 12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(154,202,242,.28), rgba(109,121,242,0) 70%);
  z-index: -1;
  filter: blur(12px);
}

.hero-main-image {
  display: block;
  width: min(100%, 640px);
  height: auto;
  max-height: 445px;
  object-fit: contain;
  position: relative;
  z-index: 2;
  animation: eduHeroFloat 5s ease-in-out infinite;
}

.hero-visual::after { content: none; }

.hero-orbit {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem .8rem;
  border-radius: 999px;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(76,91,212,.13);
  color: #477FAE;
  font-weight: 700;
  font-size: 1.05rem;
  box-shadow: 0 12px 34px rgba(70, 120, 160, .12);
  backdrop-filter: blur(10px);
}

.hero-orbit i {
  width: 31px;
  height: 31px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #EAF5FF;
  color: var(--edu-primary);
}

.hero-orbit-dna { top: 12%; left: -3%; animation: eduBadgeFloat 4.2s ease-in-out infinite; }
.hero-orbit-gene { top: 19%; right: -2%; animation: eduBadgeFloat 4.8s ease-in-out .6s infinite; }
.hero-orbit-comic { bottom: 16%; right: -4%; animation: eduBadgeFloat 4.5s ease-in-out 1.1s infinite; }

.hero-mini-card {
  position: absolute;
  z-index: 5;
  left: 6%;
  bottom: 7%;
  display: flex;
  align-items: center;
  gap: .8rem;
  max-width: 270px;
  padding: .8rem .95rem;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(120,174,234,.16);
  border-radius: 1.1rem;
  box-shadow: 0 16px 38px rgba(70, 120, 160, .13);
}

.hero-mini-card strong,
.hero-mini-card small { display: block; line-height: 1.2; }
.hero-mini-card strong { font-size: 1.05rem; }
.hero-mini-card small { color: #6E8497; font-size: .9rem; margin-top: .18rem; }

.hero-mini-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: linear-gradient(145deg, #A8D5F5, #78AEEA);
  color: #fff;
  font-size: 1.15rem;
}

@keyframes eduHeroFloat {
  0%, 100% { transform: translateY(0) rotate(-.5deg); }
  50% { transform: translateY(-10px) rotate(.6deg); }
}

@keyframes eduBadgeFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

@media (max-width: 991.98px) {
  .edu-hero-art {
    min-height: 390px;
    margin-top: 1.5rem;
  }
  .hero-orbit-dna { left: 2%; }
  .hero-orbit-gene { right: 2%; }
  .hero-orbit-comic { right: 2%; }
}

@media (max-width: 575.98px) {
  .edu-hero-art {
    min-height: 315px;
    padding: .7rem;
    border-radius: 1.5rem;
  }
  .hero-main-image { max-height: 300px; }
  .hero-orbit { font-size: .9rem; padding: .42rem .6rem; }
  .hero-orbit i { width: 26px; height: 26px; }
  .hero-orbit-dna { top: 6%; left: 1%; }
  .hero-orbit-gene { top: 8%; right: 1%; }
  .hero-orbit-comic { bottom: 5%; right: 1%; }
  .hero-mini-card {
    left: 2%;
    bottom: 6%;
    max-width: 205px;
    padding: .55rem .65rem;
  }
  .hero-mini-card strong { font-size: .9rem; }
  .hero-mini-card small { font-size: .76rem; }
  .hero-mini-icon { width: 34px; height: 34px; flex-basis: 34px; border-radius: 10px; }
}

/* ============================================
   ภาพตกแต่งเพิ่มเติมหน้าแรก
   ใช้ SVG โปร่งใสจาก assets/images/home/decor/
   ============================================ */
.hero-copy-column {
  position: relative;
  z-index: 3;
}

.hero-copy-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

.hero-copy-icon {
  position: absolute;
  width: 74px;
  height: 74px;
  object-fit: contain;
  border-radius: 22px;
  box-shadow: 0 16px 36px rgba(80, 132, 176, .12);
  opacity: .92;
}

.hero-copy-icon-dna {
  left: -86px;
  top: -28px;
  transform: rotate(-10deg);
  animation: eduDecorDriftA 6s ease-in-out infinite;
}

.hero-copy-icon-pea {
  right: 6%;
  bottom: -62px;
  width: 66px;
  height: 66px;
  transform: rotate(8deg);
  animation: eduDecorDriftB 7s ease-in-out infinite;
}

.hero-topic-row {
  margin-top: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
}

.hero-topic-row span {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  padding: .45rem .72rem;
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(120,174,234,.16);
  color: #54728A;
  font-size: 1rem;
  box-shadow: 0 8px 24px rgba(70, 120, 160, .07);
}

.hero-topic-row i { color: var(--edu-primary); }

.hero-page-deco {
  position: absolute;
  pointer-events: none;
  user-select: none;
  opacity: .42;
  filter: saturate(.9);
  z-index: 0;
}

.hero-page-deco-cell {
  width: 112px;
  height: 112px;
  left: 1.5%;
  top: 12%;
  transform: rotate(-12deg);
  animation: eduPageFloat 8s ease-in-out infinite;
}

.hero-page-deco-chromosome {
  width: 96px;
  height: 96px;
  right: 1.5%;
  bottom: 8%;
  transform: rotate(14deg);
  animation: eduPageFloat 7s ease-in-out 1s infinite reverse;
}

.hero-art-deco {
  position: absolute;
  z-index: 6;
  width: 72px;
  height: 72px;
  object-fit: contain;
  border-radius: 22px;
  box-shadow: 0 14px 34px rgba(70, 120, 160, .12);
  pointer-events: none;
}

.hero-art-deco-microscope {
  top: -34px;
  right: 10%;
  transform: rotate(8deg);
  animation: eduDecorDriftA 5.4s ease-in-out .3s infinite;
}

.hero-art-deco-pea {
  left: -34px;
  bottom: 24%;
  transform: rotate(-7deg);
  animation: eduDecorDriftB 6.4s ease-in-out .8s infinite;
}

.hero-art-deco-dna {
  right: -30px;
  top: 42%;
  width: 64px;
  height: 64px;
  transform: rotate(10deg);
  animation: eduDecorDriftA 6.2s ease-in-out 1.2s infinite;
}

/* ทำป้าย DNA / Gene / Comic ให้ชัดขึ้น */
.edu-hero-art .hero-orbit {
  border-width: 1px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 12px 32px rgba(70, 120, 160, .14);
}

.edu-hero-art .hero-orbit-dna { top: 9%; left: 3%; }
.edu-hero-art .hero-orbit-gene { top: 12%; right: 3%; }
.edu-hero-art .hero-orbit-comic { bottom: 12%; right: 3%; }

@keyframes eduDecorDriftA {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-10px) rotate(5deg); }
}

@keyframes eduDecorDriftB {
  0%, 100% { transform: translateY(0) rotate(5deg); }
  50% { transform: translateY(9px) rotate(-3deg); }
}

@keyframes eduPageFloat {
  0%, 100% { transform: translateY(0) rotate(-10deg); }
  50% { transform: translateY(-13px) rotate(4deg); }
}

@media (max-width: 1199.98px) {
  .hero-copy-icon-dna { left: -42px; top: -20px; width: 62px; height: 62px; }
  .hero-copy-icon-pea { right: 2%; bottom: -54px; width: 58px; height: 58px; }
  .hero-art-deco { width: 62px; height: 62px; }
}

@media (max-width: 991.98px) {
  .hero-copy-decor,
  .hero-page-deco { display: none; }

  .hero-art-deco-microscope { top: -22px; right: 8%; }
  .hero-art-deco-pea { left: -18px; bottom: 22%; }
  .hero-art-deco-dna { right: -16px; top: 45%; }
}

@media (max-width: 575.98px) {
  .hero-topic-row { gap: .45rem; margin-top: 1rem; }
  .hero-topic-row span { font-size: .88rem; padding: .36rem .58rem; }
  .hero-art-deco { width: 48px; height: 48px; border-radius: 16px; }
  .hero-art-deco-microscope { top: -14px; right: 7%; }
  .hero-art-deco-pea { left: -8px; bottom: 19%; }
  .hero-art-deco-dna { right: -8px; top: 49%; }
}


/* ============================================
   Pastel Blue Theme Override
   ปรับโทนทั้งระบบให้เป็นสีฟ้าพาสเทล
   ============================================ */
:root {
  --edu-primary: #78AEEA;
  --edu-primary-strong: #5D96D6;
  --edu-secondary: #EAF5FF;
  --edu-accent: #BFE3F8;
  --edu-dark: #23415F;
  --edu-soft: #F5FBFF;
  --edu-border: #D8EAF7;
}

body { background: #F5FBFF; color: #23415F; }
.navbar { background: rgba(255,255,255,.94) !important; border-bottom-color: #D8EAF7 !important; }
.text-primary { color: #5D96D6 !important; }
.btn-primary { background: #78AEEA; border-color: #78AEEA; color: #fff; }
.btn-primary:hover, .btn-primary:focus { background: #5D96D6; border-color: #5D96D6; }
.btn-outline-primary { color: #5D96D6; border-color: #9CCBF0; }
.btn-outline-primary:hover { background: #EAF5FF; color: #477FAE; border-color: #78AEEA; }
.btn-outline-secondary { color: #567087; border-color: #BFD9EB; }
.btn-outline-secondary:hover { background: #EAF5FF; color: #477FAE; border-color: #9CCBF0; }
.bg-light { background-color: #F0F8FF !important; }
.badge.text-bg-light { background: #F7FCFF !important; color: #4778A4 !important; }
.card-soft, .lesson-card, .stat-card, .comic-panel { border-color: #D8EAF7; box-shadow: 0 10px 30px rgba(69,126,166,.08); }
.lesson-card:hover { box-shadow: 0 18px 42px rgba(69,126,166,.14); }
.lesson-number { background: linear-gradient(145deg,#9CCBF0,#6EA8E8); }
.form-control:focus,.form-select:focus { border-color: #78AEEA; box-shadow: 0 0 0 .2rem rgba(120,174,234,.18); }
.progress { background: #E3F1FB; }
.progress-bar { background: linear-gradient(90deg,#9CCBF0,#6EA8E8); }
.dialogue { background: #F0F8FF; border-left-color: #78AEEA; }
.status-icon { background:#EAF5FF; color:#5D96D6; }
.admin-sidebar { background: linear-gradient(180deg,#4F7FA8 0%,#3D6D96 100%); }
.admin-sidebar a { color:#EAF5FF; }
.admin-sidebar a:hover,.admin-sidebar a.active { background:rgba(255,255,255,.14); color:#fff; }
.hero-topic-row span, .hero-orbit, .hero-mini-card { border-color: #CDE5F5; }
.hero-orbit i { background:#EAF5FF; color:#5D96D6; }
.hero-mini-icon { background:linear-gradient(145deg,#A8D5F5,#6EA8E8); }

/* ============================================
   Large Typography Override
   เพิ่มขนาดตัวอักษรให้อ่านง่ายขึ้นทั้งระบบ
   ============================================ */
body {
  font-size: 1.55rem;
  line-height: 1.55;
}

.navbar-nav .nav-link {
  font-size: 1.22rem;
  font-weight: 600;
}

.navbar-brand strong { font-size: 1.65rem; }
.navbar-brand small { font-size: 1.05rem; }

.hero h1 {
  font-size: clamp(3rem, 6vw, 5.2rem);
  line-height: 1.08;
}

.hero .lead {
  font-size: 1.45rem;
  line-height: 1.65;
}

.hero .badge {
  font-size: 1.1rem;
  padding: .55rem .8rem;
}

.section-title { font-size: 2.75rem; }

h2 { font-size: 2.45rem; }
h3 { font-size: 2.05rem; }
h4 { font-size: 1.75rem; }
h5 { font-size: 1.55rem; }
h6 { font-size: 1.4rem; }

p,
.card-text,
.list-group-item,
.accordion-body,
.alert,
.modal-body {
  font-size: 1.35rem;
}

.btn {
  font-size: 1.3rem;
  padding: .68rem 1.15rem;
}

.form-label {
  font-size: 1.3rem;
  font-weight: 600;
}

.form-control,
.form-select,
.input-group-text {
  font-size: 1.3rem;
}

.form-text,
small,
.small {
  font-size: 1.05rem;
}

.badge { font-size: 1rem; }

.table {
  font-size: 1.2rem;
}

.admin-sidebar a {
  font-size: 1.22rem;
}

.hero-orbit { font-size: 1.18rem; }
.hero-mini-card strong { font-size: 1.2rem; }
.hero-mini-card small { font-size: 1rem; }
.hero-topic-row span { font-size: 1.12rem; }

.dialogue,
.key-point,
.comic-panel {
  font-size: 1.35rem;
}

@media (max-width: 767.98px) {
  body { font-size: 1.35rem; }
  .navbar-nav .nav-link { font-size: 1.15rem; }
  .hero h1 { font-size: clamp(2.55rem, 10vw, 3.7rem); }
  .hero .lead { font-size: 1.28rem; }
  .section-title { font-size: 2.25rem; }
  p, .card-text, .list-group-item, .accordion-body, .alert, .modal-body { font-size: 1.22rem; }
  .btn { font-size: 1.2rem; }
  .form-label, .form-control, .form-select, .input-group-text { font-size: 1.2rem; }
  .table { font-size: 1.08rem; }
}

/* ============================================
   Pastel Gradient Play Theme
   เพิ่มลูกเล่นไล่สีฟ้า-ฟ้ามิ้นต์-ลาเวนเดอร์อ่อน
   โดยยังคงความอ่านง่ายและความเป็น Edu Comic
   ============================================ */
:root {
  --edu-gradient-1: #9ED8FF;
  --edu-gradient-2: #B7E9F7;
  --edu-gradient-3: #C9D8FF;
  --edu-gradient-4: #E3F3FF;
  --edu-gradient-5: #F7FBFF;
}

/* พื้นหลังทั้งเว็บไซต์แบบไล่สีอ่อนหลายชั้น */
body {
  background:
    radial-gradient(circle at 8% 12%, rgba(158, 216, 255, .25), transparent 28%),
    radial-gradient(circle at 92% 18%, rgba(201, 216, 255, .25), transparent 26%),
    radial-gradient(circle at 50% 92%, rgba(183, 233, 247, .22), transparent 34%),
    linear-gradient(145deg, #F9FCFF 0%, #F1F9FF 45%, #F7F5FF 100%);
  background-attachment: fixed;
}

/* Navbar แบบ glass + gradient line */
.navbar {
  background: linear-gradient(90deg, rgba(255,255,255,.96), rgba(242,250,255,.95), rgba(247,245,255,.94)) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 28px rgba(83, 137, 181, .08);
  position: relative;
}

.navbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: linear-gradient(90deg, #9ED8FF, #B7E9F7, #C9D8FF, #9ED8FF);
  background-size: 220% 100%;
  animation: eduGradientSlide 8s linear infinite;
}

.navbar .nav-link {
  border-radius: .8rem;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}

.navbar .nav-link:hover {
  color: #3D78AE !important;
  background: linear-gradient(135deg, rgba(158,216,255,.24), rgba(201,216,255,.22));
  transform: translateY(-1px);
}

/* Hero: ไล่สีแบบมีมิติและเคลื่อนไหวเบา ๆ */
.hero {
  background:
    radial-gradient(circle at 15% 22%, rgba(158,216,255,.38), transparent 29%),
    radial-gradient(circle at 82% 18%, rgba(201,216,255,.34), transparent 30%),
    radial-gradient(circle at 68% 78%, rgba(183,233,247,.30), transparent 32%),
    linear-gradient(125deg, #FFFFFF 0%, #EEF9FF 34%, #F3F5FF 68%, #E9F7FF 100%);
  background-size: 130% 130%;
  animation: eduHeroGradient 14s ease-in-out infinite alternate;
}

.hero::before {
  background: linear-gradient(145deg, rgba(158,216,255,.22), rgba(201,216,255,.12));
}

.hero::after {
  border-color: rgba(143, 196, 238, .20);
  background: linear-gradient(145deg, rgba(255,255,255,.16), rgba(183,233,247,.10));
}

/* หัวข้อมี gradient text เล็กน้อย เฉพาะคำที่ใช้ text-primary */
.hero .text-primary,
.section-title .text-primary {
  background: linear-gradient(90deg, #4F91D1, #6BBBCF, #788BD7);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

/* พื้นหลังภาพ Hero */
.edu-hero-art {
  background:
    radial-gradient(circle at 25% 22%, rgba(255,255,255,.96) 0 12%, transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.97) 0%, rgba(230,246,255,.94) 48%, rgba(238,238,255,.92) 100%);
  border-color: rgba(137, 196, 238, .25);
  box-shadow:
    0 30px 75px rgba(83, 137, 181, .18),
    inset 0 1px 0 rgba(255,255,255,.95);
}

.edu-hero-art::before {
  background: radial-gradient(circle, rgba(158,216,255,.38), rgba(201,216,255,.15) 46%, rgba(255,255,255,0) 72%);
}

/* ป้ายเล็กรอบ Hero */
.hero-orbit,
.hero-mini-card,
.hero-topic-row span {
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(239,249,255,.94), rgba(247,245,255,.90));
  border-color: rgba(132, 189, 232, .23);
  box-shadow: 0 12px 32px rgba(82, 132, 176, .11);
}

.hero-orbit i {
  background: linear-gradient(145deg, #E9F7FF, #EDEEFF);
}

.hero-mini-icon {
  background: linear-gradient(145deg, #8FD2F5 0%, #7FAEEA 50%, #8F9DE8 100%);
  box-shadow: 0 8px 20px rgba(100, 157, 207, .22);
}

/* ปุ่มหลักแบบไล่สี */
.btn-primary {
  background: linear-gradient(110deg, #6EAFE8 0%, #67BED2 48%, #8299E5 100%);
  background-size: 180% 100%;
  border: 0;
  color: #fff;
  box-shadow: 0 9px 24px rgba(91, 150, 202, .22);
  transition: transform .2s ease, box-shadow .2s ease, background-position .35s ease;
}

.btn-primary:hover,
.btn-primary:focus {
  background: linear-gradient(110deg, #5B9FD9 0%, #55AEC4 48%, #7187D8 100%);
  background-size: 180% 100%;
  background-position: 100% 0;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 13px 30px rgba(91, 150, 202, .29);
}

.btn-outline-primary {
  background: linear-gradient(#fff,#fff) padding-box,
              linear-gradient(110deg,#8BCDF2,#82C7D8,#9EADEB) border-box;
  border: 2px solid transparent;
  color: #4F85B4;
}

.btn-outline-primary:hover {
  background: linear-gradient(110deg, #E7F6FF, #EEF6FF, #F0F0FF) padding-box,
              linear-gradient(110deg,#8BCDF2,#82C7D8,#9EADEB) border-box;
  color: #3E719E;
  transform: translateY(-1px);
}

/* Card มีแถบ gradient บาง ๆ ด้านบน */
.card-soft,
.lesson-card,
.stat-card,
.comic-panel {
  position: relative;
  overflow: hidden;
  background: linear-gradient(155deg, rgba(255,255,255,.98), rgba(248,252,255,.96));
  border-color: rgba(149, 202, 238, .34);
  box-shadow: 0 12px 35px rgba(74, 129, 174, .09);
}

.card-soft::before,
.lesson-card::before,
.stat-card::before,
.comic-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #9ED8FF, #B7E9F7, #C9D8FF, #9ED8FF);
  background-size: 220% 100%;
  animation: eduGradientSlide 10s linear infinite;
  opacity: .95;
}

.lesson-card:hover {
  transform: translateY(-6px);
  border-color: rgba(117, 181, 226, .48);
  box-shadow: 0 20px 45px rgba(70, 128, 174, .16);
}

/* หมายเลขบทเรียน */
.lesson-number {
  background: linear-gradient(145deg, #87CBF1 0%, #6DB8D0 46%, #8099E0 100%);
  box-shadow: 0 8px 22px rgba(85, 144, 194, .20);
}

/* Progress Bar แบบไล่สี */
.progress {
  background: linear-gradient(90deg, #EAF6FC, #EEF2FF);
  box-shadow: inset 0 1px 3px rgba(79, 126, 165, .08);
}

.progress-bar {
  background: linear-gradient(90deg, #78BDEB, #6AC7D0, #879AE5, #78BDEB);
  background-size: 220% 100%;
  animation: eduGradientSlide 6s linear infinite;
}

/* กล่องบทสนทนา */
.dialogue {
  background: linear-gradient(135deg, #F0F9FF, #F4F6FF);
  border-left: 5px solid transparent;
  border-image: linear-gradient(#77BDEB, #899BE5) 1;
}

.key-point {
  background: linear-gradient(135deg, #FFF9E8, #F4FAFF);
  border-color: #E8DFAD;
}

/* ฟอร์ม */
.form-control,
.form-select {
  background-color: rgba(255,255,255,.90);
  border-color: #CFE5F4;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.form-control:focus,
.form-select:focus {
  background: #fff;
  border-color: #83BCE8;
  box-shadow: 0 0 0 .22rem rgba(126, 184, 229, .16), 0 8px 20px rgba(104, 160, 205, .08);
}

/* ตาราง */
.table thead th {
  background: linear-gradient(90deg, #EAF7FF, #EEF3FF);
  color: #345A7B;
  border-bottom-color: #CDE2F2;
}

.table tbody tr {
  transition: background .16s ease, transform .16s ease;
}

.table tbody tr:hover {
  background: linear-gradient(90deg, rgba(234,247,255,.72), rgba(241,242,255,.65));
}

/* Sidebar ฝั่ง Admin ไล่สีเข้มแบบพาสเทล */
.admin-sidebar {
  background:
    radial-gradient(circle at 18% 10%, rgba(155,211,244,.20), transparent 28%),
    linear-gradient(180deg, #5085AF 0%, #477A9F 42%, #556D9F 100%);
}

.admin-sidebar a:hover,
.admin-sidebar a.active {
  background: linear-gradient(90deg, rgba(174,222,250,.22), rgba(199,209,255,.18));
  box-shadow: inset 3px 0 0 #BFE7FB;
}

/* Badge และ status */
.status-icon {
  background: linear-gradient(145deg, #E7F6FF, #EEF0FF);
}

.badge.text-bg-light {
  background: linear-gradient(135deg, #F7FCFF, #F2F3FF) !important;
}

/* Footer ให้เชื่อมกับธีม */
footer,
.footer {
  background: linear-gradient(90deg, rgba(238,249,255,.92), rgba(245,244,255,.92));
  border-top: 1px solid #D8EAF7;
}

/* Animation ไล่สี */
@keyframes eduGradientSlide {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

@keyframes eduHeroGradient {
  0% { background-position: 0% 40%; }
  100% { background-position: 100% 60%; }
}

/* ลด Animation สำหรับผู้ใช้ที่ตั้งค่า Reduce Motion */
@media (prefers-reduced-motion: reduce) {
  .navbar::after,
  .card-soft::before,
  .lesson-card::before,
  .stat-card::before,
  .comic-panel::before,
  .progress-bar,
  .hero {
    animation: none !important;
  }
}

@media (max-width: 767.98px) {
  body { background-attachment: scroll; }
  .hero { animation-duration: 18s; }
  .card-soft::before,
  .lesson-card::before,
  .stat-card::before,
  .comic-panel::before { height: 3px; }
}


/* ============================================
   Dark Blue Gradient Theme Override
   เปลี่ยนจากฟ้าอ่อนเป็นฟ้าเข้มแบบไล่สี
   เพิ่มความเข้มของธีม แต่ยังคงความอ่านง่าย
   ============================================ */
:root {
  --edu-primary: #2F6FB3;
  --edu-primary-strong: #1F4F88;
  --edu-secondary: #E5F0FB;
  --edu-accent: #A9C8EA;
  --edu-dark: #173453;
  --edu-soft: #F2F7FD;
  --edu-border: #C6D9EE;
  --edu-gradient-1: #5A93D7;
  --edu-gradient-2: #3E7FCB;
  --edu-gradient-3: #2F5FA7;
  --edu-gradient-4: #DCEBFA;
  --edu-gradient-5: #F4F8FD;
}

body {
  color: var(--edu-dark);
  background:
    radial-gradient(circle at 8% 12%, rgba(90, 147, 215, .18), transparent 28%),
    radial-gradient(circle at 92% 18%, rgba(47, 95, 167, .16), transparent 26%),
    radial-gradient(circle at 50% 92%, rgba(62, 127, 203, .12), transparent 34%),
    linear-gradient(145deg, #F6FAFE 0%, #EEF5FC 45%, #F3F7FD 100%);
  background-attachment: fixed;
}

.navbar {
  background: linear-gradient(90deg, rgba(255,255,255,.97), rgba(240,247,253,.96), rgba(235,243,252,.95)) !important;
  box-shadow: 0 8px 28px rgba(31, 79, 136, .10);
}

.navbar::after {
  background: linear-gradient(90deg, #2F6FB3, #3E7FCB, #2F5FA7, #2F6FB3);
}

.navbar .nav-link:hover {
  color: #1F4F88 !important;
  background: linear-gradient(135deg, rgba(47,111,179,.16), rgba(62,127,203,.12));
}

.text-primary,
.hero .text-primary,
.section-title .text-primary {
  background: linear-gradient(90deg, #1F4F88, #2F6FB3, #3E7FCB);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

.hero {
  background:
    radial-gradient(circle at 15% 22%, rgba(62,127,203,.22), transparent 29%),
    radial-gradient(circle at 82% 18%, rgba(47,95,167,.19), transparent 30%),
    radial-gradient(circle at 68% 78%, rgba(90,147,215,.15), transparent 32%),
    linear-gradient(125deg, #FFFFFF 0%, #ECF4FC 34%, #E6F0FB 68%, #EEF5FC 100%);
}

.hero::before {
  background: linear-gradient(145deg, rgba(47,111,179,.15), rgba(47,95,167,.08));
}

.hero::after {
  border-color: rgba(47,111,179,.16);
}

.hero .badge {
  color: #2B5F98;
  border-color: rgba(47,111,179,.15) !important;
}

.hero .lead {
  color: #42627E;
}

.edu-hero-art {
  background:
    radial-gradient(circle at 25% 22%, rgba(255,255,255,.97) 0 12%, transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.98) 0%, rgba(232,242,251,.96) 48%, rgba(223,236,250,.94) 100%);
  border-color: rgba(47,111,179,.16);
  box-shadow:
    0 30px 75px rgba(31, 79, 136, .16),
    inset 0 1px 0 rgba(255,255,255,.95);
}

.edu-hero-art::before {
  background: radial-gradient(circle, rgba(62,127,203,.24), rgba(47,95,167,.10) 46%, rgba(255,255,255,0) 72%);
}

.hero-orbit,
.hero-mini-card,
.hero-topic-row span {
  border-color: rgba(47,111,179,.15);
  box-shadow: 0 12px 32px rgba(31, 79, 136, .10);
}

.hero-orbit,
.hero-topic-row span {
  color: #355B84;
}

.hero-orbit i {
  background: linear-gradient(145deg, #E8F2FC, #F0F6FD);
  color: var(--edu-primary);
}

.hero-mini-icon,
.lesson-number {
  background: linear-gradient(145deg, #3E7FCB 0%, #2F6FB3 52%, #1F4F88 100%);
  box-shadow: 0 8px 20px rgba(31, 79, 136, .22);
}

.btn-primary {
  background: linear-gradient(110deg, #2F6FB3 0%, #3E7FCB 48%, #1F4F88 100%);
  border: 0;
  color: #fff;
  box-shadow: 0 9px 24px rgba(31, 79, 136, .22);
}

.btn-primary:hover,
.btn-primary:focus {
  background: linear-gradient(110deg, #285F9B 0%, #346FB3 48%, #183F6D 100%);
  color: #fff;
  box-shadow: 0 13px 30px rgba(31, 79, 136, .29);
}

.btn-outline-primary {
  background: linear-gradient(#fff,#fff) padding-box,
              linear-gradient(110deg,#2F6FB3,#3E7FCB,#1F4F88) border-box;
  color: #2B5F98;
}

.btn-outline-primary:hover {
  background: linear-gradient(110deg, #ECF4FC, #F1F6FD, #E9F0FA) padding-box,
              linear-gradient(110deg,#2F6FB3,#3E7FCB,#1F4F88) border-box;
  color: #1F4F88;
}

.btn-outline-secondary {
  color: #43617D;
  border-color: #B4CBE3;
}

.btn-outline-secondary:hover {
  background: #ECF4FC;
  color: #2B5F98;
  border-color: #7DA9D6;
}

.card-soft,
.lesson-card,
.stat-card,
.comic-panel {
  background: linear-gradient(155deg, rgba(255,255,255,.99), rgba(244,248,253,.98));
  border-color: rgba(47,111,179,.18);
  box-shadow: 0 12px 35px rgba(31, 79, 136, .08);
}

.card-soft::before,
.lesson-card::before,
.stat-card::before,
.comic-panel::before {
  background: linear-gradient(90deg, #2F6FB3, #3E7FCB, #2F5FA7, #2F6FB3);
}

.lesson-card:hover {
  border-color: rgba(47,111,179,.34);
  box-shadow: 0 20px 45px rgba(31, 79, 136, .14);
}

.form-control,
.form-select {
  border-color: #C5D9EC;
}

.form-control:focus,
.form-select:focus {
  border-color: #3E7FCB;
  box-shadow: 0 0 0 .22rem rgba(47,111,179,.14), 0 8px 20px rgba(31,79,136,.08);
}

.progress {
  background: linear-gradient(90deg, #E5EFFA, #EAF2FB);
}

.progress-bar {
  background: linear-gradient(90deg, #2F6FB3, #3E7FCB, #1F4F88, #2F6FB3);
}

.dialogue {
  background: linear-gradient(135deg, #F0F6FC, #F5F9FD);
  border-image: linear-gradient(#3E7FCB, #1F4F88) 1;
}

.status-icon {
  background: linear-gradient(145deg, #E8F2FC, #EEF5FC);
  color: #2F6FB3;
}

.status-icon.done {
  background:#E7F7EF;
  color:#16824a;
}

.table thead th {
  background: linear-gradient(90deg, #E7F0FB, #EDF4FC);
  color: #2F5275;
  border-bottom-color: #C8D9EB;
}

.table tbody tr:hover {
  background: linear-gradient(90deg, rgba(231,240,251,.78), rgba(240,245,252,.70));
}

.admin-sidebar {
  background:
    radial-gradient(circle at 18% 10%, rgba(134,185,233,.16), transparent 28%),
    linear-gradient(180deg, #1F4F88 0%, #245892 42%, #183F6D 100%);
}

.admin-sidebar a {
  color: #E7F1FB;
}

.admin-sidebar a:hover,
.admin-sidebar a.active {
  background: linear-gradient(90deg, rgba(83,142,205,.26), rgba(56,100,159,.22));
  box-shadow: inset 3px 0 0 #8AB7E0;
}

.badge.text-bg-light {
  background: linear-gradient(135deg, #F6FAFE, #EEF4FC) !important;
  color: #2B5F98 !important;
}

footer,
.footer {
  background: linear-gradient(90deg, rgba(236,244,252,.95), rgba(229,239,250,.95));
  border-top: 1px solid #D3E1EF;
}

/* ============================================
   Cookie Notice + Data Recording Notice
   เพิ่มเพื่อแจ้งผู้ใช้เรื่องคุกกี้ที่จำเป็นและการบันทึกข้อมูล
   ============================================ */
.cookie-notice {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translate(-50%, 22px);
  width: min(1120px, calc(100% - 28px));
  z-index: 1090;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid rgba(86, 148, 216, .32);
  border-radius: 22px;
  background:
    radial-gradient(circle at 8% 15%, rgba(112, 174, 236, .20), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(232,242,252,.98));
  box-shadow: 0 22px 60px rgba(20, 57, 99, .28);
  opacity: 0;
  transition: opacity .22s ease, transform .22s ease;
  backdrop-filter: blur(16px);
}

.cookie-notice[hidden] { display: none !important; }

.cookie-notice--visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.cookie-notice--closing {
  opacity: 0;
  transform: translate(-50%, 18px);
}

.cookie-notice__icon {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  font-size: 1.55rem;
  color: #fff;
  background: linear-gradient(145deg, #3E7FCB, #2F6FB3 55%, #1F4F88);
  box-shadow: 0 10px 24px rgba(31, 79, 136, .23);
}

.cookie-notice__title {
  margin: 0 0 4px;
  font-size: 1.25rem;
  font-weight: 800;
  color: #173E68;
}

.cookie-notice__text {
  color: #395A78;
  line-height: 1.55;
}

.cookie-notice__link,
.footer-privacy-link {
  color: #245F9B;
  font-weight: 700;
  text-decoration: none;
}

.cookie-notice__link:hover,
.footer-privacy-link:hover { text-decoration: underline; }

.cookie-notice__actions .btn {
  min-width: 118px;
  white-space: nowrap;
}

.footer-data-note {
  color: #54708A;
  font-size: .96em;
}

.data-notice-box {
  padding: 16px 18px;
  border: 1px solid rgba(47,111,179,.22);
  border-left: 5px solid #2F6FB3;
  border-radius: 16px;
  background: linear-gradient(135deg, #EEF6FD, #F7FAFE);
  color: #315575;
}

.data-notice-box strong { color: #1F4F88; }

.data-mini-notice {
  padding: 11px 14px;
  border-radius: 13px;
  background: linear-gradient(135deg, #EEF5FC, #F7FAFD);
  border: 1px solid #D5E4F3;
  color: #466582;
}

.privacy-check {
  padding: 14px 14px 14px 2.3rem;
  border-radius: 14px;
  background: #F4F8FC;
  border: 1px solid #D7E5F2;
}

.privacy-card li { margin-bottom: .45rem; }

.privacy-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  font-size: 1.7rem;
  color: #fff;
  background: linear-gradient(145deg, #3E7FCB, #2F6FB3, #1F4F88);
  box-shadow: 0 12px 28px rgba(31,79,136,.22);
}

.privacy-table code {
  color: #1F4F88;
  background: #EDF4FC;
  padding: .2rem .45rem;
  border-radius: .45rem;
}

@media (max-width: 767.98px) {
  .cookie-notice {
    bottom: 10px;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 16px;
    border-radius: 18px;
    max-height: calc(100vh - 20px);
    overflow-y: auto;
  }
  .cookie-notice__icon { display: none; }
  .cookie-notice__actions .btn { width: 100%; }
  .cookie-notice__title { font-size: 1.15rem; }
  .cookie-notice__text { font-size: .98rem; }
}

/* ============================================
   หน้าอ่านบทเรียนแบบ Interactive
   เพิ่มลูกเล่นโดยไม่เปลี่ยนข้อมูลในฐานข้อมูล
   ============================================ */
.lesson-reader-page {
  --lesson-font-scale: 1;
  background:
    radial-gradient(circle at 8% 12%, rgba(120, 174, 234, .10), transparent 26%),
    radial-gradient(circle at 92% 28%, rgba(150, 210, 245, .12), transparent 24%),
    linear-gradient(180deg, #f8fcff 0%, #f3f9ff 45%, #ffffff 100%);
}

.lesson-read-progress {
  position: fixed;
  z-index: 1035;
  top: var(--edu-navbar-height, 0px);
  left: 0;
  width: 100%;
  height: 5px;
  pointer-events: none;
  background: rgba(216, 234, 247, .55);
}

.lesson-read-progress > div {
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #2f76bd, #5eb4ea, #7d8cf4);
  box-shadow: 0 0 12px rgba(76, 145, 220, .35);
  transition: width .12s linear;
}

.lesson-reader-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(1.4rem, 3vw, 2.4rem);
  border: 1px solid rgba(88, 148, 205, .18);
  border-radius: 2rem;
  color: #1e3852;
  background:
    radial-gradient(circle at 85% 20%, rgba(255,255,255,.82), transparent 22%),
    linear-gradient(135deg, #ffffff 0%, #eaf5ff 48%, #dbeeff 100%);
  box-shadow: 0 22px 55px rgba(48, 105, 155, .11);
}

.lesson-reader-hero::after {
  content: "";
  position: absolute;
  width: 190px;
  height: 190px;
  right: -55px;
  bottom: -85px;
  border-radius: 50%;
  border: 28px solid rgba(70, 135, 200, .08);
}

.lesson-back-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: #326b9e;
  text-decoration: none;
  font-weight: 700;
}
.lesson-back-link:hover { color: #1f507d; }

.lesson-chip {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  padding: .42rem .72rem;
  border: 1px solid rgba(61, 126, 186, .14);
  border-radius: 999px;
  color: #315e85;
  background: rgba(255,255,255,.76);
  backdrop-filter: blur(7px);
  font-weight: 700;
  font-size: .95rem;
}
.lesson-chip-success { color: #16744a; background: rgba(229, 248, 238, .9); }

.lesson-reader-title {
  max-width: 800px;
  margin: 0;
  font-weight: 800;
  line-height: 1.08;
  font-size: clamp(2.15rem, 5vw, 4rem);
  letter-spacing: -.025em;
}

.lesson-reader-description {
  max-width: 800px;
  margin-top: 1rem;
  color: #567087;
  font-size: calc(1.2rem * var(--lesson-font-scale));
}

.lesson-tools-card {
  position: relative;
  z-index: 1;
  padding: 1.15rem;
  border: 1px solid rgba(75, 135, 190, .15);
  border-radius: 1.35rem;
  background: rgba(255,255,255,.82);
  box-shadow: 0 14px 34px rgba(53, 99, 141, .08);
  backdrop-filter: blur(10px);
}

.lesson-local-progress { height: .72rem; }
.lesson-local-progress .progress-bar { background: linear-gradient(90deg, #3a79b9, #6ebae8); }

.lesson-panel-toolbar {
  position: sticky;
  top: 84px;
  z-index: 1010;
  max-width: 260px;
  margin-inline: auto;
  padding: .55rem .7rem;
  display: flex;
  align-items: center;
  gap: .65rem;
  border: 1px solid rgba(74, 132, 188, .14);
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 10px 28px rgba(49, 99, 143, .11);
  backdrop-filter: blur(12px);
}

.lesson-nav-btn {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eaf5ff;
  color: #2d6da7;
  transition: transform .2s ease, background .2s ease;
}
.lesson-nav-btn:hover:not(:disabled) { transform: scale(1.08); background: #d9edff; }
.lesson-nav-btn:disabled { opacity: .38; cursor: not-allowed; }

.lesson-panel-card {
  position: relative;
  padding: clamp(1.15rem, 3vw, 2rem);
  margin-bottom: 2rem;
  border-radius: 1.7rem;
  overflow: hidden;
  transform: translateY(28px);
  opacity: 0;
  transition: opacity .55s ease, transform .55s ease, box-shadow .25s ease;
}
.lesson-panel-card.is-visible { transform: translateY(0); opacity: 1; }
.lesson-panel-card:hover { box-shadow: 0 18px 48px rgba(48, 101, 147, .11); }

.lesson-panel-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.2rem;
}

.lesson-panel-number {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 17px;
  color: #fff;
  background: linear-gradient(145deg, #2f6da5, #5da5df);
  box-shadow: 0 9px 22px rgba(54, 120, 180, .22);
  font-weight: 800;
  font-size: 1.25rem;
}

.lesson-panel-title {
  font-size: calc(1.75rem * var(--lesson-font-scale));
  font-weight: 800;
  line-height: 1.15;
}

.lesson-panel-jump { border-radius: 12px; }

.lesson-image-button {
  position: relative;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 1.25rem;
  overflow: hidden;
  background: #eef7ff;
  cursor: zoom-in;
}
.lesson-image-button img {
  width: 100%;
  max-height: 720px;
  object-fit: contain;
  border-radius: 1.25rem;
  transition: transform .35s ease;
}
.lesson-image-button:hover img { transform: scale(1.012); }
.lesson-image-hint {
  position: absolute;
  right: .85rem;
  bottom: .85rem;
  display: inline-flex;
  gap: .35rem;
  align-items: center;
  padding: .42rem .65rem;
  border-radius: 999px;
  color: #fff;
  background: rgba(26, 61, 94, .76);
  backdrop-filter: blur(8px);
  font-size: .9rem;
  font-weight: 700;
}

.lesson-dialogue {
  position: relative;
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  border: 0;
  border-left: 0;
  padding: 1rem 1.15rem;
  color: #254866;
  background: linear-gradient(135deg, #eef8ff, #f8fcff);
  font-size: calc(1.22rem * var(--lesson-font-scale));
}
.lesson-dialogue::before {
  content: "";
  position: absolute;
  left: 24px;
  bottom: -10px;
  width: 20px;
  height: 20px;
  background: #f5fbff;
  transform: rotate(45deg);
  border-radius: 3px;
}
.lesson-dialogue-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: #2f71ac;
  background: #ddecfb;
}

.lesson-description-box {
  padding: 1rem 1.15rem;
  border: 1px dashed rgba(66, 127, 184, .22);
  border-radius: 1rem;
  background: #fffdf3;
  font-size: calc(1.12rem * var(--lesson-font-scale));
}
.lesson-description-label {
  display: inline-flex;
  gap: .38rem;
  align-items: center;
  margin-bottom: .35rem;
  color: #916c13;
  font-weight: 800;
}

.lesson-panel-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .8rem;
  padding-top: .8rem;
  border-top: 1px solid #edf3f7;
  color: #668096;
  font-size: .95rem;
}

.lesson-finish-card {
  position: relative;
  overflow: hidden;
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid rgba(61, 125, 186, .17);
  border-radius: 2rem;
  background:
    radial-gradient(circle at 12% 10%, rgba(255,255,255,.95), transparent 25%),
    linear-gradient(135deg, #eef8ff 0%, #dceeff 100%);
  box-shadow: 0 20px 50px rgba(51, 105, 153, .10);
}
.lesson-finish-card::after {
  content: "";
  position: absolute;
  width: 170px;
  height: 170px;
  right: -65px;
  top: -70px;
  border-radius: 50%;
  background: rgba(93, 165, 223, .11);
}
.lesson-finish-icon {
  width: 70px;
  height: 70px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(145deg, #2f6da5, #6bb5ea);
  box-shadow: 0 14px 30px rgba(48, 117, 179, .22);
  font-size: 1.9rem;
}

.lesson-contents-offcanvas { width: min(440px, 92vw) !important; }
.lesson-content-item {
  width: 100%;
  display: flex;
  gap: .8rem;
  align-items: center;
  padding: .8rem;
  margin-bottom: .55rem;
  border: 1px solid #e2edf6;
  border-radius: 1rem;
  color: #2c4d69;
  background: #fff;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.lesson-content-item:hover,
.lesson-content-item.active {
  transform: translateX(-4px);
  border-color: #9cc7ea;
  background: #eef8ff;
}
.lesson-content-item small,
.lesson-content-item strong { display: block; }
.lesson-content-number {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: #fff;
  background: #5d99ce;
  font-weight: 800;
}

.lesson-image-modal-content,
.lesson-complete-modal {
  border: 0;
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: 0 28px 80px rgba(28, 67, 101, .24);
}

.lesson-complete-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #f6b83f, #ef8e3d);
  box-shadow: 0 14px 34px rgba(219, 145, 38, .28);
  font-size: 2rem;
}

.lesson-sparkles { position: absolute; inset: 0; pointer-events: none; }
.lesson-sparkles span {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: #68aee2;
  opacity: 0;
  animation: lessonSparkle 1.3s ease-out forwards;
}
.lesson-sparkles span:nth-child(3n) { background: #f4b743; transform: rotate(45deg); }
.lesson-sparkles span:nth-child(4n) { background: #8f85e8; border-radius: 50%; }
@keyframes lessonSparkle {
  0% { opacity: 0; transform: translateY(14px) scale(.4) rotate(0); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-28px) scale(1.15) rotate(160deg); }
}

/* Focus mode: ลดสิ่งรบกวนแต่ยังให้ผู้ใช้กลับ/ออกจากระบบได้ */
body.lesson-focus-mode .lesson-reader-page .container { max-width: 920px !important; }
body.lesson-focus-mode .lesson-reader-hero .col-lg-4 { display: none; }
body.lesson-focus-mode .lesson-reader-hero .col-lg-8 { width: 100%; }
body.lesson-focus-mode footer { opacity: .25; transition: opacity .2s ease; }
body.lesson-focus-mode footer:hover { opacity: 1; }
body.lesson-focus-mode .lesson-panel-card { box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  .lesson-panel-card { opacity: 1; transform: none; transition: none; }
  .lesson-image-button img,
  .lesson-content-item,
  .lesson-nav-btn { transition: none; }
  .lesson-sparkles span { animation: none; }
}

@media (max-width: 767.98px) {
  .lesson-reader-hero { border-radius: 1.45rem; }
  .lesson-panel-toolbar { top: 72px; }
  .lesson-panel-card { border-radius: 1.35rem; padding: 1rem; }
  .lesson-panel-header { gap: .7rem; }
  .lesson-panel-number { width: 44px; height: 44px; flex-basis: 44px; border-radius: 14px; }
  .lesson-panel-title { font-size: calc(1.45rem * var(--lesson-font-scale)); }
  .lesson-dialogue { font-size: calc(1.08rem * var(--lesson-font-scale)); }
  .lesson-description-box { font-size: calc(1.02rem * var(--lesson-font-scale)); }
  .lesson-panel-footer { align-items: flex-start; flex-direction: column; }
  .lesson-next-inline { width: 100%; }
  .lesson-tools-card .btn { flex: 1 1 auto; }
}