SyuanYu 1 năm trước cách đây
mục cha
commit
20bb24f1b6

+ 167 - 184
layouts/_default/taxonomy.html

@@ -1,190 +1,173 @@
 <!DOCTYPE html>
 <html lang="{{ .Site.LanguageCode }}">
 
-  {{ partial "head.html" . }}
-  
-
-  <body>
-
-    <div id="all" style="overflow-x: hidden;">
-
-        {{ partial "nav.html" . }}
-        {{ partial "breadcrumbs.html" . }}
-
-<div id="content">
-    {{ .Content }}
-    <div class="container container_list">
-                <div class="row">
-                    <!-- *** LEFT COLUMN *** -->
-                    <div class="col-md-9" id="blog-listing-medium">
-                    
-                        {{ $paginator := .Paginate (where .Data.Pages "Type" "blog") }}
-                        {{ range $paginator.Pages }}
-                        <section class="post tag-post">
-                            <div class="row">
-                                <div class="col-md-4">
-                                  <div class="image">
-                                      <a href="{{ .Permalink }}">
-                                          {{ if .Params.banner }}
-                                          <img src="{{ .Params.banner | relURL }}" class="img-responsive" alt="">
-                                          {{ else }}
-                                          <img src="{{ "img/placeholder.png" | relURL }}" class="img-responsive" alt="">
-                                          {{ end }}
-                                      </a>
-                                  </div>
-                                </div>
-                                <div class="col-md-8">
-                                    <h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
-                                    <div class="clearfix">
-                                        <p class="author-category">
-                                          {{ if isset .Params "author" }}
-                                          {{ i18n "authorBy" }} <a href="#">{{ .Params.author }}</a>
-                                          {{ end }}
-                                          {{ if isset .Params "categories" }}
-                                          {{ if gt (len .Params.categories) 0 }}
-                                          in <a href="{{ "categories/" | relURL }}{{ index .Params.categories 0 | urlize | lower }}">{{ index .Params.categories 0 }}</a>
-                                          {{ end }}
-                                          {{ end }}
-
-                                        </p>
-                                        {{ if isset .Params "date" }}
-                                        <p class="date-comments">
-                                            <a href="{{ .Permalink }}"><i class="far fa-calendar"></i> {{ .Date.Format .Site.Params.date_format }}</a>
-                                        </p>
-                                        {{ end }}
-                                    </div>
-                                        {{ if isset .Params "summary" }}
-                                        <p class="intro">
-                                            {{ .Params.summary }}
-                                        </p>
-                                        {{ end }}
-                                    <p class="read-more"><a href="{{ .Permalink }}" class="btn btn-template-main">{{ i18n "continueReading" }}</a>
-                                    </p>
-                                </div>
-                            </div>
-                        </section>
-                        {{ end }}
-
-                        <ul class="pager">
-                            {{ if .Paginator.HasPrev }}
-                            <li class="previous"><a href="{{ .Paginator.Prev.URL | relURL }}">&larr; {{ i18n "newer" }}</a></li>
-                            {{ else }}
-                            <li class="previous disabled"><a href="#">&larr; {{ i18n "newer" }}</a></li>
-                            {{ end }}
-
-                            {{ if .Paginator.HasNext }}
-                            <li class="next"><a href="{{ .Paginator.Next.URL | relURL }}">{{ i18n "older" }} &rarr;</a></li>
-                            {{ else }}
-                            <li class="next disabled"><a href="#">{{ i18n "older" }} &rarr;</a></li>
-                            {{ end }}
-                        </ul>
-                    </div>
-                    <!-- /.col-md-9 -->
-
-                    <!-- *** LEFT COLUMN END *** -->
-
-                    <!-- *** RIGHT COLUMN ***
-       _________________________________________________________ -->
-
-                    <div class="col-md-3">
-
-                        <!-- *** MENUS AND WIDGETS *** -->
-
-                        {{ partial "sidebar.html" . }}
-
-                        <!-- *** MENUS AND FILTERS END *** -->
-
-                    </div>
-                    <!-- /.col-md-3 -->
-
-                    <!-- *** RIGHT COLUMN END *** -->
-
+{{ partial "head.html" . }}
+
+<body>
+  <div id="all" style="overflow-x: hidden;">
+
+    {{ partial "nav.html" . }}
+    {{ partial "breadcrumbs.html" . }}
+
+    <div id="content">
+      {{ .Content }}
+      <div class="container container_list">
+        <div class="row">
+          <!-- *** LEFT COLUMN *** -->
+          <div class="col-md-9" id="blog-listing-medium">
+
+            {{ $paginator := .Paginate (where .Data.Pages "Type" "blog") }}
+            {{ range $paginator.Pages }}
+            <section class="post tag-post">
+              <div class="row">
+                <div class="col-md-4">
+                  <div class="image">
+                    <a href="{{ .Permalink }}">
+                      {{ if .Params.banner }}
+                      <img src="{{ .Params.banner | relURL }}" class="img-responsive" alt="">
+                      {{ else }}
+                      <img src="{{ " img/placeholder.png" | relURL }}" class="img-responsive" alt="">
+                      {{ end }}
+                    </a>
+                  </div>
+                </div>
+                <div class="col-md-8">
+                  <h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
+                  <div class="clearfix">
+                    <p class="author-category">
+                      {{ if isset .Params "author" }}
+                      {{ i18n "authorBy" }} <a href="#">{{ .Params.author }}</a>
+                      {{ end }}
+                      {{ if isset .Params "categories" }}
+                      {{ if gt (len .Params.categories) 0 }}
+                      in <a href="{{ " categories/" | relURL }}{{ index .Params.categories 0 | urlize | lower }}">{{
+                        index .Params.categories 0 }}</a>
+                      {{ end }}
+                      {{ end }}
+
+                    </p>
+                    {{ if isset .Params "date" }}
+                    <p class="date-comments">
+                      <a href="{{ .Permalink }}"><i class="far fa-calendar"></i> {{ .Date.Format
+                        .Site.Params.date_format }}</a>
+                    </p>
+                    {{ end }}
+                  </div>
+                  {{ if isset .Params "summary" }}
+                  <p class="intro">
+                    {{ .Params.summary }}
+                  </p>
+                  {{ end }}
+                  <p class="read-more"><a href="{{ .Permalink }}" class="btn btn-template-main">{{
+                      i18n "continueReading" }}</a>
+                  </p>
                 </div>
-                <!-- /.row -->
-            </div>
-            <!-- /.container -->
+              </div>
+            </section>
+            {{ end }}
+
+            <ul class="pager">
+              {{ if .Paginator.HasPrev }}
+              <li class="previous"><a href="{{ .Paginator.Prev.URL | relURL }}">&larr; {{ i18n "newer"
+                  }}</a></li>
+              {{ else }}
+              <li class="previous disabled"><a href="#">&larr; {{ i18n "newer" }}</a></li>
+              {{ end }}
+
+              {{ if .Paginator.HasNext }}
+              <li class="next"><a href="{{ .Paginator.Next.URL | relURL }}">{{ i18n "older" }} &rarr;</a>
+              </li>
+              {{ else }}
+              <li class="next disabled"><a href="#">{{ i18n "older" }} &rarr;</a></li>
+              {{ end }}
+            </ul>
+          </div>
+          <div class="col-md-3">
+            {{ partial "sidebar.html" . }}
+          </div>
         </div>
-        <!-- /#content -->
-
-        {{ partial "LP_components/Footer.html" . }}
-
+      </div>
     </div>
-    <!-- /#all -->
-
-    {{ partial "scripts.html" . }}
-    <script>
-        function tab1 () {
-            if(('.v-tabs').length){
-                // Show the first tab by default
-            $('.v-tabs-stage>div').hide();
-            $('.v-tabs-stage>div:first').show();
-            $('.v-tabs-nav li:first').addClass('v-tab-active');
-
-            // Change tab class and display content
-            $('.v-tabs-nav a').on('click', function(event){
-                event.preventDefault();
-                $('.v-tabs-nav li').removeClass('v-tab-active');
-                $(this).parent().addClass('v-tab-active');
-                $('.v-tabs-stage>div').hide();
-                $($(this).attr('href')).show();
-            });
-            }
-        }
-        function tab2 () {
-            if(('.d-tabs').length){
-                // Show the first tab by default
-            $('.d-tabs-stage>div').hide();
-            $('.d-tabs-stage>div:first').show();
-            $('.d-tabs-nav li:first').addClass('d-tab-active');
-
-            // Change tab class and display content
-            $('.d-tabs-nav a').on('click', function(event){
-                event.preventDefault();
-                $('.d-tabs-nav li').removeClass('d-tab-active');
-                $(this).parent().addClass('d-tab-active');
-                $('.d-tabs-stage>div').hide();
-                $($(this).attr('href')).show();
-            });
-            }
-        }
-        function tab3 () {
-            if(('.m-tabs').length){
-                // Show the first tab by default
-            $('.m-tabs-stage>div').hide();
-            $('.m-tabs-stage>div:first').show();
-            $('.m-tabs-nav li:first').addClass('m-tab-active');
-
-            // Change tab class and display content
-            $('.m-tabs-nav a').on('click', function(event){
-                event.preventDefault();
-                $('.m-tabs-nav li').removeClass('m-tab-active');
-                $(this).parent().addClass('m-tab-active');
-                $('.m-tabs-stage>div').hide();
-                $($(this).attr('href')).show();
-            });
-            }
-        }
-        function nfttab () {
-            if(('.nft-tabs').length){
-                // Show the first tab by default
-            $('.nft-tabs-stage>div').hide();
-            $('.nft-tabs-stage>div:first').show();
-            $('.nft-tabs-nav li:first').addClass('nft-tab-active');
-
-            // Change tab class and display content
-            $('.nft-tabs-nav a').on('click', function(event){
-                event.preventDefault();
-                $('.nft-tabs-nav li').removeClass('nft-tab-active');
-                $(this).parent().addClass('nft-tab-active');
-                $('.nft-tabs-stage>div').hide();
-                $($(this).attr('href')).show();
-            });
-            }
-        }
-        tab1();
-        tab2();
-        tab3();
-        nfttab();
-    </script>
-  </body>
-</html>
+
+    {{ partial "LP_components/Footer.html" . }}
+
+  </div>
+
+  {{ partial "scripts.html" . }}
+  <script>
+    function tab1() {
+      if (('.v-tabs').length) {
+        // Show the first tab by default
+        $('.v-tabs-stage>div').hide();
+        $('.v-tabs-stage>div:first').show();
+        $('.v-tabs-nav li:first').addClass('v-tab-active');
+
+        // Change tab class and display content
+        $('.v-tabs-nav a').on('click', function (event) {
+          event.preventDefault();
+          $('.v-tabs-nav li').removeClass('v-tab-active');
+          $(this).parent().addClass('v-tab-active');
+          $('.v-tabs-stage>div').hide();
+          $($(this).attr('href')).show();
+        });
+      }
+    }
+    function tab2() {
+      if (('.d-tabs').length) {
+        // Show the first tab by default
+        $('.d-tabs-stage>div').hide();
+        $('.d-tabs-stage>div:first').show();
+        $('.d-tabs-nav li:first').addClass('d-tab-active');
+
+        // Change tab class and display content
+        $('.d-tabs-nav a').on('click', function (event) {
+          event.preventDefault();
+          $('.d-tabs-nav li').removeClass('d-tab-active');
+          $(this).parent().addClass('d-tab-active');
+          $('.d-tabs-stage>div').hide();
+          $($(this).attr('href')).show();
+        });
+      }
+    }
+    function tab3() {
+      if (('.m-tabs').length) {
+        // Show the first tab by default
+        $('.m-tabs-stage>div').hide();
+        $('.m-tabs-stage>div:first').show();
+        $('.m-tabs-nav li:first').addClass('m-tab-active');
+
+        // Change tab class and display content
+        $('.m-tabs-nav a').on('click', function (event) {
+          event.preventDefault();
+          $('.m-tabs-nav li').removeClass('m-tab-active');
+          $(this).parent().addClass('m-tab-active');
+          $('.m-tabs-stage>div').hide();
+          $($(this).attr('href')).show();
+        });
+      }
+    }
+    function nfttab() {
+      if (('.nft-tabs').length) {
+        // Show the first tab by default
+        $('.nft-tabs-stage>div').hide();
+        $('.nft-tabs-stage>div:first').show();
+        $('.nft-tabs-nav li:first').addClass('nft-tab-active');
+
+        // Change tab class and display content
+        $('.nft-tabs-nav a').on('click', function (event) {
+          event.preventDefault();
+          $('.nft-tabs-nav li').removeClass('nft-tab-active');
+          $(this).parent().addClass('nft-tab-active');
+          $('.nft-tabs-stage>div').hide();
+          $($(this).attr('href')).show();
+        });
+      }
+    }
+    tab1();
+    tab2();
+    tab3();
+    nfttab();
+  </script>
+</body>
+
+</html>

+ 2 - 0
layouts/index.html

@@ -117,6 +117,8 @@
       observer: true,
       observeParents: true,
       parallax: true,
+      slidesPerView: 1,
+      slidesPerGroup: 1,
     });
   </script>
   <!-- 進度條 -->

+ 21 - 28
layouts/partials/components/carousel.html

@@ -1,33 +1,26 @@
-<div class="swiper carousel">
-  <div class="swiper-wrapper">
-    <div class="swiper-slide">
-      <a target="_blank" href="https://www.youtube.com/playlist?list=PLjrAuyEb2pOxbUSBPLDxjh71RmjEtir_6">
-        <div class="wrapper">
-          <img src="/imgs/home/banner-01.jpg" alt="choozmo|AI主播|AI|警察廣播電臺|警廣|警廣路況|警廣線上收聽|人工智慧|AI人工智慧|人工智能|AI雙主播|雙主播|虛擬主播|虛擬人|新聞播報">
-          <div class="video-wrapper">
-            <iframe src="https://www.youtube.com/embed/HgrjL8pTpUY?autoplay=1&mute=1" title="choozmo|警察廣播電臺" frameborder="0" allow="autoplay;" allowfullscreen></iframe>
+<div class="my-4 carousel-wrapper">
+  <div class="swiper carousel">
+    <div class="swiper-wrapper">
+      <div class="swiper-slide">
+        <a target="_blank" href="https://www.youtube.com/playlist?list=PLjrAuyEb2pOxbUSBPLDxjh71RmjEtir_6">
+          <div class="wrapper">
+            <img src="/imgs/home/banner-01.jpg"
+              alt="choozmo|AI主播|AI|警察廣播電臺|警廣|警廣路況|警廣線上收聽|人工智慧|AI人工智慧|人工智能|AI雙主播|雙主播|虛擬主播|虛擬人|新聞播報">
+            <div class="video-wrapper">
+              <iframe src="https://www.youtube.com/embed/HgrjL8pTpUY?autoplay=1&mute=1" title="choozmo|警察廣播電臺"
+                frameborder="0" allow="autoplay;" allowfullscreen></iframe>
+            </div>
           </div>
-        </div>
-      </a>
+        </a>
+      </div>
+      <div class="swiper-slide">
+        <a target="_blank" href="">
+          <img src="/imgs/home/banner-02.jpg"
+            alt="Turnkey Solution|Virtual Production Studio|AI Spokesperson|choozmo|AI主播|AI|AI建模|虛擬主播|人工智慧|客製化主播|最新服務|英文AI主播|AI 虛擬主播|生成式 AI技術|Facelandmark|deeplearning">
+          <!-- <img src="/imgs/home/banner01_mb.webp" alt="Choozmo in 2023CES" class="d-block d-md-none p-4"> -->
+        </a>
+      </div>
     </div>
-    <div class="swiper-slide">
-      <a target="_blank" href="">
-        <img src="/imgs/home/banner-02.jpg" alt="Turnkey Solution|Virtual Production Studio|AI Spokesperson|choozmo|AI主播|AI|AI建模|虛擬主播|人工智慧|客製化主播|最新服務|英文AI主播|AI 虛擬主播|生成式 AI技術|Facelandmark|deeplearning">
-        <!-- <img src="/imgs/home/banner01_mb.webp" alt="Choozmo in 2023CES" class="d-block d-md-none p-4"> -->
-      </a>
-    </div>
-    <!-- <div class="swiper-slide">
-      <a href="/seo-image/dm/">
-        <img src="/imgs/home/banner02.webp" alt="形象SEO搶救負評大作戰" class="d-none d-md-block">
-        <img src="/imgs/home/banner02_mb.webp" alt="形象SEO搶救負評大作戰" class="d-block d-md-none p-4">
-      </a>
-    </div>
-    <div class="swiper-slide">
-      <a href="/ai-anchor/dm/">
-        <img src="/imgs/home/banner03.webp" alt="高畫質AI主播" class="d-none d-md-block">
-        <img src="/imgs/home/banner03_mb.webp" alt="高畫質AI主播" class="d-block d-md-none p-4">
-      </a>
-    </div> -->
   </div>
   <div class="swiper-button-next d-none d-md-block"></div>
   <div class="swiper-button-prev d-none d-md-block"></div>

+ 1 - 1
layouts/partials/components/main.html

@@ -1,4 +1,4 @@
-<div class="mt-5" id="main">
+<div id="main">
   <div class="content" id="info">
     <section>
       <img src="https://i.imgur.com/P1gNopa.png" alt="" class="logo mb-3">

+ 25 - 33
static/css/style.css

@@ -490,51 +490,33 @@
   height: auto;
 }
 #home .swiper {
-  overflow: initial;
+  width: 100%;
+  height: 100%;
 }
-#home .swiper .swiper-pagination-bullet {
+#home .swiper-pagination-bullet {
   width: 13px;
   height: 13px;
   margin: 0 13px;
 }
 @media (max-width: 991px) {
-  #home .swiper .swiper-pagination-bullet {
+  #home .swiper-pagination-bullet {
     width: 10px;
     height: 10px;
     margin: 0 10px;
   }
 }
-#home .swiper .swiper-pagination-bullet-active {
+#home .swiper-pagination-bullet-active {
   background-color: #000 !important;
 }
-#home .swiper .swiper-button-next::after, #home .swiper .swiper-button-next::before,
-#home .swiper .swiper-button-prev::after,
-#home .swiper .swiper-button-prev::before {
-  content: "";
-  display: block;
-  width: 30px;
-  height: 3px;
-  background-color: #fff;
-  position: absolute;
-  left: 50%;
-  transform: translate(-50%, -50%) rotate(45deg);
-  box-shadow: 2px 2px 5px #333;
-}
-#home .swiper .swiper-button-prev::after {
-  top: 40px;
-  transform: translate(-50%, -50%) rotate(45deg);
-}
-#home .swiper .swiper-button-prev::before {
-  top: 20px;
-  transform: translate(-50%, -50%) rotate(-45deg);
+#home .swiper-button-next {
+  right: -50px;
 }
-#home .swiper .swiper-button-next::after {
-  top: 40px;
-  transform: translate(-50%, -50%) rotate(-45deg);
+#home .swiper-button-prev {
+  left: -50px;
 }
-#home .swiper .swiper-button-next::before {
-  top: 20px;
-  transform: translate(-50%, -50%) rotate(45deg);
+#home .swiper-button-next,
+#home .swiper-button-prev {
+  color: #6c6d70;
 }
 #home #main {
   overflow: hidden;
@@ -4038,13 +4020,23 @@
 
 /* aboutus End */
 /* carousel Start */
-.carousel .wrapper {
+.carousel-wrapper {
+  max-width: 70vw;
+  margin: auto;
+  position: relative;
+}
+@media (max-width: 767px) {
+  .carousel-wrapper {
+    max-width: 100vw;
+  }
+}
+.carousel-wrapper .carousel .wrapper {
   position: relative;
   background-image: url("/imgs/home/banner-01.jpg");
   background-size: cover;
   background-repeat: no-repeat;
 }
-.carousel .wrapper .video-wrapper {
+.carousel-wrapper .carousel .wrapper .video-wrapper {
   position: absolute;
   padding-bottom: 20%;
   padding-top: 25px;
@@ -4053,7 +4045,7 @@
   top: 42%;
   left: 13%;
 }
-.carousel .wrapper .video-wrapper iframe {
+.carousel-wrapper .carousel .wrapper .video-wrapper iframe {
   position: absolute;
   top: 0;
   left: 0;

Những thai đổi đã bị hủy bỏ vì nó quá lớn
+ 0 - 0
static/css/style.css.map


+ 125 - 69
static/css/style.scss

@@ -531,19 +531,21 @@
   }
 
   .swiper {
-    overflow: initial;
+    width: 100%;
+    height: 100%;
+    // overflow: initial;
 
-    .swiper-pagination-bullet {
-      width: 13px;
-      height: 13px;
-      margin: 0 13px;
+    // .swiper-pagination-bullet {
+    //   width: 13px;
+    //   height: 13px;
+    //   margin: 0 13px;
 
-      @media (max-width: 991px) {
-        width: 10px;
-        height: 10px;
-        margin: 0 10px;
-      }
-    }
+    //   @media (max-width: 991px) {
+    //     width: 10px;
+    //     height: 10px;
+    //     margin: 0 10px;
+    //   }
+    // }
 
     // .swiper-pagination {
     //   bottom: -10px;
@@ -553,52 +555,94 @@
     //   }
     // }
 
-    .swiper-pagination-bullet-active {
-      background-color: #000 !important;
-    }
+    // .swiper-pagination-bullet-active {
+    //   background-color: #000 !important;
+    // }
 
-    .swiper-button-next,
-    .swiper-button-prev {
+    // .swiper-button-next {
+    //   right: -50px;
+    // }
 
-      &::after,
-      &::before {
-        content: "";
-        display: block;
-        width: 30px;
-        height: 3px;
-        background-color: #fff;
-        position: absolute;
-        left: 50%;
-        transform: translate(-50%, -50%) rotate(45deg);
-        box-shadow: 2px 2px 5px #333;
-      }
-    }
+    // .swiper-button-prev {
+    //   left: -50px;
+    // }
 
-    .swiper-button-prev {
-      &::after {
-        top: 40px;
-        transform: translate(-50%, -50%) rotate(45deg);
-      }
+    // .swiper-button-next,
+    // .swiper-button-prev {
+    //   color: #6c6d70;
+    // }
 
-      &::before {
-        top: 20px;
-        transform: translate(-50%, -50%) rotate(-45deg);
-      }
-    }
+    // .swiper-button-next,
+    // .swiper-button-prev {
+
+    //   &::after,
+    //   &::before {
+    //     content: "";
+    //     display: block;
+    //     width: 30px;
+    //     height: 3px;
+    //     background-color: #fff;
+    //     position: absolute;
+    //     left: 50%;
+    //     transform: translate(-50%, -50%) rotate(45deg);
+    //     box-shadow: 2px 2px 5px #333;
+    //   }
+    // }
 
-    .swiper-button-next {
-      &::after {
-        top: 40px;
-        transform: translate(-50%, -50%) rotate(-45deg);
-      }
+    // .swiper-button-prev {
+    //   &::after {
+    //     top: 40px;
+    //     transform: translate(-50%, -50%) rotate(45deg);
+    //   }
 
-      &::before {
-        top: 20px;
-        transform: translate(-50%, -50%) rotate(45deg);
-      }
+    //   &::before {
+    //     top: 20px;
+    //     transform: translate(-50%, -50%) rotate(-45deg);
+    //   }
+    // }
+
+    // .swiper-button-next {
+    //   &::after {
+    //     top: 40px;
+    //     transform: translate(-50%, -50%) rotate(-45deg);
+    //   }
+
+    //   &::before {
+    //     top: 20px;
+    //     transform: translate(-50%, -50%) rotate(45deg);
+    //   }
+    // }
+  }
+
+  .swiper-pagination-bullet {
+    width: 13px;
+    height: 13px;
+    margin: 0 13px;
+
+    @media (max-width: 991px) {
+      width: 10px;
+      height: 10px;
+      margin: 0 10px;
     }
   }
 
+  .swiper-pagination-bullet-active {
+    background-color: #000 !important;
+  }
+
+  .swiper-button-next {
+    right: -50px;
+  }
+
+  .swiper-button-prev {
+    left: -50px;
+  }
+
+  .swiper-button-next,
+  .swiper-button-prev {
+    color: #6c6d70;
+  }
+
   #main {
     overflow: hidden;
 
@@ -4291,32 +4335,42 @@
 
 /* carousel Start */
 
-.carousel {
-  .wrapper {
-    position: relative;
-    background-image: url("/imgs/home/banner-01.jpg");
-    background-size: cover;
-    background-repeat: no-repeat;
+.carousel-wrapper {
+  max-width: 70vw;
+  margin: auto;
+  position: relative;
 
-    .video-wrapper {
-      position: absolute;
-      padding-bottom: 20%;
-      padding-top: 25px;
-      height: 0;
-      width: 39%;
-      top: 42%;
-      left: 13%;
-
-      iframe {
+  @media (max-width: 767px) {
+    max-width: 100vw;
+  }
+
+  .carousel {
+    .wrapper {
+      position: relative;
+      background-image: url("/imgs/home/banner-01.jpg");
+      background-size: cover;
+      background-repeat: no-repeat;
+
+      .video-wrapper {
         position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
+        padding-bottom: 20%;
+        padding-top: 25px;
+        height: 0;
+        width: 39%;
+        top: 42%;
+        left: 13%;
+
+        iframe {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+        }
       }
     }
-  }
 
+  }
 }
 
 /* carousel End */
@@ -4330,9 +4384,11 @@
     padding: 0;
     list-style: none;
     display: flex;
+
     li {
       margin-right: 20px;
     }
+
     button {
       padding: 5px 30px;
       border: 1px solid #ea5413;

Một số tệp đã không được hiển thị bởi vì quá nhiều tập tin thay đổi trong này khác