add warning for mobile

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); }