diff --git a/src/components/search/CardUser copy.vue b/src/components/search/CardUser copy.vue
new file mode 100644
index 0000000..b908536
--- /dev/null
+++ b/src/components/search/CardUser copy.vue	
@@ -0,0 +1,438 @@
+<template>
+  <div class="pa-lg-8 pa-md-8 pa-sm-3">
+    <div
+      style="
+        background-color: #f6b0e5;
+        box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
+          rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
+        border-radius: 20px;
+      "
+      class="pa-lg-10 pa-md-10 pa-sm-4 pa-2"
+    >
+      <!-- {{ dataProfile }} -->
+      <v-row class="page-search">
+        <v-col
+          v-for="(item, i) in dataProfile"
+          :key="i"
+          cols="12"
+          md="12"
+          lg="6"
+        >
+          <v-card
+            elevation="7"
+            class="text-sub2 mx-auto py-3 card-user"
+            maxWidth="900"
+            rounded="xl"
+          >
+            <v-card-item>
+              <v-row align="left" style="min-height: 450px">
+                <v-col cols="12" md="5" class="text-center my-auto">
+                  <!-- {{ item.image }} -->
+                  <v-img
+                    v-if="item && item.image"
+                    :src="item.image"
+                    cover
+                    rounded="xl"
+                    class="mx-auto img-display"
+                  >
+                  </v-img
+                  >
+                     <v-icon
+                      v-else
+                            icon="mdi-account"
+                            size="180"
+                            color="#635d56"
+                            class="mx-auto my-auto"
+                          ></v-icon>
+                 
+                </v-col>
+                <v-col cols="12" md="" class="mx-auto">
+                  <v-row>
+                    <v-col>
+                      <div class="box-group">
+                        <div class="t-md">กลุ่มที่</div>
+                        <div
+                          class="font-weight-bold"
+                          style="font-size: xxx-large"
+                        >
+                          {{ item.group.id }}
+                        </div>
+                      </div>
+                    </v-col>
+                    <v-col>
+                      <div class="box-group">
+                        <div class="t-md">หมายเลขผู้สมัคร</div>
+                        <div style="font-size: xxx-large">
+                          <div class="font-weight-bold" v-if="item.registerno">
+                            {{ item.registerno }}
+                          </div>
+                          <div class="font-weight-bold" v-else> - </div>
+                        </div>
+                      </div></v-col
+                    >
+                  </v-row>
+                  <div
+                    class="py-2 text-sub2 box-province mx-auto mx-md-1 my-4"
+                    v-if="item.zone"
+                  >
+                    <div class="font-weight-bold px-3">
+                      {{ item.zone.province.name }} |
+                      <span class="font-weight-medium">{{
+                        item.zone.name
+                      }}</span>
+                    </div>
+                  </div>
+                  <div class="font-weight-bold text-normal my-2 text-md-left">
+                    <div style="font-size: xx-large">
+                      <span> {{ item.firstName }}</span>
+                      <span class="ml-3">
+                        {{ item.lastName }}
+                      </span>
+                    </div>
+
+                    <div class="mx-auto text-md-left text-sub2 mb-2">
+                      {{ item.group.name }}
+                    </div>
+
+                    <div class="text-sub2 text-left mt-5 text-medium-emphasis">
+                      <div class="font-weight-medium">
+                        <span class="font-weight-bold"> อายุ :</span>
+
+                        {{ item.age }} ปี
+                      </div>
+                      <div class="font-weight-medium">
+                        <span class="font-weight-bold">อาชีพ :</span>
+                        {{ item.job }}
+                      </div>
+                      <div class="font-weight-medium">
+                        <span class="font-weight-bold">การศึกษา :</span>
+                        {{ item.education }}
+                      </div>
+                    </div>
+                  </div>
+                </v-col>
+              </v-row>
+
+              <v-row> </v-row>
+              <div class="text-left text-small mt-3 d-none">
+                <div class="text-small font-weight-bold">ช่องทางติดต่อ</div>
+                <v-divider class="my-1"></v-divider>
+
+                <div class="mt-2 d-flex justify">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    x="0px"
+                    y="0px"
+                    width="23"
+                    height="23"
+                    viewBox="0 0 50 50"
+                    class="mr-2"
+                  >
+                    <path
+                      d="M41,4H9C6.24,4,4,6.24,4,9v32c0,2.76,2.24,5,5,5h32c2.76,0,5-2.24,5-5V9C46,6.24,43.76,4,41,4z M37,19h-2c-2.14,0-3,0.5-3,2 v3h5l-1,5h-4v15h-5V29h-4v-5h4v-3c0-4,2-7,6-7c2.9,0,4,1,4,1V19z"
+                    ></path></svg
+                  ><span v-if="item.facebook"> {{ item.facebook }}</span
+                  ><span v-else> - </span>
+                </div>
+                <div class="mt-2 d-flex justify">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    x="0px"
+                    y="-5px"
+                    width="23"
+                    height="23"
+                    viewBox="0 0 50 50"
+                    class="mr-2"
+                  >
+                    <path
+                      d="M 11 4 C 7.134 4 4 7.134 4 11 L 4 39 C 4 42.866 7.134 46 11 46 L 39 46 C 42.866 46 46 42.866 46 39 L 46 11 C 46 7.134 42.866 4 39 4 L 11 4 z M 13.085938 13 L 21.023438 13 L 26.660156 21.009766 L 33.5 13 L 36 13 L 27.789062 22.613281 L 37.914062 37 L 29.978516 37 L 23.4375 27.707031 L 15.5 37 L 13 37 L 22.308594 26.103516 L 13.085938 13 z M 16.914062 15 L 31.021484 35 L 34.085938 35 L 19.978516 15 L 16.914062 15 z"
+                    ></path></svg
+                  ><span v-if="item.twitter"> {{ item.twitter }}</span
+                  ><span v-else> - </span>
+                </div>
+
+                <div class="mt-2 d-flex justify">
+                  <!-- <i class="far fa-tiktok"></i> -->
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    x="0px"
+                    y="0px"
+                    width="23"
+                    height="23"
+                    viewBox="0 0 50 50"
+                    class="mr-2"
+                  >
+                    <path
+                      d="M41,4H9C6.243,4,4,6.243,4,9v32c0,2.757,2.243,5,5,5h32c2.757,0,5-2.243,5-5V9C46,6.243,43.757,4,41,4z M37.006,22.323 c-0.227,0.021-0.457,0.035-0.69,0.035c-2.623,0-4.928-1.349-6.269-3.388c0,5.349,0,11.435,0,11.537c0,4.709-3.818,8.527-8.527,8.527 s-8.527-3.818-8.527-8.527s3.818-8.527,8.527-8.527c0.178,0,0.352,0.016,0.527,0.027v4.202c-0.175-0.021-0.347-0.053-0.527-0.053 c-2.404,0-4.352,1.948-4.352,4.352s1.948,4.352,4.352,4.352s4.527-1.894,4.527-4.298c0-0.095,0.042-19.594,0.042-19.594h4.016 c0.378,3.591,3.277,6.425,6.901,6.685V22.323z"
+                    ></path></svg
+                  ><span v-if="item.tiktok"> {{ item.tiktok }}</span
+                  ><span v-else> - </span>
+                </div>
+              </div>
+            </v-card-item>
+          </v-card></v-col
+        >
+      </v-row>
+      <!-- {{ dataProfile.length }}
+      <div v-if="dataProfile.length == 0">ไม่พบข้อมูล</div> -->
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    dataProfile: {
+      type: Array,
+    },
+  },
+  data() {
+    return {
+      profile: [
+        {
+          name: "ศรราม",
+          lastname: "ใจดี",
+          province: "กรุงเทพ",
+          district: "บางเขน",
+          phone: "08952402xx",
+          age: "42",
+          edit: "บางเขน",
+          education: "ปริญญาโท ด้านเศรษฐศาสตร์",
+          group: "กลุ่มการศึกษา",
+          occupation:
+            "อดีตเคยทำงานด้านการจัดทำข้อเสนอเชิงนโยบายเศรษฐกิจมหภาคต่อกระทรวงการคลังและรัฐบาล...",
+          email: "sornram.j@gmail.com",
+          social: {
+            fb: "Sornram jadee",
+            x: "Sornram jadee",
+            email: "sornram.j@gmail.com",
+          },
+          opinion: {
+            agree: [
+              "แก้ไข มาตรา 112",
+              "แก้ไขรัฐธรรมนูญ 2560",
+              "ยกเลิกการเกณฑ์ทหารแบบบังคับ",
+            ],
+            disagree: [" สว. มีอำนาจโหวตเลือกนายกรัฐมนตรี"],
+          },
+        },
+        {
+          name: "ศรราม",
+          lastname: "ใจดี",
+          province: "กรุงเทพมหานคร",
+          district: "บางเขนบางเขน",
+          phone: "08952402xx",
+          age: "42",
+          education: "ปริญญาโท ด้านเศรษฐศาสตร์",
+          group:
+            "กลุ่มผู้ประกอบอาชีพด้านวิทยาศาสตร์ เทคโนโลยี การสื่อสาร การพัฒนานวัตรกรรม",
+          occupation:
+            "อดีตเคยทำงานด้านการจัดทำข้อเสนอเชิงนโยบายเศรษฐกิจมหภาคต่อกระทรวงการคลังและรัฐบาล...",
+          email: "sornram.j@gmail.com",
+          social: { fb: "Sornram jadee", x: "Sornram jadee" },
+          opinion: {
+            agree: [
+              "แก้ไข มาตรา 112",
+              "แก้ไขรัฐธรรมนูญ 2560",
+              "ยกเลิกการเกณฑ์ทหารแบบบังคับ",
+              "นิรโทษกรรมคดีการเมือง ยกเว้นคดีมาตรา 112",
+            ],
+            disagree: [" สว. มีอำนาจโหวตเลือกนายกรัฐมนตรี"],
+          },
+        },
+        {
+          name: "ศรราม",
+          lastname: "ใจดี",
+          province: "กรุงเทพ",
+          district: "บางเขน",
+          phone: "08952402xx",
+          age: "42",
+          edit: "บางเขน",
+          education: "ปริญญาโท ด้านเศรษฐศาสตร์",
+          group: "กลุ่มการศึกษา",
+          occupation:
+            "อดีตเคยทำงานด้านการจัดทำข้อเสนอเชิงนโยบายเศรษฐกิจมหภาคต่อกระทรวงการคลังและรัฐบาล...",
+          email: "sornram.j@gmail.com",
+          social: { fb: "Sornram jadee", x: "Sornram jadee" },
+          opinion: {
+            agree: [
+              "แก้ไข มาตรา 112",
+              "แก้ไขรัฐธรรมนูญ 2560",
+              "ยกเลิกการเกณฑ์ทหารแบบบังคับ",
+            ],
+            disagree: [" สว. มีอำนาจโหวตเลือกนายกรัฐมนตรี"],
+          },
+        },
+        {
+          name: "ศรราม",
+          lastname: "ใจดี",
+          province: "กรุงเทพ",
+          district: "บางเขน",
+          phone: "08952402xx",
+          age: "42",
+          edit: "บางเขน",
+          education: "ปริญญาโท ด้านเศรษฐศาสตร์",
+          group: "กลุ่มการศึกษา",
+          occupation:
+            "อดีตเคยทำงานด้านการจัดทำข้อเสนอเชิงนโยบายเศรษฐกิจมหภาคต่อกระทรวงการคลังและรัฐบาล...",
+          email: "sornram.j@gmail.com",
+          social: { fb: "Sornram jadee", x: "Sornram jadee" },
+          opinion: {
+            agree: [
+              "แก้ไข มาตรา 112",
+              "แก้ไขรัฐธรรมนูญ 2560",
+              "ยกเลิกการเกณฑ์ทหารแบบบังคับ",
+            ],
+            disagree: [" สว. มีอำนาจโหวตเลือกนายกรัฐมนตรี"],
+          },
+        },
+        {
+          name: "ศรราม",
+          lastname: "ใจดี",
+          province: "กรุงเทพ",
+          district: "บางเขน",
+          phone: "08952402xx",
+          age: "42",
+          edit: "บางเขน",
+          education: "ปริญญาโท ด้านเศรษฐศาสตร์",
+          group: "กลุ่มการศึกษา",
+          occupation:
+            "อดีตเคยทำงานด้านการจัดทำข้อเสนอเชิงนโยบายเศรษฐกิจมหภาคต่อกระทรวงการคลังและรัฐบาล...",
+          email: "sornram.j@gmail.com",
+          social: { fb: "Sornram jadee", x: "Sornram jadee" },
+          opinion: {
+            agree: [
+              "แก้ไข มาตรา 112",
+              "แก้ไขรัฐธรรมนูญ 2560",
+              "ยกเลิกการเกณฑ์ทหารแบบบังคับ",
+            ],
+            disagree: [" สว. มีอำนาจโหวตเลือกนายกรัฐมนตรี"],
+          },
+        },
+        {
+          name: "ศรราม",
+          lastname: "ใจดี",
+          province: "กรุงเทพมหานคร",
+          district: "บางเขนบางเขน",
+          phone: "08952402xx",
+          age: "42",
+          education: "ปริญญาโท ด้านเศรษฐศาสตร์",
+          group: "กลุ่มการศึกษา",
+          occupation:
+            "อดีตเคยทำงานด้านการจัดทำข้อเสนอเชิงนโยบายเศรษฐกิจมหภาคต่อกระทรวงการคลังและรัฐบาล...",
+          email: "sornram.j@gmail.com",
+          social: { fb: "Sornram jadee", x: "Sornram jadee" },
+          opinion: {
+            agree: [
+              "แก้ไข มาตรา 112",
+              "แก้ไขรัฐธรรมนูญ 2560",
+              "ยกเลิกการเกณฑ์ทหารแบบบังคับ",
+              "นิรโทษกรรมคดีการเมือง ยกเว้นคดีมาตรา 112",
+            ],
+            disagree: [" สว. มีอำนาจโหวตเลือกนายกรัฐมนตรี"],
+          },
+        },
+        {
+          name: "ศรราม",
+          lastname: "ใจดี",
+          province: "กรุงเทพมหานคร",
+          district: "บางเขนบางเขน",
+          phone: "08952402xx",
+          age: "42",
+          education: "ปริญญาโท ด้านเศรษฐศาสตร์",
+          group: "กลุ่มการศึกษา",
+          occupation:
+            "อดีตเคยทำงานด้านการจัดทำข้อเสนอเชิงนโยบายเศรษฐกิจมหภาคต่อกระทรวงการคลังและรัฐบาล...",
+          email: "sornram.j@gmail.com",
+          social: { fb: "Sornram jadee", x: "Sornram jadee" },
+          opinion: {
+            agree: [
+              "แก้ไข มาตรา 112",
+              "แก้ไขรัฐธรรมนูญ 2560",
+              "ยกเลิกการเกณฑ์ทหารแบบบังคับ",
+              "นิรโทษกรรมคดีการเมือง ยกเว้นคดีมาตรา 112",
+            ],
+            disagree: [" สว. มีอำนาจโหวตเลือกนายกรัฐมนตรี"],
+          },
+        },
+      ],
+    };
+  },
+};
+</script>
+<style>
+.img-display {
+  height: 450px;
+}
+.box-group {
+  border-radius: 5px;
+  background-color: #ffcd68;
+  border-radius: 10px;
+  width: -webkit-fill-available;
+  width: fit-content;
+  min-width: 100%;
+  padding: 10px 2px;
+  height: 100%;
+}
+.line-r-g {
+  padding-left: 5px;
+  border-color: #ffcd68;
+  border-right: 0.2px solid #ffcd68;
+}
+.line-g {
+  border: 1px solid #ffcd68;
+  display: inline-flex;
+}
+.card-user {
+  height: 100%;
+  /* height: 370px; */
+}
+.more {
+  width: 95%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin: auto;
+}
+.box-province {
+  border-radius: 5px;
+  background-color: #ffcd68;
+  border-radius: 10px;
+  width: -webkit-fill-available;
+  width: fit-content;
+}
+@media only screen and (min-width: 0px) and (max-width: 1000px) {
+  .img-display {
+    height: 400px !important;
+    width: auto;
+  }
+}
+@media only screen and (min-width: 0px) and (max-width: 700px) {
+  .page-search {
+    padding: 20px 0px;
+  }
+
+  .card-user {
+    max-height: auto !important;
+    height: auto !important;
+  }
+  .line-g {
+    display: inline-flex;
+  }
+  .box-province {
+    border-radius: 5px;
+    background-color: #ffcd68;
+    border-radius: 10px;
+    width: -webkit-fill-available;
+  }
+  .img-display {
+    height: 300px !important;
+  }
+}
+</style>
+<style scoped>
+@media only screen and (min-width: 900px) and (max-width: 1290px) {
+  .t-md {
+    font-size: 18px;
+  }
+}
+</style>
diff --git a/src/components/search/CardUser.vue b/src/components/search/CardUser.vue
index b908536..cb74acc 100644
--- a/src/components/search/CardUser.vue
+++ b/src/components/search/CardUser.vue
@@ -12,11 +12,9 @@
       <!-- {{ dataProfile }} -->
       <v-row class="page-search">
         <v-col
-          v-for="(item, i) in dataProfile"
-          :key="i"
           cols="12"
           md="12"
-          lg="6"
+          lg="12"
         >
           <v-card
             elevation="7"
@@ -25,150 +23,20 @@
             rounded="xl"
           >
             <v-card-item>
-              <v-row align="left" style="min-height: 450px">
-                <v-col cols="12" md="5" class="text-center my-auto">
-                  <!-- {{ item.image }} -->
-                  <v-img
-                    v-if="item && item.image"
-                    :src="item.image"
-                    cover
-                    rounded="xl"
-                    class="mx-auto img-display"
-                  >
-                  </v-img
-                  >
-                     <v-icon
-                      v-else
-                            icon="mdi-account"
-                            size="180"
-                            color="#635d56"
-                            class="mx-auto my-auto"
-                          ></v-icon>
-                 
-                </v-col>
-                <v-col cols="12" md="" class="mx-auto">
-                  <v-row>
-                    <v-col>
-                      <div class="box-group">
-                        <div class="t-md">กลุ่มที่</div>
-                        <div
-                          class="font-weight-bold"
-                          style="font-size: xxx-large"
-                        >
-                          {{ item.group.id }}
-                        </div>
-                      </div>
-                    </v-col>
-                    <v-col>
-                      <div class="box-group">
-                        <div class="t-md">หมายเลขผู้สมัคร</div>
-                        <div style="font-size: xxx-large">
-                          <div class="font-weight-bold" v-if="item.registerno">
-                            {{ item.registerno }}
-                          </div>
-                          <div class="font-weight-bold" v-else> - </div>
-                        </div>
-                      </div></v-col
-                    >
-                  </v-row>
-                  <div
-                    class="py-2 text-sub2 box-province mx-auto mx-md-1 my-4"
-                    v-if="item.zone"
-                  >
-                    <div class="font-weight-bold px-3">
-                      {{ item.zone.province.name }} |
-                      <span class="font-weight-medium">{{
-                        item.zone.name
-                      }}</span>
-                    </div>
-                  </div>
-                  <div class="font-weight-bold text-normal my-2 text-md-left">
-                    <div style="font-size: xx-large">
+              <div class=" text-left text-normal font-weight-bold" style="color:#e23972;">กลุ่มที่ {{ groupData.id  }}</div>
+              <div class="mb-4 text-left text-small font-weight-medium">{{ groupData.name  }}</div>
+              <div v-for="(item, i) in dataProfile" :key="i">
+                  <div class="font-weight-medium  my-2 text-left text-normal">
+                    <div style="font-size:20px">
                       <span> {{ item.firstName }}</span>
                       <span class="ml-3">
                         {{ item.lastName }}
                       </span>
-                    </div>
-
-                    <div class="mx-auto text-md-left text-sub2 mb-2">
-                      {{ item.group.name }}
-                    </div>
-
-                    <div class="text-sub2 text-left mt-5 text-medium-emphasis">
-                      <div class="font-weight-medium">
-                        <span class="font-weight-bold"> อายุ :</span>
-
-                        {{ item.age }} ปี
-                      </div>
-                      <div class="font-weight-medium">
-                        <span class="font-weight-bold">อาชีพ :</span>
-                        {{ item.job }}
-                      </div>
-                      <div class="font-weight-medium">
-                        <span class="font-weight-bold">การศึกษา :</span>
-                        {{ item.education }}
-                      </div>
+                      <!-- <span style="color:#e23972;font-size: large"> ( กลุ่มที่ {{ item.group.id }} )</span> -->
                     </div>
                   </div>
-                </v-col>
-              </v-row>
-
-              <v-row> </v-row>
-              <div class="text-left text-small mt-3 d-none">
-                <div class="text-small font-weight-bold">ช่องทางติดต่อ</div>
-                <v-divider class="my-1"></v-divider>
-
-                <div class="mt-2 d-flex justify">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    x="0px"
-                    y="0px"
-                    width="23"
-                    height="23"
-                    viewBox="0 0 50 50"
-                    class="mr-2"
-                  >
-                    <path
-                      d="M41,4H9C6.24,4,4,6.24,4,9v32c0,2.76,2.24,5,5,5h32c2.76,0,5-2.24,5-5V9C46,6.24,43.76,4,41,4z M37,19h-2c-2.14,0-3,0.5-3,2 v3h5l-1,5h-4v15h-5V29h-4v-5h4v-3c0-4,2-7,6-7c2.9,0,4,1,4,1V19z"
-                    ></path></svg
-                  ><span v-if="item.facebook"> {{ item.facebook }}</span
-                  ><span v-else> - </span>
-                </div>
-                <div class="mt-2 d-flex justify">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    x="0px"
-                    y="-5px"
-                    width="23"
-                    height="23"
-                    viewBox="0 0 50 50"
-                    class="mr-2"
-                  >
-                    <path
-                      d="M 11 4 C 7.134 4 4 7.134 4 11 L 4 39 C 4 42.866 7.134 46 11 46 L 39 46 C 42.866 46 46 42.866 46 39 L 46 11 C 46 7.134 42.866 4 39 4 L 11 4 z M 13.085938 13 L 21.023438 13 L 26.660156 21.009766 L 33.5 13 L 36 13 L 27.789062 22.613281 L 37.914062 37 L 29.978516 37 L 23.4375 27.707031 L 15.5 37 L 13 37 L 22.308594 26.103516 L 13.085938 13 z M 16.914062 15 L 31.021484 35 L 34.085938 35 L 19.978516 15 L 16.914062 15 z"
-                    ></path></svg
-                  ><span v-if="item.twitter"> {{ item.twitter }}</span
-                  ><span v-else> - </span>
-                </div>
-
-                <div class="mt-2 d-flex justify">
-                  <!-- <i class="far fa-tiktok"></i> -->
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    x="0px"
-                    y="0px"
-                    width="23"
-                    height="23"
-                    viewBox="0 0 50 50"
-                    class="mr-2"
-                  >
-                    <path
-                      d="M41,4H9C6.243,4,4,6.243,4,9v32c0,2.757,2.243,5,5,5h32c2.757,0,5-2.243,5-5V9C46,6.243,43.757,4,41,4z M37.006,22.323 c-0.227,0.021-0.457,0.035-0.69,0.035c-2.623,0-4.928-1.349-6.269-3.388c0,5.349,0,11.435,0,11.537c0,4.709-3.818,8.527-8.527,8.527 s-8.527-3.818-8.527-8.527s3.818-8.527,8.527-8.527c0.178,0,0.352,0.016,0.527,0.027v4.202c-0.175-0.021-0.347-0.053-0.527-0.053 c-2.404,0-4.352,1.948-4.352,4.352s1.948,4.352,4.352,4.352s4.527-1.894,4.527-4.298c0-0.095,0.042-19.594,0.042-19.594h4.016 c0.378,3.591,3.277,6.425,6.901,6.685V22.323z"
-                    ></path></svg
-                  ><span v-if="item.tiktok"> {{ item.tiktok }}</span
-                  ><span v-else> - </span>
-                </div>
               </div>
+              
             </v-card-item>
           </v-card></v-col
         >
@@ -184,6 +52,9 @@ export default {
     dataProfile: {
       type: Array,
     },
+    groupData:{
+      type:Object
+    }
   },
   data() {
     return {
diff --git a/src/components/search/CardUserGroup copy.vue b/src/components/search/CardUserGroup copy.vue
new file mode 100644
index 0000000..beb9f9e
--- /dev/null
+++ b/src/components/search/CardUserGroup copy.vue	
@@ -0,0 +1,464 @@
+<template>
+  <div class="pa-lg-8 pa-md-8 pa-sm-3 page-m-card" v-if="!check || cardCount">
+    <!-- {{ check }}{{ show }} -->
+    <!-- {{ result }} -->
+    <div
+      style="
+        background-color: #a8d18d;
+        box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
+          rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
+        border-radius: 20px;
+      "
+      class="pa-lg-10 pa-md-10 pa-sm-4 pa-2"
+    >
+      <div class="text-subtitle text-left mb-md-3">
+        <v-row align="center">
+          <v-col cols="auto" class="pa-0 pl-2 pt-2">
+            <v-avatar color="#f5e010" class="text-normal" size="50"
+              >{{ group.id }}
+            </v-avatar></v-col
+          >
+          <v-col> {{ group.name }}</v-col>
+        </v-row>
+      </div>
+      <!-- {{ result }} -->
+      <!-- {{ chunkedResults }} -->
+      <v-container>
+        <v-carousel
+          v-model="model"
+          height="auto"
+          style="max-width: 900px"
+          class="mx-auto"
+        >
+          <v-carousel-item
+            v-for="(chunk, i) in chunkedResults"
+            :value="i"
+            :key="i"
+          >
+            <v-row class="page-search">
+              <v-col :key="i" cols="12" md="12" lg="12">
+                <div class="text-sub2 mx-auto card-user" maxWidth="1000">
+                  <v-overlay
+                    class="align-center justify-center"
+                    scrim="#2a2a2adb"
+                    contained
+                    v-model="overlay"
+                  >
+                    <div
+                      class=""
+                      style="
+                        padding: 20px;
+                        border-radius: 10px;
+                        color: white;
+                        font-size: 25px;
+                      "
+                    >
+                      ไม่พบข้อมูลผู้สมัคร
+                    </div>
+                  </v-overlay>
+                  <div
+                    style="
+                      background: white;
+                      border-radius: 10px;
+                      min-height: 180px;
+                      display: flex;
+                      justify-content: center;
+                      align-items: center;
+                      flex-direction: column;
+                      text-align: center;
+                    "
+                    class="py-5"
+                  >
+                    <div v-for="(item, j) in chunk" :key="j" cols="12" md="4">
+                      <div class="font-weight-bold my-2">
+                        <div
+                          class="mx-auto txt-subtitle my-auto"
+                          style="margin: auto"
+                          v-if="item.firstName"
+                        >
+                          <span>{{ item.firstName }}</span>
+                          <span class="ml-3">{{ item.lastName }}</span>
+                        </div>
+                        <div v-else>-</div>
+                      </div>
+                    </div>
+                    <!-- <div class="font-weight-bold my-2 text-md-left">
+                      <div
+                        class="mt-3 mb-2"
+                        style="font-size: xx-large"
+                        v-if="item.firstName"
+                      >
+                        <span> {{ item.firstName }}</span>
+                        <span class="ml-3">
+                          {{ item.lastName }}
+                        </span>
+                      </div>
+                      <div v-else>-</div>
+                    </div> -->
+                  </div>
+                </div></v-col
+              >
+            </v-row>
+          </v-carousel-item>
+        </v-carousel>
+
+        <!-- <div class="text-subtitle my-10" v-else>ไม่พบผู้สมัคร</div> -->
+      </v-container>
+    </div>
+  </div>
+</template>
+<script>
+import { client } from "@/utils/trpc";
+export default {
+  props: {
+    check: {
+      type: Boolean,
+    },
+    dataProfile: {
+      type: Array,
+    },
+    group: {
+      type: Object,
+    },
+    province: {
+      type: Object,
+    },
+    district: {
+      type: Object,
+    },
+  },
+  computed: {
+    chunkedResults() {
+      const chunkSize = 3;
+      let chunks = [];
+      for (let i = 0; i < this.result.length; i += chunkSize) {
+        chunks.push(this.result.slice(i, i + chunkSize));
+      }
+      return chunks;
+    },
+  },
+  data() {
+    return {
+      overlay: false,
+      cardCount: 0,
+      allg: "",
+      checkdata: "",
+      show: false,
+      load: false,
+      result: [],
+      page: 1,
+      districtItems: [],
+      provinceItems: [],
+      items: [],
+      offset: 0,
+      count: 0,
+      model: 0,
+      colors: ["primary", "secondary", "yellow darken-2", "red", "orange"],
+    };
+  },
+  mounted() {
+    this.$emit("valueSent", true);
+    // this.load2 = true;
+    let data = {};
+    if (this.province) {
+      data.province = this.province;
+    }
+    // if (this.district) {
+    //   data.zone = this.district;
+    // }
+    if (this.group) {
+      data.group = this.group.id;
+    }
+    data.limit = 30;
+    if (data) {
+       client.user.getAllUser
+        .query(data)
+        .then((rs) => {
+          this.cardCount = rs.length;
+          if (rs.length) {
+            // rs.map((x)=>x.show=true)
+            this.show = true;
+            this.result = rs;
+          } else {
+            this.overlay = true;
+            this.show = false;
+            this.result = [
+              {
+                show: false,
+                id: 56,
+                firstName: "",
+                lastName: "",
+                title: "",
+                cid: "1767250304480",
+                age: " -",
+                job: " -",
+                education: " -",
+                vision: null,
+                reason: null,
+                group: {
+                  id: this.group.id,
+                  name: " -",
+                },
+                zone: {
+                  id: " -",
+                  name: this.district.name,
+                  province: {
+                    id: "",
+                    name: this.province.name,
+                  },
+                },
+              },
+            ];
+          }
+          console.log(rs);
+          this.load = false;
+          if (rs.length == 0) {
+            this.show = true;
+          }
+          this.$emit("valueSent", false);
+          // this.load2 = false;
+          // this.districtItems = rs;
+        })
+        .catch((error) => {
+          this.load = false;
+          console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
+        });
+
+      // let param = { input: JSON.stringify({ 0: data }) };
+      // var axios = require("axios");
+
+      // const config = {
+      //   method: "get",
+      //   url: "http://localhost:3000/api/user.getAllUser",
+      //   params: param,
+      //   headers: {},
+      // };
+
+      // axios(config)
+      //   .then((response) => {
+      //     const rs = response.data.result.data;
+      //     this.cardCount = rs.length;
+      //     if (rs.length) {
+      //       this.show = true;
+      //       this.result = rs;
+      //     } else {
+      //       this.overlay = true;
+      //       this.show = false;
+      //       this.result = [
+      //         {
+      //           show: false,
+      //           id: 56,
+      //           firstName: "",
+      //           lastName: "",
+      //           title: "",
+      //           cid: "1767250304480",
+      //           age: " -",
+      //           job: " -",
+      //           education: " -",
+      //           vision: null,
+      //           reason: null,
+      //           group: {
+      //             id: this.group.id,
+      //             name: " -",
+      //           },
+      //           zone: {
+      //             id: " -",
+      //             name: this.district.name,
+      //             province: {
+      //               id: "",
+      //               name: this.province.name,
+      //             },
+      //           },
+      //         },
+      //       ];
+      //     }
+      //     console.log(rs);
+      //     this.load = false;
+      //     if (rs.length == 0) {
+      //       this.show = true;
+      //     }
+      //     this.$emit("valueSent", false);
+      //   })
+      //   .catch((error) => {
+      //     this.load = false;
+      //     console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
+      //   });
+    }
+  },
+};
+</script>
+<style>
+.v-overlay__scrim {
+  opacity: 0.7;
+}
+.overay-box {
+  position: absolute;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  color: #f1f1f1;
+  width: 100%;
+  transition: 0.5s ease;
+  opacity: 0;
+  color: white;
+  font-size: 20px;
+  padding: 20px;
+  text-align: center;
+  z-index: 99999;
+}
+.text-medium-emphasis {
+  color: #3b3737c4;
+}
+div.v-window__container
+  > div.v-window__controls
+  > button.v-btn.v-btn--elevated.v-btn--icon.v-theme--light.v-btn--density-default.v-btn--size-default.v-btn--variant-elevated {
+  background-color: #3d763d8c;
+  color: white;
+}
+.v-carousel__controls {
+  margin-top: 40px;
+  border-bottom-right-radius: 10px;
+  border-bottom-left-radius: 10px;
+  background-color: #3d763d8c;
+  height: 23px;
+}
+.img-display-g {
+  height: 450px;
+}
+.box-group {
+  border-radius: 5px;
+  background-color: #ffcd68;
+  border-radius: 10px;
+  width: -webkit-fill-available;
+  width: fit-content;
+  min-width: 100%;
+  padding: 10px 2px;
+  height: 100%;
+}
+.line-r-g {
+  padding-left: 5px;
+  border-color: #ffcd68;
+  border-right: 0.2px solid #ffcd68;
+}
+.line-g {
+  border: 1px solid #ffcd68;
+  display: inline-flex;
+}
+.card-user {
+  position: relative;
+  /* height: 500px; */
+}
+.more {
+  width: 95%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin: auto;
+}
+.box-province {
+  border-radius: 5px;
+  background-color: #ffcd68;
+  border-radius: 10px;
+  width: -webkit-fill-available;
+  /* width: fit-content; */
+}
+
+@media only screen and (min-width: 0px) and (max-width: 700px) {
+  div.v-window__container
+    > div.v-window-item.v-window-item--active.v-carousel-item
+    > div
+    > div.v-responsive__content
+    > div
+    > div
+    > div {
+    padding: 0 !important;
+  }
+  div.v-col-md.v-col-12.mx-auto > div.font-weight-bold.my-2.text-md-left {
+    margin-top: 0px !important;
+    margin-bottom: 0px !important;
+  }
+  .v-carousel__controls {
+    height: 23px;
+  }
+  div.mx-auto.text-md-left.text-sub2.my-1 {
+    margin: 0 !important;
+  }
+  div.font-weight-bold.my-2.text-md-left > div.text-sub2.text-left.mt-5 {
+    margin-top: 0px !important;
+    line-height: 24px;
+  }
+  div.v-window__container
+    > div.v-window-item.v-window-item--active.v-carousel-item
+    > div
+    > div.v-responsive__content
+    > div
+    > div
+    > div
+    > div.v-card-item
+    > div
+    > div
+    > div.v-col-md.v-col-12.mx-auto
+    > div.font-weight-bold.my-2.text-md-left
+    > div.mt-3.mb-2 {
+    margin-top: 0px !important;
+    line-height: 38px;
+  }
+  div.v-card-item
+    > div
+    > div
+    > div.v-col-md.v-col-12.mx-auto
+    > div.v-row
+    > .v-col {
+    padding: 2px !important;
+  }
+  .box-group {
+    border-radius: 5px;
+    background-color: #ffcd68;
+    border-radius: 10px;
+    width: -webkit-fill-available;
+    /* width: fit-content; */
+    /* min-width: 90%; */
+    padding: 5px 0px;
+    height: 85px;
+    line-height: 37px;
+  }
+  .page-m-card {
+    margin: 20px 7px;
+  }
+  .page-search {
+    padding: 20px 0px;
+  }
+
+  .card-user {
+    max-height: auto !important;
+    height: auto !important;
+  }
+  .line-g {
+    display: inline-flex;
+  }
+  .box-province {
+    border-radius: 5px;
+    background-color: #ffcd68;
+    border-radius: 10px;
+    width: -webkit-fill-available;
+  }
+  .img-display-g {
+    height: 300px !important;
+  }
+  div.py-2.text-sub2.box-province.mx-auto.mx-md-1.my-4.mobile-box2 {
+    margin-top: 10px;
+    margin-bottom: 10px;
+  }
+}
+</style>
+<style scoped>
+@media only screen and (min-width: 0px) and (max-width: 700px) {
+  .text-subtitle {
+    font-size: 19px;
+    font-weight: 600;
+  }
+  .v-container {
+    width: 100%;
+    padding: 0px;
+  }
+}
+</style>
diff --git a/src/components/search/CardUserGroup.vue b/src/components/search/CardUserGroup.vue
index beb9f9e..0f13077 100644
--- a/src/components/search/CardUserGroup.vue
+++ b/src/components/search/CardUserGroup.vue
@@ -129,7 +129,7 @@ export default {
   },
   computed: {
     chunkedResults() {
-      const chunkSize = 3;
+      const chunkSize = 10;
       let chunks = [];
       for (let i = 0; i < this.result.length; i += chunkSize) {
         chunks.push(this.result.slice(i, i + chunkSize));
@@ -160,16 +160,16 @@ export default {
     this.$emit("valueSent", true);
     // this.load2 = true;
     let data = {};
-    if (this.province) {
-      data.province = this.province;
-    }
+    // if (this.province) {
+    //   data.province = this.province;
+    // }
     // if (this.district) {
     //   data.zone = this.district;
     // }
     if (this.group) {
       data.group = this.group.id;
     }
-    data.limit = 30;
+    data.limit = 50;
     if (data) {
        client.user.getAllUser
         .query(data)
diff --git a/src/components/search/SearchMain.vue b/src/components/search/SearchMain.vue
index cc8d404..624bd01 100644
--- a/src/components/search/SearchMain.vue
+++ b/src/components/search/SearchMain.vue
@@ -92,7 +92,7 @@
           </v-col>
         </v-row>
         <v-row>
-          <v-col cols="12" md="4">
+          <v-col cols="12" md="4" class="d-none">
             <!-- <v-text-field
               label="จังหวัด"
               variant="solo"
@@ -134,7 +134,7 @@
               :disabled="province == null"
             ></v-autocomplete>
           </v-col>
-          <v-col cols="12" md="4">
+          <v-col cols="12" md="6">
             <!-- <v-text-field
               label="กลุ่มอาชีพ"
               variant="solo"
@@ -161,7 +161,7 @@
               </template>
             </v-autocomplete>
           </v-col>
-          <v-col cols="12" md="4">
+          <v-col cols="12" md="6">
             <!-- <v-text-field
               label="กลุ่มอาชีพ"
               variant="solo"
@@ -202,7 +202,7 @@
             searchUserApi(0, '');
             showGroup = false;
           "
-          :disabled="group == null || province == null"
+          :disabled="group == null"
           :loading="load || load2"
           width="300"
           height="52px"
@@ -220,7 +220,7 @@
           :loading="load || load2"
           height="52px"
           stack
-          :disabled=" group == null || province == null"
+          :disabled=" group == null"
         >
           <div class="text-sub">ค้นหาต่างกลุ่มอาชีพ</div>
 
@@ -228,8 +228,7 @@
         </v-btn>
       </v-container>
       <div v-if="!showGroup">
-        <CardUser :dataProfile="result" v-if="result.length" class="mt-2" />
-
+        <CardUser :dataProfile="result" :groupData="searchGroup" v-if="result.length" class="mt-2" />
         <div
           v-if="result.length == 0 && this.show"
           class="my-10 text-sub2 txt-black"
@@ -242,9 +241,9 @@
             elevation="3"
             v-if="count > 1"
             v-model="page"
-            :length="Math.ceil(count / 2)"
+            :length="Math.ceil(count / 10)"
             rounded="circle"
-            @update:model-value="searchUser((this.page - 1) * 2)"
+            @update:model-value="searchUser((this.page - 1) * 10)"
             next-icon="mdi-menu-right"
             prev-icon="mdi-menu-left"
           ></v-pagination>
@@ -276,7 +275,6 @@
           :check="checkbox1"
           :group="groupx"
           :province="province"
-       
           v-if="showGroup"
           @value-sent="handleValueSent"
         />
@@ -324,6 +322,7 @@ export default {
       group: null,
       offset: 0,
       count: 0,
+      searchGroup:null
     };
   },
   methods: {
@@ -353,10 +352,10 @@ export default {
       let data = {
         offset: offset,
       };
-      if (this.province) {
-        data.province = this.province;
-        // data.province = this.province;
-      }
+      // if (this.province) {
+      //   data.province = this.province;
+      //   // data.province = this.province;
+      // }
       if (this.group && this.group.id) {
         // console.log(this.group.id);
         data.group = this.group.id;
@@ -407,12 +406,12 @@ export default {
       }
       let data = {
         offset: offset,
-        limit: 2,
+        limit: 10,
       };
-      if (this.province) {
-        data.province = this.province;
-        // data.province = this.province;
-      }
+      // if (this.province) {
+      //   data.province = this.province;
+      //   // data.province = this.province;
+      // }
       if (this.group) {
         if (this.allg !== "all") {
           data.group = this.group.id;
@@ -437,13 +436,13 @@ export default {
         })
         .catch((error) => {
           this.load = false;
-
           alert("ไม่สามารถโหลดข้อมูลได้");
           console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
         });
     },
     searchUserApi(offset, checkg) {
       this.allg = checkg;
+      this.searchGroup = this.group
       this.show = false;
       this.load = true;
       if (offset == 0) {
@@ -452,12 +451,12 @@ export default {
       // this.offset = (this.page - 1) * 10;
       let data = {
         offset: offset,
-        limit: 2,
+        limit: 10,
       };
-      if (this.province) {
-        data.province = this.province;
-        // data.province = this.province;
-      }
+      // if (this.province) {
+      //   data.province = this.province;
+      //   // data.province = this.province;
+      // }
 
       if (this.group) {
         if (checkg !== "all") {
@@ -502,6 +501,7 @@ export default {
             this.count = rs;
           })
           .catch((error) => {
+            this.count=0
             alert("ไม่สามารถโหลดข้อมูลได้");
             console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
           });