bug: fix the style of graph security figure

Author: Leminhbinh0209

css/style.css

@@ -275,16 +275,17 @@ img, video {
 
 /* Security graph: static SVG + Lottie animation on hover */
 .security-graph-wrap {
-    position: relative; width: auto; height: 5rem; margin-bottom: 1rem; display: flex; align-items: center; justify-content: center;
+    position: relative; height: 5rem; margin-bottom: 1rem; display: flex; align-items: center; justify-content: center;
+    min-width: 7rem;
+}
+.security-static-figure {
+    height: 5rem; width: auto; display: block; transition: opacity 0.3s ease; pointer-events: none;
 }
-.security-static-figure,
 .security-lottie-container {
-    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
-    width: auto; height: 100%; max-width: 100%; object-fit: contain;
-    transition: opacity 0.3s ease; pointer-events: none;
+    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
+    width: 7rem; height: 5rem; opacity: 0; transition: opacity 0.3s ease; pointer-events: none;
 }
 .security-static-figure { opacity: 1; }
-.security-lottie-container { opacity: 0; width: 7rem; height: 5rem; }
 #securityFeatureBox.playing .security-static-figure { opacity: 0; }
 #securityFeatureBox.playing .security-lottie-container { opacity: 1; }
 .feature-title { font-size: 1.5rem; font-weight: 600; color: #111827; margin-bottom: 0.75rem; }