/* ⚠⚠⚠ FILE TỰ SINH — ĐỪNG SỬA Ở ĐÂY ⚠⚠⚠
   Nguồn: src/renderer/css/baigiang-spot-wrong.css
   Sửa ở nguồn rồi chạy: node tools/dong-bo-web.js   (§41.10) */
/* ══════════════════════════════════════════════════════════════════════════════════════════════
   LAYOUT 'spot-wrong' — TÌM Ô SAI                                              CLAUDE.md §32.53
   Đi kèm js/baigiang-spot-wrong.js. Mỗi ô rộng 30% slide, 3 ô/hàng (tối đa 6 ô = 2 hàng), căn giữa;
   chiều cao CHUNG = biến --sx-h trên .sx-wrap. Chữ 15px × --bgz (§32.1); tay cầm/tiêu đề UI không zoom.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

.sl.lay-spot-wrong{padding:10px}
.sl.lay-spot-wrong.has-head{padding-top:0}   /* BẮT BUỘC (§32.9) */

.sl .sx-wrap{--sx-h:170px;flex:1;min-height:0;display:flex;flex-direction:column;margin-top:10px}
.sl .sx-grid{display:flex;flex-wrap:wrap;justify-content:center;align-content:flex-start;gap:10px}
.sl .sx-card{flex:0 0 30%;box-sizing:border-box;height:var(--sx-h);overflow-y:auto;overflow-x:hidden;
  padding:10px 14px;background:#D4E8F7;border:2px solid #B9D6EE;border-radius:22px;color:#2c3e50;
  cursor:pointer;line-height:1.4;transition:border-color .12s,background .12s}
.sl .sx-card::-webkit-scrollbar{width:4px}
.sl .sx-card::-webkit-scrollbar-thumb{background:#9fb8cf;border-radius:2px}
.sl .sx-tt{font-weight:700;font-size:calc(15px * var(--bgz,1));color:#1a2332;margin-bottom:4px}
.sl .sx-bd{font-size:calc(15px * var(--bgz,1));white-space:pre-line}
.sl .sx-empty{padding:10px;text-align:center;color:var(--text-muted,#8a94a6);font-size:13px}

/* chọn · chấm · hé lộ */
.sl .sx-card.sel{border-color:var(--blue-primary,#1976D2);background:#C2DDF3;box-shadow:0 0 0 2px var(--blue-primary,#1976D2) inset}
.sl .sx-card.ok{border-color:var(--green-primary,#2e8b57);background:#DDF3E4;box-shadow:0 0 0 2px var(--green-primary,#2e8b57) inset}
.sl .sx-card.bad{border-color:#d93025;background:#FBE3E1;box-shadow:0 0 0 2px #d93025 inset}
.sl .sx-card.sx-rev-bad{border-color:#d93025;background:#FBE3E1;box-shadow:0 0 0 2px #d93025 inset}
.sl .sx-card.sx-rev-bad .sx-tt::after{content:' ✗';color:#d93025}
.sl .sx-card.sx-rev-ok{border-color:var(--green-primary,#2e8b57);background:#EAF7EE}
.sl .sx-card.sx-rev-ok .sx-tt::after{content:' ✓';color:var(--green-primary,#2e8b57)}
.sl .sx-card.graded,.sl .sx-card[data-shown]{cursor:default}
/* khung SOẠN: ô sai viền cam nét đứt để GV thấy đáp án */
.sl .sx-card.sx-key{border-style:dashed;border-color:var(--orange-primary,#e67e22)}

/* tay cầm kéo chiều cao (chỉ khung soạn) */
.sl .sx-rh{flex:0 0 auto;height:14px;margin-top:4px;display:flex;align-items:center;justify-content:center;
  cursor:ns-resize;touch-action:none}
.sl .sx-rh i{display:block;width:64px;height:5px;border-radius:3px;background:var(--orange-primary,#e67e22);opacity:.65}
.sl .sx-rh:hover i{opacity:1}
#previewStage.bg-capturing .sx-rh{display:none}

/* Panel */
.sx-sum{font-size:12px;margin-top:6px}
.sx-note{font-size:11px;color:var(--text-muted);margin-top:6px}
.sx-warn{color:var(--orange-primary,#e67e22)}

/* Popup nhập */
.bg-box.sxp-box{width:80vw;max-width:80vw;height:85vh}
.sxp-hint{font-size:12px;color:var(--text-muted);padding:6px 10px 0}
.sxp-list{flex:1;min-height:0;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:8px}
.sxp-list::-webkit-scrollbar{width:4px}
.sxp-list::-webkit-scrollbar-thumb{background:#c8ced8;border-radius:2px}
.sxp-row{display:flex;gap:8px;align-items:flex-start;padding:8px;background:#D4E8F7;border-radius:10px}
.sxp-n{flex:0 0 22px;font-weight:700;color:#1a2332;padding-top:6px;text-align:center}
.sxp-f{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.sxp-t,.sxp-b{width:100%;box-sizing:border-box;border:1px solid #c8d3e0;border-radius:4px;padding:6px 8px;
  font-family:var(--font-base);font-size:calc(13px * var(--ttz,1));background:#fff;color:#2c3e50}
.sxp-t{font-weight:700}
.sxp-b{resize:vertical;line-height:1.4}
.sxp-t:focus,.sxp-b:focus{outline:none;border-color:var(--blue-primary)}
.sxp-x{flex:0 0 auto;font-size:12px;padding-top:6px;white-space:nowrap;display:flex;align-items:center;gap:4px;cursor:pointer}
.sxp-count{font-size:12px;color:var(--text-muted);margin-left:10px}