@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Syne:wght@600;800&display=swap');

    /* ── OVERLAY ── */
    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.2);
      backdrop-filter: blur(3px);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s;
    }
    .modal-overlay.active {
      opacity: 1;
      pointer-events: all;
    }

    /* ── MODAL BOX ── */
    .modal {
      background: white;
      border: 1px solid;
      border-radius: 16px;
      width: min(900px, 82vw);
      max-height: 80vh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transform: translateY(20px) scale(0.97);
      transition: transform 0.25s cubic-bezier(.34,1.56,.64,1);
      box-shadow: 0 32px 80px rgba(0,0,0,0.55);
    }
    .modal-overlay.active .modal {
      transform: translateY(0) scale(1);
      position: fixed;   /* sau absolute */
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    
    }
    .btn-close {
      background: none;
      border: none;
      cursor: pointer;
      color: #6b7694;
      font-size: 1.3rem;
      line-height: 1;
      padding: 2px 6px;
      border-radius: 6px;
      transition: color 0.15s, background 0.15s;
    }
    .btn-close:hover { color: #6b7694; }

    .modal-body {
      padding: 1.4rem;
      overflow-y: auto;
      flex: 1;
      font-size: 0.88rem;
      line-height: 1.7;
    }