sửa giao diện

SicboSub/SicboSub.Web/Views/Shared/_GameLayout.cshtml

@@ -18,6 +18,37 @@
     <script src="~/lib/jquery/dist/jquery.min.js"></script>
     <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="~/js/site.js" asp-append-version="true"></script>
+    <script>
+        // Auto-scale .home container to fit full screen
+        function scaleToFit() {
+            var homeEl = document.querySelector('.home');
+            if (!homeEl) return;
+            
+            var baseWidth = 852;
+            var baseHeight = 393;
+            var windowWidth = window.innerWidth;
+            var windowHeight = window.innerHeight;
+            
+            // Calculate scale to fit entire layout in screen (contain mode - no element loss)
+            var scaleX = windowWidth / baseWidth;
+            var scaleY = windowHeight / baseHeight;
+            var scale = Math.min(scaleX, scaleY); // Use min to ensure all elements are visible
+            
+            // Center the element and scale
+            homeEl.style.transform = 'translate(-50%, -50%) scale(' + scale + ')';
+        }
+        
+        // Run on DOM ready and resize
+        document.addEventListener('DOMContentLoaded', function() {
+            scaleToFit();
+        });
+        window.addEventListener('resize', scaleToFit);
+        
+        // Also run immediately in case DOM is already loaded
+        if (document.readyState !== 'loading') {
+            scaleToFit();
+        }
+    </script>
     @RenderSection("Scripts", required: false)
 </body>
 </html>

SicboSub/SicboSub.Web/wwwroot/css/sicbo-game.css

@@ -3,9 +3,6 @@ body {
     margin: 0;
     line-height: normal;
     background-color: #000;
-    display: flex;
-    justify-content: center;
-    align-items: center;
     width: 100vw;
     height: 100vh;
     overflow: hidden;
@@ -15,15 +12,18 @@ body {
 .home {
     width: 852px;
     height: 393px;
-    position: relative;
-    border-radius: 40px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform-origin: center center;
+    border-radius: 0;
     background-color: #1a0000;
     overflow: hidden;
     text-align: center;
     font-size: 12px;
     color: #fff;
     font-family: 'Kanit', sans-serif;
-    box-shadow: 0 0 50px rgba(0,0,0,0.5);
+    box-shadow: none;
 }
 
 .image-2-parent {
@@ -493,4 +493,4 @@ body {
     width: 34px;
     height: 393px;
     object-fit: contain;
-}
+}