1. Giao diện Popup Newsletter

<div id="exit-popup" class="popup-hidden">
  <div class="popup-content">
    <button id="popup-close">×</button>
    <h3>Đăng ký nhận bài viết mới!</h3>
    <p>Hãy để lại email, bạn sẽ không bỏ lỡ nội dung hay.</p>
    <form id="newsletter-form">
      <input type="email" placeholder="Email của bạn..." required>
      <button type="submit">Đăng ký</button>
    </form>
  </div>
</div>

2. CSS popup cơ bản

<style>
#exit-popup {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
.popup-hidden {
  display: none;
}
.popup-content {
  background: #fff;
  padding: 2rem;
  max-width: 400px;
  border-radius: 8px;
  text-align: center;
  position: relative;
}
#popup-close {
  position: absolute;
  top: 10px; right: 10px;
  border: none;
  background: none;
  font-size: 1.5rem;
  cursor: pointer;
}
.popup-content input {
  width: 80%;
  padding: 0.5rem;
  margin: 1rem 0;
}
.popup-content button[type="submit"] {
  background: #222;
  color: #fff;
  border: none;
  padding: 0.5rem 1rem;
}
</style>

3. JavaScript kiểm tra hành vi exit

<script>
let popupShown = false;
document.addEventListener("mouseout", function(e) {
  if (e.clientY < 0 && !popupShown) {
    document.getElementById("exit-popup").classList.remove("popup-hidden");
    popupShown = true;
  }
});

document.getElementById("popup-close").addEventListener("click", function() {
  document.getElementById("exit-popup").classList.add("popup-hidden");
});

document.getElementById("newsletter-form").addEventListener("submit", function(e) {
  e.preventDefault();
  alert("Cảm ơn bạn đã đăng ký!");
  document.getElementById("exit-popup").classList.add("popup-hidden");
});
</script>

Lưu ý: Popup chỉ hiển thị một lần để tránh làm phiền người dùng. Bạn có thể mở rộng bằng cách lưu trạng thái vào localStorage hoặc cookie nếu cần kiểm soát hiển thị trong nhiều phiên truy cập.

4. Mở rộng nâng cao

• Sử dụng localStorage để popup chỉ xuất hiện mỗi 7 ngày/lần
• Thêm CSS animation để popup xuất hiện mượt mà
• Kết nối form với Mailchimp, Brevo, v.v. qua API
• Chuyển JS thành module để tái sử dụng cho các popup khác