/* I-INSIGHT TUTOR · media-bulk.css (2026-10-10) — เลือกสื่อหลายชิ้น ตั้งค่าผู้เรียนทีเดียว */
.mb-toggle.on{background:var(--u2-green,#1A9A48);border-color:var(--u2-green,#1A9A48);color:#fff}

/* การ์ดในโหมดเลือก */
.mcard.mb-selectable{position:relative;cursor:pointer;user-select:none}
.mcard.mb-selectable .mactions{opacity:.35;pointer-events:none}
.mcard.mb-selectable:hover{border-color:var(--u2-green,#1A9A48)}
.mcard.mb-selectable.is-selected{outline:3px solid var(--u2-green,#1A9A48);outline-offset:-1px;background:#F1FAF4}
.mb-check{position:absolute;z-index:5;top:10px;left:10px;width:28px;height:28px;display:grid;place-items:center;border-radius:9px;background:rgba(255,255,255,.95);border:2px solid #9FB3BC;color:transparent;box-shadow:0 2px 8px rgba(20,60,90,.18);transition:background .15s,border-color .15s}
.mb-check .ico{width:18px;height:18px;stroke-width:3}
.mb-check:focus-visible{outline:3px solid #86EFAC;outline-offset:2px}
.mcard.is-selected .mb-check{background:var(--u2-green,#1A9A48);border-color:var(--u2-green,#1A9A48);color:#fff}
.mgrid.is-list .mb-check{top:50%;left:8px;transform:translateY(-50%)}

/* แถบล่าง */
.mb-bar{position:fixed;z-index:60;left:50%;bottom:20px;transform:translateX(-50%);width:min(860px,calc(100vw - 32px));display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 14px;padding:12px 14px 12px 18px;background:#fff;border:1px solid var(--line-2,rgba(29,43,51,.17));border-radius:16px;box-shadow:0 10px 34px rgba(20,60,90,.22)}
.mb-info{display:flex;flex-direction:column;min-width:0}
.mb-count{font-size:15px;color:var(--ink,#1D2B33)}
.mb-hidden{font-size:12px}
.mb-hidden:empty{display:none}
.mb-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.mb-actions button{min-height:40px}
body.mb-selecting main{padding-bottom:110px}

/* หน้าต่างตั้งค่า */
.mb-where{flex-wrap:wrap}
.mb-note{margin:0;font-size:13px}
.mb-list{margin:0;padding:10px 14px;background:#F4F9F8;border:1px solid var(--line);border-radius:12px}
.mb-list summary{font-weight:700;color:var(--ink);cursor:pointer}
.mb-list ul{margin:8px 0 0;padding-left:20px;max-height:160px;overflow:auto;font-size:13px;line-height:1.7}

@media(max-width:650px){
  .mb-bar{bottom:calc(84px + env(safe-area-inset-bottom,0px));padding:12px}
  .mb-actions{width:100%}
  .mb-actions .primary{flex:1 1 100%;order:-1}
  .mb-actions .tt-sm{flex:1 1 auto}
  body.mb-selecting main{padding-bottom:200px}
  .mb-where button{flex:1 1 100%}
}