/* TNH Learning lessons 2–3 */
.learning-back-btn{display:inline-flex;align-items:center;gap:6px;margin:0 0 14px;border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:9px 13px;background:rgba(255,255,255,.06);color:#d9e7e5;font:700 12px/1 inherit;cursor:pointer}
.learning-hub-hero{position:relative;overflow:hidden;margin:0 0 16px;padding:24px 20px;border:1px solid rgba(88,220,188,.18);border-radius:25px;background:radial-gradient(circle at 92% 0,rgba(56,189,248,.15),transparent 38%),linear-gradient(145deg,rgba(10,35,31,.96),rgba(5,18,20,.96));box-shadow:0 18px 45px rgba(0,0,0,.24)}
.learning-hub-hero small{display:block;color:#6ee7c5;font-size:10px;font-weight:900;letter-spacing:1.8px}.learning-hub-hero h2{margin:5px 0 5px;color:#fff;font-size:28px}.learning-hub-hero p{margin:0;max-width:430px;color:#9db0ad;font-size:12.5px;line-height:1.65}
.learning-summary-all{margin-bottom:18px!important}.learning-course-heading{display:flex;justify-content:space-between;align-items:end;margin:20px 2px 11px}.learning-course-heading small{display:block;color:#6ee7c5;font-size:10px;font-weight:800}.learning-course-heading h3{margin:3px 0 0;color:#fff;font-size:18px}.learning-course-heading>span{color:#8ea4a1;font-size:11px;font-weight:800}
.learning-course-list{display:grid;gap:11px}.learning-course-card{position:relative;width:100%;display:grid;grid-template-columns:50px minmax(0,1fr) auto;gap:10px;align-items:center;text-align:left;padding:17px 14px;border:1px solid rgba(255,255,255,.09);border-radius:21px;background:linear-gradient(145deg,rgba(12,31,29,.86),rgba(6,19,20,.94));color:#fff;box-shadow:0 11px 30px rgba(0,0,0,.18);cursor:pointer}.learning-course-card.is-done{border-color:rgba(52,211,153,.3)}.learning-course-no{position:absolute;top:8px;right:12px;color:#718a86;font-size:9px;font-weight:900;text-transform:uppercase}.learning-course-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:15px;background:rgba(255,255,255,.06);font-size:24px}.learning-course-copy{display:block;min-width:0}.learning-course-copy strong{display:block;padding-right:42px;font-size:15px}.learning-course-copy small{display:block;margin-top:3px;color:#8fa5a1;font-size:10.5px;line-height:1.45}.learning-course-score{display:inline-flex;margin-top:7px;padding:3px 7px;border-radius:99px;background:rgba(56,189,248,.08);color:#8bdbff;font-size:9.5px!important;font-weight:800}.learning-course-track{display:block;height:4px;margin-top:9px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}.learning-course-track b{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#38bdf8,#5eead4)}.learning-course-copy em{display:block;margin-top:4px;color:#79908c;font:700 9.5px/1.3 inherit}.learning-course-arrow{color:#5eead4;font-size:27px}
.learning-lesson-head{margin:0 0 15px;padding:21px 18px;border:1px solid rgba(56,189,248,.18);border-radius:23px;background:linear-gradient(145deg,rgba(8,35,42,.92),rgba(7,22,24,.96));color:#fff}.learning-lesson-head.is-l2{border-color:rgba(56,189,248,.25)}.learning-lesson-head.is-l3{border-color:rgba(52,211,153,.25);background:linear-gradient(145deg,rgba(8,39,31,.92),rgba(7,22,24,.96))}.learning-lesson-head>span{color:#7dd3fc;font-size:10px;font-weight:900;letter-spacing:.8px}.learning-lesson-head h2{margin:5px 0 5px;font-size:22px}.learning-lesson-head p{margin:0;color:#99aca9;font-size:11.5px;line-height:1.6}.learning-lesson-head>div{display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:center;margin-top:13px}.learning-lesson-head>div b,.learning-lesson-head>div strong{font-size:10.5px;color:#d9f5ef}.learning-lesson-head>div i{height:5px;background:rgba(255,255,255,.08);border-radius:99px;overflow:hidden}.learning-lesson-head>div i em{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#38bdf8,#5eead4)}
.learning-quiz-card{margin:0 0 12px;padding:15px;border:1px solid rgba(255,255,255,.09);border-radius:20px;background:rgba(8,25,28,.9);box-shadow:0 10px 26px rgba(0,0,0,.15)}.learning-quiz-card.is-correct{border-color:rgba(52,211,153,.28)}.learning-quiz-card.is-wrong{border-color:rgba(251,191,36,.25)}.learning-quiz-card header{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:start}.learning-quiz-card header>span{display:grid;place-items:center;min-width:36px;height:24px;border-radius:99px;background:rgba(56,189,248,.1);color:#7dd3fc;font-size:9px;font-weight:900}.learning-quiz-card header strong{color:#f4fbfa;font-size:13px;line-height:1.55}.learning-quiz-card header em{grid-column:2;color:#6ee7b7;font-size:10px;font-weight:800}.learning-quiz-choices{display:grid;gap:7px;margin-top:12px}.learning-quiz-choices button{display:grid;grid-template-columns:28px 1fr;gap:8px;align-items:center;width:100%;padding:10px;border:1px solid rgba(255,255,255,.08);border-radius:13px;background:rgba(255,255,255,.035);color:#cbd9d6;text-align:left;font:600 11px/1.45 inherit;cursor:pointer}.learning-quiz-choices button:disabled{opacity:.58;cursor:default}.learning-quiz-choices button span{width:27px;height:27px;display:grid;place-items:center;border-radius:9px;background:rgba(255,255,255,.06);color:#7dd3fc;font-weight:900}.learning-quiz-explain{margin-top:11px;padding:11px;border-radius:13px;background:rgba(52,211,153,.07);border:1px solid rgba(52,211,153,.12)}.learning-quiz-explain b{color:#86efac;font-size:10px}.learning-quiz-explain p{margin:4px 0 0;color:#9fb3af;font-size:10.5px;line-height:1.6}
.learning-scenario-note{margin:0 0 12px;padding:10px 12px;border:1px solid rgba(250,204,21,.13);border-radius:14px;background:rgba(250,204,21,.055);color:#c8bc80;font-size:9.5px;line-height:1.55}.learning-scenario-card{margin:0 0 13px;padding:16px;border:1px solid rgba(255,255,255,.09);border-radius:21px;background:linear-gradient(145deg,rgba(9,30,26,.92),rgba(7,21,22,.96));box-shadow:0 10px 28px rgba(0,0,0,.16)}.learning-scenario-card.is-done{border-color:rgba(52,211,153,.23)}.learning-scenario-card header{display:grid;grid-template-columns:1fr auto;align-items:center;gap:3px 8px}.learning-scenario-card header span{grid-column:1/-1;color:#6ee7b7;font-size:9px;font-weight:900;letter-spacing:.6px}.learning-scenario-card header h3{margin:0;color:#fff;font-size:16px}.learning-scenario-card header b{padding:5px 8px;border-radius:99px;background:rgba(52,211,153,.1);color:#86efac;font-size:10px}.learning-scenario-prompt{margin:9px 0 13px;color:#a9bbb7;font-size:11px;line-height:1.65}.learning-scenario-input span{display:block;margin-bottom:6px;color:#dff7f0;font-size:10px;font-weight:800}.learning-scenario-input textarea{width:100%;resize:vertical;min-height:120px;padding:12px;border:1px solid rgba(255,255,255,.1);border-radius:14px;outline:0;background:rgba(0,0,0,.16);color:#fff;font:500 12px/1.6 inherit}.learning-scenario-input textarea:focus{border-color:rgba(94,234,212,.35);box-shadow:0 0 0 3px rgba(94,234,212,.06)}.learning-scenario-input small{display:block;margin-top:5px;color:#718681;font-size:9px}.learning-scenario-submit{width:100%;margin-top:11px;padding:11px 12px;border:0;border-radius:13px;background:linear-gradient(135deg,#34d399,#22d3ee);color:#05201b;font:900 11px/1 inherit;cursor:pointer}.learning-scenario-answer{margin-top:8px;padding:11px;border-radius:13px;background:rgba(255,255,255,.035)}.learning-scenario-answer small{color:#6ee7b7;font-size:9px;font-weight:800}.learning-scenario-answer p{margin:5px 0 0;color:#d0ddda;font-size:11px;line-height:1.6;white-space:pre-wrap}.learning-scenario-guide{margin-top:9px;padding:11px;border-radius:13px;background:rgba(52,211,153,.06);border:1px solid rgba(52,211,153,.1)}.learning-scenario-guide strong{color:#86efac;font-size:10px}.learning-scenario-guide ul{margin:6px 0 0;padding-left:17px;color:#9fb3af;font-size:10px;line-height:1.65}
@media(max-width:390px){.learning-course-card{grid-template-columns:44px minmax(0,1fr) auto;padding:15px 12px}.learning-course-no{display:none}.learning-course-icon{width:42px;height:42px;font-size:21px}.learning-course-copy strong{padding-right:0}.learning-quiz-card{padding:13px}.learning-lesson-head{padding:18px 15px}}

/* ส่วนหัวศูนย์การเรียนรู้นักเดินป่า — พื้นหลังป่าแบบเดียวกับป๊อบอัพ */
.learning-hub-hero{
  border-color:rgba(105,170,151,.28);
  background:
    radial-gradient(circle at 92% 0,rgba(52,211,153,.16),transparent 40%),
    linear-gradient(180deg,rgba(3,12,18,.45) 0%,rgba(3,12,18,.70) 60%,rgba(2,10,15,.90) 100%),
    var(--tnh-forest-photo,url('https://images.unsplash.com/photo-1448375240586-882707db888b?auto=format&fit=crop&w=1200&q=72')) center/cover no-repeat!important;
}
.learning-hub-hero h2{text-shadow:0 2px 10px rgba(0,0,0,.6)}
.learning-hub-hero p{color:#c3d6cf}

/* ================================================================
   ป๊อบอัพศูนย์การเรียนรู้นักเดินป่า — ธีมป่าทึบแบบป๊อบอัพอื่น
   (ต่ำกว่า prepDetailModal z-index 9999 เพื่อให้หน้ารายละเอียดหัวข้อเปิดทับได้)
   ================================================================ */
.learn-pop{display:none;position:fixed;inset:0;z-index:9000;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;color:#f1f5f9;
  background:
    radial-gradient(circle at 92% 2%,rgba(31,122,105,.14),transparent 30%),
    radial-gradient(circle at 0 78%,rgba(22,90,72,.10),transparent 27%),
    linear-gradient(180deg,rgba(3,12,18,.80),rgba(2,10,15,.95)),
    var(--tnh-forest-photo,url('https://images.unsplash.com/photo-1448375240586-882707db888b?auto=format&fit=crop&w=1800&q=76')) center top/cover no-repeat fixed;
  background-color:var(--tnh-forest-base,#030b0d)}
.learn-pop.open{display:block;animation:learnPopIn .22s ease-out}
@keyframes learnPopIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
html.learn-lock,html.learn-lock body{overflow:hidden}
.learn-pop-head{position:sticky;top:0;z-index:5;display:grid;grid-template-columns:40px 1fr 40px;align-items:center;gap:8px;
  padding:calc(env(safe-area-inset-top,0px) + 10px) 14px 10px;background:linear-gradient(180deg,rgba(3,11,13,.96),rgba(3,11,13,.84));
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(105,170,151,.16)}
.learn-pop-head div{text-align:center;min-width:0}
.learn-pop-head b{display:block;font-size:16px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.learn-pop-head small{display:block;font-size:10.5px;color:#94ada5;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.learn-pop-btn{height:40px;border:1px solid rgba(105,170,151,.30);border-radius:13px;background:rgba(4,14,18,.8);color:#d1fae5;font-size:21px;line-height:1;cursor:pointer;font-family:inherit}
.learn-pop-body{max-width:720px;margin:0 auto;padding:14px 14px calc(env(safe-area-inset-bottom,0px) + 32px)}
.learn-pop-body .learning-hub-hero h2{font-size:24px}