diff --git a/components/dynamic-page/page-component/templates/index.vue b/components/dynamic-page/page-component/templates/index.vue
index c845590..5c5485f 100644
--- a/components/dynamic-page/page-component/templates/index.vue
+++ b/components/dynamic-page/page-component/templates/index.vue
@@ -31,8 +31,6 @@ const GET_PROPS = computed(() => {
     }
   };
 });
-
-console.log(_props.component, '12')
 </script>
 
 <template>
diff --git a/components/dynamic-page/page-component/templates/other/breadcrumb/Default.vue b/components/dynamic-page/page-component/templates/other/breadcrumb/Default.vue
index 88417f0..f364b3d 100644
--- a/components/dynamic-page/page-component/templates/other/breadcrumb/Default.vue
+++ b/components/dynamic-page/page-component/templates/other/breadcrumb/Default.vue
@@ -22,12 +22,12 @@ const SETTING_OPTIONS = {
 
     <div class="button">
       <div class="button__increase">
-        <i class="ri-font-size"></i>
-        <i class="ri-add-line"></i>
+        <svg class="ri-font-size" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11.246 15H4.75416L2.75416 20H0.600098L7.0001 4H9.0001L15.4001 20H13.246L11.246 15ZM10.446 13L8.0001 6.88516L5.55416 13H10.446ZM21.0001 12.5351V12H23.0001V20H21.0001V19.4649C20.4118 19.8052 19.7287 20 19.0001 20C16.791 20 15.0001 18.2091 15.0001 16C15.0001 13.7909 16.791 12 19.0001 12C19.7287 12 20.4118 12.1948 21.0001 12.5351ZM19.0001 18C20.1047 18 21.0001 17.1046 21.0001 16C21.0001 14.8954 20.1047 14 19.0001 14C17.8955 14 17.0001 14.8954 17.0001 16C17.0001 17.1046 17.8955 18 19.0001 18Z"></path></svg>
+        <svg  class="ri-add-line" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"></path></svg>
       </div>
       <div class="button__decrease">
-        <i class="ri-font-size"></i>
-        <i class="ri-subtract-line"></i>
+        <svg class="ri-font-size" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11.246 15H4.75416L2.75416 20H0.600098L7.0001 4H9.0001L15.4001 20H13.246L11.246 15ZM10.446 13L8.0001 6.88516L5.55416 13H10.446ZM21.0001 12.5351V12H23.0001V20H21.0001V19.4649C20.4118 19.8052 19.7287 20 19.0001 20C16.791 20 15.0001 18.2091 15.0001 16C15.0001 13.7909 16.791 12 19.0001 12C19.7287 12 20.4118 12.1948 21.0001 12.5351ZM19.0001 18C20.1047 18 21.0001 17.1046 21.0001 16C21.0001 14.8954 20.1047 14 19.0001 14C17.8955 14 17.0001 14.8954 17.0001 16C17.0001 17.1046 17.8955 18 19.0001 18Z"></path></svg>
+        <svg class="ri-subtract-line" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M5 11V13H19V11H5Z"></path></svg>
       </div>
     </div>
   </div>
@@ -88,7 +88,9 @@ const SETTING_OPTIONS = {
 
       & .ri-add-line, & .ri-subtract-line {
         position: absolute;
-        right: 2px;
+        right: 4px;
+        top: 4px;
+        width: 12px;
       }
     }
 
diff --git a/components/dynamic-page/page-component/templates/other/comments/default.vue b/components/dynamic-page/page-component/templates/other/comments/default.vue
new file mode 100644
index 0000000..eecfaf1
--- /dev/null
+++ b/components/dynamic-page/page-component/templates/other/comments/default.vue
@@ -0,0 +1,91 @@
+<template>
+    <div class="comment">
+      <div class="input_comment width_common mb-2">
+        <div class="box-area-input width_common">
+          <textarea id="txtComment" class="block_input outline-0  outline-none outline-offset-0" placeholder="* Bình luận của bạn sẽ được biên tập trước khi đăng. Xin vui lòng gõ tiếng Việt có dấu"></textarea>
+        </div>
+      </div>
+      <div class="mb-2">
+        <button type="button" class="send-comment">
+          Gửi bình luận
+          <Icon name="ri:send-plane-2-fill"></Icon>
+        </button>
+      </div>
+    </div>
+  </template>
+  
+  <style scoped lang="scss">
+
+  .mb-2 {
+    margin-bottom: 0.5rem;
+  }
+  .w-full {
+    width: 100%;
+  }
+  .send-comment {
+    padding: 0.5rem;
+    margin-right: 0.5rem;
+    border-radius: 0.25rem;
+    font-size: 0.75rem;
+    line-height: 1rem;
+    background-color: #409eff;
+    border: 1px solid;
+    color: #fff;
+  }
+  .container {
+    width: 100%;
+    max-width: 80rem;
+    &.h3 {
+      font-size: 1.25rem;
+      line-height: 1.75rem;
+      font-weight: 700;
+    }
+  }
+  .input_comment {
+    padding: 0;
+    margin-top: 10px;
+    background: #fff;
+    position: relative;
+    width: 100%;
+    border-radius: 5px;
+    border-top: 1px solid #dedede;
+    border-right: 1px solid #dedede;
+    border-bottom: 1px solid #dedede;
+  }
+  
+  
+  .box-area-input {
+    /* background: #f3f6f9; */
+    border-radius: 4px;
+    position: relative;
+    padding: 5px 10px;
+    border-left: 2px solid rgba(59, 130, 246, 1);
+  }
+  
+  
+  .input_comment textarea.block_input {
+    height: 30px;
+    font-size: 14px;
+  }
+  textarea::placeholder {
+    color: #878a99;
+  }
+  .input_comment textarea.block_input {
+    height: 58px;
+    overflow: hidden;
+    resize: none;
+  }
+  
+  /* .box-area-input .block_input {
+    background: #f7f7f7;
+  } */
+  
+  .input_comment textarea {
+    background: #fff;
+    border: none;
+    width: 100%;
+    height: 58px;
+    overflow: hidden;
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/components/dynamic-page/page-component/templates/other/details/default.vue b/components/dynamic-page/page-component/templates/other/details/default.vue
index f8e196c..1c2c479 100644
--- a/components/dynamic-page/page-component/templates/other/details/default.vue
+++ b/components/dynamic-page/page-component/templates/other/details/default.vue
@@ -1,41 +1,19 @@
 <script setup lang="ts">
-import { isEmpty } from 'lodash';
+import { useArticleStore } from '~/stores/articles';
 const emit = defineEmits(['dropData', 'selectComponent'])
-
-const _props = defineProps<{
-  dataResult?: any[]
-}>()
-
-
+const { currentArticle } = storeToRefs(useArticleStore());
+console.log(currentArticle.value ,'12')
 </script>
 <template>
-    <div class="content">
-        <h3 class="title">Tiêu đề bài viết ở đây</h3>
-        <span class="intro">intro bài viết ở đây</span>
-        <div class="detail">Nội dung bài viết ở đây <br>
-            Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
+    <div class="content" v-if="currentArticle">
+        <h1 v-html="currentArticle?.sub" class="text-xl font-bold opacity-60 pb-1"></h1>
+        <h3 class="text-2xl font-bold sm:text-3xl xl:text-4xl pb-1" v-html="currentArticle?.title"></h3>
+        <div v-if="currentArticle?.intro" v-html="currentArticle?.intro" class="font-semibold text-xl tracking-widest pb-1"></div>
+        <div id="article-detail" :class="'text-[15px] tracking-wider'" v-html="currentArticle.detail"
+                        class="[&_img]:mx-auto">
+                    </div>
     </div>
 </template>
 
-<style scoped lang="scss">
-    .content {
-        font-size: 14px;
-        height: 200px;
-        padding: 8px;
-        overflow: hidden;
-    }
-
-    .title {
-        white-space: normal;
-    }
-
-    .intro {
-        white-space: normal;
-        padding-bottom: 10px;
-        display: block;
-    }
-
-    .detail {
-        white-space: normal;
-    }
+<style lang="scss">
 </style>
\ No newline at end of file
diff --git a/components/dynamic-page/page-component/templates/other/details/emagazine.vue b/components/dynamic-page/page-component/templates/other/details/emagazine.vue
index 646cc13..a1aa0d6 100644
--- a/components/dynamic-page/page-component/templates/other/details/emagazine.vue
+++ b/components/dynamic-page/page-component/templates/other/details/emagazine.vue
@@ -13,4 +13,5 @@ const { currentArticle } = storeToRefs(useArticleStore());
                         class="[&_img]:mx-auto">
                     </div>
     </div>
-</template>
\ No newline at end of file
+</template>
+<style lang="scss"></style>
\ No newline at end of file
diff --git a/components/dynamic-page/page-component/templates/other/index.ts b/components/dynamic-page/page-component/templates/other/index.ts
index 817abec..62514c6 100644
--- a/components/dynamic-page/page-component/templates/other/index.ts
+++ b/components/dynamic-page/page-component/templates/other/index.ts
@@ -2,4 +2,6 @@ export { default as Article_Button } from './copyLinks/ArticleButton.vue'
 export { default as Article_Detail_Emagazine } from './details/emagazine.vue'
 export { default as Article_Detail_Default } from './details/default.vue'
 export { default as Article_Detail_Infographics } from './details/infographics.vue'
-export { default as Default_Breadcrumb} from './breadcrumb/default.vue'
\ No newline at end of file
+export { default as Default_Breadcrumb} from './breadcrumb/default.vue'
+export { default as ADS_Default } from './ads/default.vue';
+export { default as Comment } from './comments/default.vue'
\ No newline at end of file
diff --git a/components/dynamic-page/page-component/templates/other/index.vue b/components/dynamic-page/page-component/templates/other/index.vue
index 17396dc..effdbf5 100644
--- a/components/dynamic-page/page-component/templates/other/index.vue
+++ b/components/dynamic-page/page-component/templates/other/index.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { enumPageComponentTemplates } from "@/definitions/enum";
 // import { Default_Breadcrumb, Comment, Podcast, Video, Article_Detail_Default, ADS_Default, Article_Button, Article_Detail_Infographics, Article_Detail_Emagazine} from "./index";
-import { Article_Button, Article_Detail_Emagazine, Article_Detail_Default, Article_Detail_Infographics, Default_Breadcrumb} from "./index";
+import { Article_Button, Article_Detail_Emagazine, Article_Detail_Default, Article_Detail_Infographics, Default_Breadcrumb, ADS_Default, Comment} from "./index";
 const _props = defineProps<{
   settings: any;
   component?: any;
@@ -12,9 +12,9 @@ const definedDynamicComponent: Record<string, any> = {
   'ARTICLE_DETAIL_DEFAULT': Article_Detail_Default,
   'ARTICLE_DETAIL_INFOGRAPHICS': Article_Detail_Infographics,
   'ARTICLE_DETAIL_EMAGAZINE': Article_Detail_Emagazine,
-//   'ADS_DEFAULT': ADS_Default,
+  'ADS_DEFAULT': ADS_Default,
   'ARTICLE_BUTTON': Article_Button,
-//   COMMENT: Comment,
+  COMMENT: Comment,
 //   POCAST: Podcast,
 //   VIDEO: Video
 };
diff --git a/components/dynamic-page/page/layouts/Default.vue b/components/dynamic-page/page/layouts/Default.vue
index 9c54a6e..d1039e0 100644
--- a/components/dynamic-page/page/layouts/Default.vue
+++ b/components/dynamic-page/page/layouts/Default.vue
@@ -14,14 +14,14 @@ const CLASS_FOR_LAYOUT = computed(() => {
             break;
         case 'Center_Page':
             _classForLayout = {
-                page_container: 'page_container w-full px-2',
+                page_container: 'page_container w-full px-2 container ',
                 layout_container: 'layout_container container-xxl mx-auto',
             };
             break;
         case 'Background_Page':
             _classForLayout = {
-                page_container: 'page_container w-full background-container',
-                layout_container: 'layout_container container-xxl mx-auto',
+                page_container: 'page_container w-full background-container ',
+                layout_container: 'layout_container mx-auto',
             };
             break;
         default: 
diff --git a/pages/bai-viet/[slug].vue b/pages/bai-viet/[slug].vue
index 33876eb..3b213ce 100644
--- a/pages/bai-viet/[slug].vue
+++ b/pages/bai-viet/[slug].vue
@@ -23,7 +23,7 @@ const store = reactive({
 
 (async () => {
   try {
-    store.article.getArticleBySlug(route.params.slug);
+    await store.article.getArticleBySlug(route.params.slug);
   } catch (error) {
     console.error("Error fetching data:", error);
   }
@@ -37,21 +37,35 @@ const loadPage = async (contentType: string | number) => {
 
 watch(currentArticle, async () => {
   let isContentType : string = '';
-  console.log(currentArticle.value)
+  console.log(currentArticle.value.contentType, 'type')
   switch (currentArticle.value?.contentType) {
     case 1:
-        isContentType = 'trang-chi-tiet-emagazine'
+        isContentType = 'trang-doi-song'
+        break;
     case 2:
         isContentType = 'ArticleLayoutImage'
+        break;
+
     case 3:
         isContentType = 'ArticleLayoutPodcast'
+        break;
+
     case 4:
         isContentType = 'ArticleLayoutVideo'
+        break;
+
     case 5:
-        if (currentArticle.value?.layoutType === 3) isContentType = 'trang-chi-tiet-emagazine'
-        else isContentType = 'trang-chi-tiet-emagazine'
+        if (currentArticle.value?.layoutType === 3) {
+          isContentType = 'trang-chi-tiet-emagazine' 
+          break;
+        }
+        else {
+          isContentType = 'trang-chi-tiet-emagazine'
+          break;
+        }
     default:
         isContentType = 'trang-chi-tiet-emagazine'
+        break;
   }
   await loadPage(isContentType)
 }, { deep: true })
diff --git a/server/models/articles/index.ts b/server/models/articles/index.ts
index 4d30c7b..c9dc8da 100644
--- a/server/models/articles/index.ts
+++ b/server/models/articles/index.ts
@@ -83,8 +83,7 @@ export const getArticleBySlug = async (event : any) => {
                 site: '1' || 1,
             }),
         })
-        console.log(item)
-        return item
+        return { item }
     } catch (error) {
         handleError(error);
     }
diff --git a/stores/dynamic-page.ts b/stores/dynamic-page.ts
index fa4308c..ac4dc4e 100644
--- a/stores/dynamic-page.ts
+++ b/stores/dynamic-page.ts
@@ -27,13 +27,12 @@ export const useDynamicPageStore = defineStore("dynamicPageStore", () => {
           contentArr.push(section.content && typeof section.content === 'string' && JSON.parse(section.content));
           return section;
         });
-        console.log(currentPage.value.sections ,'sectionPublished 2')
+
         
         sectionPublished.value = currentPage.value.sections && currentPage.value.sections.filter(
           (section: any) => section.isPublished && !contentArr.flat().some((_section: any) => _section && _section.data && _section.type === "section" && section.id === _section.data)
         );
 
-        console.log(sectionPublished.value ,'sectionPublished')
     };
 
     const setComponentPublished = () => {
@@ -43,7 +42,7 @@ export const useDynamicPageStore = defineStore("dynamicPageStore", () => {
           return section;
         });
         componentPublished.value = currentPage.value.components && currentPage.value.components.filter((section: any) => section.isPublished);
-        console.log(componentPublished.value, 'componentPublished2')
+
       };
 
     const setDataQuery = (query: any, componentId: number | string) => {
diff --git a/uno.config.ts b/uno.config.ts
index 4a27d30..77cfba6 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -34,7 +34,7 @@ export default defineConfig({
     {
       "after:no-content": "after:content-['']",
       "before:no-content": "before:content-['']",
-      'container-xxl': 'px-[8px] mx-auto w-full sm:w-620px md:w-760px lg:w-980px xl:w-1100px 2xl:w-1320px',
+      'container-xxl': 'px-[8px] mx-auto w-full sm:w-620px md:w-760px lg:w-980px xl:w-1100px 2xl:w-1200px',
     },
   ],
   rules: [