thainv-dev: UI

assets/styles/app.sass

@@ -1,6 +1,6 @@
 @import custom.css
 body
-    font-family: 'Nunito', sans-serif
+    @apply font-beVietnam text-black-500
 
 // video
 //     max-width: 100% !important

assets/styles/custom.css

@@ -1,5 +1,8 @@
 
 @import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap');
 
 .custom_scrollbar {
   white-space: nowrap;
@@ -146,7 +149,7 @@ span.boxRelation .relationBoxText{
 }
 
 span.boxRelation .relationText{
-  font-size: 18px;
+  font-size: 16px;
     font-weight: 600;
 }
 span.boxRelation .relationDay{

assets/styles/style.scss

@@ -8,6 +8,7 @@
 //     }
 // }
 
+
 figure {
     margin: auto !important;
 }
@@ -18,7 +19,15 @@ img {
 
 .content {
     & p {
-        @apply mb-2;
+        @apply mb-2 font-arial  leading-160%;
+    }
+
+    & #title {
+        @apply font-merriweather font-bold leading-150%;
+    }
+
+    & #intro, & #sub {
+        @apply font-arial  font-medium leading-160%;
     }
 
     & audio {
@@ -42,10 +51,8 @@ div[layout="ARTICLE_PAGE"] {
     }
 }
 
-// .layout_define {
-//     & .section_layout.three_col_layout {
-//         @media (max-width: 768px) {
-//             grid-template-columns: repeat(1, minmax(0, 1fr));
-//           }
-//     }
-// }
+.container-long {
+    & .section_layout.grid {
+        @apply md:gap-20px
+    }
+}