package: remove unecessary packages

sidebar: turn into component

views/aboutPages/aboutMain.html

@@ -25,62 +25,8 @@
     <!-- Header Component -->
     <div id="header"></div>
 
-    <!-- Floating Menu Button -->
+    <!-- Sidebar Component -->
-    <button class="floating-menu-btn" id="floatingMenuBtn">
+    <div id="sidebar-container"></div>
-      <i class="bi bi-list"></i>
-    </button>
-
-    <!-- Sidebar Overlay -->
-    <div class="sidebar-overlay" id="sidebarOverlay"></div>
-
-    <!-- Sidebar -->
-    <div class="sidebar" id="sidebar">
-      <div class="sidebar-header">
-        <img
-          src="https://ik.imagekit.io/1e8470bv5/companyLogo.webp?updatedAt=1754143468028"
-          alt="Ky Long Logo"
-          class="sidebar-logo"
-        />
-        <button class="close-sidebar">
-          <i class="bi bi-x-lg"></i>
-        </button>
-      </div>
-
-      <nav class="sidebar-nav">
-        <a href="/" class="nav-link">TRANG CHỦ</a>
-        <a href="/aboutMain" class="nav-link">GIỚI THIỆU</a>
-        <a href="/productMain" class="nav-link">SẢN PHẨM</a>
-        <a href="/serviceMain" class="nav-link">DỊCH VỤ</a>
-        <a href="/newsMain" class="nav-link">TIN TỨC</a>
-        <a href="/contactMain" class="nav-link">LIÊN HỆ</a>
-      </nav>
-
-      <div class="sidebar-contact">
-        <div class="d-flex align-items-center mb-3">
-          <div
-            class="contact-icon2 d-flex align-items-center justify-content-center me-2"
-          >
-            <i class="bi bi-geo-alt-fill"></i>
-          </div>
-          <div>
-            <div>Lầu 12, số 27 Đinh Bộ Lĩnh,</div>
-            <div>P. Bình Thạnh, TP.Hồ Chí Minh</div>
-          </div>
-        </div>
-
-        <div class="d-flex align-items-center">
-          <div
-            class="contact-icon d-flex align-items-center justify-content-center me-2"
-          >
-            <i class="bi bi-envelope-open-fill"></i>
-          </div>
-          <div>
-            <div>Email:</div>
-            <div>info@kylongtech.com</div>
-          </div>
-        </div>
-      </div>
-    </div>
 
     <!-- Main Content -->
     <div class="hero">
@@ -308,6 +254,7 @@
 
     <!-- Scripts -->
     <script src="/components/header/headerLoader.js"></script>
+    <script src="/components/sidebar/sidebarLoader.js"></script>
     <script src="aboutPages/aboutMain.js?v=1.2"></script>
     <script src="/components/footer/footerLoader.js"></script>
   </body>

views/components/header/header.css

@@ -144,7 +144,8 @@
   margin: 0 15px; /* space around separator */
 
   /* stacked dots */
-  box-shadow: 0 6px 0 rgba(255, 255, 255, 0.6),
+  box-shadow:
+    0 6px 0 rgba(255, 255, 255, 0.6),
     0 -6px 0 rgba(255, 255, 255, 0.6);
 }
 
@@ -328,7 +329,7 @@
     flex-grow: 1;
   }
 
-  .contact-section {
+  .header-contact-section {
     display: none; /* Hide contact info on mobile - it will be in sidebar */
   }
 

views/components/header/header.html

@@ -55,7 +55,7 @@
           </div>
 
           <!-- Contact Info - Horizontal Layout -->
-          <div class="col-lg-6 col-md-6 col-12 contact-section">
+          <div class="col-lg-6 col-md-6 col-12 header-contact-section">
             <div class="row g-3">
               <!-- Address -->
               <div class="col-md-6 col-12">

views/components/sidebar/sidebar.css

@@ -0,0 +1,128 @@
+/* views/components/sidebar/sidebar.css */
+/* Floating Menu Button Styles */
+.floating-menu-btn {
+  display: none;
+  position: fixed;
+  bottom: 25px;
+  right: 25px;
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  background-color: #e84e0f;
+  color: white;
+  border: none;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+  z-index: 1030;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+}
+
+.floating-menu-btn:hover {
+  background-color: #c93d0a;
+  transform: scale(1.05);
+}
+
+.floating-menu-btn i {
+  font-size: 1.8rem;
+}
+
+/* Sidebar Overlay */
+.sidebar-overlay {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 1040;
+}
+
+.sidebar-overlay.show {
+  display: block;
+}
+
+/* Sidebar Styles */
+.sidebar {
+  position: fixed;
+  top: 0;
+  left: -300px;
+  width: 300px;
+  height: 100%;
+  background-color: #30875f;
+  z-index: 1050;
+  overflow-y: auto;
+  transition: left 0.3s ease;
+  padding: 20px;
+  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
+}
+
+.sidebar.open {
+  left: 0;
+}
+
+.sidebar-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  padding-bottom: 15px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.sidebar-logo {
+  width: 60px;
+  height: auto;
+}
+
+.close-sidebar {
+  background: none;
+  border: none;
+  color: white;
+  font-size: 1.5rem;
+  cursor: pointer;
+}
+
+.sidebar-nav {
+  display: flex;
+  flex-direction: column;
+}
+
+.sidebar-nav .nav-link {
+  padding: 15px 10px !important;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  color: white !important;
+  text-decoration: none;
+}
+
+.sidebar-contact {
+  margin-top: 20px;
+  color: white;
+  font-size: 0.9rem;
+}
+
+.sidebar-contact div {
+  margin-bottom: 10px;
+}
+
+/* Media Queries for Sidebar */
+@media (max-width: 768px) {
+  .floating-menu-btn {
+    display: flex;
+  }
+}
+
+@media (max-width: 576px) {
+  .sidebar {
+    width: 250px;
+  }
+
+  .floating-menu-btn {
+    width: 50px;
+    height: 50px;
+    bottom: 20px;
+    right: 20px;
+  }
+}

views/components/sidebar/sidebar.html

@@ -0,0 +1,56 @@
+<!-- Floating Menu Button -->
+<button class="floating-menu-btn" id="floatingMenuBtn">
+  <i class="bi bi-list"></i>
+</button>
+
+<!-- Sidebar Overlay -->
+<div class="sidebar-overlay" id="sidebarOverlay"></div>
+
+<!-- Sidebar -->
+<div class="sidebar" id="sidebar">
+  <div class="sidebar-header">
+    <img
+      src="https://ik.imagekit.io/1e8470bv5/companyLogo.webp?updatedAt=1754143468028"
+      alt="Ky Long Logo"
+      class="sidebar-logo"
+    />
+    <button class="close-sidebar">
+      <i class="bi bi-x-lg"></i>
+    </button>
+  </div>
+
+  <nav class="sidebar-nav">
+    <a href="/" class="nav-link">TRANG CHỦ</a>
+    <a href="/aboutMain" class="nav-link">GIỚI THIỆU</a>
+    <a href="/productMain" class="nav-link">SẢN PHẨM</a>
+    <a href="/serviceMain" class="nav-link">DỊCH VỤ</a>
+    <a href="/newsMain" class="nav-link">TIN TỨC</a>
+    <a href="/contactMain" class="nav-link">LIÊN HỆ</a>
+  </nav>
+
+  <div class="sidebar-contact">
+    <div class="d-flex align-items-center mb-3">
+      <div
+        class="contact-icon2 d-flex align-items-center justify-content-center me-2"
+      >
+        <i class="bi bi-geo-alt-fill"></i>
+      </div>
+      <div>
+        <div>Lầu 12, số 27 Đinh Bộ Lĩnh,</div>
+        <div>P. Bình Thạnh, TP.Hồ Chí Minh</div>
+      </div>
+    </div>
+
+    <div class="d-flex align-items-center">
+      <div
+        class="contact-icon d-flex align-items-center justify-content-center me-2"
+      >
+        <i class="bi bi-envelope-open-fill"></i>
+      </div>
+      <div>
+        <div>Email:</div>
+        <div>info@kylongtech.com</div>
+      </div>
+    </div>
+  </div>
+</div>

views/components/sidebar/sidebar.js

@@ -0,0 +1,73 @@
+// views/components/sidebar/sidebar.js
+// NOTE: This script is always loaded dynamically by sidebarLoader.js AFTER
+// the sidebar HTML has already been injected into #sidebar-container.
+// DOMContentLoaded has already fired at this point, so we must call
+// initSidebar() directly — NOT inside a DOMContentLoaded listener.
+
+function initSidebar() {
+  const floatingMenuBtn = document.getElementById("floatingMenuBtn");
+  const sidebarOverlay = document.getElementById("sidebarOverlay");
+  const sidebar = document.getElementById("sidebar");
+  const closeSidebarBtn = document.querySelector(".close-sidebar");
+
+  function openSidebar() {
+    if (sidebar && sidebarOverlay) {
+      sidebar.classList.add("open");
+      sidebarOverlay.style.display = "block";
+    }
+  }
+
+  function closeSidebar() {
+    if (sidebar && sidebarOverlay) {
+      sidebar.classList.remove("open");
+      sidebarOverlay.style.display = "none";
+    }
+  }
+
+  if (floatingMenuBtn) {
+    floatingMenuBtn.addEventListener("click", openSidebar);
+  }
+
+  if (closeSidebarBtn) {
+    closeSidebarBtn.addEventListener("click", closeSidebar);
+  }
+
+  if (sidebarOverlay) {
+    sidebarOverlay.addEventListener("click", closeSidebar);
+  }
+
+  // Close sidebar when clicking outside or on a link
+  document.addEventListener("click", (e) => {
+    if (sidebar && sidebar.classList.contains("open")) {
+      // Click outside sidebar and not on floating menu button
+      if (
+        !sidebar.contains(e.target) &&
+        !e.target.closest("#floatingMenuBtn")
+      ) {
+        closeSidebar();
+      }
+      // Click on a nav link
+      if (e.target.closest(".sidebar-nav .nav-link")) {
+        closeSidebar();
+      }
+    }
+  });
+
+  // Handle scroll behavior to hide/show floating menu button smoothly
+  let lastScrollY = window.scrollY;
+  window.addEventListener("scroll", () => {
+    if (window.innerWidth <= 768 && floatingMenuBtn) {
+      if (window.scrollY > lastScrollY && window.scrollY > 100) {
+        // Scrolling down
+        floatingMenuBtn.style.display = "none";
+      } else {
+        // Scrolling up
+        floatingMenuBtn.style.display = "flex";
+      }
+    }
+    lastScrollY = window.scrollY;
+  });
+}
+
+// Call directly — sidebar HTML is already in DOM when this script executes
+initSidebar();

views/components/sidebar/sidebarLoader.js

@@ -0,0 +1,24 @@
+// views/components/sidebar/sidebarLoader.js
+document.addEventListener("DOMContentLoaded", function () {
+  const sidebarContainer = document.getElementById("sidebar-container");
+  if (!sidebarContainer) return;
+
+  // Load HTML
+  fetch("/components/sidebar/sidebar.html")
+    .then((response) => response.text())
+    .then((data) => {
+      sidebarContainer.innerHTML = data;
+
+      // Load CSS
+      const link = document.createElement("link");
+      link.rel = "stylesheet";
+      link.href = "/components/sidebar/sidebar.css";
+      document.head.appendChild(link);
+
+      // Load JS
+      const script = document.createElement("script");
+      script.src = "/components/sidebar/sidebar.js";
+      document.body.appendChild(script);
+    })
+    .catch((error) => console.error("Error loading sidebar:", error));
+});

views/contactPages/contactMain.css

@@ -35,10 +35,7 @@ a:active {
 
 /* Contact Section */
 .contact-section {
-  padding: 60px 5%;
   background-color: #f9f9f9;
-  max-width: 1400px;
-  margin: 0 auto;
 }
 
 .page-intro {
@@ -60,19 +57,18 @@ a:active {
 }
 
 .contact-container {
-  display: flex;
-  gap: 40px;
   margin-top: 30px;
 }
 
 /* Enhanced Form Container */
 .contact-form {
-  flex: 1;
   background-color: white;
   padding: 35px;
   border-radius: 12px;
   box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
-  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  transition:
+    transform 0.3s ease,
+    box-shadow 0.3s ease;
   position: relative;
   overflow: hidden;
 }
@@ -303,7 +299,9 @@ a:active {
   border-radius: 50%;
   transform: scale(0);
   opacity: 0;
-  transition: transform 0.6s, opacity 0.6s;
+  transition:
+    transform 0.6s,
+    opacity 0.6s;
 }
 
 .submit-button:hover::after {
@@ -313,14 +311,17 @@ a:active {
 
 /* Contact Details Section */
 .contact-details {
-  flex: 1;
   background-color: white;
   padding: 35px;
   border-radius: 12px;
   box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
-  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  transition:
+    transform 0.3s ease,
+    box-shadow 0.3s ease;
   position: relative;
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
 }
 
 .contact-details::before {
@@ -380,7 +381,9 @@ a:active {
   color: #30875f;
   margin-right: 15px;
   margin-top: 3px;
-  transition: color 0.3s, transform 0.3s;
+  transition:
+    color 0.3s,
+    transform 0.3s;
 }
 
 .contact-item:hover i {
@@ -428,8 +431,18 @@ a:active {
   border-radius: 12px;
   overflow: hidden;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
-  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  transition:
+    transform 0.3s ease,
+    box-shadow 0.3s ease;
   position: relative;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+}
+.map-container iframe {
+  flex-grow: 1;
+  height: 100% !important;
+  min-height: 250px;
 }
 
 .map-container:hover {
@@ -488,7 +501,8 @@ a:active {
 /* Responsive Design */
 @media (max-width: 1200px) {
   .contact-section {
-    padding: 50px 4%;
+    padding-top: 50px;
+    padding-bottom: 50px;
   }
 
   .contact-form,
@@ -514,13 +528,8 @@ a:active {
 }
 
 @media (max-width: 768px) {
-  .contact-container {
-    flex-direction: column;
-  }
-
   .contact-form,
   .contact-details {
-    width: 100%;
     padding: 25px;
   }
 
@@ -557,7 +566,8 @@ a:active {
 
 @media (max-width: 576px) {
   .contact-section {
-    padding: 40px 15px;
+    padding-top: 40px;
+    padding-bottom: 40px;
   }
 
   .page-intro {

views/contactPages/contactMain.html

@@ -31,69 +31,16 @@
     <!-- Header Component -->
     <div id="header"></div>
 
-    <!-- Floating Menu Button -->
+    <!-- Sidebar Component -->
-    <button class="floating-menu-btn" id="floatingMenuBtn">
+    <div id="sidebar-container"></div>
-      <i class="bi bi-list"></i>
-    </button>
-
-    <!-- Sidebar Overlay -->
-    <div class="sidebar-overlay" id="sidebarOverlay"></div>
-
-    <!-- Sidebar -->
-    <div class="sidebar" id="sidebar">
-      <div class="sidebar-header">
-        <img
-          src="https://ik.imagekit.io/1e8470bv5/companyLogo.webp?updatedAt=1754143468028"
-          alt="Ky Long Logo"
-          class="sidebar-logo"
-        />
-        <button class="close-sidebar">
-          <i class="bi bi-x-lg"></i>
-        </button>
-      </div>
-
-      <nav class="sidebar-nav">
-        <a href="/" class="nav-link">TRANG CHỦ</a>
-        <a href="/aboutMain" class="nav-link">GIỚI THIỆU</a>
-        <a href="/productMain" class="nav-link">SẢN PHẨM</a>
-        <a href="/serviceMain" class="nav-link">DỊCH VỤ</a>
-        <a href="/newsMain" class="nav-link">TIN TỨC</a>
-        <a href="/contactMain" class="nav-link">LIÊN HỆ</a>
-      </nav>
-
-      <div class="sidebar-contact">
-        <div class="d-flex align-items-center mb-3">
-          <div
-            class="contact-icon2 d-flex align-items-center justify-content-center me-2"
-          >
-            <i class="bi bi-geo-alt-fill"></i>
-          </div>
-          <div>
-            <div>Lầu 12, số 27 Đinh Bộ Lĩnh,</div>
-            <div>P. Bình Thạnh, TP.Hồ Chí Minh</div>
-          </div>
-        </div>
-
-        <div class="d-flex align-items-center">
-          <div
-            class="contact-icon d-flex align-items-center justify-content-center me-2"
-          >
-            <i class="bi bi-envelope-open-fill"></i>
-          </div>
-          <div>
-            <div>Email:</div>
-            <div>info@kylongtech.com</div>
-          </div>
-        </div>
-      </div>
-    </div>
 
     <!----- CONTACT PAGE CONTENT ----->
-    <section class="contact-section">
+    <section class="contact-section container py-5 my-3 overflow-hidden">
       <h1 class="page-intro">LIÊN HỆ VỚI KỲ LONG</h1>
 
-      <div class="contact-container">
+      <div class="contact-container row g-4 g-lg-5">
-        <div class="contact-form">
+        <div class="col-12 col-md-6 mb-4 mb-md-0">
+          <div class="contact-form h-100">
             <h2>Gửi tin nhắn cho chúng tôi</h2>
 
             <!-- Optional: Progress bar to show form completion -->
@@ -158,10 +105,11 @@
             </form>
 
             <!-- Container for success/error messages -->
-          <div id="form-messages"></div>
+          </div>
         </div>
 
-        <div class="contact-details">
+        <div class="col-12 col-md-6">
+          <div class="contact-details h-100">
             <h2>Thông tin liên hệ</h2>
             <div class="contact-info">
               <div class="contact-item">
@@ -181,7 +129,7 @@
             <div class="map-container">
               <iframe
                 src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3919.0886950094214!2d106.70665347594756!3d10.804518689345947!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x317528bb7aef745f%3A0x9171c157a44f8c21!2zMjcgxJAuIMSQaW5oIELhu5kgTMSpbmgsIFBoxrDhu51uZyAxNCwgQsOsbmggVGjhuqFuaCwgSOG7kyBDaMOtIE1pbmgsIFZpZXRuYW0!5e0!3m2!1sen!2s!4v1757160111176!5m2!1sen!2s"
-              width="100%"
+                class="w-100"
                 height="300"
                 style="border: 0"
                 allowfullscreen=""
@@ -190,6 +138,7 @@
             </div>
           </div>
         </div>
+      </div>
     </section>
 
     <!-- Footer Component -->
@@ -197,6 +146,7 @@
 
     <!-- Scripts -->
     <script src="/components/header/headerLoader.js"></script>
+    <script src="/components/sidebar/sidebarLoader.js"></script>
     <script src="/components/footer/footerLoader.js"></script>
     <script src="contactPages/contactMain.js?v=1.1"></script>
   </body>

views/homePages/homeMain.html

@@ -25,62 +25,8 @@
     <!-- Header Component -->
     <div id="header"></div>
 
-    <!-- Floating Menu Button -->
+    <!-- Sidebar Component -->
-    <button class="floating-menu-btn" id="floatingMenuBtn">
+    <div id="sidebar-container"></div>
-      <i class="bi bi-list"></i>
-    </button>
-
-    <!-- Sidebar Overlay -->
-    <div class="sidebar-overlay" id="sidebarOverlay"></div>
-
-    <!-- Sidebar -->
-    <div class="sidebar" id="sidebar">
-      <div class="sidebar-header">
-        <img
-          src="https://ik.imagekit.io/1e8470bv5/companyLogo.webp?updatedAt=1754143468028"
-          alt="Ky Long Logo"
-          class="sidebar-logo"
-        />
-        <button class="close-sidebar">
-          <i class="bi bi-x-lg"></i>
-        </button>
-      </div>
-
-      <nav class="sidebar-nav">
-        <a href="/" class="nav-link">TRANG CHỦ</a>
-        <a href="/aboutMain" class="nav-link">GIỚI THIỆU</a>
-        <a href="/productMain" class="nav-link">SẢN PHẨM</a>
-        <a href="/serviceMain" class="nav-link">DỊCH VỤ</a>
-        <a href="/newsMain" class="nav-link">TIN TỨC</a>
-        <a href="/contactMain" class="nav-link">LIÊN HỆ</a>
-      </nav>
-
-      <div class="sidebar-contact">
-        <div class="d-flex align-items-center mb-3">
-          <div
-            class="contact-icon2 d-flex align-items-center justify-content-center me-2"
-          >
-            <i class="bi bi-geo-alt-fill"></i>
-          </div>
-          <div>
-            <div>Lầu 12, số 27 Đinh Bộ Lĩnh,</div>
-            <div>P. Bình Thạnh, TP.Hồ Chí Minh</div>
-          </div>
-        </div>
-
-        <div class="d-flex align-items-center">
-          <div
-            class="contact-icon d-flex align-items-center justify-content-center me-2"
-          >
-            <i class="bi bi-envelope-open-fill"></i>
-          </div>
-          <div>
-            <div>Email:</div>
-            <div>info@kylongtech.com</div>
-          </div>
-        </div>
-      </div>
-    </div>
 
     <!-- BANNER SECTION -->
     <div class="banner">
@@ -603,6 +549,7 @@
 
     <script src="homePages/homeMain.js?v=1.3"></script>
     <script src="/components/header/headerLoader.js"></script>
+    <script src="/components/sidebar/sidebarLoader.js"></script>
     <script src="/components/footer/footerLoader.js"></script>
   </body>
 </html>

views/newsPages/newsArticle1/newsArticle1.css

@@ -35,8 +35,6 @@ a:active {
 
 /* MAIN CONTENT - ARTICLE STYLING */
 article {
-  max-width: 800px;
-  margin: 40px auto;
   padding: 30px;
   background-color: #fff;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
@@ -93,7 +91,6 @@ article h3 + p {
   /* Article responsiveness */
   article {
     padding: 15px;
-    margin: 20px auto;
   }
 
   article h1 {

views/newsPages/newsArticle1/newsArticle1.html

@@ -25,8 +25,14 @@
     <!-- Header Component -->
     <div id="header"></div>
 
-    <article>
+    <!-- Sidebar Component -->
-      <h2>TỔNG QUAN VỀ DIỄN BIẾN GIÁ KHÍ LNG TRONG 5 NĂM QUA</h2>
+    <div id="sidebar-container"></div>
+
+    <div class="container my-4 my-md-5 overflow-hidden">
+      <div class="row justify-content-center">
+        <div class="col-12 col-md-10 col-lg-8">
+          <article class="w-100 shadow-sm rounded-3 bg-white">
+      <h1>TỔNG QUAN VỀ DIỄN BIẾN GIÁ KHÍ LNG TRONG 5 NĂM QUA</h1>
       <p>
         Trong những năm gần đây, diễn biến giá khí LNG trong 5 năm qua đã có
         những thay đổi đáng kể. Các yếu tố từ cung cầu toàn cầu đến tình hình
@@ -488,11 +494,14 @@
         lượng mạnh mẽ và bền vững hơn trong những năm tới.
       </p>
           </article>
-
+        </div>
+      </div>
+    </div>
     <!-- Footer Component -->
     <div id="footer"></div>
 
     <script src="components/header/headerLoader.js"></script>
+    <script src="/components/sidebar/sidebarLoader.js"></script>
     <script src="/components/footer/footerLoader.js"></script>
     <script src="newsPages/newsArticle1/newsArticle1.js?v=1.0"></script>
   </body>

views/newsPages/newsArticle2/newsArticle2.css

@@ -35,8 +35,6 @@ a:active {
 
 /* MAIN CONTENT - ARTICLE STYLING */
 article {
-  max-width: 800px;
-  margin: 40px auto;
   padding: 30px;
   background-color: #fff;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
@@ -93,7 +91,6 @@ article h3 + p {
   /* Article responsiveness */
   article {
     padding: 15px;
-    margin: 20px auto;
   }
 
   article h1 {

views/newsPages/newsArticle2/newsArticle2.html

@@ -25,134 +25,147 @@
     <!-- Header Component -->
     <div id="header"></div>
 
-    <article>
+    <!-- Sidebar Component -->
+    <div id="sidebar-container"></div>
+
+    <div class="container my-4 my-md-5 overflow-hidden">
+      <div class="row justify-content-center">
+        <div class="col-12 col-md-10 col-lg-8">
+          <article class="w-100 shadow-sm rounded-3 bg-white">
             <h1>Khí đốt tự nhiên được khai thác từ đâu? Cùng tìm hiểu</h1>
             <p>
-        Trong bối cảnh nhu cầu năng lượng toàn cầu ngày càng tăng, khí đốt tự
+              Trong bối cảnh nhu cầu năng lượng toàn cầu ngày càng tăng, khí đốt
-        nhiên đã trở thành một trong những nguồn nhiên liệu quan trọng, góp phần
+              tự nhiên đã trở thành một trong những nguồn nhiên liệu quan trọng,
-        đáp ứng nhu cầu điện, nhiệt và nguyên liệu cho nhiều ngành công nghiệp.
+              góp phần đáp ứng nhu cầu điện, nhiệt và nguyên liệu cho nhiều
-        Nhưng bạn có bao giờ thắc mắc: Khí đốt tự nhiên được khai thác từ đâu?
+              ngành công nghiệp. Nhưng bạn có bao giờ thắc mắc: Khí đốt tự nhiên
-        Hành trình từ lòng đất sâu thẳm đến ngôi nhà và nhà máy của chúng ta
+              được khai thác từ đâu? Hành trình từ lòng đất sâu thẳm đến ngôi
-        diễn ra như thế nào? Hãy cùng Kỳ Long khám phá nguồn gốc, quá trình khai
+              nhà và nhà máy của chúng ta diễn ra như thế nào? Hãy cùng Kỳ Long
-        thác và vai trò của nguồn tài nguyên quý giá này trong đời sống con
+              khám phá nguồn gốc, quá trình khai thác và vai trò của nguồn tài
-        người.
+              nguyên quý giá này trong đời sống con người.
             </p>
 
             <h2>Dầu mỏ là gì? Khí thiên nhiên là gì?</h2>
             <p>
-        <strong>Dầu mỏ</strong> là chất lỏng tự nhiên hình thành từ quá trình
+              <strong>Dầu mỏ</strong> là chất lỏng tự nhiên hình thành từ quá
-        phân hủy sinh vật cổ đại dưới áp suất và nhiệt độ cao trong lòng đất
+              trình phân hủy sinh vật cổ đại dưới áp suất và nhiệt độ cao trong
-        trải qua hàng triệu năm. Loại "vàng đen" này được khai thác từ các tầng
+              lòng đất trải qua hàng triệu năm. Loại "vàng đen" này được khai
-        địa chất sâu và trải qua quá trình tinh chế để tạo thành nhiều sản phẩm
+              thác từ các tầng địa chất sâu và trải qua quá trình tinh chế để
-        năng lượng thiết yếu như xăng, dầu diesel và dầu nhờn. Ngoài vai trò là
+              tạo thành nhiều sản phẩm năng lượng thiết yếu như xăng, dầu diesel
-        nguồn nhiên liệu chính cho các phương tiện giao thông, dầu mỏ còn là
+              và dầu nhờn. Ngoài vai trò là nguồn nhiên liệu chính cho các
-        nguyên liệu đầu vào quan trọng trong sản xuất nhựa, dược phẩm và nhiều
+              phương tiện giao thông, dầu mỏ còn là nguyên liệu đầu vào quan
-        sản phẩm công nghiệp khác.
+              trọng trong sản xuất nhựa, dược phẩm và nhiều sản phẩm công nghiệp
+              khác.
             </p>
 
             <p>
-        <strong>Khí thiên nhiên</strong> là hỗn hợp khí hydrocarbon với thành
+              <strong>Khí thiên nhiên</strong> là hỗn hợp khí hydrocarbon với
-        phần chủ yếu là methane (CH4), hình thành cùng quá trình địa chất với
+              thành phần chủ yếu là methane (CH4), hình thành cùng quá trình địa
-        dầu mỏ. Được khai thác từ các mỏ khí dưới lòng đất hoặc đáy biển, khí
+              chất với dầu mỏ. Được khai thác từ các mỏ khí dưới lòng đất hoặc
-        thiên nhiên được coi là nguồn nhiên liệu hóa thạch sạch nhất với lượng
+              đáy biển, khí thiên nhiên được coi là nguồn nhiên liệu hóa thạch
-        phát thải carbon thấp hơn so với dầu mỏ và than đá. Khí thiên nhiên được
+              sạch nhất với lượng phát thải carbon thấp hơn so với dầu mỏ và
-        sử dụng rộng rãi làm nhiên liệu đốt trong các nhà máy điện, hệ thống
+              than đá. Khí thiên nhiên được sử dụng rộng rãi làm nhiên liệu đốt
-        sưởi ấm, nấu nướng trong hộ gia đình, và là nguyên liệu quan trọng trong
+              trong các nhà máy điện, hệ thống sưởi ấm, nấu nướng trong hộ gia
-        sản xuất phân bón, nhựa và nhiều hóa chất công nghiệp.
+              đình, và là nguyên liệu quan trọng trong sản xuất phân bón, nhựa
+              và nhiều hóa chất công nghiệp.
             </p>
 
             <p>
-        Cả hai nguồn tài nguyên này đều đóng vai trò then chốt trong nền kinh tế
+              Cả hai nguồn tài nguyên này đều đóng vai trò then chốt trong nền
-        toàn cầu, tuy nhiên việc khai thác và sử dụng chúng cần được cân nhắc
+              kinh tế toàn cầu, tuy nhiên việc khai thác và sử dụng chúng cần
-        trong bối cảnh biến đổi khí hậu và phát triển bền vững.
+              được cân nhắc trong bối cảnh biến đổi khí hậu và phát triển bền
+              vững.
             </p>
 
             <img
               src="https://i.imgur.com/0MGOlmy.png"
               alt="Dầu mỏ tự nhiên"
-        width="100%"
+              class="img-fluid w-100 rounded mb-2"
             />
             <p class="image-caption">Dầu mỏ tự nhiên</p>
 
             <h2>Khu vực khai thác khí thiên nhiên tại Việt Nam</h2>
             <p>
-        Việt Nam sở hữu nguồn tài nguyên khí thiên nhiên phong phú phân bố trên
+              Việt Nam sở hữu nguồn tài nguyên khí thiên nhiên phong phú phân bố
-        cả ba miền đất nước, mỗi khu vực đều mang những đặc điểm địa chất và giá
+              trên cả ba miền đất nước, mỗi khu vực đều mang những đặc điểm địa
-        trị kinh tế riêng biệt.
+              chất và giá trị kinh tế riêng biệt.
             </p>
 
             <h3>Khu Vực Bắc Bộ</h3>
             <p>
-        Vịnh Bắc Bộ nổi bật với chuỗi mỏ khí quan trọng như Tiền Hải, Hàm Rồng
+              Vịnh Bắc Bộ nổi bật với chuỗi mỏ khí quan trọng như Tiền Hải, Hàm
-        và Hồng Ngọc. Các mỏ này đóng vai trò then chốt trong việc đảm bảo nguồn
+              Rồng và Hồng Ngọc. Các mỏ này đóng vai trò then chốt trong việc
-        cung khí đáp ứng nhu cầu năng lượng khu vực phía Bắc.
+              đảm bảo nguồn cung khí đáp ứng nhu cầu năng lượng khu vực phía
+              Bắc.
             </p>
 
             <h3>Khu Vực Miền Trung</h3>
             <ul>
               <li>
-          <strong>Dung Quất (Quảng Ngãi):</strong> Là một trong những mỏ khí
+                <strong>Dung Quất (Quảng Ngãi):</strong> Là một trong những mỏ
-          thiên nhiên trọng điểm, được khai thác từ các tầng đá trầm tích vùng
+                khí thiên nhiên trọng điểm, được khai thác từ các tầng đá trầm
-          biển cửa sông Trà Khúc.
+                tích vùng biển cửa sông Trà Khúc.
               </li>
               <li>
-          <strong>Cá Voi Xanh (Chu Lai):</strong> Nằm cách bờ biển miền Trung
+                <strong>Cá Voi Xanh (Chu Lai):</strong> Nằm cách bờ biển miền
-          88km, sở hữu trữ lượng khổng lồ, được đánh giá là một trong những mỏ
+                Trung 88km, sở hữu trữ lượng khổng lồ, được đánh giá là một
-          khí lớn nhất Việt Nam.
+                trong những mỏ khí lớn nhất Việt Nam.
               </li>
               <li>
-          <strong>Kèn Bầu (Quảng Trị):</strong> Khai thác từ năm 2019, cách bờ
+                <strong>Kèn Bầu (Quảng Trị):</strong> Khai thác từ năm 2019,
-          biển 65km, là phát hiện mang tính lịch sử thúc đẩy ngành dầu khí.
+                cách bờ biển 65km, là phát hiện mang tính lịch sử thúc đẩy ngành
+                dầu khí.
               </li>
             </ul>
 
             <h3>Khu Vực Nam Bộ</h3>
             <p>
-        <strong>Nam Côn Sơn:</strong> Hệ thống khí thiên nhiên lớn nhất Nam Bộ,
+              <strong>Nam Côn Sơn:</strong> Hệ thống khí thiên nhiên lớn nhất
-        bao gồm các mỏ Lan Tây, Lan Đỏ, Rồng Đôi, Rồng Tây... nằm trong vịnh
+              Nam Bộ, bao gồm các mỏ Lan Tây, Lan Đỏ, Rồng Đôi, Rồng Tây... nằm
-        Thái Lan với trữ lượng đáng kể.
+              trong vịnh Thái Lan với trữ lượng đáng kể.
             </p>
             <p>
-        <strong>Cà Mau:</strong> Mỏ khí lớn tại cực Nam Tổ quốc, đóng góp quan
+              <strong>Cà Mau:</strong> Mỏ khí lớn tại cực Nam Tổ quốc, đóng góp
-        trọng vào an ninh năng lượng quốc gia.
+              quan trọng vào an ninh năng lượng quốc gia.
             </p>
             <p>
-        Ngoài ra, Việt Nam còn nhiều vùng tiềm năng khác đang trong quá trình
+              Ngoài ra, Việt Nam còn nhiều vùng tiềm năng khác đang trong quá
-        thăm dò và nghiên cứu, hứa hẹn mở rộng nguồn tài nguyên khí thiên nhiên
+              trình thăm dò và nghiên cứu, hứa hẹn mở rộng nguồn tài nguyên khí
-        trong tương lai.
+              thiên nhiên trong tương lai.
             </p>
 
             <h2>Các mỏ khí thiên nhiên lớn tại Việt Nam</h2>
             <p>
-        Việt Nam sở hữu tiềm năng khí thiên nhiên dồi dào với nhiều mỏ khí trọng
+              Việt Nam sở hữu tiềm năng khí thiên nhiên dồi dào với nhiều mỏ khí
-        điểm đang được khai thác hiệu quả trên khắp lãnh thổ. Mỏ khí Bạch Hổ tại
+              trọng điểm đang được khai thác hiệu quả trên khắp lãnh thổ. Mỏ khí
-        Vịnh Bắc Bộ nổi bật với trữ lượng ước tính 400 tỷ mét khối, là một trong
+              Bạch Hổ tại Vịnh Bắc Bộ nổi bật với trữ lượng ước tính 400 tỷ mét
-        những mỏ khí lớn nhất cả nước, đóng góp đáng kể vào nguồn cung năng
+              khối, là một trong những mỏ khí lớn nhất cả nước, đóng góp đáng kể
-        lượng quốc gia. Tương tự, mỏ khí Mặt Trời Đỏ ở vùng biển phía Bắc với
+              vào nguồn cung năng lượng quốc gia. Tương tự, mỏ khí Mặt Trời Đỏ ở
-        hàng tỷ mét khối khí thiên nhiên cũng đóng vai trò quan trọng trong việc
+              vùng biển phía Bắc với hàng tỷ mét khối khí thiên nhiên cũng đóng
-        đáp ứng nhu cầu năng lượng ngày càng tăng.
+              vai trò quan trọng trong việc đáp ứng nhu cầu năng lượng ngày càng
+              tăng.
             </p>
 
             <p>
-        Tại miền Trung, mỏ khí Dung Quất (Quảng Ngãi) với trữ lượng khoảng 90 tỷ
+              Tại miền Trung, mỏ khí Dung Quất (Quảng Ngãi) với trữ lượng khoảng
-        mét khối đã góp phần thúc đẩy phát triển công nghiệp địa phương. Trong
+              90 tỷ mét khối đã góp phần thúc đẩy phát triển công nghiệp địa
-        khi đó, khu vực Nam Bộ tự hào với mỏ khí Nam Côn Sơn nằm ở vịnh Thái Lan
+              phương. Trong khi đó, khu vực Nam Bộ tự hào với mỏ khí Nam Côn Sơn
-        - mỏ khí thiên nhiên lớn nhất Việt Nam với trữ lượng ước tính hàng trăm
+              nằm ở vịnh Thái Lan - mỏ khí thiên nhiên lớn nhất Việt Nam với trữ
-        tỷ mét khối, cùng với mỏ khí Cà Mau (trữ lượng khoảng 150 tỷ mét khối)
+              lượng ước tính hàng trăm tỷ mét khối, cùng với mỏ khí Cà Mau (trữ
-        đang đóng góp to lớn vào sự phát triển kinh tế và đảm bảo an ninh năng
+              lượng khoảng 150 tỷ mét khối) đang đóng góp to lớn vào sự phát
-        lượng quốc gia.
+              triển kinh tế và đảm bảo an ninh năng lượng quốc gia.
             </p>
 
             <p>
-        Bên cạnh những mỏ khí chính, Việt Nam còn sở hữu nhiều mỏ khí tiềm năng
+              Bên cạnh những mỏ khí chính, Việt Nam còn sở hữu nhiều mỏ khí tiềm
-        khác như Rạch Việt, Núi Tổ và Tây Nam Côn Đảo, tiếp tục củng cố vị thế
+              năng khác như Rạch Việt, Núi Tổ và Tây Nam Côn Đảo, tiếp tục củng
-        của Việt Nam trong lĩnh vực khai thác và sử dụng khí thiên nhiên.
+              cố vị thế của Việt Nam trong lĩnh vực khai thác và sử dụng khí
+              thiên nhiên.
             </p>
 
             <img
               src="https://i.imgur.com/jnJSmFx.png"
               alt="Hoạt động khai thác khí tại Việt Nam"
-        width="100%"
+              class="img-fluid w-100 rounded mb-2"
             />
             <p class="image-caption">Hoạt động khai thác khí tại Việt Nam</p>
 
@@ -160,141 +173,151 @@
 
             <h3>Quy trình khai thác dầu mỏ</h3>
             <p>
-        Khai thác dầu mỏ là một quy trình phức tạp đòi hỏi trình độ kỹ thuật cao
+              Khai thác dầu mỏ là một quy trình phức tạp đòi hỏi trình độ kỹ
-        và nguồn vốn đầu tư lớn. Quá trình này bao gồm nhiều công đoạn chuyên
+              thuật cao và nguồn vốn đầu tư lớn. Quá trình này bao gồm nhiều
-        biệt từ thăm dò ban đầu đến vận chuyển sản phẩm cuối cùng, mỗi giai đoạn
+              công đoạn chuyên biệt từ thăm dò ban đầu đến vận chuyển sản phẩm
-        đều cần có công nghệ, phương pháp riêng và phải đối mặt với nhiều thách
+              cuối cùng, mỗi giai đoạn đều cần có công nghệ, phương pháp riêng
-        thức khác nhau.
+              và phải đối mặt với nhiều thách thức khác nhau.
             </p>
 
             <h4>Giai Đoạn 1: Tìm Kiếm và Định Vị Mỏ Dầu</h4>
             <p>
-        Công nghệ địa chấn là phương pháp "cổ điển" được các nhà địa chất học sử
+              Công nghệ địa chấn là phương pháp "cổ điển" được các nhà địa chất
-        dụng để tìm kiếm bể dầu trong tự nhiên. Quy trình thực hiện bao gồm việc
+              học sử dụng để tìm kiếm bể dầu trong tự nhiên. Quy trình thực hiện
-        tạo ra những vụ nổ lớn bằng mìn trong lòng đất, sau đó quan sát và ghi
+              bao gồm việc tạo ra những vụ nổ lớn bằng mìn trong lòng đất, sau
-        nhận sóng địa chấn phản hồi để xác định kết cấu của các lớp địa tầng và
+              đó quan sát và ghi nhận sóng địa chấn phản hồi để xác định kết cấu
-        mật độ của những lớp đất đá có khả năng hình thành bể chứa dầu.
+              của các lớp địa tầng và mật độ của những lớp đất đá có khả năng
+              hình thành bể chứa dầu.
             </p>
             <p>
-        Ngày nay, ngành công nghiệp dầu khí đã phát triển nhiều phương pháp định
+              Ngày nay, ngành công nghiệp dầu khí đã phát triển nhiều phương
-        vị tiên tiến hơn như sử dụng thiết bị đo từ trường và thiết bị đo trọng
+              pháp định vị tiên tiến hơn như sử dụng thiết bị đo từ trường và
-        lực. Những thiết bị này có khả năng phát hiện những thay đổi rất nhỏ
+              thiết bị đo trọng lực. Những thiết bị này có khả năng phát hiện
-        trong từ trường của Trái Đất, giúp các nhà địa chất xác định vị trí có
+              những thay đổi rất nhỏ trong từ trường của Trái Đất, giúp các nhà
-        dòng chảy của dầu. Trong quá trình thăm dò, các mũi điện tử siêu nhạy
+              địa chất xác định vị trí có dòng chảy của dầu. Trong quá trình
-        cảm cũng được triển khai để xác định mùi vị của hydrocarbon - thành phần
+              thăm dò, các mũi điện tử siêu nhạy cảm cũng được triển khai để xác
-        chính của dầu mỏ.
+              định mùi vị của hydrocarbon - thành phần chính của dầu mỏ.
             </p>
 
             <h4>Giai Đoạn 2: Khoan Thăm Dò và Xây Dựng Giếng</h4>
             <p>
-        Khi đã xác định được vị trí của bể dầu, đội ngũ kỹ thuật sẽ tiến hành
+              Khi đã xác định được vị trí của bể dầu, đội ngũ kỹ thuật sẽ tiến
-        khoan một lỗ sâu vào lớp vỏ Trái Đất để tạo ra giếng dầu. Quá trình này
+              hành khoan một lỗ sâu vào lớp vỏ Trái Đất để tạo ra giếng dầu. Quá
-        đòi hỏi độ chính xác cao và sự phối hợp nhịp nhàng giữa nhiều yếu tố kỹ
+              trình này đòi hỏi độ chính xác cao và sự phối hợp nhịp nhàng giữa
-        thật.
+              nhiều yếu tố kỹ thật.
             </p>
             <p>
-        Sau khi đạt đến lớp dầu bên trong mỏ, lỗ khoan được gia cường bằng hệ
+              Sau khi đạt đến lớp dầu bên trong mỏ, lỗ khoan được gia cường bằng
-        thống ống thép đặt bên trong, kết hợp với kết cấu bê tông và cốt thép
+              hệ thống ống thép đặt bên trong, kết hợp với kết cấu bê tông và
-        trên miệng giếng để tạo nền móng vững chắc. Giai đoạn cuối cùng của quá
+              cốt thép trên miệng giếng để tạo nền móng vững chắc. Giai đoạn
-        trình khoan là việc lắp đặt các van kiểm soát vào bên trên miệng giếng,
+              cuối cùng của quá trình khoan là việc lắp đặt các van kiểm soát
-        đóng vai trò quan trọng trong việc điều chỉnh dòng chảy và duy trì áp
+              vào bên trên miệng giếng, đóng vai trò quan trọng trong việc điều
-        suất phù hợp trong suốt quá trình khai thác.
+              chỉnh dòng chảy và duy trì áp suất phù hợp trong suốt quá trình
+              khai thác.
             </p>
 
             <img
               src="https://i.imgur.com/xNLRwSr.png"
               alt="Nhà máy khai thác dầu mỏ"
-        width="100%"
+              class="img-fluid w-100 rounded mb-2"
             />
             <p class="image-caption">Nhà máy khai thác dầu mỏ</p>
 
             <h3>Quy trình khai thác khí thiên nhiên</h3>
             <p>
-        Chu trình khai thác khí thiên nhiên tại Việt Nam là một quy trình toàn
+              Chu trình khai thác khí thiên nhiên tại Việt Nam là một quy trình
-        diện, được thiết kế để tối ưu hóa việc khai thác, đảm bảo an toàn và
+              toàn diện, được thiết kế để tối ưu hóa việc khai thác, đảm bảo an
-        hiệu quả kinh tế. Quy trình này được chia thành bảy giai đoạn chính, mỗi
+              toàn và hiệu quả kinh tế. Quy trình này được chia thành bảy giai
-        giai đoạn đều đóng vai trò thiết yếu trong việc đưa tài nguyên khí từ
+              đoạn chính, mỗi giai đoạn đều đóng vai trò thiết yếu trong việc
-        lòng đất đến người tiêu dùng cuối cùng.
+              đưa tài nguyên khí từ lòng đất đến người tiêu dùng cuối cùng.
             </p>
 
             <ul>
               <li>
-          <strong>Giai Đoạn 1: Định Vị và Khảo Sát:</strong> Quá trình bắt đầu
+                <strong>Giai Đoạn 1: Định Vị và Khảo Sát:</strong> Quá trình bắt
-          với việc xác định các khu vực tiềm năng thông qua khảo sát địa chất,
+                đầu với việc xác định các khu vực tiềm năng thông qua khảo sát
-          địa mạo và địa chấn. Các chuyên gia sử dụng công nghệ tiên tiến để
+                địa chất, địa mạo và địa chấn. Các chuyên gia sử dụng công nghệ
-          phân tích cấu trúc địa tầng, đánh giá khả năng tồn tại của các túi khí
+                tiên tiến để phân tích cấu trúc địa tầng, đánh giá khả năng tồn
-          và xác định vị trí tối ưu cho các hoạt động thăm dò tiếp theo.
+                tại của các túi khí và xác định vị trí tối ưu cho các hoạt động
+                thăm dò tiếp theo.
               </li>
               <li>
-          <strong>Giai Đoạn 2: Khoan Thăm Dò:</strong> Sau khi xác định được khu
+                <strong>Giai Đoạn 2: Khoan Thăm Dò:</strong> Sau khi xác định
-          vực tiềm năng, các giếng thăm dò được khoan để thu thập thông tin chi
+                được khu vực tiềm năng, các giếng thăm dò được khoan để thu thập
-          tiết về độ sâu, kích thước và chất lượng của mỏ khí. Giai đoạn này
+                thông tin chi tiết về độ sâu, kích thước và chất lượng của mỏ
-          cung cấp dữ liệu quan trọng về đặc tính của lớp đá chứa khí, thành
+                khí. Giai đoạn này cung cấp dữ liệu quan trọng về đặc tính của
-          phần hóa học và áp suất, giúp các nhà địa chất đánh giá chính xác khả
+                lớp đá chứa khí, thành phần hóa học và áp suất, giúp các nhà địa
-          năng khai thác thương mại.
+                chất đánh giá chính xác khả năng khai thác thương mại.
               </li>
               <li>
-          <strong>Giai Đoạn 3: Thiết Kế và Xây Dựng Cơ Sở Hạ Tầng:</strong> Khi
+                <strong
-          tiềm năng mỏ khí được xác nhận, các kỹ sư tiến hành thiết kế và xây
+                  >Giai Đoạn 3: Thiết Kế và Xây Dựng Cơ Sở Hạ Tầng:</strong
-          dựng hệ thống cơ sở hạ tầng cần thiết. Công đoạn này bao gồm việc lắp
+                >
-          đặt hệ thống đường ống dẫn khí, trạm nén, thiết bị giám sát, cơ sở lưu
+                Khi tiềm năng mỏ khí được xác nhận, các kỹ sư tiến hành thiết kế
-          trữ và các công trình phụ trợ khác, tạo nên mạng lưới hoàn chỉnh cho
+                và xây dựng hệ thống cơ sở hạ tầng cần thiết. Công đoạn này bao
-          quá trình khai thác.
+                gồm việc lắp đặt hệ thống đường ống dẫn khí, trạm nén, thiết bị
+                giám sát, cơ sở lưu trữ và các công trình phụ trợ khác, tạo nên
+                mạng lưới hoàn chỉnh cho quá trình khai thác.
               </li>
               <li>
-          <strong>Giai Đoạn 4: Khoan Sản Xuất:</strong> Các giếng khai thác được
+                <strong>Giai Đoạn 4: Khoan Sản Xuất:</strong> Các giếng khai
-          khoan sâu xuống tầng đất chứa khí với công nghệ và thiết bị chuyên
+                thác được khoan sâu xuống tầng đất chứa khí với công nghệ và
-          dụng. Mỗi giếng được thiết kế riêng biệt dựa trên đặc điểm địa chất
+                thiết bị chuyên dụng. Mỗi giếng được thiết kế riêng biệt dựa
-          của khu vực và sau đó được kết nối với hệ thống ống dẫn, tạo thành
+                trên đặc điểm địa chất của khu vực và sau đó được kết nối với hệ
-          mạng lưới vận chuyển khí từ lòng đất lên bề mặt.
+                thống ống dẫn, tạo thành mạng lưới vận chuyển khí từ lòng đất
+                lên bề mặt.
               </li>
               <li>
-          <strong>Giai Đoạn 5: Khai Thác và Sản Xuất:</strong> Đây là giai đoạn
+                <strong>Giai Đoạn 5: Khai Thác và Sản Xuất:</strong> Đây là giai
-          cốt lõi của chu trình, khi khí thiên nhiên được đưa lên bề mặt thông
+                đoạn cốt lõi của chu trình, khi khí thiên nhiên được đưa lên bề
-          qua các kỹ thuật khai thác như áp suất tự nhiên, bơm khí hoặc các
+                mặt thông qua các kỹ thuật khai thác như áp suất tự nhiên, bơm
-          phương pháp tăng cường áp suất. Quá trình này được kiểm soát chặt chẽ
+                khí hoặc các phương pháp tăng cường áp suất. Quá trình này được
-          để đảm bảo tốc độ khai thác bền vững và tối đa hóa khả năng thu hồi
+                kiểm soát chặt chẽ để đảm bảo tốc độ khai thác bền vững và tối
-          khí.
+                đa hóa khả năng thu hồi khí.
               </li>
               <li>
-          <strong>Giai Đoạn 6: Xử Lý và Phân Phối:</strong> Khí thiên nhiên khai
+                <strong>Giai Đoạn 6: Xử Lý và Phân Phối:</strong> Khí thiên
-          thác được đưa vào các nhà máy xử lý để tách tạp chất, loại bỏ các
+                nhiên khai thác được đưa vào các nhà máy xử lý để tách tạp chất,
-          thành phần không mong muốn và đạt tiêu chuẩn chất lượng thương mại.
+                loại bỏ các thành phần không mong muốn và đạt tiêu chuẩn chất
-          Sau khi xử lý, khí được nén đến áp suất thích hợp và phân phối đến các
+                lượng thương mại. Sau khi xử lý, khí được nén đến áp suất thích
-          nhà máy điện, khu công nghiệp và hộ tiêu dùng thông qua hệ thống đường
+                hợp và phân phối đến các nhà máy điện, khu công nghiệp và hộ
-          ống.
+                tiêu dùng thông qua hệ thống đường ống.
               </li>
               <li>
-          <strong>Giai Đoạn 7: Giám Sát và Bảo Trì:</strong> Toàn bộ chu trình
+                <strong>Giai Đoạn 7: Giám Sát và Bảo Trì:</strong> Toàn bộ chu
-          khai thác được giám sát liên tục bởi các hệ thống tự động và đội ngũ
+                trình khai thác được giám sát liên tục bởi các hệ thống tự động
-          chuyên gia. Các thông số như áp suất, lưu lượng và chất lượng khí được
+                và đội ngũ chuyên gia. Các thông số như áp suất, lưu lượng và
-          theo dõi thường xuyên, trong khi các hoạt động bảo trì định kỳ được
+                chất lượng khí được theo dõi thường xuyên, trong khi các hoạt
-          thực hiện để đảm bảo hệ thống vận hành an toàn, hiệu quả và tuân thủ
+                động bảo trì định kỳ được thực hiện để đảm bảo hệ thống vận hành
-          các tiêu chuẩn môi trường.
+                an toàn, hiệu quả và tuân thủ các tiêu chuẩn môi trường.
               </li>
             </ul>
 
             <img
               src="https://i.imgur.com/9njIYNJ.png"
               alt="Công trình khai thác khí thiên nhiên"
-        width="100%"
+              class="img-fluid w-100 rounded mb-2"
             />
             <p class="image-caption">Công trình khai thác khí thiên nhiên</p>
 
             <h2>Lời kết</h2>
             <p>
-        Khí đốt tự nhiên không chỉ là nguồn năng lượng thiết yếu cho cuộc sống
+              Khí đốt tự nhiên không chỉ là nguồn năng lượng thiết yếu cho cuộc
-        hiện đại mà còn đóng vai trò quan trọng trong quá trình chuyển đổi sang
+              sống hiện đại mà còn đóng vai trò quan trọng trong quá trình
-        năng lượng sạch. Từ những mỏ khí sâu trong lòng đất đến hệ thống đường
+              chuyển đổi sang năng lượng sạch. Từ những mỏ khí sâu trong lòng
-        ống và nhà máy xử lý, hành trình của khí đốt tự nhiên là minh chứng cho
+              đất đến hệ thống đường ống và nhà máy xử lý, hành trình của khí
-        sự kết hợp giữa công nghệ tiên tiến và nỗ lực khai thác bền vững.
+              đốt tự nhiên là minh chứng cho sự kết hợp giữa công nghệ tiên tiến
+              và nỗ lực khai thác bền vững.
             </p>
           </article>
-
+        </div>
+      </div>
+    </div>
     <!-- Footer Component -->
     <div id="footer"></div>
 
     <script src="components/header/headerLoader.js"></script>
+    <script src="/components/sidebar/sidebarLoader.js"></script>
     <script src="/components/footer/footerLoader.js"></script>
     <script src="newsPages/newsArticle1/newsArticle1.js?v=1.0"></script>
   </body>

views/newsPages/newsMain/newsMain.css

@@ -53,17 +53,21 @@ a:active {
 .news-filter {
   display: flex;
   justify-content: center;
+  gap: 12px;
   margin-bottom: 30px;
 }
 
 .filter-btn {
   padding: 8px 16px;
-  margin: 0 10px;
+  margin: 0;
   background-color: #fff;
   color: #006241;
   border: 1px solid #30875f;
   border-radius: 4px;
+  font-weight: 500;
   cursor: pointer;
+  white-space: nowrap;
+  flex-shrink: 0;
   transition: all 0.3s ease;
 }
 
@@ -191,4 +195,33 @@ a:active {
   .news-grid {
     grid-template-columns: 1fr;
   }
+
+  .news-filter {
+    justify-content: flex-start;
+    margin-left: -20px;
+    margin-right: -20px;
+    padding-left: 20px;
+    padding-right: 20px;
+    padding-bottom: 15px;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .news-filter::after {
+    content: "";
+    padding-right: 2px; /* Small buffer */
+  }
+
+  .filter-btn {
+    font-size: 14px;
+    padding: 6px 16px;
+    border-radius: 30px;
+  }
+}
+
+.bootstrap-scroll-fix {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+.bootstrap-scroll-fix::-webkit-scrollbar {
+  display: none; /* Chrome, Safari and Opera */
 }

views/newsPages/newsMain/newsMain.html

@@ -31,68 +31,16 @@
     <!-- Header Component -->
     <div id="header"></div>
 
-    <!-- Floating Menu Button -->
+    <!-- Sidebar Component -->
-    <button class="floating-menu-btn" id="floatingMenuBtn">
+    <div id="sidebar-container"></div>
-      <i class="bi bi-list"></i>
-    </button>
-
-    <!-- Sidebar Overlay -->
-    <div class="sidebar-overlay" id="sidebarOverlay"></div>
-
-    <!-- Sidebar -->
-    <div class="sidebar" id="sidebar">
-      <div class="sidebar-header">
-        <img
-          src="https://ik.imagekit.io/1e8470bv5/companyLogo.webp?updatedAt=1754143468028"
-          alt="Ky Long Logo"
-          class="sidebar-logo"
-        />
-        <button class="close-sidebar">
-          <i class="bi bi-x-lg"></i>
-        </button>
-      </div>
-
-      <nav class="sidebar-nav">
-        <a href="/" class="nav-link">TRANG CHỦ</a>
-        <a href="/aboutMain" class="nav-link">GIỚI THIỆU</a>
-        <a href="/productMain" class="nav-link">SẢN PHẨM</a>
-        <a href="/serviceMain" class="nav-link">DỊCH VỤ</a>
-        <a href="/newsMain" class="nav-link">TIN TỨC</a>
-        <a href="/contactMain" class="nav-link">LIÊN HỆ</a>
-      </nav>
-
-      <div class="sidebar-contact">
-        <div class="d-flex align-items-center mb-3">
-          <div
-            class="contact-icon2 d-flex align-items-center justify-content-center me-2"
-          >
-            <i class="bi bi-geo-alt-fill"></i>
-          </div>
-          <div>
-            <div>Lầu 12, số 27 Đinh Bộ Lĩnh,</div>
-            <div>P. Bình Thạnh, TP.Hồ Chí Minh</div>
-          </div>
-        </div>
-
-        <div class="d-flex align-items-center">
-          <div
-            class="contact-icon d-flex align-items-center justify-content-center me-2"
-          >
-            <i class="bi bi-envelope-open-fill"></i>
-          </div>
-          <div>
-            <div>Email:</div>
-            <div>info@kylongtech.com</div>
-          </div>
-        </div>
-      </div>
-    </div>
 
     <!-- NEWS CONTENT SECTION -->
     <main class="news-container">
       <h1 class="page-title">Tin Tức & Sự Kiện</h1>
 
-      <div class="news-filter">
+      <div
+        class="news-filter d-flex flex-nowrap overflow-x-auto pb-2 bootstrap-scroll-fix"
+      >
         <button class="filter-btn active">Tất Cả</button>
         <button class="filter-btn">Công Nghệ</button>
         <button class="filter-btn">Thị Trường</button>
@@ -261,15 +209,15 @@
         </a>
       </div>
 
-      <div class="news-pagination">
+      <div class="news-pagination my-3 my-sm-4">
         <!-- Pagination buttons will be generated by JavaScript -->
       </div>
 
       <div
-        class="no-results"
+        class="no-results py-4 py-sm-5 text-center w-100"
-        style="display: none; text-align: center; padding: 2rem; width: 100%"
+        style="display: none"
       >
-        <p>Không có tin tức nào phù hợp với bộ lọc đã chọn.</p>
+        <p class="mb-0">Không có tin tức nào phù hợp với bộ lọc đã chọn.</p>
       </div>
     </main>
     <!-- END OF NEWS CONTENT SECTION -->
@@ -279,6 +227,7 @@
 
     <script src="newsPages/newsMain/newsMain.js?v=1.1"></script>
     <script src="/components/header/headerLoader.js"></script>
+    <script src="/components/sidebar/sidebarLoader.js"></script>
     <script src="/components/footer/footerLoader.js"></script>
   </body>
 </html>

views/productPages/productMain/productMain.html

@@ -25,62 +25,8 @@
     <!-- Header Component -->
     <div id="header"></div>
 
-    <!-- Floating Menu Button -->
+    <!-- Sidebar Component -->
-    <button class="floating-menu-btn" id="floatingMenuBtn">
+    <div id="sidebar-container"></div>
-      <i class="bi bi-list"></i>
-    </button>
-
-    <!-- Sidebar Overlay -->
-    <div class="sidebar-overlay" id="sidebarOverlay"></div>
-
-    <!-- Sidebar -->
-    <div class="sidebar" id="sidebar">
-      <div class="sidebar-header">
-        <img
-          src="https://ik.imagekit.io/1e8470bv5/companyLogo.webp?updatedAt=1754143468028"
-          alt="Ky Long Logo"
-          class="sidebar-logo"
-        />
-        <button class="close-sidebar">
-          <i class="bi bi-x-lg"></i>
-        </button>
-      </div>
-
-      <nav class="sidebar-nav">
-        <a href="/" class="nav-link">TRANG CHỦ</a>
-        <a href="/aboutMain" class="nav-link">GIỚI THIỆU</a>
-        <a href="/productMain" class="nav-link">SẢN PHẨM</a>
-        <a href="/serviceMain" class="nav-link">DỊCH VỤ</a>
-        <a href="/newsMain" class="nav-link">TIN TỨC</a>
-        <a href="/contactMain" class="nav-link">LIÊN HỆ</a>
-      </nav>
-
-      <div class="sidebar-contact">
-        <div class="d-flex align-items-center mb-3">
-          <div
-            class="contact-icon2 d-flex align-items-center justify-content-center me-2"
-          >
-            <i class="bi bi-geo-alt-fill"></i>
-          </div>
-          <div>
-            <div>Lầu 12, số 27 Đinh Bộ Lĩnh,</div>
-            <div>P. Bình Thạnh, TP.Hồ Chí Minh</div>
-          </div>
-        </div>
-
-        <div class="d-flex align-items-center">
-          <div
-            class="contact-icon d-flex align-items-center justify-content-center me-2"
-          >
-            <i class="bi bi-envelope-open-fill"></i>
-          </div>
-          <div>
-            <div>Email:</div>
-            <div>info@kylongtech.com</div>
-          </div>
-        </div>
-      </div>
-    </div>
 
     <!-- PRODUCT HERO SECTION -->
     <div class="symbol-hero">
@@ -379,6 +325,7 @@
 
     <script src="productPages/productMain/productMain.js?v=1.1"></script>
     <script src="/components/header/headerLoader.js"></script>
+    <script src="/components/sidebar/sidebarLoader.js"></script>
     <script src="/components/footer/footerLoader.js"></script>
   </body>
 </html>

views/productPages/productSeparateCommerceLNG/productSeparateCommerceLNG.html

@@ -32,6 +32,9 @@
     <!-- Header Component -->
     <div id="header"></div>
 
+    <!-- Sidebar Component -->
+    <div id="sidebar-container"></div>
+
     <!-- LNG HERO SECTION -->
     <section class="lng-hero">
       <div class="container">
@@ -142,6 +145,7 @@
     <div id="footer"></div>
 
     <script src="components/header/headerLoader.js"></script>
+    <script src="/components/sidebar/sidebarLoader.js"></script>
     <script src="/components/footer/footerLoader.js"></script>
     <script src="productPages/productSeparateCommerceLNG/productSeparateCommerceLNG.js?v=1.0"></script>
   </body>

views/productPages/productSeparateCommercePNG/productSeparateCommercePNG.html

@@ -31,6 +31,9 @@
     <!-- Header Component -->
     <div id="header"></div>
 
+    <!-- Sidebar Component -->
+    <div id="sidebar-container"></div>
+
     <!-- PNG HERO SECTION -->
     <section class="png-hero">
       <div class="container">
@@ -140,6 +143,7 @@
     <div id="footer"></div>
 
     <script src="components/header/headerLoader.js"></script>
+    <script src="/components/sidebar/sidebarLoader.js"></script>
     <script src="/components/footer/footerLoader.js"></script>
     <script src="productPages/productSeparateCommercePNG/productSeparateCommercePNG.js?v=1.0"></script>
   </body>

views/productPages/productSeparateProductionGasMeter/productSeparateProductionGasMeter.html

@@ -31,6 +31,9 @@
     <!-- Header Component -->
     <div id="header"></div>
 
+    <!-- Sidebar Component -->
+    <div id="sidebar-container"></div>
+
     <!-- GAS METER HERO SECTION -->
     <section class="gas-meter-hero">
       <div class="container">
@@ -137,6 +140,7 @@
     <div id="footer"></div>
 
     <script src="components/header/headerLoader.js"></script>
+    <script src="/components/sidebar/sidebarLoader.js"></script>
     <script src="/components/footer/footerLoader.js"></script>
     <script src="productPages/productSeparateProductionGasMeter/productSeparateProductionGasMeter.js?v=1.0"></script>
   </body>

views/productPages/productSeparateProductionPRU/productSeparateProductionPRU.html

@@ -32,6 +32,9 @@
     <!-- Header Component -->
     <div id="header"></div>
 
+    <!-- Sidebar Component -->
+    <div id="sidebar-container"></div>
+
     <!-- PRU HERO SECTION -->
     <section class="pru-hero">
       <div class="container">
@@ -140,6 +143,7 @@
     <div id="footer"></div>
 
     <script src="components/header/headerLoader.js"></script>
+    <script src="/components/sidebar/sidebarLoader.js"></script>
     <script src="/components/footer/footerLoader.js"></script>
     <script src="productPages/productSeparateProductionPRU/productSeparateProductionPRU.js?v=1.0"></script>
   </body>

views/productPages/productSeparateProductionPressureRegulatorValve/productSeparateProductionPressureRegulatorValve.html

@@ -29,6 +29,9 @@
     <!-- Header Component -->
     <div id="header"></div>
 
+    <!-- Sidebar Component -->
+    <div id="sidebar-container"></div>
+
     <!-- PRESSURE REGULATOR VALVE HERO SECTION -->
     <section class="valve-hero">
       <div class="container">
@@ -137,6 +140,7 @@
     <div id="footer"></div>
 
     <script src="components/header/headerLoader.js"></script>
+    <script src="/components/sidebar/sidebarLoader.js"></script>
     <script src="/components/footer/footerLoader.js"></script>
     <script src="productPages/productSeparateProductionPressureRegulatorValve/productSeparateProductionPressureRegulatorValve.js?v=1.0"></script>
   </body>

views/productPages/productSeparateProductionVaporizer/productSeparateProductionVaporizer.html

@@ -29,6 +29,9 @@
     <!-- Header Component -->
     <div id="header"></div>
 
+    <!-- Sidebar Component -->
+    <div id="sidebar-container"></div>
+
     <!-- VAPORIZER HERO SECTION -->
     <section class="vaporizer-hero">
       <div class="container">
@@ -137,6 +140,7 @@
     <div id="footer"></div>
 
     <script src="components/header/headerLoader.js"></script>
+    <script src="/components/sidebar/sidebarLoader.js"></script>
     <script src="/components/footer/footerLoader.js"></script>
     <script src="productPages/productSeparateProductionVaporizer/productSeparateProductionVaporizer.js?v=1.0"></script>
   </body>

views/servicePages/serviceMain.html

@@ -26,62 +26,8 @@
     <!-- Header Component -->
     <div id="header"></div>
 
-    <!-- Floating Menu Button -->
+    <!-- Sidebar Component -->
-    <button class="floating-menu-btn" id="floatingMenuBtn">
+    <div id="sidebar-container"></div>
-      <i class="bi bi-list"></i>
-    </button>
-
-    <!-- Sidebar Overlay -->
-    <div class="sidebar-overlay" id="sidebarOverlay"></div>
-
-    <!-- Sidebar -->
-    <div class="sidebar" id="sidebar">
-      <div class="sidebar-header">
-        <img
-          src="https://ik.imagekit.io/1e8470bv5/companyLogo.webp?updatedAt=1754143468028"
-          alt="Ky Long Logo"
-          class="sidebar-logo"
-        />
-        <button class="close-sidebar">
-          <i class="bi bi-x-lg"></i>
-        </button>
-      </div>
-
-      <nav class="sidebar-nav">
-        <a href="/" class="nav-link">TRANG CHỦ</a>
-        <a href="/aboutMain" class="nav-link">GIỚI THIỆU</a>
-        <a href="/productMain" class="nav-link">SẢN PHẨM</a>
-        <a href="/serviceMain" class="nav-link">DỊCH VỤ</a>
-        <a href="/newsMain" class="nav-link">TIN TỨC</a>
-        <a href="/contactMain" class="nav-link">LIÊN HỆ</a>
-      </nav>
-
-      <div class="sidebar-contact">
-        <div class="d-flex align-items-center mb-3">
-          <div
-            class="contact-icon2 d-flex align-items-center justify-content-center me-2"
-          >
-            <i class="bi bi-geo-alt-fill"></i>
-          </div>
-          <div>
-            <div>Lầu 12, số 27 Đinh Bộ Lĩnh,</div>
-            <div>P. Bình Thạnh, TP.Hồ Chí Minh</div>
-          </div>
-        </div>
-
-        <div class="d-flex align-items-center">
-          <div
-            class="contact-icon d-flex align-items-center justify-content-center me-2"
-          >
-            <i class="bi bi-envelope-open-fill"></i>
-          </div>
-          <div>
-            <div>Email:</div>
-            <div>info@kylongtech.com</div>
-          </div>
-        </div>
-      </div>
-    </div>
 
     <!-- SERVICE HERO SECTION -->
     <div class="service-hero">
@@ -321,6 +267,7 @@
 
     <script src="servicePages/serviceMain.js?v=1.2"></script>
     <script src="/components/header/headerLoader.js"></script>
+    <script src="/components/sidebar/sidebarLoader.js"></script>
     <script src="/components/footer/footerLoader.js"></script>
   </body>
 </html>