diff --git a/components/dynamic-page/page-component/templates/advertisings/index.vue b/components/dynamic-page/page-component/templates/advertisings/index.vue
index 8528e9e..114a0e3 100644
--- a/components/dynamic-page/page-component/templates/advertisings/index.vue
+++ b/components/dynamic-page/page-component/templates/advertisings/index.vue
@@ -12,7 +12,6 @@ const definedDynamicComponent: Record<string, any> = {
 };
 
 const getCurrentComponent = computed(() => `${_props.settings.layout}`);
-console.log(definedDynamicComponent, "vào rrassd", getCurrentComponent.value);
 const GET_PROPS = computed(() => {
   return () => {
     let props: any = {};
diff --git a/components/dynamic-page/page-component/templates/articles/cards/Audio.vue b/components/dynamic-page/page-component/templates/articles/cards/Audio.vue
index 03e351a..a06a25f 100644
--- a/components/dynamic-page/page-component/templates/articles/cards/Audio.vue
+++ b/components/dynamic-page/page-component/templates/articles/cards/Audio.vue
@@ -17,12 +17,6 @@ const LAYOUT_PARSE = computed(() => {
   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");
@@ -55,22 +49,9 @@ const parseData = computed(() => {
   }
   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="card-audio" :class="LAYOUT_PARSE['article_Class']" @click="selectComponent" @dragover.prevent @drop.stop.prevent="drop" :style="LAYOUT_PARSE['article']">
+  <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, '')" />
     <div class="card-audio__content">
       <span>
diff --git a/components/dynamic-page/page-component/templates/articles/cards/Card.vue b/components/dynamic-page/page-component/templates/articles/cards/Card.vue
index af720e9..b05f160 100644
--- a/components/dynamic-page/page-component/templates/articles/cards/Card.vue
+++ b/components/dynamic-page/page-component/templates/articles/cards/Card.vue
@@ -17,31 +17,11 @@ const LAYOUT_PARSE = computed(() => {
   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>
@@ -75,9 +55,6 @@ const drop = (e: any) => {
   v-if="parseData"
     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']">
diff --git a/components/dynamic-page/page-component/templates/articles/details/General.vue b/components/dynamic-page/page-component/templates/articles/details/General.vue
index a365961..c3d2fbf 100644
--- a/components/dynamic-page/page-component/templates/articles/details/General.vue
+++ b/components/dynamic-page/page-component/templates/articles/details/General.vue
@@ -2,7 +2,6 @@
 import { enumPageComponentTemplates } from "@/definitions/enum";
 import { DEFAULT_QUERY_DROP } from "@/utils/parseSQL";
 import { isEmpty } from "@/utils/lodash";
-const emit = defineEmits(["dropData", "selectComponent"]);
 import { getInputValue } from "@/utils/parseSQL";
 
 const _props = defineProps<{
@@ -19,9 +18,6 @@ const LAYOUT_PARSE = computed(() => {
   const designObject = _props.label ? getInputValue(_props.label, "OBJECT") : {};
   return Object.assign({}, designObject);
 });
-const selectComponent = () => {
-  emit("selectComponent");
-};
 
 const parseData = computed(() => {
   if (!_props.dataResult) return;
@@ -29,24 +25,11 @@ const parseData = computed(() => {
   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,
-    });
-  }
-};
 const articleStore = useArticleStore();
-console.log(articleStore.currentArticleGeneral, "cas");
 const currentArticle = computed(() => articleStore.currentArticleGeneral);
 </script>
 <template>
-  <div @click="selectComponent" class="overflow-hidden" @dragover.prevent @drop.stop.prevent="drop">
+  <div class="overflow-hidden">
     <div class="breadcrumb" v-if="!LAYOUT_PARSE['HideBreadcrumb']">
       <ul class="breadcrumb__list">
         <li
diff --git a/components/dynamic-page/page-component/templates/articles/details/Image.vue b/components/dynamic-page/page-component/templates/articles/details/Image.vue
index 140923b..5561dca 100644
--- a/components/dynamic-page/page-component/templates/articles/details/Image.vue
+++ b/components/dynamic-page/page-component/templates/articles/details/Image.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { isEmpty } from "@/utils/lodash";
-const emit = defineEmits(["dropData", "selectComponent"]);
 
 const _props = defineProps<{
   dataResult?: any[];
diff --git a/components/dynamic-page/page-component/templates/categories/categories/Default.vue b/components/dynamic-page/page-component/templates/categories/categories/Default.vue
index 5684eb8..fe9f95d 100644
--- a/components/dynamic-page/page-component/templates/categories/categories/Default.vue
+++ b/components/dynamic-page/page-component/templates/categories/categories/Default.vue
@@ -21,7 +21,7 @@ const mapActivesToItems = (index: number) => {
 </script>
 
 <template>
-  <div class="categories-container border-custom" :class="designObject['categories_Class']" @click="selectComponent" :style="designObject['div.categories-container']">
+  <div class="categories-container border-custom" :class="designObject['categories_Class']" :style="designObject['div.categories-container']">
     <div v-for="(component, index) in _dataResult" :key="index" :class="['border-custom', isEmpty(component) ? 'empty' : 'category', designObject['category_Class']]" :style="mapActivesToItems(index)['category']">
       <template v-if="!isEmpty(component)">
         <div>
diff --git a/components/dynamic-page/page-component/templates/categories/categories/Vertical.vue b/components/dynamic-page/page-component/templates/categories/categories/Vertical.vue
index 56bd648..ceb8bfa 100644
--- a/components/dynamic-page/page-component/templates/categories/categories/Vertical.vue
+++ b/components/dynamic-page/page-component/templates/categories/categories/Vertical.vue
@@ -37,7 +37,7 @@ const mapActivesToItems = (index: number) => {
 </script>
 
 <template>
-  <div class="categories-container border-custom" :class="designObject['categories_Class']" @click="selectComponent" :style="designObject['div.categories-container']">
+  <div class="categories-container border-custom" :class="designObject['categories_Class']" :style="designObject['div.categories-container']">
     <div v-for="(component, index) in _dataResult" :key="index" :class="['border-custom', isEmpty(component) ? 'empty' : 'category', designObject['category_Class']]" :style="mapActivesToItems(index)['category']">
       <template v-if="!isEmpty(component)">
         <div class="category-content">
@@ -61,8 +61,6 @@ const mapActivesToItems = (index: number) => {
         </div>
         <div v-html="designObject.styleClasses"></div>
       </template>
-
-      <div v-else @dragover.prevent @drop.stop.prevent="dropData($event)"></div>
     </div>
   </div>
 </template>
diff --git a/components/dynamic-page/page-component/templates/collections/articles/Audio.vue b/components/dynamic-page/page-component/templates/collections/articles/Audio.vue
index 6ada6f7..489f4c0 100644
--- a/components/dynamic-page/page-component/templates/collections/articles/Audio.vue
+++ b/components/dynamic-page/page-component/templates/collections/articles/Audio.vue
@@ -1,7 +1,7 @@
 <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 { isEmpty } from "@/utils/lodash";
 import { enumPageComponentTemplates } from "@/definitions/enum";
 
 const _props = defineProps<{
@@ -46,7 +46,7 @@ const mapActivesToItems = (index: number) => {
 </script>
 
 <template>
-  <div class="collection-container border-custom" :class="[LAYOUT_PARSE['div.collection-container_Class'], LAYOUT_PARSE['collection_Class']]" @click="selectComponent" :style="LAYOUT_PARSE['div.collection-container']">
+  <div class="collection-container border-custom" :class="[LAYOUT_PARSE['div.collection-container_Class'], LAYOUT_PARSE['collection_Class']]" :style="LAYOUT_PARSE['div.collection-container']">
     <DynamicComponent
       v-for="(component, index) in _dataResult"
       :key="index"
@@ -57,7 +57,6 @@ const mapActivesToItems = (index: number) => {
         dataResult: !isEmpty(component) ? { ...component } : null,
       }"
       :component="COMPONENT"
-      @drop-data="dropData"
     />
   </div>
   <div v-html="LAYOUT_PARSE.styleClasses"></div>
diff --git a/components/dynamic-page/page-component/templates/collections/articles/Default.vue b/components/dynamic-page/page-component/templates/collections/articles/Default.vue
index 0718e31..38bb162 100644
--- a/components/dynamic-page/page-component/templates/collections/articles/Default.vue
+++ b/components/dynamic-page/page-component/templates/collections/articles/Default.vue
@@ -1,7 +1,7 @@
 <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 { isEmpty } from "@/utils/lodash";
 import { enumPageComponentTemplates } from "@/definitions/enum";
 
 const _props = defineProps<{
@@ -46,7 +46,7 @@ const mapActivesToItems = (index: number) => {
 </script>
 
 <template>
-  <div 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']">
+  <div class="collection-container border-custom overflow-hidden" :class="[LAYOUT_PARSE['div.collection-container_Class'], LAYOUT_PARSE['collection_Class']]" :style="LAYOUT_PARSE['div.collection-container']">
     <DynamicComponent
       v-for="(component, index) in _dataResult"
       :key="index"
@@ -57,7 +57,6 @@ const mapActivesToItems = (index: number) => {
         dataResult: !isEmpty(component) ? { ...component } : null,
       }"
       :component="COMPONENT"
-      @drop-data="dropData"
     />
   </div>
   <div v-html="LAYOUT_PARSE.styleClasses"></div>
diff --git a/components/dynamic-page/page-component/templates/navigations/directions/Default.vue b/components/dynamic-page/page-component/templates/navigations/directions/Default.vue
index fa68776..e52c635 100644
--- a/components/dynamic-page/page-component/templates/navigations/directions/Default.vue
+++ b/components/dynamic-page/page-component/templates/navigations/directions/Default.vue
@@ -3,8 +3,6 @@ import { isEmpty } from "@/utils/lodash";
 import DynamicComponent from "~/components/dynamic-page/page-component/templates/index.vue";
 import { getInputValue } from "@/utils/parseSQL";
 
-const emit = defineEmits(["selectComponent"]);
-
 const _props = defineProps<{
   dataResult?: any[];
   dataQuery?: string;
diff --git a/components/dynamic-page/page-component/templates/sections/articles/Default.vue b/components/dynamic-page/page-component/templates/sections/articles/Default.vue
index 921d607..2aaa76b 100644
--- a/components/dynamic-page/page-component/templates/sections/articles/Default.vue
+++ b/components/dynamic-page/page-component/templates/sections/articles/Default.vue
@@ -5,8 +5,6 @@ import { COLLECTION_PAGING_QUERY_DROP, getInputValue } from "@/utils/parseSQL";
 const router = useRouter();
 const route = useRoute();
 
-const emit = defineEmits(["dropData", "selectComponent"]);
-
 const store = reactive({
   component: usePageComponentStore(),
 });
@@ -43,20 +41,6 @@ const designObject = computed(() => {
   return _props.label ? getInputValue(_props.label, "OBJECT") : {};
 });
 
-const dropData = (event: any) => {
-  const queryBy = {
-    Category: "Categories",
-  };
-  const { dataResult, dataType } = JSON.parse(event.dataTransfer.getData("category"));
-  // const getDataQuery = `Get[${type}] Top[20] With[${queryBy[dataType]}:${dataResult.id}]`;
-  const getDataQuery = COLLECTION_PAGING_QUERY_DROP(type, { key: queryBy[dataType], value: dataResult.id });
-  emit("dropData", {
-    dataResult: [],
-    dataType,
-    dataQuery: getDataQuery,
-  });
-};
-
 //?cpn_1=page:2&cpn_2=page:1
 // Get[Article] Top[5] With[Categories:1]
 const select = async (pageActive: number) => {
@@ -114,9 +98,6 @@ const handleNextPrev = (type: "+" | "-") => {
   }
 };
 
-const selectComponent = () => {
-  emit("selectComponent");
-};
 const mapActivesToItems = (index: number) => {
   if (designObject.value && designObject.value.listCss) {
     return designObject.value.listCss[index] || {};
@@ -127,7 +108,7 @@ const mapActivesToItems = (index: number) => {
 
 <template>
   <section>
-    <div class="section-container" @click="selectComponent" @dragover.prevent @drop.stop.prevent="dropData($event)" :class="[listArticleByCategory && listArticleByCategory?.length > 0 ? '' : 'noData']">
+    <div class="section-container" :class="[listArticleByCategory && listArticleByCategory?.length > 0 ? '' : 'noData']">
       <div class="section-layout" :style="designObject['div.section']">
         <template v-if="listArticleByCategory?.length > 0">
           <template v-for="(component, index) in listArticlePaging?.length > 0 ? listArticlePaging : listArticleByCategory">
diff --git a/components/dynamic-page/page-section/templates/articles/Default.vue b/components/dynamic-page/page-section/templates/articles/Default.vue
index 736cc1a..33c1642 100644
--- a/components/dynamic-page/page-section/templates/articles/Default.vue
+++ b/components/dynamic-page/page-section/templates/articles/Default.vue
@@ -2,8 +2,6 @@
 import DynamicLayout from '@/components/dynamic-page/page-section/layouts/index.vue';
 import type { PageSection } from "@/models/cms";
 
-const emit = defineEmits(['dropComponent', 'dropData', 'selectComponent']);
-
 const props = defineProps<{
     label?: any
     layout?: string
@@ -12,10 +10,6 @@ const props = defineProps<{
 
     section: PageSection
 }>()
-
-const store = reactive({
-    section: usePageSectionStore(),
-});
 </script>
 
 <template>
diff --git a/components/dynamic-page/page-section/templates/none/Default.vue b/components/dynamic-page/page-section/templates/none/Default.vue
index d268716..07e8ffd 100644
--- a/components/dynamic-page/page-section/templates/none/Default.vue
+++ b/components/dynamic-page/page-section/templates/none/Default.vue
@@ -2,8 +2,6 @@
 import DynamicLayout from "@/components/dynamic-page/page-section/layouts/index.vue";
 import type { PageSection } from "@/models/cms";
 
-const emit = defineEmits(["dropComponent", "dropData", "selectComponent"]);
-
 const props = defineProps<{
   label?: any;
   layout?: string;
diff --git a/definitions/cms/page.type.ts b/definitions/cms/page.type.ts
index 5da9f6c..47d8ef7 100644
--- a/definitions/cms/page.type.ts
+++ b/definitions/cms/page.type.ts
@@ -147,6 +147,9 @@ export const pageSectionTempaltes = {
   [enumPageSectionKey.ARTICLE]: [
     { title: "Phân vùng bài viết cơ bản", value: enumPageSectionTemplate[enumPageSectionKey.ARTICLE]['DEFAULT'] },
   ],
+  [enumPageSectionKey.SECTION]: [
+    { title: "Phân vùng Hoa hậu", value: enumPageSectionTemplate[enumPageSectionKey.SECTION]['MISSES'] },
+  ],
 };
 
 export const pageSectionLayouts = {
@@ -170,6 +173,9 @@ 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'] },
+  ],
 };
 
 /* COMPONENT SETTINGS */
@@ -221,21 +227,15 @@ export const pageComponentTemplates = {
 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' },
+    { 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'] },
   ],
   [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' },
+    { 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'] },
   ],
   /* NAVIGATION */
   [`${enumPageComponentTemplate[enumPageComponentKey.NAVIGATION]['TOP']}`]: [
diff --git a/definitions/enum/page.enum.ts b/definitions/enum/page.enum.ts
index 2fbcaec..3e3dedf 100644
--- a/definitions/enum/page.enum.ts
+++ b/definitions/enum/page.enum.ts
@@ -222,6 +222,10 @@ export const enumPageSectionTemplate = {
   [enumPageSectionKey.ARTICLE]: {
     'DEFAULT': "TYPE:Default",
   },
+  [enumPageSectionKey.SECTION]: {
+    'DEFAULT': "TYPE:Default",
+    'MISSES': "TYPE:Misses",
+  },
 };
 
 export const enumPageSectionLayouts = {
@@ -244,6 +248,9 @@ export const enumPageSectionLayouts = {
     'HORIZONTAL_EIGHT': 'LAYOUT:horizontal-TYPE:Default-MAX:8',
     'HORIZONTAL_NINE': 'LAYOUT:horizontal-TYPE:Default-MAX:9',
     'HORIZONTAL_TEN': 'LAYOUT:horizontal-TYPE:Default-MAX:10',
+  },
+  [`${enumPageSectionTemplate[enumPageSectionKey.SECTION]['MISSES']}`]: {
+    'DEFAULT': 'LAYOUT:Default-TYPE:Default-MAX:1',
   }
 };
 
@@ -302,6 +309,8 @@ export const enumPageComponentLayouts = {
   [`${enumPageComponentTemplate[enumPageComponentKey.ARTICLE]['ARTICLE_CARD']}`]: {
     'CARD_DEFAULT': "TYPE:Card_Default",
     'CARD_AUDIO': "TYPE:Card_Audio",
+    'CARD_VIDEO': "TYPE:Card_Video",
+    'CARD_VIDEO_HIGHLIGHT': "TYPE:Card_VideoHightLight",
   },
   [`${enumPageComponentTemplate[enumPageComponentKey.ARTICLE]['ARTICLE_DETAIL']}`]: {
     'DETAIL_GENERAL': "TYPE:Detail_General",
@@ -358,6 +367,10 @@ const defaultArticle = {
   fontWeightTitle: 600,
   fontSizeIntro: 14,
   fontWeightIntro: 400,
+  paddingTop: 20,
+  paddingRight: 20,
+  paddingBottom: 20,
+  paddingLeft: 20
 };
 
 export const enumPageComponentDefaultSetting = {
@@ -376,6 +389,7 @@ export const enumPageComponentDefaultSetting = {
     defaultFontSizeTitle: 16,
     defaultFontWeightTitle: 600,
     ...defaultArticle,
+    customStyle: [],
   },
   [enumPageComponentKey.SECTION]: {
     layoutWrap: "column",
diff --git a/pages/index.vue b/pages/index.vue
index 5c94b42..5ab611b 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -36,4 +36,4 @@ useHead({
         />
     </DynamicTemplate>
   </main>
-</template>
\ No newline at end of file
+</template>
diff --git a/utils/lodash.ts b/utils/lodash.ts
index 14ecef9..757a29d 100644
--- a/utils/lodash.ts
+++ b/utils/lodash.ts
@@ -1,8 +1,8 @@
 const isEmpty = (value : any) => {
     return (
-    value == null || // From standard.js: Always use === - but obj == null is allowed to check null || undefined
-    (typeof value === 'object' && Object.keys(value).length === 0) ||
-    (typeof value === 'string' && value.trim().length === 0)
+        value == null || // From standard.js: Always use === - but obj == null is allowed to check null || undefined
+        (typeof value === 'object' && Object.keys(value).length === 0) ||
+        (typeof value === 'string' && value.trim().length === 0)
     )
 }
   
diff --git a/utils/parseSQL.ts b/utils/parseSQL.ts
index 6934a99..8c882b4 100644
--- a/utils/parseSQL.ts
+++ b/utils/parseSQL.ts
@@ -49,6 +49,7 @@ const regexParseString = (key: String) => {
     const pattern = `${key}\\[(.*?)\\]`;
     return new RegExp(pattern);
 }
+
 const regexParseStringColon = (key: String, suffix: string = ']') => {
     const pattern = `${key}:\\s*([^;\\]]+)`;
     return new RegExp(pattern);
@@ -232,8 +233,6 @@ const getInputValue = (inputValue: any, typeGet: 'OBJECT' | 'ARRAY') => {
     }
 }
 
-
-
 export {
     parseDataQueryFormString,
     parseDataQueryFormObject,