/* ===================================================================
   8020 — BẢN ĐỒ TƯ DUY (bảng vẽ kiểu Excalidraw)
   Giao diện: đảo công cụ nổi ở trên, bảng thuộc tính bên trái,
   thanh zoom + hoàn tác ở góc dưới. Dùng chung biến màu của trang.
   =================================================================== */

.mm-shell{
  position:relative; height:78vh; min-height:540px; margin:6px 0 0;
  border:1.5px solid var(--line); border-radius:16px; overflow:hidden;
  background:#fff; touch-action:none; user-select:none;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
.mm-shell.mm-full{ position:fixed; inset:0; width:100vw; height:100vh; z-index:9999; border-radius:0; border:0; margin:0 }
.mm-exit-full{ display:none; position:absolute; z-index:10; top:10px; right:10px;
  background:#fff; border:1px solid #e9ecf2; box-shadow:0 6px 22px rgba(28,53,95,.14) }
.mm-shell.mm-full .mm-exit-full{ display:flex }
.mm-canvas{ position:absolute; inset:0; display:block; width:100%; height:100% }

/* ---------- đảo nổi dùng chung ---------- */
.mm-island{
  position:absolute; z-index:5; display:flex; align-items:center; gap:4px;
  background:#fff; border:1px solid #e9ecf2; border-radius:12px; padding:5px;
  box-shadow:0 6px 22px rgba(28,53,95,.14);
}
.mm-btn{
  position:relative; border:0; background:transparent; cursor:pointer; border-radius:9px;
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  color:#1c355f; font-family:inherit; font-size:14px; font-weight:700; flex:0 0 auto;
}
.mm-btn:hover{ background:#f1f3f9 }
.mm-btn.on{ background:#ffe1ea; color:#ed0e57 }
.mm-btn.on svg{ stroke:#ed0e57 }
.mm-btn svg{ width:19px; height:19px; stroke:#1c355f; stroke-width:1.5; fill:none;
  stroke-linecap:round; stroke-linejoin:round; pointer-events:none }
.mm-btn .k{ position:absolute; right:3px; bottom:1px; font-size:9px; font-weight:800; color:#9aa7b8 }
.mm-btn[disabled]{ opacity:.35; cursor:default }
.mm-btn.wide{ width:auto; padding:0 11px; font-size:12.5px; gap:6px }
.mm-sep{ width:1px; align-self:stretch; margin:2px 3px; background:#eef1f6 }

/* ---------- thanh công cụ giữa trên ---------- */
.mm-tools{ top:10px; left:50%; transform:translateX(-50%); max-width:calc(100% - 20px); flex-wrap:wrap }
.mm-tip{
  position:absolute; z-index:5; top:52px; left:50%; transform:translateX(-50%); display:none;
  font-size:11.5px; font-weight:600; color:#64748b; background:rgba(255,255,255,.92);
  border:1px solid #eef1f6; border-radius:9px; padding:5px 11px; white-space:nowrap;
  box-shadow:0 3px 10px rgba(28,53,95,.08);
}
.mm-tip b{ color:#1c355f }

/* ---------- thanh tài liệu (góc trên trái) ---------- */
.mm-doc{ top:10px; left:10px; max-width:min(46%,420px); flex-wrap:wrap }
.mm-doc select,.mm-doc input{
  padding:6px 8px; border:1px solid #e5e9f0; border-radius:8px; font-size:12.5px;
  font-family:inherit; font-weight:600; color:#1c355f; background:#fff; max-width:170px; min-width:96px;
}
.mm-doc input:focus,.mm-doc select:focus{ outline:2px solid #ffd3e0; border-color:#ed0e57 }
.mm-msg{ font-size:11.5px; font-weight:700; color:#64748b; padding:0 4px; white-space:nowrap }
.mm-ro{ font-size:11.5px; font-weight:800; color:#92400e; background:#fde68a; border-radius:99px; padding:4px 9px; white-space:nowrap }

/* ---------- thanh hành động (góc trên phải) ---------- */
.mm-acts{ top:10px; right:10px; flex-wrap:wrap; justify-content:flex-end }
.mm-btn.pk{ background:#ed0e57; color:#fff }
.mm-btn.pk:hover{ background:#c50c49 }

/* ---------- bảng thuộc tính bên trái ---------- */
.mm-panel{
  position:absolute; left:10px; top:60px; z-index:6; width:212px;
  max-height:calc(100% - 130px); overflow:auto; overscroll-behavior:contain;
  background:#fff; border:1px solid #e9ecf2; border-radius:14px; padding:11px 12px 13px;
  box-shadow:0 8px 26px rgba(28,53,95,.16);
}
.mm-panel::-webkit-scrollbar{ width:8px } .mm-panel::-webkit-scrollbar-thumb{ background:#e3e8f0; border-radius:8px }
.mm-grp{ margin:0 0 11px }
.mm-grp:last-child{ margin-bottom:0 }
.mm-lb{ font-size:11px; font-weight:800; color:#64748b; letter-spacing:.02em; margin:0 0 5px }
.mm-row{ display:flex; gap:5px; flex-wrap:wrap; align-items:center }
.mm-sw{ width:23px; height:23px; border-radius:7px; border:1px solid rgba(0,0,0,.14); cursor:pointer; padding:0 }
.mm-sw.on{ outline:2px solid #1c355f; outline-offset:1.5px }
.mm-sw.tr{ background:
  linear-gradient(45deg,#fff 46%,#e11d48 46%,#e11d48 54%,#fff 54%), #fff }
.mm-opt{
  width:29px; height:29px; border-radius:8px; border:1px solid #e5e9f0; background:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center; padding:0; color:#1c355f; font-size:12px; font-weight:800;
}
.mm-opt svg{ width:17px; height:17px; stroke:#1c355f; stroke-width:1.5; fill:none; stroke-linecap:round; stroke-linejoin:round }
.mm-opt:hover{ background:#f1f3f9 }
.mm-opt.on{ background:#ffe1ea; border-color:#ffc2d4 }
.mm-opt.on svg{ stroke:#ed0e57 } .mm-opt.on{ color:#ed0e57 }
.mm-panel input[type=range]{ width:100%; accent-color:#ed0e57 }
.mm-cust{ display:flex; align-items:center; gap:5px; margin-top:6px }
.mm-cust input[type=color]{ width:26px; height:23px; padding:0; border:1px solid #e5e9f0; border-radius:6px; background:#fff; cursor:pointer }
.mm-cust input[type=text]{ flex:1; min-width:0; padding:4px 6px; border:1px solid #e5e9f0; border-radius:6px;
  font-family:ui-monospace,Menlo,monospace; font-size:11px; color:#1c355f }

/* ---------- góc dưới trái: zoom + hoàn tác ---------- */
.mm-zoom{ left:10px; bottom:10px }
.mm-zoom .lv{ min-width:52px; text-align:center; font-size:12px; font-weight:800; color:#1c355f; cursor:pointer }
.mm-undo{ left:196px; bottom:10px }
.mm-hint{
  position:absolute; right:10px; bottom:10px; z-index:5; max-width:min(52%,520px);
  font-size:11.5px; font-weight:600; color:#64748b; background:rgba(255,255,255,.92);
  border:1px solid #eef1f6; border-radius:10px; padding:6px 10px; box-shadow:0 3px 12px rgba(28,53,95,.08);
}
.mm-hint b{ color:#1c355f }

/* ---------- ô nhập chữ đè lên canvas ---------- */
.mm-edit{
  position:absolute; z-index:8; margin:0; padding:0; border:0; outline:0; resize:none; overflow:hidden;
  background:transparent; white-space:pre; line-height:1.25; box-sizing:content-box;
  -webkit-font-smoothing:antialiased;
}

/* ---------- menu chuột phải ---------- */
.mm-ctx{
  position:absolute; z-index:20; min-width:214px; background:#fff; border:1px solid #e9ecf2; border-radius:12px;
  padding:5px; box-shadow:0 12px 34px rgba(28,53,95,.22);
}
.mm-ctx button{
  display:flex; width:100%; align-items:center; justify-content:space-between; gap:14px;
  border:0; background:transparent; cursor:pointer; font-family:inherit; font-size:12.5px; font-weight:700;
  color:#1c355f; padding:7px 9px; border-radius:8px; text-align:left;
}
.mm-ctx button:hover{ background:#f1f3f9 }
.mm-ctx button.bad{ color:#dc2626 }
.mm-ctx button[disabled]{ opacity:.4; cursor:default; background:transparent }
.mm-ctx .sh{ font-size:11px; font-weight:700; color:#9aa7b8 }
.mm-ctx hr{ border:0; border-top:1px solid #eef1f6; margin:4px 2px }

/* ---------- hộp thoại nhỏ (xuất file / trợ giúp) ---------- */
.mm-modal{ position:absolute; inset:0; z-index:30; background:rgba(15,23,42,.42); display:flex;
  align-items:center; justify-content:center; padding:18px }
.mm-modal .bx{ background:#fff; border-radius:16px; padding:18px 20px; width:min(560px,100%);
  max-height:100%; overflow:auto; box-shadow:0 20px 50px rgba(15,23,42,.35) }
.mm-modal h4{ margin:0 0 4px; font-size:16px; color:#1c355f }
.mm-modal p{ margin:0 0 12px; font-size:12.5px; color:#64748b }
.mm-modal .rw{ display:flex; gap:8px; flex-wrap:wrap }
.mm-modal .rw button{ border:1px solid #e5e9f0; background:#fff; border-radius:10px; padding:9px 13px;
  font-family:inherit; font-size:13px; font-weight:800; color:#1c355f; cursor:pointer }
.mm-modal .rw button:hover{ background:#f1f3f9 }
.mm-modal .rw button.pk{ background:#ed0e57; border-color:#ed0e57; color:#fff }
.mm-keys{ display:grid; grid-template-columns:1fr 1fr; gap:5px 16px; font-size:12.5px; color:#1c355f }
.mm-keys div{ display:flex; justify-content:space-between; gap:10px; padding:3px 0; border-bottom:1px dashed #eef1f6 }
.mm-keys kbd{ font-family:ui-monospace,Menlo,monospace; font-size:11px; background:#f1f3f9; border-radius:5px;
  padding:2px 6px; color:#475569 }

@media(max-width:820px){
  .mm-panel{ width:186px; top:56px }
  .mm-doc{ max-width:calc(100% - 20px) }
  .mm-hint{ display:none }
  .mm-undo{ left:auto; right:10px; bottom:56px }
}