feat: implement livestream post functionality and update site theme assets

sisvietnamvn_main/html_snippets/content_main_blocks/livestream-template.html

@@ -0,0 +1,72 @@
+<div class="cc--component-container cc--tabbed-media-content" style="background-color: var(--color-gray-100);">
+  <div class="c--component c--tabbed-media-content">
+    <div class="tabbed-media-content-text-col">
+      <div data-component-id="umass_base:section-title" class="f--section-title">
+        <h2 style="color: var(--color-brand);">LiveStream</h2>
+      </div>
+      <div data-component-id="umass_base:tabbed-container" data-once="tabbed-container">
+        <div class="tab-labels-container" role="tablist">
+          <div class="tab-labels-inner">
+            {{#each livestream_posts}}
+            <a href="#tabbed-content-{{index}}" class="tab-label link-context-dark" role="tab" aria-selected="false" aria-controls="tabbed-content-{{index}}">{{title}}</a>
+            {{/each}}
+          </div>
+        </div>
+        <div class="tab-content-container">
+          {{#each livestream_posts}}
+          <div class="tab-content-panel" id="tabbed-content-{{index}}" role="tabpanel" aria-live="polite">
+            <div class="f--field f--cta-title">
+              <h2 style="color: var(--color-black);"> {{excerpt}} </h2>
+            </div>
+            <div data-component-id="umass_base:description" class="f--description">
+              <div style="color:var(--color-black);">{{content}}</div>
+            </div>
+            <div class="cta-container">
+              <div class="f--field f--button">
+                <a href="{{slug}}" class="button-primary button-context-light " aria-label="Tìm Hiểu Thêm" data-component-id="umass_base:button">
+                  <span class="button-text"> Tìm Hiểu Thêm </span>
+                </a>
+              </div>
+            </div>
+          </div>
+          {{/each}}
+        </div>
+      </div>
+    </div>
+    <div class="tabbed-media-content-media-col">
+      {{#each livestream_posts}}
+      <div class="tabbed-media-content-media-item with-video" data-tab-id="tabbed-content-{{index}}">
+        <div class="f--field f--image">
+          <img src="{{featuredImageUrl}}" data-src="{{featuredImageUrl}}" class="lazyload" alt="{{title}}">
+        </div>
+        <div class="f--field f--button">
+          <a href="#" class="button-play button-context-light " aria-label="Play video" data-component-id="umass_base:button">
+            <span class="button-icon button-icon-play">
+              <svg width="18" height="27" viewBox="0 0 18 27" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                <path d="M18 13.5L0 0V27L18 13.5Z"></path>
+              </svg>
+            </span>
+            <span class="button-text visually-hidden"> Play </span>
+          </a>
+        </div>
+        <div data-component-id="umass_base:video-embed" class="f--field f--video-embed">
+          <iframe title="Video Content" width="900" height="1600" src="{{metaDescription}}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
+        </div>
+      </div>
+      {{/each}}
+    </div>
+  </div>
+</div>
+<script>
+  document.addEventListener("DOMContentLoaded", function() {
+    // Set the first tab and panel as active if they exist
+    var tabs = document.querySelectorAll('.tabbed-media-content-media-item[data-tab-id="tabbed-content-0"]');
+    if(tabs.length > 0) tabs[0].classList.add('is-active');
+    
+    var panels = document.querySelectorAll('#tabbed-content-0.tab-content-panel');
+    if(panels.length > 0) panels[0].classList.add('is-active');
+
+    var labels = document.querySelectorAll('a.tab-label[aria-controls="tabbed-content-0"]');
+    if(labels.length > 0) labels[0].setAttribute('aria-selected', 'true');
+  });
+</script>