/* Mô phỏng phép chiếu vuông góc — P1 xanh dương, P2 xanh lá, P3 vàng ấm (trùng màu giữa mặt phẳng, viền nhấn và nhãn); tia chiếu và hướng chiếu: xanh dương đậm */
.wproj{display:flex;flex-direction:column;gap:10px;text-align:left;--p1:#e5edff;--p1s:#9bb2ea;--p1d:#1d4ed8;--p2:#e2f3e8;--p2s:#8dc9a4;--p2d:#12813f;--p3:#fdf1dc;--p3s:#e0bd78;--p3d:#b45309}
.wproj-embed{padding:8px 6px}
.wproj p{margin:0}

/* chọn phương pháp chiếu */
.wproj-modes{padding:0;gap:8px;overflow:visible}
.wproj-modes .chip{flex:1 1 0;min-width:0;min-height:46px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.15;padding:4px 8px;font-size:14.5px}
.wproj-modes .chip span{font-size:11.5px;font-weight:600;opacity:.72}

.wproj-main{display:flex;flex-direction:column;gap:10px;min-width:0}
.wproj-side{display:flex;flex-direction:column;gap:10px;min-width:0}

/* sân khấu */
.wproj-stage{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.wproj-svg{display:block;width:100%;height:auto;min-height:330px;max-height:78vh;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.wproj-svg text{font-family:inherit}
.wproj-pl{stroke-width:1;stroke-linejoin:round}
.wproj-pl0{fill:var(--p1);stroke:var(--p1s)} .wproj-pl1{fill:var(--p2);stroke:var(--p2s)} .wproj-pl2{fill:var(--p3);stroke:var(--p3s)}
.wproj-ma .wproj-pl{fill-opacity:.27}
.wproj-hl{fill:none;stroke-width:2.2;stroke-linejoin:round}
.wproj-hl0{stroke:var(--p1d)} .wproj-hl1{stroke:var(--p2d)} .wproj-hl2{stroke:var(--p3d)}
.wproj-ax{stroke:#475569;stroke-width:1;stroke-linecap:round}
.wproj-vis{fill:none;stroke:#111827;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.wproj-hid{fill:none;stroke:#111827;stroke-width:1.05;stroke-dasharray:5 3}
.wproj-ctr{fill:none;stroke:#111827;stroke-width:.75;stroke-dasharray:9 2.5 1.5 2.5}
.wproj-ray{fill:none;stroke:var(--blue);stroke-width:.9;stroke-opacity:.6;stroke-linecap:round}
.wproj-dot{fill:none;stroke:var(--blue);stroke-width:3.6;stroke-linecap:round}
.wproj-gh{fill:none;stroke:#111827;stroke-width:1.2;stroke-opacity:.2;stroke-dasharray:1 3.2;stroke-linecap:round}
.wproj-oe{fill:none;stroke:#111827;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.wproj-arr{stroke:var(--blue);stroke-width:2.2;stroke-linecap:round}
.wproj-arrh{fill:var(--blue)}
.wproj-arrt{font-size:11px;font-weight:650;fill:var(--blue);paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round}
.wproj-pn{font-size:11.5px;font-weight:750;paint-order:stroke;stroke:#fff;stroke-opacity:.75;stroke-width:2.5px;stroke-linejoin:round}
.wproj-pn0{fill:var(--p1d)} .wproj-pn1{fill:var(--p2d)} .wproj-pn2{fill:var(--p3d)}
.wproj-an{font-size:11px;font-style:italic;font-weight:600;fill:#334155;paint-order:stroke;stroke:#fff;stroke-width:2.5px;stroke-linejoin:round}
.wproj-vn{font-size:10.5px;font-weight:600;fill:var(--muted);paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round}
.wproj-dong{fill:none;stroke:#6b85c9;stroke-width:.7;stroke-linejoin:round}
.wproj-miter{fill:none;stroke:#6b85c9;stroke-width:.7;stroke-dasharray:6 2 1 2}
.wproj-sbox{fill:var(--soft);stroke:var(--line);stroke-width:1}
.wproj-symg path,.wproj-symg circle{fill:#fff;stroke:#111827;stroke-width:1.2;stroke-linejoin:round}
.wproj-symg .wproj-symc{fill:none;stroke-width:.6;stroke-dasharray:6 1.6 1 1.6}
.wproj-st{font-size:10px;fill:var(--muted)}
.wproj-st2{font-size:10.6px;font-weight:700;fill:var(--ink)}

/* dãy bước */
.wproj-steps{display:grid;grid-template-columns:repeat(6,1fr);gap:0}
.wproj-step{position:relative;min-height:44px;border:0;background:none;padding:0;display:grid;place-items:center}
.wproj-step::before{content:"";position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;background:var(--line)}
.wproj-step:first-child::before{left:50%} .wproj-step:last-child::before{right:50%}
.wproj-step.done::before{background:var(--pri)}
.wproj-step.on::before{background:linear-gradient(90deg,var(--pri) 50%,var(--line) 50%)}
.wproj-step.on:last-child::before{background:var(--pri)}
.wproj-step i{position:relative;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:14px;background:var(--card);border:2px solid var(--line);color:var(--muted)}
.wproj-step.done i{border-color:var(--pri);color:var(--pri-d);background:var(--pri-l)}
.wproj-step.on i{background:var(--pri);border-color:var(--pri);color:#fff;box-shadow:0 0 0 4px var(--pri-l)}

/* lời dẫn */
.wproj-cap{min-height:132px;padding:2px 2px 0}
.wproj-capk{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--pri-d)}
.wproj-capt{display:block;font-size:16.5px;line-height:1.3;margin:1px 0 3px}
.wproj-capd{font-size:14.5px;line-height:1.45;color:var(--muted)}

/* nút điều khiển */
.wproj-ctl{display:flex;gap:6px;align-items:stretch}
.wproj-ctl .btn{flex:1 1 0;min-width:0;padding:0 4px;gap:2px;font-size:13.5px;white-space:nowrap;min-height:46px}
.wproj-ctl .btn.pri{flex:1.05 1 0}
.wproj-ctl .btn svg{width:17px;height:17px;flex:none}
.wproj-ctl .wproj-ib svg{width:21px;height:21px}
.wproj-ctl .wproj-ib{flex:0 0 46px;padding:0}

/* chọn vật thể */
.wproj-pickt{font-size:14px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.wproj-strip{display:flex;gap:6px;overflow-x:auto;padding:3px 2px 8px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.wproj-th{flex:none;width:68px;height:56px;border:1.5px solid var(--line);border-radius:12px;background:var(--card);padding:3px;display:grid;place-items:center;scroll-snap-align:start}
.wproj-th svg{width:auto;height:auto;max-width:58px;max-height:46px;pointer-events:none}
.wproj-th.on{border-color:var(--pri);box-shadow:0 0 0 2px var(--pri-l);background:#fbfefc}

@media(min-width:760px){
  .wproj-main{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(280px,.88fr);gap:18px;align-items:start}
  .wproj-modes{max-width:460px}
  .wproj-cap{min-height:150px}
  .wproj-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));overflow:visible;padding-bottom:2px}
  .wproj-th{width:auto}
}

.wproj-grp{font-size:13px;font-weight:600;margin:6px 0 4px}
.wproj-wait{display:block;padding:14px 4px}