diff --git a/templates/chat/chat.html b/templates/chat/chat.html
index 37d1d04..dfc5a06 100644
--- a/templates/chat/chat.html
+++ b/templates/chat/chat.html
@@ -499,9 +499,11 @@
       $('#chat-box').scrollTop($('#chat-box')[0].scrollHeight);
       load_dynamic_update({{last_msg}});
 
-      const button = document.querySelector('#emoji-button')
-      const tooltip = document.querySelector('.tooltip')
-      Popper.createPopper(button, tooltip)
+      const button = document.querySelector('#emoji-button');
+      const tooltip = document.querySelector('.tooltip');
+      Popper.createPopper(button, tooltip, {
+        placement: 'left-end',
+      });
 
       function toggleEmoji() {
         tooltip.classList.toggle('shown')
@@ -513,8 +515,10 @@
       });
 
       // Đóng bảng emoji khi click bất kỳ chỗ nào trên màn hình
-      document.addEventListener("click", function() {
-        tooltip.classList.remove('shown'); // Ẩn bảng emoji
+      document.addEventListener("click", function(e) {
+        if (!tooltip.contains(e.target)) {
+          tooltip.classList.remove('shown'); // Ẩn bảng emoji
+        }
       });
 
       $('emoji-picker').on('emoji-click', function(e) {
diff --git a/templates/chat/chat_css.html b/templates/chat/chat_css.html
index d6934f5..f5bf8cd 100644
--- a/templates/chat/chat_css.html
+++ b/templates/chat/chat_css.html
@@ -43,9 +43,8 @@
   }
 
   .tooltip {
-    left: 120vh !important;
-    transform: translate(100px, 0) !important;
     position: absolute;
+    z-index: 1000;
   }
 
   #loader {