update 07/10

assets/script/style.scss

@@ -97,6 +97,27 @@ html {
     }
 }
 
+.header-left .menu {
+    a {
+        position: relative;
+        &::after {
+            position: absolute;
+            content: "";
+            left: 0;
+            bottom: -3px;
+            width: 100%;
+            height: 2px;
+            background: var(--color-blue);
+            display: none;
+        }
+        &:hover {
+            &::after {
+                display: block;
+            }
+        }
+    }
+}
+
 .homepage {
     .banner {
         background: url(../images/background-banner.png) no-repeat;
@@ -213,3 +234,257 @@ html {
     background-size: 100% 100%;
     background-position: center;
 }
+.header-mobile {
+    display: none;
+    .item-menu {
+        display: block;
+        .text-menu {
+            position: relative;
+            width: fit-content;
+            &::after {
+                position: absolute;
+                content: "";
+                left: 0;
+                bottom: -3px;
+                width: 100%;
+                height: 2px;
+                background: var(--color-blue);
+                display: none;
+            }
+            &:hover {
+                &::after {
+                    display: block;
+                }
+            }
+        }
+        &.active {
+            .text-menu::after {
+                display: block;
+            }
+        }
+    }
+}
+
+.footer-mobile {
+    display: none;
+}
+
+@media (max-width: 1200px) {
+    body {
+        max-width: 1200px !important;
+    }
+    .container {
+        max-width: 1024px !important;
+        padding: 0 15px;
+    }
+    .header-pc {
+        display: none;
+    }
+    .header-mobile {
+        display: block;
+    }
+    .homepage {
+        .banner {
+            min-height: auto;
+            .title {
+                font-size: 24px;
+                line-height: 32px;
+            }
+            .image-banner img {
+                height: auto;
+            }
+        }
+    }
+    .box-benefit {
+        padding: 30px 0 !important;
+        .title {
+            font-size: 24px;
+        }
+        .item {
+            .title {
+                font-size: 18px;
+            }
+            .content {
+                font-size: 14px;
+            }
+        }
+    }
+    .box-platforms {
+        padding: 30px 0 !important;
+        .title {
+            font-size: 24px;
+        }
+        .content-platforms {
+            width: 100%;
+            padding: 20px;
+        }
+        .box-item {
+            .content {
+                padding: 15px;
+            }
+        }
+    }
+    .box-product-sell {
+        margin: 20px 0 !important;
+        .content {
+            padding: 20px 20px 20px 0;
+        }
+        .item-sell {
+            gap: 20px;
+        }
+    }
+    .box-tamnhin {
+        margin-bottom: 50px !important;
+        .title {
+            font-size: 24px;
+        }
+        .content-tamnhin {
+            .title {
+                font-size: 24px;
+            }
+        }
+    }
+}
+
+@media (max-width: 1000px) {
+    body {
+        max-width: 100% !important;
+    }
+    .container {
+        max-width: 100% !important;
+        padding: 0 15px;
+    }
+    .homepage .tieuchi {
+        width: 100%;
+        padding: 0 15px;
+    }
+    .box-tamnhin .content-tamnhin {
+        width: 100%;
+    }
+
+    .item-features {
+        .content {
+            width: 100%;
+            padding: 0 15px;
+        }
+    }
+    .box-chuyendoi {
+        width: 100% !important;
+    }
+    .page-features {
+        .page-title {
+            font-size: 24px;
+        }
+        .page-note {
+            font-size: 18px;
+        }
+    }
+}
+
+@media (max-width: 834px) {
+    .homepage .tieuchi {
+        .item p {
+            font-size: 14px;
+        }
+    }
+    .footer-pc {
+        .grid-cols-4 {
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+        }
+    }
+}
+
+@media (max-width: 768px) {
+    .homepage .tieuchi {
+        width: 100%;
+    }
+}
+
+@media (max-width: 680px) {
+    .homepage .tieuchi {
+        grid-template-columns: repeat(1, minmax(0, 1fr));
+    }
+    .homepage .tieuchi .item {
+        border-bottom: 1px solid #8a8a8a;
+        border-right: 0;
+        padding: 20px 0;
+        &:last-child {
+            border: 0;
+        }
+    }
+    .homepage .banner .title {
+        padding: 64px 15px 0 15px;
+    }
+    .footer-mobile {
+        display: block;
+    }
+    .footer-pc {
+        display: none;
+    }
+}
+
+@media (max-width: 480px) {
+    .homepage .banner .title {
+        font-size: 20px;
+    }
+    .box-benefit .title {
+        font-size: 20px;
+    }
+    .box-benefit .list {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+    .box-platforms {
+        .content-platforms {
+            padding: 15px;
+        }
+        .title {
+            font-size: 20px;
+            margin-bottom: 30px;
+        }
+        .box-item {
+            grid-template-columns: repeat(1, minmax(0, 1fr));
+            flex-wrap: wrap;
+            .image {
+                width: 100%;
+                padding: 15px;
+                a {
+                    height: 100%;
+                }
+            }
+            .content {
+                width: 100%;
+            }
+        }
+    }
+    .box-product-sell {
+        .item-sell {
+            grid-template-columns: repeat(1, minmax(0, 1fr));
+            gap: 0;
+            .content {
+                padding: 15px;
+            }
+        }
+    }
+    .box-tamnhin {
+        .background-tamnhin {
+            padding: 15px;
+        }
+        .title {
+            font-size: 20px;
+        }
+        .list {
+            grid-template-columns: repeat(1, minmax(0, 1fr));
+        }
+        .box-faq {
+            padding: 15px;
+            h2 {
+                font-size: 20px;
+            }
+            .item-faq {
+                .title {
+                    font-size: 16px;
+                }
+            }
+        }
+    }
+}