Hiển thị text overlay trên màn hình

frontend/css/style.css

@@ -129,6 +129,56 @@ html, body {
     background: white;
     color: rgba(44, 44, 44, 0.9);
 }
+
+/* Viewer Info Overlay */
+#viewer-info-overlay {
+    position: fixed;
+    bottom: 15px;
+    right: 15px;
+    background: rgba(30, 30, 30, 0.5); /* Nền xám tối transparent 0.5 - Tăng độ rõ */
+    border: 1px solid rgba(255, 255, 255, 0.5); /* Viền trắng mờ - Tăng độ rõ */
+    border-radius: 10px;
+    padding: 15px 20px;
+    max-width: 300px;
+    color: #fff;
+    font-size: 14px;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
+    z-index: 3002; /* Trên viewer, dưới các modal */
+    pointer-events: none; /* Không chặn tương tác chuột với viewer */
+    opacity: 0; /* Khởi tạo ẩn */
+    transform: translateY(20px); /* Hiệu ứng trượt lên */
+    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
+}
+
+#viewer-info-overlay.show {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+#viewer-info-overlay .info-content h4 {
+    font-size: 18px;
+    margin-bottom: 8px;
+    color: #00d4ff; /* Màu xanh nổi bật cho tiêu đề */
+    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
+}
+
+#viewer-info-overlay .info-content p {
+    font-size: 13px;
+    color: #ccc;
+    margin-bottom: 10px;
+    line-height: 1.4;
+}
+
+#viewer-info-overlay .info-meta {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    font-size: 12px;
+    color: #aaa;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    padding-top: 10px;
+    margin-top: 10px;
+}
 /* Modal Overlay */
 .modal-overlay {
     display: none;