thainv: ghép navigation

components/dynamic-page/page-component/templates/articles/layouts/Card.vue

@@ -89,7 +89,7 @@ const drop = (e: any) => {
 <style lang="scss" scoped>
 .basic-article {
   display: flex;
-  gap: 10px;
+  gap: 12px;
   height: 100%;
 
   &.no-data {
@@ -104,6 +104,11 @@ const drop = (e: any) => {
     &.reverse {
       flex-direction: column-reverse;
       height: 100%;
+
+      @media (max-width: 640px) {
+        flex-direction:column;
+      }
+      
     }
   }
   &.border-custom {
@@ -111,24 +116,39 @@ const drop = (e: any) => {
   }
   &.borderLeft {
     border-left: 1px solid;
-    padding-left: 10px;
+    padding-left: 16px;
+    
   }
   &.borderRight {
     border-right: 1px solid;
-    padding-right: 10px;
+    padding-right: 16px;
   }
   &.borderTop {
     border-top: 1px solid;
-    padding-top: 10px;
+    padding-top: 16px;
   }
   &.borderBottom {
     border-bottom: 1px solid;
-    padding-bottom: 10px;
+    padding-bottom: 16px;
   }
+  &.borderRight ,
+  &.borderLeft, 
+  &.borderTop, 
+  &.borderBottom {
+
+    @media (max-width: 640px) {
+        border: 0;
+        padding: 0;
+      }
+  }
+
   &.horizontal {
-    flex-direction: row;
+    @apply sm:flex-row flex-col;
     .basic-article_thumbnail {
       width: 40%;
+      @media (max-width: 640px) {
+        width: 100% !important;
+      }
     }
     &.reverse {
       flex-direction: row-reverse;