/* assets/mohinh3d.css — Mô hình hóa STDIP (prefix mh3-). Tự đồng bộ biến màu hệ thống. */
.mh3-wrap{position:relative}
.mh3-stage{position:relative;height:clamp(440px,72vh,780px);border-radius:18px;overflow:hidden;
  background:radial-gradient(120% 120% at 50% 0%, #f3f7fb 0%, #e8eef6 60%, #dde6f1 100%);
  border:1px solid var(--line,#e8edf3);box-shadow:inset 0 1px 3px rgba(8,28,52,.05)}
html.dark .mh3-stage{background:radial-gradient(120% 120% at 50% 0%, #0e1b30 0%, #0a1424 70%);border-color:#1e293b}
.mh3-stage canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}
.mh3-stage canvas:active{cursor:grabbing}

/* Chú giải các lớp */
.mh3-legend{position:absolute;left:14px;bottom:14px;display:flex;flex-direction:column;gap:6px;
  background:rgba(255,255,255,.86);backdrop-filter:blur(6px);border:1px solid var(--line,#e8edf3);
  border-radius:12px;padding:10px 12px;font-size:12px;max-width:62%}
html.dark .mh3-legend{background:rgba(12,20,36,.82);border-color:#1e293b;color:#e2e8f0}
.mh3-legend .t{font-weight:800;color:var(--navy,#0e2a47);font-size:11px;text-transform:uppercase;letter-spacing:.4px;margin-bottom:2px}
.mh3-lg{display:flex;align-items:center;gap:8px;color:#475569}
html.dark .mh3-lg{color:#cbd5e1}
.mh3-lg .dot{width:12px;height:12px;border-radius:4px;flex:0 0 auto}
.mh3-lg .e{width:18px;height:0;border-top:2px solid #f0a500;flex:0 0 auto}

/* Thanh điều khiển */
.mh3-ctrl{position:absolute;right:14px;top:14px;display:flex;gap:7px}
.mh3-btn{width:38px;height:38px;border-radius:10px;border:1px solid var(--line,#e8edf3);background:rgba(255,255,255,.9);
  color:var(--navy,#0e2a47);font-size:16px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s}
.mh3-btn:hover{background:var(--blue,#1d5a96);color:#fff;border-color:var(--blue,#1d5a96)}
.mh3-btn.on{background:var(--navy,#0e2a47);color:#fff;border-color:var(--navy,#0e2a47)}
html.dark .mh3-btn{background:rgba(15,27,48,.9);border-color:#1e293b;color:#e2e8f0}

/* Bảng chức năng module được chọn */
.mh3-panel{position:absolute;right:14px;top:62px;width:min(300px,80%);background:rgba(255,255,255,.95);
  backdrop-filter:blur(8px);border:1px solid var(--line,#e8edf3);border-radius:14px;padding:15px 16px;
  box-shadow:0 16px 40px -16px rgba(8,28,52,.4);transform:translateY(8px);opacity:0;pointer-events:none;transition:.2s}
.mh3-panel.show{transform:none;opacity:1;pointer-events:auto}
html.dark .mh3-panel{background:rgba(13,22,40,.96);border-color:#243049;color:#e2e8f0}
.mh3-panel .ph{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.mh3-panel .pi{font-size:24px;flex:0 0 auto}
.mh3-panel .pt{font-size:15.5px;font-weight:800;color:var(--navy,#0e2a47);line-height:1.25}
html.dark .mh3-panel .pt{color:#e2e8f0}
.mh3-panel .pg{display:inline-block;font-size:11px;font-weight:700;padding:2px 9px;border-radius:20px;color:#fff;margin-bottom:9px}
.mh3-panel .pm{font-size:13px;line-height:1.55;color:#475569;margin:0 0 12px}
html.dark .mh3-panel .pm{color:#cbd5e1}
.mh3-panel .pa{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;text-decoration:none;
  background:var(--blue,#1d5a96);color:#fff;border-radius:9px;padding:8px 13px}
.mh3-panel .pa:hover{filter:brightness(1.07)}
.mh3-panel .pn{font-size:12px;color:#94a3b8}
.mh3-hint{margin-top:10px;font-size:12.5px;color:var(--muted,#64748b);display:flex;gap:16px;flex-wrap:wrap}
.mh3-hint b{color:var(--navy,#0e2a47);font-weight:700}
html.dark .mh3-hint b{color:#e2e8f0}
@media(max-width:640px){ .mh3-legend{max-width:48%;font-size:11px} .mh3-panel{width:74%} }

/* ===== Bổ sung (v2): thống kê, danh sách, kết nối, toàn màn hình ===== */
.mh3-stats{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.mh3-stats span{background:var(--blue-l,#e0ecf7);color:var(--navy,#0e2a47);border-radius:20px;padding:5px 13px;font-size:12.5px;font-weight:600}
.mh3-stats b{font-weight:800;font-variant-numeric:tabular-nums}
html.dark .mh3-stats span{background:#16233a;color:#e2e8f0}

.mh3-btn.on{background:var(--navy,#0e2a47);color:#fff;border-color:var(--navy,#0e2a47)}
.mh3-stage:fullscreen{height:100vh;border-radius:0}
.mh3-stage:-webkit-full-screen{height:100vh;border-radius:0}
.mh3-stage:fullscreen .mh3-legend{bottom:18px}

.mh3-lg{cursor:pointer;border-radius:6px;padding:1px 4px}
.mh3-lg:hover,.mh3-lg.on{background:rgba(29,90,150,.12)}
.mh3-lg.on{font-weight:700}

/* Danh sách & tìm kiếm */
.mh3-list{position:absolute;left:14px;top:14px;width:min(260px,72%);max-height:calc(100% - 30px);
  background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border:1px solid var(--line,#e8edf3);
  border-radius:14px;padding:10px;display:flex;flex-direction:column;box-shadow:0 16px 40px -18px rgba(8,28,52,.4);z-index:5}
html.dark .mh3-list{background:rgba(13,22,40,.96);border-color:#243049;color:#e2e8f0}
.mh3-search{width:100%;box-sizing:border-box;border:1px solid var(--line,#e8edf3);border-radius:9px;padding:8px 10px;font-size:13px;margin-bottom:8px}
.mh3-list-body{overflow:auto;min-height:0}
.mh3-lgrp{margin-bottom:8px}
.mh3-lgrp .h{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;margin:4px 2px 5px}
.mh3-li{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;font-size:12.5px;color:#334155;text-decoration:none;cursor:pointer}
.mh3-li:hover{background:#eef4fb}.mh3-li.on{background:var(--blue,#1d5a96);color:#fff}
html.dark .mh3-li{color:#cbd5e1}html.dark .mh3-li:hover{background:#16233a}
.mh3-li-empty{font-size:12.5px;color:#94a3b8;padding:10px;text-align:center}

/* Panel: kết nối với + nhiều liên kết */
.mh3-panel .pk{margin:2px 0 12px}
.mh3-panel .pk-t{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:#94a3b8;margin-bottom:6px}
.mh3-panel .pk-chips{display:flex;flex-wrap:wrap;gap:6px}
.mh3-panel .pk-chip{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;background:#f1f5f9;border:1px solid #e2e8f0;
  border-radius:20px;padding:3px 9px;color:#334155;text-decoration:none;cursor:pointer}
.mh3-panel .pk-chip:hover{background:var(--blue,#1d5a96);color:#fff;border-color:var(--blue,#1d5a96)}
html.dark .mh3-panel .pk-chip{background:#16233a;border-color:#243049;color:#cbd5e1}
.mh3-panel .pl{display:flex;flex-direction:column;gap:7px}
.mh3-panel .pa2{background:#0f766e}
@media(max-width:640px){ .mh3-list{width:64%} .mh3-stats span{font-size:11.5px;padding:4px 10px} }

/* ===== Ô giới thiệu phân hệ khi thuyết minh (v3) ===== */
.mh3-narr{position:absolute;left:50%;bottom:60px;transform:translateX(-50%);width:min(440px,84%);
  background:rgba(14,42,71,.5);                 /* nền trong suốt 50% */
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);color:#fff;
  border:1px solid rgba(255,255,255,.28);border-radius:14px;box-shadow:0 18px 50px -18px rgba(0,0,0,.55);
  opacity:0;pointer-events:none;transition:opacity .25s;z-index:8}
.mh3-narr.show{opacity:1;pointer-events:auto}
.mh3-narr-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 12px;cursor:move;border-bottom:1px solid rgba(255,255,255,.18);user-select:none}
.mh3-narr-head .nh-t{font-weight:800;font-size:14px;line-height:1.25}
.mh3-narr-head .nh-act{display:flex;gap:4px;flex:0 0 auto}
.mh3-narr-head .nh-act button{min-width:26px;height:24px;padding:0 6px;border:1px solid rgba(255,255,255,.32);
  background:rgba(255,255,255,.12);color:#fff;border-radius:6px;font-size:12px;font-weight:700;cursor:pointer;line-height:1}
.mh3-narr-head .nh-act button:hover{background:rgba(255,255,255,.3)}
.mh3-narr-body{padding:11px 13px 13px;font-size:14px;line-height:1.55}
.mh3-narr-body p{margin:7px 0 0}
.mh3-narr-body .nb-lop{display:inline-block;font-size:11px;font-weight:700;padding:2px 9px;border-radius:20px;color:#fff}
.mh3-narr-body .nb-q{opacity:.92;font-size:.92em}