/* หน้าบทเรียนของนักเรียน แนว A (น้ำเงิน-ขาว) — ทุกกฎอยู่ใต้ .lp (ติดที่ #lessonPage) จึงไม่กระทบหน้าครู/หน้าอื่นที่ใช้ .btn .card .input ร่วมกัน
   ห้ามใส่ .kr ให้ #lessonPage: krusun.css มี .kr .card / .kr .ring-wrap ที่จะทำให้การ์ดแบบทดสอบและวงกลมคะแนนเพี้ยน
   --lp-top = ความสูงจริงของ .site-nav (app.js ตั้งบน #lessonPage) ใช้กับแถบที่ติดด้านบน: position:sticky; top:var(--lp-top)
   โทเคนสี (--navy --navy2 --sky --ink --rule --tint) มาจาก krusun.css :root */

/* ===== ตัวเลขหมุน (คัดจาก krusun.css — ที่นั่นอยู่ใต้ .kr) ===== */
.lp .odo{display:inline-flex;height:1em;overflow:hidden;line-height:1;vertical-align:bottom}
.lp .odo .digit{display:inline-block;height:1em;overflow:hidden}
.lp .odo .reel{display:flex;flex-direction:column}
.lp .odo .reel span{display:block;height:1em}

/* ===== หัวบท: แถบน้ำเงินแบน ===== */
.lp{padding-top:24px}
.lp .lp-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:36px;align-items:end;background:var(--navy);color:#fff;padding:28px 40px 26px}
.lp .lp-head-main{min-width:0}
.lp .lp-crumb{font-size:13px;color:#AFC0E6;margin-bottom:18px;overflow-wrap:anywhere}
.lp .lp-crumb a{color:#AFC0E6}
.lp .lp-crumb a:hover{color:#fff}
.lp .lp-crumb-now{color:#fff;font-weight:600}
.lp .lp-unit{font-size:13px;letter-spacing:.04em;color:var(--sky)}
.lp .lp-unit:after{content:"";display:inline-block;vertical-align:middle;width:46px;height:1px;margin-left:12px;background:var(--sky)}
.lp .lp-unit-name{overflow-wrap:anywhere}
.lp .lp-title{font:800 44px/1.2 'Noto Sans Thai',sans-serif;color:#fff;margin:10px 0 6px;overflow-wrap:anywhere}
.lp .lp-desc{color:#C9D4EE;font-size:15.5px;margin:0;overflow-wrap:anywhere}
.lp .lp-due{font-size:13.5px;color:#AFC0E6;margin-top:12px}
.lp .lp-done{text-align:right;border-left:1px solid rgba(255,255,255,.18);padding-left:32px}
.lp .lp-done-label{display:block;font-size:13px;color:#AFC0E6}
.lp .lp-done-num{display:inline-flex;align-items:flex-end;font:500 84px/1 'Outfit',sans-serif;letter-spacing:-.04em;color:#fff}
.lp .lp-done-num small{font-size:34px;line-height:1;color:#7F93C4}

/* ===== แท็บแบบตาราง ===== */
.lp .lp-tabs{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border:1px solid var(--rule);border-top:0}
.lp .lp-tab{display:flex;justify-content:center;align-items:center;gap:8px;padding:14px 8px;background:#fff;border:0;border-left:1px solid var(--rule);border-radius:0;font:400 15px 'Noto Sans Thai',sans-serif;color:var(--muted);cursor:pointer;white-space:nowrap}
.lp .lp-tab:first-child{border-left:0}
.lp .lp-tab:hover{color:var(--ink);background:var(--tint)}
.lp .lp-tab[aria-selected="true"]{color:var(--ink);font-weight:700;box-shadow:inset 0 -2px 0 var(--navy)}
.lp .lp-ok{width:16px;height:16px;border-radius:50%;background:var(--navy);color:#fff;font-size:10px;line-height:1;display:inline-grid;place-items:center;flex:0 0 auto}

/* ===== คลาสพื้นฐานที่แท็บต่าง ๆ ใช้ซ้ำ ===== */
/* ป้ายเล็ก Outfit ตัวพิมพ์ใหญ่ + เส้นสั้นต่อท้าย */
.lp .lp-eb{display:flex;align-items:center;gap:12px;font:500 12px 'Outfit',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--navy2)}
.lp .lp-eb:after{content:"";flex:0 0 46px;height:1px;background:var(--navy2)}
/* หัวแท็บ */
.lp .lp-h2{font:800 26px/1.3 'Noto Sans Thai',sans-serif;color:var(--ink);margin:8px 0 6px;overflow-wrap:anywhere}
/* ป้ายกรอบเส้น เช่น "10 คะแนน" */
.lp .lp-chip{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border:1px solid var(--navy);border-radius:0;font-size:12.5px;line-height:1.6;color:var(--navy);background:#fff;white-space:nowrap}
/* แถวตัวเลขคั่นเส้นบาง: <div class="lp-stats"><div><b>5</b><small>ข้อ</small></div>…</div> */
.lp .lp-stats{display:flex;flex-wrap:wrap;row-gap:12px}
.lp .lp-stats>div{padding:0 24px;border-left:1px solid var(--rule)}
.lp .lp-stats>div:first-child{padding-left:0;border-left:0}
.lp .lp-stats b{display:block;font:500 28px/1.1 'Outfit',sans-serif;letter-spacing:-.02em;color:var(--navy)}
.lp .lp-stats small{display:block;font-size:13px;color:var(--muted)}
/* แถบน้ำเงินติดด้านบน (ใบงาน/แบบทดสอบ) — บรรทัดเดียว ปุ่มเลขข้อเลื่อนซ้ายขวาในแถบ */
.lp .lp-stepbar{position:sticky;top:var(--lp-top,0);z-index:20;display:flex;align-items:center;gap:14px;background:var(--navy);color:#fff;padding:10px 16px;min-width:0}
.lp .lp-step-label{flex:0 0 auto;font:500 13px 'Outfit','Noto Sans Thai',sans-serif;white-space:nowrap}
.lp .lp-step-nums{display:flex;gap:6px;flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none}
.lp .lp-step-nums::-webkit-scrollbar{display:none}
/* ช่องว่างในตัวเลื่อน เพื่อให้กรอบโฟกัสของปุ่มเลขข้อไม่ถูกตัด (ชดเชยด้วย margin ลบ ความสูงแถบเท่าเดิม) */
.lp .lp-step-nums{padding:5px;margin:-5px}

/* ปุ่ม: เหลี่ยม ไม่มีเงา · หลัก = พื้น navy · รอง = พื้นขาวขอบ navy */
.lp .btn{--btn-bg:#fff;--btn-fg:var(--navy);--btn-bd:var(--navy);border-radius:0;box-shadow:none;border-width:1px;font-weight:500}
.lp .btn:hover{transform:none;box-shadow:none;--btn-bg:var(--tint)}
.lp .btn:active{transform:none}
.lp .btn-primary{--btn-bg:var(--navy);--btn-fg:#fff;--btn-bd:var(--navy)}
.lp .btn-primary:hover{--btn-bg:var(--navy2);--btn-bd:var(--navy2)}
.lp .btn-light,.lp .btn-ghost,.lp .btn-soft,.lp .btn-outline{--btn-bg:#fff;--btn-fg:var(--navy);--btn-bd:var(--navy)}
.lp .btn-light:hover,.lp .btn-ghost:hover,.lp .btn-soft:hover,.lp .btn-outline:hover{--btn-bg:var(--tint);--btn-fg:var(--navy)}
.lp .btn-success{--btn-bg:var(--success);--btn-fg:#fff;--btn-bd:var(--success)}
.lp .btn-success:hover{--btn-bg:var(--success);--btn-fg:#fff}
.lp .btn-danger{--btn-bg:var(--danger);--btn-fg:#fff;--btn-bd:var(--danger)}
.lp .btn-danger:hover{--btn-bg:var(--danger);--btn-fg:#fff}
.lp .btn-danger-soft{--btn-bg:#fff;--btn-fg:var(--danger);--btn-bd:var(--danger)}
.lp .btn-danger-soft:hover{--btn-bg:var(--danger-50);--btn-fg:var(--danger)}
.lp .btn-icon{border-radius:0}
/* ตัวดูสไลด์ไม่แตะ (CLAUDE.md ข้อ 2): .lp .btn* ทับปุ่มในตัวดู (specificity เท่าและโหลดทีหลัง) → คืนค่าเดิมจาก style.css:609-610 / .btn / .btn-light / .btn-sm
   ปุ่มแถบควบคุม #prev #next #fs */
.lp .deck-bar .btn-icon{--btn-bg:rgba(255,255,255,.08);--btn-fg:#fff;--btn-bd:transparent;border-radius:12px;border-width:1.5px;font-weight:600}
.lp .deck-bar .btn-icon:hover{--btn-bg:rgba(255,255,255,.16);--btn-fg:#fff;transform:translateY(-1px)}
.lp .deck-bar .btn-icon:active{transform:translateY(0) scale(.98)}
/* ปุ่มลิงก์รายหน้า (โหมด pages ใต้เวที) */
.lp .page-links .btn{--btn-bg:#fff;--btn-fg:var(--text);--btn-bd:var(--border);border-radius:10px;border-width:1.5px;font-weight:600}
.lp .page-links .btn:hover{--btn-bg:#fff;--btn-fg:var(--text);--btn-bd:var(--border-strong);box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.lp .page-links .btn:active{transform:translateY(0) scale(.98)}

/* ช่องพิมพ์: เส้นใต้ 1px ไม่มีกรอบ */
.lp .input,.lp .textarea,.lp .select{border:0;border-bottom:1px solid var(--ink);border-radius:0;background-color:transparent;padding:10px 0;box-shadow:none}
.lp .input:hover,.lp .textarea:hover,.lp .select:hover{border-bottom-color:var(--navy)}
.lp .input:focus,.lp .textarea:focus,.lp .select:focus{border-bottom-color:var(--navy2);box-shadow:0 1px 0 var(--navy2);background-color:var(--tint);outline:0}
.lp .textarea{min-height:96px}
.lp .select{padding-right:26px;background-position:right 2px center}
.lp .input-icon .input{padding-left:42px}

/* การ์ด: ไม่มีมุมโค้ง ไม่มีเงา */
.lp .card{background:#fff;border:1px solid var(--rule);border-radius:0;box-shadow:none}
.lp .card-hover:hover{transform:none;box-shadow:none;border-color:var(--navy)}

/* ===== แท็บแบบทดสอบ ===== */
.lp .lp-sub{color:var(--muted);font-size:14.5px;margin:0}
/* กว้างเท่าหัวบท (แถบน้ำเงินเต็มความกว้าง) · เนื้อหาชิดซ้ายและจำกัดความกว้างเพื่อให้อ่านง่าย */
.lp .quiz-wrap{max-width:none;margin:0}
.lp .quiz-wrap>:not(.lp-stepbar){max-width:820px}
.lp .quiz-intro,.lp .quiz-result,.lp .quiz-review-head{padding:28px 0 0}
/* หน้าเริ่ม: ชิดซ้าย ไม่มีกล่อง */
.lp .quiz-intro{text-align:left}
.lp .quiz-intro .lp-stats{margin:18px 0 22px}
.lp .quiz-best{display:flex;align-items:center;gap:18px;margin:0 0 22px;padding:16px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.lp .quiz-best .btn{padding-left:0;border-color:transparent}
.lp .quiz-locked{border-radius:0;font-size:14px;padding:8px 16px}
.lp .quiz-intro .help{margin-top:14px}
/* วงกลมคะแนนเส้นบาง */
.lp .ring-wrap .ring-label b{font-family:'Outfit',sans-serif;font-weight:500;color:var(--navy)}
.lp .ring-fg{stroke-linecap:butt}
/* ตอนทำ: แถบน้ำเงินติดด้านบน (โครงจาก .lp-stepbar) */
.lp .lp-stepbar .timer{order:2;flex:0 0 auto;gap:8px;padding:0 0 0 14px;border:0;border-left:1px solid rgba(255,255,255,.25);border-radius:0;background:transparent;color:#fff;font:500 15px 'Outfit',sans-serif;font-variant-numeric:tabular-nums}
.lp .lp-stepbar .timer.low{padding:2px 10px;border:1px solid var(--danger);background:var(--danger);color:#fff}
.lp .q-dot{flex:0 0 auto;width:28px;height:28px;padding:0;border:1px solid rgba(255,255,255,.35);border-radius:0;background:transparent;color:#AFC0E6;font:500 13px 'Outfit',sans-serif;transition:none}
.lp .q-dot:hover{border-color:#fff;color:#fff}
.lp .q-dot:focus-visible{outline:2px solid var(--sky);outline-offset:2px;border-radius:0}
.lp .q-dot.current{background:transparent;border:2px solid var(--sky);color:#fff;transform:none}
.lp .q-dot.answered,.lp .q-dot.current.answered{background:#fff;border-color:#fff;color:var(--navy)}
.lp .q-dot.current.answered{border:2px solid var(--sky)}
.lp .q-dot.correct,.lp .q-dot.current.correct{background:var(--success);border-color:var(--success);color:#fff}
.lp .q-dot.wrong,.lp .q-dot.current.wrong{background:var(--danger);border-color:var(--danger);color:#fff}
.lp .q-dot.current.correct,.lp .q-dot.current.wrong{border:2px solid var(--sky)}
.lp .q-card.card{padding:0;border:0;background:transparent}
.lp .q-label{margin:22px 0 0;font:400 13px 'Outfit','Noto Sans Thai',sans-serif;letter-spacing:.16em;color:var(--navy2)}
.lp .q-text{margin:6px 0 16px;font:700 22px/1.45 'Noto Sans Thai',sans-serif;overflow-wrap:anywhere}
.lp .q-img{border-radius:0;background:var(--tint)}
.lp .choices{gap:0}
.lp .choice{padding:13px 14px;border:1px solid var(--rule);border-radius:0;background:#fff;box-shadow:none;font-size:15.5px;transform:none;transition:none}
.lp .choice:not(:first-child){margin-top:-1px}
.lp .choice:focus-visible{border-radius:0;outline-offset:-3px}
.lp .choice:hover{border-color:var(--rule);background:var(--tint);transform:none}
.lp .choice .key{width:28px;height:28px;border:1px solid var(--rule);border-radius:0;background:#fff;color:var(--muted);font:500 13px 'Outfit',sans-serif;transition:none;transform:none}
.lp .choice.selected,.lp .choice.correct,.lp .choice.wrong{position:relative;z-index:1}
.lp .choice.selected{border-color:var(--navy);background:var(--tint);box-shadow:none}
.lp .choice.selected .key{background:var(--navy);border-color:var(--navy);color:#fff;transform:none}
.lp .choice.correct{border-color:var(--success);background:var(--success-50)}
.lp .choice.correct .key{background:var(--success);border-color:var(--success);color:#fff}
.lp .choice.wrong{border-color:var(--danger);background:var(--danger-50)}
.lp .choice.wrong .key{background:var(--danger);border-color:var(--danger);color:#fff}
.lp .tf-choices .choice{padding:20px 14px;font-size:17px}
.lp .tf-choices .choice .key{width:40px;height:40px;font-size:18px;border-radius:0}
.lp .tf-choices .choice:not(:first-child){margin-top:0;margin-left:-1px}
.lp .explain{border-radius:0}
.lp .q-nav{margin-top:18px}
/* หน้าผล: วงกลมซ้าย ข้อความขวา */
.lp .quiz-result .hb{margin:0 0 18px}
.lp .quiz-ringrow{display:grid;grid-template-columns:auto minmax(0,1fr);gap:30px;align-items:center;margin-top:12px}
.lp .quiz-msg{font:800 26px/1.3 'Noto Sans Thai',sans-serif;color:var(--ink);margin:0 0 4px;overflow-wrap:anywhere}
.lp .quiz-ringrow .lp-chip{margin-top:10px}
.lp .quiz-result .lp-stats{margin-top:22px;padding-top:12px;border-top:1px solid var(--ink)}
.lp .quiz-result .ws-done{margin:22px 0 0;border-radius:0}
.lp .quiz-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
/* หน้าเฉลย */
.lp .quiz-review-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:16px}
.lp .quiz-review-head .lp-h2{margin-bottom:0}
.lp .review-item{padding:18px 20px;border:1px solid var(--rule);border-radius:0;background:#fff;margin-bottom:-1px}
.lp .review-item.ok{border-left:3px solid var(--success)}
.lp .review-item.no{border-left:3px solid var(--danger)}
.lp .review-item h4{align-items:flex-start;font-size:16px}
.lp .review-num{flex:0 0 auto;width:28px;height:28px;display:grid;place-items:center;font:500 13px 'Outfit',sans-serif;color:#fff;background:var(--danger)}
.lp .review-item.ok .review-num{background:var(--success)}

/* ===== แท็บใบงาน ===== */
.lp .ws-wrap{max-width:none;margin:0}
.lp .ws-wrap>:not(.lp-stepbar){max-width:820px}
.lp .ws-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.lp .ws-head-main{min-width:0;flex:1 1 auto}
.lp .ws-head .lp-chip{flex:0 0 auto;margin-bottom:6px}
.lp .ws-head .lp-sub{overflow-wrap:anywhere}
/* แถบน้ำเงิน: ข้อความ "บันทึกร่างแล้ว" ต่อจาก "ตอบแล้ว x/y" · ยังว่าง = ไม่กินที่ */
.lp .lp-step-saved{flex:0 0 auto;font-size:12px;color:#AFC0E6;white-space:nowrap}
.lp .lp-step-saved:empty{display:none}
.lp .ws-wrap>.lp-stepbar{margin-top:18px}
/* ข้อคำถาม: ไม่มีการ์ด คั่นด้วยเส้นบาง · ข้อแรกไม่มีเส้นบน */
.lp .ws-item{padding:20px 0;margin:0;border-top:1px solid var(--rule);transition:none}
.lp .ws-item:first-child{border-top:0}
.lp .ws-item:focus-within{border-color:var(--rule);box-shadow:none}
.lp .ws-q{gap:12px;margin-bottom:12px}
.lp .ws-num{flex:0 0 34px;width:34px;height:auto;border-radius:0;display:block;background:none;color:var(--muted);font:400 22px/1.3 'Outfit',sans-serif;transition:none}
.lp .ws-item.answered .ws-num{background:none;color:var(--navy)}
.lp .ws-item.missing .ws-num{color:var(--danger)}
.lp .ws-item.missing{border-top-color:var(--danger)}
.lp .ws-q-text{font-weight:700;font-size:16.5px;padding-top:2px;min-width:0;overflow-wrap:anywhere}
.lp .ws-q-text small{font-weight:400;color:var(--muted)}
.lp .ws-points{flex:0 0 auto;padding-top:4px;color:var(--muted)}
.lp .ws-points .badge{border-radius:0;border:1px solid currentColor;background:#fff;font-weight:500}
.lp .ws-body{padding-left:46px}
.lp .charcount{color:var(--muted)}
/* เลือกตอบ: แถวเส้นบางต่อกัน */
.lp .opt-list{gap:0}
.lp .opt{padding:12px 14px;border:1px solid var(--rule);border-radius:0;background:#fff;transition:none}
.lp .opt:not(:first-child){margin-top:-1px}
.lp .opt:hover{border-color:var(--rule);background:var(--tint)}
.lp .opt:has(input:checked){position:relative;z-index:1;border-color:var(--navy);background:var(--tint)}
.lp .opt:has(input:focus-visible){outline:2px solid var(--navy2);outline-offset:-2px}
.lp .opt .tick{width:20px;height:20px;border:1px solid var(--muted);transition:none}
.lp .opt.checkbox .tick{border-radius:0}
.lp .opt:has(input:checked) .tick{background:var(--navy);border-color:var(--navy);color:#fff}
/* เติมคำ */
.lp .fill-text input{border:0;border-bottom:1px solid var(--ink);border-radius:0;background:transparent;color:var(--navy);font-weight:500;padding:2px 6px;transition:none}
.lp .fill-text input:focus{border-bottom-color:var(--navy2);box-shadow:0 1px 0 var(--navy2);background:var(--tint);outline:0}
/* จับคู่ */
.lp .match-left{padding:10px 14px;border-radius:0;border:1px solid var(--rule);background:var(--tint)}
/* เรียงลำดับ */
.lp .sortable-list{gap:0}
.lp .sort-item{padding:10px 14px;border:1px solid var(--rule);border-radius:0;background:#fff;transition:none}
.lp .sort-item:not(:first-child){margin-top:-1px}
.lp .sort-item .pos{width:26px;height:26px;border-radius:0;border:1px solid var(--rule);background:#fff;color:var(--navy);font:500 13px 'Outfit',sans-serif}
.lp .sort-item .sort-btns .btn{border-color:transparent}
.lp .sort-chosen{border-color:var(--navy);box-shadow:none;position:relative;z-index:1}
/* มาตราส่วน: ช่องตัวเลขต่อกัน ป้ายสองข้างอยู่ใต้แถว */
.lp .scale{gap:0;flex-wrap:nowrap;max-width:360px}
.lp .scale:has(small){margin-bottom:26px}
.lp .scale label{min-width:0}
.lp .scale label:not(:first-child) span{border-left-width:0}
.lp .scale span{position:relative;padding:9px 0;border:1px solid var(--rule);border-radius:0;font:500 16px 'Outfit',sans-serif;transition:none}
.lp .scale span small{position:absolute;top:100%;left:0;margin-top:5px;font-size:12px;line-height:1.3;white-space:nowrap;text-align:left}
.lp .scale label:last-child span small{left:auto;right:0;text-align:right}
.lp .scale label:hover span{border-color:var(--rule);background:var(--tint)}
.lp .scale input:checked + span{background:var(--navy);border-color:var(--navy);color:#fff;transform:none;box-shadow:none}
.lp .scale input:checked + span small{color:var(--muted)}
.lp .scale input:focus-visible + span{outline:2px solid var(--navy2);outline-offset:1px}
/* ท้ายฟอร์ม */
.lp .ws-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-top:6px;padding:18px 0 0;border-top:1px solid var(--ink)}
.lp .ws-foot .row{flex-wrap:wrap}
/* ส่งแล้ว / อ่านอย่างเดียว */
.lp .ws-sub{max-width:820px;margin:0;padding:0}
.lp .ws-sub .ws-done,.lp .ws-wrap .ws-done{border-radius:0}
.lp .ws-sub>.ws-done{background:var(--tint);border:1px solid var(--rule);border-left:3px solid var(--success)}
.lp .ws-sub .work-score b{font:500 26px/1.1 'Outfit',sans-serif}
.lp .ws-sub .badge{border-radius:0;border:1px solid currentColor;background:#fff;font-weight:500}
.lp .ws-sub .feedback-box{border-radius:0;background:var(--tint);border-left:3px solid var(--navy2)}
.lp .ws-sub .feedback-box b{color:var(--navy)}
.lp .ws-sub .ws-wrap>form>fieldset>.ws-item:first-child{border-top:1px solid var(--rule)}

/* ===== แท็บส่งงาน ===== */
.lp .as-wrap{max-width:820px;margin:0;padding:0}
.lp .as-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding-bottom:14px;border-bottom:1px solid var(--ink)}
.lp .as-head-main{min-width:0;flex:1 1 auto}
.lp .as-head .lp-chip{flex:0 0 auto;margin-bottom:6px}
.lp .as-head .lp-sub{overflow-wrap:anywhere}
.lp .as-wrap .text-primary{color:var(--navy2)}
.lp .as-wrap .due{border-radius:0;background:#fff;border:1px solid currentColor;font-weight:500;font-size:13.5px;padding:5px 12px}
.lp .as-wrap .ws-done{border-radius:0}
.lp .as-wrap>.ws-done.as-done{background:var(--tint);border:1px solid var(--rule);border-left:3px solid var(--success)}
.lp .as-wrap .work-score b{font:500 26px/1.1 'Outfit',sans-serif}
.lp .as-wrap .work-score small{font-size:13px}
.lp .as-wrap .badge{border-radius:0;border:1px solid currentColor;background:#fff;font-weight:500}
.lp .as-wrap .feedback-box{border-radius:0;background:var(--tint);border-left:3px solid var(--navy2)}
.lp .as-wrap .feedback-box b{color:var(--navy)}
/* ฟอร์ม: ไม่มีการ์ด */
.lp .as-form{margin-top:6px}
.lp .as-form .field{gap:0;margin-bottom:0;padding-top:16px}
.lp .as-form .label{font-size:13.5px;margin-bottom:6px}
.lp .as-form .help{margin-top:6px}
.lp .dropzone{border:1px dashed #9AA3B2;border-radius:0;background:var(--tint);padding:26px;transition:none}
.lp .dropzone:hover,.lp .dropzone.drag{border-color:var(--navy2);background:var(--tint)}
.lp .dropzone.drag{transform:none}
.lp .dropzone .dz-ico{width:auto;height:auto;margin:0 auto 8px;border-radius:0;background:none;box-shadow:none;font-size:24px;color:var(--navy2);transition:none}
.lp .dropzone:hover .dz-ico,.lp .dropzone.drag .dz-ico{transform:none}
.lp .dropzone b{font-size:14.5px;font-weight:500}
.lp .dropzone small{font-size:12.5px;margin-top:4px}
.lp .file-list{gap:0;margin-top:12px}
.lp .file-row{border-radius:0;border:0;border-top:1px solid var(--rule);padding:10px 0;background:transparent;animation:none}
.lp .file-row:first-child{border-top:1px solid var(--ink)}
.lp .file-ico{border-radius:0;background:var(--tint);color:var(--navy2)}
.lp .file-meta .progress{border-radius:0;height:4px}
.lp .file-meta .progress>span{background:var(--navy2);border-radius:0}
.lp .as-form .btn-lg{padding:12px 22px;font-size:15px}
.lp .as-form>.row{margin-top:28px;padding-top:18px;border-top:1px solid var(--ink)}
/* ประวัติการส่ง */
.lp .as-hist{margin-top:8px;border-top:1px solid var(--ink)}
.lp .as-hist-h{font:600 16px/1.4 'Noto Sans Thai',sans-serif;margin:14px 0 4px;display:flex;align-items:center;gap:8px;color:var(--ink)}
.lp .as-hist-h i{color:var(--navy2)}
.lp .as-hist .history-item{border-top:1px solid var(--rule);padding:14px 0;min-width:0}
.lp .as-hist .history-item:first-of-type{border-top:0}
.lp .as-hico{width:36px;height:36px;display:grid;place-items:center;flex:0 0 36px;background:var(--tint);color:var(--navy2);font-size:14px}
.lp .as-hist .history-item a{overflow-wrap:anywhere}

/* ===== แท็บสไลด์: เฉพาะสิ่งรอบตัวดู (ตัวดู .deck/.thumb/.page-clip ไม่แตะ) ===== */
.lp .embed-frame{border-radius:0;box-shadow:none}

/* ===== กล่องแจ้ง "เข้าสู่ระบบก่อน…" (loginNotice; ครูเปิดดูบทเรียนจะเห็น) ===== */
.lp .login-notice{border-radius:0;margin:14px 0 0;padding:14px 18px;background:var(--tint);border:1px solid var(--rule);border-left:3px solid var(--navy2)}
.lp .login-notice>i{font-size:20px;color:var(--navy2)}

/* ===== หน้าว่าง / ไม่พบ / ล็อก (app.js viewLesson ห่อด้วย .lp) ===== */
.lp.section{padding:24px 24px 72px}   /* .section (style.css) ทับ padding ข้างของ .container */
.lp .empty{padding:64px 24px;border:1px solid var(--rule);border-top:1px solid var(--ink)}
.lp .empty-ico{width:auto;height:auto;margin:0 auto 14px;border-radius:0;background:none;font-size:32px;color:var(--navy2)}
.lp .empty h3{font:800 24px/1.3 'Noto Sans Thai',sans-serif;color:var(--ink);margin-bottom:8px;overflow-wrap:anywhere}
.lp .empty p{max-width:520px;margin:0 auto;font-size:15px;overflow-wrap:anywhere}
.lp .empty .mt-3{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}

/* ===== มือถือ ===== */
@media (max-width:640px){
  .lp{padding-top:0}
  /* เต็มขอบจอเหมือนภาพจำลองมือถือ: ติดลบเท่าระยะขอบของ .container (16px) */
  .lp .lp-head,.lp .lp-tabs,.lp .lp-stepbar{margin-inline:-16px}
  .lp .lp-tabs{border-inline-width:0}
  .lp .lp-head{padding:20px 16px 18px;gap:14px}
  .lp .lp-crumb{font-size:12px;margin-bottom:12px}
  .lp .lp-unit-name{display:none}
  .lp .lp-title{font-size:28px;margin:8px 0 4px}
  .lp .lp-desc{font-size:14px}
  .lp .lp-done{padding-left:14px}
  .lp .lp-done-num{font-size:52px}
  .lp .lp-done-num small{font-size:22px}
  .lp .lp-tabs{display:flex;overflow-x:auto;scrollbar-width:none}
  .lp .lp-tabs::-webkit-scrollbar{display:none}
  .lp .lp-tab{flex:0 0 auto;padding:12px 16px;font-size:14px}
  .lp .lp-h2{font-size:22px}
  .lp .lp-stats>div{padding:0 16px}
  .lp .q-text{font-size:18px}
  .lp .quiz-ringrow{grid-template-columns:1fr;justify-items:start;gap:16px}
  .lp .quiz-msg{font-size:22px}
  .lp .quiz-acts .btn{flex:1 1 auto}
  /* 4 ช่อง (หน้าเริ่ม/หน้าผล) กว้างเกินจอ: จัดเป็น 2 คอลัมน์ เส้นคั่นเฉพาะระหว่างคอลัมน์ ไม่มีเส้นนำหน้าแถว */
  .lp .lp-stats:has(>div:nth-child(4)){display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .lp .lp-stats:has(>div:nth-child(4))>div:nth-child(odd){padding-left:0;border-left:0}
  .lp .review-item{padding:16px}
  .lp .ws-head{flex-wrap:wrap;gap:6px}
  .lp .as-head{flex-wrap:wrap;gap:6px}
  .lp .as-form>.row .btn-lg{flex:1 1 auto}
  .lp .ws-item{padding:18px 0}
  .lp .ws-body{padding-left:0}
  .lp .ws-q{gap:10px}
  .lp .ws-num{flex-basis:30px;width:30px}
  .lp .ws-foot .row{width:100%}
  .lp .ws-foot .btn-lg{flex:1 1 auto}
  .lp .lp-step-saved .fa-check{display:none}
  .lp .empty{padding:44px 16px}
  .lp .empty h3{font-size:21px}
}

@media (prefers-reduced-motion:reduce){
  .lp .btn{transition:none}
  .lp .lp-stepbar .timer.low,.lp .choice.wrong{animation:none}
}

/* ครูส่งกลับให้แก้ไข (status 'revise' · ครูสั่ง 20 ต.ค. 2569) — กล่องแดงในแท็บแบบทดสอบ/ใบงาน/ส่งงาน */
.lp .lp-rev{margin:14px 0;padding:12px 16px;border:1.5px solid #B42318;border-left-width:4px;background:#FEF3F2;color:#B42318;text-align:left}
.lp .lp-rev b{display:block;font-size:15px}
.lp .lp-rev p{margin:4px 0 0;color:#7A271A;font-size:14.5px;line-height:1.6;overflow-wrap:anywhere}
.lp .lp-rev small{display:block;margin-top:6px;font-size:12.5px;color:#B42318}

/* ตารางคะแนน (Task 10): ครูบันทึกคะแนนนอกเว็บ · "คิดเป็น x/N คะแนน" · ส่งแล้วแบบไม่มีตัวเลข (โหมดแค่สถานะ/ซ่อน) */
.lp .lp-offline{margin:14px 0;padding:14px 16px;border:1px solid var(--rule);border-left:3px solid var(--navy);background:var(--tint);text-align:left}
.lp .lp-offline b{display:block;font-size:15px;color:var(--navy)}
.lp .lp-offline-num{margin-top:4px;font:500 28px/1.2 'Outfit',sans-serif;color:var(--navy);font-variant-numeric:tabular-nums}
.lp .lp-offline small{display:block;margin-top:4px;font-size:13px;color:var(--muted)}
.lp .lp-counted{margin:2px 0;font:500 15px 'Outfit','Noto Sans Thai',sans-serif;color:var(--navy)}
.lp .quiz-ringcol{display:flex;flex-direction:column;align-items:center;gap:8px}
.lp .quiz-intro .quiz-sent{margin:0 0 22px;border-radius:0;background:var(--tint);border:1px solid var(--rule);border-left:3px solid var(--success)}

/* เปิดงานรายห้อง: แถบบางกำหนดส่ง/ปิดรับของห้อง บนสุดของแท็บงาน (lesson-ui.js workDueHtml) · กล่องล็อกใช้ .empty เดิม */
.lp .wk-due{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 14px;padding:8px 14px;border:1px solid var(--rule);border-left:3px solid var(--sky);background:var(--tint);font-size:13.5px;color:var(--navy);overflow-wrap:anywhere}
.lp .wk-due span{min-width:0}
.lp .wk-due .wk-late{padding:1px 8px;border:1px solid #B42318;background:#FEF3F2;color:#B42318;font-size:12.5px;font-weight:600;white-space:nowrap}

/* ปุ่มเลขข้อบนมือถือ: นิ้วกดง่ายขึ้น (≥ 40px) · แถวเลขเลื่อนแนวนอนได้ ไม่ขึ้นบรรทัดใหม่ (ครูอนุมัติ 21 ต.ค. 2569) */
@media (max-width:900px){
  .lp .q-dot{width:40px;height:40px;font-size:15px}
  .lp .lp-step-nums{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px}
}

/* ตัวอย่างงานจากครูในแท็บส่งงาน (assignment.js examplesHtml) — รูปย่อ 3 ช่อง กดเปิดตัวดูเต็มจอ */
.lp .as-ex{margin-top:14px}
.lp .as-ex-h{font-size:13px;color:var(--muted);margin-bottom:8px;display:flex;gap:6px;align-items:center}
.lp .as-ex-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:560px}
.lp .as-ex-item{display:flex;flex-direction:column;gap:6px;padding:0;background:none;border:0;text-align:left;cursor:pointer;color:inherit;font:inherit;min-width:0}
.lp .as-ex-img{position:relative;display:block;aspect-ratio:4/3;border:1px solid var(--rule);background:var(--tint);overflow:hidden}
.lp .as-ex-img img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:transform .25s}
.lp .as-ex-item:hover .as-ex-img img{transform:scale(1.04)}
.lp .as-ex-item:focus-visible .as-ex-img{outline:2px solid var(--navy);outline-offset:2px}
.lp .as-ex-img i{position:absolute;left:0;bottom:0;font:600 11px 'Noto Sans Thai',sans-serif;font-style:normal;background:var(--navy);color:#fff;padding:3px 7px}
.lp .as-ex-cap{font-size:13px;line-height:1.35;color:var(--ink);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
@media (max-width:480px){.lp .as-ex-list{gap:8px}.lp .as-ex-cap{font-size:12px}}