diff --git a/assets/styles/style.scss b/assets/styles/style.scss
index ca167d5..6b1dfe5 100644
--- a/assets/styles/style.scss
+++ b/assets/styles/style.scss
@@ -180,4 +180,17 @@ div[layout="ARTICLE_PAGE"] {
         @apply mt-12 first:mt-0;
 
     }
-}
\ No newline at end of file
+}
+
+@media (max-width: 640px) {
+    .collection-container {
+        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
+        & > article.basic-article {
+            flex-direction: row!important;
+
+            & > .basic-article_thumbnail {
+                width: 50%!important;
+            }
+        }
+    }
+} 
\ No newline at end of file
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 d5302ee..95bc08f 100644
--- a/components/dynamic-page/page-component/templates/articles/cards/Audio.vue
+++ b/components/dynamic-page/page-component/templates/articles/cards/Audio.vue
@@ -21,7 +21,7 @@ const parseData = computed(() => {
   const result = getInputValue(props.dataResult, "OBJECT");
   switch (result?.contentType) {
     case 1:
-      type.value = "";
+      type.value = "Default";
       // type.value = "Image";
       break;
     case 2:
@@ -54,8 +54,8 @@ const parseData = computed(() => {
   <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>
-        <template v-if="type === 'Image'">
+      <span class="flex justify-center">
+        <template v-if="['Image', 'Default', 'Infographics', 'Emagazine'].includes(type)">
           <svg width="28" height="22" viewBox="0 0 28 22" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path
               d="M25.25 0.5H7.25C5.98438 0.5 5 1.53125 5 2.75V14.75C5 16.0156 5.98438 17 7.25 17H25.25C26.4688 17 27.5 16.0156 27.5 14.75V2.75C27.5 1.53125 26.4688 0.5 25.25 0.5ZM10.9531 3.5C11.75 3.5 12.4531 4.20312 12.4531 5C12.4531 5.84375 11.7969 6.5 10.9531 6.5C10.1094 6.5 9.45312 5.84375 9.45312 5C9.45312 4.20312 10.1562 3.5 10.9531 3.5ZM23.6562 13.625C23.5156 13.8594 23.2344 14 23 14H9.5C9.17188 14 8.9375 13.8594 8.79688 13.625C8.70312 13.3438 8.70312 13.0625 8.89062 12.8281L12.1719 8.32812C12.3125 8.14062 12.5 8 12.7812 8C13.0156 8 13.2031 8.14062 13.3438 8.32812L14.4219 9.78125L17.375 5.375C17.4688 5.14062 17.7031 5 17.9844 5C18.2188 5 18.4531 5.14062 18.5938 5.375L23.6094 12.875C23.75 13.0625 23.75 13.3906 23.6562 13.625ZM21.875 19.25H6.125C4.25 19.25 2.75 17.75 2.75 15.875V4.625C2.75 4.01562 2.23438 3.5 1.625 3.5C0.96875 3.5 0.5 4.01562 0.5 4.625V15.875C0.5 19.0156 2.98438 21.5 6.125 21.5H21.875C22.4844 21.5 23 21.0312 23 20.375C23 19.7656 22.4844 19.25 21.875 19.25Z"
@@ -63,11 +63,16 @@ const parseData = computed(() => {
             />
           </svg>
         </template>
-      </span>
+        <template v-if="['Postcard', 'Video'].includes(type)">
+          <svg width="28" height="18" viewBox="0 0 28 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.5 2.25V15.75C18.5 17.0156 17.4688 18 16.25 18H2.75C1.48438 18 0.5 17.0156 0.5 15.75V2.25C0.5 1.03125 1.48438 0 2.75 0H16.25C17.4688 0 18.5 1.03125 18.5 2.25ZM27.5 3V15.0469C27.5 16.2188 26.0938 16.9219 25.1094 16.2656L20 12.7031V5.34375L25.1094 1.78125C26.0938 1.125 27.5 1.82812 27.5 3Z" fill="white"/>
+</svg>
 
-      <div class="card-audio__type-category">
+        </template>
+      </span>
+      <div class="card-audio__type-category" > 
         <div class="card-audio__type" v-if="type">{{ type }}</div>
-        <nuxt-link to="#" class="card-audio__category" :style="LAYOUT_PARSE['category-article']" :class="LAYOUT_PARSE['category-article_Class']">{{
+        <nuxt-link v-if="parseData.category" to="#" class="card-audio__category" :style="LAYOUT_PARSE['category-article']" :class="LAYOUT_PARSE['category-article_Class']">{{
           parseData?.category?.title
         }}</nuxt-link>
       </div>
@@ -78,9 +83,6 @@ const parseData = computed(() => {
     </div>
   </article>
   <div v-if="LAYOUT_PARSE.styleClasses" v-html="LAYOUT_PARSE.styleClasses" style="display:none;"></div>
-  <!-- <div>
-    aaaaaaa
-  </div> -->
 </template>
 
 <style lang="scss">
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 2d05fd0..7539d27 100644
--- a/components/dynamic-page/page-component/templates/articles/cards/Card.vue
+++ b/components/dynamic-page/page-component/templates/articles/cards/Card.vue
@@ -60,7 +60,7 @@ const parseData = computed(() => {
         }}</span>
         <nuxt-link :style="LAYOUT_PARSE['category-article']" :class="LAYOUT_PARSE['category-article_Class']">{{ parseData?.category?.title }}</nuxt-link>
       </div>
-      <p class="mb-0 line-clamp" :class="LAYOUT_PARSE['paragraph_Class']" :style="LAYOUT_PARSE['p.paragraph']">
+      <p class="mb-0 line-clamp-5" :class="LAYOUT_PARSE['paragraph_Class']" :style="LAYOUT_PARSE['p.paragraph']">
         <template v-if="parseData">
           {{ parseData.intro?.replace(/<[^>]+>/g, "") }}
         </template>
@@ -239,5 +239,16 @@ p {
     height: 100px;
     display: block;
   }
+
+  @media (max-width: 640px) {
+    padding-left: 0px!important;
+    padding-right: 0px!important;
+    border: 0px solid transparent!important;
+    flex-direction: column !important;
+
+    & .basic-article_thumbnail {
+      width: 100% !important;
+    }
+  }
 }
 </style>
diff --git a/components/dynamic-page/page-component/templates/collections/categories/misses/Default.vue b/components/dynamic-page/page-component/templates/collections/categories/misses/Default.vue
index 89a16f7..7301a32 100644
--- a/components/dynamic-page/page-component/templates/collections/categories/misses/Default.vue
+++ b/components/dynamic-page/page-component/templates/collections/categories/misses/Default.vue
@@ -111,6 +111,18 @@ const mapActivesToItems = (index: number) => {
   -moz-column-count: 4;
   gap: 16px;
 
+  @media (min-width: 640px) and (max-width: 1024px) {
+    column-count: 2;
+    -webkit-column-count: 2;
+    -moz-column-count: 2;
+  }
+
+  @media (max-width: 640px) {
+    column-count: 1;
+    -webkit-column-count: 1;
+    -moz-column-count: 1;
+  }
+
   .wrap {
     position: relative;
     width: 100%;
diff --git a/components/dynamic-page/page-section/layouts/none/Default.vue b/components/dynamic-page/page-section/layouts/none/Default.vue
index 0dea638..3a6fa51 100644
--- a/components/dynamic-page/page-section/layouts/none/Default.vue
+++ b/components/dynamic-page/page-section/layouts/none/Default.vue
@@ -166,8 +166,9 @@ const CLASS_FOR_SECTION = computed(() => {
 
     case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_LEFT_TWO"]:
       _classForSection = {
-        section_layout: "section_layout three_col_layout",
-        0: "col-span-2",
+        section_layout: "section_layout twelve_col_layout",
+        0: "sm:col-span-8 col-span-12",
+        1: "sm:col-span-4 col-span-12",
       };
       break;
     case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_RIGHT_TWO"]:
@@ -178,8 +179,9 @@ const CLASS_FOR_SECTION = computed(() => {
       break;
     case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_ONE_FIVE"]:
       _classForSection = {
-        section_layout: "section_layout six_col_layout",
-        1: "col-span-5",
+        section_layout: "section_layout grid-cols-12",
+        0: "lg:col-span-2 lg:block hidden",
+        1: "lg:col-span-10 col-span-12",
       };
       break;
     case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_FIVE_THREE_TWO_TWO"]:
@@ -202,7 +204,7 @@ const CLASS_FOR_SECTION = computed(() => {
       break;
     case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_TWO_FIVE_THREE_TWO"]:
       _classForSection = {
-        section_layout: "section_layout twelve_col_layout",
+        section_layout: "section_layout grid-cols-12 123",
         0: "col-span-2",
         1: "col-span-5",
         2: "col-span-3",
@@ -217,7 +219,10 @@ const CLASS_FOR_SECTION = computed(() => {
       break;
     case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_THREE"]:
       _classForSection = {
-        section_layout: "section_layout three_col_layout",
+        section_layout: "section_layout grid-cols-12",
+        0: "sm:col-span-4 col-span-12",
+        1: "sm:col-span-4 col-span-12",
+        2: "sm:col-span-4 col-span-12"
       };
       break;
     case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_FOUR"]:
@@ -239,15 +244,19 @@ const CLASS_FOR_SECTION = computed(() => {
       break;
     case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_CENTER_FOUR"]:
       _classForSection = {
-        section_layout: "section_layout six_col_layout",
-        1: "col-span-4",
+        section_layout: "section_layout grid-cols-12",
+        0: "lg:col-span-2 md:col-span-6 col-span-12 lg:order-1 md:order-2 order-2",
+        1: "lg:col-span-8 md:col-span-12 col-span-12 lg:order-2 md:order-1 order-1",
+        2: "lg:col-span-2 md:col-span-6 col-span-12 lg:order-3 md:order-3 order-3",
+ 
       };
       break;
     case enumPageSectionLayouts[enumPageSectionTemplate[enumPageSectionKey.NONE]["NONE"]]["VERTICAL_ONE_TWO_THREE"]:
       _classForSection = {
-        section_layout: "section_layout six_col_layout",
-        1: "col-span-2",
-        2: "col-span-3",
+        section_layout: "section_layout grid-cols-12",
+        0: "col-span-2 lg:block hidden",
+        1: "lg:col-span-4 md:col-span-5 col-span-12",
+        2: "lg:col-span-6 md:col-span-7 col-span-12",
       };
       break;
     default:
@@ -295,8 +304,6 @@ const mapActivesToItems = (index: number) => {
       :key="index"
       :class="['border-custom', CLASS_FOR_SECTION[index]]"
       :style="mapActivesToItems(index)['div.section_child']"
-      @dragover.prevent
-      @drop.stop.prevent="dropPlacementInSection($event, index, position.data)"
     >
       <RecusiveSection :type="position.type" :id="position.data" :section="props.section" />
     </div>
@@ -366,39 +373,39 @@ const mapActivesToItems = (index: number) => {
   &.twelve_col_layout {
     grid-template-columns: repeat(12, minmax(0, 1fr));
   }
-  .col-span-2 {
-    grid-column: span 2 / span 2;
-  }
-  .col-span-3 {
-    grid-column: span 3 / span 3;
-  }
-  .col-span-4 {
-    grid-column: span 4 / span 4;
-  }
-  .col-span-5 {
-    grid-column: span 5 / span 5;
-  }
-  .col-span-6 {
-    grid-column: span 6 / span 6;
-  }
-  .col-span-7 {
-    grid-column: span 7 / span 7;
-  }
-  .col-span-8 {
-    grid-column: span 8 / span 8;
-  }
-  .col-span-9 {
-    grid-column: span 9 / span 9;
-  }
-  .col-span-10 {
-    grid-column: span 10 / span 10;
-  }
-  .col-span-11 {
-    grid-column: span 11 / span 11;
-  }
-  .col-span-12 {
-    grid-column: span 12 / span 12;
-  }
+  // .col-span-2 {
+  //   grid-column: span 2 / span 2;
+  // }
+  // .col-span-3 {
+  //   grid-column: span 3 / span 3;
+  // }
+  // .col-span-4 {
+  //   grid-column: span 4 / span 4;
+  // }
+  // .col-span-5 {
+  //   grid-column: span 5 / span 5;
+  // }
+  // .col-span-6 {
+  //   grid-column: span 6 / span 6;
+  // }
+  // .col-span-7 {
+  //   grid-column: span 7 / span 7;
+  // }
+  // .col-span-8 {
+  //   grid-column: span 8 / span 8;
+  // }
+  // .col-span-9 {
+  //   grid-column: span 9 / span 9;
+  // }
+  // .col-span-10 {
+  //   grid-column: span 10 / span 10;
+  // }
+  // .col-span-11 {
+  //   grid-column: span 11 / span 11;
+  // }
+  // .col-span-12 {
+  //   grid-column: span 12 / span 12;
+  // }
   .border-custom {
     border-color: #e5e5e5 !important;
   }
diff --git a/components/dynamic-page/page/layouts/Default.vue b/components/dynamic-page/page/layouts/Default.vue
index c7dc2b2..a20d453 100644
--- a/components/dynamic-page/page/layouts/Default.vue
+++ b/components/dynamic-page/page/layouts/Default.vue
@@ -51,6 +51,7 @@ const LAYOUT_PARSE = computed(() => {
 
 <style lang="scss" scoped>
     .page_container {
+        // padding: 20px 0;
         &.full-size-page {
             width: 100%;
         }
@@ -65,6 +66,7 @@ const LAYOUT_PARSE = computed(() => {
 
         &.center-layout {
             max-width: 1385px;
+            padding: 0 12px;
             margin: auto;
         }
     }
diff --git a/components/dynamic-page/page/templates/components/footers/FooterHomeTemplate.vue b/components/dynamic-page/page/templates/components/footers/FooterHomeTemplate.vue
index d6e72e9..882c7ea 100644
--- a/components/dynamic-page/page/templates/components/footers/FooterHomeTemplate.vue
+++ b/components/dynamic-page/page/templates/components/footers/FooterHomeTemplate.vue
@@ -8,18 +8,18 @@ import { enumPageComponentLayouts, enumPageComponentTemplate, enumPageComponentK
     <div class="main-footer-container">
       <div class="footer-centertab">
         <div>
-          <div class="footer-navigation-container">
+          <div class="footer-navigation-container md:block hidden">
             <div>
               <AssignComponent :type="enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.NAVIGATION]['BOTTOM']}`]['NAVIGATION_BOTTOM_DEFAULT']" />
             </div>
           </div>
 
-          <div class="footer-contact-container">
-            <div>
-              <h3>BÁO GIẤY</h3>
+          <div class="footer-contact-container md:grid-cols-2 grid-cols-1">
+            <div class="md:order-1 order-2">
+              <h3 class="md:text-left text-center">BÁO GIẤY</h3>
 
               <div class="footer-contact">
-                <div>
+                <div class="md:justify-start justify-center">
                   <div>
                     <span><Icon name="material-symbols:call-outline" /></span>
                     <span>0123456789</span>
@@ -30,31 +30,31 @@ import { enumPageComponentLayouts, enumPageComponentTemplate, enumPageComponentK
                   </div>
                 </div>
 
-                <div class="footer-contact-buynow">
+                <div class="footer-contact-buynow md:justify-start justify-center">
                   <img src="~/assets/images/tienphong/muabaogiay-footer.png" alt="" />
                 </div>
               </div>
             </div>
-            <div>
-              <h3>THEO DÕI TRÊN MẠNG XÃ HỘI</h3>
+            <div class="md:order-2 order-1">
+              <h3 class="md:text-left text-center md:!border-#3d3d3d !border-transparent">THEO DÕI TRÊN MẠNG XÃ HỘI</h3>
 
               <div class="footer-socials">
-                <div>
+                <div class="flex flex-wrap md:gap-50px gap-32px md:justify-start justify-center">
                   <div>
                     <span><Icon name="ic:baseline-facebook" /></span>
-                    <span>facebook.com/vpress</span>
+                    <span class="md:inline hidden">facebook.com/vpress</span>
                   </div>
                   <div>
                     <span><Icon name="uil:youtube" /></span>
-                    <span>youtube.com/vpress</span>
+                    <span class="md:inline hidden">youtube.com/vpress</span>
                   </div>
                   <div>
                     <span><Icon name="ic:baseline-tiktok" /></span>
-                    <span>tiktok.com/vpress</span>
+                    <span class="md:inline hidden">tiktok.com/vpress</span>
                   </div>
                   <div>
                     <span><Icon name="arcticons:zalo" /></span>
-                    <span>zalo.vn/vpress</span>
+                    <span class="md:inline hidden">zalo.vn/vpress</span>
                   </div>
                 </div>
               </div>
@@ -62,9 +62,9 @@ import { enumPageComponentLayouts, enumPageComponentTemplate, enumPageComponentK
           </div>
 
           <div class="footer-ads">
-            <h3>LIÊN HỆ QUẢNG CÁO</h3>
+            <h3 class="md:text-left text-center">LIÊN HỆ QUẢNG CÁO</h3>
 
-            <div class="footer-ads-container">
+            <div class="footer-ads-container flex-wrap lg:gap-60px gap-20px md:flex-row flex-col">
               <div class="align-items-center">
                 <span><Icon name="material-symbols:call-outline" /></span>
                 <span class="flex flex-column">
@@ -89,26 +89,26 @@ import { enumPageComponentLayouts, enumPageComponentTemplate, enumPageComponentK
       <div>
         <div>
           <div class="flex justify-between items-end">
-            <div class="w-1/2">
+            <div class="flex-1 flex md:justify-start justify-center">
               <div>
                 <img class="w-200px" src="~/assets/images/tienphong/logo.png" alt="" />
               </div>
             </div>
 
-            <div class="footer-bottomtab-relations w-1/2">
+            <div class="footer-bottomtab-relations">
               <!-- <img src="~/assets/images/tienphong/sinhvien-logo.png" alt="" />
               <img src="~/assets/images/tienphong/hht-online-logo.png" alt="" />
               <img src="~/assets/images/tienphong/tamviet-logo.png" alt="" /> -->
             </div>
           </div>
-          <div class="flex justify-between items-end footer-bottomtab-description">
-            <div class="w-1/2 space-y-10px">
+          <div class="flex justify-between md:flex-row flex-col gap-20px footer-bottomtab-description md:text-left text-center">
+            <div class="flex-1 space-y-10px">
               <p>© Bản quyền thuộc báo điện tử <span class="fw-bold">....</span></p>
               <p><span class="fw-bold">Tổng Biên tập</span>: ...</p>
               <p>Tòa soạn: Hà Nội - Điện thoại: 0123456789</p>
               <p>Email: <span class="fw-bold">online.vpress@gmail.com</span> - Hotline: <span class="fw-bold">0123456789</span></p>
             </div>
-            <div class="w-1/2 space-y-10px">
+            <div class="flex-1 space-y-10px">
               <p>Giấy phép số <span class="fw-bold">...</span>, cấp ngày ....</p>
               <p>Cơ quan chủ quản: <span class="fw-bold">....</span></p>
               <p>Cấm sao chép dưới mọi hình thức nếu không có sự chấp thuận bằng văn bản</p>
@@ -147,7 +147,7 @@ import { enumPageComponentLayouts, enumPageComponentTemplate, enumPageComponentK
 
     .footer-contact-container {
       display: grid;
-      grid-template-columns: repeat(2, minmax(0, 1fr));
+      // grid-template-columns: repeat(2, minmax(0, 1fr));
       margin-top: 22px;
       gap: 60px;
       border-bottom: 1px solid #ed1c24;
@@ -189,9 +189,9 @@ import { enumPageComponentLayouts, enumPageComponentTemplate, enumPageComponentK
       .footer-socials {
         margin-top: 20px;
         > div {
-          display: grid;
-          grid-template-columns: repeat(2, minmax(0, 1fr));
-          gap: 55px;
+          // display: grid;
+          // grid-template-columns: repeat(2, minmax(0, 1fr));
+          // gap: 55px;
           > div {
             display: flex;
             align-items: flex-end;
@@ -213,7 +213,7 @@ import { enumPageComponentLayouts, enumPageComponentTemplate, enumPageComponentK
       > div {
         display: flex;
         align-items: center;
-        gap: 60px;
+        // gap: 60px;
         > div {
           display: flex;
           align-items: flex-end;
diff --git a/components/dynamic-page/page/templates/components/headers/HeaderHomeTemplate.vue b/components/dynamic-page/page/templates/components/headers/HeaderHomeTemplate.vue
index 039eb76..50f7fac 100644
--- a/components/dynamic-page/page/templates/components/headers/HeaderHomeTemplate.vue
+++ b/components/dynamic-page/page/templates/components/headers/HeaderHomeTemplate.vue
@@ -8,16 +8,16 @@ const currentDateTime = ref<string>("");
 onMounted(() => {
   currentDateTime.value = dayjs().format("dddd, DD/MM/YYYY, HH:mm");
 });
+
+const showMenuMobile = ref(false)
 </script>
 
 <template>
   <header id="header" class="main-header">
-    <div class="main-header-topbar ">
+    <div class="main-header-topbar lg:block hidden">
       <div class="flex items-center !py-3px">
         <time class="text-capitalize text-white text-12px" :datetime="currentDateTime">{{ currentDateTime }} GMT+7</time>
-        <div class="main-header-topbar-listag">
-
-        </div>
+        <div class="main-header-topbar-listag"></div>
         <div class="main-header-topbar-infor flex items-center">
           <div>
             <div class="text-white text-12px">
@@ -34,10 +34,10 @@ onMounted(() => {
         </div>
       </div>
     </div>
-    <div class="main-header-centerbar">
+    <div class="main-header-centerbar lg:block hidden">
       <div class="flex items-center">
         <div class="main-header-logo">
-          <nuxt-link to="/"><img class="w-200px" src="~/assets/images/tienphong/logo.png" alt="logo"></nuxt-link>
+          <nuxt-link to="/"><img class="w-200px" src="~/assets/images/tienphong/logo.png" alt="logo" /></nuxt-link>
         </div>
         <div class="main-header-control">
           <div class="main-header-relations">
@@ -51,14 +51,14 @@ onMounted(() => {
         </div>
       </div>
     </div>
-    <div class="main-ads">
+    <div class="main-ads lg:block hidden">
       <div class="main-ads-container">
         <div class="main-ads-content">
-          <img src="~/assets/images/tienphong/main-ads.png" alt="">
+          <img src="~/assets/images/tienphong/main-ads.png" alt="" />
         </div>
       </div>
     </div>
-    <div class="main-header-control">
+    <div class="main-header-control lg:block hidden">
       <div class="header-control-container !py-2">
         <div>
           <div class="header-control_tag">
@@ -72,22 +72,67 @@ onMounted(() => {
               <Icon name="material-symbols-light:search" />
             </div>
             <div>
-              <img src="http://picsum.photos/1024/600?random=1" width="40" height="40" class="rounded-circle" alt="">
+              <img src="http://picsum.photos/1024/600?random=1" width="40" height="40" class="rounded-circle" alt="" />
             </div>
           </div>
         </div>
       </div>
     </div>
+
+    <div class="main-header-mobile px-3 lg:hidden block">
+      <div class="flex items-center justify-between py-4 border-b-1px border-solid border-#000">
+        <div class="main-header-mobile-logo">
+          <nuxt-link to="/"><img class="w-128px" src="~/assets/images/tienphong/logo.png" alt="logo" /></nuxt-link>
+        </div>
+
+        <div class="main-header-mobile-control flex gap-20px">
+          <button class="bg-transparent" @click="showMenuMobile = true">
+            <svg width="21" height="17" viewBox="0 0 21 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path
+                d="M0 0.75C0 0.375 0.328125 0 0.75 0H20.25C20.625 0 21 0.375 21 0.75C21 1.17188 20.625 1.5 20.25 1.5H0.75C0.328125 1.5 0 1.17188 0 0.75ZM0 8.25C0 7.875 0.328125 7.5 0.75 7.5H20.25C20.625 7.5 21 7.875 21 8.25C21 8.67188 20.625 9 20.25 9H0.75C0.328125 9 0 8.67188 0 8.25ZM20.25 16.5H0.75C0.328125 16.5 0 16.1719 0 15.75C0 15.375 0.328125 15 0.75 15H20.25C20.625 15 21 15.375 21 15.75C21 16.1719 20.625 16.5 20.25 16.5Z"
+                fill="black"
+              />
+            </svg>
+          </button>
+          <button class="bg-transparent">
+            <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.7656 22.7344L17.1094 16.125C18.6094 14.3906 19.4531 12.1875 19.4531 9.75C19.4531 4.40625 15.0469 0 9.70312 0C4.3125 0 0 4.40625 0 9.75C0 15.1406 4.35938 19.5 9.70312 19.5C12.0938 19.5 14.2969 18.6562 16.0312 17.1562L22.6406 23.8125C22.8281 23.9531 23.0156 24 23.25 24C23.4375 24 23.625 23.9531 23.7656 23.8125C24.0469 23.5312 24.0469 23.0156 23.7656 22.7344ZM9.75 18C5.15625 18 1.5 14.2969 1.5 9.75C1.5 5.20312 5.15625 1.5 9.75 1.5C14.2969 1.5 18 5.20312 18 9.75C18 14.3438 14.2969 18 9.75 18Z" fill="black"/>
+</svg>
+
+          </button>
+        </div>
+      </div>
+    </div>
+<!-- navigation header -->
+  <div class="main-header-mobile-navigation fixed inset-0 bg-white z-999" v-if="showMenuMobile">
+    <div class="main-header-mobile px-3">
+      <div class="flex items-center justify-between py-4">
+        <div class="main-header-mobile-logo"  @click="showMenuMobile = false">
+          <nuxt-link to="/"><img class="w-128px" src="~/assets/images/tienphong/logo.png" alt="logo" /></nuxt-link>
+        </div>
+
+        <div class="main-header-mobile-control flex gap-20px">
+          <button class="bg-transparent" @click="showMenuMobile = false">
+            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="m12 13.4l-4.9 4.9q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7l4.9-4.9l-4.9-4.9q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l4.9 4.9l4.9-4.9q.275-.275.7-.275t.7.275t.275.7t-.275.7L13.4 12l4.9 4.9q.275.275.275.7t-.275.7t-.7.275t-.7-.275z"/></svg>
+          </button>
+        </div>
+      </div>
+    </div>
+    <div class="p-3">
+      <AssignComponent :type="enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.NAVIGATION]['TOP']}`]['NAVIGATION_TOP_DEFAULT']" />
+    </div>
+  </div>
   </header>
+
 </template>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .main-header {
   .main-header-topbar {
-    background: #ED1C24;
-    >div {
+    background: #ed1c24;
+    > div {
       max-width: 1385px;
-      padding: 5px 15px;
+      padding: 5px 20px;
       margin: 0 auto;
       justify-content: space-between;
     }
@@ -112,7 +157,7 @@ onMounted(() => {
     > div {
       max-width: 1385px;
       margin: 0 auto;
-      padding: 0px 15px;
+      padding: 0px 20px;
     }
     .main-header-control {
       flex: 1;
@@ -130,13 +175,15 @@ onMounted(() => {
   .main-ads {
     max-width: 1385px;
     margin: 0px auto;
-    padding: 20px 0px;
+    padding: 20px 20px;
     border-top: 1px solid #000000;
     border-bottom: 1px solid #000000;
 
     .main-ads-content {
-      width: 970px;
-      height: 250px;
+      width: 100%;
+      max-width: 970px;
+
+      // height: 250px;
       text-align: center;
       display: flex;
       flex-direction: column;
@@ -149,7 +196,7 @@ onMounted(() => {
     .header-control-container {
       max-width: 1385px;
       margin: 0px auto 10px auto;
-      padding: 10px 0px;
+      padding: 10px 20px;
       border-bottom: 1px solid #000000;
       > div {
         display: flex;
@@ -164,27 +211,27 @@ onMounted(() => {
         position: relative;
         height: 30px;
         label {
-          font-size: 12px; 
+          font-size: 12px;
           text-transform: uppercase;
           padding: 0 16px 0 12px;
           display: flex;
-          align-items: center; 
-          height: 100%; 
-          margin: 0; 
-          border: 1px solid #000; 
-          line-height: 1.8; 
-          font-weight: 300; 
+          align-items: center;
+          height: 100%;
+          margin: 0;
+          border: 1px solid #000;
+          line-height: 1.8;
+          font-weight: 300;
+        }
+        &::after {
+          position: absolute;
+          content: "";
+          display: block;
+          width: 12px;
+          height: 100%;
+          background-color: #ed1c24;
+          left: -12px;
+          top: 0;
         }
-        &::after { 
-          position: absolute; 
-          content: ""; 
-          display: block; 
-          width: 12px; 
-          height: 100%; 
-          background-color: #ed1c24; 
-          left: -12px; 
-          top: 0; 
-        } 
       }
       &_article {
         flex: 1;
@@ -211,5 +258,45 @@ onMounted(() => {
       }
     }
   }
+
+  .main-header-mobile-navigation {
+    & > div > nav > div {
+      justify-content: flex-start;
+    }
+
+    & .navigation-container {
+      flex-direction: column;
+      gap: 0px;
+      width: 100%;
+      align-items: start;
+
+      & > .navigation-branch {
+        width: 100%;
+
+        border-top: 1px solid #dee2e6;
+        &:first-child {
+          border: transparent;
+        }
+
+        & > .navigation-item {
+        width: 100%;
+        height: 100%;
+
+        & > a {
+          font-family: "Gelasio", serif !important;
+          text-transform: uppercase;
+          font-weight: 800!important;
+          display: block;
+          font-size: 16px;
+          padding: 8px 0;
+          width: 100%;
+          height: 100%;
+
+        }
+       }
+      }
+       
+    }
+  }
 }
-</style>
\ No newline at end of file
+</style>