Update

Assets/UI/Documents/Settings.uxml

@@ -1,23 +1,42 @@
 <ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" xsi="http://www.w3.org/2001/XMLSchema-instance" engine="UnityEngine.UIElements" editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
     <Style src="project:/Assets/UI/Styles/Global.uss" />
-    <ui:VisualElement class="screen-root">
-        <ui:VisualElement class="panel">
-            <ui:Label text="SETTINGS" class="header-text" />
+    <ui:VisualElement class="screen-root" name="settings-root">
+        <ui:VisualElement class="panel" style="width: 800px; height: 600px;">
+            <ui:Label text="SETTINGS" name="title" class="header-text" />
             
-            <ui:ScrollView style="height: 400px; margin-bottom: 20px;">
-                <ui:Label text="Audio" style="-unity-font-style: bold; margin-top: 10px;" />
-                <ui:Slider label="Master Volume" value="80" low-value="0" high-value="100" />
-                <ui:Slider label="Music Volume" value="50" low-value="0" high-value="100" />
+            <!-- TABS ROW -->
+            <ui:VisualElement class="tab-container">
+                <ui:Button text="GENERAL" name="tab-general" class="tab-button active-tab" />
+                <ui:Button text="GRAPHICS" name="tab-graphics" class="tab-button" />
+                <ui:Button text="AUDIO" name="tab-audio" class="tab-button" />
+                <ui:Button text="CONTROLS" name="tab-controls" class="tab-button" />
+            </ui:VisualElement>
 
-                <ui:Label text="Gameplay" style="-unity-font-style: bold; margin-top: 20px;" />
-                <ui:Slider label="Mouse Sensitivity" value="2.5" low-value="0.1" high-value="10" />
-                <ui:Toggle label="Invert Y-Axis" />
-                
-                <ui:Label text="Graphics" style="-unity-font-style: bold; margin-top: 20px;" />
-                <ui:DropdownField label="Quality" index="2" choices="Low,Medium,High,Ultra" />
+            <!-- CONTENT AREA -->
+            <ui:ScrollView class="tab-content">
+                <!-- Tab: General (Camera Settings) -->
+                <ui:VisualElement name="content-general">
+                    <ui:Label text="Camera Settings" style="-unity-font-style: bold; margin-bottom: 10px;" />
+                    <ui:Slider label="Field of View (FOV)" name="setting-fov" value="60" low-value="40" high-value="120" />
+                    <ui:Slider label="Sensitivity" name="setting-sensitivity" value="5" low-value="0.1" high-value="20" />
+                    <ui:DropdownField label="Language" name="setting-language" index="0" choices="English,Tiếng Việt" />
+                </ui:VisualElement>
+
+                <!-- Tab: Graphics (Dummy) -->
+                <ui:VisualElement name="content-graphics" style="display: none;">
+                    <ui:DropdownField label="Quality" index="2" choices="Low,Medium,High,Ultra" />
+                    <ui:Toggle label="Fullscreen" value="true" />
+                    <ui:Toggle label="V-Sync" value="true" />
+                </ui:VisualElement>
+
+                <!-- Tab: Audio (Dummy) -->
+                <ui:VisualElement name="content-audio" style="display: none;">
+                    <ui:Slider label="Master Volume" value="80" low-value="0" high-value="100" />
+                    <ui:Slider label="Music Volume" value="50" low-value="0" high-value="100" />
+                </ui:VisualElement>
             </ui:ScrollView>
 
-            <ui:Button text="BACK" name="btn-back" class="button-primary" />
+            <ui:Button text="BACK" name="btn-back" class="button-primary" style="align-self: flex-end; margin-top: 20px;" />
         </ui:VisualElement>
     </ui:VisualElement>
 </ui:UXML>

Assets/UI/Styles/Global.uss

@@ -5,6 +5,19 @@
     padding: 40px;
     justify-content: center;
     align-items: center;
+    
+    /* Smooth Transition */
+    transition-property: opacity, scale;
+    transition-duration: 0.3s;
+    transition-timing-function: ease-in-out;
+    opacity: 1;
+    scale: 1;
+}
+
+.screen-root.hidden {
+    opacity: 0;
+    scale: 0.95;
+    display: none;
 }
 
 .panel {
@@ -16,6 +29,34 @@
     min-width: 400px;
 }
 
+/* Tabs Settings Style */
+.tab-container {
+    flex-direction: row;
+    margin-bottom: 20px;
+    border-bottom-width: 2px;
+    border-bottom-color: #333;
+}
+
+.tab-button {
+    flex-grow: 1;
+    background-color: rgba(60, 60, 60, 0.5);
+    border-radius: 5px 5px 0 0;
+    padding: 10px;
+    color: #888;
+    margin-right: 2px;
+}
+
+.tab-button.active-tab {
+    background-color: #3B5998;
+    color: white;
+    -unity-font-style: bold;
+}
+
+.tab-content {
+    flex-grow: 1;
+    padding: 10px;
+}
+
 /* Typography */
 .header-text {
     font-size: 48px;
@@ -23,6 +64,8 @@
     -unity-font-style: bold;
     margin-bottom: 30px;
     -unity-text-align: middle-center;
+    /* Để dùng font của bạn, hãy uncomment dòng dưới và thay đổi path */
+    /* -unity-font-definition: url("project:/Assets/Fonts/YourFont_SDF.asset"); */
 }
 
 /* Buttons */
@@ -44,13 +87,3 @@
 .button-primary:active {
     background-color: #2D4373;
 }
-
-.button-danger {
-    background-color: #A93226;
-}
-
-/* Inputs */
-.input-field {
-    margin-bottom: 15px;
-    color: white;
-}