Fix: Resolve responsive layout issues on news pages

views/aboutPages/aboutMain.html

@@ -25,8 +25,62 @@
     <!-- Header Component -->
     <div id="header"></div>
 
-    <!-- Sidebar Component -->
+    <!-- Floating Menu Button -->
-    <div id="sidebar-container"></div>
+    <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>
 
     <!-- Main Content -->
     <div class="hero">
@@ -254,7 +308,6 @@
 
     <!-- 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/sidebar/sidebar.js

@@ -1,8 +1,7 @@
 // views/components/sidebar/sidebar.js
-// NOTE: This script is always loaded dynamically by sidebarLoader.js AFTER
+document.addEventListener("DOMContentLoaded", () => {
-// the sidebar HTML has already been injected into #sidebar-container.
+  initSidebar();
-// 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");
@@ -68,6 +67,3 @@ function initSidebar() {
     lastScrollY = window.scrollY;
   });
 }
-
-// Call directly — sidebar HTML is already in DOM when this script executes
-initSidebar();

views/contactPages/contactMain.css

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

views/contactPages/contactMain.html

@@ -31,111 +31,162 @@
     <!-- Header Component -->
     <div id="header"></div>
 
-    <!-- Sidebar Component -->
+    <!-- Floating Menu Button -->
-    <div id="sidebar-container"></div>
+    <button class="floating-menu-btn" id="floatingMenuBtn">
+      <i class="bi bi-list"></i>
+    </button>
 
-    <!----- CONTACT PAGE CONTENT ----->
+    <!-- Sidebar Overlay -->
-    <section class="contact-section container py-5 my-3 overflow-hidden">
+    <div class="sidebar-overlay" id="sidebarOverlay"></div>
-      <h1 class="page-intro">LIÊN HỆ VỚI KỲ LONG</h1>
 
-      <div class="contact-container row g-4 g-lg-5">
+    <!-- Sidebar -->
-        <div class="col-12 col-md-6 mb-4 mb-md-0">
+    <div class="sidebar" id="sidebar">
-          <div class="contact-form h-100">
+      <div class="sidebar-header">
-            <h2>Gửi tin nhắn cho chúng tôi</h2>
+        <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>
 
-            <!-- Optional: Progress bar to show form completion -->
+      <nav class="sidebar-nav">
-            <div class="form-progress">
+        <a href="/" class="nav-link">TRANG CHỦ</a>
-              <div class="form-progress-bar"></div>
+        <a href="/aboutMain" class="nav-link">GIỚI THIỆU</a>
-            </div>
+        <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>
 
-            <form action="/contactSubmit" method="POST" id="contactForm">
+      <div class="sidebar-contact">
-              <div class="form-group">
+        <div class="d-flex align-items-center mb-3">
-                <label for="name" class="required">Họ và tên</label>
+          <div
-                <input
+            class="contact-icon2 d-flex align-items-center justify-content-center me-2"
-                  type="text"
+          >
-                  id="name"
+            <i class="bi bi-geo-alt-fill"></i>
-                  name="name"
+          </div>
-                  placeholder="Nhập họ và tên của bạn"
+          <div>
-                  required
+            <div>Lầu 12, số 27 Đinh Bộ Lĩnh,</div>
-                />
+            <div>P. Bình Thạnh, TP.Hồ Chí Minh</div>
-                <div class="error-message">Vui lòng nhập họ và tên của bạn</div>
-              </div>
-
-              <div class="form-group">
-                <label for="email" class="required">Email</label>
-                <input
-                  type="email"
-                  id="email"
-                  name="email"
-                  placeholder="Nhập địa chỉ email của bạn"
-                  required
-                />
-                <div class="error-message">
-                  Vui lòng nhập một địa chỉ email hợp lệ
-                </div>
-              </div>
-
-              <div class="form-group">
-                <label for="phone" class="required">Số điện thoại</label>
-                <input
-                  type="tel"
-                  id="phone"
-                  name="phone"
-                  placeholder="Nhập số điện thoại của bạn"
-                  required
-                />
-                <div class="error-message">
-                  Vui lòng nhập số điện thoại của bạn
-                </div>
-              </div>
-
-              <div class="form-group">
-                <label for="message" class="required">Nội dung</label>
-                <textarea
-                  id="message"
-                  name="message"
-                  placeholder="Nhập nội dung tin nhắn của bạn"
-                  rows="5"
-                  required
-                ></textarea>
-                <div class="error-message">Vui lòng nhập nội dung tin nhắn</div>
-              </div>
-
-              <button type="submit" class="submit-button">Gửi tin nhắn</button>
-            </form>
-
-            <!-- Container for success/error messages -->
           </div>
         </div>
 
-        <div class="col-12 col-md-6">
+        <div class="d-flex align-items-center">
-          <div class="contact-details h-100">
+          <div
-            <h2>Thông tin liên hệ</h2>
+            class="contact-icon d-flex align-items-center justify-content-center me-2"
-            <div class="contact-info">
+          >
-              <div class="contact-item">
+            <i class="bi bi-envelope-open-fill"></i>
-                <i class="fas fa-map-marker-alt"></i>
+          </div>
-                <p>Lầu 12, số 27 Đinh Bộ Lĩnh, P. Bình Thạnh, TP.Hồ Chí Minh</p>
+          <div>
-              </div>
+            <div>Email:</div>
-              <div class="contact-item">
+            <div>info@kylongtech.com</div>
-                <i class="fas fa-phone-alt"></i>
+          </div>
-                <p>+84 96 227 7912</p>
+        </div>
-              </div>
+      </div>
-              <div class="contact-item">
+    </div>
-                <i class="fas fa-envelope"></i>
+
-                <p>info@kylongtech.com</p>
+    <!----- CONTACT PAGE CONTENT ----->
+    <section class="contact-section">
+      <h1 class="page-intro">LIÊN HỆ VỚI KỲ LONG</h1>
+
+      <div class="contact-container">
+        <div class="contact-form">
+          <h2>Gửi tin nhắn cho chúng tôi</h2>
+
+          <!-- Optional: Progress bar to show form completion -->
+          <div class="form-progress">
+            <div class="form-progress-bar"></div>
+          </div>
+
+          <form action="/contactSubmit" method="POST" id="contactForm">
+            <div class="form-group">
+              <label for="name" class="required">Họ và tên</label>
+              <input
+                type="text"
+                id="name"
+                name="name"
+                placeholder="Nhập họ và tên của bạn"
+                required
+              />
+              <div class="error-message">Vui lòng nhập họ và tên của bạn</div>
+            </div>
+
+            <div class="form-group">
+              <label for="email" class="required">Email</label>
+              <input
+                type="email"
+                id="email"
+                name="email"
+                placeholder="Nhập địa chỉ email của bạn"
+                required
+              />
+              <div class="error-message">
+                Vui lòng nhập một địa chỉ email hợp lệ
               </div>
             </div>
 
-            <div class="map-container">
+            <div class="form-group">
-              <iframe
+              <label for="phone" class="required">Số điện thoại</label>
-                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"
+              <input
-                class="w-100"
+                type="tel"
-                height="300"
+                id="phone"
-                style="border: 0"
+                name="phone"
-                allowfullscreen=""
+                placeholder="Nhập số điện thoại của bạn"
-                loading="lazy"
+                required
-              ></iframe>
+              />
+              <div class="error-message">
+                Vui lòng nhập số điện thoại của bạn
+              </div>
             </div>
+
+            <div class="form-group">
+              <label for="message" class="required">Nội dung</label>
+              <textarea
+                id="message"
+                name="message"
+                placeholder="Nhập nội dung tin nhắn của bạn"
+                rows="5"
+                required
+              ></textarea>
+              <div class="error-message">Vui lòng nhập nội dung tin nhắn</div>
+            </div>
+
+            <button type="submit" class="submit-button">Gửi tin nhắn</button>
+          </form>
+
+          <!-- Container for success/error messages -->
+          <div id="form-messages"></div>
+        </div>
+
+        <div class="contact-details">
+          <h2>Thông tin liên hệ</h2>
+          <div class="contact-info">
+            <div class="contact-item">
+              <i class="fas fa-map-marker-alt"></i>
+              <p>Lầu 12, số 27 Đinh Bộ Lĩnh, P. Bình Thạnh, TP.Hồ Chí Minh</p>
+            </div>
+            <div class="contact-item">
+              <i class="fas fa-phone-alt"></i>
+              <p>+84 96 227 7912</p>
+            </div>
+            <div class="contact-item">
+              <i class="fas fa-envelope"></i>
+              <p>info@kylongtech.com</p>
+            </div>
+          </div>
+
+          <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%"
+              height="300"
+              style="border: 0"
+              allowfullscreen=""
+              loading="lazy"
+            ></iframe>
           </div>
         </div>
       </div>
@@ -146,7 +197,6 @@
 
     <!-- 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/newsPages/newsArticle1/newsArticle1.html

@@ -25,9 +25,6 @@
     <!-- Header Component -->
     <div id="header"></div>
 
-    <!-- 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">
@@ -501,7 +498,6 @@
     <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.html

@@ -25,9 +25,6 @@
     <!-- Header Component -->
     <div id="header"></div>
 
-    <!-- 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">
@@ -317,7 +314,6 @@
     <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.html

@@ -31,8 +31,62 @@
     <!-- Header Component -->
     <div id="header"></div>
 
-    <!-- Sidebar Component -->
+    <!-- Floating Menu Button -->
-    <div id="sidebar-container"></div>
+    <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>
 
     <!-- NEWS CONTENT SECTION -->
     <main class="news-container">
@@ -227,7 +281,6 @@
 
     <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,8 +25,62 @@
     <!-- Header Component -->
     <div id="header"></div>
 
-    <!-- Sidebar Component -->
+    <!-- Floating Menu Button -->
-    <div id="sidebar-container"></div>
+    <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>
 
     <!-- PRODUCT HERO SECTION -->
     <div class="symbol-hero">
@@ -325,7 +379,6 @@
 
     <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,9 +32,6 @@
     <!-- Header Component -->
     <div id="header"></div>
 
-    <!-- Sidebar Component -->
-    <div id="sidebar-container"></div>
-
     <!-- LNG HERO SECTION -->
     <section class="lng-hero">
       <div class="container">
@@ -145,7 +142,6 @@
     <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,9 +31,6 @@
     <!-- Header Component -->
     <div id="header"></div>
 
-    <!-- Sidebar Component -->
-    <div id="sidebar-container"></div>
-
     <!-- PNG HERO SECTION -->
     <section class="png-hero">
       <div class="container">
@@ -143,7 +140,6 @@
     <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,9 +31,6 @@
     <!-- 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">
@@ -140,7 +137,6 @@
     <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,9 +32,6 @@
     <!-- Header Component -->
     <div id="header"></div>
 
-    <!-- Sidebar Component -->
-    <div id="sidebar-container"></div>
-
     <!-- PRU HERO SECTION -->
     <section class="pru-hero">
       <div class="container">
@@ -143,7 +140,6 @@
     <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,9 +29,6 @@
     <!-- 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">
@@ -140,7 +137,6 @@
     <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,9 +29,6 @@
     <!-- Header Component -->
     <div id="header"></div>
 
-    <!-- Sidebar Component -->
-    <div id="sidebar-container"></div>
-
     <!-- VAPORIZER HERO SECTION -->
     <section class="vaporizer-hero">
       <div class="container">
@@ -140,7 +137,6 @@
     <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,8 +26,62 @@
     <!-- Header Component -->
     <div id="header"></div>
 
-    <!-- Sidebar Component -->
+    <!-- Floating Menu Button -->
-    <div id="sidebar-container"></div>
+    <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>
 
     <!-- SERVICE HERO SECTION -->
     <div class="service-hero">
@@ -267,7 +321,6 @@
 
     <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>