diff --git a/components/dynamic-page/page-component/templates/articles/details/Emagazine.vue b/components/dynamic-page/page-component/templates/articles/details/Emagazine.vue
index 76783ac..32f5994 100644
--- a/components/dynamic-page/page-component/templates/articles/details/Emagazine.vue
+++ b/components/dynamic-page/page-component/templates/articles/details/Emagazine.vue
@@ -19,11 +19,83 @@ console.log(currentArticle.value, 'currentArticle')
     
     </div> -->
 
+    <h2 class="font-gelasio text-center text-44px font-bold leading-130%" v-if="currentArticle?.title" v-html="currentArticle?.title"></h2>
     <div v-html="currentArticle.detail"></div>
   </div>
 </template>
 
 <style scoped lang="scss">
+.breadcrumb {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20px;
+
+  &__list {
+    margin: 0;
+    padding: 0px;
+    display: flex;
+    overflow-x: auto;
+    gap: 1.5rem;
+    align-items: center;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+
+    &__item {
+      display: inline-block;
+      position: relative;
+
+      &__title {
+        margin: 0;
+        font-size: 18px;
+        color: #000;
+        font-weight: 500;
+        text-transform: uppercase;
+        line-height: 180%;
+      }
+      // &:first-child {
+      //   color: blue;
+      // }
+
+      &:not(:first-child):before {
+        content: "\\";
+        position: absolute;
+        left: -18px;
+      }
+    }
+  }
+
+  .article-card-default__topic {
+    position: relative;
+    // background-color: #151411;
+    display: inline-block;
+
+    h5 {
+      font-size: 12px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      text-transform: uppercase;
+      // color: #fff;
+      padding: 0 12px;
+      height: 100%;
+      margin: 0;
+      border: 1px solid #000;
+      line-height: 180%;
+      font-weight: 300;
+    }
+
+    &::after {
+      position: absolute;
+      content: "";
+      display: block;
+      width: 12px;
+      height: 100%;
+      background-color: #ed1c24;
+      left: -12px;
+      top: 0;
+    }
+  }
+}
 .content {
   width: auto;
 }
diff --git a/components/dynamic-page/page-component/templates/articles/details/Infographic.vue b/components/dynamic-page/page-component/templates/articles/details/Infographic.vue
index e596557..c52a86a 100644
--- a/components/dynamic-page/page-component/templates/articles/details/Infographic.vue
+++ b/components/dynamic-page/page-component/templates/articles/details/Infographic.vue
@@ -18,13 +18,83 @@ console.log(currentArticle.value, 'currentArticle')
     <div class="px-44px pb-30px my-30px max-w-660px mx-auto border-b-1px border-#000">
     
     </div> -->
-
+    <h2 class="font-gelasio text-center text-44px font-bold leading-130%" v-if="currentArticle?.title" v-html="currentArticle?.title"></h2>
     <div v-html="currentArticle.detail"></div>
   </div>
 </template>
 
 <style scoped lang="scss">
+.breadcrumb {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20px;
 
+  &__list {
+    margin: 0;
+    padding: 0px;
+    display: flex;
+    overflow-x: auto;
+    gap: 1.5rem;
+    align-items: center;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+
+    &__item {
+      display: inline-block;
+      position: relative;
+
+      &__title {
+        margin: 0;
+        font-size: 18px;
+        color: #000;
+        font-weight: 500;
+        text-transform: uppercase;
+        line-height: 180%;
+      }
+      // &:first-child {
+      //   color: blue;
+      // }
+
+      &:not(:first-child):before {
+        content: "\\";
+        position: absolute;
+        left: -18px;
+      }
+    }
+  }
+
+  .article-card-default__topic {
+    position: relative;
+    // background-color: #151411;
+    display: inline-block;
+
+    h5 {
+      font-size: 12px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      text-transform: uppercase;
+      // color: #fff;
+      padding: 0 12px;
+      height: 100%;
+      margin: 0;
+      border: 1px solid #000;
+      line-height: 180%;
+      font-weight: 300;
+    }
+
+    &::after {
+      position: absolute;
+      content: "";
+      display: block;
+      width: 12px;
+      height: 100%;
+      background-color: #ed1c24;
+      left: -12px;
+      top: 0;
+    }
+  }
+}
 .center-y {
   width: auto;
 }
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 9242dbc..929d392 100644
--- a/components/dynamic-page/page-component/templates/articles/details/Video.vue
+++ b/components/dynamic-page/page-component/templates/articles/details/Video.vue
@@ -29,7 +29,7 @@ function findElementPathById(categories: any[], targetId: number, path: any[] =
         <nuxt-link class="font-raleway text-18px font-500 leading-180% uppercase" :to="`/${category.code}`">{{ category.title }}</nuxt-link>
       </li>
     </ul>
-
+    <h2 class="font-gelasio text-center text-44px font-bold leading-130%" v-if="currentArticle?.title" v-html="currentArticle?.title"></h2>
     <div class="video-content" v-html="currentArticle.detail"></div>
   </div>
 </template>
diff --git a/pages/bai-viet/[slug].vue b/pages/bai-viet/[slug].vue
index af13d59..b39b782 100644
--- a/pages/bai-viet/[slug].vue
+++ b/pages/bai-viet/[slug].vue
@@ -20,8 +20,9 @@ import { useArticleStore } from '~/stores/articles';
 
 const loadPage = async () => {
 const article = await store.article.getArticleBySlug(String(route.params.slug));
+console.log(article?.value, 'article')
   let isContentType 
-  switch (article.value?.contentType) {
+  switch (article?.value?.contentType) {
     case 1:
       isContentType = 'trang-chi-tiet';
       break;