changes

app/components/dashboard/AvatarBox.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="fs-13 font-semibold mx-0 px-0 is-flex is-justify-content-center is-align-items-center is-flex-shrink-0 rounded-full size-10"
-    style="border: 1px solid var(--bulma-grey-80)"
+    style="border: 1px solid var(--bulma-grey-lighter)"
     :style="image && 'border: none'"
   >
     <div>
@@ -21,8 +21,7 @@ export default {
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: var(--grey-100);
-  border: 1px solid hsl(0, 0%, 85%);
+  border: var(--bulma-grey-lighter);
   border-radius: 50%;
 }
 </style>

app/components/dashboard/DeliveryInteractive.vue

@@ -538,6 +538,6 @@
   border-left-width: 1px;
 }
 .border-gray-300 {
-  border-color: var(--bulma-grey-85);
+  border-color: var(--bulma-grey-lighter);
 }
 </style>

app/components/dashboard/Driver.vue

@@ -12,7 +12,7 @@ const props = defineProps({
   <div
     class="is-flex is-gap-2 fs-14 p-3 rounded-lg"
     :style="{
-      border: '1px solid var(--bulma-grey-80)',
+      border: '1px solid var(--bulma-grey-lighter)',
     }"
   >
     <AvatarBox :text="name.slice(0, 2)" />

app/components/dashboard/TopProduct.vue

@@ -13,7 +13,7 @@ const { $shortenCurrency } = useNuxtApp();
     <div class="is-flex is-gap-1 is-justify-content-space-between mb-2">
       <div>
         <p>{{ name }}</p>
-        <p class="fs-13 has-text-grey-60">Đã bán {{ sold_count }} sản phẩm</p>
+        <p class="fs-13 has-text-grey">Đã bán {{ sold_count }} sản phẩm</p>
       </div>
       <p class="font-semibold">{{ $shortenCurrency(revenue) }}</p>
     </div>