Update index.html

index.html

@@ -6,23 +6,18 @@
 <title>Chat CVNSS4.0</title>
 <style>
   :root{
-    /* Giao diện sáng, tối giản */
+    /* Light theme */
     --bg:#f7f9fc; --card:#ffffff; --text:#1f2937; --muted:#6b7280;
     --primary:#1a73e8; --danger:#d93025; --accent:#ffeb3b;
-    /* Kích thước mask (che phần đầu + cột phải của tlk.io) */
-    --mask-top: 210px;                       /* ẨN icon mây + thanh xanh tiêu đề */
-    --mask-right: clamp(220px, 24vw, 300px); /* ẨN panel phải */
+    /* CẮT phần đầu tlk.io (icon mây + thanh xanh) — tăng/giảm nếu cần */
+    --cut-top: 220px;
+    /* Che cột phải */
+    --mask-right: clamp(220px, 24vw, 300px);
   }
   *{box-sizing:border-box}
-  body{
-    margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
-    background:var(--bg); color:var(--text); display:flex; flex-direction:column; min-height:100vh;
-  }
+  body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);display:flex;flex-direction:column;min-height:100vh}
   header{padding:14px 16px;text-align:center;font-weight:700;background:#fff;border-bottom:1px solid #e5e7eb}
-  .card{
-    width:min(980px,94vw); margin:22px auto; background:var(--card);
-    border:1px solid #e5e7eb; border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,.06); padding:18px;
-  }
+  .card{width:min(980px,94vw);margin:22px auto;background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,.06);padding:18px}
   h2{margin:0 0 6px} .muted{color:var(--muted)}
   .row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
   input[type=text]{flex:1 1 260px;padding:12px 14px;font-size:16px;border:1px solid #d1d5db;border-radius:10px}
@@ -33,24 +28,25 @@
   .btn-secondary{background:#374151;color:#fff}
   .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
 
-  /* Trạng thái gọn */
+  /* Status gọn */
   .status{display:none;align-items:center;gap:10px;padding:10px 12px;border:1px dashed #d1d5db;border-radius:10px;margin-bottom:10px;background:#f9fafb}
   .me-pill{display:inline-flex;align-items:center;gap:6px;background:#fff3cd;color:#7a5b00;border:1px solid #ffe8a1;padding:6px 12px;border-radius:999px;font-weight:800}
   .room-pill{display:inline-block;background:#e8f0fe;color:#174ea6;padding:6px 10px;border-radius:999px}
 
-  /* Khung chat */
-  .chat-wrap{position:relative;border:1px solid #e5e7eb;border-radius:10px;overflow:hidden;background:#fff}
-  iframe#chatFrame{width:100%;height:72vh;min-height:640px;border:0;background:#fff}
-
-  /* MASK trắng: chặn mọi click/selection trong vùng che */
-  .mask-top,
+  /* Khung chat: CẮT phần đầu an toàn (không chặn click/nhập) */
+  .chat-wrap{
+    position:relative; border:1px solid #e5e7eb; border-radius:10px; overflow:hidden; background:#fff;
+    padding-top: var(--cut-top);              /* chừa chỗ cho phần bị đẩy ra */
+  }
+  #chatFrame{
+    display:block; width:100%; height:72vh; min-height:640px; border:0; background:#fff;
+    transform: translateY(calc(-1 * var(--cut-top))); /* đẩy phần đầu ra ngoài khung nhìn */
+  }
+  /* Che cột phải – không chặn click (pointer-events:none) */
   .mask-right{
-    position:absolute; background:#fff; z-index:5;
-    pointer-events:auto;               /* chặn click vào phần bị che */
-    user-select:none;                  /* không cho bôi/copy */
+    position:absolute; top:0; right:0; bottom:0; width:var(--mask-right);
+    background:#fff; pointer-events:none; box-shadow:-8px 0 10px -10px rgba(0,0,0,.12); z-index:2;
   }
-  .mask-top{left:0; right:0; top:0; height:var(--mask-top); box-shadow:0 8px 10px -10px rgba(0,0,0,.12)}
-  .mask-right{top:0; right:0; bottom:0; width:var(--mask-right); box-shadow:-8px 0 10px -10px rgba(0,0,0,.12)}
 
   /* Link phòng tự ẩn */
   .links{display:none;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
@@ -59,6 +55,7 @@
   /* Fallback khi iframe bị chặn */
   .error-box{display:none;gap:10px;align-items:center;justify-content:space-between;padding:12px;border:1px solid #fecaca;background:#fef2f2;border-radius:10px;margin-top:10px}
   .error-text{color:#991b1b}
+
   .toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:#111827;color:#f9fafb;border:1px solid #374151;padding:10px 14px;border-radius:10px;font-size:14px;opacity:0;pointer-events:none;transition:opacity .2s}
   .toast.show{opacity:1}
   footer{margin-top:auto;text-align:center;color:#6b7280;font-size:13px;padding:16px}
@@ -96,10 +93,7 @@
   </div>
 
   <div class="chat-wrap">
-    <!-- MASK trắng: che gọn icon mây + thanh xanh + panel phải -->
-    <div class="mask-top" aria-hidden="true"></div>
     <div class="mask-right" aria-hidden="true"></div>
-
     <iframe id="chatFrame" title="tlk.io chat" referrerpolicy="no-referrer"
             allow="clipboard-read; clipboard-write"></iframe>
   </div>
@@ -142,7 +136,6 @@
     const timer = setTimeout(()=>{ els.err.style.display="flex"; }, 6000);
     els.frame.addEventListener("load", ()=> clearTimeout(timer), {once:true});
   }
-
   function enterChat(){
     els.login.style.display="none";
     els.box.style.display="block";
@@ -170,7 +163,7 @@
     };
   });
 
-  // Prefill + auto-enter khi đã có tên
+  // Prefill + auto-enter khi có tên
   const last = localStorage.getItem("cvnss4_name"); if(last) els.name.value = last;
   syncRoomUI(); els.name.focus({preventScroll:true});
   if (qs.get("room") && (last || els.name.value.trim() !== "")) enterChat();