/* หน้าครูแนว A (แบบ 2: หัวน้ำเงินเต็มจอ + เมนูซ้ายเส้นบาง) — เอกสารออกแบบ docs/superpowers/specs/2026-10-20-teacher-pages-a-design.md
   กฎหน้าอยู่ใต้ .tp (กล่องนอกสุดที่ teacher.js สร้าง) · ลิ้นชัก/โมดัลอยู่ใต้ body.tp-on (app.js เปิดเฉพาะ path /teacher…)
   โหลดหลัง teacher.css/krusun.css/lesson.css จึงทับกฎเดิมได้โดยไม่ต้องแก้ teacher.css (อีก session ดูแลส่วน .sg-*)
   ห้ามใส่ .kr ให้หน้าครู (.kr .card ล้างกรอบการ์ดทั้งหมด) · โทเคนสีมาจาก krusun.css :root */

/* ===== หัวพื้นน้ำเงิน ===== */
.tp-head{background:var(--navy);color:#fff}
.tp-head-in{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;padding-top:26px;padding-bottom:24px}
.tp-head-main{min-width:0}
.tp-crumb{font-size:13px;color:#AFC0E6;margin-bottom:12px;overflow-wrap:anywhere}
.tp-crumb a{color:#AFC0E6}
.tp-crumb a:hover{color:#fff}
.tp-crumb b{color:#fff;font-weight:600}
.tp-eb{display:flex;align-items:center;gap:12px;font:500 12px 'Outfit',sans-serif;letter-spacing:.2em;color:var(--sky);white-space:nowrap}
.tp-eb:after{content:"";flex:0 0 46px;height:1px;background:var(--sky)}
.tp-title{font:800 36px/1.2 'Noto Sans Thai',sans-serif;color:#fff;margin:8px 0 4px;overflow-wrap:anywhere}
.tp-who{color:#C9D4EE;font-size:14.5px;overflow-wrap:anywhere}
.tp-pend{flex:0 0 auto;text-align:right;border-left:1px solid rgba(255,255,255,.18);padding-left:28px;color:#fff}
.tp-pend small{display:block;font-size:13px;color:#AFC0E6}
.tp-pend b{display:block;font:500 60px/1 'Outfit',sans-serif;letter-spacing:-.03em;color:#fff}
.tp-pend:hover{color:#fff}
.tp-pend:hover small{color:#fff}
.tp-head a:focus-visible{outline:2px solid var(--sky);outline-offset:3px}

/* ===== เมนูซ้ายเส้นบาง ===== */
.tp .t-layout{grid-template-columns:220px minmax(0,1fr);gap:32px;padding:0 0 64px}
.tp .t-side{background:none;border:0;border-right:1px solid var(--rule);border-radius:0;box-shadow:none;padding:22px 0 18px;top:var(--nav-h);align-self:start}
.tp .t-side .t-side-label{font:500 11.5px 'Noto Sans Thai',sans-serif;letter-spacing:.04em;color:var(--muted);text-transform:none;padding:14px 18px 6px}
.tp .t-side .t-side-label:first-child{padding-top:0}
.tp .t-side a{border-radius:0;padding:9px 18px;color:var(--muted);font-weight:400;font-size:15px;gap:10px}
.tp .t-side a i{color:var(--navy2);font-size:13px;opacity:.7}
.tp .t-side a:hover{background:var(--tint);color:var(--ink)}
.tp .t-side a.active{background:var(--tint);color:var(--ink);font-weight:700;box-shadow:inset 3px 0 0 var(--navy)}
.tp .t-side a.active i{opacity:1}
.tp .t-side .t-count{border-radius:0;background:var(--navy);color:#fff;font:600 11.5px 'Outfit',sans-serif;min-width:20px;height:20px;padding:0 5px}
.tp .t-side a.active .t-count{background:var(--navy);color:#fff}
.tp .t-side-user{margin-top:14px;padding:14px 18px 8px;border-top:1px solid var(--rule)}
.tp .t-side-user .avatar{display:none}
.tp .t-side a[data-signout]:hover{background:none;color:var(--danger)}
.tp .t-side a[data-signout]:hover i{color:var(--danger)}
.tp .t-content{padding-top:26px}

/* ===== แถบเครื่องมือ (หัวเดิมของแต่ละแท็บ ชื่อย้ายไปหัวน้ำเงินแล้ว) ===== */
.tp .page-head{padding:0 0 14px;margin-bottom:22px;border-bottom:1px solid var(--rule)}
.tp .page-head .crumbs,.tp .page-head h1{display:none}
.tp .page-head-row{align-items:center}
.tp .page-head p{margin:0;color:var(--muted);font-size:14px}
.tp .page-head:not(:has(p, .row)){display:none}

/* ===== ส่วนมีหัว = "01 — ชื่อส่วน" ไม่มีกรอบ · นับใหม่ทุกแท็บ ===== */
.tp #t-content{counter-reset:tsec}
.tp .card:has(> .card-head){background:none;border:0;border-radius:0;box-shadow:none;padding-left:0;padding-right:0;padding-top:0}
.tp .card-head{border-bottom:1px solid var(--ink);padding:0 0 9px;margin-bottom:16px;border-radius:0}
.tp .card-head h3{font:700 17px 'Noto Sans Thai',sans-serif;color:var(--ink);gap:12px}
.tp .card-head h3>i,.tp .card-head h3>.fa-solid{display:none}
.tp .card-head h3::before{counter-increment:tsec;content:counter(tsec,decimal-leading-zero) " —";font:500 13px 'Outfit',sans-serif;letter-spacing:.06em;color:var(--navy2);flex:0 0 auto}
.tp .t-panel{overflow:visible}
.tp .t-panel-head{padding:0 0 9px}
.tp .t-panel-body{padding:4px 0 0}

/* ===== กล่องอื่น: เส้นบาง มุมเหลี่ยม ไม่มีเงา ===== */
.tp .card,.tp-on .drawer .card,.tp-on .modal .card{border:1px solid var(--rule);border-radius:0;box-shadow:none}
.tp .card-hover:hover{transform:none;box-shadow:none;border-color:var(--navy)}

/* ===== ปุ่ม (ชุดเดียวกับ .lp .btn ใน lesson.css) ===== */
:is(.tp,.tp-on .drawer,.tp-on .modal) .btn{--btn-bg:#fff;--btn-fg:var(--navy);--btn-bd:var(--navy);border-radius:0;box-shadow:none;border-width:1px;font-weight:500}
:is(.tp,.tp-on .drawer,.tp-on .modal) .btn:hover{transform:none;box-shadow:none;--btn-bg:var(--tint)}
:is(.tp,.tp-on .drawer,.tp-on .modal) .btn:active{transform:none}
:is(.tp,.tp-on .drawer,.tp-on .modal) .btn-primary{--btn-bg:var(--navy);--btn-fg:#fff;--btn-bd:var(--navy)}
:is(.tp,.tp-on .drawer,.tp-on .modal) .btn-primary:hover{--btn-bg:var(--navy2);--btn-bd:var(--navy2)}
:is(.tp,.tp-on .drawer,.tp-on .modal) :is(.btn-light,.btn-soft,.btn-outline){--btn-bg:#fff;--btn-fg:var(--navy);--btn-bd:var(--navy)}
:is(.tp,.tp-on .drawer,.tp-on .modal) :is(.btn-light,.btn-soft,.btn-outline):hover{--btn-bg:var(--tint);--btn-fg:var(--navy)}
/* ปุ่มเบา (ghost) ไม่มีกรอบ — ใช้เป็นปุ่มไอคอน/ปุ่มรองในแถว */
:is(.tp,.tp-on .drawer,.tp-on .modal) .btn-ghost{--btn-bg:transparent;--btn-fg:var(--navy);--btn-bd:transparent}
:is(.tp,.tp-on .drawer,.tp-on .modal) .btn-ghost:hover{--btn-bg:var(--tint);--btn-fg:var(--navy)}
:is(.tp,.tp-on .drawer,.tp-on .modal) .btn-success{--btn-bg:var(--success);--btn-fg:#fff;--btn-bd:var(--success)}
:is(.tp,.tp-on .drawer,.tp-on .modal) .btn-success:hover{--btn-bg:var(--success);--btn-fg:#fff}
:is(.tp,.tp-on .drawer,.tp-on .modal) .btn-danger{--btn-bg:var(--danger);--btn-fg:#fff;--btn-bd:var(--danger)}
:is(.tp,.tp-on .drawer,.tp-on .modal) .btn-danger:hover{--btn-bg:var(--danger);--btn-fg:#fff}
:is(.tp,.tp-on .drawer,.tp-on .modal) .btn-danger-soft{--btn-bg:#fff;--btn-fg:var(--danger);--btn-bd:var(--danger)}
:is(.tp,.tp-on .drawer,.tp-on .modal) .btn-danger-soft:hover{--btn-bg:var(--danger-50);--btn-fg:var(--danger)}
:is(.tp,.tp-on .drawer,.tp-on .modal) .t-danger:hover{--btn-fg:var(--danger);--btn-bg:var(--danger-50)}
:is(.tp,.tp-on .drawer,.tp-on .modal) .btn-icon{border-radius:0}

/* ===== ช่องกรอก ชิป ป้าย ===== */
:is(.tp,.tp-on .drawer,.tp-on .modal) :is(.input,.select,.textarea){border-radius:0;border:1px solid var(--rule);box-shadow:none}
:is(.tp,.tp-on .drawer,.tp-on .modal) :is(.input,.select,.textarea):hover{border-color:#B7BFCD}
:is(.tp,.tp-on .drawer,.tp-on .modal) :is(.input,.select,.textarea):focus{border-color:var(--navy);box-shadow:0 0 0 1px var(--navy)}
:is(.tp,.tp-on .drawer,.tp-on .modal) .chip{border-radius:0;border:1px solid var(--rule);background:#fff;color:var(--muted);box-shadow:none}
:is(.tp,.tp-on .drawer,.tp-on .modal) .chip:hover{border-color:var(--navy);color:var(--ink)}
:is(.tp,.tp-on .drawer,.tp-on .modal) .chip.active{background:var(--navy);border-color:var(--navy);color:#fff}
:is(.tp,.tp-on .drawer,.tp-on .modal) .badge{border-radius:0;background:#fff;border:1px solid var(--rule);color:var(--muted);font-weight:500}
:is(.tp,.tp-on .drawer,.tp-on .modal) .badge-primary{border-color:var(--navy);color:var(--navy)}
:is(.tp,.tp-on .drawer,.tp-on .modal) .badge-info{border-color:var(--navy2);color:var(--navy2)}
:is(.tp,.tp-on .drawer,.tp-on .modal) .badge-accent{border-color:#0369A1;color:#0369A1}
:is(.tp,.tp-on .drawer,.tp-on .modal) .badge-success{border-color:#15803D;color:#15803D}
:is(.tp,.tp-on .drawer,.tp-on .modal) .badge-warning{border-color:#B45309;color:#B45309}
:is(.tp,.tp-on .drawer,.tp-on .modal) .badge-danger{border-color:var(--danger);color:var(--danger)}
:is(.tp,.tp-on .drawer,.tp-on .modal) .switch input:checked + .track{background:var(--navy)}
:is(.tp,.tp-on .drawer,.tp-on .modal) .switch input:focus-visible + .track{outline-color:var(--sky)}
:is(.tp,.tp-on .drawer,.tp-on .modal) :is(.answer-block,.editor-item,.t-pre){border-radius:0}

/* ===== ตาราง แถบความคืบหน้า ===== */
.tp .table-wrap{border:0;border-radius:0;border-top:1px solid var(--ink);background:#fff}
.tp .table th{background:#fff;color:var(--muted);font-weight:500;font-size:12.5px;border-bottom:1px solid var(--ink)}
.tp .table td{border-top:1px solid var(--rule)}
.tp .table tbody tr:hover{background:var(--tint)}
:is(.tp,.tp-on .drawer) .progress{height:4px;border-radius:0;background:var(--rule)}
:is(.tp,.tp-on .drawer) .progress>span{border-radius:0;background:var(--navy)}
:is(.tp,.tp-on .drawer) .progress.success>span{background:var(--navy)}

/* ===== ไอคอนในวงกลม/สี่เหลี่ยมสี → ไอคอนเปล่า ===== */
:is(.tp,.tp-on .drawer,.tp-on .modal) :is(.work-ico,.t-lrow-ico,.t-lp-ico,.empty-ico,.stat-ico,.modal-ico){background:none;box-shadow:none;border-radius:0;color:var(--navy2)}
.tp .work-ico{width:auto;height:auto;font-size:14px}
.tp .t-lrow-ico{width:28px;height:28px;font-size:17px}
.tp .t-lrow.is-draft .t-lrow-ico{background:none;color:var(--muted)}
.tp .t-lp-ico{width:22px;height:22px;font-size:14px}
.tp .t-lp-parts{padding-left:32px}
.tp .empty-ico,.tp-on .modal .modal-ico{height:auto;font-size:28px;margin-bottom:10px}
.tp-on .modal .modal-ico.danger{background:none;color:var(--danger)}
.tp-on .modal .modal-ico.success{background:none;color:#15803D}
.tp .avatar,.tp-on .drawer .avatar{border-radius:0;background:var(--tint);color:var(--navy);box-shadow:none}
.tp .part{border-radius:0}
/* ปุ่มเลือกโหมด (สไลด์: ไม่มี/อัปโหลด/ฝังลิงก์/ในเว็บ) */
.tp .seg{border-radius:0;background:#fff;border:1px solid var(--rule);padding:0}
.tp .seg button{border-radius:0}
.tp .seg button.active{background:var(--navy);color:#fff;box-shadow:none}
.tp .card-head{align-items:flex-end;min-height:34px}
.tp .unit-num{border-radius:0;background:none;color:var(--navy2);font-family:'Outfit',sans-serif;box-shadow:none;border:1px solid var(--navy2)}

/* ===== ภาพรวม ===== */
.tp-mode{display:flex;align-items:center;gap:16px;border:1px solid var(--rule);border-left:3px solid var(--sky);padding:12px 16px;margin-bottom:24px}
.tp-mode.live{border-left-color:#15803D}
.tp-mode p{margin:2px 0 0}
.tp-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--ink);border-bottom:1px solid var(--rule);margin-bottom:34px}
.tp-stat{display:block;padding:14px 20px 12px;border-left:1px solid var(--rule);color:var(--ink)}
.tp-stat:first-child{border-left:0;padding-left:0}
.tp-stat b{display:block;font:500 42px/1.1 'Outfit',sans-serif;letter-spacing:-.02em;color:var(--navy)}
.tp-stat b small{font-size:20px;color:var(--muted);margin-left:2px}
.tp-stat small{color:var(--muted);font-size:13.5px}
a.tp-stat:hover{background:var(--tint);color:var(--ink)}
a.tp-stat:hover b{color:var(--navy2)}
.tp .t-split{gap:40px}
.tp .work-row{padding:12px 0;border-top:1px solid var(--rule);gap:12px}
.tp .work-row:first-child{border-top:0}
.tp .work-row:hover{background:var(--tint)}
.tp .t-lp{border-top:1px solid var(--rule)}

/* ===== งานอื่น ๆ ในแท็บ ===== */
.tp .t-ann{border-left:3px solid var(--rule)}
.tp .t-ann.pinned{border-left-color:var(--sky)}
.tp .t-unit{padding:20px 22px 6px}
.tp .t-savebar{border-radius:0;border:1px solid var(--rule);box-shadow:0 6px 18px rgba(11,18,32,.10)}
.tp .t-errs li{border-radius:0}

/* ===== กล่องย่อยในลิ้นชักตรวจงาน + ตัวแก้บทเรียน: มุมเหลี่ยม ไม่มีเงาเรือง ===== */
:is(.tp,.tp-on .drawer,.tp-on .modal) :is(.t-quiz-head,.t-ws-sum div,.t-ans,.t-match-l,.t-match-r,.t-thumb,.t-instr,.t-warn-note,.t-id,.t-help-box,.t-embed-empty,.t-tf-opt span,.t-fill-preview,.t-add-types,.t-off,.t-wsa-no,.t-order-pos,.t-choice-key,.t-icon-btn,.t-icon-big,.pe-note,.pe-drop,.pe-drop-ico,.pe-bar,.pe-card,.pe-thumb,.pe-items li){border-radius:0;box-shadow:none}
:is(.tp,.tp-on .drawer) .t-instr{background:var(--tint);border-left:3px solid var(--navy2)}
:is(.tp,.tp-on .drawer) .t-instr summary{color:var(--navy2)}
.tp .t-help-box{background:var(--tint);color:var(--ink);border-left:3px solid var(--navy2)}
.tp .t-icon-big{background:none;color:var(--navy);border:1px solid var(--navy)}
.tp .t-icon-btn:hover{border-color:var(--navy);color:var(--navy);background:var(--tint)}
.tp .t-icon-btn.active{background:var(--navy);border-color:var(--navy);color:#fff}
.tp .pe-card.is-cover{border-color:var(--navy);box-shadow:0 0 0 1px var(--navy)}
.tp .pe-bar span{background:var(--navy)}
.tp .pe-drop-ico{background:none;color:var(--navy2)}

/* ===== ลิ้นชัก / โมดัล (เฉพาะหน้าครู) ===== */
.tp-on .drawer,.tp-on .modal{border-radius:0;box-shadow:0 10px 30px rgba(11,18,32,.18)}
.tp-on .drawer-head{border-bottom:1px solid var(--ink)}
.tp-on .modal-head{border-bottom:1px solid var(--ink);padding-bottom:12px}
.tp-on .drawer-head h3,.tp-on .modal-head h3{font-weight:700;color:var(--ink)}
.tp-on .t-sec-title{color:var(--ink)}
.tp-on .t-sec-title i{color:var(--navy2)}

/* ===== หน้าเข้าสู่ระบบครู ===== */
.tp-login-body{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:56px;align-items:start;padding-top:40px;padding-bottom:72px}
.tp .tp-form{border:1px solid var(--rule);padding:30px 30px 24px}
.tp .tp-form h3{font:700 20px 'Noto Sans Thai',sans-serif;margin:0 0 4px}
.tp .tp-form>p{color:var(--muted);margin-bottom:22px;font-size:14px}
.tp .tp-form .input-icon>i{color:var(--muted)}
.tp-points{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink);counter-reset:tpt}
.tp-points li{display:flex;gap:16px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--rule);font-size:15.5px;color:var(--ink)}
.tp-points li::before{counter-increment:tpt;content:counter(tpt,decimal-leading-zero);font:500 13px 'Outfit',sans-serif;letter-spacing:.06em;color:var(--navy2);flex:0 0 26px}

/* ===== จอแคบ ===== */
@media (max-width:1080px){
  /* เมนูซ้ายเป็นแถบเลื่อนแนวนอน (style.css เปลี่ยนที่ 1080px อยู่แล้ว) */
  .tp .t-layout{grid-template-columns:minmax(0,1fr);gap:0}
  .tp .t-side{position:static;display:flex;overflow-x:auto;gap:0;padding:0;border-right:0;border-bottom:1px solid var(--rule);margin:0 -24px;padding:0 24px;scrollbar-width:none}
  .tp .t-side::-webkit-scrollbar{display:none}
  .tp .t-side a{padding:13px 14px;white-space:nowrap;flex:0 0 auto}
  .tp .t-side a.active{background:none;box-shadow:inset 0 -2px 0 var(--navy)}
  .tp .t-side a i{display:none}
  .tp .t-side a[data-signout] i{display:inline-block}
  .tp .t-side-user{display:none}
  .tp .t-content{padding-top:22px}
}
@media (max-width:900px){
  .tp-login-body{grid-template-columns:minmax(0,1fr);gap:32px;padding-top:28px}
}
@media (max-width:640px){
  .tp-head-in{padding-top:18px;padding-bottom:18px;gap:16px}
  .tp-crumb{display:none}
  .tp-title{font-size:26px;margin-top:6px}
  .tp-who{font-size:13px}
  .tp-pend{padding-left:14px}
  .tp-pend b{font-size:40px}
  .tp .t-side{margin:0 -16px;padding:0 16px}
  .tp-mode{flex-wrap:wrap}
  .tp-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tp-stat{padding:12px 0 12px 14px}
  .tp-stat:nth-child(odd){border-left:0;padding-left:0}
  .tp-stat:nth-child(n+3){border-top:1px solid var(--rule)}
  .tp-stat b{font-size:34px}
  .tp .t-lp-parts{padding-left:0}
  .tp .tp-form{padding:22px 18px 18px}
}

/* นำเข้ารายชื่อ — หน้าต่างยืนยัน (tp-on = หน้าครู) */
body.tp-on .ri{overflow-wrap:anywhere}
body.tp-on .ri-grades{display:grid;gap:6px}
body.tp-on .ri-grade{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--rule);cursor:pointer}
body.tp-on .ri-grade:has(input:checked){border-color:var(--navy);background:var(--tint)}
body.tp-on .ri-grade input{flex:none;width:18px;height:18px;accent-color:var(--navy)}
body.tp-on .ri-det{margin-top:10px;border:1px solid var(--rule);padding:8px 12px;font-size:14px}
body.tp-on .ri-det summary{cursor:pointer;font-weight:500}
body.tp-on .ri-list{margin:8px 0 0;padding-left:18px;max-height:160px;overflow:auto;font-size:13px}
body.tp-on .ri [hidden]{display:none}

/* รูป/ชื่อนักเรียน (กล่องสี่เหลี่ยม) + แผงประวัติ — tp = หน้าครู · tp-on .drawer = ลิ้นชัก */
:is(.tp,body.tp-on .drawer) .sp-ph{position:relative;overflow:hidden;flex:none;display:grid;place-items:center;background:var(--tint);color:var(--navy);font-weight:700;border:1px solid var(--rule)}
:is(.tp,body.tp-on .drawer) .sp-xs{width:32px;height:38px;font-size:14px}
:is(.tp,body.tp-on .drawer) .sp-sm{width:40px;height:48px;font-size:17px}
:is(.tp,body.tp-on .drawer) .sp-md{width:64px;height:76px;font-size:26px}
:is(.tp,body.tp-on .drawer) .sp-lg{width:120px;height:144px;font-size:46px}
:is(.tp,body.tp-on .drawer) .sp-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
:is(.tp,body.tp-on .drawer) .sp-cell{display:flex;gap:10px;align-items:center;min-width:0}
:is(.tp,body.tp-on .drawer) .sp-txt{min-width:0;display:flex;flex-direction:column}
:is(.tp,body.tp-on .drawer) .sp-n{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:260px}
:is(.tp,body.tp-on .drawer) .sp-id{color:var(--muted);font-family:'Outfit','Noto Sans Thai',sans-serif;white-space:nowrap}
:is(.tp,body.tp-on .drawer) [data-profile]{cursor:pointer}
:is(.tp,body.tp-on .drawer) [data-profile]:focus-visible{outline:2px solid var(--sky);outline-offset:2px}
:is(.tp,body.tp-on .drawer) .sp-n[data-profile]:hover{text-decoration:underline}

body.tp-on .sp-drawer{overflow-x:hidden}
body.tp-on .sp-drawer .drawer-body{overflow-x:hidden}
body.tp-on .sp-drawer .sp-prof{overflow-wrap:anywhere}
body.tp-on .sp-drawer .spf-id{display:flex;gap:18px;align-items:flex-start;padding-bottom:18px;border-bottom:1px solid var(--rule)}
body.tp-on .sp-drawer .spf-who{min-width:0;flex:1}
body.tp-on .sp-drawer .spf-name{font:700 21px/1.3 'Noto Sans Thai',sans-serif;color:var(--ink)}
body.tp-on .sp-drawer .sp-nick{font-size:15px;color:var(--muted);margin-top:2px}
body.tp-on .sp-drawer .spf-meta{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;margin:10px 0 0;font-size:14px}
body.tp-on .sp-drawer .spf-meta dt{color:var(--muted)}
body.tp-on .sp-drawer .spf-meta dd{margin:0;font-family:'Outfit','Noto Sans Thai',sans-serif;font-weight:500}
body.tp-on .sp-drawer .spf-meta dd{display:flex;align-items:center;gap:6px;min-width:0}
body.tp-on .sp-drawer .spf-val{min-width:0}
body.tp-on .sp-drawer .spf-none{color:var(--muted);font-weight:400}
body.tp-on .sp-drawer .spf-pen{width:28px;height:28px;font-size:12px;color:var(--muted);flex:none}
body.tp-on .sp-drawer .spf-pen:hover{color:var(--navy2)}
body.tp-on .sp-drawer .spf-tel-m{display:none;color:var(--navy2)}
body.tp-on .sp-drawer .spf-meta dt.spf-editing{grid-column:1/-1;margin-top:6px}
body.tp-on .sp-drawer .spf-meta dd.spf-editing{grid-column:1/-1;flex-wrap:wrap;align-items:stretch}
body.tp-on .sp-drawer .spf-input{flex:1 1 100%;width:100%;min-width:0;box-sizing:border-box}
body.tp-on .sp-drawer .spf-btns{display:flex;flex-wrap:nowrap;gap:8px}
body.tp-on .sp-drawer .spf-err{flex:1 1 100%;color:var(--danger,#b91c1c);font-size:13px;line-height:1.4}
body.tp-on .sp-drawer .spf-err:empty{display:none}
body.tp-on .sp-drawer .spf-note{margin-top:14px;border:1px solid var(--rule);border-left:3px solid var(--navy2);padding:10px 14px;color:var(--muted);font-size:14px}
body.tp-on .sp-drawer .spf-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--rule);margin-top:6px}
body.tp-on .sp-drawer .spf-stats>div{padding:12px 0 10px 14px;border-left:1px solid var(--rule)}
body.tp-on .sp-drawer .spf-stats>div:first-child{border-left:0;padding-left:0}
body.tp-on .sp-drawer .spf-stats b{display:block;font:500 30px/1.1 'Outfit',sans-serif;color:var(--navy)}
body.tp-on .sp-drawer .spf-stats small{color:var(--muted);font-size:13px}
body.tp-on .sp-drawer .spf-link{display:inline-block;margin:8px 0 14px;padding:0;border:0;background:none;font:inherit;font-size:13.5px;color:var(--navy2);cursor:pointer;text-align:left}
body.tp-on .sp-drawer .spf-link:hover{text-decoration:underline}
body.tp-on .sp-drawer .spf-link:focus-visible{outline:2px solid var(--sky);outline-offset:3px}
body.tp-on .sp-drawer .spf-sec{display:flex;align-items:baseline;gap:10px;border-bottom:1px solid var(--ink);padding-bottom:6px;margin:16px 0 4px}
body.tp-on .sp-drawer .spf-no{font:500 13px 'Outfit',sans-serif;color:var(--navy2);letter-spacing:.06em}
body.tp-on .sp-drawer .spf-sec h3{margin:0;font:700 15.5px 'Noto Sans Thai',sans-serif}
body.tp-on .sp-drawer .spf-empty{border:1px solid var(--rule);border-left:3px solid var(--rule);padding:12px 14px;color:var(--muted);font-size:14px;margin-top:12px}
body.tp-on .t-stu .sp-ph{margin-right:2px}
/* แผงประวัติ ส่วน 02 — งานที่ปิดรับแล้วแต่ยังไม่ส่ง (เปิดให้ส่งรายคน) */
body.tp-on .sp-drawer .spf-closed{list-style:none;margin:0;padding:0}
body.tp-on .sp-drawer .spf-ci{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;padding:12px 0;border-bottom:1px solid var(--rule)}
body.tp-on .sp-drawer .spf-ci-t{display:flex;flex-direction:column;min-width:0;flex:1 1 180px}
body.tp-on .sp-drawer .spf-ci-t b{font:600 14.5px 'Noto Sans Thai',sans-serif;color:var(--ink)}
body.tp-on .sp-drawer .spf-ci-t small{color:var(--muted);font-size:13px;overflow-wrap:anywhere}
body.tp-on .sp-drawer .spf-ci-l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.tp-on .sp-drawer .spf-ci-act{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;min-width:0}
body.tp-on .sp-drawer .spf-ci-act.spf-editing{flex:1 1 100%;justify-content:flex-start}
body.tp-on .sp-drawer .spf-ext{font-size:13px;color:var(--navy2);border-left:3px solid var(--sky);padding-left:8px}
body.tp-on .sp-drawer .spf-ext-l{display:flex;flex-direction:column;gap:4px;flex:1 1 100%;font-size:13px;color:var(--muted)}
/* งานที่ส่ง: ป้าย "ส่งช้า" ถัดจากสถานะ (แดงเส้นบางจาก .badge-danger) */
.tp .t-subs .t-late{margin-left:6px}
@media (max-width:640px){
  :is(.tp,body.tp-on .drawer) .sp-lg{width:96px;height:115px;font-size:38px}
  body.tp-on .sp-drawer .spf-id{gap:14px}
  body.tp-on .sp-drawer .spf-name{font-size:18px}
  body.tp-on .sp-drawer .spf-tel-d{display:none}
  body.tp-on .sp-drawer .spf-tel-m{display:inline}
  body.tp-on .sp-drawer .spf-stats b{font-size:24px}
  :is(.tp,body.tp-on .drawer) .sp-n{max-width:180px}
}
body.tp-on .sp-drawer .drawer-foot .t-foot-left{margin-right:auto}

/* สมุดคะแนน: คอลัมน์ซ้ายมีกล่องรูป + ชื่อ (ชื่อเล่น) + รหัส — กว้างพอไม่ให้ทับช่องคะแนนตอนเลื่อนแนวนอน */
.tp .sg .sg-stick{min-width:244px;max-width:244px;padding:4px 12px;overflow:hidden}
.tp .sg .sg-who{display:flex;align-items:center;gap:8px;min-width:0}
.tp .sg .sg-who .sg-no{flex:none;min-width:22px}
.tp .sg .sg-who .sg-room{flex:none;margin-right:0}
.tp .sg .sp-ph[data-profile]{cursor:pointer}
.tp .sg .sp-ph[data-profile]:focus-visible,.tp .sg-mrow .sp-ph[data-profile]:focus-visible{outline:2px solid var(--sky);outline-offset:2px}
.tp .sg .sg-name{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;line-height:1.3;cursor:pointer}
.tp .sg .sg-name:hover{text-decoration:underline}
.tp .sg .sg-name small{color:var(--muted);font-family:'Outfit','Noto Sans Thai',sans-serif;font-size:12px}
.tp .sg-mtop .sp-ph{cursor:pointer}
.tp .sg-mtop .sg-mwho{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.tp .sg-mtop .sg-mwho .sg-mname{flex:none;max-width:100%}
.tp .sg-mtop .sg-mid{color:var(--muted);font-family:'Outfit','Noto Sans Thai',sans-serif;font-size:12px}
.tp .sg .sg-nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- หน้า "นักเรียน" (การ์ดรูป) — students-view.js ---------- */
.tp .sv-rooms{margin-bottom:10px}
.tp .sv-rooms.is-dim{opacity:.45}
.tp .sv-bar{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin:4px 0 8px}
.tp .sv-search{flex:1 1 260px;max-width:460px;min-width:0}
.tp .sv-only[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.tp .sv-sum{color:var(--muted);font-size:14px;margin:0 0 14px;min-height:1.4em}
.tp .sv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.tp .sc-card{display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid var(--rule);border-radius:0;cursor:pointer;color:var(--ink)}
.tp .sc-card:hover{border-color:var(--navy)}
.tp .sc-card:focus-visible{outline:2px solid var(--sky);outline-offset:2px;border-color:var(--navy)}
.tp .sc-card .sp-card{width:100%;height:auto;aspect-ratio:5/6;font-size:clamp(40px,6vw,64px);border:0;border-bottom:1px solid var(--rule)}
.tp .sc-t{display:flex;flex-direction:column;gap:2px;padding:10px 10px 12px;min-width:0}
.tp .sc-t b{font-weight:600;font-size:14px;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tp .sc-t small{color:var(--muted);font-family:'Outfit','Noto Sans Thai',sans-serif;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tp .sc-b{align-self:flex-start;margin-top:6px;padding:2px 8px;border:1px solid;border-radius:0;font-size:12.5px;line-height:1.5}
.tp .sc-due{color:var(--danger);border-color:var(--danger);background:var(--danger-50,#fef2f2)}
.tp .sc-ok{color:#15803D;border-color:#15803D;background:#f0fdf4}
.tp .sc-none{color:var(--muted);border-color:var(--rule);background:var(--tint)}
@media (max-width:640px){
  .tp .sv-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .tp .sv-search{flex-basis:100%;max-width:none}
  .tp .sc-card .sp-card{font-size:44px}
}

/* ---------- หน้า "สั่งงาน" (งาน × ห้อง) — work-view.js ---------- */
.tp .wk-subj{margin-bottom:14px}
.tp .wk-subj small{opacity:.75}
.tp .wk-box{overflow-x:auto;border-top:1px solid var(--ink);background:#fff}
.tp .wk-grid{border-collapse:collapse;min-width:100%}
.tp .wk-grid th,.tp .wk-grid td{border-bottom:1px solid var(--rule);padding:0;vertical-align:middle}
.tp .wk-grid thead th{border-bottom:1px solid var(--ink);font-weight:500;font-size:13px;color:var(--muted);background:#fff}
.tp .wk-grid .wk-stick{position:sticky;left:0;z-index:1;background:#fff;text-align:left;min-width:220px;max-width:260px;border-right:1px solid var(--rule)}
.tp .wk-grid .wk-corner{padding:8px 12px;color:var(--ink);font-weight:600}
.tp .wk-grid .wk-corner small{display:block;font-weight:400;color:var(--muted);font-size:11.5px}
.tp .wk-hbtn{display:block;width:100%;border:0;background:none;padding:9px 10px;font:inherit;color:var(--navy);cursor:pointer;text-align:center;white-space:nowrap}
.tp .wk-hbtn:hover:not(:disabled){background:var(--tint)}
.tp .wk-hbtn:disabled{cursor:default;color:var(--muted)}
.tp .wk-hbtn:focus-visible{outline:2px solid var(--sky);outline-offset:-2px}
.tp .wk-h{min-width:110px}
.tp .wk-rowbtn{display:flex;flex-direction:column;align-items:flex-start;text-align:left;white-space:normal;padding:8px 12px}
.tp .wk-rowbtn b{font-weight:600;color:var(--ink);font-size:14px}
.tp .wk-rowbtn small{color:var(--muted);font-size:12px;line-height:1.35;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.tp .wk-c{text-align:center;height:52px;min-width:110px}
.tp .wk-chk{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:52px;cursor:pointer}
.tp .wk-chk:hover{background:var(--tint)}
.tp .wk-chk input{width:18px;height:18px;accent-color:var(--navy);cursor:pointer}
.tp .wk-on{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;border:0;padding:6px 8px;font:500 13px 'Noto Sans Thai',sans-serif;line-height:1.3;cursor:pointer;color:var(--navy);background:#E0F2FE}
.tp .wk-on:hover{box-shadow:inset 0 0 0 1px var(--navy)}
.tp .wk-on:focus-visible{outline:2px solid var(--sky);outline-offset:-2px}
.tp .wk-on.wk-late{background:#E0F2FE;color:#B45309;box-shadow:inset 3px 0 0 #B45309}
.tp .wk-on.wk-late:hover{box-shadow:inset 3px 0 0 #B45309,inset 0 0 0 1px var(--navy)}
.tp .wk-on.wk-closed{background:#F1F5F9;color:#64748B}
.tp .wk-note{margin:12px 0 0;color:var(--muted);font-size:13.5px}
.tp .wk-bar{position:sticky;bottom:0;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:14px;padding:10px 14px;background:#fff;border:1px solid var(--navy)}
.tp .wk-count{font-weight:600;color:var(--navy)}
/* มือถือ: ปุ่มห้อง + รายการงานของห้องนั้น */
.tp .wk-mrooms{margin-bottom:10px}
.tp .wk-mall{margin-bottom:10px;max-width:100%;white-space:normal;text-align:left}
.tp .wk-mlist{border-top:1px solid var(--ink)}
.tp .wk-mrow{display:flex;align-items:stretch;gap:10px;border-bottom:1px solid var(--rule);min-width:0}
.tp .wk-mt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;justify-content:center;padding:8px 0}
.tp .wk-mt b{font-weight:600;font-size:14px}
.tp .wk-mt small{color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tp .wk-mc{flex:0 0 132px;display:flex}
.tp .wk-mc .wk-chk,.tp .wk-mc .wk-on{min-height:48px}
/* หน้าต่างตั้งวัน */
.tp-on .modal .wk-msum{margin:0 0 8px;color:var(--muted);font-size:14px;overflow-wrap:anywhere}
.tp-on .modal .wk-mode{display:flex;flex-wrap:wrap;gap:6px 18px;margin:4px 0 12px}
.tp-on .modal .wk-mode label{display:flex;align-items:center;gap:6px;cursor:pointer}
.tp-on .modal .wk-mode input{accent-color:var(--navy)}
.tp-on .modal .wk-per{border-top:1px solid var(--rule);padding-top:8px}
.tp-on .modal .wk-per-room{display:block;font-weight:600;color:var(--navy);margin-bottom:4px}
.tp-on .modal .wk-blocked{margin:10px 0 0;padding:8px 12px;border-left:3px solid #B45309;background:#FFFBEB;color:#92400E;font-size:13.5px}
.tp-on .modal .wk-unopen:disabled{opacity:.45;cursor:not-allowed}
/* ตัวแก้บทเรียน: กำหนดส่งย้ายไปหน้าสั่งงาน */
.tp .t-due-moved{margin:0 0 14px}
/* ตารางคะแนน: ช่องห้องที่ยังไม่เปิดงาน (จาง · ยังกรอกคะแนนได้) */
.tp .sg td.sg-off{background:#F8FAFC}
.tp .sg td.sg-off .sg-v{color:#CBD5E1}
.tp .sg td.sg-off .sg-s{color:#94A3B8}
.tp .sg-m-off{background:#F8FAFC;border-left-color:#E2E8F0}
.tp .sg-m-off .sg-mst{color:#94A3B8}
@media (max-width:640px){
  .tp .wk-bar{padding:8px 10px}
  .tp .wk-bar .btn{flex:1 1 auto}
  .tp .wk-bar .grow{display:none}
  .tp .wk-count{flex-basis:100%}
}

/* ===== แบบแนะนำตัว (ส่วนในหน้าตั้งค่า) ===== */
.tp .ia-h{font-size:13px;font-weight:700;color:#1E3A8A;margin:16px 0 6px;border-bottom:1px solid #EEF1F6;padding-bottom:4px}
.tp .ia-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #F1F3F8;flex-wrap:wrap}
.tp .ia-row .grow{flex:1;min-width:140px}
.tp .ia-sw{width:18px;height:18px;accent-color:#14275C}
.tp .ia-tag{font-size:11px;padding:1px 8px;border:1px solid}
.tp .ia-tag.on{color:#1a7f37;border-color:#b7e2c3;background:#f3fbf5}
.tp .ia-tag.dr{color:#8a5a00;border-color:#f0d9a8;background:#fffaf0}
.tp .ia-tag.off{color:#6b7385;border-color:#D9DEE8;background:#F3F6FB}
.tp .ia-acts{display:flex;gap:6px;flex-wrap:wrap}
.tp .ia-l{display:block;margin:10px 0 4px;font-weight:600}
.tp .ia-q{border:1px solid #D9DEE8;padding:10px;margin-bottom:8px;display:grid;gap:8px}
.tp .ia-qtop{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tp .ia-qn{background:#14275C;color:#fff;min-width:22px;height:22px;display:inline-grid;place-items:center;font:600 13px Outfit,sans-serif}
.tp .ia-type{width:auto;min-width:140px}
.tp .ia-req{font-size:13px;display:flex;gap:4px;align-items:center}
.tp .ia-mv{margin-left:auto;display:flex;gap:4px}
.tp .ia-opts{display:grid;gap:6px}
.tp .ia-opt{display:flex;gap:6px}
.tp .ia-opt .input{flex:1}
.tp .ia-lbls{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tp .ia-add{width:100%;border:1px dashed #9fb0d6;color:#1E3A8A;background:transparent;padding:8px;cursor:pointer}
.tp .ia-err{margin-top:10px;border:1px solid #f0b4b4;background:#fff5f5;color:#b42318;padding:8px 10px;font-size:13px}
@media (max-width:640px){.tp .ia-lbls{grid-template-columns:1fr}.tp .ia-acts{width:100%}}

/* ===== แผงประวัติ ส่วน 01 แบบแนะนำตัว ===== */
.sp-drawer .sp-tabs{display:flex;gap:0;border-bottom:1px solid var(--rule,#D9DEE8);margin-bottom:8px;flex-wrap:wrap}
.sp-drawer .sp-tab{background:none;border:0;border-bottom:2px solid transparent;padding:6px 10px;font-size:13px;cursor:pointer}
.sp-drawer .sp-tab.on{border-bottom-color:#38BDF8;font-weight:700}
.sp-drawer .sp-qa{padding:6px 0;border-bottom:1px solid #F1F3F8}
.sp-drawer .sp-q{font-size:12px;color:#6b7385}
.sp-drawer .sp-a{font-weight:500;word-break:break-word;white-space:pre-wrap}
.sp-drawer .sp-when{font-size:12px;color:#6b7385;margin:8px 0}
.sp-drawer .sp-revise{border:1px solid #f0b4b4;background:#fff5f5;color:#8a1c12;padding:8px 10px;font-size:13px}

/* ===== คอลัมน์สอบ: ปุ่ม "ผ่านการแก้" ในช่อง/มือถือ ===== */
.tp .sg-fixbtn{display:block;margin:2px auto 0;padding:0 6px;font:600 10.5px 'Noto Sans Thai',sans-serif;line-height:1.7;border:1px solid #b42318;background:#fff;color:#b42318;cursor:pointer;border-radius:0}
.tp .sg-fixbtn:hover{background:#fff5f5}
.tp .sg-c.sg-sub .sg-fixbtn{border-color:#1a7f37;color:#1a7f37}
.tp .sg-mb-fix{border-color:#b42318;color:#b42318;background:#fff;margin-left:6px}

/* ===== หน้า "ตัดเกรด" (22 ต.ค. 2569) ===== */
.tp .gv-sub{margin-bottom:12px}
.tp .gv-set{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tp .gv-box{border:1px solid var(--rule,#D9DEE8);padding:12px}
.tp .gv-box h4{margin:0 0 8px;font-size:14px}
.tp .gv-u{display:flex;align-items:center;gap:8px;padding:5px 0}
.tp .gv-pts{width:72px;text-align:center}
.tp .gv-w{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.tp .gv-w label{font-size:12px;color:#6b7385}
.tp .gv-rv{display:flex;flex-wrap:wrap;gap:10px}
.tp .gv-r{border:1px solid var(--rule,#D9DEE8);padding:8px 10px;min-width:150px}
.tp .gv-r .ok{color:#1a7f37;font-size:12.5px}.tp .gv-r .warn{color:#b42318;font-size:12.5px}
.tp .gv-seg{display:inline-flex;border:1px solid var(--rule,#D9DEE8);margin:4px 0;flex-wrap:wrap}
.tp .gv-seg button{background:#fff;border:0;border-right:1px solid var(--rule,#D9DEE8);padding:4px 10px;font-size:12.5px;cursor:pointer}
.tp .gv-seg button:last-child{border-right:0}
.tp .gv-seg button.on{background:#14275C;color:#fff}
.tp .gv-seg button:disabled{opacity:.5;cursor:not-allowed}
.tp .gv-alert{background:#fffaf0;border:1px solid #f0d9a8;color:#8a5a00;padding:7px 10px;font-size:13px;margin-bottom:8px}
.tp .gv-tw{overflow-x:auto;border:1px solid var(--rule,#D9DEE8)}
.tp .gv-t{border-collapse:collapse;width:100%;min-width:760px;font-size:13px}
.tp .gv-t th,.tp .gv-t td{border-bottom:1px solid #EEF1F6;padding:6px 8px;text-align:center;white-space:nowrap}
.tp .gv-t th{background:#F7F9FC;font-weight:600;font-size:12px}
.tp .gv-t th small{display:block;font-weight:400;color:#6b7385}
.tp .gv-t .nm{text-align:left;position:sticky;left:0;background:#fff}
.tp .gv-t th.nm{background:#F7F9FC}
.tp .gv-cp{display:block;margin:3px auto 0;border:1px solid #14275C;color:#14275C;background:#fff;font-size:11px;padding:0 8px;cursor:pointer}
.tp .gv-ov{width:76px;padding:2px 4px}
.tp .gv-ovt{font-size:10px;color:#8a5a00;border:1px solid #f0d9a8;background:#fffaf0;padding:0 4px}
.tp .gv-undo{border:0;background:none;color:#1E3A8A;cursor:pointer;font-size:14px}
.tp .gv-t .miss{color:#b42318;font-weight:600}
@media (max-width:760px){.tp .gv-set{grid-template-columns:1fr}.tp .gv-w{grid-template-columns:1fr 1fr}}

.tp .gv-t .gv-gr.ms{color:#b42318;font-weight:700}
.tp .gv-near{font-size:10px;color:#8a5a00;border:1px solid #f0d9a8;background:#fffaf0;padding:0 4px}
.tp .gv-msn{font-size:10px;color:#b42318;border:1px solid #f0b4b4;background:#fff5f5;padding:0 4px}

/* ===== หน้า "เช็กชื่อ" (22 ต.ค. 2569) ===== */
.tp .at-now{padding:8px 10px;background:#F3F6FB;border:1px solid var(--rule,#D9DEE8);line-height:1.7;font-size:13px}
.tp .at-now .btn{margin-left:6px}
.tp .at-sum{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.tp .at-s{font-size:12px;border:1px solid var(--rule,#D9DEE8);padding:1px 8px}
.tp .at-s.at-absent{color:#b42318;border-color:#f0b4b4;background:#fff5f5}
.tp .at-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px}
.tp .at-c{position:relative;border:1px solid var(--rule,#D9DEE8);background:#fff;padding:6px 2px 8px;min-height:84px;text-align:center;cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.tp .at-no{position:absolute;top:2px;left:4px;font:600 10px Outfit,sans-serif;color:#6b7385}
.tp .at-miss{position:absolute;top:4px;right:4px;width:7px;height:7px;border-radius:50%;background:#d97706}
.tp .at-c .sp-ph{margin:0 auto;display:block}
.tp .at-n{display:block;font-size:12px;line-height:1.25;margin-top:3px;word-break:break-word}
.tp .at-st{display:inline-block;color:#fff;font-size:10.5px;padding:0 6px;margin-top:2px;background:#6b7385}
.tp .at-c.at-absent{border-color:#b42318;background:#fff5f5}.tp .at-c.at-absent .at-st{background:#b42318}
.tp .at-c.at-late{border-color:#7c3aed;background:#f5f0ff}.tp .at-c.at-late .at-st{background:#7c3aed}
.tp .at-c.at-sick,.tp .at-c.at-leave{border-color:#d97706;background:#fffaf0}.tp .at-c.at-sick .at-st,.tp .at-c.at-leave .at-st{background:#d97706}
.tp .at-c.at-activity{border-color:#1E3A8A;background:#eef3ff}.tp .at-c.at-activity .at-st{background:#1E3A8A}
.tp .at-bar{position:sticky;bottom:0;background:#fff;border-top:1px solid var(--rule,#D9DEE8);padding:10px 0;margin-top:10px;display:flex;gap:10px;align-items:center}
.tp .at-bar .btn{min-width:180px}.tp .at-bar .warn{color:#b42318}
.tp .at-h{font:600 11px Outfit,sans-serif;letter-spacing:.1em;color:#1E3A8A;margin:14px 0 6px;border-bottom:1px solid #EEF1F6;padding-bottom:3px}
.tp .at-it{display:flex;justify-content:space-between;gap:8px;align-items:center;border:1px solid var(--rule,#D9DEE8);padding:8px 10px;margin-bottom:6px;flex-wrap:wrap}
.tp .at-it small{display:block;color:#6b7385;font-size:12px}
.tp .at-it.is-off{opacity:.8}.tp .at-it.is-ms{border-color:#f0b4b4;background:#fff5f5}.tp .at-it.is-near{border-color:#f0d9a8;background:#fffaf0}
.tp .at-tag{font-weight:700;font-size:12px}.tp .is-ms .at-tag{color:#b42318}.tp .is-near .at-tag{color:#8a5a00}
.tp .at-bt{display:flex;gap:6px}
.tp .at-tw{overflow-x:auto;border:1px solid var(--rule,#D9DEE8)}
.tp .at-tt{border-collapse:collapse;width:100%;min-width:560px}
.tp .at-tt th,.tp .at-tt td{border:1px solid #EEF1F6;padding:6px;text-align:center;font-size:12px}
.tp .at-tt th{background:#F7F9FC}.tp .at-tt td{cursor:pointer;min-width:70px}
.tp .at-tt td.s{background:#eef3ff;color:#14275C;font-weight:600}.tp .at-tt td.x{background:#eef3ff;cursor:default;color:#6b7385}
.tp .at-tt td small{display:block;font-weight:400;color:#6b7385;font-size:10px}
.tp .at-time{width:46px;font-size:10.5px;border:1px solid #D9DEE8;padding:0 2px;text-align:center}
.tp .at-tt th small{display:block;font-weight:400;margin-top:2px}
.tp .at-rules{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px;font-size:13px;align-items:center}
.tp .at-num{width:64px;display:inline-block;text-align:center}

.tp .sc-near{color:#8a5a00;border-color:#f0d9a8;background:#fffaf0}
.sp-drawer .sp-att{border:1px solid var(--rule,#D9DEE8);padding:8px 10px;margin-bottom:6px;font-size:13px}
.sp-drawer .sp-att.is-ms{border-color:#f0b4b4;background:#fff5f5}.sp-drawer .sp-att.is-near{border-color:#f0d9a8;background:#fffaf0}
.sp-drawer .sp-att-m{font-weight:700;color:#b42318;margin-top:3px}
.sp-drawer .sp-attl{list-style:none;margin:6px 0 0;padding:0;font-size:12.5px}.sp-drawer .sp-attl li{padding:4px 0;border-bottom:1px solid #F1F3F8}

/* เช็กชื่อ: เมนู 3 หน้า (ครูสั่ง 22 ต.ค. 2569) */
.tp .at-nav{margin:0 0 12px;flex-wrap:wrap}
.tp .at-nav a.chip{text-decoration:none}

/* ตารางคะแนน: ปิดรับแล้วไม่ได้ส่ง = "0 ปิดรับ" (แสดงผล) */
.tp .sg td.sg-closed{background:#FFF7F5}
.tp .sg td.sg-closed .sg-v{color:#B45309}
.tp .sg td.sg-closed .sg-s{color:#B45309}

.tp .sg-roomsf{border:0;padding:0;margin:12px 0 0}
.tp .sg-roomchk{display:inline-flex;gap:6px;align-items:center;cursor:pointer}
.tp .sg-roomchk input{width:18px;height:18px}

/* คนค้างงาน (หน้า "สั่งงาน") */
.tp .wk-chase{margin-top:20px}
.tp .ch-subj,.tp .ch-room{margin-bottom:8px}
.tp .ch-h{font-size:14px;margin:14px 0 6px}
.tp .ch-g{border:1px solid var(--rule,#D9DEE8);margin-bottom:8px}
.tp .ch-gh{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:8px 10px;background:#F7F9FC;cursor:pointer}
.tp .ch-gh small{color:#64748B}
.tp .ch-n{margin-left:auto;font-size:12px;color:#64748B}
.tp .ch-people{list-style:none;margin:0;padding:6px 10px;display:flex;flex-wrap:wrap;gap:4px 12px}
.tp .ch-who{background:none;border:0;padding:4px 0;font:inherit;cursor:pointer;text-align:left}
.tp .ch-who:hover{text-decoration:underline}
.tp .ch-no{display:inline-block;min-width:26px;color:#64748B;font-variant-numeric:tabular-nums}
.tp .ch-rm{margin-right:6px;color:#64748B;font-size:12px}
.tp .ch-none{margin:12px 0}
.tp .ch-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px}

/* รูปในประกาศ (หน้าครู) */
.tp .t-ann-thumb{display:block;width:64px;height:64px;object-fit:cover;object-position:top;margin-top:6px;border:1px solid var(--rule,#D9DEE8)}
body.tp-on .t-ann-prev,.tp .t-ann-prev{display:block;max-width:100%;max-height:220px;margin-top:8px;border:1px solid var(--rule,#D9DEE8)}

/* หน้าต่างตัวอย่างบทเรียน (lesson-preview.js) — สลับมือถือ/คอม · จอ ≤640px เต็มจอ */
body.tp-on .lpv-back{position:fixed;inset:0;z-index:200;background:rgba(11,18,32,.55);display:flex;align-items:center;justify-content:center;padding:20px}
body.tp-on .lpv{display:flex;flex-direction:column;background:#fff;border:1px solid var(--navy);width:min(1180px,100%);height:min(900px,100%);min-height:0}
body.tp-on .lpv[data-view="phone"]{width:min(460px,100%)}
body.tp-on .lpv-head{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--navy);color:#fff}
body.tp-on .lpv-t{flex:1;min-width:0;display:flex;flex-direction:column}
body.tp-on .lpv-t small{font:500 11px 'Noto Sans Thai',sans-serif;color:var(--sky)}
body.tp-on .lpv-t b{font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.tp-on .lpv-dev{display:flex;border:1px solid rgba(255,255,255,.45)}
body.tp-on .lpv-dev button{display:flex;align-items:center;gap:6px;background:none;border:0;color:#fff;font:500 13px 'Noto Sans Thai',sans-serif;padding:6px 10px;cursor:pointer}
body.tp-on .lpv-dev button[aria-pressed="true"]{background:#fff;color:var(--navy)}
body.tp-on .lpv-ic{width:34px;height:34px;flex-shrink:0;display:grid;place-items:center;background:none;border:1px solid rgba(255,255,255,.45);color:#fff;cursor:pointer;font-size:15px}
body.tp-on .lpv-ic:hover,body.tp-on .lpv-dev button:not([aria-pressed="true"]):hover{background:rgba(255,255,255,.12)}
body.tp-on .lpv-note{display:flex;gap:8px;align-items:flex-start;padding:7px 12px;font-size:12.5px;color:var(--muted);background:var(--tint);border-bottom:1px solid var(--rule)}
body.tp-on .lpv-note i{margin-top:3px;color:var(--navy)}
body.tp-on .lpv-stage{flex:1;min-height:0;display:flex;justify-content:center;background:var(--tint)}
body.tp-on .lpv-frame{flex:1;min-width:0;display:flex}
body.tp-on .lpv-frame iframe{flex:1;width:100%;height:100%;border:0;background:#fff}
@media (max-width:640px){
  body.tp-on .lpv-back{padding:0}
  body.tp-on .lpv,body.tp-on .lpv[data-view="phone"]{width:100%;height:100%;border:0}
  body.tp-on .lpv-dev{display:none}
}

/* ตัวอย่างงานในตัวแก้บท ส่วน "ส่งงาน" (teacher.js examplesField) */
.tp .t-ex{margin-bottom:14px}
.tp .t-ex-list{display:flex;flex-direction:column;gap:8px;margin:6px 0 10px}
.tp .t-ex-item{display:flex;gap:10px;align-items:center;border:1px solid var(--rule);padding:8px;background:#fff}
.tp .t-ex-thumb{position:relative;flex:0 0 72px;height:54px;padding:0;border:1px solid var(--rule);background:var(--tint);cursor:zoom-in;overflow:hidden}
.tp .t-ex-thumb img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.tp .t-ex-thumb span{position:absolute;left:0;bottom:0;font:600 10px 'Outfit',sans-serif;background:var(--navy);color:#fff;padding:1px 5px}
.tp .t-ex-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.tp .t-ex-info small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp .t-ex-acts{display:flex;gap:2px;flex-shrink:0}
.tp .t-ex-add.disabled{opacity:.5;pointer-events:none}
.tp .t-ex-status{margin-left:8px}

/* ภาคเรียน + รายวิชา ในหน้าตั้งค่า (term-admin.js) */
.tp .ta-sj-list{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.tp .ta-sj{display:flex;gap:10px;align-items:center;border:1px solid var(--rule);padding:10px 12px;background:#fff;flex-wrap:wrap}
.tp .ta-sj.is-off{background:var(--tint);color:var(--muted)}
.tp .ta-sj .grow{min-width:180px}

/* หน้าต่าง "เริ่มภาคเรียนใหม่" (term-admin.js openNewTermWizard) — โมดัลใต้ body.tp-on */
body.tp-on .ta-wz-steps{display:flex;flex-wrap:wrap;gap:6px 14px;list-style:none;padding:0;margin:0 0 14px;font-size:13px;color:var(--muted)}
body.tp-on .ta-wz-steps li.on{color:var(--navy);font-weight:700;border-bottom:2px solid var(--navy)}
body.tp-on .ta-wz-steps li.done{color:var(--navy)}
body.tp-on .ta-wz-nav{display:flex;justify-content:space-between;gap:10px;margin-top:18px}
body.tp-on .ta-wz-kind,body.tp-on .ta-wz-ok{margin-top:10px;padding:10px 12px;background:var(--tint);border:1px solid var(--rule)}
body.tp-on .ta-wz-warn{margin:12px 0 6px;padding:10px 12px;background:#fdecec;border:1px solid #e9b4b4;color:#8a1c1c;display:block}
body.tp-on .ta-wz-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:10px 0}
body.tp-on .ta-wz-cols h4{margin:0 0 4px;font-size:14px}
body.tp-on .ta-wz-cols ul{margin:0;padding-left:18px;font-size:13px;line-height:1.5}
body.tp-on .ta-wz-check{display:flex;gap:8px;align-items:center;margin:8px 0}
body.tp-on .ta-sj{display:flex;gap:10px;align-items:center;border:1px solid var(--rule);padding:10px 12px;background:#fff;margin-top:8px}
body.tp-on .ta-sj.is-off{background:var(--tint);color:var(--muted)}
@media (max-width:640px){body.tp-on .ta-wz-cols{grid-template-columns:1fr}}
.tp .ia-copynote{padding:8px 10px;background:var(--tint);border:1px solid var(--rule);margin:8px 0}