init

2026-06-03 01:06:32 +07:00
commit 31d30434d6
72 changed files with 11912 additions and 0 deletions
@@ -0,0 +1,475 @@
+/* views/productPages/productMain/productMain.css */
+/* GENERAL STYLES */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: Arial, sans-serif;
+}
+
+body {
+  color: #333;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+/* Ensure visited links don't turn purple */
+a:visited {
+  color: inherit;
+}
+
+/* Optional: Keep hover state consistent */
+a:hover {
+  text-decoration: none;
+  color: inherit;
+}
+
+/* Optional: Keep active state consistent */
+a:active {
+  color: inherit;
+}
+
+/* PRODUCT PAGE SPECIFIC STYLES */
+/* Additional styles for symbol placeholders */
+.product-image-placeholder {
+  width: 100%;
+  height: 200px;
+  background-color: #f5f5f5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 80px;
+  color: #30875f;
+}
+
+.shop-product-card .product-image {
+  position: relative;
+  height: 200px;
+  overflow: hidden;
+}
+
+.symbol-hero {
+  position: relative;
+  width: 100%;
+  height: 300px;
+  background-color: #30875f;
+  color: white;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  padding: 40px 20px;
+  overflow: hidden;
+}
+
+.symbol-container {
+  display: flex;
+  justify-content: center;
+  gap: 30px;
+  margin-bottom: 30px;
+  flex-wrap: wrap;
+}
+
+.symbol-container i {
+  font-size: 60px;
+  opacity: 0.7;
+  transition: all 0.3s ease;
+  animation: float 5s infinite ease-in-out;
+}
+
+.symbol-container i:nth-child(1) {
+  animation-delay: 0s;
+}
+.symbol-container i:nth-child(2) {
+  animation-delay: 0.5s;
+}
+.symbol-container i:nth-child(3) {
+  animation-delay: 1s;
+}
+.symbol-container i:nth-child(4) {
+  animation-delay: 1.5s;
+}
+.symbol-container i:nth-child(5) {
+  animation-delay: 2s;
+}
+
+@keyframes float {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-15px);
+  }
+}
+
+.symbol-container i:hover {
+  opacity: 1;
+  transform: scale(1.2);
+  animation: none;
+}
+
+.hero-text h1 {
+  font-size: 48px;
+  margin-bottom: 20px;
+}
+
+.hero-text p {
+  font-size: 20px;
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.product-categories {
+  padding: 60px 0;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+}
+
+.category-tabs {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 40px;
+  border-bottom: 1px solid #ddd;
+}
+
+.category-tab {
+  padding: 15px 30px;
+  background: none;
+  border: none;
+  border-bottom: 3px solid transparent;
+  font-size: 18px;
+  font-weight: bold;
+  color: #333;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.category-tab:hover {
+  color: #e84e0f;
+}
+
+.category-tab.active {
+  color: #e84e0f;
+  border-bottom: 3px solid #e84e0f;
+}
+
+.category-tab i {
+  font-size: 20px;
+}
+
+.category-content {
+  display: none;
+}
+
+.category-content.active {
+  display: block;
+}
+
+.product-card {
+  display: flex;
+  margin-bottom: 30px;
+  border: 1px solid #eee;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s ease;
+}
+
+.product-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
+}
+
+.product-icon {
+  width: 100px;
+  min-width: 100px;
+  height: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #f5f5f5;
+  color: #30875f;
+  font-size: 40px;
+}
+
+.product-info {
+  flex: 1;
+  padding: 20px;
+}
+
+.product-info h3 {
+  color: #30875f;
+  margin-bottom: 15px;
+  font-size: 20px;
+}
+
+.product-info p {
+  line-height: 1.6;
+  color: #666;
+}
+
+.contact-cta {
+  background-color: #30875f;
+  color: white;
+  padding: 60px 0;
+  text-align: center;
+}
+
+.contact-cta h2 {
+  font-size: 32px;
+  margin-bottom: 20px;
+}
+
+.contact-cta p {
+  font-size: 18px;
+  margin-bottom: 30px;
+  max-width: 700px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.cta-button {
+  display: inline-block;
+  background-color: #e84e0f;
+  color: white;
+  padding: 15px 40px;
+  border-radius: 30px;
+  text-decoration: none;
+  font-weight: bold;
+  font-size: 18px;
+  transition: all 0.3s ease;
+}
+
+.cta-button:hover {
+  background-color: #d0450d;
+  transform: translateY(-2px);
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+}
+
+/* NEW SHOP STYLES */
+.shop-title {
+  font-size: 28px;
+  color: #30875f;
+  margin-bottom: 30px;
+  text-align: center;
+  font-weight: bold;
+}
+
+.shop-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
+  gap: 30px;
+  margin-bottom: 40px;
+}
+
+.shop-product-card {
+  border: 1px solid #eee;
+  border-radius: 10px;
+  overflow: hidden;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+  background: white;
+}
+
+.shop-product-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
+}
+
+.product-image {
+  position: relative;
+  height: 250px;
+  overflow: hidden;
+}
+
+.product-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.5s ease;
+}
+
+.shop-product-card:hover .product-image img {
+  transform: scale(1.05);
+}
+
+.product-badge {
+  position: absolute;
+  top: 15px;
+  right: 15px;
+  background-color: #e84e0f;
+  color: white;
+  padding: 5px 15px;
+  border-radius: 20px;
+  font-size: 14px;
+  font-weight: bold;
+}
+
+.shop-product-info {
+  padding: 25px;
+}
+
+.shop-product-info h3 {
+  font-size: 22px;
+  margin-bottom: 15px;
+  color: #30875f;
+}
+
+.product-description {
+  color: #666;
+  margin-bottom: 20px;
+  line-height: 1.6;
+}
+
+.product-features {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-bottom: 25px;
+}
+
+.product-features span {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #555;
+}
+
+.product-features i {
+  color: #30875f;
+}
+
+.product-link {
+  display: inline-block;
+  background-color: #30875f;
+  color: white !important;
+  padding: 12px 25px;
+  border-radius: 25px;
+  font-weight: bold;
+  transition: all 0.3s ease;
+  text-align: center;
+}
+
+.product-link:hover {
+  background-color: #e84e0f;
+  transform: translateY(-2px);
+}
+
+.other-products {
+  background-color: #f9f9f9;
+  padding: 30px;
+  border-radius: 10px;
+  margin-top: 40px;
+}
+
+.other-products h3 {
+  color: #30875f;
+  font-size: 22px;
+  margin-bottom: 20px;
+  text-align: center;
+}
+
+.service-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: 20px;
+}
+
+.service-item {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  padding: 15px;
+  background-color: white;
+  border-radius: 8px;
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
+  transition: all 0.3s ease;
+}
+
+.service-item:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+}
+
+.service-item i {
+  font-size: 24px;
+  color: #e84e0f;
+}
+
+.service-item p {
+  font-size: 14px;
+  color: #555;
+}
+
+/* Responsive styles */
+@media (max-width: 768px) {
+  .symbol-hero {
+    height: auto;
+    padding: 30px 20px;
+  }
+
+  .symbol-container i {
+    font-size: 40px;
+  }
+
+  .hero-text h1 {
+    font-size: 36px;
+  }
+
+  .hero-text p {
+    font-size: 18px;
+  }
+
+  .category-tabs {
+    flex-direction: column;
+  }
+
+  .category-tab {
+    border-bottom: none;
+    border-left: 3px solid transparent;
+    text-align: left;
+    justify-content: flex-start;
+  }
+
+  .category-tab.active {
+    border-bottom: none;
+    border-left: 3px solid #e84e0f;
+  }
+
+  .product-card {
+    flex-direction: column;
+  }
+
+  .product-icon {
+    width: 100%;
+    height: 80px;
+  }
+
+  .shop-container {
+    grid-template-columns: 1fr;
+  }
+
+  .service-list {
+    grid-template-columns: 1fr;
+  }
+
+  .product-image {
+    height: 200px;
+  }
+
+  .shop-product-info h3 {
+    font-size: 20px;
+  }
+}
@@ -0,0 +1,488 @@
+<!-- views/productPage/productMain.html -->
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>SẢN PHẨM - CÔNG TY TNHH ĐẦU TƯ THƯƠNG MẠI DỊCH VỤ KỲ LONG</title>
+    <link
+      href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css"
+      rel="stylesheet"
+    />
+    <link
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css"
+    />
+    <link href="/components/header/header.css?v=1.1" rel="stylesheet" />
+    <link rel="stylesheet" href="components/footer/footer.css" />
+    <link rel="stylesheet" href="productPages/productMain/productMain.css" />
+  </head>
+  <body>
+    <!-- Header Component -->
+    <div class="top-ribbon">
+      <div class="container-fluid px-4">
+        <div class="ribbon-content">
+          <div class="ribbon-company-info">
+            <img
+              src="https://ik.imagekit.io/1e8470bv5/companyLogo.webp?updatedAt=1754143468028"
+              alt="Ky Long Logo"
+              class="ribbon-logo"
+            />
+            <span class="ribbon-company-name">KỲ LONG</span>
+            <span>Thắp sáng tương lai, vững bền thành quả</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Header Section -->
+    <header class="header py-3">
+      <div class="container-fluid px-4">
+        <div class="row align-items-center">
+          <!-- Logo and Company Info -->
+          <div class="col-lg-6 col-md-6 col-12">
+            <div class="d-flex align-items-center">
+              <button class="mobile-menu-btn me-3">
+                <i class="bi bi-list"></i>
+              </button>
+              <img
+                src="https://ik.imagekit.io/1e8470bv5/companyLogo.webp?updatedAt=1754143468028"
+                alt="Ky Long Logo"
+                class="logo me-3"
+              />
+              <div class="company-info">
+                <div>
+                  <a
+                    href="/"
+                    title="Công ty TNHH Đầu Tư Thương Mại Dịch Vụ Kỳ Long"
+                    class="company-name"
+                  >
+                    CÔNG TY TNHH ĐẦU TƯ THƯƠNG MẠI DỊCH VỤ KỲ LONG
+                  </a>
+                </div>
+                <div class="company-slogan">
+                  Thắp sáng tương lai, vững bền thành quả
+                </div>
+                <div class="company-year">SINCE 2010</div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Contact Info - Horizontal Layout -->
+          <div class="col-lg-6 col-md-6 col-12 contact-section">
+            <div class="row g-3">
+              <!-- Address -->
+              <div class="col-md-6 col-12">
+                <div class="d-flex align-items-center">
+                  <div
+                    class="contact-icon2 d-flex align-items-center justify-content-center me-2"
+                  >
+                    <i class="bi bi-geo-alt-fill"></i>
+                  </div>
+                  <div class="contact-text">
+                    <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>
+
+              <!-- Email -->
+              <div class="col-md-6 col-12">
+                <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 class="contact-text">
+                    <div>Email:</div>
+                    <div class="contact-text">info@kylongtech.com</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </header>
+
+    <!-- Navigation Section -->
+    <nav class="nav-container">
+      <div class="container-fluid px-4">
+        <div class="navbar-nav d-flex flex-row justify-content-around py-3">
+          <a href="/" class="nav-link" id="home">TRANG CHỦ</a>
+          <span class="separator"></span>
+          <a href="/aboutMain" class="nav-link" id="about">GIỚI THIỆU</a>
+          <span class="separator"></span>
+          <a href="/productMain" class="nav-link" id="products">SẢN PHẨM</a>
+          <span class="separator"></span>
+          <a href="/serviceMain" class="nav-link" id="services">DỊCH VỤ</a>
+          <span class="separator"></span>
+          <a href="/newsMain" class="nav-link" id="news">TIN TỨC</a>
+          <span class="separator"></span>
+          <a href="/lien-he" class="nav-link" id="contact">LIÊN HỆ</a>
+        </div>
+      </div>
+    </nav>
+
+    <!-- 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="/lien-he" 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">
+      <div class="symbol-container">
+        <i class="fas fa-industry"></i>
+        <i class="fas fa-gas-pump"></i>
+        <i class="fas fa-fire"></i>
+        <i class="fas fa-truck"></i>
+        <i class="fas fa-boxes"></i>
+      </div>
+      <div class="hero-text">
+        <h1>SẢN PHẨM</h1>
+        <p>Các giải pháp năng lượng và thiết bị công nghiệp chất lượng cao</p>
+      </div>
+    </div>
+    <!-- END PRODUCT HERO SECTION -->
+
+    <!-- PRODUCT CATEGORIES SECTION -->
+    <section class="product-categories">
+      <div class="container">
+        <div class="category-tabs">
+          <button class="category-tab active" data-category="production">
+            <i class="fas fa-industry"></i> SẢN XUẤT
+          </button>
+          <button class="category-tab" data-category="commerce">
+            <i class="fas fa-store"></i> THƯƠNG MẠI
+          </button>
+        </div>
+
+        <div class="category-content active" id="production">
+          <h2 class="shop-title">Thiết bị công nghiệp</h2>
+          <div class="shop-container">
+            <!-- PRU Product Card -->
+            <div class="shop-product-card">
+              <div class="product-image">
+                <div class="product-image-placeholder">
+                  <i class="fas fa-gauge"></i>
+                </div>
+                <div class="product-badge">Chất lượng cao</div>
+              </div>
+              <div class="shop-product-info">
+                <h3>Trạm giảm áp (PRU)</h3>
+                <p class="product-description">
+                  Trạm giảm áp chất lượng cao, đáp ứng các tiêu chuẩn an toàn
+                  khắt khe nhất của ngành công nghiệp
+                </p>
+                <div class="product-features">
+                  <span
+                    ><i class="fas fa-check-circle"></i> Độ tin cậy cao</span
+                  >
+                  <span
+                    ><i class="fas fa-check-circle"></i> Dễ dàng vận hành</span
+                  >
+                  <span
+                    ><i class="fas fa-check-circle"></i> Tính năng an toàn vượt
+                    trội</span
+                  >
+                </div>
+                <a href="/productSeparateProductionPRU" class="product-link"
+                  >XEM CHI TIẾT</a
+                >
+              </div>
+            </div>
+
+            <!-- Đồng hồ đo Product Card -->
+            <div class="shop-product-card">
+              <div class="product-image">
+                <div class="product-image-placeholder">
+                  <i class="fas fa-tachometer-alt"></i>
+                </div>
+                <div class="product-badge">Chính xác</div>
+              </div>
+              <div class="shop-product-info">
+                <h3>Đồng hồ đo khí</h3>
+                <p class="product-description">
+                  Thiết bị đo lường chính xác cao, giúp kiểm soát và theo dõi
+                  lượng khí tiêu thụ một cách hiệu quả
+                </p>
+                <div class="product-features">
+                  <span
+                    ><i class="fas fa-check-circle"></i> Độ chính xác cao</span
+                  >
+                  <span
+                    ><i class="fas fa-check-circle"></i> Độ bền vượt trội</span
+                  >
+                  <span
+                    ><i class="fas fa-check-circle"></i> Dễ dàng tích hợp</span
+                  >
+                </div>
+                <a
+                  href="/productSeparateProductionGasMeter"
+                  class="product-link"
+                  >XEM CHI TIẾT</a
+                >
+              </div>
+            </div>
+          </div>
+
+          <div class="shop-container">
+            <!-- Dàn hóa hơi Product Card -->
+            <div class="shop-product-card">
+              <div class="product-image">
+                <div class="product-image-placeholder">
+                  <i class="fas fa-wind"></i>
+                </div>
+                <div class="product-badge">Tiết kiệm</div>
+              </div>
+              <div class="shop-product-info">
+                <h3>Dàn hóa hơi</h3>
+                <p class="product-description">
+                  Thiết bị chuyển đổi khí từ dạng lỏng sang dạng hơi một cách
+                  hiệu quả, tiết kiệm năng lượng
+                </p>
+                <div class="product-features">
+                  <span><i class="fas fa-check-circle"></i> Hiệu suất cao</span>
+                  <span
+                    ><i class="fas fa-check-circle"></i> Tiết kiệm năng
+                    lượng</span
+                  >
+                  <span
+                    ><i class="fas fa-check-circle"></i> Vận hành ổn định</span
+                  >
+                </div>
+                <a
+                  href="/productSeparateProductionVaporizer"
+                  class="product-link"
+                  >XEM CHI TIẾT</a
+                >
+              </div>
+            </div>
+
+            <!-- Van điều áp Product Card -->
+            <div class="shop-product-card">
+              <div class="product-image">
+                <div class="product-image-placeholder">
+                  <i class="fas fa-compress-alt"></i>
+                </div>
+                <div class="product-badge">An toàn</div>
+              </div>
+              <div class="shop-product-info">
+                <h3>Van điều áp</h3>
+                <p class="product-description">
+                  Van điều áp chất lượng cao, đảm bảo an toàn và hiệu quả trong
+                  việc kiểm soát áp suất khí
+                </p>
+                <div class="product-features">
+                  <span><i class="fas fa-check-circle"></i> Độ bền cao</span>
+                  <span
+                    ><i class="fas fa-check-circle"></i> Phản ứng nhanh</span
+                  >
+                  <span
+                    ><i class="fas fa-check-circle"></i> Dễ dàng bảo trì</span
+                  >
+                </div>
+                <a
+                  href="/productSeparateProductionPressureRegulatorValve"
+                  class="product-link"
+                  >XEM CHI TIẾT</a
+                >
+              </div>
+            </div>
+          </div>
+
+          <div class="other-products">
+            <h3>Dịch vụ sản xuất khác</h3>
+            <div class="service-list">
+              <div class="service-item">
+                <i class="fas fa-oil-can"></i>
+                <p>Sản xuất sản phẩm dầu mỏ tinh chế</p>
+              </div>
+              <div class="service-item">
+                <i class="fas fa-fire"></i>
+                <p>Sản xuất, phân phối khí đốt bằng đường ống</p>
+              </div>
+              <div class="service-item">
+                <i class="fas fa-water"></i>
+                <p>Sản xuất, phân phối hơi nước và nước nóng</p>
+              </div>
+              <div class="service-item">
+                <i class="fas fa-tools"></i>
+                <p>Bảo trì, sửa chữa thiết bị công nghiệp</p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="category-content" id="commerce">
+          <h2 class="shop-title">Sản phẩm nổi bật</h2>
+          <div class="shop-container">
+            <!-- LNG Product Card -->
+            <div class="shop-product-card">
+              <div class="product-image">
+                <div class="product-image-placeholder">
+                  <i class="fas fa-tint"></i>
+                </div>
+                <div class="product-badge">Phổ biến</div>
+              </div>
+              <div class="shop-product-info">
+                <h3>Khí tự nhiên hóa lỏng (LNG)</h3>
+                <p class="product-description">
+                  Giải pháp năng lượng sạch, hiệu quả cao và tiết kiệm chi phí
+                  cho doanh nghiệp
+                </p>
+                <div class="product-features">
+                  <span><i class="fas fa-check-circle"></i> Hiệu suất cao</span>
+                  <span
+                    ><i class="fas fa-check-circle"></i> Thân thiện môi
+                    trường</span
+                  >
+                  <span
+                    ><i class="fas fa-check-circle"></i> Vận chuyển linh
+                    hoạt</span
+                  >
+                </div>
+                <a href="/productSeparateCommerceLNG" class="product-link"
+                  >XEM CHI TIẾT</a
+                >
+              </div>
+            </div>
+
+            <!-- PNG Product Card -->
+            <div class="shop-product-card">
+              <div class="product-image">
+                <div class="product-image-placeholder">
+                  <i class="fas fa-fire"></i>
+                </div>
+                <div class="product-badge">Tiết kiệm</div>
+              </div>
+              <div class="shop-product-info">
+                <h3>Khí tự nhiên nén (PNG)</h3>
+                <p class="product-description">
+                  Giải pháp cung cấp năng lượng liên tục qua đường ống cho nhà
+                  máy và khu công nghiệp
+                </p>
+                <div class="product-features">
+                  <span
+                    ><i class="fas fa-check-circle"></i> Cung cấp liên tục</span
+                  >
+                  <span
+                    ><i class="fas fa-check-circle"></i> Không cần bồn
+                    chứa</span
+                  >
+                  <span
+                    ><i class="fas fa-check-circle"></i> Chi phí vận hành
+                    thấp</span
+                  >
+                </div>
+                <a href="/productSeparateCommercePNG" class="product-link"
+                  >XEM CHI TIẾT</a
+                >
+              </div>
+            </div>
+          </div>
+
+          <div class="other-products">
+            <h3>Dịch vụ thương mại khác</h3>
+            <div class="service-list">
+              <div class="service-item">
+                <i class="fas fa-truck"></i>
+                <p>Bán buôn ô tô và xe có động cơ khác</p>
+              </div>
+              <div class="service-item">
+                <i class="fas fa-handshake"></i>
+                <p>Đại lý bán hàng hóa; Môi giới mua bán hàng hóa</p>
+              </div>
+              <div class="service-item">
+                <i class="fas fa-cubes"></i>
+                <p>Bán buôn sắt, thép, bạc và kim loại khác</p>
+              </div>
+              <div class="service-item">
+                <i class="fas fa-hammer"></i>
+                <p>Bán buôn vật liệu, thiết bị lắp đặt khác trong xây dựng</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- END PRODUCT CATEGORIES SECTION -->
+
+    <!-- CONTACT CTA SECTION -->
+    <section class="contact-cta">
+      <div class="container">
+        <h2>QUÝ KHÁCH CẦN TƯ VẤN VỀ SẢN PHẨM?</h2>
+        <p>
+          Đội ngũ chuyên gia của chúng tôi sẵn sàng hỗ trợ bạn lựa chọn giải
+          pháp phù hợp nhất
+        </p>
+        <a href="/lien-he" class="cta-button">LIÊN HỆ NGAY</a>
+      </div>
+    </section>
+    <!-- END CONTACT CTA SECTION -->
+
+    <!-- Footer Component -->
+    <div id="footer"></div>
+
+    <script src="productPages/productMain/productMain.js"></script>
+    <script src="/components/header/header.js"></script>
+  </body>
+</html>
@@ -0,0 +1,63 @@
+////views/productPages/productMain/productMain.js
+// Load footer
+fetch("components/footer/footer.html")
+  .then((response) => response.text())
+  .then((data) => {
+    document.getElementById("footer").innerHTML = data;
+  });
+
+// Product page specific JavaScript
+document.addEventListener("DOMContentLoaded", function () {
+  // Tab functionality for product categories
+  const categoryTabs = document.querySelectorAll(".category-tab");
+  const categoryContents = document.querySelectorAll(".category-content");
+
+  categoryTabs.forEach((tab) => {
+    tab.addEventListener("click", function () {
+      // Remove active class from all tabs and contents
+      categoryTabs.forEach((t) => t.classList.remove("active"));
+      categoryContents.forEach((c) => c.classList.remove("active"));
+
+      // Add active class to clicked tab
+      this.classList.add("active");
+
+      // Show corresponding content
+      const categoryId = this.getAttribute("data-category");
+      document.getElementById(categoryId).classList.add("active");
+
+      // Update URL hash without jumping
+      history.pushState(null, null, `#${categoryId}`);
+    });
+  });
+
+  // Handle hash navigation from footer or direct links
+  function activateTabByHash() {
+    const hash = window.location.hash.substring(1); // Remove the #
+    if (hash) {
+      // Find the tab with matching data-category
+      const tab = document.querySelector(
+        `.category-tab[data-category="${hash}"]`
+      );
+      if (tab) {
+        // Remove active class from all tabs and contents
+        categoryTabs.forEach((t) => t.classList.remove("active"));
+        categoryContents.forEach((c) => c.classList.remove("active"));
+
+        // Add active class to the appropriate tab and content
+        tab.classList.add("active");
+        document.getElementById(hash).classList.add("active");
+      }
+    }
+  }
+
+  // Check hash on page load
+  activateTabByHash();
+
+  // Listen for hash changes
+  window.addEventListener("hashchange", activateTabByHash);
+
+  // Set products nav item as active
+  if (document.getElementById("products")) {
+    document.getElementById("products").classList.add("active");
+  }
+});