diff --git a/assets/styles/style.scss b/assets/styles/style.scss
index dce8d24..f226929 100644
--- a/assets/styles/style.scss
+++ b/assets/styles/style.scss
@@ -40,7 +40,7 @@ img {
 }
 
 div[layout="TYPE:Detail-LAYOUT:image"] {
-    & p,& figure.align-center-image, & #sub, & #title, & #intro, & #breakcrumb, & #navigation__bottom {
+    & p,& figure.align-center-image, & #sub, & #title, & #intro, & #breadcrumb, & #navigation__bottom {
         @apply lg:max-w-640px mx-auto;
     }
 }
diff --git a/components/dynamic-page/page-component/templates/articles/layouts/Card.vue b/components/dynamic-page/page-component/templates/articles/layouts/Card.vue
index eb79af8..328bc0b 100644
--- a/components/dynamic-page/page-component/templates/articles/layouts/Card.vue
+++ b/components/dynamic-page/page-component/templates/articles/layouts/Card.vue
@@ -68,7 +68,7 @@ const drop = (e: any) => {
       <div>
         <nuxt-link :to="`bai-viet/${parseData?.slug}`"
           v-if="!LAYOUT_PARSE['HIDE'] || !LAYOUT_PARSE['HIDE'].includes('title')"
-          class="line-clamp hover:text-primary-600"
+          class="line-clamp hover:text-primary-600 font-bold font-archivo"
           :style="[
             LAYOUT_PARSE['fontSizeTitle'] && `font-size: ${LAYOUT_PARSE['fontSizeTitle']}px`,
             LAYOUT_PARSE['fontWeightTitle'] && `font-weight: ${LAYOUT_PARSE['fontWeightTitle']}`,
diff --git a/components/dynamic-page/page-component/templates/articles/layouts/details/General.vue b/components/dynamic-page/page-component/templates/articles/layouts/details/General.vue
index 07f9b29..d9aad05 100644
--- a/components/dynamic-page/page-component/templates/articles/layouts/details/General.vue
+++ b/components/dynamic-page/page-component/templates/articles/layouts/details/General.vue
@@ -54,9 +54,9 @@ onMounted(async () => {
   clickElement("author", "author", "data-code");
 
   let detailEmagazine = document.querySelector('div[layout="ARTICLE_DETAIL_EMAGAZINE"]');
-  let breakcrumb = document.querySelector('div[layout="BREADCRUM_DEFAULT"]');
-  if (detailEmagazine && breakcrumb) {
-    breakcrumb.classList.add("lg:max-w-640px", "mx-auto");
+  let breadcrumb = document.querySelector('div[layout="BREADCRUM_DEFAULT"]');
+  if (detailEmagazine && breadcrumb) {
+    breadcrumb.classList.add("lg:max-w-640px", "mx-auto");
   }
 
   document.documentElement.style.setProperty("--step", '0');
@@ -93,10 +93,10 @@ async function copyLink() {
   }
 
 }
-
+console.log(currentArticle.value,'currentArtice')
 </script>
 <template>
-  <div id="breakcrumb" class="flex justify-between items-center my-3 font-arial">
+  <div id="breadcrumb" class="flex justify-between items-center my-3 font-arial">
     <ul class="flex gap-6 items-center text-md">
       <template v-for="(category, index) in currentCategoryTree" :key="index">
         <li class="first:text-primary-600 hover:text-primary-600 font-medium relative after:absolute after:content-['\003E'] last:after:content-[''] after:right--4 after:text-gray-3">
diff --git a/components/dynamic-page/page-component/templates/articles/layouts/details/Image.vue b/components/dynamic-page/page-component/templates/articles/layouts/details/Image.vue
index f536b53..b16a728 100644
--- a/components/dynamic-page/page-component/templates/articles/layouts/details/Image.vue
+++ b/components/dynamic-page/page-component/templates/articles/layouts/details/Image.vue
@@ -41,9 +41,9 @@ onMounted(async () => {
   clickElement("author", "author", "data-code");
 
   let detailEmagazine = document.querySelector('div[layout="ARTICLE_DETAIL_EMAGAZINE"]');
-  let breakcrumb = document.querySelector('div[layout="BREADCRUM_DEFAULT"]');
-  if (detailEmagazine && breakcrumb) {
-    breakcrumb.classList.add("lg:max-w-640px", "mx-auto");
+  let breadcrumb = document.querySelector('div[layout="BREADCRUM_DEFAULT"]');
+  if (detailEmagazine && breadcrumb) {
+    breadcrumb.classList.add("lg:max-w-640px", "mx-auto");
   }
 });
 
@@ -80,7 +80,7 @@ async function copyLink() {
 </script>
 <template>
   <div class="content" v-if="currentArticle">
-    <div id="breakcrumb" class="flex justify-between items-center my-3">
+    <div id="breadcrumb" class="flex justify-between items-center my-3">
       <ul class="flex gap-6 items-center text-md">
         <template v-for="(category, index) in currentCategoryTree" :key="index">
           <li class="font-semibold relative after:absolute after:content-['\003E'] last:after:content-[''] after:right--4 after:text-gray-3">
diff --git a/components/dynamic-page/page-component/templates/articles/layouts/details/Podcast.vue b/components/dynamic-page/page-component/templates/articles/layouts/details/Podcast.vue
index d09a5bd..1b9cf8d 100644
--- a/components/dynamic-page/page-component/templates/articles/layouts/details/Podcast.vue
+++ b/components/dynamic-page/page-component/templates/articles/layouts/details/Podcast.vue
@@ -41,9 +41,9 @@ onMounted(async () => {
   clickElement("author", "author", "data-code");
 
   let detailEmagazine = document.querySelector('div[layout="ARTICLE_DETAIL_EMAGAZINE"]');
-  let breakcrumb = document.querySelector('div[layout="BREADCRUM_DEFAULT"]');
-  if (detailEmagazine && breakcrumb) {
-    breakcrumb.classList.add("lg:max-w-640px", "mx-auto");
+  let breadcrumb = document.querySelector('div[layout="BREADCRUM_DEFAULT"]');
+  if (detailEmagazine && breadcrumb) {
+    breadcrumb.classList.add("lg:max-w-640px", "mx-auto");
   }
 });
 
@@ -115,6 +115,7 @@ const updateVolume = (num?: number) => {
     if(num) {
       volume.value += num
     }
+    // console.log('1231321')
     audioPlayer.value.volume = volume.value;
   }
 };
@@ -220,7 +221,7 @@ const durationComputed = computed(() => {
           </div>
           <div class="md:inline-flex hidden items-center gap-2 ml--10px h9 text-primary-600 rounded-8px text-28px cursor-pointer hover:bg-primary-100">
             <Icon @click="updateVolume(-0.1)" name="material-symbols:volume-mute"></Icon>
-            <input v-if="isVolume" class="accent-primary-600 h-1 w-12 lg:w-20 cursor-pointer" type="range" v-model="volume" @input="updateVolume" min="0.1" max="1" step="0.1" />
+            <input v-if="isVolume" class="accent-primary-600 h-1 w-12 lg:w-20 cursor-pointer" type="range" v-model="volume" @input="updateVolume()" min="0.1" max="1" step="0.1" />
             <Icon @click="updateVolume(0.1)" name="material-symbols:volume-up"></Icon>
           </div>
         </div>
diff --git a/components/dynamic-page/page-component/templates/collections/index.vue b/components/dynamic-page/page-component/templates/collections/index.vue
index 8940c90..cefb114 100644
--- a/components/dynamic-page/page-component/templates/collections/index.vue
+++ b/components/dynamic-page/page-component/templates/collections/index.vue
@@ -5,6 +5,7 @@ import {
 const _props = defineProps<{
   settings: any;
   component?: any;
+  content?: any
 }>();
 
 const definedDynamicComponent: Record<string, any> = {
@@ -26,8 +27,9 @@ const GET_PROPS = computed(() => {
     }
   };
 });
+
 </script>
 
 <template>
-  <component :is="definedDynamicComponent[getCurrentComponent]" v-bind="GET_PROPS()" />
+  <component :is="definedDynamicComponent[getCurrentComponent]" v-bind="{...GET_PROPS(), content: _props.content}" />
 </template>
diff --git a/components/dynamic-page/page-component/templates/collections/layouts/Article.vue b/components/dynamic-page/page-component/templates/collections/layouts/Article.vue
index d3b29bc..819c4ef 100644
--- a/components/dynamic-page/page-component/templates/collections/layouts/Article.vue
+++ b/components/dynamic-page/page-component/templates/collections/layouts/Article.vue
@@ -16,8 +16,8 @@ const _props = defineProps<{
   dataQuery?: string;
   layout?: string;
   label?: string;
+  content?: any
 }>();
-
 const SETTING_OPTIONS = {
   MAX_ELEMENT: 5,
   TEMPLATE: "Article",
@@ -102,6 +102,8 @@ const mapActivesToItems = (index: number) => {
 
   return output[index + 1] || {};
 };
+
+const CONTENT_PARSE = computed(() => JSON.parse(_props.content))
 </script>
 
 <template>
diff --git a/components/dynamic-page/page-component/templates/index.vue b/components/dynamic-page/page-component/templates/index.vue
index 0f9f10e..46e4455 100644
--- a/components/dynamic-page/page-component/templates/index.vue
+++ b/components/dynamic-page/page-component/templates/index.vue
@@ -4,6 +4,7 @@ import { Dynamic_Section, Dynamic_Category, Dynamic_Collection, Dynamic_Navigati
 const _props = defineProps<{
   settings: any;
   component?: any;
+  content?: any
 }>();
 
 const definedDynamicComponent: Record<string, any> = {
@@ -35,5 +36,5 @@ const GET_PROPS = computed(() => {
 
 <template>
   <!-- <component :is="definedDynamicComponent[getCurrentComponent]" v-bind="{ ...(GET_PROPS()), component: _props.component, settings: _props.settings }" /> -->
-  <component :is="definedDynamicComponent[getCurrentComponent]" v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings }" />
+  <component :is="definedDynamicComponent[getCurrentComponent]" v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings, content: _props.content }" />
 </template>
diff --git a/components/dynamic-page/page-section/RecusiveSection.vue b/components/dynamic-page/page-section/RecusiveSection.vue
index 2b5a040..d2f325b 100644
--- a/components/dynamic-page/page-section/RecusiveSection.vue
+++ b/components/dynamic-page/page-section/RecusiveSection.vue
@@ -43,6 +43,7 @@ const findDataPosition = computed(() => {
         v-if="findDataPosition && findDataPosition?.id" 
         :settings="findDataPosition.settings" 
         :component="findDataPosition"
+        :content="findDataPosition.content"
       />
     </template>
     <template v-else-if="props.type === defineTypeRecusive.SECTION">