<style>
  /* Popup overlay + container */
  .popup-overlay{
    position:fixed; inset:0; background:rgba(0,0,0,.45);
    opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:9998;
  }
  .popup{
    position:fixed; left:50%; top:50%; transform:translate(-50%,-46%) scale(.96);
    width:min(92vw,560px); background:#fff; border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.25);
    padding:20px 22px 24px; opacity:0; pointer-events:none; transition:transform .25s ease, opacity .25s ease;
    z-index:9999; font-family:system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  }
  .popup.show{ opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1); }
  .popup-overlay.show{ opacity:1; pointer-events:auto; }
  .popup-close{
    position:absolute; right:10px; top:8px; border:0; background:transparent; font-size:28px; line-height:1;
    cursor:pointer; color:#333;
  }
  .popup h3{ margin:0 0 10px; font-size:20px; }
  .popup .tag{
    display:inline-block; font-weight:700; font-size:14px; background:#eef7ff; color:#0a4c9a;
    padding:6px 10px; border-radius:999px; margin-bottom:10px;
  }
  .popup section{ margin:14px 0; }
  .popup section h4{ margin:0 0 6px; font-size:16px; }
  .popup section p{ margin:0; color:#333; line-height:1.5; }
  .note{ font-size:13px; color:#555; margin-top:6px; }

  /* ปิด scroll พื้นหลังเมื่อ popup เปิด */
  body.modal-open{ overflow:hidden; }
</style>