From 282df2bc9193677301c062a6eb06eb29eb936fe5 Mon Sep 17 00:00:00 2001
From: taDuc <tranduc.wsp@gmail.com>
Date: Sun, 7 Jun 2026 20:29:43 +0700
Subject: [PATCH] add warning for mobile

---
 src/uhm/components/preview/MapPlaceholder.tsx | 22 +++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/src/uhm/components/preview/MapPlaceholder.tsx b/src/uhm/components/preview/MapPlaceholder.tsx
index f9fb9d1..05705a9 100644
--- a/src/uhm/components/preview/MapPlaceholder.tsx
+++ b/src/uhm/components/preview/MapPlaceholder.tsx
@@ -105,6 +105,22 @@ export default function MapPlaceholder({ onEnter }: MapPlaceholderProps) {
                 >
                     Hành trình khám phá biên giới, quốc gia và các sự kiện lịch sử thế giới qua bản đồ tương tác theo dòng thời gian.
                 </p>
+
+                <p
+                    className="map-placeholder-mobile-warning"
+                    style={{
+                        fontFamily: "Georgia, serif",
+                        fontSize: "14px",
+                        fontWeight: 700,
+                        color: "#ef4444",
+                        lineHeight: 1.5,
+                        margin: 0,
+                        maxWidth: "520px",
+                        textShadow: "0 1px 2px rgba(0, 0, 0, 0.8)",
+                    }}
+                >
+                    hiện dự án chỉ đang hỗ trợ người dùng máy tính, các phiên bản di động hiên không ổn định
+                </p>
             </div>
 
             {/* Bottom hint "nhấn vào chỗ bất kì để vào" with a slow breathing/fade pulse animation */}
@@ -139,6 +155,12 @@ export default function MapPlaceholder({ onEnter }: MapPlaceholderProps) {
                 </div>
                 <style dangerouslySetInnerHTML={{
                     __html: `
+                    @media (min-width: 1024px) {
+                        .map-placeholder-mobile-warning {
+                            display: none;
+                        }
+                    }
+
                     @keyframes placeholder-pulse {
                         0%, 100% { opacity: 0.35; transform: scale(0.98); }
                         50% { opacity: 0.95; transform: scale(1); }