update

assets/script/hura.global.css

@@ -39,6 +39,34 @@
 }
 
 @layer components {
+  #layout-topbar {
+    background: var(--layout-topbar-background);
+    top: calc(var(--spacing) * 0);
+    z-index: 10;
+    transition-property: top, margin, border-radius;
+    transition-timing-function: var(
+      --tw-ease,
+      var(--default-transition-timing-function)
+    );
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    --tw-duration: 0.3s;
+    transition-duration: 0.3s;
+    position: sticky;
+    border-bottom-style: solid;
+    border-bottom-width: 1px;
+    border-color: var(--color-base-300);
+  }
+  #layout-content {
+    padding: calc(var(--spacing) * 6);
+    transition-property: all;
+    transition-timing-function: var(
+      --tw-ease,
+      var(--default-transition-timing-function)
+    );
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    flex-grow: 1;
+    background: var(--bg-body);
+  }
   .bg-menu {
     background-color: var(--color-header);
   }
@@ -48,18 +76,15 @@
       --menu-active-bg: #e9f2ff;
     }
   }
-
   .menu-horizontal {
     display: inline-flex;
     flex-direction: row;
   }
-
   .menu-horizontal li {
     position: relative;
   }
 
   /* ACTIVE STATE (LEVEL 1) */
-
   .menu-horizontal li.active {
     background: var(--menu-active);
   }
@@ -139,10 +164,9 @@
   .menu-horizontal > li > details > ul:before {
     content: none;
   }
-
   /* ==========================
    SUBMENU HOVER ITEMS
-========================== */
+  ========================== */
   .menu-horizontal li ul li:hover {
     background: var(--color-hura);
   }
@@ -154,116 +178,54 @@
   .menu-horizontal li ul li:hover::before {
     display: none;
   }
-
   /* Font weight chung */
   .menu-horizontal .grow {
     font-weight: 500;
   }
-
-  .tw-qna {
-    gap: calc(var(--spacing) * 0.5);
-  }
-  .tw-zy {
-    align-items: center;
-  }
-  .tw-uba {
-    display: inline-flex;
-  }
-  .tw-usa {
-    width: calc(var(--spacing) * 5);
-    height: calc(var(--spacing) * 5);
-  }
-  .tw-sla {
-    width: calc(var(--spacing) * 4.5);
-    height: calc(var(--spacing) * 4.5);
-  }
   .menu-icon-color {
     color: #838383;
   }
   .card-body {
     padding: calc(var(--spacing) * 4);
   }
-  .-mt-25 {
-    margin-top: calc(var(--spacing) * -25);
-  }
-}
-
-#layout-topbar {
-  background: var(--layout-topbar-background);
-  top: calc(var(--spacing) * 0);
-  z-index: 10;
-  transition-property: top, margin, border-radius;
-  transition-timing-function: var(
-    --tw-ease,
-    var(--default-transition-timing-function)
-  );
-  transition-duration: var(--tw-duration, var(--default-transition-duration));
-  --tw-duration: 0.3s;
-  transition-duration: 0.3s;
-  position: sticky;
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-color: var(--color-base-300);
-}
-#layout-content {
-  padding: calc(var(--spacing) * 6);
-  transition-property: all;
-  transition-timing-function: var(
-    --tw-ease,
-    var(--default-transition-timing-function)
-  );
-  transition-duration: var(--tw-duration, var(--default-transition-duration));
-  flex-grow: 1;
-  background: var(--bg-body);
 }
 
 @layer hura {
-  .btn-active {
+  .hura-btn-active {
     --btn-bg: var(--color-hura);
     --btn-fg: #ffffff;
     --btn-border: var(--color-hura);
     color: var(--color-white);
   }
-  .btn-active:hover {
+  .hura-btn-active:hover {
     --btn-bg: #002bb5;
     --btn-border: #002bb5;
   }
-  .btn-view {
+  .hura-btn-outline {
     background: #f5f7ff;
     color: var(--color-hura);
     border: 1px solid var(--color-hura);
   }
-  .btn-view:hover {
+  .hura-btn-outline:hover {
     background: var(--color-hura);
     color: #fff;
   }
-  .checkbox-active:checked,
-  .checkbox-active[aria-checked="true"] {
+  .hura-checkbox:checked,
+  .hura-checkbox[aria-checked="true"] {
     background: var(--color-hura);
     color: #fff;
   }
-  .menu-form .btn {
-    border-bottom: 0;
-  }
-  .menu-form .btn:hover {
-    background: var(--color-hura);
-    color: #fff;
-  }
-  .radio-active:checked,
-  .radio-active[aria-checked="true"] {
+  .hura-radio:checked,
+  .hura-radio[aria-checked="true"] {
     border-color: var(--color-hura);
   }
-  .radio-active:checked::before,
-  .radio-active[aria-checked="true"]::before {
+  .hura-radio:checked::before,
+  .hura-radio[aria-checked="true"]::before {
     background-color: var(--color-hura);
   }
-  .link-active {
+  .hura-text-blue {
     color: var(--color-hura);
   }
-  .text-active {
-    color: var(--color-hura);
-  }
-
   .choices {
     margin-top: calc(var(--spacing) * 2);
     --tw-shadow: