/* ⚠⚠⚠ FILE TỰ SINH — ĐỪNG SỬA Ở ĐÂY ⚠⚠⚠
   Nguồn: src/renderer/css/baigiang-noi-duong.css
   Sửa ở nguồn rồi chạy: node tools/dong-bo-web.js   (§41.10) */
/* ══════════════════════════════════════════════════════════════════════════════════════════════
   LAYOUT 'match-line' — NỐI CẶP BẰNG ĐƯỜNG                                      CLAUDE.md §32.51
   Đi kèm js/baigiang-noi-duong.js. Text bài giảng 15px × var(--bgz) (§32.1); UI không zoom.
   ⚠ Lưới KHÔNG có row-gap: đường nối tính tâm hàng i ở y = i+0.5 (viewBox theo SỐ HÀNG).
     Khoảng cách giữa các thẻ nằm TRONG ô (padding .nl-cell).
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

.sl.lay-match-line{padding:10px}
.sl.lay-match-line.has-head{padding-top:0}   /* §32.9 — viết lại kẻo header bị đẩy xuống 10px */

.sl .nl-wrap{flex:1;min-height:0;display:flex;flex-direction:column}
.sl .nl-body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:0 3px 0 0;
  font-size:calc(15px * var(--bgz,1));line-height:1.35;color:#2c3e50}
.sl .nl-body::-webkit-scrollbar{width:4px}
.sl .nl-body::-webkit-scrollbar-thumb{background:#c8ced8;border-radius:2px}
.sl .nl-empty{padding:10px;text-align:center;color:var(--text-muted,#8a94a6);font-size:13px}

/* Lưới: trái · khoảng vẽ đường · phải. Hàng chia ĐỀU (1fr) ⇒ mọi hàng cao bằng nhau. */
.sl .nl-grid{display:grid;grid-template-columns:minmax(0,1fr) 22% minmax(0,1.25fr);   /* tỉ lệ thuần ⇒ kéo bề rộng khung là 3 cột co giãn THEO TỈ LỆ */
  min-height:100%;column-gap:0;row-gap:0}
.sl .nl-cell{padding:3px 0;display:flex;align-items:center;min-width:0}
.sl .nl-cl{grid-column:1;justify-content:flex-end}
.sl .nl-cr{grid-column:3}
.sl .nl-lines{grid-column:2;position:relative;min-height:0}
.sl .nl-svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.sl .nl-ln{stroke-width:3;stroke-linecap:round;fill:none}
.sl .nl-ln.nl-dash{stroke-dasharray:7 5;opacity:.9}
.sl .nl-hit{fill:none;stroke:transparent;stroke-width:14;pointer-events:stroke;cursor:pointer}

/* Thẻ cụm: kiểu .option-item (§32.2) — viền mảnh, bo 6px, nền trắng */
.sl .nl-l,.sl .nl-r{position:relative;display:flex;align-items:baseline;gap:6px;width:100%;
  padding:5px 10px;border:1px solid #e0e0e0;border-radius:6px;background:#fff;min-width:0;
  transition:border-color .12s, background .12s, box-shadow .12s}
.sl .nl-wrap.nl-live .nl-l,.sl .nl-wrap.nl-live .nl-r,
.sl .nl-wrap.nl-edit .nl-l,.sl .nl-wrap.nl-edit .nl-r{cursor:pointer;user-select:none}
.sl .nl-wrap.nl-live .nl-l:hover,.sl .nl-wrap.nl-live .nl-r:hover,
.sl .nl-wrap.nl-edit .nl-l:hover,.sl .nl-wrap.nl-edit .nl-r:hover{border-color:#90b8e6}
.sl .nl-no{flex:0 0 auto;font-weight:700;color:#1976D2;min-width:1.1em}
.sl .nl-t{flex:1;min-width:0;overflow-wrap:anywhere}

/* Chấm nối ở mép giáp vùng đường: trái = mép PHẢI thẻ, phải = mép TRÁI thẻ */
.sl .nl-dot{position:absolute;z-index:2;top:50%;width:11px;height:11px;margin-top:-5.5px;border-radius:50%;
  background:#fff;border:2px solid #b0bac8;box-sizing:border-box}
.sl .nl-l .nl-dot{right:-6px}
.sl .nl-r .nl-dot{left:-6px}
.sl .nl-l.nl-on .nl-dot{background:var(--nl-c);border-color:var(--nl-c)}
.sl .nl-r.nl-on .nl-dot{background:var(--nl-rc);border-color:var(--nl-rc)}
.sl .nl-l.nl-on{border-color:var(--nl-c)}

/* Kiểu MŨI TÊN CONG HAI ĐẦU (slots.nlStyle='curve'): chấm của cụm đã nối thành đầu mũi tên
   chĩa VÀO thẻ (nằm trọn trong vùng đường, mũi chạm mép thẻ). Đường cong có tiếp tuyến ngang ở hai
   đầu nên mũi tên ngang luôn khớp hướng đường. */
.sl .nl-curve .nl-l.nl-on .nl-dot,.sl .nl-curve .nl-r.nl-on .nl-dot{width:12px;height:9px;margin-top:-4.5px;   /* tỉ lệ ~10×8 — tam giác thon */
  border:none;border-radius:0}
.sl .nl-curve .nl-l.nl-on .nl-dot{right:-12px;clip-path:polygon(0 50%,100% 0,100% 100%)}
.sl .nl-curve .nl-r.nl-on .nl-dot{left:-12px;clip-path:polygon(100% 50%,0 0,0 100%)}

/* Đang chọn chờ nối */
.sl .nl-l.nl-sel,.sl .nl-r.nl-sel{border-color:#1976D2;background:#e3f0fd;box-shadow:0 0 0 2px #90c2f5}
.sl .nl-l.nl-sel .nl-dot,.sl .nl-r.nl-sel .nl-dot{border-color:#1976D2}

/* Soạn: cụm trái chưa chốt đáp án */
.sl .nl-l.nl-pending{border-color:var(--orange-primary,#E67E22);border-style:dashed}

/* Chấm / hé lộ: tô THẺ TRÁI (đường giữ màu riêng để còn phân biệt); sai = đường nét đứt */
.sl .nl-l.nl-ok{background:#e8f5e9;border-color:#43A047}
.sl .nl-l.nl-bad{background:#ffebee;border-color:#E53935}
.sl .nl-goi{margin-left:6px;font-weight:700;color:#2E7D32;white-space:nowrap}

/* ── KIỂU "RẢI TỰ DO" (slots.nlLook='scatter') ─────────────────────────────────────────────────
   Bề rộng + lệch ngang của từng ô đặt INLINE lúc render (nlScatterBox). Ở đây chỉ lo 3 kiểu ô:
   viền 2px + nền gradient dọc + vệt bóng nửa trên + bóng đổ nhẹ (theo tool "Cycling adjectives").
   ⚠ Trạng thái chọn / đã nối / đúng / sai PHẢI viết lại trong .nl-scatter (độ ưu tiên cao hơn kiểu ô). */
.sl .nl-scatter .nl-cl{justify-content:flex-end}
.sl .nl-scatter .nl-cr{justify-content:flex-start}
.sl .nl-scatter .nl-l,.sl .nl-scatter .nl-r{flex:0 0 auto;border-width:2px;border-radius:4px;
  box-shadow:0 1.6px 3px rgba(26,51,80,.22);padding:5px 10px}
.sl .nl-scatter .nl-l::after,.sl .nl-scatter .nl-r::after{content:'';position:absolute;left:1px;right:1px;top:1px;height:48%;
  border-radius:3px 3px 0 0;pointer-events:none;background:linear-gradient(#fff9,#fff0)}
.sl .nl-scatter .nl-st-t{border-color:#2F8F88;background:linear-gradient(#F5FBFA,#E0F2EF 55%,#CBE8E3)}
.sl .nl-scatter .nl-st-a{border-color:#C98A1B;background:linear-gradient(#FFFBF2,#FBEFD6 55%,#F3DFB5)}
.sl .nl-scatter .nl-st-g{border-color:#8A9096;background:linear-gradient(#F7F8F9,#E7E9EB 55%,#D5D8DB)}
.sl .nl-scatter .nl-l .nl-dot{right:-7px}
.sl .nl-scatter .nl-r .nl-dot{left:-7px}
.sl .nl-scatter.nl-curve .nl-l.nl-on .nl-dot{right:-13px}
.sl .nl-scatter.nl-curve .nl-r.nl-on .nl-dot{left:-13px}
.sl .nl-scatter .nl-l.nl-on{border-color:var(--nl-c)}
.sl .nl-scatter .nl-r.nl-on{border-color:var(--nl-rc)}
.sl .nl-scatter .nl-l.nl-pending{border-color:var(--orange-primary,#E67E22);border-style:dashed}
.sl .nl-scatter .nl-l.nl-sel,.sl .nl-scatter .nl-r.nl-sel{border-color:#1976D2;background:#e3f0fd;box-shadow:0 0 0 2px #90c2f5}
.sl .nl-scatter .nl-l.nl-ok{background:#e8f5e9;border-color:#43A047}
.sl .nl-scatter .nl-l.nl-bad{background:#ffebee;border-color:#E53935}
.sl .nl-scatter .nl-l.nl-ok::after,.sl .nl-scatter .nl-l.nl-bad::after,
.sl .nl-scatter .nl-l.nl-sel::after,.sl .nl-scatter .nl-r.nl-sel::after{display:none}

.nl-hint{margin-top:6px;font-size:11px;color:var(--text-secondary,#5a6577);line-height:1.45}
.props-body textarea.nl-in{width:100%;resize:vertical;font-family:var(--font-base);line-height:1.5}