thainv-dev

Merge branch 'main' of http://work.gct.com.vn/minhnt/NSG_PORTAL_V2
thainv-dev: Layout Page Section
2024-07-05 11:57:41 +07:00 · 2024-07-05 11:41:49 +07:00 · 2024-07-05 11:41:38 +07:00 · 2024-07-05 11:02:04 +07:00 · 2024-07-05 10:39:07 +07:00 · 2024-07-05 10:29:08 +07:00
85 changed files with 2034 additions and 1000 deletions
@@ -22,99 +22,103 @@ body {
    font-family: $font-raleway;
 }

-%headings {
-    color: $color-text;
-    font-family: $font-gelasio;
-    line-height: 130%;
-    font-weight: 700;
-}
+// %headings {
+//     color: $color-text;
+//     font-family: $font-gelasio;
+//     line-height: 130%;
+//     font-weight: 700;
+// }

-%label {
-    color: $color-text;
-    font-family: $font-raleway;
-    line-height: 130%;
-    font-weight: 700;
-}
+// %label {
+//     color: $color-text;
+//     font-family: $font-raleway;
+//     line-height: 130%;
+//     font-weight: 700;
+// }

-%paragraph {
-    color: $color-paragraph;
-    font-family: $font-raleway;
-    line-height: 180%;
-    font-weight: 500;
-}
+// %paragraph {
+//     color: $color-paragraph;
+//     font-family: $font-raleway;
+//     line-height: 180%;
+//     font-weight: 500;
+// }

-h1, h2, h3, h4, h5, h6 {
-    font-family: $font-gelasio;
-}
+// h1, h2, h3, h4, h5, h6 {
+//     font-family: $font-gelasio;
+// }

-h1 a {
-    @extend %headings;
-    font-size: 64px;
-}
+// h1 a {
+//     @extend %headings;
+//     font-size: 64px;
+// }

-h2 a{
-    @extend %headings;
-    font-size: 44px;
-}
+// h2 a{
+//     @extend %headings;
+//     font-size: 44px;
+// }

-h3 a{
-    @extend %headings;
-    font-size: 24px;
-}
+// h3 a{
+//     @extend %headings;
+//     font-size: 24px;
+// }

-h4 a{
-    @extend %headings;
-    font-size: 20px;
-}
+// h4 a{
+//     @extend %headings;
+//     font-size: 20px;
+// }

-h5 a{
-    @extend %headings;
-    font-size: 18px;
-}
+// h5 a{
+//     @extend %headings;
+//     font-size: 18px;
+// }

-h6 a{
-    @extend %headings;
-    font-size: 16px;
-}
+// h6 a{
+//     @extend %headings;
+//     font-size: 16px;
+// }

-h6.h6-plus a {
-    @extend %headings;
-    font-size: 14px;
-    font-weight: 500;
-}
+// h6.h6-plus a {
+//     @extend %headings;
+//     font-size: 14px;
+//     font-weight: 500;
+// }


-label {
-    &.label-l1 {
-        @extend %label;
-        font-size: 18px;
-    }
+// label {
+//     &.label-l1 {
+//         @extend %label;
+//         font-size: 18px;
+//     }
    
-    &.label-l2 {
-        @extend %label;
-        font-size: 16px;
-    }
+//     &.label-l2 {
+//         @extend %label;
+//         font-size: 16px;
+//     }
    
-    &.label-l3 {
-        @extend %label;
-        font-size: 14px;
-    }
-}
+//     &.label-l3 {
+//         @extend %label;
+//         font-size: 14px;
+//     }
+// }



-p {
-    &.paragraph-p1 {
-        font-size: 18px;
-    }
+// p {
+//     &.paragraph-p1 {
+//         font-size: 18px;
+//     }

-    &.paragraph-p2 {
-        font-size: 16px;
-    }
+//     &.paragraph-p2 {
+//         font-size: 16px;
+//     }

-    &.paragraph-p2 {
-        font-size: 14px;
-    }
+//     &.paragraph-p2 {
+//         font-size: 14px;
+//     }
+// }
+
+a {
+    @apply hover:text-primary font-gelasio font-700 leading-130%;
 }

 figure {
@@ -125,27 +129,27 @@ img {
    object-fit: cover!important;
 }

-.content {
-    & p {
-        @apply mb-2 font-arial  leading-160%;
-    }
+// .content {
+//     & p {
+//         @apply mb-2 font-arial  leading-160%;
+//     }

-    & #title {
-        @apply font-merriweather font-bold leading-150%;
-    }
+//     & #title {
+//         @apply font-merriweather font-bold leading-150%;
+//     }

-    & #intro, & #sub {
-        @apply font-arial  font-medium leading-160%;
-    }
+//     & #intro, & #sub {
+//         @apply font-arial  font-medium leading-160%;
+//     }

-    & audio {
-        @apply w-full;
-    }
+//     & audio {
+//         @apply w-full;
+//     }

-    & document, & a, & custom-figure, & author {
-        @apply cursor-pointer text-primary-600;
-    }
-}
+//     & document, & a, & custom-figure, & author {
+//         @apply cursor-pointer text-primary;
+//     }
+// }

 div[layout="TYPE:Detail-LAYOUT:image"] {
    & p,& figure.align-center-image, & #sub, & #title, & #intro, & #breadcrumb, & #navigation__bottom {
@@ -167,4 +171,12 @@ div[layout="ARTICLE_PAGE"] {

 .container {
    max-width: 1385px;
+}
+
+.layout_container {
+
+    & > .section_layout {
+        @apply mt-12 first:mt-0;
+
+    }
 }
@@ -6,7 +6,7 @@ const props = defineProps<{ events: any[] }>()
    <div v-if="events?.length" class="mt-6">
        <h3 class="text-xl font-semibold after:content-[':']">Sự kiện</h3>
        <ul class="flex flex-col gap-2 list-disc ml-4 my-2 pl-3 flex-wrap">
-            <li v-for="(event, index) in events" :key="index" class="font-semibold text-primary-100">
+            <li v-for="(event, index) in events" :key="index" class="font-semibold text-primary">
                <nuxt-link :to="{ name: 'event-eventSlug', params: { eventSlug: event.code } }">{{ event.title }}</nuxt-link>
            </li>
        </ul>
@@ -274,7 +274,7 @@ async function submitSend() {}
        <li
          v-for="(index, item) in data.questionGeneral.length"
          :key="index"
-          :class="step >= index - 1 ? 'bg-primary-500 text-white transition-all delay-300' : 'bg-white text-primary-500'"
+          :class="step >= index - 1 ? 'bg-primary-500 text-white transition-all delay-300' : 'bg-white text-primary'"
          class="relative z-3 w-7 h-7 rounded-full flex items-center justify-center border-2 border-solid border-primary-500"
        >
          <template template v-if="step > index - 1"><Icon name="material-symbols:check-rounded" class="text-22px" /></template>
@@ -4,7 +4,7 @@ import DynamicComponent from "~/components/dynamic-page/page-component/templates
 import { useDynamicPageStore } from '~/stores/dynamic-page';
 const { currentPage } = storeToRefs(useDynamicPageStore());
 const props = defineProps<{
-  type?: string; // [TOP_NAVIGATION, BOTTOM_NAVIGATION]
+  type?: any; // [TOP_NAVIGATION, BOTTOM_NAVIGATION]
 }>();

 const defineTypeRecusive = {
@@ -1,15 +1,13 @@
 <script setup lang="ts"></script>
 <template>
  <div class="pt-5">
-    <div class="content p-3">
-    <span class="text-12px text-[#AFADB5] text-end block">Quảng full</span>
-    <img class="block w-full h-full" src="/assets/images/tienphong/main-ads-2.jpg" alt="">
+    <div class="content p-3 border-y-1px border-solid border-#000">
+    <img class="mx-auto max-h-[300px] object-cover" src="/assets/images/tienphong/ads_full.png" alt="">
  </div>
  </div>
 </template>
 <style scoped lang="scss">
 .content {
  font-size: 18px;
-  background-color: #eeeeee;
 }
 </style>
@@ -13,7 +13,6 @@ const definedDynamicComponent: Record<string, any> = {
 };

 const getCurrentComponent = computed(() => _props.settings.layout);
-
 const GET_PROPS = computed(() => {
  return () => {
    let props: any = {};
@@ -32,6 +31,7 @@ const GET_PROPS = computed(() => {

 <template>
  <component 
+    v-if="definedDynamicComponent[getCurrentComponent]"
    :is="definedDynamicComponent[getCurrentComponent]" 
    v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings, content: _props.content }" 
  />
@@ -11,7 +11,7 @@ const definedDynamicComponent: Record<string, any> = {
  [enumPageComponentTemplate[enumPageComponentKey.ADVERTISING]["ADVERTISING"]]: Advertisings,
 };

-const getCurrentComponent = computed(() => `${_props.settings.layout}`);
+const getCurrentComponent = computed(() => `${_props.settings.template}`);
 const GET_PROPS = computed(() => {
  return () => {
    let props: any = {};
@@ -26,8 +26,13 @@ const GET_PROPS = computed(() => {
    }
  };
 });
+// console.log(getCurrentComponent.value, 'quảng caosd ád')
 </script>

 <template>
-  <component :is="definedDynamicComponent[getCurrentComponent]" v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings }" />
+  <component 
+    v-if="definedDynamicComponent[getCurrentComponent]"
+    :is="definedDynamicComponent[getCurrentComponent]" 
+    v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings }" 
+  />
 </template>
@@ -1,15 +1,14 @@
 <script setup lang="ts">
 const type = ref("");
 import { enumPageComponentTemplates } from "@/definitions/enum";
-import { DEFAULT_QUERY_DROP } from "@/utils/parseSQL";
-import { getInputValue } from "@/utils/parseSQL";
+import { DEFAULT_QUERY_DROP, getInputValue } from "@/utils/parseSQL";

 const props = defineProps<{
  dataResult?: any;
  dataType?: any;
  dataQuery?: any;
  layout?: string;
-  label?: string;
+  label?: any;
 }>();

 const LAYOUT_PARSE = computed(() => {
@@ -50,6 +49,7 @@ const parseData = computed(() => {
  return result;
 });
 </script>
+
 <template>
  <article class="card-audio" :class="LAYOUT_PARSE['article_Class']" :style="LAYOUT_PARSE['article']">
    <img :src="parseData?.thumbnail ? parseData?.thumbnail : 'https://indiaeducationdiary.in/wp-content/uploads/2021/02/SD-default-image.png'" :alt="parseData?.title?.replace(/<[^>]+>/g, '')" />
@@ -67,18 +67,20 @@ const parseData = computed(() => {

      <div class="card-audio__type-category">
        <div class="card-audio__type" v-if="type">{{ type }}</div>
-        <nuxt-link v-if="parseData" class="card-audio__category" :style="LAYOUT_PARSE['category-article']" :class="LAYOUT_PARSE['category-article_Class']">{{
+        <nuxt-link to="#" class="card-audio__category" :style="LAYOUT_PARSE['category-article']" :class="LAYOUT_PARSE['category-article_Class']">{{
          parseData?.category?.title
        }}</nuxt-link>
-        <span v-else class="empty-block" style="height: 8px; width: 30px"></span>
      </div>
-      <nuxt-link>
-        <h2 v-html="parseData.title" v-if="parseData" :class="LAYOUT_PARSE['title_Class']" :style="LAYOUT_PARSE['h3.title']"></h2>
-        <span v-else class="empty-block" style="height: 8px"></span>
-      </nuxt-link>
+      
+        <h2 :class="LAYOUT_PARSE['title_Class']" :style="LAYOUT_PARSE['h3.title']">
+          <nuxt-link :to="`/bai-viet/${parseData?.code}`"><span v-html="parseData?.title"></span> </nuxt-link>
+        </h2>
    </div>
  </article>
-  <div v-html="LAYOUT_PARSE.styleClasses" style="display:none;"></div>
+  <div v-if="LAYOUT_PARSE.styleClasses" v-html="LAYOUT_PARSE.styleClasses" style="display:none;"></div>
+  <!-- <div>
+    aaaaaaa
+  </div> -->
 </template>

 <style lang="scss">
@@ -9,7 +9,7 @@ const props = defineProps<{
  dataType?: any;
  dataQuery?: any;
  layout?: string;
-  label?: string;
+  label?: any;
 }>();

 const LAYOUT_PARSE = computed(() => {
@@ -33,19 +33,24 @@ const parseData = computed(() => {
  >
    <div class="basic-article_thumbnail" :class="LAYOUT_PARSE['thumbnail_Class']" :style="LAYOUT_PARSE['div.basic-article_thumbnail']">
      <template v-if="parseData">
-        <img class="object-fit-cover" :src="parseData.thumbnail ? parseData.thumbnail : '/images/default-thumbnail.jpg'" :alt="parseData.title?.replace(/<[^>]+>/g, '')" />
+        <nuxt-link :to="`${parseData.code}`">
+          <img class="object-fit-cover" :src="parseData.thumbnail ? parseData.thumbnail : '/images/default-thumbnail.jpg'" :alt="parseData.title?.replace(/<[^>]+>/g, '')" />
+        </nuxt-link>
      </template>
      <span v-else class="empty-block" style="width: 100%; height: 100%; min-height: 50px"></span>
    </div>
    <div class="basic-article_content" :class="[!parseData && 'no-data']">
      <template v-if="parseData?.topics && parseData?.topics.length > 0">
        <nuxt-link class="article-card-default__topic" :to="`/${parseData?.topics[0].code}`" :style="LAYOUT_PARSE['topic']">
-          <h5>{{ parseData?.topics[0].title }}</h5>
+          <h5><nuxt-link :to="`/topic/${parseData?.topics[0].code}`">
+            {{ parseData?.topics[0].title }}</nuxt-link></h5>
        </nuxt-link>
      </template>
      <h3 class="line-clamp" :class="LAYOUT_PARSE['title_Class']" :style="LAYOUT_PARSE['h3.title']">
        <template v-if="parseData">
-          {{ parseData.title?.replace(/<[^>]+>/g, "") }}
+          <nuxt-link :to="`/bai-viet/${parseData.code}`">
+            {{ parseData.title?.replace(/<[^>]+>/g, "") }}
+          </nuxt-link>
        </template>
        <span v-else class="empty-block" style="height: 8px"></span>
      </h3>
@@ -0,0 +1,106 @@
+<script lang="ts" setup>
+import { enumPageComponentTemplates } from "@/definitions/enum";
+import { DEFAULT_QUERY_DROP } from "@/utils/parseSQL";
+import { getInputValue } from "@/utils/parseSQL";
+import { formatDate } from "@/utils/filters";
+
+const props = defineProps<{
+  dataResult?: any;
+  dataType?: any;
+  dataQuery?: any;
+  layout?: string;
+  label?: string;
+}>();
+
+const LAYOUT_PARSE = computed(() => {
+  const designObject = props.label ? getInputValue(props.label, "OBJECT") : {};
+  return Object.assign({}, designObject);
+});
+
+const emit = defineEmits(["selectComponent", "dropData"]);
+
+const selectComponent = () => {
+  emit("selectComponent");
+};
+
+const parseData = computed(() => {
+  if (!props.dataResult) return;
+  const result = getInputValue(props.dataResult, "OBJECT");
+  return result;
+});
+
+const drop = (e: any) => {
+  if (e.dataTransfer.getData(`${enumPageComponentTemplates.ARTICLE}`)) {
+    const data = e.dataTransfer.getData(`${enumPageComponentTemplates.ARTICLE}`);
+    const { dataType, dataResult } = JSON.parse(data);
+    const dataQuery = DEFAULT_QUERY_DROP(dataType, dataResult.id);
+    emit("dropData", {
+      dataType,
+      dataResult,
+      dataQuery: dataQuery,
+    });
+  }
+};
+</script>
+
+<template>
+  <article class="basic-article border-custom" :class="LAYOUT_PARSE['article_Class']"  :style="LAYOUT_PARSE['article']">
+    <div class="article_miss">
+      <template v-if="parseData">
+        <div class="article_miss_thumb custom-thumb" :style="{ backgroundImage: `url('${parseData.thumbnail ? parseData.thumbnail : '/images/default-thumbnail.jpg'}')` }"></div>
+        <div class="article_miss_content" :style="LAYOUT_PARSE['content']">
+          <h3 class="line-clamp text-white" :class="LAYOUT_PARSE['title_Class']" :style="LAYOUT_PARSE['h3.title']">
+            {{ parseData.title?.replace(/<[^>]+>/g, "") }}
+          </h3>
+        </div>
+      </template>
+      <div v-else class="empty-box"></div>
+    </div>
+
+    <div v-html="LAYOUT_PARSE.styleClasses" v-if="LAYOUT_PARSE.styles"  style="display: none"></div>
+  </article>
+</template>
+
+<style lang="scss" scoped>
+.article_miss {
+  height: 100%;
+  position: relative;
+  .article_miss_thumb {
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    position: relative;
+    border-radius: 12px;
+    cursor: pointer;
+    height: 100%;
+  }
+
+  .article_miss_content {
+    position: absolute;
+    z-index: 2;
+    bottom: -30px;
+    background-color: rgba(255, 93, 2, 0.7);
+    backdrop-filter: blur(2px);
+    width: 80%;
+    left: 10%;
+    padding: 16px 10px;
+    border-radius: 8px;
+    h3 {
+      font-size: 16px;
+      font-weight: 700;
+      line-height: 130%;
+      text-align: center;
+      // margin-bottom: 12px;
+      margin-bottom: 0;
+    }
+  }
+  .empty-box {
+    background-color: #409eff;
+    min-height: 60px;
+    height: 100%;
+    i {
+      font-size: 60px;
+    }
+  }
+}
+</style>
@@ -7,7 +7,7 @@ const props = defineProps<{
  dataType?: any;
  dataQuery?: any;
  layout?: string;
-  label?: string;
+  label?: any;
 }>();

 const LAYOUT_PARSE = computed(() => {
@@ -26,9 +26,6 @@ const parseData = computed(() => {
  <article
    class="basic-article border-custom"
    :class="LAYOUT_PARSE['article_Class']"
-    @click="selectComponent"
-    @dragover.prevent
-    @drop.stop.prevent="drop"
    :style="LAYOUT_PARSE['article']"
  >
    <!-- <div class="basic-article_thumbnail" :class="LAYOUT_PARSE['thumbnail_Class']" :style="LAYOUT_PARSE['div.basic-article_thumbnail']">
@@ -77,7 +74,7 @@ const parseData = computed(() => {
                    class="article_video_thumb" 
                    :style="{ backgroundImage: `url('${parseData.thumbnail ? parseData.thumbnail : '/images/default-thumbnail.jpg'}')` }"
                >
-                    <i class="ri-play-circle-line"></i>
+                  <Icon name="ri:play-circle-line" />
                </div>
                <div class="article_video_content">
                    <div>
@@ -88,20 +85,9 @@ const parseData = computed(() => {
                </div>
            </div>
        </template>
-        <div v-else>
-            <div class="empty-box">
-                <div class="d-flex justify-content-center align-items-center flex-column empty-block" style="background-color: #409eff;">
-                    <i class="ri-play-circle-line text-white"></i>
-                </div>
-                <div class="empty-block">
-                    <div style="height: 8px"></div>
-                    <div style="height: 8px"></div>
-                </div>
-            </div>
-        </div>
    </div>

-    <div v-html="LAYOUT_PARSE.styleClasses"></div>
+    <div v-if="LAYOUT_PARSE.styleClasses" v-html="LAYOUT_PARSE.styleClasses"></div>
  </article>
 </template>

@@ -110,6 +96,7 @@ const parseData = computed(() => {
        .article_video_container {
            display: flex;
            align-items: center;
+            
            .article_video_thumb {
                background-size: cover;
                background-repeat: no-repeat;
@@ -119,8 +106,10 @@ const parseData = computed(() => {
                width: 250px;
                height: 140px;
                border-radius: 2px;
-                margin: 10px;
                text-align: center;
+                display: flex;
+                justify-content: center;
+                align-items: center;
                &::after {
                    content: '';
                    position: absolute;
@@ -131,17 +120,18 @@ const parseData = computed(() => {
                    top: 0px;
                    left: 0px;
                }
-                i {
+                svg {
                    font-size: 40px;
                    color: white;
                    position: relative;
                    z-index: 2;
                }
            }
+
            .article_video_content {
                position: relative;
                z-index: 2;
-                margin: 10px 0px;
+                padding: 10px;
                > div {
                    background: #ffffff;
                }
@@ -1,13 +1,14 @@
 <script lang="ts" setup>
 import { enumPageComponentTemplates } from "@/definitions/enum";
 import { DEFAULT_QUERY_DROP, getInputValue } from "@/utils/parseSQL";
+import  { getResource } from "@/utils/resourceHandler";

 const props = defineProps<{
  dataResult?: any;
  dataType?: any;
  dataQuery?: any;
  layout?: string;
-  label?: string;
+  label?: any;
 }>();

 const LAYOUT_PARSE = computed(() => {
@@ -20,89 +21,51 @@ const parseData = computed(() => {
  const result = getInputValue(props.dataResult, "OBJECT");
  return result;
 });
+
+const playVideo = ref<boolean>(false)
+
+onMounted(() => {
+  getResource(JSON.parse(props.dataResult).detail)
+})
 </script>

 <template>
  <article
    class="basic-article border-custom"
    :class="LAYOUT_PARSE['article_Class']"
-    @click="selectComponent"
-    @dragover.prevent
-    @drop.stop.prevent="drop"
    :style="LAYOUT_PARSE['article']"
  >
-    <!-- <div class="basic-article_thumbnail" :class="LAYOUT_PARSE['thumbnail_Class']" :style="LAYOUT_PARSE['div.basic-article_thumbnail']">
-      <template v-if="parseData">
-        <img class="object-fit-cover" :src="parseData.thumbnail ? parseData.thumbnail : '/images/default-thumbnail.jpg'" :alt="parseData.title?.replace(/<[^>]+>/g, '')" />
-      </template>
-      <span v-else class="empty-block" style="width: 100%; height: 100%; min-height: 50px"></span>
-    </div>
-    <div class="basic-article_content" :class="[!parseData && 'no-data']">
-      <template v-if="parseData?.topics && parseData?.topics.length > 0">
-        <nuxt-link class="article-card-default__topic" :to="`/${parseData?.topics[0].code}`" :style="LAYOUT_PARSE['topic']">
-          <h5>{{ parseData?.topics[0].title }}</h5>
-        </nuxt-link>
-      </template>
-      <h3 class="line-clamp" :class="LAYOUT_PARSE['title_Class']" :style="LAYOUT_PARSE['h3.title']">
-        <template v-if="parseData">
-          {{ parseData.title?.replace(/<[^>]+>/g, "") }}
-        </template>
-        <span v-else class="empty-block" style="height: 8px"></span>
-      </h3>
-      <div class="article-card-default__bottom" v-if="LAYOUT_PARSE.layout === 'row'">
-        <span :style="LAYOUT_PARSE['time']" style="margin-right: 5px" :class="LAYOUT_PARSE['time_Class']">{{
-          formatDate(String(parseData?.createdOn), "DD/MM/YYYY | HH:mm")
-        }}</span>
-        <nuxt-link :style="LAYOUT_PARSE['category-article']" :class="LAYOUT_PARSE['category-article_Class']">{{ parseData?.category?.title }}</nuxt-link>
-      </div>
-      <p class="mb-0 line-clamp" :class="LAYOUT_PARSE['paragraph_Class']" :style="LAYOUT_PARSE['p.paragraph']">
-        <template v-if="parseData">
-          {{ parseData.intro?.replace(/<[^>]+>/g, "") }}
-        </template>
-        <span v-else class="empty-block" style="height: 5px"></span>
-      </p>
-      <div class="article-card-default__bottom" v-if="LAYOUT_PARSE?.layout !== 'row'" :style="LAYOUT_PARSE['metadata']">
-        <span :style="LAYOUT_PARSE['time']" style="margin-right: 5px" :class="LAYOUT_PARSE['time_Class']">{{
-          formatDate(String(parseData?.createdOn), "DD/MM/YYYY | HH:mm")
-        }}</span>
-        <nuxt-link :style="LAYOUT_PARSE['category-article']" :class="LAYOUT_PARSE['category-article_Class']">{{ parseData?.category?.title }}</nuxt-link>
-      </div>
-    </div>
-
-     -->
-
    <div class="article_video">
-        <template v-if="parseData">
-            <div 
-                class="article_video_thumb" 
-                :style="{ backgroundImage: `url('${parseData.thumbnail ? parseData.thumbnail : '/images/default-thumbnail.jpg'}')` }"
-            >
-                <div></div>
-                <div class="article_video_content">
-                    <span><i class="ri-play-circle-line"></i></span>
-                    <h3 class="line-clamp text-white" :class="LAYOUT_PARSE['title_Class']" :style="LAYOUT_PARSE['h3.title']">
-                        {{ parseData.title?.replace(/<[^>]+>/g, "") }}
-                    </h3>
-                    <p class="mb-0 line-clamp text-white" :class="LAYOUT_PARSE['paragraph_Class']" :style="LAYOUT_PARSE['p.paragraph']">
-                        {{ parseData.intro?.replace(/<[^>]+>/g, "") }}
-                    </p>
-                </div>
-            </div>
-        </template>
-        <div v-else class="empty-box">
-            <div class="d-flex justify-content-center align-items-center flex-column">
-                <i class="ri-play-circle-line text-white"></i>
-            </div>
-        </div>
+      <template v-if="parseData">
+          <div 
+            v-if="!playVideo"
+            class="article_video_thumb h-full" 
+            :style="{ backgroundImage: `url('${parseData.thumbnail ? parseData.thumbnail : '/images/default-thumbnail.jpg'}')` }"
+          >
+              <div></div>
+              <div class="article_video_content">
+                  <span><Icon name="ri:play-circle-line" class="text-white" /></span>
+                  <h3 class="line-clamp text-white" :class="LAYOUT_PARSE['title_Class']" :style="LAYOUT_PARSE['h3.title']">
+                      {{ parseData.title?.replace(/<[^>]+>/g, "") }}
+                  </h3>
+                  <p class="mb-0 line-clamp text-white" :class="LAYOUT_PARSE['paragraph_Class']" :style="LAYOUT_PARSE['p.paragraph']">
+                      {{ parseData.intro?.replace(/<[^>]+>/g, "") }}
+                  </p>
+              </div>
+          </div>
+          <video src=""></video>
+      </template>
    </div>

-    <div v-html="LAYOUT_PARSE.styleClasses"></div>
+    <div v-if="LAYOUT_PARSE.styleClasses" v-html="LAYOUT_PARSE.styleClasses"></div>
  </article>
 </template>

 <style lang="scss" scoped>
    .article_video {
-        .article_video_thumb {
+      @apply min-h-465px;
+      .article_video_thumb {
+            @apply flex flex-col justify-end min-h-465px;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
@@ -110,7 +73,7 @@ const parseData = computed(() => {
            z-index: 0;
            padding: 120px 85px 60px 85px;
            border-radius: 2px;
-            margin: 10px;
+            overflow: hidden;
            cursor: pointer;
            &::after {
                content: '';
@@ -139,19 +102,11 @@ const parseData = computed(() => {
                    font-weight: 400;
                }

-                i {
+                svg {
                    font-size: 80px;
                    color: #ed1c24;
                }
            }
        }
-        .empty-box {
-            background-color: #409eff;
-            margin: 10px;
-            min-height: 60px;
-            i {
-                font-size: 60px;
-            }
-        }
    }
 </style>
@@ -1,4 +1,5 @@
 export { default as Article_Card_Default } from './Card.vue'
 export { default as Article_Card_Audio } from './Audio.vue'
 export { default as Article_Card_Video } from './Video.vue'
-export { default as Article_Card_Video_Hightlight } from './VideoBackground.vue'
+export { default as Article_Card_Video_Hightlight } from './VideoBackground.vue'
+export { default as Article_Card_Miss_Hightlight } from './MissBackground.vue'
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { enumPageComponentTemplate, enumPageComponentKey, enumPageComponentLayouts } from "@/definitions/enum";
-import { Article_Card_Default, Article_Card_Audio, Article_Card_Video, Article_Card_Video_Hightlight } from "./index";
+import { Article_Card_Default, Article_Card_Audio, Article_Card_Video, Article_Card_Video_Hightlight,Article_Card_Miss_Hightlight } from "./index";

 const _props = defineProps<{
  settings: any;
@@ -13,6 +13,7 @@ const definedDynamicComponent: Record<string, any> = {
  [enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.ARTICLE]["ARTICLE_CARD"]]["CARD_AUDIO"]]: Article_Card_Audio,
  [enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.ARTICLE]["ARTICLE_CARD"]]["CARD_VIDEO"]]: Article_Card_Video,
  [enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.ARTICLE]["ARTICLE_CARD"]]["CARD_VIDEO_HIGHLIGHT"]]: Article_Card_Video_Hightlight,
+  [enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.ARTICLE]["ARTICLE_CARD"]]["CARD_MISS_HIGHLIGHT"]]: Article_Card_Miss_Hightlight,
 };

 const getCurrentComponent = computed(() => {
@@ -36,5 +37,9 @@ const GET_PROPS = computed(() => {
 </script>

 <template>
-  <component :is="definedDynamicComponent[getCurrentComponent]" v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings }" />
+  <component 
+    v-if="definedDynamicComponent[getCurrentComponent]"
+    :is="definedDynamicComponent[getCurrentComponent]" 
+    v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings }" 
+  />
 </template>
@@ -9,7 +9,7 @@ const _props = defineProps<{
  dataType?: any;
  dataQuery?: any;
  layout?: string;
-  label?: string;
+  label?: any;
 }>();
 const SETTING_OPTIONS = {
  BREADCRUMB_MAX_ELEMENT: 3,
@@ -2,7 +2,7 @@
 import { isEmpty } from "@/utils/lodash";

 const _props = defineProps<{
-  dataResult?: any[];
+  dataResult?: any;
 }>();
 const SETTING_OPTIONS = {
  BREADCRUMB_MAX_ELEMENT: 3,
@@ -33,5 +33,9 @@ const GET_PROPS = computed(() => {
 </script>

 <template>
-  <component :is="definedDynamicComponent[getCurrentComponent]" v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings }" />
+  <component 
+    v-if="definedDynamicComponent[getCurrentComponent]"
+    :is="definedDynamicComponent[getCurrentComponent]" 
+    v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings }" 
+  />
 </template>
@@ -32,5 +32,9 @@ const GET_PROPS = computed(() => {
 </script>

 <template>
-  <component :is="definedDynamicComponent[getCurrentComponent]" v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings }" />
+  <component
+    v-if="definedDynamicComponent[getCurrentComponent]" 
+    :is="definedDynamicComponent[getCurrentComponent]" 
+    v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings }" 
+  />
 </template>
@@ -3,9 +3,9 @@ import { isEmpty } from "@/utils/lodash";
 import { COLLECTION_QUERY_DROP, getValueStringWithKeyAndColon, getInputValue } from "@/utils/parseSQL";

 const _props = defineProps<{
-  dataResult?: any[];
+  dataResult?: any;
  dataQuery?: string;
-  label?: string;
+  label?: any;
 }>();

 const designObject = computed(() => {
@@ -26,7 +26,7 @@ const mapActivesToItems = (index: number) => {
      <template v-if="!isEmpty(component)">
        <div>
          <h3 :style="mapActivesToItems(index)['h3.categories']">
-            {{ component.title }}
+            <nuxt-link to="#">{{ component.title }}</nuxt-link>
          </h3>
        </div>
        <div v-html="designObject.styleClasses"></div>
@@ -3,9 +3,9 @@ import { isEmpty } from "@/utils/lodash";
 import { COLLECTION_QUERY_DROP, getValueStringWithKeyAndColon, getInputValue } from "@/utils/parseSQL";

 const _props = defineProps<{
-  dataResult?: any[];
+  dataResult?: any;
  dataQuery?: string;
-  label?: string;
+  label?: any;
 }>();

 const SETTING_OPTIONS = {
@@ -45,13 +45,11 @@ const mapActivesToItems = (index: number) => {
            <path d="M5.984 2.456V4.184H4.336V5.992H2.4V4.184H0.752V2.456H2.4V0.648H4.336V2.456H5.984Z" fill="black" />
          </svg>

-          <h3
-            :style="mapActivesToItems(index)['h3.categories']"
-          >
+          <h3 :style="mapActivesToItems(index)['h3.categories']">
            {{ component.title }}
          </h3>
        </div>
-        <div v-html="designObject.styleClasses"></div>
+        <div v-if="designObject.styleClasses" v-html="designObject.styleClasses"></div>
      </template>
    </div>
  </div>
@@ -31,5 +31,9 @@ const GET_PROPS = computed(() => {
 </script>

 <template>
-  <component :is="definedDynamicComponent[getCurrentComponent]" v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings, content: _props.content }" />
+  <component 
+    v-if="definedDynamicComponent[getCurrentComponent]"
+    :is="definedDynamicComponent[getCurrentComponent]" 
+    v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings, content: _props.content }" 
+  />
 </template>
@@ -31,6 +31,7 @@ const GET_PROPS = computed(() => {

 <template>
  <component 
+    v-if="definedDynamicComponent[getCurrentComponent]"
    :is="definedDynamicComponent[getCurrentComponent]" 
    v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings }" 
  />
@@ -5,10 +5,10 @@ import { isEmpty } from "@/utils/lodash";
 import { enumPageComponentTemplates } from "@/definitions/enum";

 const _props = defineProps<{
-  dataResult?: any[];
+  dataResult?: any;
  dataQuery?: string;
  layout?: string;
-  label?: string;
+  label?: any;
  content?: any;
 }>();

@@ -5,10 +5,10 @@ import { isEmpty } from "@/utils/lodash";
 import { enumPageComponentTemplates } from "@/definitions/enum";

 const _props = defineProps<{
-  dataResult?: any[];
+  dataResult?: any;
  dataQuery?: string;
  layout?: string;
-  label?: string;
+  label?: any;
  content?: any;
 }>();

@@ -30,5 +30,9 @@ const GET_PROPS = computed(() => {
 </script>

 <template>
-  <component :is="definedDynamicComponent[getCurrentComponent]" v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings, content: _props.content }" />
+  <component 
+    v-if="definedDynamicComponent[getCurrentComponent]"
+    :is="definedDynamicComponent[getCurrentComponent]" 
+    v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings, content: _props.content }" 
+  />
 </template>
@@ -0,0 +1 @@
+export { default as Misses_Default } from './misses/Default.vue'
@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+import { enumPageComponentTemplate, enumPageComponentKey, enumPageComponentLayouts } from "@/definitions/enum";
+import { Misses_Default } from "./index";
+
+const _props = defineProps<{
+  settings: any;
+  component?: any;
+  content?: any;
+}>();
+const definedDynamicComponent: Record<string, any> = {
+  [enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.COLLECTION]["CATEGORY"]}`]["MISSES_COLLECTION_DEFAULT"]]: Misses_Default,
+};
+
+const getCurrentComponent = computed(() => _props.settings.layout);
+const GET_PROPS = computed(() => {
+  return () => {
+    let props: any = {};
+    if (_props.settings) {
+      for (const [key, value] of Object.entries(_props.settings)) {
+        props = {
+          ...props,
+          [key]: value,
+        };
+      }
+      return props;
+    }
+  };
+});
+</script>
+
+<template>
+  <component 
+    v-if="definedDynamicComponent[getCurrentComponent]"
+    :is="definedDynamicComponent[getCurrentComponent]" 
+    v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings, content: _props.content }" 
+  />
+</template>
@@ -0,0 +1,182 @@
+<script setup lang="ts">
+import DynamicComponent from "~/components/dynamic-page/page-component/templates/index.vue";
+import { COLLECTION_QUERY_DROP, getValueStringWithKeyAndColon, getInputValue } from "@/utils/parseSQL";
+import { isEmpty, groupBy } from "lodash";
+import { enumPageComponentTemplates } from "@/definitions/enum";
+const emit = defineEmits(["dropComponent", "dropData", "selectComponent"]);
+const _props = defineProps<{
+  dataResult?: any;
+  dataQuery?: string;
+  layout?: string;
+  label?: string;
+  content?: any;
+}>();
+
+const SETTING_OPTIONS = {
+  MAX_ELEMENT: 6,
+  TEMPLATE: "TYPE:Card",
+  LAYOUT: "TYPE:Card_MissHightLight",
+};
+
+const COMPONENT = {
+  taxonomy: enumPageComponentTemplates.ARTICLE,
+};
+
+const LAYOUT_PARSE = computed(() => {
+  // console.log(_props.label);
+  return _props.label ? getInputValue(_props.label, "OBJECT") : {};
+});
+
+const _dataResult = computed(() => {
+  let _components = Array(Number(LAYOUT_PARSE.value.MAX) || SETTING_OPTIONS.MAX_ELEMENT).fill(null);
+  const result = getInputValue(_props.dataResult, "ARRAY");
+  result &&
+    result.length > 0 &&
+    _components.map((_: any, index: any) => {
+      _components[index] = result[index] || null;
+    });
+  return _components;
+});
+
+async function dropData(data: any) {
+  if (data) {
+    const { dataResult, dataType } = data;
+    const checkDataResult = getInputValue(_props.dataResult, "ARRAY");
+    const result = _props.dataResult ? [...checkDataResult, { ...dataResult }] : [{ ...dataResult }];
+    const getDataQuery = _props.dataQuery ? COLLECTION_QUERY_DROP(dataType, getValueStringWithKeyAndColon(_props.dataQuery) + "," + dataResult.id) : COLLECTION_QUERY_DROP(dataType, dataResult.id);
+
+    emit("dropData", {
+      dataResult: result,
+      dataType,
+      dataQuery: getDataQuery,
+    });
+  }
+}
+
+const selectComponent = () => {
+  emit("selectComponent");
+};
+
+const mapActivesToItems = (index: number) => {
+  if (LAYOUT_PARSE.value && LAYOUT_PARSE.value.listCss) {
+    return LAYOUT_PARSE.value.listCss[index] || {};
+  }
+  return {};
+};
+</script>
+
+<template>
+  <section class="gallery" :class="[LAYOUT_PARSE['div.collection-container_Class'], LAYOUT_PARSE['collection_Class']]" @click="selectComponent" :style="LAYOUT_PARSE['div.collection-container']">
+    <div class="wrap" v-for="(component, index) in _dataResult" :key="index">
+      <DynamicComponent
+        class="abc"
+        :settings="{
+          template: SETTING_OPTIONS.TEMPLATE,
+          layout: SETTING_OPTIONS.LAYOUT,
+          label: { ...mapActivesToItems(Number(index)) },
+          dataResult: !isEmpty(component) ? { ...component } : null,
+        }"
+        :component="COMPONENT"
+        @drop-data="dropData"
+      />
+    </div>
+  </section>
+  <!-- <conllection
+    class="collection-container border-custom overflow-hidden"
+    :class="[LAYOUT_PARSE['div.collection-container_Class'], LAYOUT_PARSE['collection_Class']]"
+    @click="selectComponent"
+    :style="LAYOUT_PARSE['div.collection-container']"
+  >
+    <DynamicComponent
+      v-for="(component, index) in _dataResult"
+      :key="index"
+      :class="[index === 0 || index === 1 ? 'row-span-3' : index === 2 || index === 3 ? 'row-span-2' : 'row-span-1']"
+      :settings="{
+        template: SETTING_OPTIONS.TEMPLATE,
+        layout: SETTING_OPTIONS.LAYOUT,
+        label: { ...mapActivesToItems(Number(index)) },
+        dataResult: !isEmpty(component) ? { ...component } : null,
+      }"
+      :component="COMPONENT"
+      @drop-data="dropData"
+    />
+  </conllection> -->
+  <div v-if="LAYOUT_PARSE.styleClasses" v-html="LAYOUT_PARSE.styleClasses" style="display: none"></div>
+</template>
+
+<style lang="scss" scoped>
+.gallery {
+  column-count: 4;
+  -webkit-column-count: 4;
+  -moz-column-count: 4;
+  gap: 16px;
+
+  .wrap {
+    position: relative;
+    width: 100%;
+    &:nth-child(1),
+    &:nth-child(2) {
+      padding-top: 615px;
+    }
+    &:nth-child(3),
+    &:nth-child(5) {
+      padding-top: 358px;
+    }
+
+    &:nth-child(4),
+    &:nth-child(6) {
+      margin-top: 16px;
+      padding-top: 241px;
+    }
+
+    & > .abc {
+      position: absolute;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      padding-bottom: 30px;
+      // margin: 10px 0;
+    }
+  }
+  .row-span-3 {
+    // grid-row: span 3 / span 3;
+    // height: 585px;
+
+    // margin: 10px 0;
+    // &:nth-child(1) {
+    //   background-color: red;
+    // }
+    // &:nth-child(2) {
+    //   background-color: yellow;
+    // }
+  }
+  .row-span-2 {
+    // margin: 10px 0;
+    // grid-row: span 2 / span 2;
+    // height: 328px;
+    // background-color: aqua;
+    // .basic-article {
+    // }
+  }
+  .row-span-1 {
+    // grid-row: span 1 / span 1;
+    // height: 211px;
+    // background-color: green;
+
+    // .basic-article {
+    // }
+  }
+}
+
+.image img {
+  height: auto;
+  width: 100%;
+}
+.collection-container {
+  // display: grid;
+  // grid-template-columns: repeat(4, 1fr);
+  // grid-template-rows: repeat(3, 1fr);
+  gap: 20px;
+  column-count: 4;
+}
+</style>
@@ -1 +1,2 @@
 export { default as Article_Collection } from './articles/index.vue'
+export { default as Category_Collection } from './categories/index.vue'
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { enumPageComponentTemplate, enumPageComponentKey, enumPageComponentLayouts } from "@/definitions/enum";
-import { Article_Collection } from "./index";
+import { Article_Collection, Category_Collection } from "./index";

 const _props = defineProps<{
  settings: any;
@@ -9,6 +9,7 @@ const _props = defineProps<{
 }>();
 const definedDynamicComponent: Record<string, any> = {
  [enumPageComponentTemplate[enumPageComponentKey.COLLECTION]["ARTICLE"]]: Article_Collection,
+  [enumPageComponentTemplate[enumPageComponentKey.COLLECTION]["CATEGORY"]]: Category_Collection,
 };

 const getCurrentComponent = computed(() => _props.settings.template);
@@ -30,5 +31,9 @@ const GET_PROPS = computed(() => {
 </script>

 <template>
-  <component :is="definedDynamicComponent[getCurrentComponent]" v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings, content: _props.content }" />
+  <component 
+    v-if="definedDynamicComponent[getCurrentComponent]"
+    :is="definedDynamicComponent[getCurrentComponent]" 
+    v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings, content: _props.content }" 
+  />
 </template>
@@ -36,5 +36,9 @@ const GET_PROPS = computed(() => {
 </script>

 <template>
-  <component :is="definedDynamicComponent[getCurrentComponent]" v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings, content: _props.content }" />
+  <component 
+    v-if="definedDynamicComponent[getCurrentComponent]"
+    :is="definedDynamicComponent[getCurrentComponent]" 
+    v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings, content: _props.content }" 
+  />
 </template>
@@ -6,7 +6,7 @@ import RecusiveNavItem from "@/components/dynamic-page/page-component/templates/
 import { buildTree } from "@/utils/recusive";

 const _props = defineProps<{
-  content?: any[];
+  content?: any;
  component?: any;
 }>();
 </script>
@@ -32,6 +32,7 @@ const GET_PROPS = computed(() => {

 <template>
  <component 
+    v-if="definedDynamicComponent[getCurrentComponent]"
    :is="definedDynamicComponent[getCurrentComponent]" 
    v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings, content: _props.content }" 
  />
@@ -19,7 +19,9 @@ const setGlobalState = (id: any) => {
        <div v-for="(record) in props.records" :key="record.id" class="navigation-branch cursor-pointer">
            <template v-if="record && record.childs && record.childs.length > 0 && record.typeChild === enumPageComponentStaticChild.DEFAULT">
                <div class="navigation-submenu">
-                    <div class="navigation_title ">{{ record?.title }}</div>
+                    <div class="navigation_title">
+                        <nuxt-link :to="record?.slug" class="!font-arial !font-400">{{ record?.title }}</nuxt-link>
+                    </div>
                    <div class="navigation-item submenu-container dropdown-container">
                        <RecusiveNavItem :records="record.childs" />
                    </div>
@@ -28,7 +30,9 @@ const setGlobalState = (id: any) => {
            <template v-else-if="record.typeChild === enumPageComponentStaticChild.LAYOUT">
                <div class="navigation-submenu">
                    <div class="position-relative ps-3">
-                        <div class="navigation_title ">{{ record?.title }}</div>
+                        <div class="navigation_title ">
+                            <nuxt-link :to="record?.slug" class="!font-arial !font-400">{{ record?.title }}</nuxt-link>
+                        </div>
                    </div>
                    <div class="full-layout dropdown-container">
                        <template v-if="record.data">
@@ -40,7 +44,9 @@ const setGlobalState = (id: any) => {
                </div>
            </template>
            <template v-else>
-                <div class="navigation_title navigation-item" >{{ record?.title }}</div>
+                <div class="navigation_title navigation-item" >
+                    <nuxt-link :to="record?.slug" class="!font-arial !font-400">{{ record?.title }}</nuxt-link>
+                </div>
            </template>
        </div>
    </div>
@@ -4,7 +4,7 @@ import DynamicComponent from "~/components/dynamic-page/page-component/templates
 import { getInputValue } from "@/utils/parseSQL";

 const _props = defineProps<{
-  dataResult?: any[];
+  dataResult?: any;
  dataQuery?: string;
  component?: any;
 }>();
@@ -32,6 +32,7 @@ const GET_PROPS = computed(() => {

 <template>
  <component 
+    v-if="definedDynamicComponent[getCurrentComponent]"
    :is="definedDynamicComponent[getCurrentComponent]" 
    v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings, content: _props.content }" 
  />
@@ -33,7 +33,8 @@ const GET_PROPS = computed(() => {
 </script>

 <template>
-  <component 
+  <component
+    v-if="definedDynamicComponent[getCurrentComponent]" 
    :is="definedDynamicComponent[getCurrentComponent]" 
    v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings, content: _props.content }" 
  />
@@ -3,7 +3,7 @@ import { buildTree } from "@/utils/recusive";
 import RecusiveNavItem from "@/components/dynamic-page/page-component/templates/navigations/components/RecusiveNavItem.vue";

 const _props = defineProps<{
-  content?: any[];
+  content?: any;
  component?: any;
 }>();

@@ -32,6 +32,7 @@ const GET_PROPS = computed(() => {

 <template>
  <component 
+    v-if="definedDynamicComponent[getCurrentComponent]"
    :is="definedDynamicComponent[getCurrentComponent]" 
    v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings, content: _props.content }" 
  />
@@ -1,4 +1,4 @@
 // export { default as Weather_Day } from './weathers/WeatherDay.vue'
 // export { default as Comment_Default } from './comments/Default.vue'
 export { default as Other_Weather } from './weathers/index.vue'
-export { default as Other_Secutities } from './securities/index.vue'
+export { default as Other_Stock } from './stocks/index.vue'
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { enumPageComponentTemplate, enumPageComponentKey, enumPageComponentLayouts } from "@/definitions/enum";
-import { Other_Weather, Other_Secutities } from "./index";
+import { Other_Weather, Other_Stock } from "./index";

 const _props = defineProps<{
  settings: any;
@@ -9,7 +9,7 @@ const _props = defineProps<{
 }>();
 const definedDynamicComponent: Record<string, any> = {
  [enumPageComponentTemplate[enumPageComponentKey.OTHER]["WEATHER"]]: Other_Weather,
-  [enumPageComponentTemplate[enumPageComponentKey.OTHER]["SECURITIES"]]: Other_Secutities,
+  [enumPageComponentTemplate[enumPageComponentKey.OTHER]['STOCK']]: Other_Stock,
  // [enumPageComponentTemplate[enumPageComponentKey.ARTICLE]["ARTICLE_DETAIL"]]: Article_Detail,
 };
 const getCurrentComponent = computed(() => _props.settings.template);
@@ -30,5 +30,9 @@ const GET_PROPS = computed(() => {
 </script>

 <template>
-  <component :is="definedDynamicComponent[getCurrentComponent]" v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings }" />
+  <component 
+    v-if="definedDynamicComponent[getCurrentComponent]"
+    :is="definedDynamicComponent[getCurrentComponent]" 
+    v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings }" 
+  />
 </template>
@@ -1,15 +0,0 @@
-<script setup lang="ts"></script>
-<template>
-  <div>chứng khoán</div>
-</template>
-<style lang="scss" scoped>
-div {
-  width: 100%;
-  height: 200px;
-  background-color: #ededed;
-  font-size: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-</style>
@@ -1 +0,0 @@
-export { default as Securities_Default } from './Securities.vue'
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+  import JSWidget from '@/components/widget/JSwidget.vue';
+
+  const widgetOptions = {
+    "locale": "vi",
+    "price_line_color": "#71BDDF",
+    "grid_color": "#999999",
+    "label_color": "#999999",
+    "width": "350px",
+    "height": "250px"
+  }
+</script>
+<template>
+  <div>
+    <JSWidget 
+      CONTAINER_ID="default_widget_[123123]" 
+      SCRIPT_ID="12312312" 
+      SCRIPT_SRC="https://www.fireant.vn/Scripts/web/widgets.js" 
+      :options="widgetOptions" 
+      widgetKey="FireAnt" 
+    />
+  </div>
+</template>
+<style lang="scss" scoped>
+div {
+  width: 100%;
+  height: 200px;
+  background-color: #ededed;
+  font-size: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>
@@ -0,0 +1 @@
+export { default as Stock_Default } from './334x641.vue'
@@ -1,15 +1,14 @@
 <script lang="ts" setup>
 import { enumPageComponentTemplate, enumPageComponentKey, enumPageComponentLayouts } from "@/definitions/enum";
+import { Stock_Default } from "./index";

-// import { Article_Card, Article_Detail_Video, Article_Detail_Podcast, Article_Detail_General, Article_Detail_Image } from "./index";
-import { Securities_Default } from "./index";
 const _props = defineProps<{
  settings: any;
  component?: any;
  content?: any;
 }>();
 const definedDynamicComponent: Record<string, any> = {
-  [enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.OTHER]["SECURITIES"]]["SECURITIES_DEFAULT"]]: Securities_Default,
+  [enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.OTHER]['STOCK']]['STOCK_DEFAULT']]: Stock_Default,
 };

 const getCurrentComponent = computed(() => `${_props.settings.layout}`);
@@ -30,5 +29,9 @@ const GET_PROPS = computed(() => {
 </script>

 <template>
-  <component :is="definedDynamicComponent[getCurrentComponent]" v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings }" />
-</template>
+  <component 
+    v-if="definedDynamicComponent[getCurrentComponent]"
+    :is="definedDynamicComponent[getCurrentComponent]" 
+    v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings }" 
+  />
+</template>
@@ -32,6 +32,7 @@ const GET_PROPS = computed(() => {

 <template>
  <component 
+    v-if="definedDynamicComponent[getCurrentComponent]"
    :is="definedDynamicComponent[getCurrentComponent]" 
    v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings, content: _props.content }" 
  />
@@ -5,15 +5,15 @@ import { COLLECTION_PAGING_QUERY_DROP, getInputValue } from "@/utils/parseSQL";
 const router = useRouter();
 const route = useRoute();

-const store = reactive({
-  component: usePageComponentStore(),
-});
+// const store = reactive({
+//   component: usePageComponentStore(),
+// });

 const _props = defineProps<{
-  dataResult?: any[];
+  dataResult?: any;
  dataQuery?: string;
  component?: any;
-  label?: string;
+  label?: any;
 }>();

 const SETTING_OPTIONS = {
@@ -79,12 +79,12 @@ const loadPage = async (page: number) => {
  } else {
    newDataQuery = _props.component?.settings?.dataQuery + ` Page[${page}]`;
  }
-  const res = await store.component.getOverviewPageComponentById(Number(_props.component?.id), newDataQuery);
-  const data = getInputValue(res?.settings?.dataResult, "OBJECT");
-  if (Object.keys(data).length > 0) {
-    totals.value = data.Total;
-    listArticlePaging.value = data?.Data || [];
-  }
+  // const res = await store.component.getOverviewPageComponentById(Number(_props.component?.id), newDataQuery);
+  // const data = getInputValue(res?.settings?.dataResult, "OBJECT");
+  // if (Object.keys(data).length > 0) {
+  //   totals.value = data.Total;
+  //   listArticlePaging.value = data?.Data || [];
+  // }
 };

 const handleNextPrev = (type: "+" | "-") => {
@@ -31,6 +31,7 @@ const GET_PROPS = computed(() => {

 <template>
  <component 
+    v-if="definedDynamicComponent[getCurrentComponent]"
    :is="definedDynamicComponent[getCurrentComponent]" 
    v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings }" 
  />
@@ -31,6 +31,7 @@ const GET_PROPS = computed(() => {

 <template>
  <component 
+    v-if="definedDynamicComponent[getCurrentComponent]"
    :is="definedDynamicComponent[getCurrentComponent]" 
    v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings }" 
  />
@@ -0,0 +1,583 @@
+<script setup lang="ts">
+import RecusiveSection from "@/components/dynamic-page/page-section/RecusiveSection.vue";
+import { getInputValue } from "@/utils/parseSQL";
+import { enumPageSectionLayouts, enumPageSectionTemplate, enumPageSectionKey } from "~/definitions/enum";
+import type { PageSection } from "@/server/models/dynamic-page/index";
+import { formatDate } from '@/utils/filters'
+const emit = defineEmits(["dropComponent", "dropData", "selectComponent"]);
+
+
+const { categoryTree } = storeToRefs(useCategoryStore());
+const { currentArticle } = storeToRefs(useArticleStore())
+if(categoryTree.value) {
+await useCategoryStore().fetchBySiteId()
+}
+const props = defineProps<{
+  layout?: string;
+  content?: any;
+  settings: any;
+  section: PageSection;
+}>();
+
+const defineTypeRecusive = {
+  COMPONENT: "component",
+  SECTION: "section",
+};
+
+const SETTING_OPTIONS = computed(() => {
+  let _setting_options = {};
+  switch (props.layout) {
+    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.ARTICLE]["DETAIL"]]["DEFAULT"]:
+      _setting_options = {
+        MAX_ELEMENT: 2,
+      };
+      break;
+    default:
+      _setting_options = {
+        MAX_ELEMENT: 1,
+      };
+      break;
+  }
+  return _setting_options;
+});
+
+const designObject = computed(() => {
+  // không truyền lable là chữ lên sẽ lỗi
+  return props?.settings?.label ? getInputValue(props.settings.label, "OBJECT") : {};
+});
+
+const CLASS_FOR_SECTION = computed(() => {
+  let _classForSection = {};
+  switch (props.layout) {
+    case enumPageSectionLayouts[`${enumPageSectionTemplate[enumPageSectionKey.ARTICLE]["DETAIL"]}`]["DEFAULT"]:
+      _classForSection = {
+        section_layout: "section_layout two_col_layout tow_row_layout",
+        section_layout_value: enumPageSectionLayouts[`${enumPageSectionTemplate[enumPageSectionKey.ARTICLE]["DETAIL"]}`]["DEFAULT"],
+      };
+      break;
+    default:
+      _classForSection = {
+        section_layout: "section_layout basic_column",
+      };
+      break;
+  }
+  return _classForSection;
+});
+
+
+const LAYOUT_PARSE = computed(() => {
+  return props.settings?.label ? getInputValue(props.settings.label, "OBJECT") : {};
+});
+
+const mapActivesToItems = (index: number) => {
+  if (LAYOUT_PARSE.value && LAYOUT_PARSE.value.listCss) {
+    return LAYOUT_PARSE.value.listCss[index] || {};
+  }
+  return {};
+};
+
+const currentCategoryTree = findElementPathById(categoryTree.value, currentArticle.value.categoryId);
+function findElementPathById(categories: any[], targetId: number, path: any[] = []) {
+  for (const category of categories) {
+    const currentPath = [...path, { title: category.title, code: category.code }];
+    if (category.id === targetId) {
+      return currentPath;
+    }
+    if (category.children) {
+      const result: any = findElementPathById(category.children, targetId, currentPath);
+      if (result) {
+        return result;
+      }
+    }
+  }
+  return null;
+}
+</script>
+
+<template>
+  <div class="section_layout border-custom four_col_layout" :style="LAYOUT_PARSE['div.section_layout']">
+    <div class="left">
+      <div>
+        <div class="audio">
+          <div class="play">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path
+                d="M24 12C24 18.6562 18.6094 24 12 24C5.34375 24 0 18.6562 0 12C0 5.39062 5.34375 0 12 0C18.6094 0 24 5.39062 24 12ZM8.25 7.875V16.125C8.25 16.5469 8.4375 16.9219 8.8125 17.1094C9.14062 17.3438 9.60938 17.2969 9.9375 17.1094L16.6875 12.9844C17.0156 12.7969 17.25 12.4219 17.25 12C17.25 11.625 17.0156 11.25 16.6875 11.0625L9.9375 6.9375C9.60938 6.70312 9.14062 6.70312 8.8125 6.9375C8.4375 7.125 8.25 7.5 8.25 7.875Z"
+                fill="#8E8E8E"
+              />
+            </svg>
+          </div>
+
+          <div class="time">
+            <span>20:42</span>
+          </div>
+          <div class="timeline">
+            <input type="range" name="" id="" />
+          </div>
+        </div>
+
+        <div class="buttons">
+          <div class="actions">
+            <span class="copy">
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path
+                  d="M12 3V0H8.5C7.65625 0 7 0.6875 7 1.5V10.5C7 11.3438 7.65625 12 8.5 12H14.5C15.3125 12 16 11.3438 16 10.5V4H13C12.4375 4 12 3.5625 12 3ZM13 0V3H16L13 0ZM6 11V4H1.5C0.65625 4 0 4.6875 0 5.5V14.5C0 15.3438 0.65625 16 1.5 16H7.5C8.3125 16 9 15.3438 9 14.5V13H8C6.875 13 6 12.125 6 11Z"
+                  fill="currentColor"
+                />
+              </svg>
+            </span>
+            <span class="facebook">
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path
+                  d="M15.75 8C15.75 3.71875 12.2812 0.25 8 0.25C3.71875 0.25 0.25 3.71875 0.25 8C0.25 11.875 3.0625 15.0938 6.78125 15.6562V10.25H4.8125V8H6.78125V6.3125C6.78125 4.375 7.9375 3.28125 9.6875 3.28125C10.5625 3.28125 11.4375 3.4375 11.4375 3.4375V5.34375H10.4688C9.5 5.34375 9.1875 5.9375 9.1875 6.5625V8H11.3438L11 10.25H9.1875V15.6562C12.9062 15.0938 15.75 11.875 15.75 8Z"
+                  fill="currentColor"
+                />
+              </svg>
+            </span>
+            <span class="envelope">
+              <svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path
+                  d="M8 9C7.46875 9 6.9375 8.84375 6.5 8.5L0 3.4375V10.5C0 11.3438 0.65625 12 1.5 12H14.5C15.3125 12 16 11.3438 16 10.5V3.4375L9.46875 8.5C9.03125 8.84375 8.5 9 8 9ZM0.5 2.5625L7.125 7.71875C7.625 8.09375 8.34375 8.09375 8.84375 7.71875L15.4688 2.5625C15.7812 2.3125 16 1.90625 16 1.5C16 0.6875 15.3125 0 14.5 0H1.5C0.65625 0 0 0.6875 0 1.5C0 1.90625 0.1875 2.3125 0.5 2.5625Z"
+                  fill="currentColor"
+                />
+              </svg>
+            </span>
+            <span class="print">
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path
+                  d="M14 6H2C0.875 6 0 6.90625 0 8V11C0 11.5625 0.4375 12 1 12H2V15C2 15.5625 2.4375 16 3 16H13C13.5312 16 14 15.5625 14 15V12H15C15.5312 12 16 11.5625 16 11V8C16 6.90625 15.0938 6 14 6ZM12 14H4V11H12V14ZM13.5 9.25C13.0625 9.25 12.75 8.9375 12.75 8.5C12.75 8.09375 13.0625 7.75 13.5 7.75C13.9062 7.75 14.25 8.09375 14.25 8.5C14.25 8.9375 13.9062 9.25 13.5 9.25ZM4 2H11.1562L12 2.84375V5H14V2.4375C14 2.15625 13.875 1.90625 13.6875 1.71875L12.2812 0.3125C12.0938 0.125 11.8438 0 11.5625 0H3C2.4375 0 2 0.46875 2 1V5H4V2Z"
+                  fill="currentColor"
+                />
+              </svg>
+            </span>
+          </div>
+          <div class="fontSize">
+            <span>
+              <svg width="13" height="15" viewBox="0 0 13 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path
+                  d="M1.05469 12C0.971354 12 0.90625 11.9609 0.859375 11.8828C0.8125 11.7995 0.789062 11.7057 0.789062 11.6016C0.789062 11.4818 0.809896 11.4062 0.851562 11.375C0.888021 11.3438 0.960938 11.3229 1.07031 11.3125C1.20052 11.2969 1.34115 11.2891 1.49219 11.2891C1.64844 11.2839 1.79427 11.2448 1.92969 11.1719C2.07031 11.0938 2.18229 10.9401 2.26562 10.7109L5.84375 0.742188H7.09375L10.5703 10.7109C10.6536 10.9401 10.763 11.0938 10.8984 11.1719C11.0339 11.2448 11.1771 11.2839 11.3281 11.2891C11.4844 11.2891 11.625 11.2969 11.75 11.3125C11.8594 11.3229 11.9323 11.3438 11.9688 11.375C12.0104 11.4062 12.0312 11.4818 12.0312 11.6016C12.0312 11.6589 12.0078 11.7396 11.9609 11.8438C11.9193 11.9479 11.8542 12 11.7656 12H7.85156C7.76302 12 7.69531 11.9479 7.64844 11.8438C7.60677 11.7396 7.58594 11.6589 7.58594 11.6016C7.58594 11.4297 7.67188 11.3333 7.84375 11.3125C8.16146 11.2969 8.41927 11.2839 8.61719 11.2734C8.8151 11.263 8.91406 11.1979 8.91406 11.0781C8.91406 11.0417 8.90625 11.0052 8.89062 10.9688L7.94531 8.14062H4.19531L3.24219 10.9688C3.23177 10.9948 3.22656 11.026 3.22656 11.0625C3.22656 11.1927 3.33594 11.263 3.55469 11.2734C3.77865 11.2786 4.04948 11.2917 4.36719 11.3125C4.53906 11.3333 4.625 11.4297 4.625 11.6016C4.625 11.6589 4.60156 11.7396 4.55469 11.8438C4.51302 11.9479 4.44792 12 4.35938 12H1.05469ZM6.14844 2.72656L4.4375 7.46875H7.72656L6.14844 2.72656Z"
+                  fill="currentColor"
+                />
+                <path d="M1 13.8984H11.7344V14.7266H1V13.8984Z" fill="black" />
+              </svg>
+            </span>
+            <span>
+              <svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path
+                  d="M1.08203 17C0.957031 17 0.859375 16.9414 0.789062 16.8242C0.71875 16.6992 0.683594 16.5586 0.683594 16.4023C0.683594 16.2227 0.714844 16.1094 0.777344 16.0625C0.832031 16.0156 0.941406 15.9844 1.10547 15.9688C1.30078 15.9453 1.51172 15.9336 1.73828 15.9336C1.97266 15.9258 2.19141 15.8672 2.39453 15.7578C2.60547 15.6406 2.77344 15.4102 2.89844 15.0664L8.26562 0.113281H10.1406L15.3555 15.0664C15.4805 15.4102 15.6445 15.6406 15.8477 15.7578C16.0508 15.8672 16.2656 15.9258 16.4922 15.9336C16.7266 15.9336 16.9375 15.9453 17.125 15.9688C17.2891 15.9844 17.3984 16.0156 17.4531 16.0625C17.5156 16.1094 17.5469 16.2227 17.5469 16.4023C17.5469 16.4883 17.5117 16.6094 17.4414 16.7656C17.3789 16.9219 17.2812 17 17.1484 17H11.2773C11.1445 17 11.043 16.9219 10.9727 16.7656C10.9102 16.6094 10.8789 16.4883 10.8789 16.4023C10.8789 16.1445 11.0078 16 11.2656 15.9688C11.7422 15.9453 12.1289 15.9258 12.4258 15.9102C12.7227 15.8945 12.8711 15.7969 12.8711 15.6172C12.8711 15.5625 12.8594 15.5078 12.8359 15.4531L11.418 11.2109H5.79297L4.36328 15.4531C4.34766 15.4922 4.33984 15.5391 4.33984 15.5938C4.33984 15.7891 4.50391 15.8945 4.83203 15.9102C5.16797 15.918 5.57422 15.9375 6.05078 15.9688C6.30859 16 6.4375 16.1445 6.4375 16.4023C6.4375 16.4883 6.40234 16.6094 6.33203 16.7656C6.26953 16.9219 6.17188 17 6.03906 17H1.08203ZM8.72266 3.08984L6.15625 10.2031H11.0898L8.72266 3.08984Z"
+                  fill="currentColor"
+                />
+              </svg>
+            </span>
+            <span>
+              <svg width="24" height="23" viewBox="0 0 24 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path
+                  d="M1.10938 23C0.942708 23 0.8125 22.9219 0.71875 22.7656C0.625 22.599 0.578125 22.4115 0.578125 22.2031C0.578125 21.9635 0.619792 21.8125 0.703125 21.75C0.776042 21.6875 0.921875 21.6458 1.14062 21.625C1.40104 21.5938 1.68229 21.5781 1.98438 21.5781C2.29688 21.5677 2.58854 21.4896 2.85938 21.3438C3.14062 21.1875 3.36458 20.8802 3.53125 20.4219L10.6875 0.484375H13.1875L20.1406 20.4219C20.3073 20.8802 20.526 21.1875 20.7969 21.3438C21.0677 21.4896 21.3542 21.5677 21.6562 21.5781C21.9688 21.5781 22.25 21.5938 22.5 21.625C22.7188 21.6458 22.8646 21.6875 22.9375 21.75C23.0208 21.8125 23.0625 21.9635 23.0625 22.2031C23.0625 22.3177 23.0156 22.4792 22.9219 22.6875C22.8385 22.8958 22.7083 23 22.5312 23H14.7031C14.526 23 14.3906 22.8958 14.2969 22.6875C14.2135 22.4792 14.1719 22.3177 14.1719 22.2031C14.1719 21.8594 14.3438 21.6667 14.6875 21.625C15.3229 21.5938 15.8385 21.5677 16.2344 21.5469C16.6302 21.526 16.8281 21.3958 16.8281 21.1562C16.8281 21.0833 16.8125 21.0104 16.7812 20.9375L14.8906 15.2812H7.39062L5.48438 20.9375C5.46354 20.9896 5.45312 21.0521 5.45312 21.125C5.45312 21.3854 5.67188 21.526 6.10938 21.5469C6.55729 21.5573 7.09896 21.5833 7.73438 21.625C8.07812 21.6667 8.25 21.8594 8.25 22.2031C8.25 22.3177 8.20312 22.4792 8.10938 22.6875C8.02604 22.8958 7.89583 23 7.71875 23H1.10938ZM11.2969 4.45312L7.875 13.9375H14.4531L11.2969 4.45312Z"
+                  fill="currentColor"
+                />
+              </svg>
+            </span>
+          </div>
+        </div>
+
+        <div class="tags" v-if="currentArticle.tags">
+          <span>
+            <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path
+                d="M1.875 0.75H7.69531C8.35938 0.75 8.98438 1.02344 9.45312 1.49219L16.3281 8.36719C17.3047 9.34375 17.3047 10.9453 16.3281 11.9219L11.1328 17.1172C10.1562 18.0938 8.55469 18.0938 7.57812 17.1172L0.703125 10.2422C0.234375 9.77344 0 9.14844 0 8.48438V2.625C0 1.60938 0.820312 0.75 1.875 0.75ZM4.375 6.375C5.03906 6.375 5.625 5.82812 5.625 5.125C5.625 4.46094 5.03906 3.875 4.375 3.875C3.67188 3.875 3.125 4.46094 3.125 5.125C3.125 5.82812 3.67188 6.375 4.375 6.375Z"
+                fill="#ED1C24"
+              />
+            </svg>
+          </span>
+
+          <ul>
+          <li v-for="(tag, index) in currentArticle.tags">
+            <nuxt-link class="font-raleway font-500" :to="`tag/${tag.code}`">{{ tag.title }}</nuxt-link>
+          </li>
+          </ul>
+        </div>
+      </div>
+
+      <div class="section_child" :class="['border-custom']" :style="mapActivesToItems(0)['div.section_child']" @dragover.prevent @drop.stop.prevent="dropPlacementInSection($event, 0, props.content ? props?.content[0].data : '')">
+        <template v-if="props.content">
+          <RecusiveSection :type="props?.content[0].type" :id="props?.content[0].data" :section="props.section" />
+        </template>
+        <template v-else>
+          <RecusiveSection :type="''" :id="''" :section="props.section" />
+        </template>
+      </div>
+    </div>
+
+    <div class="content">
+      <div class="content__top">
+        <div class="flex justify-between flex-wrap items-center mb-10px">
+          <ul class="flex gap-32px">
+            <li v-for="( category, index ) in currentCategoryTree" :key="index" class="first:text-#000 text-#929292 last:after:content-[''] relative after:absolute after:content-['/'] after:text-20px after:right--20px" >
+              <nuxt-link class=" font-raleway text-18px font-500 leading-180% uppercase" :to="`${category.code}`">{{ category.title }}</nuxt-link>
+            </li>
+          </ul>
+
+          <div v-if="currentArticle.topics" class="pl-20px relative bg-primary inline-block">
+            <nuxt-link class="h-30px block py-4px px-16px border-1 border-#000 bg-white text-12px leading-180% font-raleway font-400" :to="`/topic/${currentArticle.topics[0].code}`">{{ currentArticle.topics[0].title }}</nuxt-link>
+          </div>
+        </div>
+         <h2 class="font-gelasio text-44px font-bold leading-130%" v-if="currentArticle.title" v-html="currentArticle.title"></h2>
+
+         <div class="author flex gap-12px my-20px" v-if="currentArticle.authors">
+            <ul class="flex">
+              <li :style="{'z-index': index + 1}" class="relative ml--12px first:ml-0" v-for="(author, index) in currentArticle.authors" :key="index">
+                <nuxt-link :to="`tac-gia/${author.code}`">
+                  <img :src="author.thumbnail || `http://picsum.photos/1024/600?random=1`" alt="" class="w-64px p-1px border-1px border-white h-64px object-cover rounded-full">
+                </nuxt-link>
+              </li>
+            </ul>
+            <div>
+              <div class="mt-10px">
+                <nuxt-link class="font-raleway text-#000" v-for="(author, index) in currentArticle.authors" :key="index" :to="`/tac-gia/${author.code}`">{{ author.title + (index < currentArticle.authors.length - 1  ? ', ' : '') }}</nuxt-link>
+              </div>
+              <div class="text-12px">
+              Xuất bản vào {{ formatDate(currentArticle.publishedOn, 'DD/MM/YYYY | hh:mm') }}
+              </div>
+            </div>
+         </div>
+
+         <figure v-if="currentArticle.thumbnail">
+          <img :src="currentArticle.thumbnail" class="w-full " alt="">
+         </figure>
+      </div>
+      <div class="content__bottom" >
+        <div class="content__bottom__left">
+          <div class="content__bottom__left__control">
+            <div class="content__bottom__left__control__sticky [&_span:hover]:text-primary">
+              <span class="flex justify-center ">
+                <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path
+                    d="M20 10.5C20 16.0469 15.5078 20.5 10 20.5C4.45312 20.5 0 16.0469 0 10.5C0 4.99219 4.45312 0.5 10 0.5C15.5078 0.5 20 4.99219 20 10.5ZM6.875 7.0625V13.9375C6.875 14.2891 7.03125 14.6016 7.34375 14.7578C7.61719 14.9531 8.00781 14.9141 8.28125 14.7578L13.9062 11.3203C14.1797 11.1641 14.375 10.8516 14.375 10.5C14.375 10.1875 14.1797 9.875 13.9062 9.71875L8.28125 6.28125C8.00781 6.08594 7.61719 6.08594 7.34375 6.28125C7.03125 6.4375 6.875 6.75 6.875 7.0625Z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
+              <span class="flex justify-center">
+                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path
+                    d="M12 3V0H8.5C7.65625 0 7 0.6875 7 1.5V10.5C7 11.3438 7.65625 12 8.5 12H14.5C15.3125 12 16 11.3438 16 10.5V4H13C12.4375 4 12 3.5625 12 3ZM13 0V3H16L13 0ZM6 11V4H1.5C0.65625 4 0 4.6875 0 5.5V14.5C0 15.3438 0.65625 16 1.5 16H7.5C8.3125 16 9 15.3438 9 14.5V13H8C6.875 13 6 12.125 6 11Z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
+              <span class="flex justify-center">
+                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path
+                    d="M15.75 8C15.75 3.71875 12.2812 0.25 8 0.25C3.71875 0.25 0.25 3.71875 0.25 8C0.25 11.875 3.0625 15.0938 6.78125 15.6562V10.25H4.8125V8H6.78125V6.3125C6.78125 4.375 7.9375 3.28125 9.6875 3.28125C10.5625 3.28125 11.4375 3.4375 11.4375 3.4375V5.34375H10.4688C9.5 5.34375 9.1875 5.9375 9.1875 6.5625V8H11.3438L11 10.25H9.1875V15.6562C12.9062 15.0938 15.75 11.875 15.75 8Z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
+              <span class="flex justify-center">
+                <svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path
+                    d="M8 9C7.46875 9 6.9375 8.84375 6.5 8.5L0 3.4375V10.5C0 11.3438 0.65625 12 1.5 12H14.5C15.3125 12 16 11.3438 16 10.5V3.4375L9.46875 8.5C9.03125 8.84375 8.5 9 8 9ZM0.5 2.5625L7.125 7.71875C7.625 8.09375 8.34375 8.09375 8.84375 7.71875L15.4688 2.5625C15.7812 2.3125 16 1.90625 16 1.5C16 0.6875 15.3125 0 14.5 0H1.5C0.65625 0 0 0.6875 0 1.5C0 1.90625 0.1875 2.3125 0.5 2.5625Z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
+              <span class="flex justify-center">
+                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path
+                    d="M14 6H2C0.875 6 0 6.90625 0 8V11C0 11.5625 0.4375 12 1 12H2V15C2 15.5625 2.4375 16 3 16H13C13.5312 16 14 15.5625 14 15V12H15C15.5312 12 16 11.5625 16 11V8C16 6.90625 15.0938 6 14 6ZM12 14H4V11H12V14ZM13.5 9.25C13.0625 9.25 12.75 8.9375 12.75 8.5C12.75 8.09375 13.0625 7.75 13.5 7.75C13.9062 7.75 14.25 8.09375 14.25 8.5C14.25 8.9375 13.9062 9.25 13.5 9.25ZM4 2H11.1562L12 2.84375V5H14V2.4375C14 2.15625 13.875 1.90625 13.6875 1.71875L12.2812 0.3125C12.0938 0.125 11.8438 0 11.5625 0H3C2.4375 0 2 0.46875 2 1V5H4V2Z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
+            </div>
+          </div>
+
+          <div>
+            <p class="my-10px" v-if="currentArticle.intro" v-html="currentArticle.intro">
+            </p>
+
+            <div v-html="currentArticle.detail" class="[&_p_>_span]:!font-raleway [&_p]:mb-10px"></div>
+          </div>
+        </div>
+        <div class="content__bottom__right">
+          <div class="section_child" :class="['border-custom']" :style="mapActivesToItems(1)['div.section_child']">
+            <template v-if="props.content">
+              <RecusiveSection :type="props?.content[1].type" :id="props?.content[1].data" :section="props.section" />
+            </template>
+            <template v-else>
+              <RecusiveSection :type="''" :id="''" :section="props.section" />
+            </template>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+$control-width: 80px;
+
+.border-pri {
+  &.section_layout {
+    gap: 5px;
+  }
+}
+.section_layout {
+  display: flex;
+  .left {
+    width: 305px;
+    .tags {
+      display: flex;
+      align-items: center;
+      gap: 20px;
+      padding: 24px 0 20px 0;
+      border-top: 1px solid #ededed;
+      border-bottom: 1px solid #ededed;
+
+      & > ul {
+        padding: 0;
+        margin: 0;
+        display: flex;
+        gap: 12px;
+        flex-wrap: wrap;
+        & > li {
+          list-style: none;
+
+          & > a {
+            display: block;
+            font-size: 12px;
+            line-height: 180%;
+            padding: 0 10px;
+            background-color: #f5efef;
+            border-radius: 6px;
+          }
+        }
+      }
+    }
+    .buttons {
+      margin: 20px 0;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .actions,
+      .fontSize {
+        display: flex;
+        align-items: flex-end;
+        gap: 1.5rem;
+      }
+    }
+    .audio {
+      display: flex;
+      width: 100%;
+      height: 28px;
+      padding: 2px 12px 2px 2px;
+      border-radius: 999px;
+      background-color: #eee;
+      align-items: center;
+      .play {
+        margin-right: 16px;
+      }
+
+      .time {
+        line-height: 180%;
+        font-size: 12px;
+        color: #000;
+        margin-right: 6px;
+      }
+
+      .timeline {
+        flex: 1;
+        display: flex;
+        align-items: center;
+      }
+    }
+    input[type="range"] {
+      width: 100%;
+      height: 4px;
+      color: #4a4a4a;
+      --thumb-height: 1.125em;
+      --track-height: 0.125em;
+      --track-color: rgba(0, 0, 0, 0.2);
+      --brightness-hover: 180%;
+      --brightness-down: 80%;
+      --clip-edges: 0.125em;
+    }
+    /* === range commons === */
+    input[type="range"] {
+      position: relative;
+      background: #fff0;
+      overflow: hidden;
+    }
+
+    input[type="range"]:active {
+      cursor: grabbing;
+    }
+
+    input[type="range"]:disabled {
+      filter: grayscale(1);
+      opacity: 0.3;
+      cursor: not-allowed;
+    }
+
+    /* === WebKit specific styles === */
+    input[type="range"],
+    input[type="range"]::-webkit-slider-runnable-track,
+    input[type="range"]::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      transition: all ease 100ms;
+      height: var(--thumb-height);
+    }
+
+    input[type="range"]::-webkit-slider-runnable-track,
+    input[type="range"]::-webkit-slider-thumb {
+      position: relative;
+    }
+
+    input[type="range"]::-webkit-slider-thumb {
+      --thumb-radius: calc((var(--thumb-height) * 0.5) - 1px);
+      --clip-top: calc((var(--thumb-height) - var(--track-height)) * 0.5 - 0.5px);
+      --clip-bottom: calc(var(--thumb-height) - var(--clip-top));
+      --clip-further: calc(100% + 1px);
+      --box-fill: calc(-100vmax - var(--thumb-width, var(--thumb-height))) 0 0 100vmax currentColor;
+
+      width: var(--thumb-width, var(--thumb-height));
+      background: linear-gradient(#e50e0e 0 0) scroll no-repeat left center / 50% calc(var(--track-height) + 1px);
+      background-color: #e50e0e;
+      box-shadow: var(--box-fill);
+      border-radius: var(--thumb-width, var(--thumb-height));
+
+      filter: brightness(100%);
+      clip-path: polygon(100% -1px, var(--clip-edges) -1px, 0 var(--clip-top), -100vmax var(--clip-top), -100vmax var(--clip-bottom), 0 var(--clip-bottom), var(--clip-edges) 100%, var(--clip-further) var(--clip-further));
+    }
+
+    input[type="range"]:hover::-webkit-slider-thumb {
+      filter: brightness(var(--brightness-hover));
+      cursor: grab;
+    }
+
+    input[type="range"]:active::-webkit-slider-thumb {
+      filter: brightness(var(--brightness-down));
+      cursor: grabbing;
+    }
+
+    input[type="range"]::-webkit-slider-runnable-track {
+      background: linear-gradient(var(--track-color) 0 0) scroll no-repeat center / 100% calc(var(--track-height) + 1px);
+    }
+
+    input[type="range"]:disabled::-webkit-slider-thumb {
+      cursor: not-allowed;
+    }
+
+    /* === Firefox specific styles === */
+    // input[type="range"],
+    // input[type="range"]::-moz-range-track,
+    // input[type="range"]::-moz-range-thumb {
+    //   appearance: none;
+    //   transition: all ease 100ms;
+    //   height: var(--thumb-height);
+    // }
+
+    // input[type="range"]::-moz-range-track,
+    // input[type="range"]::-moz-range-thumb,
+    // input[type="range"]::-moz-range-progress {
+    //   background: #fff0;
+    // }
+
+    // input[type="range"]::-moz-range-thumb {
+    //   background: currentColor;
+    //   border: 0;
+    //   width: var(--thumb-width, var(--thumb-height));
+    //   border-radius: var(--thumb-width, var(--thumb-height));
+    //   cursor: grab;
+    // }
+
+    // input[type="range"]:active::-moz-range-thumb {
+    //   cursor: grabbing;
+    // }
+
+    // input[type="range"]::-moz-range-track {
+    //   width: 100%;
+    //   background: var(--track-color);
+    // }
+
+    // input[type="range"]::-moz-range-progress {
+    //   appearance: none;
+    //   background: currentColor;
+    //   transition-delay: 30ms;
+    // }
+
+    // input[type="range"]::-moz-range-track,
+    // input[type="range"]::-moz-range-progress {
+    //   height: calc(var(--track-height) + 1px);
+    //   border-radius: var(--track-height);
+    // }
+
+    // input[type="range"]::-moz-range-thumb,
+    // input[type="range"]::-moz-range-progress {
+    //   filter: brightness(100%);
+    // }
+
+    // input[type="range"]:hover::-moz-range-thumb,
+    // input[type="range"]:hover::-moz-range-progress {
+    //   filter: brightness(var(--brightness-hover));
+    // }
+
+    // input[type="range"]:active::-moz-range-thumb,
+    // input[type="range"]:active::-moz-range-progress {
+    //   filter: brightness(var(--brightness-down));
+    // }
+
+    // input[type="range"]:disabled::-moz-range-thumb {
+    //   cursor: not-allowed;
+    // }
+  }
+
+  .content {
+    margin-left: $control-width;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    &__top {
+      width: 100%;
+    }
+
+    &__bottom {
+      width: 100%;
+      min-height: 300px;
+      display: flex;
+      justify-content: space-between;
+      &__left {
+        flex: 1;
+        max-width: 660px;
+        display: block;
+        height: 100%;
+        position: relative;
+
+        &__control {
+          width: $control-width;
+          position: absolute;
+          height: 100%;
+          left: -$control-width;
+
+          &__sticky {
+            position: sticky;
+            top: 10px;
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+
+            & > span {
+              text-align: center;
+            }
+          }
+        }
+      }
+
+      &__right {
+        width: 300px;
+      }
+    }
+  }
+}
+</style>
@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import RecusiveSection from "@/components/dynamic-page/page-section/RecusiveSection.vue";
+import { getInputValue } from "@/utils/parseSQL";
+import { enumPageSectionLayouts, enumPageSectionTemplate, enumPageSectionKey } from "~/definitions/enum";
+import type { PageSection } from "@/server/models/dynamic-page/index";
+
+const emit = defineEmits(["dropComponent", "dropData", "selectComponent"]);
+
+const props = defineProps<{
+  layout?: string;
+  content?: any;
+  settings: any;
+  section: PageSection;
+}>();
+
+const defineTypeRecusive = {
+  COMPONENT: "component",
+  SECTION: "section",
+};
+
+const SETTING_OPTIONS = computed(() => {
+  let _setting_options = {
+    MAX_ELEMENT: 1,
+  };
+  return _setting_options;
+});
+
+const designObject = computed(() => {
+  // không truyền lable là chữ lên sẽ lỗi
+  return props?.settings?.label ? getInputValue(props.settings.label, "OBJECT") : {};
+});
+
+const CLASS_FOR_SECTION = computed(() => {
+  let _classForSection = {
+    section_layout: "section_layout basic_column",
+  };
+  return _classForSection;
+});
+
+
+const handleActiveItem = (key: string, keyActive: string, index: number, defaultValue: any) => {
+  const designObject = props?.section?.settings?.label ? getInputValue(props.section.settings.label, "OBJECT") : {};
+  const updatedDesignObject = { ...designObject };
+
+  if (Array.isArray(designObject[keyActive])) {
+    const isActive = designObject[keyActive].includes(Number(index) + 1);
+    return {
+      ...updatedDesignObject,
+      [key]: isActive ? designObject[key] : defaultValue,
+    };
+  }
+
+  delete updatedDesignObject[key];
+  return updatedDesignObject;
+};
+
+const LAYOUT_PARSE = computed(() => {
+  return props.settings?.label ? getInputValue(props.settings.label, "OBJECT") : {};
+});
+
+const mapActivesToItems = (index: number) => {
+  if (LAYOUT_PARSE.value && LAYOUT_PARSE.value.listCss) {
+    return LAYOUT_PARSE.value.listCss[index] || {};
+  }
+  return {};
+};
+</script>
+
+<template>
+  <div 
+    class="section_layout border-custom" 
+    :class="[CLASS_FOR_SECTION.section_layout]" 
+    :style="LAYOUT_PARSE['div.section_layout']"
+  >
+    <div
+      class="section_child"
+      v-for="(position, index) in props.content || Array(SETTING_OPTIONS.MAX_ELEMENT).fill({})"
+      :key="index"
+      :class="['border-custom', CLASS_FOR_SECTION[index]]"
+      :style="mapActivesToItems(index)['div.section_child']"
+    >
+      <RecusiveSection :type="position.type" :id="position.data" :section="props.section" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.border-pri {
+  &.section_layout {
+    gap: 5px;
+  }
+}
+.section_layout {
+  display: grid;
+
+  &.smartphone_layout {
+    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
+  }
+  &.basic_column {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+
+  &.two_col_layout {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  &.three_col_layout {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  &.four_col_layout {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+  &.five_col_layout {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+  &.six_col_layout {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+  .col-span-2 {
+    grid-column: span 2 / span 2;
+  }
+  .col-span-3 {
+    grid-column: span 3 / span 3;
+  }
+  .col-span-4 {
+    grid-column: span 4 / span 4;
+  }
+  .col-span-5 {
+    grid-column: span 5 / span 5;
+  }
+  .border-custom {
+    border-color: #e5e5e5 !important;
+  }
+}
+</style>
@@ -1 +1,5 @@
 export { default as NONE_DEFAULT_LAYOUT } from './none/Default.vue'
+
+export { default as MISS_DEFAULT_LAYOUT } from './category/misses/Default.vue'
+
+export { default as ARTICLE_DETAIL_DEFAULT } from './articles/details/Default.vue'
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { PageSection } from "@/server/models/dynamic-page/index";
 import { enumPageSectionLayouts, enumPageSectionTemplate, enumPageSectionKey } from "@/definitions/enum";
-import { NONE_DEFAULT_LAYOUT } from "./index";
+import { NONE_DEFAULT_LAYOUT, MISS_DEFAULT_LAYOUT, ARTICLE_DETAIL_DEFAULT } from "./index";

 const _props = defineProps<{
  settings?: any;
@@ -11,26 +11,37 @@ const _props = defineProps<{
 }>();

 const definedDynamicSection: Record<string, any> = {
-  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_TWO']]: NONE_DEFAULT_LAYOUT,
-  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_LEFT_TWO']]: NONE_DEFAULT_LAYOUT,
+  /* NONE */
+  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_TWO"]]: NONE_DEFAULT_LAYOUT,
  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_ONE_TWO_THREE"]]: NONE_DEFAULT_LAYOUT,
+  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_FIVE_THREE_TWO_TWO"]]: NONE_DEFAULT_LAYOUT,
+  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_FIVE_TWO_TWO_THREE"]]: NONE_DEFAULT_LAYOUT,
+  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_TWO_FIVE_THREE_TWO"]]: NONE_DEFAULT_LAYOUT,
  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_ONE_FIVE"]]: NONE_DEFAULT_LAYOUT,
-  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_RIGHT_TWO']]: NONE_DEFAULT_LAYOUT,
-  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_THREE']]: NONE_DEFAULT_LAYOUT,
-  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_FOUR']]: NONE_DEFAULT_LAYOUT,
-  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_CENTER_TWO']]: NONE_DEFAULT_LAYOUT,
-  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_CENTER_THREE']]: NONE_DEFAULT_LAYOUT,
-  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_CENTER_FOUR']]: NONE_DEFAULT_LAYOUT,
-  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_ONE']]: NONE_DEFAULT_LAYOUT,
-  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_TWO']]: NONE_DEFAULT_LAYOUT,
-  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_THREE']]: NONE_DEFAULT_LAYOUT,
-  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_FOUR']]: NONE_DEFAULT_LAYOUT,
-  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_FIVE']]: NONE_DEFAULT_LAYOUT,
-  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_SIX']]: NONE_DEFAULT_LAYOUT,
-  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_SEVEN']]: NONE_DEFAULT_LAYOUT,
-  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_EIGHT']]: NONE_DEFAULT_LAYOUT,
-  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_NINE']]: NONE_DEFAULT_LAYOUT,
-  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_TEN']]: NONE_DEFAULT_LAYOUT,
+  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_ONE_FOUR"]]: NONE_DEFAULT_LAYOUT,
+  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_LEFT_TWO"]]: NONE_DEFAULT_LAYOUT,
+  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_RIGHT_TWO"]]: NONE_DEFAULT_LAYOUT,
+  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_THREE"]]: NONE_DEFAULT_LAYOUT,
+  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_FOUR"]]: NONE_DEFAULT_LAYOUT,
+  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_CENTER_TWO"]]: NONE_DEFAULT_LAYOUT,
+  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_CENTER_THREE"]]: NONE_DEFAULT_LAYOUT,
+  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_CENTER_FOUR"]]: NONE_DEFAULT_LAYOUT,
+  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_ONE"]]: NONE_DEFAULT_LAYOUT,
+  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_TWO"]]: NONE_DEFAULT_LAYOUT,
+  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_THREE"]]: NONE_DEFAULT_LAYOUT,
+  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_FOUR"]]: NONE_DEFAULT_LAYOUT,
+  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_FIVE"]]: NONE_DEFAULT_LAYOUT,
+  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_SIX"]]: NONE_DEFAULT_LAYOUT,
+  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_SEVEN"]]: NONE_DEFAULT_LAYOUT,
+  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_EIGHT"]]: NONE_DEFAULT_LAYOUT,
+  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_NINE"]]: NONE_DEFAULT_LAYOUT,
+  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_TEN"]]: NONE_DEFAULT_LAYOUT,
+
+  /* SECTION */
+  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.CATEGORY]["MISSES"]]["DEFAULT"]]: MISS_DEFAULT_LAYOUT,
+
+  /** ARTICLE */
+  [enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.ARTICLE]["DETAIL"]]["DEFAULT"]]: ARTICLE_DETAIL_DEFAULT,
 };

 const getCurrentSection = computed(() => {
@@ -53,7 +64,9 @@ const GET_PROPS = computed(() => {
 </script>

 <template>
+
  <component
+    v-if="definedDynamicSection[getCurrentSection]"
    :is="definedDynamicSection[getCurrentSection]"
    v-bind="{
      ...GET_PROPS(),
@@ -4,6 +4,8 @@ import { getInputValue } from "@/utils/parseSQL";
 import { enumPageSectionLayouts, enumPageSectionTemplate, enumPageSectionKey } from "~/definitions/enum";
 import type { PageSection } from "@/server/models/dynamic-page/index";

+const emit = defineEmits(["dropComponent", "dropData", "selectComponent"]);
+
 const props = defineProps<{
  layout?: string;
  content?: any;
@@ -16,16 +18,20 @@ const defineTypeRecusive = {
  SECTION: "section",
 };

+const designObject = computed(() => {
+  // không truyền lable là chữ lên sẽ lỗi
+  return props?.settings?.label ? getInputValue(props.settings.label, "OBJECT") : {};
+});
+
 const SETTING_OPTIONS = computed(() => {
  let _setting_options = {};
  switch (props.layout) {
-    
-    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_TWO']:
+    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_TWO"]:
      _setting_options = {
        MAX_ELEMENT: 2,
      };
      break;
-      case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_ONE_TWO_THREE"]:
+    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_ONE_TWO_THREE"]:
      _setting_options = {
        MAX_ELEMENT: 3,
      };
@@ -35,87 +41,107 @@ const SETTING_OPTIONS = computed(() => {
        MAX_ELEMENT: 2,
      };
      break;
-    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_LEFT_TWO']:
-      _setting_options = {
-        MAX_ELEMENT: 2,
-      };
-      break;
-    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_RIGHT_TWO']:
-      _setting_options = {
-        MAX_ELEMENT: 2,
-      };
-      break;
-    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_THREE']:
-      _setting_options = {
-        MAX_ELEMENT: 3,
-      };
-      break;
-    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_FOUR']:
+    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_FIVE_THREE_TWO_TWO"]:
      _setting_options = {
        MAX_ELEMENT: 4,
      };
      break;
-    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_CENTER_TWO']:
+      case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_FIVE_TWO_TWO_THREE"]:
+      _setting_options = {
+        MAX_ELEMENT: 4,
+      };
+      break;
+    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_TWO_FIVE_THREE_TWO"]:
+      _setting_options = {
+        MAX_ELEMENT: 4,
+      };
+      break;
+    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_ONE_FOUR"]:
+      _setting_options = {
+        MAX_ELEMENT: 2,
+      };
+      break;
+    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_LEFT_TWO"]:
+      _setting_options = {
+        MAX_ELEMENT: 2,
+      };
+      break;
+    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_RIGHT_TWO"]:
+      _setting_options = {
+        MAX_ELEMENT: 2,
+      };
+      break;
+    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_THREE"]:
      _setting_options = {
        MAX_ELEMENT: 3,
      };
      break;
-    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_CENTER_THREE']:
+    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_FOUR"]:
+      _setting_options = {
+        MAX_ELEMENT: 4,
+      };
+      break;
+    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_CENTER_TWO"]:
      _setting_options = {
        MAX_ELEMENT: 3,
      };
      break;
-    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_CENTER_FOUR']:
+    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_CENTER_THREE"]:
      _setting_options = {
        MAX_ELEMENT: 3,
      };
      break;
-    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_ONE']:
+    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_CENTER_FOUR"]:
+      _setting_options = {
+        MAX_ELEMENT: 3,
+      };
+      break;
+    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_ONE"]:
      _setting_options = {
        MAX_ELEMENT: 1,
      };
      break;
-    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_TWO']:
+    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_TWO"]:
      _setting_options = {
        MAX_ELEMENT: 2,
      };
      break;
-    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_THREE']:
+    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_THREE"]:
      _setting_options = {
        MAX_ELEMENT: 3,
      };
      break;
-    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_FOUR']:
+    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_FOUR"]:
      _setting_options = {
        MAX_ELEMENT: 4,
      };
      break;
-    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_FIVE']:
+    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_FIVE"]:
      _setting_options = {
        MAX_ELEMENT: 5,
      };
      break;
-    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_SIX']:
+    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_SIX"]:
      _setting_options = {
        MAX_ELEMENT: 6,
      };
      break;
-    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_SEVEN']:
+    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_SEVEN"]:
      _setting_options = {
        MAX_ELEMENT: 7,
      };
      break;
-    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_EIGHT']:
+    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_EIGHT"]:
      _setting_options = {
        MAX_ELEMENT: 8,
      };
      break;
-    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_NINE']:
+    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_NINE"]:
      _setting_options = {
        MAX_ELEMENT: 9,
      };
      break;
-    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_TEN']:
+    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["HORIZONTAL_TEN"]:
      _setting_options = {
        MAX_ELEMENT: 10,
      };
@@ -129,71 +155,101 @@ const SETTING_OPTIONS = computed(() => {
  return _setting_options;
 });

-const designObject = computed(() => {
-  return props?.settings?.label ? getInputValue(props.settings.label, "OBJECT") : {};
-});
-
 const CLASS_FOR_SECTION = computed(() => {
  let _classForSection = {};
  switch (props.layout) {
-    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_TWO']:
+    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_TWO"]:
      _classForSection = {
        section_layout: "section_layout two_col_layout",
      };
      break;
-      case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_ONE_FIVE"]:
-      _classForSection = {
-        section_layout: "section_layout six_col_layout",
-        1: "col-span-5",
-      };
-      break;
-      case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_ONE_TWO_THREE"]:
-      _classForSection = {
-        section_layout: "section_layout six_col_layout",
-        1: "col-span-2",
-        2: "col-span-3",
-      };
-      break;
-    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_LEFT_TWO']:
+
+    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_LEFT_TWO"]:
      _classForSection = {
        section_layout: "section_layout three_col_layout",
        0: "col-span-2",
      };
      break;
-    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_RIGHT_TWO']:
+    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_RIGHT_TWO"]:
      _classForSection = {
        section_layout: "section_layout three_col_layout",
        1: "col-span-2",
      };
      break;
-    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_THREE']:
+    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_ONE_FIVE"]:
+      _classForSection = {
+        section_layout: "section_layout six_col_layout",
+        1: "col-span-5",
+      };
+      break;
+    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_FIVE_THREE_TWO_TWO"]:
+      _classForSection = {
+        section_layout: "section_layout twelve_col_layout",
+        0: "col-span-5",
+        1: "col-span-3",
+        2: "col-span-2",
+        3: "col-span-2",
+      };
+      break;
+      case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_FIVE_TWO_TWO_THREE"]:
+      _classForSection = {
+        section_layout: "section_layout twelve_col_layout",
+        0: "col-span-5",
+        1: "col-span-2",
+        2: "col-span-2",
+        3: "col-span-3",
+      };
+      break;
+    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_TWO_FIVE_THREE_TWO"]:
+      _classForSection = {
+        section_layout: "section_layout twelve_col_layout",
+        0: "col-span-2",
+        1: "col-span-5",
+        2: "col-span-3",
+        3: "col-span-2",
+      };
+      break;
+    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_ONE_FOUR"]:
+      _classForSection = {
+        section_layout: "section_layout five_col_layout",
+        1: "col-span-4",
+      };
+      break;
+    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_THREE"]:
      _classForSection = {
        section_layout: "section_layout three_col_layout",
      };
      break;
-    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_FOUR']:
+    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_FOUR"]:
      _classForSection = {
        section_layout: "section_layout four_col_layout",
      };
      break;
-    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_CENTER_TWO']:
+    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_CENTER_TWO"]:
      _classForSection = {
        section_layout: "section_layout four_col_layout",
        1: "col-span-2",
      };
      break;
-    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_CENTER_THREE']:
+    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_CENTER_THREE"]:
      _classForSection = {
        section_layout: "section_layout five_col_layout",
        1: "col-span-3",
      };
      break;
-    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_CENTER_FOUR']:
+    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_CENTER_FOUR"]:
      _classForSection = {
        section_layout: "section_layout six_col_layout",
        1: "col-span-4",
      };
      break;
+    case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_ONE_TWO_THREE"]:
+      _classForSection = {
+        section_layout: "section_layout six_col_layout",
+        1: "col-span-2",
+        2: "col-span-3",
+      };
+      break;
    default:
      _classForSection = {
        section_layout: "section_layout basic_column",
@@ -203,6 +259,22 @@ const CLASS_FOR_SECTION = computed(() => {
  return _classForSection;
 });

+const handleActiveItem = (key: string, keyActive: string, index: number, defaultValue: any) => {
+  const designObject = props?.section?.settings?.label ? getInputValue(props.section.settings.label, "OBJECT") : {};
+  const updatedDesignObject = { ...designObject };
+
+  if (Array.isArray(designObject[keyActive])) {
+    const isActive = designObject[keyActive].includes(Number(index) + 1);
+    return {
+      ...updatedDesignObject,
+      [key]: isActive ? designObject[key] : defaultValue,
+    };
+  }
+
+  delete updatedDesignObject[key];
+  return updatedDesignObject;
+};
+
 const LAYOUT_PARSE = computed(() => {
  return props.settings?.label ? getInputValue(props.settings.label, "OBJECT") : {};
 });
@@ -210,7 +282,7 @@ const LAYOUT_PARSE = computed(() => {
 const mapActivesToItems = (index: number) => {
  if (LAYOUT_PARSE.value && LAYOUT_PARSE.value.listCss) {
    return LAYOUT_PARSE.value.listCss[index] || {};
-  } 
+  }
  return {};
 };
 </script>
@@ -219,7 +291,7 @@ const mapActivesToItems = (index: number) => {
  <div class="section_layout border-custom" :class="[CLASS_FOR_SECTION.section_layout]" :style="LAYOUT_PARSE['div.section_layout']">
    <div
      class="section_child"
-      v-for="(position, index) in props.content || Array(SETTING_OPTIONS.MAX_ELEMENT).fill({})"
+      v-for="(position, index) in props.content || Array(SETTING_OPTIONS?.MAX_ELEMENT).fill({})"
      :key="index"
      :class="['border-custom', CLASS_FOR_SECTION[index]]"
      :style="mapActivesToItems(index)['div.section_child']"
@@ -239,6 +311,20 @@ const mapActivesToItems = (index: number) => {
 }
 .section_layout {
  display: grid;
+  position: relative;
+
+  .section_child {
+    z-index: 1;
+  }
+  .attributeBackground {
+    position: absolute;
+    height: 100%;
+    z-index: 0;
+    display: none;
+    left: -50vw;
+    width: 150vw;
+  }
+
  &.smartphone_layout {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }
@@ -262,6 +348,24 @@ const mapActivesToItems = (index: number) => {
  &.six_col_layout {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
+  &.seven_col_layout {
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+  }
+  &.eight_col_layout {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
+  &.nine_col_layout {
+    grid-template-columns: repeat(9, minmax(0, 1fr));
+  }
+  &.ten_col_layout {
+    grid-template-columns: repeat(10, minmax(0, 1fr));
+  }
+  &.eleven_col_layout {
+    grid-template-columns: repeat(11, minmax(0, 1fr));
+  }
+  &.twelve_col_layout {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
  .col-span-2 {
    grid-column: span 2 / span 2;
  }
@@ -271,6 +375,30 @@ const mapActivesToItems = (index: number) => {
  .col-span-4 {
    grid-column: span 4 / span 4;
  }
+  .col-span-5 {
+    grid-column: span 5 / span 5;
+  }
+  .col-span-6 {
+    grid-column: span 6 / span 6;
+  }
+  .col-span-7 {
+    grid-column: span 7 / span 7;
+  }
+  .col-span-8 {
+    grid-column: span 8 / span 8;
+  }
+  .col-span-9 {
+    grid-column: span 9 / span 9;
+  }
+  .col-span-10 {
+    grid-column: span 10 / span 10;
+  }
+  .col-span-11 {
+    grid-column: span 11 / span 11;
+  }
+  .col-span-12 {
+    grid-column: span 12 / span 12;
+  }
  .border-custom {
    border-color: #e5e5e5 !important;
  }
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import DynamicLayout from '@/components/dynamic-page/page-section/layouts/index.vue';
+import type { PageSection } from "@/server/models/dynamic-page/index";
+
+
+const emit = defineEmits(["dropComponent", "dropData", "selectComponent"]);
+
+const props = defineProps<{
+  label?: any;
+  layout?: string;
+  settings?: any;
+  content?: any;
+  section: PageSection;
+}>();
+</script>
+
+<template>
+  <DynamicLayout :layout="props.layout" :content="props.content" :settings="props.settings" :section="props.section" />
+</template>
+
+<style lang="scss" scoped>
+.border-custom {
+  border-color: #e5e5e5 !important;
+}
+</style>
@@ -1 +1,2 @@
 export { default as Article_Section_Default } from './Default.vue'
+export { default as Article_Detail } from './Detail.vue'
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Article_Section_Default } from "./index";
+import { Article_Section_Default, Article_Detail } from "./index";
 import type { PageSection } from "@/server/models/dynamic-page/index";
 import { enumPageSectionKey, enumPageSectionTemplate } from "@/definitions/enum";

@@ -10,7 +10,8 @@ const _props = defineProps<{
 }>();

 const definedDynamicSection: Record<string, any> = {
-  [enumPageSectionTemplate[enumPageSectionKey.ARTICLE]['DEFAULT']]: Article_Section_Default,
+  [`${enumPageSectionTemplate[enumPageSectionKey.ARTICLE]["DEFAULT"]}`]: Article_Section_Default,
+  [`${enumPageSectionTemplate[enumPageSectionKey.ARTICLE]["DETAIL"]}`]: Article_Detail,
 };

 const getCurrentSection = computed(() => _props.settings.template);
@@ -32,7 +33,11 @@ const GET_PROPS = computed(() => {
 </script>

 <template>
-  <component :is="definedDynamicSection[getCurrentSection]" v-bind="{ ...GET_PROPS(), section: _props.section, content: _props.content, settings: _props.settings }">
+  <component 
+    v-if="definedDynamicSection[getCurrentSection]"
+    :is="definedDynamicSection[getCurrentSection]" 
+    v-bind="{ ...GET_PROPS(), section: _props.section, content: _props.content, settings: _props.settings }"
+  >
    <slot />
  </component>
 </template>
@@ -0,0 +1 @@
+export { default as Misses_Section } from './misses/index.vue'
@@ -0,0 +1,43 @@
+<script lang="ts" setup>
+import type { PageSection } from "@/server/models/dynamic-page/index";
+
+import { enumPageSectionKey, enumPageSectionTemplate } from "@/definitions/enum";
+import { Misses_Section } from "./index";
+
+const _props = defineProps<{
+  settings?: any;
+  content?: any;
+  section: PageSection;
+}>();
+
+const definedDynamicSection: Record<string, any> = {
+  [enumPageSectionTemplate[enumPageSectionKey.CATEGORY]['MISSES']]: Misses_Section,
+};
+
+const getCurrentSection = computed(() => _props.settings.template);
+
+const GET_PROPS = computed(() => {
+  return () => {
+    let props: any = {};
+    if (_props.settings) {
+      for (const [key, value] of Object.entries(_props.settings)) {
+        props = {
+          ...props,
+          [key]: value,
+        };
+      }
+    }
+    return props;
+  };
+});
+</script>
+
+<template>
+  <component 
+    v-if="definedDynamicSection[getCurrentSection]"
+    :is="definedDynamicSection[getCurrentSection]" 
+    v-bind="{ ...GET_PROPS(), section: _props.section, content: _props.content, settings: _props.settings }"
+  >
+    <slot />
+  </component>
+</template>
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import DynamicLayout from '@/components/dynamic-page/page-section/layouts/index.vue';
+import type { PageSection } from "@/server/models/dynamic-page/index";
+
+const emit = defineEmits(["dropComponent", "dropData", "selectComponent"]);
+
+const props = defineProps<{
+  label?: any;
+  layout?: string;
+  settings?: any;
+  content?: any;
+  section: PageSection;
+}>();
+</script>
+
+<template>
+  <section>
+    <div>
+      <div>
+        <div>
+            <img class="w-full " src="~/assets/images/tienphong/MissCategory.png" alt="">
+        </div>
+
+        <div class="mt-3">
+          <template v-if="props.layout">
+            <DynamicLayout
+                :layout="props.layout"
+                :content="props.content"
+                :settings="props.settings"
+                :section="props.section"
+            />
+            </template>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style lang="scss" scoped>
+  .border-custom {
+    border-color: #e5e5e5 !important;
+  }
+</style>
@@ -0,0 +1 @@
+export { default as Default } from './Default.vue'
@@ -0,0 +1,43 @@
+<script lang="ts" setup>
+import type { PageSection } from "@/server/models/dynamic-page/index";
+
+import { enumPageSectionKey, enumPageSectionTemplate } from "@/definitions/enum";
+import { Default } from "./index";
+
+const _props = defineProps<{
+  settings?: any;
+  content?: any;
+  section: PageSection;
+}>();
+
+const definedDynamicSection: Record<string, any> = {
+  [enumPageSectionTemplate[enumPageSectionKey.CATEGORY]['MISSES']]: Default,
+};
+
+const getCurrentSection = computed(() => _props.settings.template);
+
+const GET_PROPS = computed(() => {
+  return () => {
+    let props: any = {};
+    if (_props.settings) {
+      for (const [key, value] of Object.entries(_props.settings)) {
+        props = {
+          ...props,
+          [key]: value,
+        };
+      }
+    }
+    return props;
+  };
+});
+</script>
+
+<template>
+  <component 
+    v-if="definedDynamicSection[getCurrentSection]"
+    :is="definedDynamicSection[getCurrentSection]" 
+    v-bind="{ ...GET_PROPS(), section: _props.section, content: _props.content, settings: _props.settings }"
+  >
+    <slot />
+  </component>
+</template>
@@ -1 +1,3 @@
 export { default as None_Section } from './none/index.vue'
+export { default as Category_Section } from './category/index.vue'
+export { default as Article_Section } from './articles/index.vue'
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { PageSection } from "@/server/models/dynamic-page/index";
 import { enumPageSectionKey } from "@/definitions/enum";
-import { None_Section } from "./index";
+import { None_Section,Category_Section, Article_Section } from "./index";

 const _props = defineProps<{
  settings?: any;
@@ -11,6 +11,8 @@ const _props = defineProps<{

 const definedDynamicSection: Record<string, any> = {
  [enumPageSectionKey.NONE]: None_Section,
+  [enumPageSectionKey.CATEGORY]: Category_Section,
+  [enumPageSectionKey.ARTICLE]: Article_Section,
 };

 const getCurrentSection = computed(() => {
@@ -34,7 +36,7 @@ const GET_PROPS = computed(() => {
 </script>

 <template>
-  <component :is="definedDynamicSection[getCurrentSection]" v-bind="{ ...GET_PROPS(), section: _props.section, content: _props.content, settings: _props.settings }">
+  <component v-if="definedDynamicSection[getCurrentSection]" :is="definedDynamicSection[getCurrentSection]" v-bind="{ ...GET_PROPS(), section: _props.section, content: _props.content, settings: _props.settings }">
    <slot />
  </component>
 </template>
@@ -32,7 +32,11 @@ const GET_PROPS = computed(() => {
 </script>

 <template>
-  <component :is="definedDynamicSection[getCurrentSection]" v-bind="{ ...GET_PROPS(), section: _props.section, content: _props.content, settings: _props.settings }">
+  <component 
+    v-if="definedDynamicSection[getCurrentSection]"
+    :is="definedDynamicSection[getCurrentSection]" 
+    v-bind="{ ...GET_PROPS(), section: _props.section, content: _props.content, settings: _props.settings }"
+  >
    <slot />
  </component>
 </template>
@@ -44,7 +44,11 @@ const GET_PROPS = computed(() => {
 </script>

 <template>
-    <component :is="definedDynamicPageLayout[getCurrentLayout]" v-bind="GET_PROPS()">
+    <component 
+        v-if="definedDynamicPageLayout[getCurrentLayout]"
+        :is="definedDynamicPageLayout[getCurrentLayout]" 
+        v-bind="GET_PROPS()"
+    >
        <slot />
    </component>
 </template>
@@ -4,7 +4,7 @@ import { enumPageComponentLayouts, enumPageComponentTemplate, enumPageComponentK
 </script>

 <template>
-  <footer id="footer" class="main-footer">
+  <footer id="footer" class="main-footer mt-20">
    <div class="main-footer-container">
      <div class="footer-centertab">
        <div>
@@ -91,7 +91,7 @@ import { enumPageComponentLayouts, enumPageComponentTemplate, enumPageComponentK
          <div class="flex justify-between items-end">
            <div class="w-1/2">
              <div>
-                <img src="~/assets/images/tienphong/logo-footer.png" alt="" />
+                <img class="w-200px" src="~/assets/images/tienphong/logo.png" alt="" />
              </div>
            </div>

@@ -37,7 +37,7 @@ onMounted(() => {
    <div class="main-header-centerbar">
      <div class="flex items-center">
        <div class="main-header-logo">
-          <img src="~/assets/images/tienphong/logo.png" alt="logo">
+          <nuxt-link to="/"><img class="w-200px" src="~/assets/images/tienphong/logo.png" alt="logo"></nuxt-link>
        </div>
        <div class="main-header-control">
          <div class="main-header-relations">
@@ -32,7 +32,11 @@ const GET_PROPS = computed(() => {
 </script>

 <template>
-    <component :is="definedDynamicPage[getCurrentTemplate] || null" v-bind="{...(GET_PROPS()), settings: _props.settings}">
+    <component 
+        v-if="definedDynamicPage[getCurrentTemplate]" 
+        :is="definedDynamicPage[getCurrentTemplate]" 
+        v-bind="{...(GET_PROPS()), settings: _props.settings}"
+    >
        <slot />
    </component>
 </template>
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+    const props = defineProps<{
+        SCRIPT_ID?: any,
+        SCRIPT_SRC?: any,
+        CONTAINER_ID?: any,
+        options?: any,
+
+        widgetKey?: any
+    }>()
+
+    const widgets : any = {};
+    const instance = getCurrentInstance();
+
+    const canUseDOM = () => {
+        return typeof window !== 'undefined' && window.document && window.document.createElement;
+    };
+    const getScriptElement = () => {
+        return document.getElementById(props.SCRIPT_ID);
+    }
+    const updateOnloadListener = (onload : any) => {
+      const script : any = getScriptElement(); 
+      const oldOnload = script.onload;
+      return script.onload = () => {
+        oldOnload();
+        onload();
+      };
+    }
+    const scriptExists = () => {
+      return getScriptElement() !== null;
+    }
+    const appendScript = (onload : any) => {
+      if (!canUseDOM()) {
+        onload();
+        return;
+      }
+
+      if (scriptExists()) {
+        if (typeof window[props.widgetKey] === 'undefined') {
+          updateOnloadListener(onload);
+          return;
+        }
+        onload();
+        return;
+      }
+      const script = document.createElement('script');
+      script.id = props.SCRIPT_ID;
+      script.type = 'text/javascript';
+      script.async = true;
+      script.src = props.SCRIPT_SRC;
+      script.onload = onload;
+      document.getElementsByTagName('head')[0].appendChild(script);
+    }
+    const initWidget = (key: any) => {
+      if (typeof widgets[key].key === 'undefined') {
+        return;
+      }
+      widgets[key].script()
+    }
+
+    onMounted(async () => {
+      await Object.assign(widgets, { 
+        FireAnt: {
+          script: () => new window.FireAnt.MarketsWidget(Object.assign({ container_id: props.CONTAINER_ID }, props.options)),
+          key: window.FireAnt
+        }})
+      appendScript(initWidget(props.widgetKey));
+      // instance.proxy.$forceUpdate();
+    })
+</script>
+
+<template>
+  <ClientOnly>
+    <div :key="props.CONTAINER_ID" :id="props.CONTAINER_ID"></div>
+  </ClientOnly>
+</template>
@@ -1,232 +0,0 @@
-import { enumPageComponentLayouts, enumPageSectionLayouts, templates, enumPageComponentKey, enumPageComponentTemplate, enumPageSectionKey, enumPageSectionTemplate } from "@/definitions/enum";
-
-export const pageTypes = [
-  { title: "None", value: 0 }, // Không xác định
-  { title: "Home", value: 1 }, // Trang chủ
-  { title: "Section", value: 2 }, // Chuyên trang
-  { title: "Category", value: 3 }, // Trang danh mục
-  { title: "Topic", value: 4 }, // Trang chủ đề
-  { title: "Event", value: 5 }, // Trang sự kiện
-  { title: "Collection", value: 6 }, // Trang sưu tập
-  { title: "Article", value: 7 }, // Trang bài viết
-  { title: "Tag", value: 8 }, // Trang từ khóa
-  { title: "Author", value: 9 }, // Trang tác giả
-  { title: "Search", value: 10 }, // Trang tìm kiếm
-  { title: "Contact", value: 11 }, // Trang liên hệ
-  { title: "About", value: 12 }, // Trang giới thiệu
-  { title: "Service", value: 13 }, // Trang dịch vụ
-  { title: "Policy", value: 14 }, // Trang chính sách
-  { title: "Terms", value: 15 }, // Trang điều khoản
-  { title: "Privacy", value: 16 }, // Trang bảo mật
-  { title: "Error", value: 97 }, // Trang lỗi
-  { title: "Maintenance", value: 98 }, // Trang bảo trì
-  { title: "Custom", value: 99 }, // Trang tùy chỉnh
-];
-// LayoutType: None=0 | Normal=1 | Short=2 | Long=3 | Page=4
-
-export const pageLayouts = (key: string) => {
-  if (key === templates.ARTICLE) {
-    return [
-      { title: "None", key: 0, value: "ARTICLE_NONE" },
-      { title: "Normal", key: 1, value: "ARTICLE_NORMAL" },
-      { title: "Short", key: 2, value: "ARTICLE_SHORT" },
-      { title: "Long", key: 3, value: "ARTICLE_LONG" },
-      { title: "Page", key: 4, value: "ARTICLE_PAGE" },
-    ];
-  } else {
-    return [
-      { title: "None", value: 0 },
-      { title: "Cơ bản", value: "Default" },
-      { title: "Full Page", value: "Full_Page" }, // full with 100%
-      { title: "Center Page", value: "Center_Page" }, // ở giữa
-      { title: "Backgroud Page", value: "Backgroud_Page" }, // Phân trang
-    ];
-  }
-};
-
-export const pageTemplates = [
-  { title: "None", value: "None" }, // Không xác định
-  { title: "Home", value: "Home" }, // Trang chủ
-  { title: "Section", value: "Section" }, // Chuyên trang
-  { title: "Category", value: "Category" }, // Trang danh mục
-  { title: "Topic", value: "Topic" }, // Trang chủ đề
-  { title: "Event", value: "Event" }, // Trang sự kiện
-  { title: "Collection", value: "Collection" }, // Trang sưu tập
-  { title: "Article", value: "Article" }, // Trang bài viết
-  { title: "Tag", value: "Tag" }, // Trang từ khóa
-  { title: "Author", value: "Author" }, // Trang tác giả
-  { title: "Search", value: "Search" }, // Trang tìm kiếm
-  { title: "Contact", value: "Contact" }, // Trang liên hệ
-  { title: "About", value: "About" }, // Trang giới thiệu
-  { title: "Service", value: "Service" }, // Trang dịch vụ
-  { title: "Policy", value: "Policy" }, // Trang chính sách
-  { title: "Terms", value: "Terms" }, // Trang điều khoản
-  { title: "Privacy", value: "Privacy" }, // Trang bảo mật
-  { title: "Error", value: "Error" }, // Trang lỗi
-  { title: "Maintenance", value: "Maintenance" }, // Trang bảo trì
-  { title: "Custom", value: "Custom" }, // Trang tùy chỉnh
-];
-
-export const pageComponentTypes = [
-  { title: "None", value: 0 }, // Không xác định
-  { title: "Individual", value: 1 }, // Đơn lẻ
-  { title: "Collection", value: 2 }, // Sưu tập
-  { title: "Pagination", value: 3 }, // Phân trang
-];
-
-export const pageSectionTypes = [
-  { title: "None", value: 0 }, // Không xác định
-  { title: "Block", value: 1 }, // Khối
-];
-
-export const pageDataType = [
-  { title: "Section", value: "Section" },
-  { title: "Category", value: "Category" },
-  { title: "Topic", value: "Topic" },
-  { title: "Event", value: "Event" },
-  { title: "Collection", value: "Collection" },
-  { title: "Article", value: "Article" },
-  { title: "Tag", value: "Tag" },
-  { title: "Author", value: "Author" },
-  { title: "Poll", value: "Poll" },
-  { title: "Quiz", value: "Quiz" },
-  { title: "Survey", value: "Survey" },
-  { title: "Advertising", value: "Advertising" },
-  { title: "Other", value: "Other" },
-];
-
-export const pageDataQuery = [
-  { title: "IDS", value: "IDS" },
-  { title: "NEW", value: "NEW" },
-  { title: "VIEW", value: "VIEW" },
-  { title: "SQL", value: "SQL" },
-  { title: "REQUEST", value: "REQUEST" },
-];
-
-export const pageTaxonomy = [
-  { title: "Home", value: "Home" }, // Trang khác
-  { title: "Section", value: "Section" }, // Chuyên trang
-  { title: "Category", value: "Category" }, // Trang danh mục
-  { title: "Topic", value: "Topic" }, // Trang chủ đề
-  { title: "Event", value: "Event" }, // Trang sự kiện
-  { title: "Collection", value: "Collection" }, // Trang sưu tập
-  { title: "Article", value: "Article" }, // Trang bài viết
-  { title: "Tag", value: "Tag" }, // Trang từ khóa
-  { title: "Author", value: "Author" }, // Trang tác giả
-  { title: "Poll", value: "Poll" }, // Trang poll
-  { title: "Quiz", value: "Quiz" }, // Trang quiz
-  { title: "Survey", value: "Survey" }, // Trang survey
-  { title: "Advertising", value: "Advertising" }, // Trang quảng cáo
-  { title: "Other", value: "Other" }, // Trang khác
-  { title: "Navigation", value: "Navigation" }, // Navigation
-];
-
-/* SECTION SETTINGS */
-export const pageSectionTaxonomy = [
-  { title: "None", value: "None" }, // Phân vùng của Chuyên trang
-  { title: "Section", value: "Section" }, // Phân vùng của Chuyên trang
-  { title: "Category", value: "Category" }, // Phân vùng của Trang danh mục
-  { title: "Topic", value: "Topic" }, // Phân vùng của Trang chủ đề
-  { title: "Event", value: "Event" }, // Phân vùng của Trang sự kiện
-  { title: "Collection", value: "Collection" }, // Phân vùng của Trang sưu tập
-  { title: "Article", value: "Article" }, // Phân vùng của Trang bài viết
-  { title: "Tag", value: "Tag" }, // Phân vùng của Trang từ khóa
-  { title: "Author", value: "Author" }, // Phân vùng của Trang tác giả
-  { title: "Poll", value: "Poll" }, // Phân vùng của Trang poll
-  { title: "Quiz", value: "Quiz" }, // Phân vùng của Trang quiz
-  { title: "Survey", value: "Survey" }, // Phân vùng của Trang survey
-  { title: "Advertising", value: "Advertising" }, // Phân vùng của Trang quảng cáo
-  { title: "Other", value: "Other" }, // Phân vùng của Trang khác
-  { title: "Navigation", value: "Navigation" }, // Phân vùng của Navigation
-];
-
-export const pageSectionTempaltes = {
-  [enumPageSectionKey.NONE]: [
-    { title: "Thẻ trống", value: enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE'] },
-  ],
-};
-
-export const pageSectionLayouts = {
-  [enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]: [
-    { title: "2 Cột", value: enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_TWO'] },
-    { title: "2 Cột, bên trái rộng", value: enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_LEFT_TWO'] },
-    { title: "2 Cột, bên phải rộng", value: enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_RIGHT_TWO'] },
-    { title: "3 Cột", value: enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_THREE'] },
-    { title: "4 Cột", value: enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_FOUR'] },
-    { title: "4 Cột, giữa 2 cột", value: enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_CENTER_TWO'] },
-    { title: "5 Cột, giữa 3 cột", value: enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_CENTER_THREE'] },
-    { title: "6 Cột, giữa 4 cột", value: enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['VERTICAL_CENTER_FOUR'] },
-    { title: "1 Hàng", value: enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_ONE'] },
-    { title: "2 Hàng", value: enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_TWO'] },
-    { title: "3 Hàng", value: enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_THREE'] },
-    { title: "4 Hàng", value: enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_FOUR'] },
-    { title: "5 Hàng", value: enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_FIVE'] },
-    { title: "6 Hàng", value: enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_SIX'] },
-    { title: "7 Hàng", value: enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_SEVEN'] },
-    { title: "8 Hàng", value: enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_EIGHT'] },
-    { title: "9 Hàng", value: enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_NINE'] },
-    { title: "10 Hàng", value: enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]['HORIZONTAL_TEN'] }
-  ],
-};
-
-/* COMPONENT SETTINGS */
-export const pageComponentTaxonomy = [
-  { title: "Section", value: "Section" }, // Component loại Chuyên trang
-  { title: "Category", value: "Category" }, // Component loại danh mục
-  { title: "Topic", value: "Topic" }, // Component loại chủ đề
-  { title: "Event", value: "Event" }, // Component loại sự kiện
-  { title: "Collection", value: "Collection" }, // Component loại sưu tập
-  { title: "Article", value: "Article" }, // Component loại bài viết
-  { title: "Tag", value: "Tag" }, // Component loại từ khóa
-  { title: "Author", value: "Author" }, // Component loại tác giả
-  { title: "Poll", value: "Poll" }, // Component loại poll
-  { title: "Quiz", value: "Quiz" }, // Component loại quiz
-  { title: "Survey", value: "Survey" }, // Trang survey
-  { title: "Advertising", value: "Advertising" }, // Component loại quảng cáo
-  { title: "Other", value: "Other" }, // Component loại khác
-  { title: "Navigation", value: "Navigation" }, // Component loại Navigation
-];
-
-export const pageComponentTemplates = {
-  [`${enumPageComponentKey.ARTICLE}`]: [
-    { title: "Thẻ bài viết", value: enumPageComponentTemplate[enumPageComponentKey.ARTICLE]['ARTICLE_CARD'] },
-    { title: "Chi tiết bài viết", value: enumPageComponentTemplate[enumPageComponentKey.ARTICLE]['ARTICLE_DETAIL'] },
-  ],
-  [`${enumPageComponentKey.OTHER}`]: [
-    { title: "Thời tiết", value: enumPageComponentTemplate[enumPageComponentKey.OTHER]['WEATHER'] },
-    { title: "Chứng khoán", value: enumPageComponentTemplate[enumPageComponentKey.OTHER]['SECURITIES'] },
-  ],
-  [`${enumPageComponentKey.ADVERTISING}`]: [
-    { title: "Quảng cáo", value: enumPageComponentTemplate[enumPageComponentKey.ADVERTISING]['ADVERTISING'] },
-  ],
-};
-
-export const pageComponentLayouts = {
-  [enumPageComponentTemplate[enumPageComponentKey.ARTICLE]['ARTICLE_CARD']]: [
-    { title: "Thẻ bài viết cơ bản", value: enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.ARTICLE]['ARTICLE_CARD']]['CARD_DEFAULT'] },
-    { title: "Thẻ bài viết audio ", value: enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.ARTICLE]['ARTICLE_CARD']]['CARD_AUDIO'] }
-    // { title: "Thẻ bài viết hình ảnh ", value: enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.ARTICLE]['ARTICLE_CARD']]['CARD_AUDIO'] },
-    // { title: "Thẻ bài viết có lồng chữ trong ảnh", value: '2' },
-    // { title: "Thẻ bài viết Video", value: '3' },
-    // { title: "Thẻ bài viết Audio", value: '4' },
-  ],
-  [enumPageComponentTemplate[enumPageComponentKey.ARTICLE]['ARTICLE_DETAIL']]: [
-    { title: "Chi tiết bài viết", value: enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.ARTICLE]['ARTICLE_DETAIL']]['DETAIL_GENERAL'] },
-    { title: "Chi tiết podcast", value: enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.ARTICLE]['ARTICLE_DETAIL']]['DETAIL_PODCAST'] },
-    { title: "Chi tiết video", value: enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.ARTICLE]['ARTICLE_DETAIL']]['DETAIL_VIDEO'] },
-    { title: "Chi tiết image", value: enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.ARTICLE]['ARTICLE_DETAIL']]['DETAIL_IMAGE'] },
-    // { title: "Chi tiết bài viết cơ bản", value: '1' },
-    // { title: "Chi tiết bài viết Video", value: '2' },
-    // { title: "Chi tiết bài viết Podcast ", value: '3' },
-    // { title: "Chi tiết bài viết Image ", value: '4' },
-  ],
-  [enumPageComponentTemplate[enumPageComponentKey.OTHER]['WEATHER']]: [
-    { title: "Thời tiết", value: enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.OTHER]['WEATHER']]['WEATHER_DEFAULT'] }
-  ],
-  [enumPageComponentTemplate[enumPageComponentKey.OTHER]['SECURITIES']]: [
-    { title: "Chứng khoán", value: enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.OTHER]['SECURITIES']]['SECURITIES_DEFAULT'] }
-  ],
-  [enumPageComponentTemplate[enumPageComponentKey.ADVERTISING]['ADVERTISING']]: [
-    { title: "Quảng cáo", value: enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.ADVERTISING]['ADVERTISING']]['ADVERTISING_DEFAULT'] }
-  ],
-};
@@ -146,9 +146,10 @@ export const pageSectionTempaltes = {
  ],
  [enumPageSectionKey.ARTICLE]: [
    { title: "Phân vùng bài viết cơ bản", value: enumPageSectionTemplate[enumPageSectionKey.ARTICLE]['DEFAULT'] },
+    { title: "Thẻ bài viết chi tiết", value: enumPageSectionTemplate[enumPageSectionKey.ARTICLE]['DETAIL'] },
  ],
-  [enumPageSectionKey.SECTION]: [
-    { title: "Phân vùng Hoa hậu", value: enumPageSectionTemplate[enumPageSectionKey.SECTION]['MISSES'] },
+  [enumPageSectionKey.CATEGORY]: [
+    { title: "Phân vùng Hoa hậu", value: enumPageSectionTemplate[enumPageSectionKey.CATEGORY]['MISSES'] },
  ],
 };

@@ -158,6 +159,10 @@ export const pageSectionLayouts = {
    { title: "Trái 1 Cột, giữa 2 Cột, phải 3 Cột", value: enumPageSectionLayouts[`${enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']}`]['VERTICAL_ONE_TWO_THREE'] },
    { title: "2 Cột, bên trái rộng", value: enumPageSectionLayouts[`${enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']}`]['VERTICAL_LEFT_TWO'] },
    { title: "6 Cột, phải 5 cột", value: enumPageSectionLayouts[`${enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']}`]['VERTICAL_ONE_FIVE'] },
+    { title: "5-3-2-2", value: enumPageSectionLayouts[`${enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']}`]['VERTICAL_FIVE_THREE_TWO_TWO'] },
+    { title: "5-2-2-3", value: enumPageSectionLayouts[`${enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']}`]['VERTICAL_FIVE_TWO_TWO_THREE'] },
+    { title: "2-5-3-2", value: enumPageSectionLayouts[`${enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']}`]['VERTICAL_TWO_FIVE_THREE_TWO'] },
+    { title: "5 Cột, phải 4 cột", value: enumPageSectionLayouts[`${enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']}`]['VERTICAL_ONE_FOUR'] },
    { title: "2 Cột, bên phải rộng", value: enumPageSectionLayouts[`${enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']}`]['VERTICAL_RIGHT_TWO'] },
    { title: "3 Cột", value: enumPageSectionLayouts[`${enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']}`]['VERTICAL_THREE'] },
    { title: "4 Cột", value: enumPageSectionLayouts[`${enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']}`]['VERTICAL_FOUR'] },
@@ -175,8 +180,12 @@ export const pageSectionLayouts = {
    { title: "9 Hàng", value: enumPageSectionLayouts[`${enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']}`]['HORIZONTAL_NINE'] },
    { title: "10 Hàng", value: enumPageSectionLayouts[`${enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']}`]['HORIZONTAL_TEN'] }
  ],
-  [`${enumPageSectionTemplate[enumPageSectionKey.SECTION]['MISSES']}`]: [
-    { title: "Cơ bản", value: enumPageSectionLayouts[`${enumPageSectionTemplate[enumPageSectionKey.SECTION]['MISSES']}`]['DEFAULT'] },
+  [`${enumPageSectionTemplate[enumPageSectionKey.CATEGORY]['MISSES']}`]: [
+    { title: "Cơ bản", value: enumPageSectionLayouts[`${enumPageSectionTemplate[enumPageSectionKey.CATEGORY]['MISSES']}`]['DEFAULT'] },
+  ],
+
+  [`${enumPageSectionTemplate[enumPageSectionKey.ARTICLE]['DETAIL']}`]: [
+    { title: "Cơ bản", value: enumPageSectionLayouts[`${enumPageSectionTemplate[enumPageSectionKey.ARTICLE]['DETAIL']}`]['DEFAULT'] },
  ],
 };

@@ -210,6 +219,7 @@ export const pageComponentTemplates = {
  ],
  [`${enumPageComponentKey.COLLECTION}`]: [
    { title: "Bộ sưu tập bài viết", value: enumPageComponentTemplate[enumPageComponentKey.COLLECTION]['ARTICLE'] },
+    { title: "Bộ sưu tập danh mục", value: enumPageComponentTemplate[enumPageComponentKey.COLLECTION]['CATEGORY'] },
  ],
  [`${enumPageComponentKey.SECTION}`]: [
    { title: "Bộ phân trang bài viết", value: enumPageComponentTemplate[enumPageComponentKey.SECTION]['ARTICLE'] },
@@ -222,7 +232,7 @@ export const pageComponentTemplates = {
  ],
  [`${enumPageComponentKey.OTHER}`]: [
    { title: "Thời tiết", value: enumPageComponentTemplate[enumPageComponentKey.OTHER]['WEATHER'] },
-    { title: "Chứng khoán", value: enumPageComponentTemplate[enumPageComponentKey.OTHER]['SECURITIES'] },
+    { title: "Chứng khoán", value: enumPageComponentTemplate[enumPageComponentKey.OTHER]['STOCK'] },
  ],
 };

@@ -232,12 +242,15 @@ export const pageComponentLayouts = {
    { title: "Thẻ bài viết Audio", value: enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.ARTICLE]['ARTICLE_CARD']}`]['CARD_AUDIO'] },
    { title: "Thẻ bài viết Video", value: enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.ARTICLE]['ARTICLE_CARD']}`]['CARD_VIDEO'] },
    { title: "Thẻ bài viết Video Hightlight", value: enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.ARTICLE]['ARTICLE_CARD']}`]['CARD_VIDEO_HIGHLIGHT'] },
+    { title: "Thẻ bài viết Hoa hậu Hightlight", value: enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.ARTICLE]['ARTICLE_CARD']}`]['CARD_MISS_HIGHLIGHT'] },
  ],
  [enumPageComponentTemplate[enumPageComponentKey.ARTICLE]['ARTICLE_DETAIL']]: [
    { title: "Chi tiết bài viết", value: enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.ARTICLE]['ARTICLE_DETAIL']]['DETAIL_GENERAL'] },
    { title: "Chi tiết bài Podcast", value: enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.ARTICLE]['ARTICLE_DETAIL']]['DETAIL_PODCAST'] },
    { title: "Chi tiết bài Video", value: enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.ARTICLE]['ARTICLE_DETAIL']]['DETAIL_VIDEO'] },
    { title: "Chi tiết bài Image", value: enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.ARTICLE]['ARTICLE_DETAIL']]['DETAIL_IMAGE'] },
+    { title: "Chi tiết bài eMagazine", value: enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.ARTICLE]['ARTICLE_DETAIL']]['DETAIL_EMAGAZINE'] },
+    { title: "Chi tiết bài Inforgraphic", value: enumPageComponentLayouts[enumPageComponentTemplate[enumPageComponentKey.ARTICLE]['ARTICLE_DETAIL']]['DETAIL_INFOGRAPHIC'] },
  ],
  /* NAVIGATION */
  [`${enumPageComponentTemplate[enumPageComponentKey.NAVIGATION]['TOP']}`]: [
@@ -255,6 +268,9 @@ export const pageComponentLayouts = {
    { title: "Thẻ bài viết cơ bản", value: enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.COLLECTION]['ARTICLE']}`]['ARTICLE_COLLECTION_DEFAULT'] },
    { title: "Thẻ bài viết Audio", value: enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.COLLECTION]['ARTICLE']}`]['ARTICLE_COLLECTION_AUDIO'] },
  ],
+  [`${enumPageComponentTemplate[enumPageComponentKey.COLLECTION]['CATEGORY']}`]: [
+    { title: "Hoa hậu - Cơ bản", value: enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.COLLECTION]['CATEGORY']}`]['MISSES_COLLECTION_DEFAULT'] },
+  ],

  /* SECTION */
  [`${enumPageComponentTemplate[enumPageComponentKey.SECTION]['ARTICLE']}`]: [
@@ -277,7 +293,7 @@ export const pageComponentLayouts = {
  [`${enumPageComponentTemplate[enumPageComponentKey.OTHER]['WEATHER']}`]: [
    { title: "Thời tiết", value: enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.OTHER]['WEATHER']}`]['WEATHER_DEFAULT'] }
  ],
-  [`${enumPageComponentTemplate[enumPageComponentKey.OTHER]['SECURITIES']}`]: [
-    { title: "Chứng khoán", value: enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.OTHER]['SECURITIES']}`]['SECURITIES_DEFAULT'] }
+  [`${enumPageComponentTemplate[enumPageComponentKey.OTHER]['STOCK']}`]: [
+    { title: "Chứng khoán", value: enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.OTHER]['STOCK']}`]['STOCK_DEFAULT'] }
  ],
 };
@@ -1,316 +0,0 @@
-export const templates = {
-  NONE: "None", // Không xác định
-  HOME: "Home", // Trang chủ
-  SECTION: "Section", // Chuyên trang
-  CATEGORY: "Category", // Trang danh mục
-  TOPIC: "Topic", // Trang chủ đề
-  EVENT: "Event", // Trang sự kiện
-  COLLECTION: "Collection", // Trang sưu tập
-  ARTICLE: "Article", // Trang bài viết
-  TAG: "Tag", // Trang từ khóa
-  AUTHOR: "Author", // Trang tác giả
-  SEARCH: "Search", // Trang tìm kiếm
-  CONTACT: "Contact", // Trang liên hệ
-  ABOUT: "About", // Trang giới thiệu
-  SERVICE: "Service", // Trang dịch vụ
-  POLICY: "Policy", // Trang chính sách
-  TERMS: "Terms", // Trang điều khoản
-  PRIVACY: "Privacy", // Trang bảo mật
-  ERROR: "Error", // Trang lỗi
-  MAINTENANCE: "Maintenance", // Trang bảo trì
-  CUSTOM: "Custom", // Trang tùy chỉnh
-};
-
-export const layouts = {
-  NONE: "None", // Không xác định
-  FULL_PAGE: "Full_Page", // full width 100%
-  CENTER_PAGE: "Center_Page", // ở giữa
-  BACKGROUND_PAGE: "Background_Page", // Phân trang
-};
-
-export const dataTypes = {
-  SECTION: "Section",
-  CATEGORY: "Category",
-  TOPIC: "Topic",
-  EVENT: "Event",
-  COLLECTION: "Collection",
-  ARTICLE: "Article",
-  TAG: "Tag",
-  AUTHOR: "Author",
-  POLL: "Poll",
-  QUIZ: "Quiz",
-  SURVEY: "Survey",
-  ADVERTISING: "Advertising",
-  OTHER: "Other",
-};
-
-export const dataQuery = {
-  IDS: "IDS",
-  NEW: "NEW",
-  VIEW: "VIEW",
-  SQL: "SQL",
-  REQUEST: "REQUEST",
-};
-
-export const sectionTypes = {
-  NONE: 0, // Không xác định
-  BLOCK: 1, // Khối
-};
-
-export const sectionTaxonomy = {
-  BLOCK: "Block",
-  MODULE: "Module",
-  NAVIGATION: "Navigation",
-};
-
-export const enumPageType = {
-  NONE: 0, // Không xác định
-  HOME: 1, // Trang chủ
-  SECTION: 2, // Chuyên trang
-  CATEGORY: 3, // Trang danh mục
-  TOPIC: 4, // Trang chủ đề
-  EVENT: 5, // Trang sự kiện
-  COLLECTION: 6, // Trang sưu tập
-  ARTICLE: 7, // Trang bài viết
-  TAG: 8, // Trang từ khóa
-  AUTHOR: 9, // Trang tác giả
-  SEARCH: 10, // Trang tìm kiếm
-  CONTACT: 11, // Trang liên hệ
-  ABOUT: 12, // Trang giới thiệu
-  SERVICE: 13, // Trang dịch vụ
-  POLICY: 14, // Trang chính sách
-  TERMS: 15, // Trang điều khoản
-  PRIVACY: 16, // Trang bảo mật
-  ERROR: 97, // Trang lỗi
-  MAINTENANCE: 98, // Trang bảo trì
-  CUSTOM: 99, // Trang tùy chỉnh
-};
-
-export const enumPageComponentTemplates = { // KHÔNG ĐƯỢC XÓA KEY - BIẾN này
-  NONE: "None", // Không xác định
-  SECTION: "Section", // Chuyên trang
-  CATEGORY: "Category", // Trang danh mục
-  TOPIC: "Topic", // Trang chủ đề
-  EVENT: "Event", // Trang sự kiện
-  COLLECTION: "Collection", // Trang sưu tập
-  ARTICLE: "Article", // Trang bài viết
-  TAG: "Tag", // Trang từ khóa
-  AUTHOR: "Author", // Trang tác giả
-  POLL: "Poll", // Trang poll
-  QUIZ: "Quiz", // Trang quiz
-  SURVEY: "Survey", // Trang survey
-  ADVERTISING: "Advertising", // Trang quảng cáo
-  OTHER: "Other", // Trang khác
-  NAVIGATION: "Navigation", // Navigation
-  LOCATION: 'Location', // Location
-  FIGURE: 'Figure', // Figure
-};
-
-export const dataTypeSort = [
-  { title: "Tăng dần", value: "+" },
-  { title: "Giảm dần", value: "-" },
-];
-export const dataTypeKeyInSort = [
-  { title: "Views", value: "Views" },
-  { title: "Shares", value: "Shares" },
-];
-export const dataTypeKeyInWith = [
-  { title: "Ids", value: "Ids" },
-  { title: "Sites", value: "Sites" },
-  { title: "Categories", value: "Categories" },
-  { title: "Topics", value: "Topics" },
-  { title: "Events", value: "Events" },
-  { title: "Collections", value: "Collections" },
-];
-export const dataSelectQuery = [
-  { title: "COMMAND", value: "COMMAND" },
-  { title: "SQL", value: "SQL" },
-  { title: "REQUEST", value: "REQUEST" },
-  { title: "STATIC", value: "STATIC" },
-];
-export const dataTypeTTL = [
-  { title: "None", value: "" },
-  { title: "Day", value: "Day" },
-  { title: "Month", value: "Month" },
-  { title: 86400, value: 86400 },
-];
-export const dataMethodRequest = [
-  { title: "Get", value: "Get" },
-  { title: "Post", value: "Post" },
-];
-export const dataDesignLayout = [
-  { title: "Ngang", value: "row" },
-  { title: "Dọc", value: "column" },
-];
-export const dataBorderDesign = [
-  { title: "Top", value: "border-top:1px solid;" },
-  { title: "Right", value: "border-right:1px solid;" },
-  { title: "Bottom", value: "border-bottom:1px solid;" },
-  { title: "Left", value: "border-left:1px solid;" },
-];
-export const dataPaddingDesign = [
-  { title: "Top", value: "paddingTop" },
-  { title: "Right", value: "paddingRight" },
-  { title: "Bottom", value: "paddingBottom" },
-  { title: "Left", value: "paddingLeft" },
-];
-export const dataHideDesign = [
-  { title: "Ảnh", value: "div.basic-article_thumbnail" },
-  { title: "Tiêu đề", value: "h3.title" },
-  { title: "Mô tả", value: "p.paragraph" },
-];
-export const dataFontWeightDesign = [
-  { title: "100", value: 100 },
-  { title: "200", value: 200 },
-  { title: "300", value: 300 },
-  { title: "400", value: 400 },
-  { title: "500", value: 500 },
-  { title: "600", value: 600 },
-  { title: "700", value: 700 },
-  { title: "800", value: 800 },
-];
-
-export const dataStaticType = [
-  {
-    title: "Danh sách bài viết liên quan (Dành cho chi tiết bài viết)",
-    value: 1
-  },
-  {
-    title: "Danh sách bài viết cùng danh mục (Dành cho chi tiết bài viết)",
-    value: 2
-  },
-  {
-    title: "Tùy chỉnh",
-    value: 3
-  }
-]
-export const enumPageComponentStaticChild = {
-  LAYOUT: "Layout", // Không xác định
-  DEFAULT: "Default", // Chuyên trang
-};
-
-
-/* SECTION SETTINGS */
-// KHÔNG ĐƯỢC XÓA KEY - BIẾN này
-export const enumPageSectionKey = {
-  NONE: "None", // Không xác định
-  SECTION: "Section", // Chuyên trang
-  CATEGORY: "Category", // Trang danh mục
-  TOPIC: "Topic", // Trang chủ đề
-  EVENT: "Event", // Trang sự kiện
-  COLLECTION: "Collection", // Trang sưu tập
-  ARTICLE: "Article", // Trang bài viết
-  TAG: "Tag", // Trang từ khóa
-  AUTHOR: "Author", // Trang tác giả
-  POLL: "Poll", // Trang poll
-  QUIZ: "Quiz", // Trang quiz
-  SURVEY: "Survey", // Trang survey
-  ADVERTISING: "Advertising", // Trang quảng cáo
-  OTHER: "Other", // Trang khác
-  NAVIGATION: "Navigation", // Navigation
-  LOCATION: 'Location', // Location
-  FIGURE: 'Figure', // Figure
-};
-
-export const enumPageSectionTemplate = {
-  [enumPageSectionKey.NONE]: {
-    'NONE': "TYPE:None",
-  },
-};
-
-export const enumPageSectionLayouts = {
-  [enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']]: {
-    'VERTICAL_TWO': 'LAYOUT:vertical-TYPE:Default-MAX:2',
-    'VERTICAL_LEFT_TWO': 'LAYOUT:vertical-TYPE:LEFT-MAX:2',
-    'VERTICAL_RIGHT_TWO': 'LAYOUT:vertical-TYPE:RIGHT-MAX:2',
-    'VERTICAL_THREE': 'LAYOUT:vertical-TYPE:Default-MAX:3',
-    'VERTICAL_FOUR': 'LAYOUT:vertical-TYPE:Default-MAX:4',
-    'VERTICAL_CENTER_TWO': 'LAYOUT:vertical-TYPE:CENTER-MAX:2',
-    'VERTICAL_CENTER_THREE': 'LAYOUT:vertical-TYPE:CENTER-MAX:3',
-    'VERTICAL_CENTER_FOUR': 'LAYOUT:vertical-TYPE:CENTER-MAX:4',
-    'HORIZONTAL_ONE': 'LAYOUT:horizontal-TYPE:Default-MAX:1',
-    'HORIZONTAL_TWO': 'LAYOUT:horizontal-TYPE:Default-MAX:2',
-    'HORIZONTAL_THREE': 'LAYOUT:horizontal-TYPE:Default-MAX:3',
-    'HORIZONTAL_FOUR': 'LAYOUT:horizontal-TYPE:Default-MAX:4',
-    'HORIZONTAL_FIVE': 'LAYOUT:horizontal-TYPE:Default-MAX:5',
-    'HORIZONTAL_SIX': 'LAYOUT:horizontal-TYPE:Default-MAX:6',
-    'HORIZONTAL_SEVEN': 'LAYOUT:horizontal-TYPE:Default-MAX:7',
-    'HORIZONTAL_EIGHT': 'LAYOUT:horizontal-TYPE:Default-MAX:8',
-    'HORIZONTAL_NINE': 'LAYOUT:horizontal-TYPE:Default-MAX:9',
-    'HORIZONTAL_TEN': 'LAYOUT:horizontal-TYPE:Default-MAX:10',
-  }
-};
-
-/* COMPONENT SETTINGS */
-// KHÔNG ĐƯỢC XÓA KEY - BIẾN này
-export const enumPageComponentKey = {
-  NONE: "None", // Không xác định
-  SECTION: "Section", // Chuyên trang
-  CATEGORY: "Category", // Trang danh mục
-  TOPIC: "Topic", // Trang chủ đề
-  EVENT: "Event", // Trang sự kiện
-  COLLECTION: "Collection", // Trang sưu tập
-  ARTICLE: "Article", // Trang bài viết
-  TAG: "Tag", // Trang từ khóa
-  AUTHOR: "Author", // Trang tác giả
-  POLL: "Poll", // Trang poll
-  QUIZ: "Quiz", // Trang quiz
-  SURVEY: "Survey", // Trang survey
-  ADVERTISING: "Advertising", // Trang quảng cáo
-  OTHER: "Other", // Trang khác
-  NAVIGATION: "Navigation", // Navigation
-  LOCATION: 'Location', // Location
-  FIGURE: 'Figure', // Figure
-};
-
-export const enumPageComponentTemplate = {
-  [enumPageComponentKey.ARTICLE]: {
-    'ARTICLE_CARD': "TYPE:Card",
-    'ARTICLE_DETAIL': 'TYPE:Detail',
-  },
-  [enumPageComponentKey.NAVIGATION]: {
-    'TOP': "TYPE:Top",
-    'BOTTOM': 'TYPE:Bottom',
-    'DIRECTION': 'TYPE:Direction',
-  },
-  [enumPageComponentKey.OTHER]: {
-    "WEATHER": "TYPE:Weather",
-    "SECURITIES": "TYPE:securities"
-  },
-  [enumPageComponentKey.ADVERTISING]: {
-    "ADVERTISING": "TYPE:Advertising",
-  }
-};
-
-export const enumPageComponentLayouts = {
-  [`${enumPageComponentTemplate[enumPageComponentKey.ARTICLE]['ARTICLE_CARD']}`]: {
-    'CARD_DEFAULT': "TYPE:Card_Default",
-    'CARD_AUDIO': "TYPE:Card_Audio",
-  },
-  [`${enumPageComponentTemplate[enumPageComponentKey.ARTICLE]['ARTICLE_DETAIL']}`]: {
-    'DETAIL_GENERAL': "TYPE:Detail_General",
-    'DETAIL_PODCAST': "TYPE:Detail_Podcast",
-    'DETAIL_VIDEO': "TYPE:Detail_Video",
-    'DETAIL_IMAGE': "TYPE:Detail_Image",
-  },
-  [`${enumPageComponentTemplate[enumPageComponentKey.NAVIGATION]['TOP']}`]: {
-    'NAVIGATION_TOP_DEFAULT': "TYPE:Navigation_Top_Default",
-  },
-  [`${enumPageComponentTemplate[enumPageComponentKey.NAVIGATION]['BOTTOM']}`]: {
-    'NAVIGATION_BOTTOM_DEFAULT': "TYPE:Navigation_Bottom_Default",
-  },
-  [`${enumPageComponentTemplate[enumPageComponentKey.NAVIGATION]['DIRECTION']}`]: {
-    'NAVIGATION_DIRECTION_DEFAULT': "TYPE:Navigation_Direction_Default",
-  },
-
-  [`${enumPageComponentTemplate[enumPageComponentKey.OTHER]['WEATHER']}`]: {
-    'WEATHER_DEFAULT': "TYPE:Weather_Default",
-  },
-  [`${enumPageComponentTemplate[enumPageComponentKey.OTHER]['SECURITIES']}`]: {
-    'SECURITIES_DEFAULT': "TYPE:Securities_Default",
-  },
-  [`${enumPageComponentTemplate[enumPageComponentKey.ADVERTISING]['ADVERTISING']}`]: {
-    'ADVERTISING_DEFAULT': "TYPE:Advertising_Default",
-  },
-
-};
@@ -221,18 +221,26 @@ export const enumPageSectionTemplate = {
  },
  [enumPageSectionKey.ARTICLE]: {
    'DEFAULT': "TYPE:Default",
+    'DETAIL': 'TYPE:Detail'
  },
  [enumPageSectionKey.SECTION]: {
    'DEFAULT': "TYPE:Default",
+  },
+  [enumPageSectionKey.CATEGORY]: {
    'MISSES': "TYPE:Misses",
  },
 };

 export const enumPageSectionLayouts = {
+  /* None */
  [`${enumPageSectionTemplate[enumPageSectionKey.NONE]['NONE']}`]: {
    'VERTICAL_TWO': 'LAYOUT:vertical-TYPE:Default-MAX:2',
-    'VERTICAL_ONE_TWO_THREE': 'LAYOUT:vertical-TYPE:Left:1;CENTER:2;RIGHT:3',
-    'VERTICAL_ONE_FIVE': 'LAYOUT:vertical-TYPE:Left:1;RIGHT:5',
+    'VERTICAL_ONE_TWO_THREE': 'LAYOUT:vertical-TYPE:Left:1;CENTER:2;RIGHT:3-MAX:3',
+    'VERTICAL_FIVE_THREE_TWO_TWO': 'LAYOUT:vertical-TYPE:5;3;2;2-MAX:4',
+    'VERTICAL_FIVE_TWO_TWO_THREE': 'LAYOUT:vertical-TYPE:5;2;2;3-MAX:4',
+    'VERTICAL_TWO_FIVE_THREE_TWO': 'LAYOUT:vertical-TYPE:2;5;3;2-MAX:4',
+    'VERTICAL_ONE_FOUR': 'LAYOUT:vertical-TYPE:Left:1;RIGHT:4-Max:2',
+    'VERTICAL_ONE_FIVE': 'LAYOUT:vertical-TYPE:Left:1;RIGHT:5-MAX:2',
    'VERTICAL_LEFT_TWO': 'LAYOUT:vertical-TYPE:LEFT-MAX:2',
    'VERTICAL_RIGHT_TWO': 'LAYOUT:vertical-TYPE:RIGHT-MAX:2',
    'VERTICAL_THREE': 'LAYOUT:vertical-TYPE:Default-MAX:3',
@@ -251,8 +259,15 @@ export const enumPageSectionLayouts = {
    'HORIZONTAL_NINE': 'LAYOUT:horizontal-TYPE:Default-MAX:9',
    'HORIZONTAL_TEN': 'LAYOUT:horizontal-TYPE:Default-MAX:10',
  },
-  [`${enumPageSectionTemplate[enumPageSectionKey.SECTION]['MISSES']}`]: {
+
+  /* Section */
+  [`${enumPageSectionTemplate[enumPageSectionKey.CATEGORY]['MISSES']}`]: {
    'DEFAULT': 'LAYOUT:Default-TYPE:Default-MAX:1',
+  },
+
+  /* Article */
+  [`${enumPageSectionTemplate[enumPageSectionKey.ARTICLE]['DETAIL']}`]: {
+    'DEFAULT': 'LAYOUT:Default-TYPE:Default-MAX:2',
  }
 };

@@ -290,6 +305,7 @@ export const enumPageComponentTemplate = {
  },
  [enumPageComponentKey.COLLECTION]: {
    'ARTICLE': "TYPE:Collection_Article",
+    'CATEGORY': "TYPE:Collection_Category",
  },
  [enumPageComponentKey.SECTION]: {
    'ARTICLE': "TYPE:Section_Article",
@@ -302,7 +318,7 @@ export const enumPageComponentTemplate = {
  },
  [enumPageComponentKey.OTHER]: {
    "WEATHER": "TYPE:Weather",
-    "SECURITIES": "TYPE:securities"
+    "STOCK": "TYPE:Stock"
  },
 };

@@ -313,12 +329,15 @@ export const enumPageComponentLayouts = {
    'CARD_AUDIO': "TYPE:Card_Audio",
    'CARD_VIDEO': "TYPE:Card_Video",
    'CARD_VIDEO_HIGHLIGHT': "TYPE:Card_VideoHightLight",
+    'CARD_MISS_HIGHLIGHT': "TYPE:Card_MissHightLight",
  },
  [`${enumPageComponentTemplate[enumPageComponentKey.ARTICLE]['ARTICLE_DETAIL']}`]: {
    'DETAIL_GENERAL': "TYPE:Detail_General",
    'DETAIL_PODCAST': "TYPE:Detail_Podcast",
    'DETAIL_VIDEO': "TYPE:Detail_Video",
    'DETAIL_IMAGE': "TYPE:Detail_Image",
+    'DETAIL_EMAGAZINE': "TYPE:Detail_Emagazine",
+    'DETAIL_INFOGRAPHIC': "TYPE:Detail_Infographic",
  },
  /* NAVIGATION */
  [`${enumPageComponentTemplate[enumPageComponentKey.NAVIGATION]['TOP']}`]: {
@@ -336,6 +355,9 @@ export const enumPageComponentLayouts = {
    'ARTICLE_COLLECTION_DEFAULT': "TYPE:Article_Collection_Default",
    'ARTICLE_COLLECTION_AUDIO': "TYPE:Article_Collection_Audio",
  },
+  [`${enumPageComponentTemplate[enumPageComponentKey.COLLECTION]['CATEGORY']}`]: {
+    'MISSES_COLLECTION_DEFAULT': "TYPE:Category_Collection_MISS_Default",
+  },

  /* SECTION */
  [`${enumPageComponentTemplate[enumPageComponentKey.SECTION]['ARTICLE']}`]: {
@@ -358,8 +380,8 @@ export const enumPageComponentLayouts = {
  [`${enumPageComponentTemplate[enumPageComponentKey.OTHER]['WEATHER']}`]: {
    'WEATHER_DEFAULT': "TYPE:Weather_Default",
  },
-  [`${enumPageComponentTemplate[enumPageComponentKey.OTHER]['SECURITIES']}`]: {
-    'SECURITIES_DEFAULT': "TYPE:Securities_Default",
+  [`${enumPageComponentTemplate[enumPageComponentKey.OTHER]['STOCK']}`]: {
+    'STOCK_DEFAULT': "TYPE:Stock_Default",
  },
 };

@@ -375,36 +397,71 @@ const defaultArticle = {
  paddingBottom: 20,
  paddingLeft: 20
 };
-
+const defaultArticleAudio = {
+  fontSizeTitle: 16,
+  fontWeightTitle: 600,
+};
+const defaultArticleVideo = {
+  fontSizeTitle: 16,
+  fontWeightTitle: 500,
+};
+const defaultArticleVideoHightLight = {
+  fontSizeTitle: 44,
+  fontWeightTitle: 700,
+  fontSizeIntro: 14,
+  fontWeightIntro: 400,
+};
 export const enumPageComponentDefaultSetting = {
  [enumPageComponentKey.ARTICLE]: {
-    WidthImg: 40,
-    layout: "column",
-    fontSizeTitle: 16,
-    fontWeightTitle: 600,
-    fontSizeIntro: 14,
-    fontWeightIntro: 400,
+    "TYPE:Card_Default": defaultArticle,
+    "TYPE:Card_Audio": defaultArticleAudio,
+    "TYPE:Card_Video": defaultArticleVideo,
+    "TYPE:Card_VideoHightLight": defaultArticleVideoHightLight,
  },
  [enumPageComponentKey.COLLECTION]: {
-    layoutWrap: "column",
-    MAX: 5,
-    column: 1,
-    defaultFontSizeTitle: 16,
-    defaultFontWeightTitle: 600,
-    ...defaultArticle,
-    customStyle: [],
+    "TYPE:Article_Collection_Default": {
+      layoutWrap: "column",
+      MAX: 5,
+      column: 1,
+      defaultFontSizeTitle: 16,
+      defaultFontWeightTitle: 600,
+      ...defaultArticle,
+      customStyle: [],
+    },
+    "TYPE:Article_Collection_Audio": {
+      layoutWrap: "column",
+      MAX: 5,
+      column: 1,
+      defaultFontSizeTitle: 16,
+      defaultFontWeightTitle: 600,
+      ...defaultArticleAudio
+    }
  },
  [enumPageComponentKey.SECTION]: {
-    layoutWrap: "column",
-    MAX: 5,
-    ...defaultArticle,
+    "TYPE:Article_Section_Default": {
+      layoutWrap: "column",
+      MAX: 5,
+      defaultFontSizeTitle: 16,
+      defaultFontWeightTitle: 600,
+      ...defaultArticle,
+    }
  },
  [enumPageComponentKey.CATEGORY]: {
-    layoutWrap: "row",
-    MAX: 5,
-    fontSizeTitle: 17,
-    fontWeightTitle: 600,
-    defaultFontSizeTitle: 13,
-    defaultFontWeightTitle: 500,
-  },
+    "TYPE:Category_Vertical": {
+      MAX: 5,
+      layoutWrap: "column",
+      fontSizeTitle: 14,
+      fontWeightTitle: 400,
+      defaultFontSizeTitle: 14,
+      defaultFontWeightTitle: 400,
+    },
+    "TYPE:Default": {
+      layoutWrap: "row",
+      MAX: 5,
+      fontSizeTitle: 17,
+      fontWeightTitle: 600,
+      defaultFontSizeTitle: 13,
+      defaultFontWeightTitle: 500,
+    },
+  }
 }
@@ -36,3 +36,4 @@ useHead({
    </DynamicTemplate>
  </main>
 </template>
+ 
@@ -19,34 +19,34 @@ import { useDynamicPageStore } from '~/stores/dynamic-page';
 import { useArticleStore } from '~/stores/articles';

 const loadPage = async () => {
-  const article = await store.article.getArticleBySlug(route.params.slug);
-  let isContentType = '';
-  switch (article.value?.contentType) {
-    case 1:
-      isContentType = 'trang-chi-tiet-bai-viet-general';
-      break;
-    case 2:
-      isContentType = 'trang-chi-tiet-bai-viet-image';
-      break;
-    case 3:
-      isContentType = 'trang-chi-tiet-podcast';
-      break;
-    case 4:
-      isContentType = 'trang-chi-tiet-bai-viet-video';
-      break;
-    case 5:
-      if (article.value?.layoutType === 4) {
-        isContentType = 'trang-chi-tiet-bai-viet-emagazine';
-        break;
-      }
-      if (article.value?.layoutType === 3) {
-        isContentType = 'trang-chi-tiet-bai-viet-infographics';
-        break;
-      }
-    default:
-      isContentType = 'trang-chi-tiet-bai-viet-general';
-      break;
-  }
+const article = await store.article.getArticleBySlug(route.params.slug);
+  let isContentType = 'trang-chi-tiet';
+  // switch (article.value?.contentType) {
+  //   case 1:
+  //     isContentType = 'trang-chi-tiet-bai-viet-general';
+  //     break;
+  //   case 2:
+  //     isContentType = 'trang-chi-tiet-bai-viet-image';
+  //     break;
+  //   case 3:
+  //     isContentType = 'trang-chi-tiet-podcast';
+  //     break;
+  //   case 4:
+  //     isContentType = 'trang-chi-tiet-bai-viet-video';
+  //     break;
+  //   case 5:
+  //     if (article.value?.layoutType === 4) {
+  //       isContentType = 'trang-chi-tiet-bai-viet-emagazine';
+  //       break;
+  //     }
+  //     if (article.value?.layoutType === 3) {
+  //       isContentType = 'trang-chi-tiet-bai-viet-infographics';
+  //       break;
+  //     }
+  //   default:
+  //     isContentType = 'trang-chi-tiet-bai-viet-general';
+  //     break;
+  // }
  const dynamicPage = await store.dynamicPage.fetchPageByCode(isContentType);

  return {
@@ -59,16 +59,16 @@ const { data } = await useAsyncData('detail-article', () => loadPage());
 const article = data.value?.article;
 const dynamicPage = data.value?.dynamicPage;

-const asycnCurrentPage = dynamicPage.currentPage;
-const asycnSectionPublished = dynamicPage.sectionPublished;
-const asycnComponentPublished = dynamicPage.componentPublished;
+const asycnCurrentPage = dynamicPage?.currentPage;
+const asycnSectionPublished = dynamicPage?.sectionPublished;
+const asycnComponentPublished = dynamicPage?.componentPublished;

 useSeoMeta({
-  title: () => article.title.replace(/<[^>]+>/g, ''),
-  description: () => article.intro.replace(/<[^>]+>/g, ''),
-  ogTitle: () => article.title.replace(/<[^>]+>/g, ''),
-  ogImage: () => article.thumbnail,
-  ogDescription: () => article.intro.replace(/<[^>]+>/g, ''),
+  title: () => article?.title.replace(/<[^>]+>/g, ''),
+  description: () => article?.intro.replace(/<[^>]+>/g, ''),
+  ogTitle: () => article?.title.replace(/<[^>]+>/g, ''),
+  ogImage: () => article?.thumbnail,
+  ogDescription: () => article?.intro.replace(/<[^>]+>/g, ''),
  twitterCard: () => 'summary_large_image',
 })
 </script>
@@ -7,7 +7,10 @@ import { useDynamicPageStore } from '~/stores/dynamic-page';
 const route = useRoute();
 const store = reactive({
  dynamicPage: useDynamicPageStore(),
+  category: useCategoryStore()
 });
+//lấy danh sách categoryTree
+await store.category.fetchBySiteId()

 const { data } = await useAsyncData('index', () => store.dynamicPage.fetchPageByCode(route.path === '/' ? 'trang-chu' : route.path.replace('/', '')))
 const asycnCurrentPage = data.value.currentPage;
@@ -28,6 +31,7 @@ useHead({
  <main class="h-screen" v-if="asycnCurrentPage">
    <DynamicTemplate :settings="asycnCurrentPage.settings">
        <DynamicSection
+          class="mb-10"
          v-for="(section, index) in asycnSectionPublished"
          :key="index"
          :settings="section.settings"
@@ -5,7 +5,7 @@ interface Base {
    updatedOn?: string
 }
 interface PageSettings {
-    label?: string; // Nhãn
+    label?: any; // Nhãn
    layout?: string; // Bố cục
    template?: string; // Bản mẫu
    mainLink?: boolean; // Liên kết chính
@@ -17,12 +17,12 @@ interface PageSettings {
    dataResult?: string; // Kết quả dữ liệu (Json)
 }
 interface PageSectionSettings {
-    label?: string; // Nhãn
+    label?: any; // Nhãn
    layout?: string; // Bố cục
    template?: string; // Bản mẫu
 }
 interface PageComponentSettings {
-    label?: string; // Nhãn
+    label?: any; // Nhãn
    layout?: string; // Bố cục
    template?: string; // Bản mẫu
    dataType?: string; // Loại dữ liệu: Section, Category, Topic, Event, Collection, Article, Tag, Author, Poll, Quiz, Survey, Advertising, Other
@@ -14,11 +14,7 @@ export default defineConfig({

  theme: {
    colors: {
-      'primary': {
-        100: '#e6f4ff',
-        500: "#2563eb",
-        600: "#3c7abc",
-      },
+      'primary': '#ED1C24',
      'gray': {
        500: '#bdbdbd',
        600:' #757575'
@@ -88,7 +84,9 @@ export default defineConfig({
        beVietnam: ['Be Vietnam Pro', 'sans-serif'],
        arial: "arial",
        archivo: ["Archivo", 'sans-serif'],
-        merriweather: ["Merriweather", 'serif']
+        merriweather: ["Merriweather", 'serif'],
+        gelasio: ["Gelasio", 'serif'],
+        raleway: ["raleway", 'sans-serif'],
      },
    }),
  ],
@@ -0,0 +1,27 @@
+import * as cherrio from 'cheerio'
+
+const getResource = (data: any) => {
+    // const result = {
+    //     videoHightlight: null,
+    //     imageHightlight: null,
+    //     resources: [],
+    // };
+    // const $ = cherrio.load(`<div class="get-resource">${data}</div>`)
+    // const html : any = $('.get-resource').html();
+    // html.find('video, figure img, img').each((index : any, element: any) => {
+    //     // if (index === 0) result.videoHightlight = 
+    // });
+
+    // console.log(html)
+
+    // <div>
+    //     <video controls="controls" width="100%" height="auto" data-id="578" data-resource="https://resource.vpress.vn/resources/1/private/13cee27a2bd93915479f049378cffdd3/video/28thi-tot-nghiep-ptth-2024-1719829616.mp4" data-title="28thi-tot-nghiep-ptth-2024">
+    //         <source src="https://resource.vpress.vn/resources/1/private/13cee27a2bd93915479f049378cffdd3/video/28thi-tot-nghiep-ptth-2024-1719829616.mp4" type="video/mp4">
+    //     </video>
+    // </div>
+}
+
+
+export {
+    getResource
+}
Author	SHA1	Message	Date
nguyen van thai	cf64f11e72	thainv-dev	2024-07-05 11:57:41 +07:00
nguyen van thai	780474bcb3	Merge branch 'main' of http://work.gct.com.vn/minhnt/NSG_PORTAL_V2	2024-07-05 11:41:49 +07:00
nguyen van thai	be1393b7da	thainv-dev: Layout Page Section	2024-07-05 11:41:38 +07:00
MoreStrive	a5f9ff7bac	fix: null component	2024-07-05 11:02:04 +07:00
nguyen van thai	5889e9af0e	thainv-dev	2024-07-05 10:39:07 +07:00
MoreStrive	17036b77af	feat: layout none bugs	2024-07-05 10:29:08 +07:00
MoreStrive	ac218aeac5	fea: navigation	2024-07-05 10:03:28 +07:00
MoreStrive	815ce88d95	Merge branch 'main' of http://work.gct.com.vn/minhnt/NSG_PORTAL_V2	2024-07-05 09:48:47 +07:00
MoreStrive	76d4628100	feat: fix type	2024-07-05 09:48:34 +07:00
nguyen van thai	7bf902041e	thainv-dev	2024-07-05 09:45:00 +07:00
nguyen van thai	554ceab3c6	thainv-dev: Fix	2024-07-03 15:33:51 +07:00
MoreStrive	ee5c6f40f1	deploy	2024-07-02 16:03:24 +07:00
MoreStrive	4bf217c207	Merge branch 'main' of http://work.gct.com.vn/minhnt/NSG_PORTAL_V2	2024-07-01 16:06:28 +07:00
MoreStrive	0adb6fca36	minhnt-dev: Video Card	2024-07-01 16:05:16 +07:00
				`@@ -0,0 +1 @@`
				`export { default as Misses_Default } from './misses/Default.vue'`
				`@@ -1 +0,0 @@`
				`export { default as Securities_Default } from './Securities.vue'`
				`@@ -0,0 +1 @@`
				`export { default as Stock_Default } from './334x641.vue'`
				`@@ -0,0 +1 @@`
				`export { default as Misses_Section } from './misses/index.vue'`
				`@@ -0,0 +1 @@`
				`export { default as Default } from './Default.vue'`