From 7da82c9101352a31237a493672135083ca720318 Mon Sep 17 00:00:00 2001
From: nguyen van thai <nguyenvanthailtv@gmail.com>
Date: Wed, 10 Jul 2024 17:39:38 +0700
Subject: [PATCH] .

---
 assets/styles/style.scss                      |   6 +
 .../articles/cards/VideoBackground.vue        | 172 +++++++-----
 .../templates/articles/details/Video.vue      | 144 +++++-----
 .../categories/categories/Default.vue         |  16 ++
 .../categories/categories/Vertical.vue        |   2 +-
 .../templates/collections/articles/Video.vue  | 247 ++++++++++++++++++
 .../templates/collections/articles/index.ts   |   1 +
 .../templates/collections/articles/index.vue  |   3 +-
 .../layouts/articles/details/Default.vue      |   6 +-
 definitions/cms/page.type.ts                  |  17 +-
 definitions/enum/page.enum.ts                 |  90 ++++++-
 pages/bai-viet/[slug].vue                     |   2 +-
 12 files changed, 553 insertions(+), 153 deletions(-)
 create mode 100644 components/dynamic-page/page-component/templates/collections/articles/Video.vue

diff --git a/assets/styles/style.scss b/assets/styles/style.scss
index 92c4650..8cee48d 100644
--- a/assets/styles/style.scss
+++ b/assets/styles/style.scss
@@ -206,4 +206,10 @@ div[layout="ARTICLE_PAGE"] {
     img {
         @apply mx-auto;
     }
+}
+
+.detail-default {
+    p {
+        @apply  text-18px font-raleway leading-180% my-10px;
+    }
 }
\ No newline at end of file
diff --git a/components/dynamic-page/page-component/templates/articles/cards/VideoBackground.vue b/components/dynamic-page/page-component/templates/articles/cards/VideoBackground.vue
index 3999a2b..d6c9094 100644
--- a/components/dynamic-page/page-component/templates/articles/cards/VideoBackground.vue
+++ b/components/dynamic-page/page-component/templates/articles/cards/VideoBackground.vue
@@ -8,7 +8,8 @@ const props = defineProps<{
   dataType?: any;
   dataQuery?: any;
   layout?: string;
-  label?: any;
+  label?: string;
+  component?: any;
 }>();
 
 const LAYOUT_PARSE = computed(() => {
@@ -16,95 +17,122 @@ 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 playVideo = ref<boolean>(false)
+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']"
-  >
+  <article :id="`cpn_${props.component?.id}`" class="basic-article border-custom" :class="LAYOUT_PARSE['article_Class']" @click="selectComponent" @dragover.prevent @drop.stop.prevent="drop" :style="LAYOUT_PARSE['article']">
     <div class="article_video">
       <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'}')` }"
-            @click="playVideo = true"
-          >
-              <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>
-          <div v-else v-html="getResource('HIGHLIGHT_VIDEO', JSON.parse(props.dataResult).detail)">
+        <div class="article_video_thumb article-thumbnail" :style="{ backgroundImage: `url('${parseData.thumbnail ? parseData.thumbnail : '/images/default-thumbnail.jpg'}')` }">
+          <div></div>
+          <div class="article_video_content">
+            <span>
+              <svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path
+                  d="M23.5 18.5C24.375 17.875 25.625 17.875 26.5 18.5L44.5 29.5C45.375 30 46 31 46 32C46 33.125 45.375 34.125 44.5 34.625L26.5 45.625C25.625 46.125 24.375 46.25 23.5 45.625C22.5 45.125 22 44.125 22 43V21C22 20 22.5 19 23.5 18.5ZM64 32C64 49.75 49.625 64 32 64C14.25 64 0 49.75 0 32C0 14.375 14.25 0 32 0C49.625 0 64 14.375 64 32ZM32 6C17.625 6 6 17.75 6 32C6 46.375 17.625 58 32 58C46.25 58 58 46.375 58 32C58 17.75 46.25 6 32 6Z"
+                  fill="#ED1C24"
+                />
+              </svg>
+            </span>
+            <h3 class="line-clamp article-title" :class="LAYOUT_PARSE['title_Class']" :style="LAYOUT_PARSE['h3.title']">
+              {{ parseData.title?.replace(/<[^>]+>/g, "") }}
+            </h3>
+            <p class="mb-0 line-clamp article-intro" :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"></i>
+        </div>
+      </div>
     </div>
 
-    <div v-if="LAYOUT_PARSE.styleClasses" v-html="LAYOUT_PARSE.styleClasses"></div>
+    <div v-html="LAYOUT_PARSE.styleClasses" v-if="LAYOUT_PARSE.styles"></div>
   </article>
 </template>
 
 <style lang="scss" scoped>
-    .article_video {
-      @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;
-            position: relative;
-            z-index: 0;
-            padding: 120px 85px 60px 85px;
-            border-radius: 2px;
-            overflow: hidden;
-            cursor: pointer;
-            &::after {
-                content: '';
-                position: absolute;
-                width: 100%;
-                height: 100%;
-                background-color: rgba(0, 0, 0, 0.4);
-                z-index: 1;
-                top: 0px;
-                left: 0px;
-            }
-            .article_video_content {
-                position: relative;
-                z-index: 2;
-
-                h3 {
-                    font-size: 44px;
-                    font-weight: 700;
-                    line-height: 57.2px;
-                    text-align: left;
-                    margin-bottom: 12px;
-                }
-
-                p {
-                    font-size: 14px;
-                    font-weight: 400;
-                }
-
-                svg {
-                    font-size: 80px;
-                    color: #ed1c24;
-                }
-            }
-        }
+.article_video {
+  .article_video_thumb {
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    position: relative;
+    z-index: 0;
+    padding: 120px 85px 60px 85px;
+    border-radius: 2px;
+    margin: 10px;
+    cursor: pointer;
+    &::after {
+      content: "";
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      background-color: rgba(0, 0, 0, 0.4);
+      z-index: 1;
+      top: 0px;
+      left: 0px;
     }
+    .article_video_content {
+      position: relative;
+      z-index: 2;
+
+      h3 {
+        font-size: 44px;
+        font-weight: 700;
+        line-height: 57.2px;
+        text-align: left;
+        margin-bottom: 12px;
+        color: white;
+      }
+
+      p {
+        font-size: 14px;
+        font-weight: 400;
+        color: white;
+      }
+
+      i {
+        font-size: 80px;
+        color: #ed1c24;
+      }
+    }
+  }
+  .empty-box {
+    background-color: #409eff;
+    margin: 10px;
+    min-height: 60px;
+    i {
+      font-size: 60px;
+    }
+  }
+}
 </style>
diff --git a/components/dynamic-page/page-component/templates/articles/details/Video.vue b/components/dynamic-page/page-component/templates/articles/details/Video.vue
index 75a411c..9242dbc 100644
--- a/components/dynamic-page/page-component/templates/articles/details/Video.vue
+++ b/components/dynamic-page/page-component/templates/articles/details/Video.vue
@@ -1,67 +1,93 @@
 <script setup lang="ts">
-// const store = {
-//   page: useCmsPageStore(),
-// };
-// import Comment from "@/components/cms/page-component/templates/others/comments/Default.vue";
+const { categoryTree } = storeToRefs(useCategoryStore());
+const { currentArticle } = storeToRefs(useArticleStore());
+if (categoryTree.value) {
+  await useCategoryStore().fetchBySiteId();
+}
+
+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>
-  video
-  <!-- <div class="container overflow-hidden">
-    <div class="video row">
-      <div
-        class="video__left"
-        :class="
-          store.page.classifyScreenByWidth({
-            computer: 'col-8 px-0',
-            tablet: 'col-8 px-0',
-            smartphone: 'col-12',
-          })
-        "
-      >
-        <video controls="controls" width="100%" height="100%" data-file-id="149" data-resource="https://acp-api.vpress.vn/Resources/Video/983d2f57-7743-472f-b22d-fc73085af6d5.mp4" data-title="Download.mp4">
-          <source src="" type="video/mp4" />
-        </video>
-      </div>
+  <div class="video-container">
+    <ul class="flex gap-32px lg:ml-80px md:ml-40px sm:ml-20px">
+      <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
-        class="video__right bg-body-tertiary"
-        :class="
-          store.page.classifyScreenByWidth({
-            computer: 'col-4 ps-4 pt-2',
-            tablet: 'col-4 ps-4 pt-2',
-            smartphone: 'col-12 pt-2',
-          })
-        "
-      >
-        <h1
-          class=""
-          :class="
-            store.page.classifyScreenByWidth({
-              computer: 'fs-1',
-              tablet: 'fs-2',
-              smartphone: 'fs-3',
-            })
-          "
-        >
-          Tiêu đề video
-        </h1>
-        <p class="line-clamp-3 fs-5 fw-light" :class="store.page.classifyScreenByWidth({})">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-        </p>
-        <h5 class="text-end fs-4 opacity-75">Tác giả</h5>
-
-        <p><b class="text-primary fw-semibold">Danh mục</b> <span class="ms-2 opacity-25 fw-semibold">Ngày đăng video</span></p>
-        <Comment />
-      </div>
-    </div>
-  </div> -->
+    <div class="video-content" v-html="currentArticle.detail"></div>
+  </div>
 </template>
 <style scoped lang="scss">
-.line-clamp-3 {
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 3;
+.video-container {
+  width: 100%;
+  max-width: 1080px;
+  margin: auto;
+
+  .category-list {
+    display: flex;
+    gap: 32px;
+    margin-bottom: 26px;
+    list-style: none;
+    padding: 0;
+    margin: 0 0 0 80px;
+
+    .category-item {
+      color: #929292;
+      position: relative;
+      font-size: 18px;
+
+      & > span {
+        font-size: 18px;
+        font-weight: 500;
+        line-height: 180%;
+        text-transform: uppercase;
+      }
+
+      &::after {
+        position: absolute;
+        content: "/";
+        font-size: 20px;
+        right: -20px;
+      }
+
+      &:first-child {
+        color: #000;
+      }
+
+      &:last-child {
+        &::after {
+          content: "";
+        }
+      }
+    }
+  }
+
+  .video-content {
+    width: 100%;
+    // max-width: 1080px;
+    margin: 26px 0 26px 0px;
+    // background-color: #eee;
+    // height: 500px;
+    font-size: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 }
 </style>
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 f3cc798..d00f731 100644
--- a/components/dynamic-page/page-component/templates/categories/categories/Default.vue
+++ b/components/dynamic-page/page-component/templates/categories/categories/Default.vue
@@ -8,6 +8,22 @@ const _props = defineProps<{
   label?: any;
 }>();
 
+const SETTING_OPTIONS = {
+  MAX_ELEMENT: 3,
+};
+
+const _dataResult = computed(() => {
+  const designObject = _props.label ? getInputValue(_props.label, "OBJECT") : {};
+  let _components = Array(Number(designObject.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 Object.assign({}, _components);
+});
+
 const designObject = computed(() => {
   return _props.label ? getInputValue(_props.label, "OBJECT") : {};
 });
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 78d32dd..4760cfa 100644
--- a/components/dynamic-page/page-component/templates/categories/categories/Vertical.vue
+++ b/components/dynamic-page/page-component/templates/categories/categories/Vertical.vue
@@ -46,7 +46,7 @@ const mapActivesToItems = (index: number) => {
           </svg>
 
           <h3 :style="mapActivesToItems(index)['h3.categories']" class="whitespace-nowrap">
-             <nuxt-link :to="`${component.code}`">{{ component.title }}</nuxt-link>
+             <nuxt-link :to="`/${component.code}`">{{ component.title }}</nuxt-link>
           </h3>
         </div>
         <div v-if="designObject.styleClasses" v-html="designObject.styleClasses"></div>
diff --git a/components/dynamic-page/page-component/templates/collections/articles/Video.vue b/components/dynamic-page/page-component/templates/collections/articles/Video.vue
new file mode 100644
index 0000000..c589b18
--- /dev/null
+++ b/components/dynamic-page/page-component/templates/collections/articles/Video.vue
@@ -0,0 +1,247 @@
+<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 } from "@/utils/lodash";
+import { enumPageComponentTemplates } from "@/definitions/enum";
+const emit = defineEmits(["dropComponent", "dropData", "selectComponent"]);
+
+// const store = reactive({
+//   page: useCmsPageStore(),
+//   section: usePageSectionStore(),
+// });
+// const { currentScreenMode } = storeToRefs(useCmsPageStore());
+
+const _props = defineProps<{
+  dataResult?: any[];
+  dataQuery?: string;
+  layout?: string;
+  label?: string;
+  content?: any;
+  component?: any;
+}>();
+
+const SETTING_OPTIONS = {
+  MAX_ELEMENT: 9,
+  TEMPLATE: "TYPE:Card",
+  LAYOUT: "TYPE:Card_VideoHightLight",
+};
+
+const COMPONENT = {
+  taxonomy: enumPageComponentTemplates.ARTICLE,
+};
+
+const LAYOUT_PARSE = computed(() => {
+  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>
+  <div
+    :id="`cpn_${_props.component?.id}`"
+    class="collection-video-container border-custom"
+    :class="[LAYOUT_PARSE['div.collection-container_Class'], LAYOUT_PARSE['collection_Class']]"
+    @click="selectComponent"
+    :style="LAYOUT_PARSE['div.collection-container']"
+  >
+    <div v-for="(component, index) in _dataResult" :key="index">
+      <div class="wrap">
+        <!-- {{ index }} -->
+        <DynamicComponent
+          :settings="{
+            template: SETTING_OPTIONS.TEMPLATE,
+            layout: SETTING_OPTIONS.LAYOUT,
+            label: mapActivesToItems(Number(index)),
+            dataResult: !isEmpty(component) ? { ...component } : null,
+          }"
+          :component="COMPONENT"
+          @drop-data="dropData"
+        />
+      </div>
+    </div>
+  </div>
+  <div v-html="LAYOUT_PARSE.styleClasses" style="display: none" v-if="LAYOUT_PARSE.styles"></div>
+</template>
+
+<style lang="scss">
+.collection-video-container {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  grid-template-rows: repeat(3, minmax(0, 1fr));
+  gap: 20px;
+  & > div {
+    background-color: #eee;
+    position: relative;
+    width: 100%;
+    padding-top: calc((9 / 16) * 100%);
+
+    & > .wrap {
+      position: absolute;
+      top: 0;
+      width: 100%;
+      height: 100%;
+
+      & > .basic-article {
+        height: 100%;
+
+        & > .article_video {
+          height: 100%;
+
+          & > .article_video_thumb {
+            height: 100%;
+            margin: 0;
+            padding: 0;
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-end;
+            overflow: hidden;
+
+            & > .article_video_content {
+              padding: 0 24px 8px 24px;
+              display: flex;
+              flex-direction: column;
+              align-items: center;
+
+              & > span {
+                margin-bottom: 10px;
+              }
+              & > .article-title {
+                text-align: center;
+                font-size: 18px;
+                font-weight: 700;
+                line-height: 130%;
+                margin: 0;
+              }
+              & > .article-intro {
+                display: none;
+              }
+            }
+          }
+
+          & > .empty-box {
+            width: 100%;
+            height: 100%;
+            box-sizing: border-box;
+            margin: 0px;
+            & > div {
+              width: 100%;
+              height: 100%;
+            }
+          }
+        }
+      }
+    }
+    &:nth-child(1) {
+      grid-column: span 2 / span 2;
+      grid-row: span 2 / span 2;
+      order: 6;
+      background-color: aqua;
+
+      & > .wrap {
+        & > .basic-article {
+          & > .article_video {
+            & > .article_video_thumb {
+              & > .article_video_content {
+                padding: 0 120px 24px 120px;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    &:nth-child(2) {
+      order: 2;
+      background-color: red;
+    }
+    &:nth-child(3) {
+      order: 3;
+      background-color: green;
+    }
+    &:nth-child(4) {
+      order: 4;
+      background-color: orange;
+    }
+    &:nth-child(5) {
+      order: 5;
+      background-color: orangered;
+    }
+    &:nth-child(6) {
+      order: 6;
+      background-color: brown;
+    }
+    &:nth-child(7) {
+      order: 7;
+      background-color: blueviolet;
+    }
+    &:nth-child(8) {
+      order: 8;
+      background-color: darkred;
+    }
+    &:nth-child(9) {
+      order: 9;
+      background-color: darkcyan;
+    }
+  }
+  // &.column-phone {
+  //   grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
+  // }
+  // &.column {
+  //   grid-template-columns: repeat(1, minmax(0, 1fr));
+  // }
+  // &.row {
+  //   grid-template-rows: auto;
+  //   grid-auto-flow: column;
+  // }
+  // &.border-pri {
+  //   gap: 5px;
+  // }
+  // &.border-custom {
+  //   border-color: #e5e5e5 !important;
+  // }
+  // .empty {
+  //   min-height: 100px;
+  //   border-radius: 6px;
+  //   background: #409eff;
+  // }
+  // &.noData {
+  //   border-radius: 6px;
+  // }
+}
+</style>
diff --git a/components/dynamic-page/page-component/templates/collections/articles/index.ts b/components/dynamic-page/page-component/templates/collections/articles/index.ts
index 50973d5..aa6bcd5 100644
--- a/components/dynamic-page/page-component/templates/collections/articles/index.ts
+++ b/components/dynamic-page/page-component/templates/collections/articles/index.ts
@@ -1,2 +1,3 @@
 export { default as Default_Collection } from './Default.vue'
 export { default as Audio_Collection } from './Audio.vue'
+export { default as Video_Collection } from './Video.vue'
diff --git a/components/dynamic-page/page-component/templates/collections/articles/index.vue b/components/dynamic-page/page-component/templates/collections/articles/index.vue
index 0311484..8736a56 100644
--- a/components/dynamic-page/page-component/templates/collections/articles/index.vue
+++ b/components/dynamic-page/page-component/templates/collections/articles/index.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { enumPageComponentTemplate, enumPageComponentKey, enumPageComponentLayouts } from "@/definitions/enum";
-import { Default_Collection, Audio_Collection } from "./index";
+import { Default_Collection, Audio_Collection, Video_Collection } from "./index";
 
 const _props = defineProps<{
   settings: any;
@@ -10,6 +10,7 @@ const _props = defineProps<{
 const definedDynamicComponent: Record<string, any> = {
   [enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.COLLECTION]["ARTICLE"]}`]["ARTICLE_COLLECTION_DEFAULT"]]: Default_Collection,
   [enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.COLLECTION]["ARTICLE"]}`]["ARTICLE_COLLECTION_AUDIO"]]: Audio_Collection,
+  [enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.COLLECTION]["ARTICLE"]}`]["ARTICLE_COLLECTION_VIDEO"]]: Video_Collection,
 };
 
 const getCurrentComponent = computed(() => _props.settings.layout);
diff --git a/components/dynamic-page/page-section/layouts/articles/details/Default.vue b/components/dynamic-page/page-section/layouts/articles/details/Default.vue
index c67fcfa..d1e74d2 100644
--- a/components/dynamic-page/page-section/layouts/articles/details/Default.vue
+++ b/components/dynamic-page/page-section/layouts/articles/details/Default.vue
@@ -217,12 +217,12 @@ console.log(currentArticle.value ,'currentArticle')
       </div>
     </div>
 
-    <div class="content">
+    <div class="content detail-default">
       <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>
+              <nuxt-link class=" font-raleway text-18px font-500 leading-180% uppercase" :to="`/${category.code}`">{{ category.title }}</nuxt-link>
             </li>
           </ul>
 
@@ -235,7 +235,7 @@ console.log(currentArticle.value ,'currentArticle')
          <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}`">
+                <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>
diff --git a/definitions/cms/page.type.ts b/definitions/cms/page.type.ts
index ed84589..9f06e0c 100644
--- a/definitions/cms/page.type.ts
+++ b/definitions/cms/page.type.ts
@@ -244,13 +244,13 @@ export const pageComponentLayouts = {
     { 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'] },
+  [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']}`]: [
@@ -267,6 +267,7 @@ export const pageComponentLayouts = {
   [`${enumPageComponentTemplate[enumPageComponentKey.COLLECTION]['ARTICLE']}`]: [
     { 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'] },
+    { title: "Thẻ bài viết Video", value: enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.COLLECTION]['ARTICLE']}`]['ARTICLE_COLLECTION_VIDEO'] },
   ],
   [`${enumPageComponentTemplate[enumPageComponentKey.COLLECTION]['CATEGORY']}`]: [
     { title: "Hoa hậu - Cơ bản", value: enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.COLLECTION]['CATEGORY']}`]['MISSES_COLLECTION_DEFAULT'] },
@@ -295,6 +296,6 @@ export const pageComponentLayouts = {
   ],
   [`${enumPageComponentTemplate[enumPageComponentKey.OTHER]['STOCK']}`]: [
     { title: "Chứng khoán", value: enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.OTHER]['STOCK']}`]['STOCK_DEFAULT'] },
-    { title: "Chứng khoán Full Size", value: enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.OTHER]['STOCK']}`]['STOCK_FULLSIZE'] }  
+    { title: "Chứng khoán Full Size", value: enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.OTHER]['STOCK']}`]['STOCK_FULLSIZE'] }
   ],
 };
diff --git a/definitions/enum/page.enum.ts b/definitions/enum/page.enum.ts
index 90d7cf1..39fa63d 100644
--- a/definitions/enum/page.enum.ts
+++ b/definitions/enum/page.enum.ts
@@ -105,15 +105,26 @@ export const enumPageComponentTemplates = { // KHÔNG ĐƯỢC XÓA KEY - BIẾN
   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" },
+  { title: "Thời gian tạo", value: "CreatedOn" },
+  { title: "Lượt xem", value: "Views" },
+  { title: "Lượt chia sẻ", value: "Shares" },
 ];
+
+export const dataTypeSort = {
+  Views: [
+    { title: "Tăng dần", value: "-" },
+    { title: "Giảm dần", value: "+" },
+  ],
+  Shares: [
+    { title: "Tăng dần", value: "-" },
+    { title: "Giảm dần", value: "+" },
+  ],
+  CreatedOn: [
+    { title: "Mới nhất", value: "-" },
+  ]
+};
+
 export const dataTypeKeyInWith = [
   { title: "Ids", value: "Ids" },
   { title: "Sites", value: "Sites" },
@@ -354,6 +365,7 @@ export const enumPageComponentLayouts = {
   [`${enumPageComponentTemplate[enumPageComponentKey.COLLECTION]['ARTICLE']}`]: {
     'ARTICLE_COLLECTION_DEFAULT': "TYPE:Article_Collection_Default",
     'ARTICLE_COLLECTION_AUDIO': "TYPE:Article_Collection_Audio",
+    'ARTICLE_COLLECTION_VIDEO': "TYPE:Article_Collection_Video",
   },
   [`${enumPageComponentTemplate[enumPageComponentKey.COLLECTION]['CATEGORY']}`]: {
     'MISSES_COLLECTION_DEFAULT': "TYPE:Category_Collection_MISS_Default",
@@ -418,6 +430,9 @@ export const enumPageComponentDefaultSetting = {
     "TYPE:Card_Audio": defaultArticleAudio,
     "TYPE:Card_Video": defaultArticleVideo,
     "TYPE:Card_VideoHightLight": defaultArticleVideoHightLight,
+    "TYPE:Card_MissHightLight": {
+      background: "rgba(255, 93, 2, 0.7)"
+    }
   },
   [enumPageComponentKey.COLLECTION]: {
     "TYPE:Article_Collection_Default": {
@@ -436,7 +451,11 @@ export const enumPageComponentDefaultSetting = {
       defaultFontSizeTitle: 16,
       defaultFontWeightTitle: 600,
       ...defaultArticleAudio
-    }
+    },
+    "TYPE:Category_Collection_MISS_Default": {
+      background: "rgba(255, 93, 2, 0.7)"
+    },
+    "TYPE:Article_Collection_Video": { column: 4 }
   },
   [enumPageComponentKey.SECTION]: {
     "TYPE:Article_Section_Default": {
@@ -465,4 +484,59 @@ export const enumPageComponentDefaultSetting = {
       defaultFontWeightTitle: 500,
     },
   }
+}
+
+export const enumPageComponentDefaultStyle = {
+  [enumPageComponentKey.ARTICLE]: {
+    "TYPE:Card_Default": `#cpn_[] {}
+#cpn_[] .article-title {}
+#cpn_[] .article-time {}
+#cpn_[] .article-intro {}
+#cpn_[] .article-thumbnail {}`,
+
+    "TYPE:Card_Audio": `#cpn_[] {}
+#cpn_[] .article-title {}`,
+    "TYPE:Card_Video": ``,
+
+    "TYPE:Card_VideoHightLight": `#cpn_[] {}
+#cpn_[] .article-title {}
+#cpn_[] .article-intro {}
+#cpn_[] .article-thumbnail {}`,
+
+    "TYPE:Card_MissHightLight": `#cpn_[] {}
+#cpn_[] article{}
+#cpn_[] .article-thumbnail{}
+#cpn_[] .article-title{}`
+  },
+  [enumPageComponentKey.COLLECTION]: {
+    "TYPE:Article_Collection_Default": `#cpn_[] {} 
+#cpn_[] article{}
+#cpn_[] .article-thumbnail img{}
+#cpn_[] .article-title{}
+#cpn_[] .article-intro{}`,
+
+    "TYPE:Article_Collection_Audio": `#cpn_[] {}
+#cpn_[] article{}
+#cpn_[] .article-title {}`,
+
+    "TYPE:Category_Collection_MISS_Default": `#cpn_[] {}
+#cpn_[] article{}
+#cpn_[] .article-thumbnail{}
+#cpn_[] .article-title{}`,
+    "TYPE:Article_Collection_Video": ""
+  },
+  [enumPageComponentKey.SECTION]: {
+    "TYPE:Article_Section_Default": `#cpn_[] {} 
+#cpn_[] article{}
+#cpn_[] .article-thumbnail img{}
+#cpn_[] .article-title{}
+#cpn_[] .article-intro{}`
+  },
+  [enumPageComponentKey.CATEGORY]: {
+    "TYPE:Category_Vertical": `#cpn_[] {}
+#cpn_[] .category h3{}`,
+
+    "TYPE:Default": `#cpn_[] {}
+#cpn_[] .category h3{}`,
+  }
 }
\ No newline at end of file
diff --git a/pages/bai-viet/[slug].vue b/pages/bai-viet/[slug].vue
index c84ea73..921fb14 100644
--- a/pages/bai-viet/[slug].vue
+++ b/pages/bai-viet/[slug].vue
@@ -32,7 +32,7 @@ const article = await store.article.getArticleBySlug(String(route.params.slug));
       isContentType = 'trang-chi-tiet';
       break;
     case 4:
-      isContentType = 'trang-chi-tiet';
+      isContentType = 'trang-video';
       break;
     case 5:
       if (article.value?.layoutType === 4) {