From 39a7a72b407510f654834b90acee950c1054f8ac Mon Sep 17 00:00:00 2001
From: Loi Phan <phanhuuloi15@gmail.com>
Date: Thu, 27 Jul 2023 14:48:31 +0700
Subject: [PATCH] Fix style and resolve error

---
 practice/practice-02/src/layouts/service.pug  | 18 ++++--
 .../src/styles/layouts/_service.scss          | 64 +++++++++++++------
 2 files changed, 58 insertions(+), 24 deletions(-)

diff --git a/practice/practice-02/src/layouts/service.pug b/practice/practice-02/src/layouts/service.pug
index fd97f1c..2902cb1 100644
--- a/practice/practice-02/src/layouts/service.pug
+++ b/practice/practice-02/src/layouts/service.pug
@@ -1,5 +1,7 @@
 - var service_img_path = "./assets/images/service/";
-- var list_service_category = [{url_icon : service_img_path + "icon-1.png", content: "Online order"}, {url_icon : service_img_path + "icon-3.png", content: "Pre-Reservation"}, {url_icon : service_img_path + "icon-3.png", content: "Super chef"}, {url_icon : service_img_path + "icon-2.png", content: "24/7 Service"}, {url_icon : service_img_path + "icon-3.png", content: "Oragonized foodhut place"}, {url_icon : service_img_path + "icon-3.png", content: "Clean Kitchen"}];
+- var list_service_category_1 = [{url_icon : service_img_path + "icon-1.png", content: "Online order"}, {url_icon : service_img_path + "icon-3.png", content: "Pre-Reservation"}, {url_icon : service_img_path + "icon-3.png", content: "Super chef"}];
+- var list_service_category_2 = [{url_icon : service_img_path + "icon-2.png", content: "24/7 Service"}, {url_icon : service_img_path + "icon-3.png", content: "Oragonized foodhut place"}, {url_icon : service_img_path + "icon-3.png", content: "Clean Kitchen"}];
+- var list_service_category = [list_service_category_1, list_service_category_2];
 
 section.service
   .service__container
@@ -41,9 +43,13 @@ section.service
         = " service"
       p.service__description This is a type of resturent which typically serves food and drink, in addition to light refreshments such as baked goods or snacks. The term comes frome the rench word meaning food
       .service__category
-        .service__category-list
-          each val in list_service_category
-            .service__category-item
-              img.service__icon-category(src=val.url_icon, alt="Icon category")
-              p.service__name-category= val.content
+        each list in list_service_category
+          .service__category-list
+            each item in list
+              .service__category-item
+                img.service__icon-category(
+                  src=item.url_icon,
+                  alt="Icon category"
+                )
+                p.service__name-category= item.content
       a.service__btn.btn(href="javascript:void(0)") About us
diff --git a/practice/practice-02/src/styles/layouts/_service.scss b/practice/practice-02/src/styles/layouts/_service.scss
index ec7bf6e..a87a774 100644
--- a/practice/practice-02/src/styles/layouts/_service.scss
+++ b/practice/practice-02/src/styles/layouts/_service.scss
@@ -9,7 +9,8 @@
   }
 
   &__background-color {
-    @include setAbsoluteAndLocation(true, $top: 200px, $left: 0);
+    @extend %absolute;
+    @include set-absolute-and-location($top: 200px, $left: 0);
     @include size(100%, 50%);
     background: linear-gradient(
       180deg,
@@ -27,15 +28,18 @@
   }
 
   &__background-img {
-    @include setAbsoluteAndLocation(true, $top: 65px, $left: 0);
+    @extend %absolute;
+    @include set-absolute-and-location($top: 65px, $left: 0);
   }
 
   &__main-img {
-    @include setAbsoluteAndLocation(true, $top: 60px, $left: 35px);
+    @extend %absolute;
+    @include set-absolute-and-location($top: 60px, $left: 35px);
   }
 
   &__vegetable-img {
-    @include setAbsoluteAndLocation(true, $bottom: 0, $left: 50px);
+    @extend %absolute;
+    @include set-absolute-and-location($bottom: 0, $left: 50px);
   }
 
   &__content {
@@ -61,16 +65,24 @@
   }
 
   &__category {
-    @include flex-container(true, $flex-direction: column, $gap: 41px);
+    @extend %d-flex;
+    @include flex-layout(
+      $direction: column,
+      $justify: space-between,
+      $gap: 41px
+    );
 
+    max-width: 514px;
     margin-top: 81px;
     &-list {
-      @include flex-container(true, $flex-direction: column, $gap: 30px);
+      @extend %d-flex;
+      @include flex-layout($direction: column, $gap: 30px, $justify: center);
     }
   }
 
   &__category-item {
-    @include flex-container(true, $align-items: center, $gap: 10px);
+    @extend %d-flex;
+    @include flex-layout($align: center, $gap: 10px);
   }
 
   &__name-category {
@@ -91,13 +103,18 @@
 }
 
 @media screen and (min-width: 840px) {
+  %absolute_840 {
+    position: absolute;
+  }
+
   .service {
     max-width: $max-width;
     margin-inline: auto;
 
     &__container {
-      @include flex-container(true, $align-items: center);
+      @include flex-layout($align: center);
 
+      display: flex;
       padding-top: 200px;
     }
 
@@ -112,11 +129,12 @@
     }
 
     &__background-img {
-      @include setAbsoluteAndLocation(true, $top: 100px, $left: 0);
+      @include set-absolute-and-location($top: 100px, $left: 0);
+      @extend %absolute_840;
     }
 
     &__background-color {
-      @include setAbsoluteAndLocation($top: 400px, $left: -100px);
+      @include set-absolute-and-location($top: 400px, $left: -100px);
       @include size(400px, 50%);
       border-radius: 50%;
       background: radial-gradient(
@@ -129,11 +147,13 @@
     }
 
     &__main-img {
-      @include setAbsoluteAndLocation(true, $top: 95px, $left: 35px);
+      @include set-absolute-and-location($top: 95px, $left: 35px);
+      @extend %absolute_840;
     }
 
     &__vegetable-img {
-      @include setAbsoluteAndLocation(true, $bottom: 145px, $left: 50px);
+      @include set-absolute-and-location($bottom: 145px, $left: 50px);
+      @extend %absolute_840;
     }
 
     &__heading {
@@ -146,24 +166,30 @@
     }
 
     &__category {
-      flex-direction: row;
+      @include flex-layout($direction: row, $gap: 10px);
+
       margin-top: 29px;
     }
   }
 }
 
 @media screen and (min-width: 1200px) {
+  %absolute_1200 {
+    position: absolute;
+  }
+
   .service {
     &__container {
-      @include flex-container($align-items: center, $gap: 150px);
+      @include flex-layout($align: center, $gap: 150px);
     }
 
     &__background-img {
-      @include setAbsoluteAndLocation(true, $top: 0px, $left: 0);
+      @include set-absolute-and-location($top: 0px, $left: 0);
+      @extend %absolute_1200;
     }
 
     &__background-color {
-      @include setAbsoluteAndLocation($left: -150px);
+      @include set-absolute-and-location($left: -150px);
       @include size(500px, 50%);
       border-radius: 50%;
       background: radial-gradient(
@@ -183,11 +209,13 @@
     }
 
     &__main-img {
-      @include setAbsoluteAndLocation(true, $top: -17px, $left: 70px);
+      @include set-absolute-and-location($top: -17px, $left: 70px);
+      @extend %absolute_1200;
     }
 
     &__vegetable-img {
-      @include setAbsoluteAndLocation(true, $bottom: 95px, $left: 105px);
+      @include set-absolute-and-location($bottom: 95px, $left: 105px);
+      @extend %absolute_1200;
     }
 
     &__content {