/* modules2.css — ส่วนประกอบของระบบช่วงที่ 3–4 (แชท, คอร์ส, บอร์ดงาน, เกม, วิดีโอ, โฆษณา, IoT, สุขภาพ) */
.m-grid-wide{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.m-product video,.m-lesson video{width:100%;border-radius:10px;background:#000;max-height:320px}
.m-pre{white-space:pre-wrap;word-break:break-word;font-size:13.5px;background:var(--surface-2);border-radius:10px;padding:10px 12px;margin:8px 0}
/* แชท */
.m-chat-log{height:min(55vh,460px);overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:4px 2px 10px}
.m-msg{align-self:flex-start;max-width:78%;background:var(--surface-2);border-radius:14px 14px 14px 4px;padding:8px 12px;font-size:13.5px;white-space:pre-wrap;word-break:break-word}
.m-msg small{display:block;font-size:11px;color:var(--ink-soft);margin-bottom:2px}
.m-msg.mine{align-self:flex-end;background:var(--primary);color:#fff;border-radius:14px 14px 4px 14px}
.m-msg.mine small{color:rgba(255,255,255,.75)}
/* คอร์ส */
.m-lesson{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:8px 0}
.m-lesson summary{cursor:pointer;font-weight:600;font-size:14px}
/* บอร์ดงาน */
.m-kanban{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
.m-kanban .m-card{background:var(--surface-2);min-height:120px}
.m-task{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin-bottom:8px;font-size:13.5px;display:flex;justify-content:space-between;gap:6px;align-items:center}
/* เกม */
.m-memory{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:360px;margin:10px 0}
.m-mcard{aspect-ratio:1;border-radius:12px;background:var(--primary);color:#fff;font-size:28px;font-weight:700;border:none;cursor:pointer}
.m-mcard.up{background:var(--surface-2);color:var(--ink)}
.m-quiz{font-size:34px;font-weight:700;text-align:center;padding:18px;color:var(--primary)}
/* โฆษณา / AI / คำเตือน */
.m-ad{display:flex;gap:12px;align-items:center;flex-wrap:wrap;border-left:4px solid var(--gold)}
.m-ai{background:var(--primary-soft);border:none;margin-top:12px}
.m-warn-box{background:rgba(245,158,11,.12);border-radius:10px;padding:10px;margin-top:10px;font-size:13px;word-break:break-all}
@media (max-width:700px){.m-kanban{grid-template-columns:1fr}}
/* คอร์สเรียนแบบอินเตอร์แอกทีฟ */
.m-course{display:grid;grid-template-columns:220px 1fr;gap:14px;margin-top:10px}
.m-lessons{display:flex;flex-direction:column;gap:6px}
.m-lesson-btn{text-align:left;padding:9px 12px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line);font-size:13.5px}
.m-lesson-btn.on{background:var(--primary-soft);border-color:var(--primary);color:var(--primary);font-weight:600}
.m-room{min-height:200px}
.m-teach{font-size:15px;line-height:1.7;background:var(--surface-2);padding:16px}
.m-quizq{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:12px 0;transition:border-color .2s}
.m-quizq.ok{border-color:var(--emerald);background:rgba(16,185,129,.06)}
.m-choice{display:block;padding:8px 10px;margin:6px 0;border-radius:10px;background:var(--surface-2);cursor:pointer;font-size:14px}
.m-choice:hover{background:var(--primary-soft)}
.m-builder{border-top:1px dashed var(--line);margin-top:16px;padding-top:12px}
.m-qbuild{background:var(--surface-2);box-shadow:none}
.shake{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@media (max-width:760px){.m-course{grid-template-columns:1fr}}
/* ui_kit.js — ช่องแนบรูป + แกลเลอรี */
.ui-picker{display:flex;flex-direction:column;gap:8px}
.ui-thumbs{display:flex;gap:8px;flex-wrap:wrap}
.ui-thumb{position:relative;width:72px;height:72px}
.m-product .ui-thumb img,.ui-thumb img{width:100%;height:100%;object-fit:cover;border-radius:8px}
.ui-thumb button{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;border:0;background:var(--danger,#e5484d);color:#fff;cursor:pointer;line-height:1}
.ui-addimg{align-self:flex-start;cursor:pointer}
.ui-gallery .ui-main{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;background:var(--surface-2)}
.ui-strip{display:flex;gap:6px;margin-top:6px;overflow-x:auto}
.m-product .ui-strip img,.ui-strip img{width:48px;height:48px;aspect-ratio:auto;object-fit:cover;border-radius:6px;cursor:pointer;flex:none}
.ui-text{white-space:pre-line;overflow-wrap:anywhere}
.m-h{font-size:16px;margin:8px 0 12px}
/* ข้อความส่วนตัว (dm.js) */
.dm-wrap{display:grid;grid-template-columns:300px 1fr;gap:16px;align-items:start}
.dm-side{max-height:72vh;overflow:auto;display:flex;flex-direction:column;gap:6px}
.dm-conv{display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px;text-decoration:none;color:var(--ink)}
.dm-conv:hover,.dm-conv.on{background:var(--surface-2)}
.dm-av{width:36px;height:36px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-weight:700}
.dm-meta{display:flex;flex-direction:column;min-width:0;flex:1}
.dm-meta small{color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-right{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.dm-badge{background:#e5484d;color:#fff;border-radius:999px;padding:0 7px;font-size:11px}
.dm-main{display:flex;flex-direction:column;gap:10px;min-height:420px}
.dm-head{display:flex;align-items:center;gap:8px}
.dm-head #dmBack{display:none}
.dm-log{flex:1;min-height:300px;max-height:56vh}
.dm-imgs{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.dm-imgs img{width:120px;height:120px;object-fit:cover;border-radius:8px}
.dm-compose .ui-addimg{font-size:12px}
.dm-empty{padding:60px 0}
.nav-item .dm-soon{background:#e5484d;color:#fff}
.nav-item .dm-soon:empty{display:none}
.dm-chip{font-size:16px}
@media (max-width:760px){
  .dm-wrap{grid-template-columns:1fr}
  .dm-wrap.has-peer .dm-side{display:none}
  .dm-wrap:not(.has-peer) .dm-main{display:none}
  .dm-head #dmBack{display:inline-flex}
}