file css mới

website/Areas/Millions/Views/Home/GameHome.cshtml

@@ -14,56 +14,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="/Millions/css/all.min.css"/>
-    <style>
-        html, body.millions-bg { background: #f5f7fb !important; }
-        .main-content { background: #f5f7fb !important; }
-
-        /* Mega Jackpot amount — spiral grow & shrink */
-        .mega-jackpot-spiral {
-            display: inline-block;
-            transform-origin: center center;
-            animation: megaJackpotSpiral 1.8s ease-in-out infinite;
-            will-change: transform;
-        }
-        /* Redeem Rewards button — gentle pulse + golden glow */
-        .redeem-pulse {
-            animation: redeemPulse 1.6s ease-in-out infinite;
-            will-change: transform, box-shadow;
-        }
-        @@keyframes redeemPulse {
-            0%, 100% {
-                transform: scale(1);
-                box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), 0 0 0 0 rgba(255, 207, 15, 0.6);
-            }
-            50% {
-                transform: scale(1.06);
-                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18), 0 0 0 6px rgba(255, 207, 15, 0);
-            }
-        }
-
-        .lang-flag-icon {
-            width: 16px;
-            height: 12px;
-            object-fit: cover;
-            border-radius: 2px;
-            flex-shrink: 0;
-            box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
-        }
-        @@keyframes megaJackpotSpiral {
-            0% {
-                transform: scale(0.25) rotate(0deg);
-            }
-            30% {
-                transform: scale(1.15) rotate(360deg);
-            }
-            65% {
-                transform: scale(1.15) rotate(360deg);
-            }
-            100% {
-                transform: scale(0.25) rotate(720deg);
-            }
-        }
-    </style>
+    <link rel="stylesheet" href="/Millions/css/game-home.css"/>
 }
 
 <div class="main-content h-dvh w-full max-w-[430px] mx-auto bg-[#f5f7fb] relative overflow-hidden font-bricolage" style="background-color:#f5f7fb;">
@@ -159,7 +110,7 @@
         <!-- Result section -->
         @if (hasResult)
         {
-            <div class="px-4 mt-20">
+            <div class="px-4 mt-10">
                 <div class="result-box rounded-[32px] py-3 flex flex-col gap-2">
                     <div class="flex items-center justify-between px-4">
                         <div class="flex items-center gap-2 text-xs">
@@ -191,7 +142,7 @@
         }
         else
         {
-            <div class="mt-20"></div>
+            <div class="mt-14"></div>
         }
 
         <!-- Mega Jackpot banner -->

website/wwwroot/Millions/css/game-home.css

@@ -0,0 +1,48 @@
+html, body.millions-bg { background: #f5f7fb !important; }
+.main-content { background: #f5f7fb !important; }
+
+/* Mega Jackpot amount — spiral grow & shrink */
+.mega-jackpot-spiral {
+    display: inline-block;
+    transform-origin: center center;
+    animation: megaJackpotSpiral 1.8s ease-in-out infinite;
+    will-change: transform;
+}
+/* Redeem Rewards button — gentle pulse + golden glow */
+.redeem-pulse {
+    animation: redeemPulse 1.6s ease-in-out infinite;
+    will-change: transform, box-shadow;
+}
+@keyframes redeemPulse {
+    0%, 100% {
+        transform: scale(1);
+        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), 0 0 0 0 rgba(255, 207, 15, 0.6);
+    }
+    50% {
+        transform: scale(1.06);
+        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18), 0 0 0 6px rgba(255, 207, 15, 0);
+    }
+}
+
+.lang-flag-icon {
+    width: 16px;
+    height: 12px;
+    object-fit: cover;
+    border-radius: 2px;
+    flex-shrink: 0;
+    box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
+}
+@keyframes megaJackpotSpiral {
+    0% {
+        transform: scale(0.25) rotate(0deg);
+    }
+    30% {
+        transform: scale(1.15) rotate(360deg);
+    }
+    65% {
+        transform: scale(1.15) rotate(360deg);
+    }
+    100% {
+        transform: scale(0.25) rotate(720deg);
+    }
+}