init
This commit is contained in:
@@ -0,0 +1,401 @@
|
||||
/* views\aboutPage\aboutMain.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;
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
.hero {
|
||||
width: 100%;
|
||||
height: 450px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hero img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* About Section */
|
||||
.about-section {
|
||||
padding: 40px 5%;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.about-content {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 30px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.about-image {
|
||||
flex: 0.5;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.about-text {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.page-intro {
|
||||
font-size: 32px;
|
||||
color: #e85c41;
|
||||
margin-bottom: 0;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.sub-intro {
|
||||
font-size: 28px;
|
||||
color: #006241;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.about-text p {
|
||||
margin-bottom: 20px;
|
||||
font-size: 18px;
|
||||
color: #006241;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.video-wrapper {
|
||||
position: relative;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.about-image img {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.play-button {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
border-radius: 50%;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.play-button i {
|
||||
font-size: 30px;
|
||||
color: #e85c41;
|
||||
}
|
||||
|
||||
/* Development History Section */
|
||||
.history-section {
|
||||
padding: 40px 5%;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.history-content {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 28px;
|
||||
color: #e85c41;
|
||||
margin-bottom: 40px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.timeline {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
/* The main horizontal line */
|
||||
.timeline::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 10px;
|
||||
height: 2px;
|
||||
background-color: #e85c41;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 0 10px;
|
||||
padding-top: 30px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* Vertical line marks replacing dots */
|
||||
.timeline-item::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 2px;
|
||||
height: 20px;
|
||||
background-color: #e85c41;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.timeline-year {
|
||||
font-size: 20px;
|
||||
color: #006241;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.timeline-description {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Business Culture Section Styles */
|
||||
.business-culture-section {
|
||||
padding: 40px 5%;
|
||||
background-color: #fff;
|
||||
border: 1px solid #e84e0f;
|
||||
margin: 40px 5%;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.culture-content {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.culture-container {
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.culture-left,
|
||||
.culture-right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 25px;
|
||||
}
|
||||
|
||||
.culture-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.culture-title {
|
||||
font-size: 26px;
|
||||
color: white;
|
||||
background-color: #e85c41;
|
||||
padding: 12px 25px;
|
||||
border-radius: 20px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.culture-text {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.culture-text p {
|
||||
font-size: 18px;
|
||||
color: #006241;
|
||||
line-height: 1.7;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.culture-image {
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
max-height: 180px;
|
||||
}
|
||||
|
||||
.culture-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.culture-image img:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
/* Management Team Section Styles */
|
||||
.management-team-section {
|
||||
padding: 40px 5%;
|
||||
background-color: #fff;
|
||||
margin: 40px 0;
|
||||
}
|
||||
|
||||
.team-content {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.team-members {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.team-member {
|
||||
flex: 1;
|
||||
min-width: 250px;
|
||||
max-width: 350px;
|
||||
text-align: center;
|
||||
padding: 0 15px;
|
||||
margin-bottom: 30px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.team-member:not(:last-child)::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 20%;
|
||||
height: 60%;
|
||||
width: 1px;
|
||||
background-color: #e0e0e0;
|
||||
}
|
||||
|
||||
.member-image {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.member-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.member-info {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.member-name {
|
||||
font-size: 24px;
|
||||
color: #333;
|
||||
margin-bottom: 8px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.member-position {
|
||||
font-size: 18px;
|
||||
color: #30875f;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.hero {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.about-content {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.timeline {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 60px 0 20px;
|
||||
}
|
||||
|
||||
.timeline::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.timeline-item::before {
|
||||
top: -10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.culture-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.culture-title {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.team-members {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.team-member {
|
||||
max-width: 100%;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.team-member:not(:last-child)::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,418 @@
|
||||
<!-- views/aboutPages/aboutMain.html -->
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CÔNG TY TNHH ĐẦU TƯ THƯƠNG MẠI DỊCH VỤ KỲ LONG - Giới Thiệu</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="aboutPages/aboutMain.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>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="hero">
|
||||
<img
|
||||
src="https://ik.imagekit.io/1e8470bv5/about-banner.png?updatedAt=1750347696406"
|
||||
alt="About Banner"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!----- ABOUT SECTION HTML ----->
|
||||
<section class="about-section" id="gioi-thieu">
|
||||
<div class="about-content">
|
||||
<div class="about-image">
|
||||
<div class="video-wrapper">
|
||||
<img
|
||||
src="https://i.imgur.com/738wFGw.png"
|
||||
alt="Kỹ thuật viên Kỳ Long"
|
||||
/>
|
||||
<div class="play-button">
|
||||
<i class="fa fa-play-circle"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="about-text">
|
||||
<h1 class="page-intro">Công ty TNHH Thương Mại Dịch Vụ Kỳ Long</h1>
|
||||
<h2 class="sub-intro"></h2>
|
||||
<p>
|
||||
Chào mừng bạn đến với Công ty KỲ LONG, một công ty năng lượng uy tín
|
||||
có nhiều kinh nghiệm trong công việc cung cấp khí đốt tự nhiên cho
|
||||
các khách hàng công nghiệp.
|
||||
</p>
|
||||
<p>
|
||||
Cam kết mạnh mẽ của chúng tôi trong việc làm hài lòng khách hàng và
|
||||
cung cấp đổi mới đã giúp chúng tôi trở thành một đối tác đáng tin
|
||||
cậy cho các doanh nghiệp đang tìm kiếm các giải pháp năng lượng đáng
|
||||
tin cậy.
|
||||
</p>
|
||||
<p>
|
||||
Đội ngũ kỹ sư tận tâm của chúng tôi đảm bảo sự mịn màng và tối ưu
|
||||
hóa năng lượng thụ dưỡng cho mọi khách hàng, sử dụng công nghệ tiên
|
||||
tiến nhất và các phương pháp tiếp cận sáng tạo tiếp theo.
|
||||
</p>
|
||||
<p>
|
||||
Hãy tham gia cùng chúng tôi trong nỗ lực thúc đẩy một tương lai sạch
|
||||
hơn, bền vững hơn và thịnh vượng về kinh tế cho các ngành công
|
||||
nghiệp khác nhau.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!----- DEVELOPMENT HISTORY SECTION HTML ----->
|
||||
<section class="history-section" id="lich-su-phat-trien">
|
||||
<div class="history-content">
|
||||
<h2 class="section-title">Lịch Sử Phát Triển</h2>
|
||||
<div class="timeline">
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-year">2010</div>
|
||||
<div class="timeline-description">
|
||||
Thành lập công ty và bắt đầu hoạt động trong lĩnh vực cung cấp khí
|
||||
đốt công nghiệp.
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-year">2011</div>
|
||||
<div class="timeline-description">
|
||||
Mở rộng quy mô hoạt động và thiết lập quan hệ đối tác với các nhà
|
||||
cung cấp lớn.
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-year">2013</div>
|
||||
<div class="timeline-description">
|
||||
Triển khai các dự án lớn và tăng cường năng lực sản xuất.
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-year">2014</div>
|
||||
<div class="timeline-description">
|
||||
Phát triển các giải pháp năng lượng tiên tiến và bền vững.
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-year">2015</div>
|
||||
<div class="timeline-description">
|
||||
Mở rộng thị trường và tăng cường dịch vụ khách hàng.
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-year">2016</div>
|
||||
<div class="timeline-description">
|
||||
Đầu tư vào công nghệ mới và nâng cao chất lượng sản phẩm.
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-year">2017</div>
|
||||
<div class="timeline-description">
|
||||
Khẳng định vị thế là một trong những nhà cung cấp khí đốt hàng đầu
|
||||
trong khu vực.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!----- BUSINESS CULTURE SECTION HTML ----->
|
||||
<section class="business-culture-section" id="van-hoa-doanh-nghiep">
|
||||
<div class="culture-content">
|
||||
<h2 class="section-title">Văn Hoá Doanh Nghiệp</h2>
|
||||
|
||||
<div class="culture-container">
|
||||
<div class="culture-left">
|
||||
<div class="culture-item">
|
||||
<h3 class="culture-title">Tầm Nhìn</h3>
|
||||
<div class="culture-text">
|
||||
<p>
|
||||
Tại <strong>Kỳ Long</strong>, chúng tôi luôn đề cao việc học
|
||||
hỏi và cải tiến. Bằng việc không ngừng đổi mới, chúng tôi luôn
|
||||
hướng đến mục tiêu dẫn đầu ngành năng lượng.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="culture-image middle-image">
|
||||
<img
|
||||
src="https://i.imgur.com/l5eqS2D.png"
|
||||
alt="Gas Transport Systems"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="culture-item">
|
||||
<h3 class="culture-title">Triết Lý Kinh Doanh</h3>
|
||||
<div class="culture-text">
|
||||
<p>
|
||||
Tiến đến mục tiêu tiên bộ công nghệ để tối ưu hóa quy trình và
|
||||
cung cấp dịch vụ phân phối khí hàng đầu. Dự đoán sự thay đổi
|
||||
của thị trường và thích ứng với các xu hướng và thách thức
|
||||
mới.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="culture-right">
|
||||
<div class="culture-image">
|
||||
<img
|
||||
src="https://i.imgur.com/3xts2iI.png"
|
||||
alt="Industrial Gas Facility"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="culture-item">
|
||||
<h3 class="culture-title">Sứ Mệnh</h3>
|
||||
<div class="culture-text">
|
||||
<p>
|
||||
Tiến đến mục tiêu tiên bộ công nghệ để tối ưu hóa quy trình và
|
||||
cung cấp dịch vụ phân phối khí hàng đầu. Dự đoán sự thay đổi
|
||||
của thị trường và thích ứng với các xu hướng và thách thức
|
||||
mới.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="culture-image">
|
||||
<img
|
||||
src="https://i.imgur.com/eOMemEG.png"
|
||||
alt="Kỹ thuật viên Kỳ Long"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!----- MANAGEMENT TEAM SECTION HTML ----->
|
||||
<section class="management-team-section" id="doi-ngu-quan-ly">
|
||||
<div class="team-content">
|
||||
<h2 class="section-title">Đội ngũ quản lý</h2>
|
||||
|
||||
<div class="team-members">
|
||||
<div class="team-member">
|
||||
<div class="member-image">
|
||||
<img
|
||||
src="https://i.imgur.com/yQz0eeM.png"
|
||||
alt="Trần Kỳ Phong - Giám đốc điều hành"
|
||||
/>
|
||||
</div>
|
||||
<div class="member-info">
|
||||
<h3 class="member-name">Trần Kỳ Phong</h3>
|
||||
<p class="member-position">Giám đốc điều hành</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="team-member">
|
||||
<div class="member-image">
|
||||
<img
|
||||
src="https://i.imgur.com/miUmz82.jpeg"
|
||||
alt="Jonas Guiliani - Giám đốc mua hàng"
|
||||
/>
|
||||
</div>
|
||||
<div class="member-info">
|
||||
<h3 class="member-name">Jonas Guiliani</h3>
|
||||
<p class="member-position">Giám đốc mua hàng</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="team-member">
|
||||
<div class="member-image">
|
||||
<img
|
||||
src="https://i.imgur.com/lIeYaAP.png"
|
||||
alt="Nguyễn Hoàng Long - Giám đốc vận hành"
|
||||
/>
|
||||
</div>
|
||||
<div class="member-info">
|
||||
<h3 class="member-name">Nguyễn Hoàng Long</h3>
|
||||
<p class="member-position">Giám đốc vận hành</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer Component -->
|
||||
<div id="footer"></div>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="/components/header/header.js"></script>
|
||||
<script src="aboutPages/aboutMain.js?v=1.0"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,6 @@
|
||||
// Load footer
|
||||
fetch("components/footer/footer.html")
|
||||
.then((response) => response.text())
|
||||
.then((data) => {
|
||||
document.getElementById("footer").innerHTML = data;
|
||||
});
|
||||
@@ -0,0 +1,134 @@
|
||||
/* views\components\footer\footer.css */
|
||||
/* FOOTER SECTION CSS */
|
||||
.footer {
|
||||
background-color: #1a1a1a;
|
||||
color: #f5f5f5;
|
||||
padding: 3rem 0 1.5rem;
|
||||
font-family: "Roboto", Arial, sans-serif;
|
||||
}
|
||||
|
||||
.footer-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
|
||||
.footer-column {
|
||||
flex: 1;
|
||||
min-width: 250px;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.footer-column h4 {
|
||||
color: #ffffff;
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 1.2rem;
|
||||
font-weight: 600;
|
||||
position: relative;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.footer-column h4::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 50px;
|
||||
height: 2px;
|
||||
background-color: #3498db;
|
||||
}
|
||||
|
||||
.footer-column ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.footer-column ul li {
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
|
||||
.footer-column ul li a {
|
||||
color: #cccccc;
|
||||
text-decoration: none;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.footer-column ul li a:hover {
|
||||
color: #3498db;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.footer-column p {
|
||||
margin-bottom: 0.8rem;
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.6;
|
||||
color: #cccccc;
|
||||
}
|
||||
|
||||
.footer-column a {
|
||||
color: #3498db;
|
||||
text-decoration: none;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.footer-column a:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
border-top: 1px solid #333333;
|
||||
padding-top: 1.5rem;
|
||||
margin-top: 1rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 1.5rem 2rem 0;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
font-size: 0.9rem;
|
||||
color: #999999;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.footer-links a {
|
||||
color: #cccccc;
|
||||
text-decoration: none;
|
||||
margin: 0 0.5rem;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.footer-links a:hover {
|
||||
color: #3498db;
|
||||
}
|
||||
|
||||
/* Responsive styles */
|
||||
@media (max-width: 768px) {
|
||||
.footer-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.footer-column {
|
||||
width: 100%;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
<!-- views/components/footer/footer.html -->
|
||||
<footer class="footer">
|
||||
<div class="footer-container">
|
||||
<div class="footer-column">
|
||||
<h4>Giới Thiệu</h4>
|
||||
<ul>
|
||||
<li><a href="#" title="Sản phẩm">Sản Phẩm</a></li>
|
||||
<li><a href="#" title="Dịch vụ">Dịch Vụ</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="footer-column">
|
||||
<h4>Tin Tức</h4>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#" title="An toàn - Sức khoẻ - Môi trường"
|
||||
>An Toàn - Sức Khoẻ - Môi Trường</a
|
||||
>
|
||||
</li>
|
||||
<li><a href="#" title="Liên hệ">Liên Hệ</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="footer-column">
|
||||
<h4>Liên hệ</h4>
|
||||
<p>Lầu 12, số 27 Đinh Bộ Lĩnh, P. Bình Thạnh, TP. HCM</p>
|
||||
<p>
|
||||
Điện thoại:
|
||||
<a href="tel:+84 96 227 7912" title="Gọi cho Kỳ Long"
|
||||
>+84 96 227 7912</a
|
||||
>
|
||||
</p>
|
||||
<p>
|
||||
Email:
|
||||
<a href="mailto:info@kylong.com.vn" title="Gửi email cho Kỳ Long"
|
||||
>info@kylongtech.com</a
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-bottom">
|
||||
<div class="copyright">Thắp sáng tương lai, vững bền thành công</div>
|
||||
</div>
|
||||
</footer>
|
||||
@@ -0,0 +1,381 @@
|
||||
/* views\components\header\header.css */
|
||||
/* Top ribbon */
|
||||
.top-ribbon {
|
||||
background-color: #e84e0f;
|
||||
padding: 5px 0;
|
||||
color: white;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.ribbon-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.ribbon-logo {
|
||||
width: 30px;
|
||||
height: auto;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.ribbon-company-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ribbon-company-name {
|
||||
font-weight: bold;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
/* Custom colors and styling */
|
||||
.header {
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #ffffff;
|
||||
margin: 0 40px; /* Add margins to shorten the nav */
|
||||
}
|
||||
|
||||
.company-name {
|
||||
color: #006241;
|
||||
font-size: 1.4rem;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.company-name:hover {
|
||||
color: #006241;
|
||||
}
|
||||
|
||||
.company-slogan {
|
||||
color: #e84e0f;
|
||||
font-style: italic;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.company-year {
|
||||
color: #006241;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.contact-icon2 {
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 50%;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
color: #e84e0f;
|
||||
font-size: 1.3rem;
|
||||
border: 2px solid #e9ecef;
|
||||
}
|
||||
|
||||
.contact-icon {
|
||||
background-color: red;
|
||||
border-radius: 50%;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
color: white;
|
||||
font-size: 1.3rem;
|
||||
border: 2px solid #e9ecef;
|
||||
}
|
||||
|
||||
.contact-text {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.contact-text a {
|
||||
color: #006241;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.contact-text a:hover {
|
||||
color: #e84e0f;
|
||||
}
|
||||
|
||||
.nav-container {
|
||||
background-color: #30875f;
|
||||
margin: 0 40px; /* Add margins to shorten the nav */
|
||||
border-radius: 25px; /* Add rounded corners */
|
||||
box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2); /* Add subtle shadow */
|
||||
}
|
||||
|
||||
.nav-container .container-fluid {
|
||||
padding: 0 30px; /* Adjust internal padding */
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: white !important;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
padding: 15px 30px !important; /* Increased horizontal padding for better centering */
|
||||
transition: all var(--transition-speed);
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
text-align: center; /* Center the text within the link */
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
color: #e84e0f !important;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.nav-link.active {
|
||||
color: #e84e0f !important;
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* Separators - positioned to create equal spacing */
|
||||
.navbar-nav .separator {
|
||||
display: inline-block;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
border-radius: 50%;
|
||||
margin: 0 15px; /* space around separator */
|
||||
|
||||
/* stacked dots */
|
||||
box-shadow: 0 6px 0 rgba(255, 255, 255, 0.6),
|
||||
0 -6px 0 rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 80px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
/* Mobile Sidebar Styles */
|
||||
.mobile-menu-btn {
|
||||
display: none;
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.8rem;
|
||||
color: #006241;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.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 {
|
||||
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);
|
||||
}
|
||||
|
||||
.sidebar-contact {
|
||||
margin-top: 20px;
|
||||
color: white;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.sidebar-contact div {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* Media Queries */
|
||||
@media (max-width: 1200px) {
|
||||
.header,
|
||||
.nav-container {
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding: 15px 20px !important;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.header,
|
||||
.nav-container {
|
||||
margin: 0 15px;
|
||||
}
|
||||
|
||||
.company-name {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding: 12px 15px !important;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.separator {
|
||||
margin: 0 10px !important;
|
||||
}
|
||||
|
||||
.banner-container {
|
||||
height: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.top-ribbon {
|
||||
display: none; /* Hide ribbon on mobile */
|
||||
}
|
||||
|
||||
.header,
|
||||
.nav-container {
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.nav-container {
|
||||
display: none; /* Hide desktop nav on mobile */
|
||||
}
|
||||
|
||||
.mobile-menu-btn {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.header .col-lg-6:first-child {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.company-info {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.contact-section {
|
||||
display: none; /* Hide contact info on mobile - it will be in sidebar */
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.company-name {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.company-slogan,
|
||||
.company-year {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.banner-container {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
/* Show floating menu button on mobile */
|
||||
.floating-menu-btn {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.company-name {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
.banner-container {
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.banner-indicator {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
.floating-menu-btn {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,148 @@
|
||||
<!-- views\components\header\header.html -->
|
||||
<!DOCTYPE html>
|
||||
<html lang="vi">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Kỳ Long Header</title>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Top Orange Ribbon -->
|
||||
<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">
|
||||
<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"
|
||||
title="Trang Chủ Kỳ Long - Dịch vụ khí đốt công nghiệp"
|
||||
>TRANG CHỦ</a
|
||||
>
|
||||
<a
|
||||
href="/aboutMain"
|
||||
class="nav-link"
|
||||
id="about"
|
||||
title="Giới thiệu về Công ty Kỳ Long - Chuyên gia khí đốt"
|
||||
>GIỚI THIỆU</a
|
||||
>
|
||||
<a
|
||||
href="/productMain"
|
||||
class="nav-link"
|
||||
id="products"
|
||||
title="Sản phẩm khí đốt và thiết bị công nghiệp Kỳ Long"
|
||||
>SẢN PHẨM</a
|
||||
>
|
||||
<a
|
||||
href="/serviceMain"
|
||||
class="nav-link"
|
||||
id="services"
|
||||
title="Dịch vụ cung cấp khí đốt công nghiệp Kỳ Long"
|
||||
>DỊCH VỤ</a
|
||||
>
|
||||
<a
|
||||
href="/newsMain"
|
||||
class="nav-link"
|
||||
id="news"
|
||||
title="Tin tức và cập nhật từ Kỳ Long"
|
||||
>TIN TỨC</a
|
||||
>
|
||||
<a
|
||||
href="/lien-he"
|
||||
class="nav-link"
|
||||
id="contact"
|
||||
title="Liên hệ với Kỳ Long - Đối tác khí đốt tin cậy"
|
||||
>LIÊN HỆ</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,97 @@
|
||||
//views/components/header/header.js
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
// Sidebar functionality
|
||||
const mobileMenuBtn = document.querySelector(".mobile-menu-btn");
|
||||
const floatingMenuBtn = document.getElementById("floatingMenuBtn");
|
||||
const closeSidebarBtn = document.querySelector(".close-sidebar");
|
||||
const sidebar = document.getElementById("sidebar");
|
||||
const overlay = document.getElementById("sidebarOverlay");
|
||||
|
||||
// Open sidebar
|
||||
function openSidebar() {
|
||||
sidebar.classList.add("open");
|
||||
overlay.style.display = "block";
|
||||
document.body.style.overflow = "hidden"; // Prevent scrolling
|
||||
}
|
||||
|
||||
mobileMenuBtn.addEventListener("click", openSidebar);
|
||||
floatingMenuBtn.addEventListener("click", openSidebar);
|
||||
|
||||
// Close sidebar
|
||||
function closeSidebar() {
|
||||
sidebar.classList.remove("open");
|
||||
overlay.style.display = "none";
|
||||
document.body.style.overflow = ""; // Enable scrolling
|
||||
}
|
||||
|
||||
closeSidebarBtn.addEventListener("click", closeSidebar);
|
||||
overlay.addEventListener("click", closeSidebar);
|
||||
|
||||
// Close sidebar when a nav link is clicked
|
||||
const sidebarLinks = document.querySelectorAll(".sidebar-nav .nav-link");
|
||||
sidebarLinks.forEach((link) => {
|
||||
link.addEventListener("click", closeSidebar);
|
||||
});
|
||||
|
||||
// Banner functionality
|
||||
const slides = document.querySelectorAll(".banner-slide");
|
||||
const indicators = document.querySelectorAll(".banner-indicator");
|
||||
const prevBtn = document.getElementById("prevBanner");
|
||||
const nextBtn = document.getElementById("nextBanner");
|
||||
let currentSlide = 0;
|
||||
|
||||
// Function to show a specific slide
|
||||
function showSlide(index) {
|
||||
// Hide all slides
|
||||
slides.forEach((slide) => slide.classList.remove("active"));
|
||||
indicators.forEach((indicator) => indicator.classList.remove("active"));
|
||||
|
||||
// Ensure index is within bounds
|
||||
if (index < 0) {
|
||||
currentSlide = slides.length - 1;
|
||||
} else if (index >= slides.length) {
|
||||
currentSlide = 0;
|
||||
} else {
|
||||
currentSlide = index;
|
||||
}
|
||||
|
||||
// Show the current slide
|
||||
slides[currentSlide].classList.add("active");
|
||||
indicators[currentSlide].classList.add("active");
|
||||
}
|
||||
|
||||
// Event listeners for navigation buttons
|
||||
prevBtn.addEventListener("click", () => {
|
||||
showSlide(currentSlide - 1);
|
||||
});
|
||||
|
||||
nextBtn.addEventListener("click", () => {
|
||||
showSlide(currentSlide + 1);
|
||||
});
|
||||
|
||||
// Event listeners for indicator dots
|
||||
indicators.forEach((indicator) => {
|
||||
indicator.addEventListener("click", () => {
|
||||
const index = parseInt(indicator.getAttribute("data-index"));
|
||||
showSlide(index);
|
||||
});
|
||||
});
|
||||
|
||||
// Hide floating button when sidebar is open
|
||||
const observer = new MutationObserver(function (mutations) {
|
||||
mutations.forEach(function (mutation) {
|
||||
if (mutation.attributeName === "class") {
|
||||
if (sidebar.classList.contains("open")) {
|
||||
floatingMenuBtn.style.display = "none";
|
||||
} else {
|
||||
floatingMenuBtn.style.display = "flex";
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
observer.observe(sidebar, {
|
||||
attributes: true,
|
||||
attributeFilter: ["class"],
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,56 @@
|
||||
// views/components/header/headerLoader.js
|
||||
function loadHeader() {
|
||||
// Check if header is already loaded
|
||||
if (document.querySelector(".header")) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Set Bootstrap theme before loading header
|
||||
function setBootstrapTheme() {
|
||||
const prefersDark = window.matchMedia(
|
||||
"(prefers-color-scheme: dark)"
|
||||
).matches;
|
||||
document.documentElement.setAttribute(
|
||||
"data-bs-theme",
|
||||
prefersDark ? "dark" : "light"
|
||||
);
|
||||
}
|
||||
|
||||
// Set theme immediately
|
||||
setBootstrapTheme();
|
||||
|
||||
// Create a new XMLHttpRequest object
|
||||
const xhr = new XMLHttpRequest();
|
||||
|
||||
// Configure it to GET the header.html file
|
||||
xhr.open("GET", "/components/header/header.html", true);
|
||||
|
||||
// Set up the callback function when the request completes
|
||||
xhr.onload = function () {
|
||||
if (this.status >= 200 && this.status < 300) {
|
||||
// Insert the header HTML at the beginning of the body
|
||||
document.body.insertAdjacentHTML("afterbegin", this.response);
|
||||
|
||||
// Ensure theme is set after header is loaded
|
||||
setBootstrapTheme();
|
||||
|
||||
// Listen for changes in system preference
|
||||
window
|
||||
.matchMedia("(prefers-color-scheme: dark)")
|
||||
.addEventListener("change", setBootstrapTheme);
|
||||
} else {
|
||||
console.error("Failed to load header:", this.statusText);
|
||||
}
|
||||
};
|
||||
|
||||
// Set up error handling
|
||||
xhr.onerror = function () {
|
||||
console.error("Error loading header");
|
||||
};
|
||||
|
||||
// Send the request
|
||||
xhr.send();
|
||||
}
|
||||
|
||||
// Load the header when the script is executed
|
||||
loadHeader();
|
||||
@@ -0,0 +1,609 @@
|
||||
/* views\contactPage\contactMain.css */
|
||||
/* CONTACT PAGE SPECIFIC STYLES */
|
||||
/* 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;
|
||||
}
|
||||
|
||||
/* Contact Section */
|
||||
.contact-section {
|
||||
padding: 60px 5%;
|
||||
background-color: #f9f9f9;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.page-intro {
|
||||
text-align: center;
|
||||
color: #30875f;
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: 40px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.page-intro:after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 80px;
|
||||
height: 3px;
|
||||
background-color: #e84e0f;
|
||||
margin: 15px auto 0;
|
||||
}
|
||||
|
||||
.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;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.contact-form::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 5px;
|
||||
height: 100%;
|
||||
background: linear-gradient(to bottom, #30875f, #e84e0f);
|
||||
}
|
||||
|
||||
.contact-form:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.contact-form h2 {
|
||||
color: #30875f;
|
||||
font-size: 1.6rem;
|
||||
margin-bottom: 30px;
|
||||
position: relative;
|
||||
padding-bottom: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.contact-form h2::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 60px;
|
||||
height: 3px;
|
||||
background: linear-gradient(to right, #30875f, #e84e0f);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* Form Progress Bar */
|
||||
.form-progress {
|
||||
height: 4px;
|
||||
background: #eee;
|
||||
width: 100%;
|
||||
margin-bottom: 25px;
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.form-progress-bar {
|
||||
height: 100%;
|
||||
width: 0;
|
||||
background: linear-gradient(to right, #30875f, #e84e0f);
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
/* Improved Form Groups */
|
||||
.form-group {
|
||||
margin-bottom: 25px;
|
||||
position: relative;
|
||||
animation: fadeIn 0.5s ease forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.form-group:nth-child(1) {
|
||||
animation-delay: 0.1s;
|
||||
}
|
||||
|
||||
.form-group:nth-child(2) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.form-group:nth-child(3) {
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
|
||||
.form-group:nth-child(4) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
font-weight: 500;
|
||||
margin-bottom: 10px;
|
||||
color: #444;
|
||||
transition: color 0.3s;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
/* Required field indicator */
|
||||
.form-group label.required::after {
|
||||
content: " *";
|
||||
color: #e84e0f;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group textarea {
|
||||
width: 100%;
|
||||
padding: 14px 16px 14px 45px;
|
||||
border: 2px solid #eaeaea;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
transition: all 0.3s;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.form-group input:hover,
|
||||
.form-group textarea:hover {
|
||||
border-color: #d0d0d0;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group textarea:focus {
|
||||
outline: none;
|
||||
border-color: #30875f;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 0 4px rgba(48, 135, 95, 0.1);
|
||||
}
|
||||
|
||||
.form-group.focused label {
|
||||
color: #30875f;
|
||||
}
|
||||
|
||||
.form-group textarea {
|
||||
resize: vertical;
|
||||
min-height: 140px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Input Icons */
|
||||
.form-group::before {
|
||||
font-family: "Font Awesome 6 Free";
|
||||
font-weight: 900;
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
top: 46px;
|
||||
color: #999;
|
||||
z-index: 1;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.form-group:nth-child(1)::before {
|
||||
content: "\f007"; /* User icon */
|
||||
}
|
||||
|
||||
.form-group:nth-child(2)::before {
|
||||
content: "\f0e0"; /* Email icon */
|
||||
}
|
||||
|
||||
.form-group:nth-child(3)::before {
|
||||
content: "\f095"; /* Phone icon */
|
||||
}
|
||||
|
||||
.form-group:nth-child(4)::before {
|
||||
content: "\f075"; /* Message icon */
|
||||
}
|
||||
|
||||
.form-group input:focus + .form-group::before,
|
||||
.form-group textarea:focus + .form-group::before {
|
||||
color: #30875f;
|
||||
}
|
||||
|
||||
/* Validation styling */
|
||||
.form-group.success input,
|
||||
.form-group.success textarea {
|
||||
border-color: #2ecc71;
|
||||
}
|
||||
|
||||
.form-group.error input,
|
||||
.form-group.error textarea {
|
||||
border-color: #e74c3c;
|
||||
}
|
||||
|
||||
.form-group .error-message {
|
||||
color: #e74c3c;
|
||||
font-size: 0.85rem;
|
||||
margin-top: 5px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.form-group.error .error-message {
|
||||
display: block;
|
||||
animation: fadeIn 0.3s ease forwards;
|
||||
}
|
||||
|
||||
/* Enhanced Submit Button */
|
||||
.submit-button {
|
||||
background: linear-gradient(to right, #30875f, #2a7954);
|
||||
color: white;
|
||||
padding: 16px 40px;
|
||||
border: none;
|
||||
border-radius: 50px;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
display: inline-block;
|
||||
box-shadow: 0 4px 15px rgba(48, 135, 95, 0.3);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
animation: fadeIn 0.5s ease forwards;
|
||||
animation-delay: 0.5s;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.submit-button:hover {
|
||||
background: linear-gradient(to right, #e84e0f, #d24510);
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 6px 20px rgba(232, 78, 15, 0.4);
|
||||
}
|
||||
|
||||
.submit-button:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: 0 2px 10px rgba(232, 78, 15, 0.3);
|
||||
}
|
||||
|
||||
.submit-button::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 50%;
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
transition: transform 0.6s, opacity 0.6s;
|
||||
}
|
||||
|
||||
.submit-button:hover::after {
|
||||
transform: scale(15);
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.contact-details::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 5px;
|
||||
height: 100%;
|
||||
background: linear-gradient(to bottom, #e84e0f, #30875f);
|
||||
}
|
||||
|
||||
.contact-details:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.contact-details h2 {
|
||||
color: #30875f;
|
||||
font-size: 1.6rem;
|
||||
margin-bottom: 30px;
|
||||
position: relative;
|
||||
padding-bottom: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.contact-details h2::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 60px;
|
||||
height: 3px;
|
||||
background: linear-gradient(to right, #e84e0f, #30875f);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.contact-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 1px solid #eee;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.contact-item:hover {
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
.contact-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.contact-item i {
|
||||
font-size: 20px;
|
||||
color: #30875f;
|
||||
margin-right: 15px;
|
||||
margin-top: 3px;
|
||||
transition: color 0.3s, transform 0.3s;
|
||||
}
|
||||
|
||||
.contact-item:hover i {
|
||||
color: #e84e0f;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.contact-item p {
|
||||
margin: 0;
|
||||
color: #444;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.contact-item a {
|
||||
color: #30875f;
|
||||
text-decoration: none;
|
||||
transition: color 0.3s;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.contact-item a::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
bottom: -2px;
|
||||
left: 0;
|
||||
background-color: #e84e0f;
|
||||
transform: scaleX(0);
|
||||
transform-origin: bottom right;
|
||||
transition: transform 0.3s ease-out;
|
||||
}
|
||||
|
||||
.contact-item a:hover {
|
||||
color: #e84e0f;
|
||||
}
|
||||
|
||||
.contact-item a:hover::after {
|
||||
transform: scaleX(1);
|
||||
transform-origin: bottom left;
|
||||
}
|
||||
|
||||
.map-container {
|
||||
margin-top: 25px;
|
||||
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;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.map-container:hover {
|
||||
transform: scale(1.01);
|
||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.map-container::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(48, 135, 95, 0.05);
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.map-container:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.map-container iframe {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* Animation Keyframes */
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 rgba(48, 135, 95, 0.4);
|
||||
}
|
||||
70% {
|
||||
box-shadow: 0 0 0 10px rgba(48, 135, 95, 0);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 rgba(48, 135, 95, 0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 1200px) {
|
||||
.contact-section {
|
||||
padding: 50px 4%;
|
||||
}
|
||||
|
||||
.contact-form,
|
||||
.contact-details {
|
||||
padding: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.page-intro {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.contact-container {
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.contact-form h2,
|
||||
.contact-details h2 {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.contact-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.contact-form,
|
||||
.contact-details {
|
||||
width: 100%;
|
||||
padding: 25px;
|
||||
}
|
||||
|
||||
.page-intro {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.contact-form h2,
|
||||
.contact-details h2 {
|
||||
font-size: 1.4rem;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group textarea {
|
||||
padding: 12px 12px 12px 40px;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.form-group::before {
|
||||
top: 43px;
|
||||
}
|
||||
|
||||
.submit-button {
|
||||
padding: 14px 30px;
|
||||
font-size: 1rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.contact-item i {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.contact-section {
|
||||
padding: 40px 15px;
|
||||
}
|
||||
|
||||
.page-intro {
|
||||
font-size: 1.4rem;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.contact-form,
|
||||
.contact-details {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.contact-form h2,
|
||||
.contact-details h2 {
|
||||
font-size: 1.3rem;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group textarea {
|
||||
padding: 11px 11px 11px 38px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.form-group::before {
|
||||
top: 40px;
|
||||
left: 14px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.submit-button {
|
||||
padding: 12px 25px;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.contact-item {
|
||||
margin-bottom: 15px;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,307 @@
|
||||
<!-- views\contactPages\contactMain.html -->
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Liên Hệ - 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="contactPages/contactMain.css" />
|
||||
</head>
|
||||
<link
|
||||
rel="preload"
|
||||
href="components/header/header.html"
|
||||
as="fetch"
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
<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>
|
||||
|
||||
<!----- 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="/submit" 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="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 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>
|
||||
</section>
|
||||
|
||||
<!-- Footer Component -->
|
||||
<div id="footer"></div>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="/components/header/header.js"></script>
|
||||
<script src="contactPages/contactMain.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,206 @@
|
||||
////views\contactPage\contactMain.js
|
||||
// Load footer
|
||||
fetch("components/footer/footer.html")
|
||||
.then((response) => response.text())
|
||||
.then((data) => {
|
||||
document.getElementById("footer").innerHTML = data;
|
||||
});
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
// Focus and blur effects for form elements
|
||||
const formGroups = document.querySelectorAll(".form-group");
|
||||
|
||||
formGroups.forEach((group) => {
|
||||
const input = group.querySelector("input, textarea");
|
||||
|
||||
if (input) {
|
||||
input.addEventListener("focus", () => {
|
||||
group.classList.add("focused");
|
||||
});
|
||||
|
||||
input.addEventListener("blur", () => {
|
||||
if (input.value.trim() === "") {
|
||||
group.classList.remove("focused");
|
||||
}
|
||||
});
|
||||
|
||||
// Check initial state (for browser autofill)
|
||||
if (input.value.trim() !== "") {
|
||||
group.classList.add("focused");
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Form progress bar
|
||||
const progressBar = document.querySelector(".form-progress-bar");
|
||||
const formInputs = document.querySelectorAll(
|
||||
".contact-form input, .contact-form textarea"
|
||||
);
|
||||
const totalInputs = formInputs.length;
|
||||
|
||||
function updateProgress() {
|
||||
let filledInputs = 0;
|
||||
formInputs.forEach((input) => {
|
||||
if (input.value.trim() !== "") {
|
||||
filledInputs++;
|
||||
}
|
||||
});
|
||||
|
||||
const progressPercent = (filledInputs / totalInputs) * 100;
|
||||
progressBar.style.width = progressPercent + "%";
|
||||
}
|
||||
|
||||
formInputs.forEach((input) => {
|
||||
input.addEventListener("input", updateProgress);
|
||||
// Also update on change for autocomplete
|
||||
input.addEventListener("change", updateProgress);
|
||||
});
|
||||
|
||||
// Initial check for any pre-filled values
|
||||
updateProgress();
|
||||
|
||||
// Form message display functions
|
||||
function showMessage(type, message) {
|
||||
const messagesContainer = document.getElementById("form-messages");
|
||||
|
||||
// Clear previous messages
|
||||
messagesContainer.innerHTML = "";
|
||||
|
||||
// Create message element
|
||||
const messageElement = document.createElement("div");
|
||||
messageElement.className =
|
||||
type === "success" ? "success-message" : "form-error-message";
|
||||
messageElement.textContent = message;
|
||||
|
||||
// Add to container
|
||||
messagesContainer.appendChild(messageElement);
|
||||
|
||||
// Scroll to message
|
||||
messageElement.scrollIntoView({ behavior: "smooth", block: "nearest" });
|
||||
|
||||
// Remove message after delay
|
||||
setTimeout(() => {
|
||||
messageElement.classList.add("fade-out");
|
||||
setTimeout(() => {
|
||||
if (messagesContainer.contains(messageElement)) {
|
||||
messagesContainer.removeChild(messageElement);
|
||||
}
|
||||
}, 500);
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
// Form validation
|
||||
const contactForm = document.getElementById("contactForm");
|
||||
|
||||
if (contactForm) {
|
||||
contactForm.addEventListener("submit", function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
let isValid = true;
|
||||
|
||||
// Validate each field
|
||||
formGroups.forEach((group) => {
|
||||
const input = group.querySelector("input, textarea");
|
||||
const errorMessage = group.querySelector(".error-message");
|
||||
|
||||
if (input.required && input.value.trim() === "") {
|
||||
group.classList.add("error");
|
||||
isValid = false;
|
||||
} else {
|
||||
group.classList.remove("error");
|
||||
|
||||
// Additional validation for email
|
||||
if (input.type === "email" && input.value.trim() !== "") {
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
if (!emailRegex.test(input.value.trim())) {
|
||||
group.classList.add("error");
|
||||
if (errorMessage) {
|
||||
errorMessage.textContent = "Vui lòng nhập địa chỉ email hợp lệ";
|
||||
}
|
||||
isValid = false;
|
||||
}
|
||||
}
|
||||
|
||||
// Additional validation for phone (optional)
|
||||
if (input.type === "tel" && input.value.trim() !== "") {
|
||||
// Basic phone validation - adjust according to Vietnamese phone number format
|
||||
const phoneRegex = /^[0-9+\s()-]{10,15}$/;
|
||||
if (!phoneRegex.test(input.value.trim())) {
|
||||
group.classList.add("error");
|
||||
if (errorMessage) {
|
||||
errorMessage.textContent = "Vui lòng nhập số điện thoại hợp lệ";
|
||||
}
|
||||
isValid = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
if (isValid) {
|
||||
// Get form data
|
||||
const formData = new FormData(contactForm);
|
||||
const formDataObject = {};
|
||||
|
||||
// Convert FormData to a regular object
|
||||
formData.forEach((value, key) => {
|
||||
formDataObject[key] = value;
|
||||
});
|
||||
|
||||
// Show loading state
|
||||
const submitButton = contactForm.querySelector(".submit-button");
|
||||
const originalButtonText = submitButton.textContent;
|
||||
submitButton.textContent = "Đang gửi...";
|
||||
submitButton.disabled = true;
|
||||
|
||||
// Send AJAX request
|
||||
fetch("/submit", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(formDataObject),
|
||||
})
|
||||
.then((response) => {
|
||||
if (!response.ok) {
|
||||
// If status is not 2xx, treat as error
|
||||
throw new Error(`HTTP error! Status: ${response.status}`);
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then((data) => {
|
||||
// Reset button state
|
||||
submitButton.textContent = originalButtonText;
|
||||
submitButton.disabled = false;
|
||||
|
||||
if (data.success) {
|
||||
// Show success message
|
||||
showMessage("success", data.message);
|
||||
|
||||
// Reset form and progress bar
|
||||
contactForm.reset();
|
||||
updateProgress();
|
||||
|
||||
// Reset focus states
|
||||
formGroups.forEach((group) => {
|
||||
group.classList.remove("focused");
|
||||
});
|
||||
} else {
|
||||
// Show error message
|
||||
showMessage("error", data.message);
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Error:", error);
|
||||
submitButton.textContent = originalButtonText;
|
||||
submitButton.disabled = false;
|
||||
|
||||
// Show error message
|
||||
showMessage(
|
||||
"error",
|
||||
"Đã xảy ra lỗi khi gửi tin nhắn. Vui lòng thử lại sau."
|
||||
);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,712 @@
|
||||
<!-- views/homePages/homeMain.html -->
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>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="homePages/homeMain.css?v=1.8" />
|
||||
</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>
|
||||
|
||||
<!-- BANNER SECTION -->
|
||||
<div class="banner">
|
||||
<div class="banner-container">
|
||||
<!-- Vimeo Video as first item -->
|
||||
<div class="banner-item">
|
||||
<div class="video-container">
|
||||
<iframe
|
||||
src=""
|
||||
frameborder="0"
|
||||
allow="
|
||||
autoplay;
|
||||
fullscreen;
|
||||
picture-in-picture;
|
||||
clipboard-write;
|
||||
encrypted-media;
|
||||
web-share;
|
||||
"
|
||||
referrerpolicy="strict-origin-when-cross-origin"
|
||||
title="FB-4-Cái Mép.mp4"
|
||||
allowfullscreen
|
||||
>
|
||||
</iframe>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Rest of the images -->
|
||||
<div class="banner-item">
|
||||
<img
|
||||
src="https://ik.imagekit.io/1e8470bv5/homeBanner/homeBanner0.png?updatedAt=1760188122555"
|
||||
alt="Home Banner 0"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="banner-item">
|
||||
<img
|
||||
src="https://ik.imagekit.io/1e8470bv5/homeBanner/homeBanner1.png?updatedAt=1760188224652"
|
||||
alt="Home Banner 1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="banner-item">
|
||||
<img
|
||||
src="https://ik.imagekit.io/1e8470bv5/homeBanner/homeBanner2.png?updatedAt=1760188285759"
|
||||
alt="Home Banner 2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="banner-item">
|
||||
<img
|
||||
src="https://ik.imagekit.io/1e8470bv5/homeBanner/homeBanner3.png?updatedAt=1760188326796"
|
||||
alt="Home Banner 3"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Navigation Controls -->
|
||||
<button class="banner-nav banner-prev">❮</button>
|
||||
<button class="banner-nav banner-next">❯</button>
|
||||
|
||||
<!-- Dot Indicators -->
|
||||
<div class="banner-controls">
|
||||
<div class="banner-dot active" data-slide="0"></div>
|
||||
<div class="banner-dot" data-slide="1"></div>
|
||||
<div class="banner-dot" data-slide="2"></div>
|
||||
<div class="banner-dot" data-slide="3"></div>
|
||||
<div class="banner-dot" data-slide="4"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!----- END OF BANNER SECTION HTML ----->
|
||||
|
||||
<!----- PRODUCT SECTION HTML ----->
|
||||
<section class="products-section">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h2 class="section-title">
|
||||
••• <span class="flower-icon">✿</span> •••
|
||||
<br />
|
||||
SẢN PHẨM
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<!-- CNG Product -->
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="product-card">
|
||||
<img
|
||||
src="https://ik.imagekit.io/1e8470bv5/homeProduct/homeProduct0.png?updatedAt=1754333478026"
|
||||
alt="Khí thiên nhiên nén (CNG)"
|
||||
class="product-image"
|
||||
/>
|
||||
<div class="product-content">
|
||||
<h3 class="product-title">Khí thiên nhiên nén (CNG)</h3>
|
||||
<p class="product-description">
|
||||
CNG (Compressed Natural Gas) là khí thiên nhiên có thành phần
|
||||
chủ yếu là CH₄ - Methane (88%), không mùi, không màu, không
|
||||
độc hại.
|
||||
<br /><br />
|
||||
Khí thiên nhiên được nén lại áp suất 200 - 250 bar để tiết
|
||||
kiệm khoảng 97% thể tích, giảm chi phí vận chuyển.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- LNG Product -->
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="product-card">
|
||||
<img
|
||||
src="https://ik.imagekit.io/1e8470bv5/homeProduct/homeProduct1.png?updatedAt=1754333513507"
|
||||
alt="Khí thiên nhiên hóa lỏng (LNG)"
|
||||
class="product-image"
|
||||
/>
|
||||
<div class="product-content">
|
||||
<h3 class="product-title">Khí thiên nhiên hóa lỏng (LNG)</h3>
|
||||
<p class="product-description">
|
||||
LNG (Liquefied Natural Gas) là khí thiên nhiên hóa lỏng có
|
||||
thành phần chủ yếu là CH₄ - methane được làm lạnh đến nhiệt độ
|
||||
khoảng -162°C.
|
||||
<br /><br />
|
||||
Quá trình làm lạnh giúp giảm 600 lần thể tích và làm cho việc
|
||||
vận chuyển đến nơi tiêu thụ được dễ vận chuyển hơn.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Biogas Product -->
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="product-card">
|
||||
<img
|
||||
src="https://ik.imagekit.io/1e8470bv5/homeProduct/homeProduct2.png?updatedAt=1754333579166"
|
||||
alt="Năng lượng tái tạo (Biogas)"
|
||||
class="product-image"
|
||||
/>
|
||||
<div class="product-content">
|
||||
<h3 class="product-title">Năng lượng tái tạo (Biogas)</h3>
|
||||
<p class="product-description">
|
||||
Ngày nay trong sản xuất, sử dụng khí Biogas sẽ mang lại những
|
||||
lợi ích to lớn trong việc tạo đỡ nguồn nguyên liệu để phục vụ
|
||||
trong đỡi sống sinh hoạt hàng ngày.
|
||||
<br /><br />
|
||||
Khi sinh học Biogas là một trong những sáng kiến mang lại giá
|
||||
trị và cung cấp lớn cho con người cũng như môi trường sống
|
||||
hiện nay.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="decorative-bg"></div>
|
||||
</section>
|
||||
<!----- END OF PRODUCT SECTION HTML ----->
|
||||
|
||||
<!---- ABOUT SECTION HTML ----->
|
||||
<section class="about-section">
|
||||
<div class="about-container">
|
||||
<div class="about-subtitle">GIỚI THIỆU VỀ DOANH NGHIỆP</div>
|
||||
<h1 class="about-title">
|
||||
CÔNG TY TNHH ĐẦU TƯ THƯƠNG MẠI DỊCH VỤ KỲ LONG
|
||||
</h1>
|
||||
<div class="about-title-underline"></div>
|
||||
|
||||
<p class="about-description">
|
||||
<strong>Chào mừng đến với Công ty KỲ LONG</strong>, một công ty năng
|
||||
lượng uy tín có nhiều kinh nghiệm trong việc cung cấp khí đốt tự nhiên
|
||||
cho các khách hàng công nghiệp.
|
||||
</p>
|
||||
|
||||
<p class="about-description">
|
||||
Cam kết mạnh mẽ của chúng tôi trong việc làm hài lòng khách hàng và
|
||||
thúc đẩy đổi mới đã giúp chúng tôi trở thành một đối tác đáng tin cậy
|
||||
cho các doanh nghiệp đang tìm kiếm các giải pháp năng lượng đáng tin
|
||||
cậy.
|
||||
</p>
|
||||
|
||||
<p class="about-description">
|
||||
Đội ngũ kỹ sư tận tâm của chúng tôi đảm bảo sự tròn trụ và tối ưu hóa
|
||||
mức tiêu thụ năng lượng cho mọi khách hàng, sử dụng công nghệ tiền
|
||||
tiến nhất và các phương pháp tiếp cận sáng tạo.
|
||||
</p>
|
||||
|
||||
<p class="about-description">
|
||||
Hãy tham gia cùng chúng tôi trong nỗ lực thúc đẩy một tương lai sạch
|
||||
hơn, bền vững hơn và thịnh vượng về kinh tế cho các ngành công nghiệp
|
||||
khác nhau.
|
||||
</p>
|
||||
|
||||
<div class="about-features-section">
|
||||
<div class="about-features-title">TẦM NHÌN VÀ SỨ MỆNH</div>
|
||||
|
||||
<div class="about-feature-item">
|
||||
<span class="about-feature-number">1. Sứ Mệnh</span>
|
||||
<div class="about-feature-text">
|
||||
Tiến đến mục tiêu tiến bộ công nghệ để tối ưu hóa quy trình và
|
||||
cung cấp dịch vụ phân phối khí hàng đầu.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="about-feature-item">
|
||||
<div class="about-feature-text">
|
||||
Dự đoán sự thay đổi của thị trường và thích ứng với các xu hướng
|
||||
và thách thức mới.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="about-cta-container">
|
||||
<a href="/aboutMain" class="about-cta-button">
|
||||
<span>XEM THÊM THÔNG TIN</span>
|
||||
<span class="arrow">⟶</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!---- END OF ABOUT SECTION HTML ----->
|
||||
|
||||
<!----- PRODUCTS & SERVICES SECTION HTML ----->
|
||||
<section class="products-services-section">
|
||||
<div class="ps-container">
|
||||
<div class="ps-header">
|
||||
<h2 class="ps-title">SẢN PHẨM - DỊCH VỤ</h2>
|
||||
<div class="ps-subtitle">Hoạt động chủ lực</div>
|
||||
</div>
|
||||
|
||||
<div class="ps-content">
|
||||
<!-- First Row - 3 Cards -->
|
||||
<div class="ps-row">
|
||||
<div class="ps-card">
|
||||
<div class="ps-icon">
|
||||
<i class="fas fa-fill-drip"></i>
|
||||
</div>
|
||||
<h3 class="ps-card-title">
|
||||
<a
|
||||
href="/productMain#production"
|
||||
title="Sản xuất sản phẩm dầu mỏ"
|
||||
>
|
||||
NHIÊN LIỆU
|
||||
</a>
|
||||
</h3>
|
||||
<p class="ps-card-description">
|
||||
Sản xuất, sang chiết khí dầu mỏ hoá lỏng (LPG), phân phối khí
|
||||
dầu mỏ hoá lỏng (LPG) bằng đường ống
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="ps-card">
|
||||
<div class="ps-icon">
|
||||
<i class="fas fa-wrench"></i>
|
||||
</div>
|
||||
<h3 class="ps-card-title">
|
||||
<a
|
||||
href="/productMain#production"
|
||||
title="Sản xuất khí đốt và phân phối"
|
||||
>
|
||||
SẢN XUẤT
|
||||
</a>
|
||||
</h3>
|
||||
<p class="ps-card-description">
|
||||
Sản xuất khí đốt, phân phối nhiên liệu khí, sản xuất hơi nước,
|
||||
nước nóng, điều hoà không khí
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="ps-card">
|
||||
<div class="ps-icon">
|
||||
<i class="fas fa-store"></i>
|
||||
</div>
|
||||
<h3 class="ps-card-title">
|
||||
<a
|
||||
href="/productMain#wholesale"
|
||||
title="Bán buôn nhiên liệu và kim loại"
|
||||
>
|
||||
BÁN BUÔN
|
||||
</a>
|
||||
</h3>
|
||||
<p class="ps-card-description">
|
||||
Bán buôn nhiên liệu rắn, lỏng, khí, kim loại, quặng kim loại,
|
||||
vật liệu xây dựng
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Second Row - 3 Cards -->
|
||||
<div class="ps-row">
|
||||
<div class="ps-card">
|
||||
<div class="ps-icon">
|
||||
<i class="fas fa-shipping-fast"></i>
|
||||
</div>
|
||||
<h3 class="ps-card-title">
|
||||
<a
|
||||
href="/serviceMain#van-tai"
|
||||
title="Dịch vụ vận tải và logistics"
|
||||
>
|
||||
VẬN TẢI
|
||||
</a>
|
||||
</h3>
|
||||
<p class="ps-card-description">
|
||||
Vận tải hàng hóa đường bộ, vận tải hành khách và hoạt động dịch
|
||||
vụ hỗ trợ vận tải
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="ps-card">
|
||||
<div class="ps-icon">
|
||||
<i class="fas fa-hammer"></i>
|
||||
</div>
|
||||
<h3 class="ps-card-title">
|
||||
<a
|
||||
href="/serviceMain#xay-dung"
|
||||
title="Xây dựng và lắp đặt công nghiệp"
|
||||
>
|
||||
XÂY DỰNG & LẮP ĐẶT
|
||||
</a>
|
||||
</h3>
|
||||
<p class="ps-card-description">
|
||||
Xây dựng nhà ở, nhà công nghiệp, lắp đặt hệ thống điện, cấp
|
||||
thoát nước công nghiệp
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="ps-card">
|
||||
<div class="ps-icon">
|
||||
<i class="fas fa-dolly"></i>
|
||||
</div>
|
||||
<h3 class="ps-card-title">
|
||||
<a
|
||||
href="/serviceMain#cho-thue"
|
||||
title="Cho thuê máy móc và thiết bị"
|
||||
>
|
||||
CHO THUÊ
|
||||
</a>
|
||||
</h3>
|
||||
<p class="ps-card-description">
|
||||
Cho thuê xe có động cơ, máy móc thiết bị xây dựng, thiết bị văn
|
||||
phòng
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Third Row - 2 Cards (Centered) -->
|
||||
<div class="ps-row ps-row-centered">
|
||||
<div class="ps-card">
|
||||
<div class="ps-icon">
|
||||
<i class="fas fa-file-contract"></i>
|
||||
</div>
|
||||
<h3 class="ps-card-title">
|
||||
<a
|
||||
href="/serviceMain#tu-van"
|
||||
title="Tư vấn và nghiên cứu khoa học"
|
||||
>
|
||||
TƯ VẤN CHUYÊN NGHIỆP
|
||||
</a>
|
||||
</h3>
|
||||
<p class="ps-card-description">
|
||||
Tư vấn đầu tư, quản lý, kỹ thuật, giám sát công trình, nghiên
|
||||
cứu khoa học công nghệ
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="ps-card">
|
||||
<div class="ps-icon">
|
||||
<i class="fas fa-desktop"></i>
|
||||
</div>
|
||||
<h3 class="ps-card-title">
|
||||
<a
|
||||
href="/serviceMain#cong-nghe"
|
||||
title="Công nghệ thông tin và phần mềm"
|
||||
>
|
||||
CÔNG NGHỆ THÔNG TIN
|
||||
</a>
|
||||
</h3>
|
||||
<p class="ps-card-description">
|
||||
Lập trình máy vi tính, tư vấn hệ thống CNTT, phát triển phần mềm
|
||||
theo yêu cầu
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!----- END OF PRODUCTS & SERVICES SECTION HTML ----->
|
||||
|
||||
<!-- NEWS BULLETIN SECTION HTML -->
|
||||
<section class="news-bulletin-section">
|
||||
<div class="news-container">
|
||||
<div class="news-header">
|
||||
<h2 class="news-title">TIN TỨC & THÔNG BÁO</h2>
|
||||
<div class="news-subtitle">Cập nhật mới nhất từ Kỳ Long</div>
|
||||
</div>
|
||||
<div class="news-grid">
|
||||
<!-- Embedded news items -->
|
||||
<div class="news-item" data-article-url="/newsArticle1">
|
||||
<div class="news-thumbnail">
|
||||
<img
|
||||
src="https://ik.imagekit.io/1e8470bv5/news-article-1.png?updatedAt=1750348208141"
|
||||
alt="Tin tức 1"
|
||||
/>
|
||||
<div class="news-date">01/03/2025</div>
|
||||
</div>
|
||||
<h3 class="news-item-title">
|
||||
TỔNG QUAN VỀ DIỄN BIẾN GIÁ KHÍ LNG TRONG 5 NĂM QUA
|
||||
</h3>
|
||||
<div class="news-read-more">Xem chi tiết</div>
|
||||
</div>
|
||||
|
||||
<div class="news-item" data-article-url="/newsArticle2">
|
||||
<div class="news-thumbnail">
|
||||
<img
|
||||
src="https://ik.imagekit.io/1e8470bv5/news-article-2.png?updatedAt=1750348185735"
|
||||
alt="Tin tức 2"
|
||||
/>
|
||||
<div class="news-date">25/02/2025</div>
|
||||
</div>
|
||||
<h3 class="news-item-title">
|
||||
Khí đốt tự nhiên được khai thác từ đâu?
|
||||
</h3>
|
||||
<div class="news-read-more">Xem chi tiết</div>
|
||||
</div>
|
||||
|
||||
<div class="news-item" data-article-url="/newsArticle1">
|
||||
<div class="news-thumbnail">
|
||||
<img
|
||||
src="https://ik.imagekit.io/1e8470bv5/news-article-1.png?updatedAt=1750348208141"
|
||||
alt="Tin tức 3"
|
||||
/>
|
||||
<div class="news-date">18/02/2025</div>
|
||||
</div>
|
||||
<h3 class="news-item-title">
|
||||
TỔNG QUAN VỀ DIỄN BIẾN GIÁ KHÍ LNG TRONG 5 NĂM QUA
|
||||
</h3>
|
||||
<div class="news-read-more">Xem chi tiết</div>
|
||||
</div>
|
||||
|
||||
<div class="news-item" data-article-url="/newsArticle1">
|
||||
<div class="news-thumbnail">
|
||||
<img
|
||||
src="https://ik.imagekit.io/1e8470bv5/news-article-1.png?updatedAt=1750348208141"
|
||||
alt="Tin tức 4"
|
||||
/>
|
||||
<div class="news-date">10/02/2025</div>
|
||||
</div>
|
||||
<h3 class="news-item-title">
|
||||
TỔNG QUAN VỀ DIỄN BIẾN GIÁ KHÍ LNG TRONG 5 NĂM QUA
|
||||
</h3>
|
||||
<div class="news-read-more">Xem chi tiết</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="news-view-all">
|
||||
<a href="/newsMain" class="view-all-button">Xem tất cả tin tức</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- END OF NEWS BULLETIN SECTION HTML -->
|
||||
|
||||
<!----- PARTNERS SECTION HTML ----->
|
||||
<section class="partners-section">
|
||||
<div class="partners-container">
|
||||
<h2 class="section-title">KHÁCH HÀNG VÀ ĐỐI TÁC</h2>
|
||||
|
||||
<div class="partners-logo-container">
|
||||
<div class="partner-logo">
|
||||
<img
|
||||
src="homePages/images/tranquang-logo.png?v=1.0"
|
||||
alt="Trần Quang"
|
||||
/>
|
||||
</div>
|
||||
<div class="partner-logo">
|
||||
<img src="homePages/images/dongtam-logo.png?v=1.0" alt="Đồng Tâm" />
|
||||
</div>
|
||||
<div class="partner-logo">
|
||||
<img src="homePages/images/richs-logo.png?v=1.0" alt="Rich's" />
|
||||
</div>
|
||||
<div class="partner-logo">
|
||||
<img src="homePages/images/samsung-logo.png?v=1.0" alt="Samsung" />
|
||||
</div>
|
||||
<div class="partner-logo">
|
||||
<img src="homePages/images/binhan-logo.png?v=1.0" alt="Bình An" />
|
||||
</div>
|
||||
<div class="partner-logo">
|
||||
<img
|
||||
src="homePages/images/tetrapak-logo.png?v=1.0"
|
||||
alt="Tetra Pak"
|
||||
/>
|
||||
</div>
|
||||
<div class="partner-logo">
|
||||
<img
|
||||
src="homePages/images/petrovietnam-logo.png"
|
||||
alt="Petro Vietnam"
|
||||
/>
|
||||
</div>
|
||||
<div class="partner-logo">
|
||||
<img
|
||||
src="homePages/images/thepnguyenminh-logo.png"
|
||||
alt="Thép Nguyễn Minh"
|
||||
/>
|
||||
</div>
|
||||
<div class="partner-logo">
|
||||
<img
|
||||
src="homePages/images/gassouth-logo.png?v=1.0"
|
||||
alt="Gas South"
|
||||
/>
|
||||
</div>
|
||||
<div class="partner-logo">
|
||||
<img src="homePages/images/hongan-logo.png" alt="Hồng An" />
|
||||
</div>
|
||||
<div class="partner-logo">
|
||||
<img src="homePages/images/ciec-logo.png?v=1.0" alt="CIEC" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- END OF PARTNERS SECTION HTML -->
|
||||
|
||||
<!-- Footer Component -->
|
||||
<div id="footer"></div>
|
||||
|
||||
<script src="homePages/homeMain.js?v=1.1"></script>
|
||||
<script src="/components/header/header.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,126 @@
|
||||
// Load footer
|
||||
fetch("components/footer/footer.html")
|
||||
.then((response) => response.text())
|
||||
.then((data) => {
|
||||
document.getElementById("footer").innerHTML = data;
|
||||
});
|
||||
|
||||
// MANUAL BANNER SLIDESHOW FUNCTIONALITY
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const bannerContainer = document.querySelector(".banner-container");
|
||||
const bannerItems = document.querySelectorAll(".banner-item");
|
||||
const dots = document.querySelectorAll(".banner-dot");
|
||||
const prevBtn = document.querySelector(".banner-prev");
|
||||
const nextBtn = document.querySelector(".banner-next");
|
||||
const vimeoIframe = document.querySelector(".video-container iframe");
|
||||
|
||||
let currentSlide = 0;
|
||||
const totalSlides = bannerItems.length;
|
||||
let vimeoPlayer = null;
|
||||
|
||||
// Initialize Vimeo Player
|
||||
function initializeVimeoPlayer() {
|
||||
if (typeof Vimeo !== "undefined" && vimeoIframe) {
|
||||
vimeoPlayer = new Vimeo.Player(vimeoIframe);
|
||||
|
||||
// Set volume to 100% when video is ready
|
||||
vimeoPlayer.on("loaded", function () {
|
||||
vimeoPlayer.setVolume(1).catch((e) => {
|
||||
console.log("Volume setting failed:", e);
|
||||
});
|
||||
});
|
||||
|
||||
// Play video when it becomes the active slide
|
||||
vimeoPlayer.on("play", function () {
|
||||
console.log("Video is playing with sound");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Function to update slide position
|
||||
function updateSlide() {
|
||||
bannerContainer.style.transform = `translateX(-${currentSlide * 20}%)`;
|
||||
|
||||
// Update active dot
|
||||
dots.forEach((dot, index) => {
|
||||
dot.classList.toggle("active", index === currentSlide);
|
||||
});
|
||||
|
||||
// Handle video playback
|
||||
if (vimeoPlayer) {
|
||||
if (currentSlide === 0) {
|
||||
// If video slide is active, play the video with sound
|
||||
vimeoPlayer.play().catch((e) => {
|
||||
console.log("Vimeo play failed:", e);
|
||||
});
|
||||
} else {
|
||||
// If not on video slide, pause the video
|
||||
vimeoPlayer.pause().catch((e) => {
|
||||
console.log("Vimeo pause failed:", e);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Next slide function
|
||||
function nextSlide() {
|
||||
currentSlide = (currentSlide + 1) % totalSlides;
|
||||
updateSlide();
|
||||
}
|
||||
|
||||
// Previous slide function
|
||||
function prevSlide() {
|
||||
currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
|
||||
updateSlide();
|
||||
}
|
||||
|
||||
// Go to specific slide
|
||||
function goToSlide(slideIndex) {
|
||||
currentSlide = slideIndex;
|
||||
updateSlide();
|
||||
}
|
||||
|
||||
// Event listeners for navigation buttons
|
||||
prevBtn.addEventListener("click", prevSlide);
|
||||
nextBtn.addEventListener("click", nextSlide);
|
||||
|
||||
// Event listeners for dot indicators
|
||||
dots.forEach((dot, index) => {
|
||||
dot.addEventListener("click", () => {
|
||||
goToSlide(index);
|
||||
});
|
||||
});
|
||||
|
||||
// Keyboard navigation
|
||||
document.addEventListener("keydown", (e) => {
|
||||
if (e.key === "ArrowLeft") {
|
||||
prevSlide();
|
||||
} else if (e.key === "ArrowRight") {
|
||||
nextSlide();
|
||||
}
|
||||
});
|
||||
|
||||
// Load Vimeo Player API
|
||||
const vimeoScript = document.createElement("script");
|
||||
vimeoScript.src = "https://player.vimeo.com/api/player.js";
|
||||
vimeoScript.onload = initializeVimeoPlayer;
|
||||
document.head.appendChild(vimeoScript);
|
||||
|
||||
// Initialize first slide
|
||||
updateSlide();
|
||||
});
|
||||
|
||||
// NEWS BULLETIN SECTION JS
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const newsItems = document.querySelectorAll(".news-item");
|
||||
|
||||
// Add click event to navigate to article page for each news item
|
||||
newsItems.forEach((newsItem) => {
|
||||
newsItem.addEventListener("click", () => {
|
||||
const articleUrl = newsItem.getAttribute("data-article-url");
|
||||
if (articleUrl) {
|
||||
window.location.href = articleUrl;
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 124 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 112 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
@@ -0,0 +1,110 @@
|
||||
/* views\newsPage\newsArticle1\newsArticle1.css */
|
||||
/* Reset and Base Styles */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
color: #333;
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
/* 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);
|
||||
border-radius: 5px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Main heading styling */
|
||||
article h1 {
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20px;
|
||||
color: #006241;
|
||||
border-bottom: 2px solid #30875f;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
/* Secondary heading styling */
|
||||
article h2 {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 15px;
|
||||
color: #30875f;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* Tertiary heading styling */
|
||||
article h3 {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
margin-top: 25px;
|
||||
margin-bottom: 10px;
|
||||
color: #e84e0f;
|
||||
}
|
||||
|
||||
/* Paragraph styling */
|
||||
article p {
|
||||
margin-bottom: 15px;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
/* First paragraph after headings with special styling */
|
||||
article h1 + p,
|
||||
article h2 + p,
|
||||
article h3 + p {
|
||||
font-size: 17px;
|
||||
color: #2c3e50;
|
||||
}
|
||||
/* END OF ARTICLE STYLING */
|
||||
|
||||
/* RESPONSIVE STYLES */
|
||||
@media (max-width: 768px) {
|
||||
/* Article responsiveness */
|
||||
article {
|
||||
padding: 15px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
article h1 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
article h2 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
article h3 {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,496 @@
|
||||
<!-- views\newsPage\newsArticle1\newsArticle1.html -->
|
||||
<!DOCTYPE html>
|
||||
<html lang="vi">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Tin Tức - Công ty TNHH Đầu Tư Thương Mại Dịch Vụ Kỳ Long</title>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
|
||||
/>
|
||||
<link
|
||||
rel="preload"
|
||||
href="components/header/header.html"
|
||||
as="fetch"
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
<link rel="stylesheet" href="components/header/header.css" />
|
||||
<link rel="stylesheet" href="components/footer/footer.css" />
|
||||
<link rel="stylesheet" href="newsPages/newsArticle1/newsArticle1.css" />
|
||||
</head>
|
||||
<body>
|
||||
<!-- Header Component -->
|
||||
<div id="header"></div>
|
||||
|
||||
<article>
|
||||
<h2>TỔNG QUAN VỀ DIỄN BIẾN GIÁ KHÍ LNG TRONG 5 NĂM QUA</h2>
|
||||
<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
|
||||
chính trị và môi trường tác động mạnh mẽ đến giá khí LNG.
|
||||
</p>
|
||||
<p>
|
||||
Giá khí LNG đã tăng vọt vào năm 2022 khi nhu cầu tiêu thụ tăng cao vì
|
||||
cuộc khủng hoảng năng lượng tại châu Âu. Đến năm 2023, giá bắt đầu ổn
|
||||
định nhưng vẫn ở mức cao hơn so với những năm trước đó. Những dự báo cho
|
||||
năm 2025 cũng cho thấy một xu hướng tăng nhẹ.
|
||||
</p>
|
||||
|
||||
<h3>Sự gia tăng nhu cầu tiêu thụ khí LNG</h3>
|
||||
<p>
|
||||
Nhu cầu tiêu thụ khí LNG trên toàn cầu tăng trưởng mạnh mẽ nhờ vào sự
|
||||
chuyển dịch từ than đá sang khí thiên nhiên để giảm thiểu ô nhiễm môi
|
||||
trường. Các quốc gia như Trung Quốc và Ấn Độ đã đẩy mạnh nhập khẩu khí
|
||||
LNG để phục vụ cho các dự án phát triển công nghiệp và đô thị hóa.
|
||||
</p>
|
||||
<p>
|
||||
Sự chuyển dịch này không chỉ góp phần làm tăng giá khí LNG mà còn thúc
|
||||
đẩy các nhà sản xuất đầu tư mạnh mẽ hơn vào các cơ sở hạ tầng kho chứa
|
||||
và vận chuyển khí.
|
||||
</p>
|
||||
|
||||
<h3>Tác động của chính sách năng lượng</h3>
|
||||
<p>
|
||||
Chính sách năng lượng của nhiều quốc gia, đặc biệt là các nước châu Âu,
|
||||
đã thay đổi mạnh mẽ để giảm thiểu sự phụ thuộc vào nguồn năng lượng hóa
|
||||
thạch. Điều này tạo ra áp lực lớn lên nguồn cung khí LNG, dẫn đến những
|
||||
biến động về giá khí LNG thế giới.
|
||||
</p>
|
||||
<p>
|
||||
Các quy định khắt khe về bảo vệ môi trường đã khiến cho nhiều nhà máy
|
||||
điện than phải đóng cửa, mở đường cho khí LNG trở thành lựa chọn chính.
|
||||
Sự cạnh tranh giữa các nhà cung cấp khí LNG trên thế giới cũng đã ảnh
|
||||
hưởng đến giá cả.
|
||||
</p>
|
||||
|
||||
<h3>Tình hình cung ứng và gián đoạn chuỗi cung ứng</h3>
|
||||
<p>
|
||||
Đại dịch COVID-19 đã gây ra sự gián đoạn lớn trong chuỗi cung ứng, từ
|
||||
sản xuất đến vận chuyển khí LNG. Nhiều nhà máy sản xuất phải tạm ngưng
|
||||
hoạt động trong thời gian dài, dẫn đến tình trạng thiếu hụt nguồn cung.
|
||||
</p>
|
||||
<p>
|
||||
Đồng thời, tình hình xung đột chính trị tại nhiều khu vực cũng khiến cho
|
||||
việc giao thương khí LNG bị ảnh hưởng. Những yếu tố này cộng lại đã tạo
|
||||
ra những biến động lớn trong giá khí LNG.
|
||||
</p>
|
||||
|
||||
<h2>Phân tích chi tiết các yếu tố ảnh hưởng đến giá khí LNG</h2>
|
||||
<p>
|
||||
Để hiểu rõ hơn về giá khí LNG, chúng ta cần xem xét các yếu tố chính có
|
||||
thể ảnh hưởng đến giá cả trong tương lai.
|
||||
</p>
|
||||
|
||||
<h3>Yếu tố cung cầu</h3>
|
||||
<p>
|
||||
Cung cầu là yếu tố quyết định chính đến giá khí LNG. Khi nhu cầu tăng
|
||||
cao hơn so với cung, giá sẽ tự động tăng lên. Ngược lại, nếu cung vượt
|
||||
cầu, giá sẽ giảm.
|
||||
</p>
|
||||
<p>
|
||||
Hiện nay, với sự phát triển kinh tế và đô thị hóa, nhu cầu sử dụng khí
|
||||
LNG ngày càng tăng. Trong khi đó, sự đầu tư vào các dự án khai thác khí
|
||||
thiên nhiên vẫn chưa đủ để đáp ứng kịp thời nhu cầu này.
|
||||
</p>
|
||||
|
||||
<h3>Giá nguyên liệu thô</h3>
|
||||
<p>
|
||||
Giá nguyên liệu thô, bao gồm dầu mỏ và khí thiên nhiên, cũng có tác động
|
||||
lớn đến giá khí LNG trong 5 năm qua. Khi giá dầu mỏ tăng, giá khí LNG
|
||||
cũng thường có xu hướng tăng theo.
|
||||
</p>
|
||||
<p>
|
||||
Tuy nhiên, thị trường khí LNG cũng có tính độc lập nhất định, do đó
|
||||
không hoàn toàn bị chi phối bởi giá dầu. Sự phát triển của các công nghệ
|
||||
mới trong khai thác và chế biến khí LNG có thể giúp giảm chi phí sản
|
||||
xuất và vận chuyển, ảnh hưởng tích cực đến giá cả.
|
||||
</p>
|
||||
|
||||
<h3>Chính sách và quy định của chính phủ</h3>
|
||||
<p>
|
||||
Chính sách thuế và phí đối với LNG tại Việt Nam đóng vai trò quan trọng
|
||||
trong việc định hình cơ cấu giá của loại nhiên liệu này. Các mức thuế
|
||||
nhập khẩu, phí quản lý, điều tiết, cùng với những chính sách hỗ trợ
|
||||
ngành năng lượng, đều có tác động trực tiếp đến giá LNG.
|
||||
</p>
|
||||
<p>
|
||||
Từ ngày 01/01/2024, một số thay đổi trong chính sách thuế và phí đã được
|
||||
áp dụng, mang lại những tác động đáng kể:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>Thuế Bảo Vệ Môi Trường:</strong> Từ đầu năm 2024, chính sách
|
||||
thuế bảo vệ môi trường mới đã thiết lập mức thuế cụ thể cho các loại
|
||||
nhiên liệu như xăng, dầu diesel và các sản phẩm dầu khác. Mặc dù LNG
|
||||
không được đề cập cụ thể, nhưng việc điều chỉnh thuế đối với các nhiên
|
||||
liệu khác có thể làm thay đổi xu hướng lựa chọn nhiên liệu, từ đó ảnh
|
||||
hưởng đến nhu cầu và giá cả của LNG.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Thuế Giá Trị Gia Tăng (GTGT):</strong> Theo Nghị định
|
||||
94/2023/NĐ-CP, thuế GTGT đã được giảm từ 10% xuống còn 8% áp dụng đến
|
||||
hết ngày 30/6/2024. Sự điều chỉnh này có khả năng làm giảm chi phí đầu
|
||||
vào cho các doanh nghiệp hoạt động trong lĩnh vực LNG, từ đó tác động
|
||||
đến giá bán LNG trên thị trường.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Thuế Tối Thiểu Toàn Cầu:</strong> Bắt đầu từ năm 2024, Việt
|
||||
Nam chính thức áp dụng thuế tối thiểu toàn cầu với mức thuế suất 15%
|
||||
đối với các doanh nghiệp và tập đoàn đa quốc gia có doanh thu từ 750
|
||||
triệu euro trở lên. Điều này có thể ảnh hưởng đến chi phí hoạt động và
|
||||
quyết định đầu tư của các công ty đa quốc gia trong lĩnh vực LNG tại
|
||||
Việt Nam.
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h2>So sánh giá khí LNG trong nước và giá LNG thế giới</h2>
|
||||
<p>
|
||||
Việt Nam đang trong quá trình phát triển mạnh mẽ ngành công nghiệp khí
|
||||
LNG. Tuy nhiên, mức giá khí LNG trong nước vẫn luôn chênh lệch với giá
|
||||
khí LNG thế giới.
|
||||
</p>
|
||||
|
||||
<h3>Nguyên nhân chênh lệch giá</h3>
|
||||
<p>
|
||||
Có nhiều nguyên nhân dẫn đến sự chênh lệch giữa giá khí LNG trong nước
|
||||
và giá thế giới. Đầu tiên là chi phí vận chuyển và lưu trữ. Việt Nam chủ
|
||||
yếu phụ thuộc vào việc nhập khẩu khí LNG từ các quốc gia khác, dẫn đến
|
||||
chi phí cao hơn.
|
||||
</p>
|
||||
<p>
|
||||
Thứ hai, chính sách quản lý giá khí đốt của chính phủ cũng ảnh hưởng
|
||||
đáng kể đến giá cả. Các quy định về giá bán lẻ và giá nhập khẩu có thể
|
||||
làm biến động giá trong nước.
|
||||
</p>
|
||||
|
||||
<h3>Xu hướng điều chỉnh giá</h3>
|
||||
<p>
|
||||
Dựa trên tình hình tiêu thụ và giá cả thế giới, có thể thấy rằng giá khí
|
||||
LNG trong nước đang có xu hướng điều chỉnh. Cơ quan quản lý nên có kế
|
||||
hoạch phù hợp để đảm bảo sự phát triển bền vững của thị trường khí LNG.
|
||||
</p>
|
||||
<p>
|
||||
Thêm vào đó, việc thúc đẩy sản xuất nội địa cũng sẽ giúp giảm sự phụ
|
||||
thuộc vào nguồn nhập khẩu, từ đó ổn định được giá khí LNG.
|
||||
</p>
|
||||
|
||||
<h3>Tương lai của giá khí LNG trong nước</h3>
|
||||
<p>
|
||||
Trong tương lai, với việc đầu tư vào cơ sở hạ tầng và các dự án khai
|
||||
thác khí trong nước, giá khí LNG có khả năng sẽ giảm xuống, mang lại lợi
|
||||
ích cho ngành điện và người tiêu dùng. Tuy nhiên, việc này còn phụ thuộc
|
||||
vào nhiều yếu tố bên ngoài, bao gồm giá thị trường thế giới và sự biến
|
||||
động của nguồn cung.
|
||||
</p>
|
||||
|
||||
<h2>Giá khí hóa lỏng LNG hiện nay và dự báo xu hướng trong tương lai</h2>
|
||||
<p>
|
||||
Hiện nay, giá khí hóa lỏng LNG đang ở mức cao do nhu cầu tăng mạnh và sự
|
||||
gián đoạn trong chuỗi cung ứng. Dự báo trong tương lai, giá khí LNG có
|
||||
thể tiếp tục dao động tùy thuộc vào nhiều yếu tố.
|
||||
</p>
|
||||
|
||||
<h3>Phân tích diễn biến giá hiện tại</h3>
|
||||
<p>
|
||||
Giá khí LNG hiện nay đang chịu áp lực từ việc tăng cường sử dụng năng
|
||||
lượng sạch và việc giảm thiểu phát thải. Thường xuyên theo dõi giá khí
|
||||
LNG hôm nay là rất cần thiết để đưa ra quyết định đầu tư đúng đắn.
|
||||
</p>
|
||||
<p>
|
||||
Hơn nữa, sự phục hồi kinh tế sau đại dịch COVID-19 cũng đã tạo ra nhu
|
||||
cầu lớn cho khí LNG, đặc biệt là tại các nền kinh tế đang phát triển.
|
||||
Tuy nhiên, sự bất ổn trong thị trường toàn cầu vẫn là một yếu tố không
|
||||
thể bỏ qua.
|
||||
</p>
|
||||
|
||||
<h3>Dự báo giá trong các năm tới</h3>
|
||||
<p>
|
||||
Theo các chuyên gia, giá khí LNG có thể sẽ tiếp tục tăng trong vài năm
|
||||
tới do nhu cầu sử dụng ngày càng cao. Tuy nhiên, với sự phát triển của
|
||||
công nghệ và các dự án khai thác mới, giá có thể sẽ ổn định hơn vào giữa
|
||||
thập kỷ tới.
|
||||
</p>
|
||||
<p>
|
||||
Các nhà phân tích cho rằng giá khí LNG sẽ dao động trong khoảng từ 8-12
|
||||
USD/MMBtu trong giai đoạn 2025-2030 tùy thuộc vào diễn biến của thị
|
||||
trường thế giới.
|
||||
</p>
|
||||
|
||||
<h3>Ảnh hưởng của biến đổi khí hậu</h3>
|
||||
<p>
|
||||
Biến đổi khí hậu là một yếu tố quan trọng có thể tác động đến giá khí
|
||||
LNG. Việc gia tăng các quy định về bảo vệ môi trường có thể dẫn đến chi
|
||||
phí sản xuất gia tăng, từ đó làm tăng giá bán ra. Do đó, các nhà sản
|
||||
xuất cần nghiên cứu và áp dụng công nghệ sạch hơn để giữ được giá cả ổn
|
||||
định.
|
||||
</p>
|
||||
|
||||
<h2>Tác động của giá khí LNG đến giá điện và nền kinh tế Việt Nam</h2>
|
||||
<p>
|
||||
Giá khí LNG có vai trò quan trọng trong việc xác định giá điện tại Việt
|
||||
Nam. Khi giá khí LNG tăng, giá điện cũng sẽ chịu tác động không nhỏ.
|
||||
</p>
|
||||
|
||||
<h3>Giá điện và sự phụ thuộc vào khí LNG</h3>
|
||||
<p>
|
||||
Việt Nam đang có kế hoạch phát triển mạnh mẽ ngành điện khí LNG để đáp
|
||||
ứng nhu cầu tiêu thụ ngày càng tăng. Tuy nhiên, sự phụ thuộc vào khí LNG
|
||||
cũng đặt ra những rủi ro về giá cả.
|
||||
</p>
|
||||
<p>
|
||||
Nhà nước cần có những chính sách hợp lý để kiểm soát giá khí LNG nhằm
|
||||
tránh các cú sốc về giá điện trong tương lai. Việc xây dựng một khung
|
||||
giá điện khí LNG linh hoạt và minh bạch là rất cần thiết.
|
||||
</p>
|
||||
|
||||
<h3>Tác động đến nền kinh tế</h3>
|
||||
<p>
|
||||
Giá khí LNG ảnh hưởng trực tiếp đến chi phí sản xuất và sinh hoạt của
|
||||
người dân. Nếu giá khí LNG tăng cao, chi phí điện sẽ tăng theo, ảnh
|
||||
hưởng đến sức mua của người tiêu dùng.
|
||||
</p>
|
||||
<p>
|
||||
Thêm vào đó, sự biến động của giá khí LNG thế giới cũng sẽ tác động đến
|
||||
sự ổn định của nền kinh tế. Các doanh nghiệp cần chuẩn bị sẵn sàng cho
|
||||
những biến động này để đảm bảo hoạt động sản xuất không bị gián đoạn.
|
||||
</p>
|
||||
|
||||
<h3>Lợi ích từ giá khí LNG ổn định</h3>
|
||||
<p>
|
||||
Khi giá khí LNG ổn định, điều này sẽ tạo ra môi trường thuận lợi cho đầu
|
||||
tư và phát triển kinh tế. Các doanh nghiệp có thể dự đoán trước được chi
|
||||
phí sản xuất, từ đó lên kế hoạch kinh doanh hiệu quả hơn.
|
||||
</p>
|
||||
<p>
|
||||
Ngoài ra, việc duy trì giá khí LNG ở mức hợp lý cũng sẽ giúp nâng cao
|
||||
chất lượng cuộc sống của người dân thông qua giá điện ổn định.
|
||||
</p>
|
||||
|
||||
<h2>Biểu đồ minh họa diễn biến giá khí LNG trong 5 năm gần đây</h2>
|
||||
<p>
|
||||
Để có cái nhìn trực quan về giá khí LNG, biểu đồ sẽ giúp chúng ta dễ
|
||||
dàng nhận thấy những biến động qua các năm.
|
||||
</p>
|
||||
|
||||
<h3>Diễn biến giá khí LNG</h3>
|
||||
<p>
|
||||
Biểu đồ giá khí LNG trong 5 năm qua cho thấy những đỉnh điểm và xu hướng
|
||||
giảm/tăng. Giai đoạn năm 2022 là năm có sự tăng mạnh nhất do nhu cầu
|
||||
tăng cao. Sau đó, giá bắt đầu có dấu hiệu ổn định nhưng vẫn cao hơn so
|
||||
với các năm trước.
|
||||
</p>
|
||||
|
||||
<h3>Phân tích biểu đồ</h3>
|
||||
<p>
|
||||
Phân tích biểu đồ sẽ giúp chúng ta hiểu rõ hơn về những yếu tố nào đã
|
||||
tác động đến giá khí LNG. Chẳng hạn, sự gia tăng trong nhu cầu nhập khẩu
|
||||
và các chính sách năng lượng đều ảnh hưởng đến diễn biến này.
|
||||
</p>
|
||||
<p>
|
||||
Ngoài ra, tình hình chính trị và các sự kiện toàn cầu cũng có thể tạo ra
|
||||
những cú sốc lớn cho giá khí LNG.
|
||||
</p>
|
||||
|
||||
<h3>Dự báo giá tương lai</h3>
|
||||
<p>
|
||||
Dựa trên các dữ liệu từ biểu đồ, các nhà phân tích có thể đưa ra những
|
||||
dự báo cho giá khí LNG trong những năm tới. Một xu hướng ổn định và tăng
|
||||
dần được dự đoán, tuy nhiên, sự biến động cũng không thể tránh khỏi.
|
||||
</p>
|
||||
|
||||
<h2>Khảo sát khung giá điện khí LNG và các chính sách liên quan</h2>
|
||||
<p>
|
||||
Khung giá điện khí LNG đang là một trong những vấn đề được bàn luận sôi
|
||||
nổi trong ngành năng lượng hiện nay.
|
||||
</p>
|
||||
|
||||
<h3>Khung giá điện khí LNG</h3>
|
||||
<p>
|
||||
Khung giá điện khí LNG cần được xây dựng trên cơ sở cân bằng giữa lợi
|
||||
ích của người tiêu dùng và các nhà sản xuất. Việc này sẽ giúp tạo ra một
|
||||
thị trường năng lượng công bằng và bền vững hơn.
|
||||
</p>
|
||||
<p>
|
||||
Chính phủ cần hợp tác chặt chẽ với các doanh nghiệp để tìm ra giải pháp
|
||||
tối ưu nhất cho vấn đề này. Ngoài ra, việc áp dụng công nghệ mới cũng sẽ
|
||||
giúp giảm chi phí sản xuất, từ đó giảm giá bán lẻ cho người tiêu dùng.
|
||||
</p>
|
||||
|
||||
<h3>Chính sách hỗ trợ từ chính phủ</h3>
|
||||
<p>
|
||||
Chính phủ cần có những chính sách hỗ trợ cho ngành khí LNG như ưu đãi
|
||||
thuế, hỗ trợ tài chính cho các dự án đầu tư vào hạ tầng, từ đó giảm bớt
|
||||
gánh nặng cho giá cả.
|
||||
</p>
|
||||
<p>
|
||||
Các chính sách này không chỉ giúp tăng cường phát triển ngành khí LNG mà
|
||||
còn đảm bảo an ninh năng lượng cho quốc gia.
|
||||
</p>
|
||||
|
||||
<h3>Các yếu tố tác động đến chính sách giá</h3>
|
||||
<p>
|
||||
Những yếu tố như biến động giá thế giới, tình hình chính trị và các quy
|
||||
định về bảo vệ môi trường đều có thể tác động đến chính sách giá điện
|
||||
khí LNG. Việc theo dõi và điều chỉnh kịp thời là rất quan trọng để bảo
|
||||
đảm sự phát triển bền vững.
|
||||
</p>
|
||||
|
||||
<h2>So sánh giá khí LNG với các nguồn năng lượng khác</h2>
|
||||
<p>
|
||||
Giá khí LNG không chỉ chịu tác động từ chính nó mà còn từ các nguồn năng
|
||||
lượng khác như than đá, dầu mỏ, và năng lượng tái tạo.
|
||||
</p>
|
||||
|
||||
<h3>So sánh với giá than đá</h3>
|
||||
<p>
|
||||
Giá than đá thường có xu hướng ổn định hơn so với giá khí LNG. Tuy
|
||||
nhiên, với việc các quốc gia ngày càng chuyển dịch sang sử dụng khí
|
||||
thiên nhiên để giảm phát thải, tỷ lệ tiêu thụ than đá đang có dấu hiệu
|
||||
giảm.
|
||||
</p>
|
||||
<p>
|
||||
Điều này khiến cho giá than đá có thể sẽ gặp nhiều khó khăn trong tương
|
||||
lai, trong khi giá khí LNG có khả năng tiếp tục tăng.
|
||||
</p>
|
||||
|
||||
<h3>So sánh với giá dầu mỏ</h3>
|
||||
<p>
|
||||
Giá dầu mỏ và giá khí LNG có mối liên hệ mật thiết với nhau. Khi giá dầu
|
||||
tăng, giá khí LNG cũng có xu hướng tăng theo. Tuy nhiên, khí LNG có tính
|
||||
độc lập nhất định, do đó các yếu tố riêng biệt cũng sẽ ảnh hưởng đến giá
|
||||
cả.
|
||||
</p>
|
||||
<p>
|
||||
Dù vậy, việc theo dõi giá dầu vẫn là một yếu tố quan trọng trong việc dự
|
||||
đoán giá khí LNG.
|
||||
</p>
|
||||
|
||||
<h3>Tác động của năng lượng tái tạo</h3>
|
||||
<p>
|
||||
Với sự phát triển nhanh chóng của năng lượng tái tạo như điện mặt trời
|
||||
và gió, giá khí LNG có thể bị ảnh hưởng. Nếu năng lượng tái tạo trở
|
||||
thành lựa chọn chính về năng lượng, giá khí LNG có thể sẽ phải cạnh
|
||||
tranh gay gắt hơn.
|
||||
</p>
|
||||
<p>
|
||||
Tuy nhiên, khí LNG vẫn có ưu thế về tính linh hoạt trong cung cấp và dễ
|
||||
dàng điều chỉnh theo nhu cầu, điều này giúp cho khí LNG vẫn có một chỗ
|
||||
đứng vững chắc trên thị trường.
|
||||
</p>
|
||||
|
||||
<h2>Thị trường khí LNG toàn cầu và vị thế của Việt Nam</h2>
|
||||
<p>
|
||||
Việt Nam đang từng bước phát triển thị trường khí LNG của mình để đáp
|
||||
ứng nhu cầu tiêu thụ trong nước và xuất khẩu.
|
||||
</p>
|
||||
|
||||
<h3>Vị thế của Việt Nam trên thị trường toàn cầu</h3>
|
||||
<p>
|
||||
Việt Nam có tiềm năng lớn trong việc phát triển ngành công nghiệp khí
|
||||
LNG nhờ vào nguồn tài nguyên phong phú và vị trí địa lý thuận lợi. Những
|
||||
năm gần đây, nhiều dự án khai thác khí LNG đã được triển khai, góp phần
|
||||
vào sự phát triển của ngành.
|
||||
</p>
|
||||
|
||||
<h3>Cạnh tranh trên thị trường khí LNG</h3>
|
||||
<p>
|
||||
Thị trường khí LNG đang trở nên cạnh tranh hơn bao giờ hết. Việt Nam cần
|
||||
phải trang bị cho mình những chiến lược phù hợp để cạnh tranh với các
|
||||
nhà cung cấp lớn như Qatar, Mỹ và Australia.
|
||||
</p>
|
||||
<p>
|
||||
Việc hợp tác với các đối tác quốc tế sẽ giúp Việt Nam nâng cao vị thế
|
||||
cạnh tranh của mình trên thị trường khí LNG toàn cầu.
|
||||
</p>
|
||||
|
||||
<h3>Tiềm năng phát triển trong tương lai</h3>
|
||||
<p>
|
||||
Với sự gia tăng nhu cầu sử dụng năng lượng sạch và chính sách hỗ trợ từ
|
||||
chính phủ, lĩnh vực khí LNG của Việt Nam có nhiều cơ hội phát triển
|
||||
trong tương lai. Việc đầu tư vào cơ sở hạ tầng và công nghệ sẽ là chìa
|
||||
khóa để Việt Nam khai thác triệt để tiềm năng này.
|
||||
</p>
|
||||
|
||||
<h2>
|
||||
Các giải pháp nhằm đảm bảo an ninh năng lượng và ổn định giá khí LNG
|
||||
</h2>
|
||||
<p>
|
||||
Để đảm bảo an ninh năng lượng và ổn định giá khí LNG, cần có các giải
|
||||
pháp đồng bộ từ chính phủ đến các doanh nghiệp.
|
||||
</p>
|
||||
|
||||
<h3>Đầu tư vào hạ tầng</h3>
|
||||
<p>
|
||||
Một trong những giải pháp quan trọng nhất là đầu tư mạnh mẽ vào hạ tầng
|
||||
khí LNG, từ cảng nhập khẩu, kho chứa đến hệ thống phân phối. Điều này sẽ
|
||||
giúp giảm chi phí vận chuyển và lưu trữ, từ đó giảm giá bán ra.
|
||||
</p>
|
||||
|
||||
<h3>Đa dạng hóa nguồn cung</h3>
|
||||
<p>
|
||||
Việc đa dạng hóa nguồn cung khí LNG sẽ giúp giảm bớt rủi ro liên quan
|
||||
đến biến động giá. Việt Nam nên tìm kiếm các đối tác từ nhiều quốc gia
|
||||
khác nhau để đảm bảo nguồn cung ổn định.
|
||||
</p>
|
||||
|
||||
<h3>Thúc đẩy nghiên cứu và phát triển</h3>
|
||||
<p>
|
||||
Khuyến khích nghiên cứu và phát triển trong lĩnh vực công nghệ khí LNG
|
||||
sẽ giúp các nhà sản xuất giảm thiểu chi phí và tăng cường khả năng cạnh
|
||||
tranh. Ứng dụng công nghệ mới sẽ góp phần quan trọng vào việc ổn định
|
||||
giá khí LNG trong tương lai.
|
||||
</p>
|
||||
|
||||
<h2>Kết luận</h2>
|
||||
<p>
|
||||
Giá khí LNG đang trong quá trình biến đổi phức tạp và chịu ảnh hưởng từ
|
||||
nhiều yếu tố khác nhau. Việc theo dõi và nghiên cứu kỹ lưỡng diễn biến
|
||||
giá khí LNG là rất quan trọng để đưa ra những quyết định hợp lý trong
|
||||
đầu tư và sử dụng năng lượng.
|
||||
</p>
|
||||
<p>
|
||||
Với những tiềm năng phát triển mạnh mẽ, cùng với sự hỗ trợ từ chính phủ
|
||||
và các chính sách hợp lý, thị trường khí LNG của Việt Nam chắc chắn sẽ
|
||||
có những bước tiến mới trong thời gian tới. Việc Việt Nam đẩy mạnh phát
|
||||
triển giá khí LNG không chỉ đáp ứng nhu cầu trong nước mà còn hướng đến
|
||||
mục tiêu xuất khẩu, tạo ra giá trị gia tăng cho nền kinh tế.
|
||||
</p>
|
||||
<p>
|
||||
Trong bối cảnh thị trường năng lượng toàn cầu đang chuyển mình, sự
|
||||
chuyển từ than đá và dầu mỏ sang khí LNG là khá rõ nét, đặc biệt là khi
|
||||
các quốc gia đặt mục tiêu giảm phát thải carbon nhằm đạt được các cam
|
||||
kết về bảo vệ môi trường.
|
||||
</p>
|
||||
<p>
|
||||
Để thành công trong việc phát triển ngành khí LNG, Việt Nam cần chú
|
||||
trọng nhiều vào các yếu tố như an ninh năng lượng, tính cạnh tranh và
|
||||
hiệu quả của cơ sở hạ tầng. Qua đó, Chính phủ và doanh nghiệp có thể
|
||||
phối hợp chặt chẽ để định hình một tương lai vượt trội cho ngành công
|
||||
nghiệp này, góp phần vào sự phát triển bền vững của đất nước.
|
||||
</p>
|
||||
<p>
|
||||
Trong tương lai gần, giá khí LNG sẽ tiếp tục biến động theo xu hướng
|
||||
chung của thị trường thế giới, cùng với những áp lực từ các chính sách
|
||||
toàn cầu nhằm khuyến khích sử dụng năng lượng sạch. Chính vì vậy, Việt
|
||||
Nam cần phải có chiến lược linh hoạt để thích ứng với những thay đổi
|
||||
này, đồng thời đảm bảo rằng giá khí LNG có thể duy trì ở mức hợp lý,
|
||||
không làm ảnh hưởng đến sự tăng trưởng kinh tế của cả quốc gia.
|
||||
</p>
|
||||
<p>
|
||||
Tổng quan lại, việc đánh giá và phân tích sâu sắc những xu hướng biến
|
||||
động của giá khí LNG, cùng với các giải pháp cải tiến từ khai thác nguồn
|
||||
cung cho đến vận chuyển và phân phối, sẽ là yếu tố then chốt quyết định
|
||||
đến tương lai của ngành năng lượng tại Việt Nam. Thực hiện những bước đi
|
||||
đúng đắn ngay từ bây giờ sẽ giúp Việt Nam xây dựng một nền kinh tế năng
|
||||
lượng mạnh mẽ và bền vững hơn trong những năm tới.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<!-- Footer Component -->
|
||||
<div id="footer"></div>
|
||||
|
||||
<script src="components/header/header.js"></script>
|
||||
<script src="newsPages/newsArticle1/newsArticle1.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,7 @@
|
||||
////views\newsPages\newsArticle1\newsArticle1.js
|
||||
// Load footer
|
||||
fetch("components/footer/footer.html")
|
||||
.then((response) => response.text())
|
||||
.then((data) => {
|
||||
document.getElementById("footer").innerHTML = data;
|
||||
});
|
||||
@@ -0,0 +1,110 @@
|
||||
/* views\newsPage\newsArticle2\newsArticle2.css */
|
||||
/* Reset and Base Styles */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
color: #333;
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
/* 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);
|
||||
border-radius: 5px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Main heading styling */
|
||||
article h1 {
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20px;
|
||||
color: #006241;
|
||||
border-bottom: 2px solid #30875f;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
/* Secondary heading styling */
|
||||
article h2 {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 15px;
|
||||
color: #30875f;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* Tertiary heading styling */
|
||||
article h3 {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
margin-top: 25px;
|
||||
margin-bottom: 10px;
|
||||
color: #e84e0f;
|
||||
}
|
||||
|
||||
/* Paragraph styling */
|
||||
article p {
|
||||
margin-bottom: 15px;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
/* First paragraph after headings with special styling */
|
||||
article h1 + p,
|
||||
article h2 + p,
|
||||
article h3 + p {
|
||||
font-size: 17px;
|
||||
color: #2c3e50;
|
||||
}
|
||||
/* END OF ARTICLE STYLING */
|
||||
|
||||
/* RESPONSIVE STYLES */
|
||||
@media (max-width: 768px) {
|
||||
/* Article responsiveness */
|
||||
article {
|
||||
padding: 15px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
article h1 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
article h2 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
article h3 {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,298 @@
|
||||
<!-- views\newsPage\newsArticle2\newsArticle2.html -->
|
||||
<!DOCTYPE html>
|
||||
<html lang="vi">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Tin Tức - Công ty TNHH Đầu Tư Thương Mại Dịch Vụ Kỳ Long</title>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
|
||||
/>
|
||||
<link
|
||||
rel="preload"
|
||||
href="components/header/header.html"
|
||||
as="fetch"
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
<link rel="stylesheet" href="components/header/header.css" />
|
||||
<link rel="stylesheet" href="components/footer/footer.css" />
|
||||
<link rel="stylesheet" href="newsPages/newsArticle2/newsArticle2.css" />
|
||||
</head>
|
||||
<body>
|
||||
<!-- Header Component -->
|
||||
<div id="header"></div>
|
||||
|
||||
<article>
|
||||
<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ự
|
||||
nhiên đã trở thành một trong những nguồn nhiên liệu quan trọng, góp phần
|
||||
đáp ứng nhu cầu điện, nhiệt và nguyên liệu cho nhiều ngành công nghiệp.
|
||||
Nhưng bạn có bao giờ thắc mắc: Khí đốt tự nhiên được khai thác từ đâu?
|
||||
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
|
||||
diễn ra như thế nào? Hãy cùng Kỳ Long khám phá nguồn gốc, quá trình khai
|
||||
thác và vai trò của nguồn tà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
|
||||
phân hủy sinh vật cổ đại dưới áp suất và nhiệt độ cao trong lòng đất
|
||||
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
|
||||
địa chất sâu và trải qua quá trình tinh chế để tạo thành nhiều sản phẩm
|
||||
năng lượng thiết yếu như xăng, dầu diesel và dầu nhờn. Ngoài vai trò là
|
||||
nguồn nhiên liệu chính cho các phương tiện giao thông, dầu mỏ còn là
|
||||
nguyên liệu đầu vào quan 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
|
||||
phần chủ yếu là methane (CH4), hình thành cùng quá trình địa chất với
|
||||
dầu mỏ. Được khai thác từ các mỏ khí dưới lòng đất hoặc đáy biển, khí
|
||||
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
|
||||
phát thải carbon thấp hơn so với dầu mỏ và than đá. Khí thiên nhiên được
|
||||
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
|
||||
sưởi ấm, nấu nướng trong hộ gia đì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ế
|
||||
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
|
||||
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%"
|
||||
/>
|
||||
<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
|
||||
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ị 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à Hồng Ngọc. Các mỏ này đóng vai trò then chốt trong việ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í
|
||||
thiên nhiên trọng điểm, được khai thác từ các tầng đá trầm 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
|
||||
88km, sở hữu trữ lượng khổng lồ, được đánh giá là một 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ờ
|
||||
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ộ,
|
||||
bao gồm các mỏ Lan Tây, Lan Đỏ, Rồng Đôi, Rồng Tây... nằm 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
|
||||
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
|
||||
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
|
||||
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
|
||||
điểm đang được khai thác hiệu quả trên khắp lãnh thổ. Mỏ khí 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 khối, là một trong
|
||||
những mỏ khí lớn nhất cả nước, đóng góp đáng kể vào nguồn cung năng
|
||||
lượng quốc gia. Tương tự, mỏ khí Mặt Trời Đỏ ở 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 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ỷ
|
||||
mét khối đã góp phần thúc đẩy phát triển công nghiệp địa phương. Trong
|
||||
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
|
||||
- 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
|
||||
tỷ mét khối, cùng với mỏ khí Cà Mau (trữ lượng khoảng 150 tỷ mét khối)
|
||||
đ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 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
|
||||
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ế
|
||||
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%"
|
||||
/>
|
||||
<p class="image-caption">Hoạt động khai thác khí tại Việt Nam</p>
|
||||
|
||||
<h2>Tình trạng khai thác dầu mỏ và khí thiên nhiên tại Việt Nam</h2>
|
||||
|
||||
<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
|
||||
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
|
||||
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
|
||||
đề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
|
||||
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ử
|
||||
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
|
||||
tạo ra những vụ nổ lớn bằng mìn trong lòng đất, sau đó quan sát và ghi
|
||||
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à
|
||||
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
|
||||
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
|
||||
lực. Những thiết bị này có khả năng phát hiện những thay đổi rất nhỏ
|
||||
trong từ trường của Trái Đất, giúp các nhà địa chất xác định vị trí có
|
||||
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
|
||||
cảm cũng được triển khai để xác đị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
|
||||
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
|
||||
đò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ỹ
|
||||
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ệ
|
||||
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
|
||||
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á
|
||||
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,
|
||||
đóng vai trò quan trọng trong việc điều 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%"
|
||||
/>
|
||||
<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
|
||||
diện, được thiết kế để tối ưu hóa việc khai thác, đảm bảo an toàn và
|
||||
hiệu quả kinh tế. Quy trình này được chia thành bảy giai đoạn chính, mỗi
|
||||
giai đoạn đều đóng vai trò thiết yếu trong việc đư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
|
||||
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,
|
||||
địa mạo và địa chấn. Các chuyên gia sử dụng công nghệ tiên tiến để
|
||||
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í
|
||||
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
|
||||
vực tiềm năng, các giếng thăm dò được khoan để thu thập thông tin chi
|
||||
tiết về độ sâu, kích thước và chất lượng của mỏ khí. Giai đoạn này
|
||||
cung cấp dữ liệu quan trọng về đặc tính của lớp đá chứa khí, thành
|
||||
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ả
|
||||
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
|
||||
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
|
||||
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
|
||||
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
|
||||
khoan sâu xuống tầng đất chứa khí với công nghệ và thiết bị chuyên
|
||||
dụng. Mỗi giếng được thiết kế riêng biệt dựa trên đặc điểm địa chất
|
||||
của khu vực và sau đó được kết nối với hệ 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
|
||||
cốt lõi của chu trình, khi khí thiên nhiên được đưa lên bề mặt thông
|
||||
qua các kỹ thuật khai thác như áp suất tự nhiên, bơm khí hoặc các
|
||||
phương pháp tăng cường áp suất. Quá trình này được kiểm soát chặt chẽ
|
||||
để đảm bảo tốc độ khai thác bền vững và tối đ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
|
||||
thác được đưa vào các nhà máy xử lý để tách tạp chất, loại bỏ các
|
||||
thành phần không mong muốn và đạt tiêu chuẩn chất lượng thương mại.
|
||||
Sau khi xử lý, khí được nén đến áp suất thích hợp và phân phối đến các
|
||||
nhà máy điện, khu công nghiệp và hộ 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
|
||||
khai thác được giám sát liên tục bởi các hệ thống tự động và đội ngũ
|
||||
chuyên gia. Các thông số như áp suất, lưu lượng và chất lượng khí được
|
||||
theo dõi thường xuyên, trong khi các hoạt động bảo trì định kỳ được
|
||||
thực hiện để đảm bảo hệ thống vận hành 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%"
|
||||
/>
|
||||
<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
|
||||
hiện đại mà còn đóng vai trò quan trọng trong quá trình chuyển đổi sang
|
||||
năng lượng sạch. Từ những mỏ khí sâu trong lòng đất đến hệ thống đường
|
||||
ống và nhà máy xử lý, hành trình của khí đố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>
|
||||
|
||||
<!-- Footer Component -->
|
||||
<div id="footer"></div>
|
||||
|
||||
<script src="components/header/header.js"></script>
|
||||
<script src="newsPages/newsArticle1/newsArticle1.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,7 @@
|
||||
////views\newsPages\newsArticle2\newsArticle2.js
|
||||
// Load footer
|
||||
fetch("components/footer/footer.html")
|
||||
.then((response) => response.text())
|
||||
.then((data) => {
|
||||
document.getElementById("footer").innerHTML = data;
|
||||
});
|
||||
@@ -0,0 +1,194 @@
|
||||
/* views\newsPage\newsMain\newsMain.css */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
body {
|
||||
color: #333;
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
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;
|
||||
}
|
||||
|
||||
/* NEWS SECTION CSS */
|
||||
.news-container {
|
||||
max-width: 1200px;
|
||||
margin: 40px auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
color: #006241;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.page-title:after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 80px;
|
||||
height: 3px;
|
||||
background-color: #e84e0f;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.news-filter {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.filter-btn {
|
||||
padding: 8px 16px;
|
||||
margin: 0 10px;
|
||||
background-color: #fff;
|
||||
color: #006241;
|
||||
border: 1px solid #30875f;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.filter-btn:hover,
|
||||
.filter-btn.active {
|
||||
background-color: #30875f;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.news-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.news-card {
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.news-card:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.news-thumbnail {
|
||||
height: 200px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.news-thumbnail img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.news-card:hover .news-thumbnail img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.news-content {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.news-category {
|
||||
display: inline-block;
|
||||
background-color: #e84e0f;
|
||||
color: white;
|
||||
padding: 5px 10px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.news-title {
|
||||
font-size: 18px;
|
||||
margin-bottom: 10px;
|
||||
color: #006241;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.news-excerpt {
|
||||
color: #666;
|
||||
margin-bottom: 15px;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.news-date {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.news-date i {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.news-pagination {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.page-btn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 5px;
|
||||
border-radius: 4px;
|
||||
background-color: #fff;
|
||||
color: #006241;
|
||||
border: 1px solid #ddd;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.page-btn:hover,
|
||||
.page-btn.active {
|
||||
background-color: #30875f;
|
||||
color: white;
|
||||
border-color: #30875f;
|
||||
}
|
||||
/* END OF NEWS SECTION CSS */
|
||||
|
||||
/* Responsive styles */
|
||||
@media (max-width: 992px) {
|
||||
.news-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.news-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,388 @@
|
||||
<!-- views\newsPage\newsMain\newsMain.html -->
|
||||
<!DOCTYPE html>
|
||||
<html lang="vi">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Tin Tức - 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="newsPages/newsMain/newsMain.css" />
|
||||
<link
|
||||
rel="preload"
|
||||
href="components/header/header.html"
|
||||
as="fetch"
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
</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>
|
||||
|
||||
<!-- NEWS CONTENT SECTION -->
|
||||
<main class="news-container">
|
||||
<h1 class="page-title">Tin Tức & Sự Kiện</h1>
|
||||
|
||||
<div class="news-filter">
|
||||
<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>
|
||||
<button class="filter-btn">Doanh Nghiệp</button>
|
||||
<button class="filter-btn">Hoạt Động</button>
|
||||
</div>
|
||||
|
||||
<div class="news-grid">
|
||||
<!-- News Item 1 -->
|
||||
<a href="/newsArticle1" class="news-card">
|
||||
<div class="news-thumbnail">
|
||||
<img src="https://i.imgur.com/exD5v9p.png" alt="Tin tức Kỳ Long" />
|
||||
</div>
|
||||
<div class="news-content">
|
||||
<span class="news-category">Thị Trường</span>
|
||||
<h3 class="news-title">
|
||||
TỔNG QUAN VỀ DIỄN BIẾN GIÁ KHÍ LNG TRONG 5 NĂM QUA
|
||||
</h3>
|
||||
<p class="news-excerpt">
|
||||
Giá khí LNG đang trở thành một trong những vấn đề nóng hổi trong
|
||||
ngành năng lượng hiện nay.
|
||||
</p>
|
||||
<div class="news-date"><i>🕒</i> 05/03/2025</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- News Item 2 -->
|
||||
<a href="/newsArticle2" class="news-card">
|
||||
<div class="news-thumbnail">
|
||||
<img src="https://i.imgur.com/0MGOlmy.png" alt="Tin tức Kỳ Long" />
|
||||
</div>
|
||||
<div class="news-content">
|
||||
<span class="news-category">Công Nghệ</span>
|
||||
<h3 class="news-title">Khí đốt tự nhiên được khai thác từ đâu?</h3>
|
||||
<p class="news-excerpt">
|
||||
Bạn có bao giờ thắc mắc: Khí đốt tự nhiên được khai thác từ đâu?
|
||||
</p>
|
||||
<div class="news-date"><i>🕒</i> 28/02/2025</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- News Item 3 -->
|
||||
<a href="/newsArticle1" class="news-card">
|
||||
<div class="news-thumbnail">
|
||||
<img src="https://i.imgur.com/exD5v9p.png" alt="Tin tức Kỳ Long" />
|
||||
</div>
|
||||
<div class="news-content">
|
||||
<span class="news-category">Thị Trường</span>
|
||||
<h3 class="news-title">
|
||||
TỔNG QUAN VỀ DIỄN BIẾN GIÁ KHÍ LNG TRONG 5 NĂM QUA
|
||||
</h3>
|
||||
<p class="news-excerpt">
|
||||
Giá khí LNG đang trở thành một trong những vấn đề nóng hổi trong
|
||||
ngành năng lượng hiện nay.
|
||||
</p>
|
||||
<div class="news-date"><i>🕒</i> 20/02/2025</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- News Item 4 -->
|
||||
<a href="/newsArticle1" class="news-card">
|
||||
<div class="news-thumbnail">
|
||||
<img src="https://i.imgur.com/exD5v9p.png" alt="Tin tức Kỳ Long" />
|
||||
</div>
|
||||
<div class="news-content">
|
||||
<span class="news-category">Hoạt Động</span>
|
||||
<h3 class="news-title">
|
||||
TỔNG QUAN VỀ DIỄN BIẾN GIÁ KHÍ LNG TRONG 5 NĂM QUA
|
||||
</h3>
|
||||
<p class="news-excerpt">
|
||||
Giá khí LNG đang trở thành một trong những vấn đề nóng hổi trong
|
||||
ngành năng lượng hiện nay.
|
||||
</p>
|
||||
<div class="news-date"><i>🕒</i> 15/02/2025</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- News Item 5 -->
|
||||
<a href="/newsArticle1" class="news-card">
|
||||
<div class="news-thumbnail">
|
||||
<img src="https://i.imgur.com/exD5v9p.png" alt="Tin tức Kỳ Long" />
|
||||
</div>
|
||||
<div class="news-content">
|
||||
<span class="news-category">Công Nghệ</span>
|
||||
<h3 class="news-title">
|
||||
TỔNG QUAN VỀ DIỄN BIẾN GIÁ KHÍ LNG TRONG 5 NĂM QUA
|
||||
</h3>
|
||||
<p class="news-excerpt">
|
||||
Giá khí LNG đang trở thành một trong những vấn đề nóng hổi trong
|
||||
ngành năng lượng hiện nay.
|
||||
</p>
|
||||
<div class="news-date"><i>🕒</i> 08/02/2025</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- News Item 6 -->
|
||||
<a href="/newsArticle1" class="news-card">
|
||||
<div class="news-thumbnail">
|
||||
<img src="https://i.imgur.com/exD5v9p.png" alt="Tin tức Kỳ Long" />
|
||||
</div>
|
||||
<div class="news-content">
|
||||
<span class="news-category">Hoạt Động</span>
|
||||
<h3 class="news-title">
|
||||
TỔNG QUAN VỀ DIỄN BIẾN GIÁ KHÍ LNG TRONG 5 NĂM QUA
|
||||
</h3>
|
||||
<p class="news-excerpt">
|
||||
Giá khí LNG đang trở thành một trong những vấn đề nóng hổi trong
|
||||
ngành năng lượng hiện nay.
|
||||
</p>
|
||||
<div class="news-date"><i>🕒</i> 30/01/2025</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- News Item 7 -->
|
||||
<a href="/newsArticle1" class="news-card">
|
||||
<div class="news-thumbnail">
|
||||
<img src="https://i.imgur.com/exD5v9p.png" alt="Tin tức Kỳ Long" />
|
||||
</div>
|
||||
<div class="news-content">
|
||||
<span class="news-category">Hoạt Động</span>
|
||||
<h3 class="news-title">
|
||||
TỔNG QUAN VỀ DIỄN BIẾN GIÁ KHÍ LNG TRONG 5 NĂM QUA
|
||||
</h3>
|
||||
<p class="news-excerpt">
|
||||
Giá khí LNG đang trở thành một trong những vấn đề nóng hổi trong
|
||||
ngành năng lượng hiện nay.
|
||||
</p>
|
||||
<div class="news-date"><i>🕒</i> 30/01/2025</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- News Item 8 -->
|
||||
<a href="/newsArticle1" class="news-card">
|
||||
<div class="news-thumbnail">
|
||||
<img src="https://i.imgur.com/exD5v9p.png" alt="Tin tức Kỳ Long" />
|
||||
</div>
|
||||
<div class="news-content">
|
||||
<span class="news-category">Hoạt Động</span>
|
||||
<h3 class="news-title">
|
||||
TỔNG QUAN VỀ DIỄN BIẾN GIÁ KHÍ LNG TRONG 5 NĂM QUA
|
||||
</h3>
|
||||
<p class="news-excerpt">
|
||||
Giá khí LNG đang trở thành một trong những vấn đề nóng hổi trong
|
||||
ngành năng lượng hiện nay.
|
||||
</p>
|
||||
<div class="news-date"><i>🕒</i> 30/01/2025</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- News Item 9 -->
|
||||
<a href="/newsArticle1" class="news-card">
|
||||
<div class="news-thumbnail">
|
||||
<img src="https://i.imgur.com/exD5v9p.png" alt="Tin tức Kỳ Long" />
|
||||
</div>
|
||||
<div class="news-content">
|
||||
<span class="news-category">Hoạt Động</span>
|
||||
<h3 class="news-title">
|
||||
TỔNG QUAN VỀ DIỄN BIẾN GIÁ KHÍ LNG TRONG 5 NĂM QUA
|
||||
</h3>
|
||||
<p class="news-excerpt">
|
||||
Giá khí LNG đang trở thành một trong những vấn đề nóng hổi trong
|
||||
ngành năng lượng hiện nay.
|
||||
</p>
|
||||
<div class="news-date"><i>🕒</i> 30/01/2025</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="news-pagination">
|
||||
<!-- Pagination buttons will be generated by JavaScript -->
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="no-results"
|
||||
style="display: none; text-align: center; padding: 2rem; width: 100%"
|
||||
>
|
||||
<p>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 -->
|
||||
|
||||
<!-- Footer Component -->
|
||||
<div id="footer"></div>
|
||||
|
||||
<script src="newsPages/newsMain/newsMain.js"></script>
|
||||
<script src="/components/header/header.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,219 @@
|
||||
///// views\newsPage\newsMain\newsMain.js
|
||||
// Load footer
|
||||
fetch("components/footer/footer.html")
|
||||
.then((response) => response.text())
|
||||
.then((data) => {
|
||||
document.getElementById("footer").innerHTML = data;
|
||||
});
|
||||
|
||||
//// NEWS FILTER JS
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
// Get all filter buttons and news cards
|
||||
const filterButtons = document.querySelectorAll(".filter-btn");
|
||||
const newsCards = document.querySelectorAll(".news-card");
|
||||
|
||||
// Add click event listeners to each filter button
|
||||
filterButtons.forEach((button) => {
|
||||
button.addEventListener("click", function () {
|
||||
// Remove active class from all buttons
|
||||
filterButtons.forEach((btn) => btn.classList.remove("active"));
|
||||
|
||||
// Add active class to clicked button
|
||||
this.classList.add("active");
|
||||
|
||||
// Get the category to filter by (button text)
|
||||
const filterCategory = this.textContent.trim();
|
||||
|
||||
// Show all news cards if "Tất Cả" is selected, otherwise filter
|
||||
if (filterCategory === "Tất Cả") {
|
||||
newsCards.forEach((card) => {
|
||||
card.style.display = "block";
|
||||
});
|
||||
} else {
|
||||
// Filter news cards by category
|
||||
newsCards.forEach((card) => {
|
||||
const cardCategory = card
|
||||
.querySelector(".news-category")
|
||||
.textContent.trim();
|
||||
if (cardCategory === filterCategory) {
|
||||
card.style.display = "block";
|
||||
} else {
|
||||
card.style.display = "none";
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Add click event listeners to pagination buttons
|
||||
const pageButtons = document.querySelectorAll(".page-btn");
|
||||
pageButtons.forEach((button) => {
|
||||
button.addEventListener("click", function () {
|
||||
// Remove active class from all page buttons
|
||||
pageButtons.forEach((btn) => btn.classList.remove("active"));
|
||||
|
||||
// Add active class to clicked button
|
||||
this.classList.add("active");
|
||||
|
||||
// In a real application, you would load different news items here
|
||||
// For demonstration, we'll just scroll to top
|
||||
window.scrollTo({
|
||||
top: document.querySelector(".news-container").offsetTop - 100,
|
||||
behavior: "smooth",
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
//// END OF NEWS FILTER JS
|
||||
|
||||
//// PAGINATION JS
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
// Get all filter buttons and news cards
|
||||
const filterButtons = document.querySelectorAll(".filter-btn");
|
||||
const newsCards = document.querySelectorAll(".news-card");
|
||||
const paginationContainer = document.querySelector(".news-pagination");
|
||||
|
||||
// Pagination settings
|
||||
const itemsPerPage = 6;
|
||||
let currentPage = 1;
|
||||
let filteredItems = [...newsCards]; // Start with all items
|
||||
|
||||
// Initialize page
|
||||
function initializePage() {
|
||||
// Clear existing pagination
|
||||
paginationContainer.innerHTML = "";
|
||||
|
||||
// Show items for current page and category filter
|
||||
updateDisplay();
|
||||
|
||||
// Create pagination buttons
|
||||
createPaginationButtons();
|
||||
}
|
||||
|
||||
// Update which items are displayed based on current page and filters
|
||||
function updateDisplay() {
|
||||
// Hide all news items first
|
||||
newsCards.forEach((card) => {
|
||||
card.style.display = "none";
|
||||
});
|
||||
|
||||
// Show only the items for current page
|
||||
const startIndex = (currentPage - 1) * itemsPerPage;
|
||||
const endIndex = startIndex + itemsPerPage;
|
||||
|
||||
filteredItems.slice(startIndex, endIndex).forEach((card) => {
|
||||
card.style.display = "block";
|
||||
});
|
||||
|
||||
// Show "no results" message if needed
|
||||
const noResultsElement = document.querySelector(".no-results");
|
||||
if (noResultsElement) {
|
||||
if (filteredItems.length === 0) {
|
||||
noResultsElement.style.display = "block";
|
||||
} else {
|
||||
noResultsElement.style.display = "none";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Create pagination buttons
|
||||
function createPaginationButtons() {
|
||||
const totalPages = Math.ceil(filteredItems.length / itemsPerPage);
|
||||
|
||||
// Previous button
|
||||
if (currentPage > 1) {
|
||||
const prevBtn = document.createElement("button");
|
||||
prevBtn.className = "page-btn";
|
||||
prevBtn.innerHTML = "<"; // < symbol
|
||||
prevBtn.addEventListener("click", () => {
|
||||
currentPage--;
|
||||
updatePage();
|
||||
});
|
||||
paginationContainer.appendChild(prevBtn);
|
||||
}
|
||||
|
||||
// Page number buttons
|
||||
for (let i = 1; i <= totalPages; i++) {
|
||||
const pageBtn = document.createElement("button");
|
||||
pageBtn.className = "page-btn";
|
||||
if (i === currentPage) {
|
||||
pageBtn.classList.add("active");
|
||||
}
|
||||
pageBtn.textContent = i;
|
||||
pageBtn.addEventListener("click", () => {
|
||||
currentPage = i;
|
||||
updatePage();
|
||||
});
|
||||
paginationContainer.appendChild(pageBtn);
|
||||
}
|
||||
|
||||
// Next button
|
||||
if (currentPage < totalPages) {
|
||||
const nextBtn = document.createElement("button");
|
||||
nextBtn.className = "page-btn";
|
||||
nextBtn.innerHTML = ">"; // > symbol
|
||||
nextBtn.addEventListener("click", () => {
|
||||
currentPage++;
|
||||
updatePage();
|
||||
});
|
||||
paginationContainer.appendChild(nextBtn);
|
||||
}
|
||||
|
||||
// If no pages, show a disabled "1" button
|
||||
if (totalPages === 0) {
|
||||
const emptyBtn = document.createElement("button");
|
||||
emptyBtn.className = "page-btn active";
|
||||
emptyBtn.textContent = "1";
|
||||
emptyBtn.disabled = true;
|
||||
paginationContainer.appendChild(emptyBtn);
|
||||
}
|
||||
}
|
||||
|
||||
// Update the page after changing page or filter
|
||||
function updatePage() {
|
||||
updateDisplay();
|
||||
|
||||
// Recreate pagination buttons
|
||||
paginationContainer.innerHTML = "";
|
||||
createPaginationButtons();
|
||||
|
||||
// Scroll to top of news section
|
||||
window.scrollTo({
|
||||
top: document.querySelector(".news-container").offsetTop - 100,
|
||||
behavior: "smooth",
|
||||
});
|
||||
}
|
||||
|
||||
// Add click event listeners to each filter button
|
||||
filterButtons.forEach((button) => {
|
||||
button.addEventListener("click", function () {
|
||||
// Remove active class from all buttons
|
||||
filterButtons.forEach((btn) => btn.classList.remove("active"));
|
||||
// Add active class to clicked button
|
||||
this.classList.add("active");
|
||||
|
||||
// Get the category to filter by (button text)
|
||||
const filterCategory = this.textContent.trim();
|
||||
|
||||
// Filter the items based on category
|
||||
if (filterCategory === "Tất Cả") {
|
||||
filteredItems = [...newsCards];
|
||||
} else {
|
||||
filteredItems = [...newsCards].filter((card) => {
|
||||
const cardCategory = card
|
||||
.querySelector(".news-category")
|
||||
.textContent.trim();
|
||||
return cardCategory === filterCategory;
|
||||
});
|
||||
}
|
||||
|
||||
// Reset to first page when filter changes
|
||||
currentPage = 1;
|
||||
updatePage();
|
||||
});
|
||||
});
|
||||
|
||||
// Initialize the page when the DOM is loaded
|
||||
initializePage();
|
||||
});
|
||||
//// PAGINATION JS
|
||||
@@ -0,0 +1,90 @@
|
||||
# Privacy Policy
|
||||
|
||||
## Introduction
|
||||
|
||||
This Privacy Policy describes how we collect, use, and disclose your personal information when you visit or use our website. We are committed to protecting your privacy and handling your data in an open and transparent manner.
|
||||
|
||||
## Information We Collect
|
||||
|
||||
### Information You Provide to Us
|
||||
|
||||
We may collect personal information that you voluntarily provide to us when you:
|
||||
|
||||
- Create an account
|
||||
- Fill out forms on our website
|
||||
- Subscribe to newsletters
|
||||
- Contact our customer support
|
||||
- Participate in surveys or promotions
|
||||
|
||||
This information may include your name, email address, phone number, and any other information you choose to provide.
|
||||
|
||||
### Information We Collect Automatically
|
||||
|
||||
When you visit our website, we may automatically collect certain information about your device and usage of our website, including:
|
||||
|
||||
- IP address
|
||||
- Browser type and version
|
||||
- Operating system
|
||||
- Device information
|
||||
- Usage data (pages visited, time spent on pages)
|
||||
- Referral source
|
||||
|
||||
We collect this information using cookies and similar tracking technologies.
|
||||
|
||||
## How We Use Your Information
|
||||
|
||||
We may use the information we collect for various purposes, including:
|
||||
|
||||
- Providing and maintaining our website
|
||||
- Improving our website and services
|
||||
- Processing transactions
|
||||
- Sending administrative information
|
||||
- Sending marketing communications (with your consent)
|
||||
- Responding to your inquiries
|
||||
- Detecting and preventing fraud
|
||||
|
||||
## Sharing Your Information
|
||||
|
||||
We may share your personal information with:
|
||||
|
||||
- Service providers who perform services on our behalf
|
||||
- Business partners (with your consent)
|
||||
- Legal authorities when required by law
|
||||
- In connection with a business transaction (merger, acquisition, sale of assets)
|
||||
|
||||
We do not sell your personal information to third parties.
|
||||
|
||||
## Data Security
|
||||
|
||||
We implement appropriate technical and organizational measures to protect your personal information against unauthorized access, alteration, disclosure, or destruction.
|
||||
|
||||
## Data Retention
|
||||
|
||||
We retain your personal information for as long as necessary to fulfill the purposes outlined in this Privacy Policy, unless a longer retention period is required or permitted by law.
|
||||
|
||||
## Your Privacy Rights
|
||||
|
||||
Depending on your location, you may have certain rights regarding your personal information, including:
|
||||
|
||||
- Access to your personal information
|
||||
- Correction of inaccurate information
|
||||
- Deletion of your personal information
|
||||
- Restriction of processing
|
||||
- Data portability
|
||||
- Objection to processing
|
||||
|
||||
To exercise these rights, please contact us using the information provided below.
|
||||
|
||||
## Third-Party Links
|
||||
|
||||
Our website may contain links to third-party websites. We are not responsible for the privacy practices or content of these websites. We encourage you to review the privacy policies of any website you visit.
|
||||
|
||||
## International Data Transfers
|
||||
|
||||
Your personal information may be transferred to and processed in countries other than the country in which you reside. These countries may have different data protection laws than your country of residence.
|
||||
|
||||
## Changes to This Privacy Policy
|
||||
|
||||
We may update this Privacy Policy from time to time. The updated version will be indicated by an updated "Last Updated" date. We encourage you to review this Privacy Policy periodically.
|
||||
|
||||
Last Updated: [19/04/2025]
|
||||
@@ -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");
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,111 @@
|
||||
/* views/productPages/productSeparateCommerceLNG/productSeparateCommerceLNG.css */
|
||||
/* Additional styles for LNG page */
|
||||
.lng-hero {
|
||||
background-color: #30875f;
|
||||
color: white;
|
||||
padding: 80px 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.lng-hero h1 {
|
||||
font-size: 42px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.lng-hero p {
|
||||
font-size: 20px;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.lng-content {
|
||||
padding: 60px 0;
|
||||
}
|
||||
|
||||
.lng-details {
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.lng-image {
|
||||
flex: 1;
|
||||
min-height: 400px;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 150px;
|
||||
color: #30875f;
|
||||
}
|
||||
|
||||
.lng-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.lng-info h2 {
|
||||
color: #30875f;
|
||||
margin-bottom: 20px;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.lng-features {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.lng-feature {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.lng-feature i {
|
||||
color: #e84e0f;
|
||||
font-size: 20px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.lng-specs {
|
||||
background-color: #f9f9f9;
|
||||
padding: 40px;
|
||||
border-radius: 8px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.lng-specs h3 {
|
||||
color: #30875f;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.spec-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.spec-item {
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.spec-item h4 {
|
||||
color: #e84e0f;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.lng-details {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.lng-image {
|
||||
min-height: 250px;
|
||||
font-size: 100px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,145 @@
|
||||
<!-- views/productPages/productSeparateCommerceLNG/productSeparateCommerceLNG.html -->
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>
|
||||
LNG - Khí tự nhiên hóa lỏng | CÔNG TY TNHH ĐẦU TƯ THƯƠNG MẠI DỊCH VỤ KỲ
|
||||
LONG
|
||||
</title>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
|
||||
/>
|
||||
<link
|
||||
rel="preload"
|
||||
href="components/header/header.html"
|
||||
as="fetch"
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
<link rel="stylesheet" href="components/header/header.css" />
|
||||
<link rel="stylesheet" href="components/footer/footer.css" />
|
||||
<link rel="stylesheet" href="productPages/productMain/productMain.css" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="productPages/productSeparateCommerceLNG/productSeparateCommerceLNG.css"
|
||||
/>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Header Component -->
|
||||
<div id="header"></div>
|
||||
|
||||
<!-- LNG HERO SECTION -->
|
||||
<section class="lng-hero">
|
||||
<div class="container">
|
||||
<h1>KHÍ TỰ NHIÊN HÓA LỎNG (LNG)</h1>
|
||||
<p>
|
||||
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>
|
||||
</section>
|
||||
|
||||
<!-- LNG CONTENT SECTION -->
|
||||
<section class="lng-content">
|
||||
<div class="container">
|
||||
<div class="lng-details">
|
||||
<div class="lng-image">
|
||||
<i class="fas fa-tint"></i>
|
||||
</div>
|
||||
<div class="lng-info">
|
||||
<h2>Giới thiệu sản phẩm LNG</h2>
|
||||
<p>
|
||||
Khí tự nhiên hóa lỏng (Liquefied Natural Gas - LNG) là khí thiên
|
||||
nhiên được làm lạnh sâu đến -162°C để chuyển sang thể lỏng, giúp
|
||||
giảm thể tích khoảng 600 lần so với trạng thái khí, thuận tiện cho
|
||||
việc vận chuyển và lưu trữ.
|
||||
</p>
|
||||
|
||||
<div class="lng-features">
|
||||
<div class="lng-feature">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
<div>
|
||||
<h4>Hiệu suất cao</h4>
|
||||
<p>
|
||||
Năng lượng tập trung, hiệu quả sử dụng vượt trội so với các
|
||||
nhiên liệu truyền thống
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="lng-feature">
|
||||
<i class="fas fa-leaf"></i>
|
||||
<div>
|
||||
<h4>Thân thiện môi trường</h4>
|
||||
<p>
|
||||
Giảm 20-30% lượng khí thải CO2 so với dầu FO và giảm 100%
|
||||
khí thải SOx
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="lng-feature">
|
||||
<i class="fas fa-truck-moving"></i>
|
||||
<div>
|
||||
<h4>Vận chuyển linh hoạt</h4>
|
||||
<p>
|
||||
Có thể vận chuyển bằng xe bồn chuyên dụng hoặc tàu LNG mà
|
||||
không cần đường ống
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="lng-specs">
|
||||
<h3>THÔNG SỐ KỸ THUẬT</h3>
|
||||
<div class="spec-grid">
|
||||
<div class="spec-item">
|
||||
<h4>Thành phần chính</h4>
|
||||
<p>
|
||||
Methane (CH4) chiếm 85-95%, còn lại là Ethane, Propane và các
|
||||
hydrocarbon khác
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="spec-item">
|
||||
<h4>Nhiệt độ bảo quản</h4>
|
||||
<p>-162°C ở áp suất khí quyển</p>
|
||||
</div>
|
||||
|
||||
<div class="spec-item">
|
||||
<h4>Tỷ trọng</h4>
|
||||
<p>0.41 - 0.5 kg/lít (khoảng 45% so với nước)</p>
|
||||
</div>
|
||||
|
||||
<div class="spec-item">
|
||||
<h4>Giá trị nhiệt</h4>
|
||||
<p>22,000 - 24,000 BTU/lb (khoảng 52-55 MJ/kg)</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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 LNG?</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>
|
||||
|
||||
<!-- Footer Component -->
|
||||
<div id="footer"></div>
|
||||
|
||||
<script src="components/header/header.js"></script>
|
||||
<script src="productPages/productSeparateCommerceLNG/productSeparateCommerceLNG.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,14 @@
|
||||
////views/productPages/productSeparateCommerceLNG/productSeparateCommerceLNG.js
|
||||
// Load footer
|
||||
fetch("components/footer/footer.html")
|
||||
.then((response) => response.text())
|
||||
.then((data) => {
|
||||
document.getElementById("footer").innerHTML = data;
|
||||
});
|
||||
|
||||
// Set products nav item as active
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
if (document.getElementById("products")) {
|
||||
document.getElementById("products").classList.add("active");
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,115 @@
|
||||
/* views/productPages/productSeparateCommercePNG/productSeparateCommercePNG.css */
|
||||
/* Additional styles for PNG page */
|
||||
.png-hero {
|
||||
background-color: #30875f;
|
||||
color: white;
|
||||
padding: 80px 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.png-hero h1 {
|
||||
font-size: 42px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.png-hero p {
|
||||
font-size: 20px;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.png-content {
|
||||
padding: 60px 0;
|
||||
}
|
||||
|
||||
.png-details {
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.png-image {
|
||||
flex: 1;
|
||||
min-height: 400px;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 150px;
|
||||
color: #30875f;
|
||||
}
|
||||
|
||||
.png-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.png-info h2 {
|
||||
color: #30875f;
|
||||
margin-bottom: 20px;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.png-features {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.png-feature {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.png-feature i {
|
||||
color: #e84e0f;
|
||||
font-size: 20px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.png-specs {
|
||||
background-color: #f9f9f9;
|
||||
padding: 40px;
|
||||
border-radius: 8px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.png-specs h3 {
|
||||
color: #30875f;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.spec-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.spec-item {
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.spec-item h4 {
|
||||
color: #e84e0f;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.png-details {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.png-image {
|
||||
min-height: 250px;
|
||||
font-size: 100px;
|
||||
}
|
||||
|
||||
.pipeline-icon {
|
||||
font-size: 80px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,143 @@
|
||||
<!-- views/productPages/productSeparateCommercePNG/productSeparateCommercePNG.html -->
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>
|
||||
PNG - Khí tự nhiên nén | CÔNG TY TNHH ĐẦU TƯ THƯƠNG MẠI DỊCH VỤ KỲ LONG
|
||||
</title>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
|
||||
/>
|
||||
<link
|
||||
rel="preload"
|
||||
href="components/header/header.html"
|
||||
as="fetch"
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
<link rel="stylesheet" href="components/header/header.css" />
|
||||
<link rel="stylesheet" href="components/footer/footer.css" />
|
||||
<link rel="stylesheet" href="productPages/productMain/productMain.css" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="productPages/productSeparateCommercePNG/productSeparateCommercePNG.css"
|
||||
/>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Header Component -->
|
||||
<div id="header"></div>
|
||||
|
||||
<!-- PNG HERO SECTION -->
|
||||
<section class="png-hero">
|
||||
<div class="container">
|
||||
<h1>KHÍ TỰ NHIÊN NÉN (PNG)</h1>
|
||||
<p>
|
||||
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>
|
||||
</section>
|
||||
|
||||
<!-- PNG CONTENT SECTION -->
|
||||
<section class="png-content">
|
||||
<div class="container">
|
||||
<div class="png-details">
|
||||
<div class="png-image">
|
||||
<i class="fas fa-fire"></i>
|
||||
</div>
|
||||
<div class="png-info">
|
||||
<h2>Giới thiệu sản phẩm PNG</h2>
|
||||
<p>
|
||||
Khí tự nhiên nén (Pipeline Natural Gas - PNG) là khí thiên nhiên
|
||||
được cung cấp trực tiếp qua hệ thống đường ống đến các điểm sử
|
||||
dụng. Đây là giải pháp tối ưu cho các doanh nghiệp có nhu cầu sử
|
||||
dụng khí đốt ổn định với khối lượng lớn.
|
||||
</p>
|
||||
|
||||
<div class="png-features">
|
||||
<div class="png-feature">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
<div>
|
||||
<h4>Cung cấp liên tục</h4>
|
||||
<p>
|
||||
Không cần lưu trữ nhiên liệu tại chỗ, đảm bảo nguồn cung ổn
|
||||
định 24/7
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="png-feature">
|
||||
<i class="fas fa-pipe"></i>
|
||||
<div>
|
||||
<h4>Không cần bồn chứa</h4>
|
||||
<p>
|
||||
Tiết kiệm diện tích và chi phí đầu tư cơ sở hạ tầng lưu trữ
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="png-feature">
|
||||
<i class="fas fa-coins"></i>
|
||||
<div>
|
||||
<h4>Chi phí vận hành thấp</h4>
|
||||
<p>
|
||||
Giảm chi phí vận chuyển và tổn thất năng lượng so với các
|
||||
dạng nhiên liệu khác
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="png-specs">
|
||||
<h3>THÔNG SỐ KỸ THUẬT</h3>
|
||||
<div class="spec-grid">
|
||||
<div class="spec-item">
|
||||
<h4>Thành phần chính</h4>
|
||||
<p>
|
||||
Methane (CH4) chiếm 90-98%, còn lại là Ethane, Propane và các
|
||||
hydrocarbon khác
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="spec-item">
|
||||
<h4>Áp suất vận hành</h4>
|
||||
<p>2 - 24 bar tùy theo hệ thống đường ống</p>
|
||||
</div>
|
||||
|
||||
<div class="spec-item">
|
||||
<h4>Nhiệt trị</h4>
|
||||
<p>9,000 - 11,000 kcal/m³ (khoảng 37-46 MJ/m³)</p>
|
||||
</div>
|
||||
|
||||
<div class="spec-item">
|
||||
<h4>Độ tinh khiết</h4>
|
||||
<p>≥ 95% methane, hàm lượng lưu huỳnh < 5mg/m³</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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 PNG?</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>
|
||||
|
||||
<!-- Footer Component -->
|
||||
<div id="footer"></div>
|
||||
|
||||
<script src="components/header/header.js"></script>
|
||||
<script src="productPages/productSeparateCommercePNG/productSeparateCommercePNG.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,14 @@
|
||||
////views/productPages/productSeparateCommercePNG/productSeparateCommercePNG.js
|
||||
// Load footer
|
||||
fetch("components/footer/footer.html")
|
||||
.then((response) => response.text())
|
||||
.then((data) => {
|
||||
document.getElementById("footer").innerHTML = data;
|
||||
});
|
||||
|
||||
// Set products nav item as active
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
if (document.getElementById("products")) {
|
||||
document.getElementById("products").classList.add("active");
|
||||
}
|
||||
});
|
||||
+111
@@ -0,0 +1,111 @@
|
||||
/* views/productPages/productSeparateProductionGasMeter/productSeparateProductionGasMeter.css */
|
||||
/* Additional styles for Gas Meter page */
|
||||
.gas-meter-hero {
|
||||
background-color: #30875f;
|
||||
color: white;
|
||||
padding: 80px 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.gas-meter-hero h1 {
|
||||
font-size: 42px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.gas-meter-hero p {
|
||||
font-size: 20px;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.gas-meter-content {
|
||||
padding: 60px 0;
|
||||
}
|
||||
|
||||
.gas-meter-details {
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.gas-meter-image {
|
||||
flex: 1;
|
||||
min-height: 400px;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 150px;
|
||||
color: #30875f;
|
||||
}
|
||||
|
||||
.gas-meter-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.gas-meter-info h2 {
|
||||
color: #30875f;
|
||||
margin-bottom: 20px;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.gas-meter-features {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.gas-meter-feature {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.gas-meter-feature i {
|
||||
color: #e84e0f;
|
||||
font-size: 20px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.gas-meter-specs {
|
||||
background-color: #f9f9f9;
|
||||
padding: 40px;
|
||||
border-radius: 8px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.gas-meter-specs h3 {
|
||||
color: #30875f;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.spec-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.spec-item {
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.spec-item h4 {
|
||||
color: #e84e0f;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.gas-meter-details {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.gas-meter-image {
|
||||
min-height: 250px;
|
||||
font-size: 100px;
|
||||
}
|
||||
}
|
||||
+140
@@ -0,0 +1,140 @@
|
||||
<!-- views/productPages/productSeparateProductionGasMeter/productSeparateProductionGasMeter.html -->
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>
|
||||
Đồng Hồ Đo Khí | CÔNG TY TNHH ĐẦU TƯ THƯƠNG MẠI DỊCH VỤ KỲ LONG
|
||||
</title>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
|
||||
/>
|
||||
<link
|
||||
rel="preload"
|
||||
href="components/header/header.html"
|
||||
as="fetch"
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
<link rel="stylesheet" href="components/header/header.css" />
|
||||
<link rel="stylesheet" href="components/footer/footer.css" />
|
||||
<link rel="stylesheet" href="productPages/productMain/productMain.css" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="productPages/productSeparateProductionGasMeter/productSeparateProductionGasMeter.css"
|
||||
/>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Header Component -->
|
||||
<div id="header"></div>
|
||||
|
||||
<!-- GAS METER HERO SECTION -->
|
||||
<section class="gas-meter-hero">
|
||||
<div class="container">
|
||||
<h1>ĐỒNG HỒ ĐO KHÍ</h1>
|
||||
<p>
|
||||
Giải pháp đo lường chính xác lưu lượng khí cho công nghiệp và dân dụng
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- GAS METER CONTENT SECTION -->
|
||||
<section class="gas-meter-content">
|
||||
<div class="container">
|
||||
<div class="gas-meter-details">
|
||||
<div class="gas-meter-image">
|
||||
<i class="fas fa-tachometer-alt"></i>
|
||||
</div>
|
||||
<div class="gas-meter-info">
|
||||
<h2>Giới thiệu sản phẩm đồng hồ đo khí</h2>
|
||||
<p>
|
||||
Đồng hồ đo khí là thiết bị quan trọng dùng để đo lường chính xác
|
||||
lưu lượng khí trong các hệ thống công nghiệp và dân dụng. Sản phẩm
|
||||
của chúng tôi được thiết kế đảm bảo độ chính xác cao, bền bỉ, phù
|
||||
hợp với nhiều loại khí và môi trường làm việc khác nhau.
|
||||
</p>
|
||||
|
||||
<div class="gas-meter-features">
|
||||
<div class="gas-meter-feature">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
<div>
|
||||
<h4>Độ chính xác cao</h4>
|
||||
<p>
|
||||
Cung cấp kết quả đo lường chính xác, ổn định trong nhiều
|
||||
điều kiện làm việc khác nhau với sai số tối thiểu
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gas-meter-feature">
|
||||
<i class="fas fa-clock"></i>
|
||||
<div>
|
||||
<h4>Tuổi thọ cao và bảo trì thấp</h4>
|
||||
<p>
|
||||
Thiết kế bền bỉ, chịu được môi trường khắc nghiệt, yêu cầu
|
||||
bảo trì tối thiểu và chu kỳ hiệu chuẩn dài
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gas-meter-feature">
|
||||
<i class="fas fa-signal"></i>
|
||||
<div>
|
||||
<h4>Tích hợp hệ thống thông minh</h4>
|
||||
<p>
|
||||
Tùy chọn kết nối và truyền dữ liệu từ xa, tích hợp vào hệ
|
||||
thống quản lý và giám sát tự động
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gas-meter-specs">
|
||||
<h3>THÔNG SỐ KỸ THUẬT</h3>
|
||||
<div class="spec-grid">
|
||||
<div class="spec-item">
|
||||
<h4>Loại đồng hồ</h4>
|
||||
<p>Turbine, Ultrasonic, Rotary, Diaphragm, Coriolis</p>
|
||||
</div>
|
||||
|
||||
<div class="spec-item">
|
||||
<h4>Dải đo lưu lượng</h4>
|
||||
<p>0.5 - 10,000 m³/h tùy theo model và ứng dụng</p>
|
||||
</div>
|
||||
|
||||
<div class="spec-item">
|
||||
<h4>Áp suất làm việc</h4>
|
||||
<p>Từ áp suất thấp đến 40 bar tùy loại đồng hồ</p>
|
||||
</div>
|
||||
|
||||
<div class="spec-item">
|
||||
<h4>Tiêu chuẩn chất lượng</h4>
|
||||
<p>EN 12261, OIML R137, MID 2014/32/EU</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CONTACT CTA SECTION -->
|
||||
<section class="contact-cta">
|
||||
<div class="container">
|
||||
<h2>QUÝ KHÁCH CẦN TƯ VẤN VỀ ĐỒNG HỒ ĐO KHÍ?</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 đo lường khí phù hợp nhất cho nhu cầu của bạn
|
||||
</p>
|
||||
<a href="/lien-he" class="cta-button">LIÊN HỆ NGAY</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer Component -->
|
||||
<div id="footer"></div>
|
||||
|
||||
<script src="components/header/header.js"></script>
|
||||
<script src="productPages/productSeparateProductionGasMeter/productSeparateProductionGasMeter.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
+14
@@ -0,0 +1,14 @@
|
||||
// views/productPages/productSeparateProductionGasMeter/productSeparateProductionGasMeter.js
|
||||
// Load footer
|
||||
fetch("components/footer/footer.html")
|
||||
.then((response) => response.text())
|
||||
.then((data) => {
|
||||
document.getElementById("footer").innerHTML = data;
|
||||
});
|
||||
|
||||
// Set products nav item as active
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
if (document.getElementById("products")) {
|
||||
document.getElementById("products").classList.add("active");
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,115 @@
|
||||
/* views/productPages/productSeparateProductionPRU/productSeparateProductionPRU.css */
|
||||
/* Additional styles for PRU page */
|
||||
.pru-hero {
|
||||
background-color: #30875f;
|
||||
color: white;
|
||||
padding: 80px 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pru-hero h1 {
|
||||
font-size: 42px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.pru-hero p {
|
||||
font-size: 20px;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.pru-content {
|
||||
padding: 60px 0;
|
||||
}
|
||||
|
||||
.pru-details {
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.pru-image {
|
||||
flex: 1;
|
||||
min-height: 400px;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 150px;
|
||||
color: #30875f;
|
||||
}
|
||||
|
||||
.pru-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.pru-info h2 {
|
||||
color: #30875f;
|
||||
margin-bottom: 20px;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.pru-features {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.pru-feature {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.pru-feature i {
|
||||
color: #e84e0f;
|
||||
font-size: 20px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.pru-specs {
|
||||
background-color: #f9f9f9;
|
||||
padding: 40px;
|
||||
border-radius: 8px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.pru-specs h3 {
|
||||
color: #30875f;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.spec-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.spec-item {
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.spec-item h4 {
|
||||
color: #e84e0f;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.pru-details {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.pru-image {
|
||||
min-height: 250px;
|
||||
font-size: 100px;
|
||||
}
|
||||
|
||||
.pipeline-icon {
|
||||
font-size: 80px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,143 @@
|
||||
<!-- views/productPages/productSeparateProductionPRU/productSeparateProductionPRU.html -->
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>
|
||||
PRU - Pressure Regulating Unit | CÔNG TY TNHH ĐẦU TƯ THƯƠNG MẠI DỊCH VỤ KỲ
|
||||
LONG
|
||||
</title>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
|
||||
/>
|
||||
<link
|
||||
rel="preload"
|
||||
href="components/header/header.html"
|
||||
as="fetch"
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
<link rel="stylesheet" href="components/header/header.css" />
|
||||
<link rel="stylesheet" href="components/footer/footer.css" />
|
||||
<link rel="stylesheet" href="productPages/productMain/productMain.css" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="productPages/productSeparateProductionPRU/productSeparateProductionPRU.css"
|
||||
/>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Header Component -->
|
||||
<div id="header"></div>
|
||||
|
||||
<!-- PRU HERO SECTION -->
|
||||
<section class="pru-hero">
|
||||
<div class="container">
|
||||
<h1>BỘ ĐIỀU ÁP KHÍ (PRU)</h1>
|
||||
<p>
|
||||
Giải pháp điều chỉnh và ổn định áp suất khí đốt cho hệ thống công
|
||||
nghiệp
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- PRU CONTENT SECTION -->
|
||||
<section class="pru-content">
|
||||
<div class="container">
|
||||
<div class="pru-details">
|
||||
<div class="pru-image">
|
||||
<i class="fas fa-gauge-high"></i>
|
||||
</div>
|
||||
<div class="pru-info">
|
||||
<h2>Giới thiệu sản phẩm PRU</h2>
|
||||
<p>
|
||||
Bộ điều áp khí (Pressure Regulating Unit - PRU) là thiết bị chuyên
|
||||
dụng được thiết kế để điều chỉnh và duy trì áp suất khí đầu ra ổn
|
||||
định cho các hệ thống khí công nghiệp. PRU đóng vai trò quan trọng
|
||||
trong việc đảm bảo an toàn và hiệu quả cho quy trình sản xuất sử
|
||||
dụng khí đốt.
|
||||
</p>
|
||||
|
||||
<div class="pru-features">
|
||||
<div class="pru-feature">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
<div>
|
||||
<h4>Điều chỉnh áp suất chính xác</h4>
|
||||
<p>
|
||||
Duy trì áp suất đầu ra ổn định bất kể sự biến động của áp
|
||||
suất đầu vào
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pru-feature">
|
||||
<i class="fas fa-shield-alt"></i>
|
||||
<div>
|
||||
<h4>Hệ thống bảo vệ tích hợp</h4>
|
||||
<p>
|
||||
Tự động ngắt cung cấp khí trong trường hợp áp suất vượt quá
|
||||
ngưỡng an toàn
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pru-feature">
|
||||
<i class="fas fa-tools"></i>
|
||||
<div>
|
||||
<h4>Thiết kế bền bỉ, dễ bảo trì</h4>
|
||||
<p>
|
||||
Vật liệu cao cấp, kết cấu chắc chắn với các thành phần dễ
|
||||
dàng kiểm tra và thay thế
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pru-specs">
|
||||
<h3>THÔNG SỐ KỸ THUẬT</h3>
|
||||
<div class="spec-grid">
|
||||
<div class="spec-item">
|
||||
<h4>Dải áp suất đầu vào</h4>
|
||||
<p>Từ 5 bar đến 50 bar tùy theo model và cấu hình</p>
|
||||
</div>
|
||||
|
||||
<div class="spec-item">
|
||||
<h4>Dải áp suất đầu ra</h4>
|
||||
<p>0.5 - 10 bar, có thể điều chỉnh theo yêu cầu</p>
|
||||
</div>
|
||||
|
||||
<div class="spec-item">
|
||||
<h4>Lưu lượng khí</h4>
|
||||
<p>100 - 10,000 Nm³/h tùy theo kích thước</p>
|
||||
</div>
|
||||
|
||||
<div class="spec-item">
|
||||
<h4>Tiêu chuẩn an toàn</h4>
|
||||
<p>Tuân thủ tiêu chuẩn ISO 4126, ASME B31.8, EN 334</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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 PRU?</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 cho nhu cầu điều áp khí
|
||||
</p>
|
||||
<a href="/lien-he" class="cta-button">LIÊN HỆ NGAY</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer Component -->
|
||||
<div id="footer"></div>
|
||||
|
||||
<script src="components/header/header.js"></script>
|
||||
<script src="productPages/productSeparateProductionPRU/productSeparateProductionPRU.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,14 @@
|
||||
// views/productPages/productSeparateProductionPRU/productSeparateProductionPRU.js
|
||||
// Load footer
|
||||
fetch("components/footer/footer.html")
|
||||
.then((response) => response.text())
|
||||
.then((data) => {
|
||||
document.getElementById("footer").innerHTML = data;
|
||||
});
|
||||
|
||||
// Set products nav item as active
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
if (document.getElementById("products")) {
|
||||
document.getElementById("products").classList.add("active");
|
||||
}
|
||||
});
|
||||
+111
@@ -0,0 +1,111 @@
|
||||
/* views/productPages/productSeparateProductionPressureRegulatorValve/productSeparateProductionPressureRegulatorValve.css */
|
||||
/* Additional styles for Pressure Regulator Valve page */
|
||||
.valve-hero {
|
||||
background-color: #30875f;
|
||||
color: white;
|
||||
padding: 80px 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.valve-hero h1 {
|
||||
font-size: 42px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.valve-hero p {
|
||||
font-size: 20px;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.valve-content {
|
||||
padding: 60px 0;
|
||||
}
|
||||
|
||||
.valve-details {
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.valve-image {
|
||||
flex: 1;
|
||||
min-height: 400px;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 150px;
|
||||
color: #30875f;
|
||||
}
|
||||
|
||||
.valve-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.valve-info h2 {
|
||||
color: #30875f;
|
||||
margin-bottom: 20px;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.valve-features {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.valve-feature {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.valve-feature i {
|
||||
color: #e84e0f;
|
||||
font-size: 20px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.valve-specs {
|
||||
background-color: #f9f9f9;
|
||||
padding: 40px;
|
||||
border-radius: 8px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.valve-specs h3 {
|
||||
color: #30875f;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.spec-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.spec-item {
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.spec-item h4 {
|
||||
color: #e84e0f;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.valve-details {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.valve-image {
|
||||
min-height: 250px;
|
||||
font-size: 100px;
|
||||
}
|
||||
}
|
||||
+140
@@ -0,0 +1,140 @@
|
||||
<!-- views/productPages/productSeparateProductionPressureRegulatorValve/productSeparateProductionPressureRegulatorValve.html -->
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Van Điều Áp | CÔNG TY TNHH ĐẦU TƯ THƯƠNG MẠI DỊCH VỤ KỲ LONG</title>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
|
||||
/>
|
||||
<link
|
||||
rel="preload"
|
||||
href="components/header/header.html"
|
||||
as="fetch"
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
<link rel="stylesheet" href="components/header/header.css" />
|
||||
<link rel="stylesheet" href="components/footer/footer.css" />
|
||||
<link rel="stylesheet" href="productPages/productMain/productMain.css" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="productPages/productSeparateProductionPressureRegulatorValve/productSeparateProductionPressureRegulatorValve.css"
|
||||
/>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Header Component -->
|
||||
<div id="header"></div>
|
||||
|
||||
<!-- PRESSURE REGULATOR VALVE HERO SECTION -->
|
||||
<section class="valve-hero">
|
||||
<div class="container">
|
||||
<h1>VAN ĐIỀU ÁP</h1>
|
||||
<p>
|
||||
Giải pháp điều chỉnh và duy trì áp suất khí ổn định cho hệ thống khí
|
||||
công nghiệp
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- PRESSURE REGULATOR VALVE CONTENT SECTION -->
|
||||
<section class="valve-content">
|
||||
<div class="container">
|
||||
<div class="valve-details">
|
||||
<div class="valve-image">
|
||||
<i class="fas fa-compress-alt"></i>
|
||||
</div>
|
||||
<div class="valve-info">
|
||||
<h2>Giới thiệu sản phẩm van điều áp</h2>
|
||||
<p>
|
||||
Van điều áp là thiết bị quan trọng trong hệ thống khí công nghiệp,
|
||||
có chức năng điều chỉnh và duy trì áp suất khí đầu ra ổn định dù
|
||||
áp suất đầu vào có thay đổi. Sản phẩm đảm bảo an toàn và hiệu quả
|
||||
cho quy trình sử dụng khí, bảo vệ thiết bị hạ nguồn và tối ưu hóa
|
||||
hiệu suất hệ thống.
|
||||
</p>
|
||||
|
||||
<div class="valve-features">
|
||||
<div class="valve-feature">
|
||||
<i class="fas fa-shield-alt"></i>
|
||||
<div>
|
||||
<h4>Độ chính xác cao</h4>
|
||||
<p>
|
||||
Duy trì áp suất đầu ra ổn định với sai số tối thiểu, đảm bảo
|
||||
quy trình sản xuất liên tục và đồng đều
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="valve-feature">
|
||||
<i class="fas fa-toolbox"></i>
|
||||
<div>
|
||||
<h4>Bền bỉ và dễ bảo trì</h4>
|
||||
<p>
|
||||
Thiết kế chắc chắn từ vật liệu cao cấp, dễ dàng tháo lắp và
|
||||
bảo dưỡng định kỳ, tiết kiệm chi phí vận hành
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="valve-feature">
|
||||
<i class="fas fa-sliders"></i>
|
||||
<div>
|
||||
<h4>Đa dạng kích thước và cấu hình</h4>
|
||||
<p>
|
||||
Phù hợp với nhiều ứng dụng khác nhau từ quy mô nhỏ đến công
|
||||
nghiệp lớn, tương thích với nhiều loại khí
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="valve-specs">
|
||||
<h3>THÔNG SỐ KỸ THUẬT</h3>
|
||||
<div class="spec-grid">
|
||||
<div class="spec-item">
|
||||
<h4>Kích thước kết nối</h4>
|
||||
<p>DN15 - DN300 (1/2" - 12")</p>
|
||||
</div>
|
||||
|
||||
<div class="spec-item">
|
||||
<h4>Vật liệu thân van</h4>
|
||||
<p>Thép carbon, thép không gỉ 304/316, đồng thau</p>
|
||||
</div>
|
||||
|
||||
<div class="spec-item">
|
||||
<h4>Dải áp suất làm việc</h4>
|
||||
<p>0.05 - 100 bar tùy theo model</p>
|
||||
</div>
|
||||
|
||||
<div class="spec-item">
|
||||
<h4>Tiêu chuẩn an toàn</h4>
|
||||
<p>Tuân thủ tiêu chuẩn ASME, EN 334, ISO 23551</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CONTACT CTA SECTION -->
|
||||
<section class="contact-cta">
|
||||
<div class="container">
|
||||
<h2>QUÝ KHÁCH CẦN TƯ VẤN VỀ VAN ĐIỀU ÁP?</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 cho hệ thống khí công nghiệp của bạn
|
||||
</p>
|
||||
<a href="/lien-he" class="cta-button">LIÊN HỆ NGAY</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer Component -->
|
||||
<div id="footer"></div>
|
||||
|
||||
<script src="components/header/header.js"></script>
|
||||
<script src="productPages/productSeparateProductionPressureRegulatorValve/productSeparateProductionPressureRegulatorValve.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
+14
@@ -0,0 +1,14 @@
|
||||
// views/productPages/productSeparateProductionPressureRegulatorValve/productSeparateProductionPressureRegulatorValve.js
|
||||
// Load footer
|
||||
fetch("components/footer/footer.html")
|
||||
.then((response) => response.text())
|
||||
.then((data) => {
|
||||
document.getElementById("footer").innerHTML = data;
|
||||
});
|
||||
|
||||
// Set products nav item as active
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
if (document.getElementById("products")) {
|
||||
document.getElementById("products").classList.add("active");
|
||||
}
|
||||
});
|
||||
+111
@@ -0,0 +1,111 @@
|
||||
/* views/productPages/productSeparateProductionVaporizer/productSeparateProductionVaporizer.css */
|
||||
/* Additional styles for Vaporizer page */
|
||||
.vaporizer-hero {
|
||||
background-color: #30875f;
|
||||
color: white;
|
||||
padding: 80px 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.vaporizer-hero h1 {
|
||||
font-size: 42px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.vaporizer-hero p {
|
||||
font-size: 20px;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.vaporizer-content {
|
||||
padding: 60px 0;
|
||||
}
|
||||
|
||||
.vaporizer-details {
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.vaporizer-image {
|
||||
flex: 1;
|
||||
min-height: 400px;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 150px;
|
||||
color: #30875f;
|
||||
}
|
||||
|
||||
.vaporizer-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.vaporizer-info h2 {
|
||||
color: #30875f;
|
||||
margin-bottom: 20px;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.vaporizer-features {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.vaporizer-feature {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.vaporizer-feature i {
|
||||
color: #e84e0f;
|
||||
font-size: 20px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.vaporizer-specs {
|
||||
background-color: #f9f9f9;
|
||||
padding: 40px;
|
||||
border-radius: 8px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.vaporizer-specs h3 {
|
||||
color: #30875f;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.spec-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.spec-item {
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.spec-item h4 {
|
||||
color: #e84e0f;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.vaporizer-details {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.vaporizer-image {
|
||||
min-height: 250px;
|
||||
font-size: 100px;
|
||||
}
|
||||
}
|
||||
+140
@@ -0,0 +1,140 @@
|
||||
<!-- views/productPages/productSeparateProductionVaporizer/productSeparateProductionVaporizer.html -->
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Dàn Hóa Hơi | CÔNG TY TNHH ĐẦU TƯ THƯƠNG MẠI DỊCH VỤ KỲ LONG</title>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
|
||||
/>
|
||||
<link
|
||||
rel="preload"
|
||||
href="components/header/header.html"
|
||||
as="fetch"
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
<link rel="stylesheet" href="components/header/header.css" />
|
||||
<link rel="stylesheet" href="components/footer/footer.css" />
|
||||
<link rel="stylesheet" href="productPages/productMain/productMain.css" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="productPages/productSeparateProductionVaporizer/productSeparateProductionVaporizer.css"
|
||||
/>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Header Component -->
|
||||
<div id="header"></div>
|
||||
|
||||
<!-- VAPORIZER HERO SECTION -->
|
||||
<section class="vaporizer-hero">
|
||||
<div class="container">
|
||||
<h1>DÀN HÓA HƠI</h1>
|
||||
<p>
|
||||
Giải pháp chuyển đổi khí hóa lỏng thành khí ở trạng thái hơi với hiệu
|
||||
suất cao
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- VAPORIZER CONTENT SECTION -->
|
||||
<section class="vaporizer-content">
|
||||
<div class="container">
|
||||
<div class="vaporizer-details">
|
||||
<div class="vaporizer-image">
|
||||
<i class="fas fa-wind"></i>
|
||||
</div>
|
||||
<div class="vaporizer-info">
|
||||
<h2>Giới thiệu sản phẩm dàn hóa hơi</h2>
|
||||
<p>
|
||||
Dàn hóa hơi là thiết bị chuyên dụng được thiết kế để chuyển đổi
|
||||
khí hóa lỏng (LPG, LNG) từ trạng thái lỏng sang trạng thái hơi một
|
||||
cách hiệu quả. Thiết bị đóng vai trò quan trọng trong hệ thống
|
||||
cung cấp khí công nghiệp, đảm bảo nguồn khí liên tục và ổn định
|
||||
cho quy trình sản xuất.
|
||||
</p>
|
||||
|
||||
<div class="vaporizer-features">
|
||||
<div class="vaporizer-feature">
|
||||
<i class="fas fa-fire"></i>
|
||||
<div>
|
||||
<h4>Hiệu suất chuyển đổi cao</h4>
|
||||
<p>
|
||||
Khả năng hóa hơi nhanh chóng với lưu lượng ổn định, đáp ứng
|
||||
nhu cầu sử dụng liên tục
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vaporizer-feature">
|
||||
<i class="fas fa-thermometer-half"></i>
|
||||
<div>
|
||||
<h4>Kiểm soát nhiệt độ chính xác</h4>
|
||||
<p>
|
||||
Hệ thống điều khiển nhiệt thông minh giúp tối ưu hóa quá
|
||||
trình hóa hơi và tiết kiệm năng lượng
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vaporizer-feature">
|
||||
<i class="fas fa-cogs"></i>
|
||||
<div>
|
||||
<h4>Thiết kế an toàn, dễ vận hành</h4>
|
||||
<p>
|
||||
Tích hợp nhiều cơ chế bảo vệ, tự động điều chỉnh theo điều
|
||||
kiện môi trường và nhu cầu sử dụng
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vaporizer-specs">
|
||||
<h3>THÔNG SỐ KỸ THUẬT</h3>
|
||||
<div class="spec-grid">
|
||||
<div class="spec-item">
|
||||
<h4>Công suất hóa hơi</h4>
|
||||
<p>50 - 2,000 kg/h tùy theo model và cấu hình</p>
|
||||
</div>
|
||||
|
||||
<div class="spec-item">
|
||||
<h4>Phương thức cấp nhiệt</h4>
|
||||
<p>Điện, nước nóng, hơi nước hoặc đốt gián tiếp</p>
|
||||
</div>
|
||||
|
||||
<div class="spec-item">
|
||||
<h4>Môi chất làm việc</h4>
|
||||
<p>LPG, LNG, NH3, CO2 và các loại khí công nghiệp khác</p>
|
||||
</div>
|
||||
|
||||
<div class="spec-item">
|
||||
<h4>Tiêu chuẩn an toàn</h4>
|
||||
<p>Tuân thủ tiêu chuẩn ASME, ISO 23208, EN 12542</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CONTACT CTA SECTION -->
|
||||
<section class="contact-cta">
|
||||
<div class="container">
|
||||
<h2>QUÝ KHÁCH CẦN TƯ VẤN VỀ DÀN HÓA HƠI?</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 cho nhu cầu hóa hơi khí công nghiệp
|
||||
</p>
|
||||
<a href="/lien-he" class="cta-button">LIÊN HỆ NGAY</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer Component -->
|
||||
<div id="footer"></div>
|
||||
|
||||
<script src="components/header/header.js"></script>
|
||||
<script src="productPages/productSeparateProductionVaporizer/productSeparateProductionVaporizer.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
+14
@@ -0,0 +1,14 @@
|
||||
// views/productPages/productSeparateProductionVaporizer/productSeparateProductionVaporizer.js
|
||||
// Load footer
|
||||
fetch("components/footer/footer.html")
|
||||
.then((response) => response.text())
|
||||
.then((data) => {
|
||||
document.getElementById("footer").innerHTML = data;
|
||||
});
|
||||
|
||||
// Set products nav item as active
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
if (document.getElementById("products")) {
|
||||
document.getElementById("products").classList.add("active");
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,14 @@
|
||||
User-agent: *
|
||||
Allow: /
|
||||
Allow: /homePage/
|
||||
Allow: /aboutPage/
|
||||
Allow: /productsPage/
|
||||
Allow: /servicePage/
|
||||
Allow: /newsPage/
|
||||
Allow: /lien-he/
|
||||
|
||||
# Allow sitemap
|
||||
Allow: /sitemap.xml
|
||||
|
||||
# Sitemap location
|
||||
Sitemap: https://kylongtech.com/sitemap.xml
|
||||
@@ -0,0 +1,332 @@
|
||||
/* views\servicePages\serviceMain.css */
|
||||
/* Base 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;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1140px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
text-align: center;
|
||||
color: #30875f;
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 40px;
|
||||
position: relative;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
.section-title::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 80px;
|
||||
height: 3px;
|
||||
background-color: #e84e0f;
|
||||
}
|
||||
|
||||
/* Service Hero Section */
|
||||
.service-hero {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
background-image: url("https://images.unsplash.com/photo-1450101499163-c8848c66ca85?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
position: relative;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.hero-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.hero-overlay h1 {
|
||||
font-size: 48px;
|
||||
margin-bottom: 20px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.hero-overlay p {
|
||||
font-size: 24px;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
/* Service Categories Section */
|
||||
.service-categories {
|
||||
padding: 60px 0;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.category-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.category-card {
|
||||
background-color: white;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.category-card:hover {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
||||
.category-icon {
|
||||
background-color: #30875f;
|
||||
color: white;
|
||||
padding: 25px;
|
||||
text-align: center;
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.category-card h3 {
|
||||
padding: 20px;
|
||||
background-color: #f0f0f0;
|
||||
color: #30875f;
|
||||
font-size: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.service-list {
|
||||
padding: 0 20px 20px;
|
||||
}
|
||||
|
||||
.service-item {
|
||||
padding: 15px 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.service-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.service-item h4 {
|
||||
color: #e84e0f;
|
||||
font-size: 16px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.service-item p {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* Service Benefits Section */
|
||||
.service-benefits {
|
||||
padding: 60px 0;
|
||||
background-color: #30875f;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.service-benefits .section-title {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.service-benefits .section-title::after {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.benefits-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 30px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.benefit-card {
|
||||
background-color: white;
|
||||
border-radius: 10px;
|
||||
padding: 30px;
|
||||
text-align: center;
|
||||
color: #333;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.benefit-card:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.benefit-icon {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
background-color: #30875f;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 20px;
|
||||
color: white;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.benefit-card h3 {
|
||||
font-size: 18px;
|
||||
margin-bottom: 15px;
|
||||
color: #30875f;
|
||||
}
|
||||
|
||||
.benefit-card p {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Service Process Section */
|
||||
.service-process {
|
||||
padding: 60px 0;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.process-steps {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 40px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.process-step {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
text-align: center;
|
||||
padding: 0 15px;
|
||||
margin-bottom: 30px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.step-number {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: #e84e0f;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
margin: 0 auto 20px;
|
||||
}
|
||||
|
||||
.process-step h3 {
|
||||
font-size: 18px;
|
||||
margin-bottom: 15px;
|
||||
color: #30875f;
|
||||
}
|
||||
|
||||
.process-step p {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 1024px) {
|
||||
.category-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.benefits-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.process-steps {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.process-step {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.process-step::after {
|
||||
content: "↓";
|
||||
position: absolute;
|
||||
bottom: -25px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-size: 30px;
|
||||
color: #30875f;
|
||||
}
|
||||
|
||||
.process-step:last-child::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero-overlay h1 {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.hero-overlay p {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.benefits-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.service-hero {
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.hero-overlay h1 {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.hero-overlay p {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,430 @@
|
||||
<!-- views\servicePages\serviceMain.html -->
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>DỊCH VỤ | 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="servicePages/serviceMain.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>
|
||||
|
||||
<!-- SERVICE HERO SECTION -->
|
||||
<div class="service-hero">
|
||||
<div class="hero-overlay">
|
||||
<h1>DỊCH VỤ CHUYÊN NGHIỆP</h1>
|
||||
<p>Giải pháp toàn diện cho mọi nhu cầu công nghiệp</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- END SERVICE HERO SECTION -->
|
||||
|
||||
<!-- SERVICE CATEGORIES SECTION -->
|
||||
<section class="service-categories">
|
||||
<div class="container">
|
||||
<h2 class="section-title">DANH MỤC DỊCH VỤ</h2>
|
||||
<div class="category-grid">
|
||||
<!-- Repair Services -->
|
||||
<div class="category-card" id="sua-chua">
|
||||
<div class="category-icon">
|
||||
<i class="fas fa-tools"></i>
|
||||
</div>
|
||||
<h3>Sửa chữa</h3>
|
||||
<div class="service-list">
|
||||
<div class="service-item">
|
||||
<h4>Sửa chữa máy móc, thiết bị</h4>
|
||||
<p>
|
||||
Dịch vụ sửa chữa chuyên nghiệp cho hệ thống máy móc công
|
||||
nghiệp
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Rental Services -->
|
||||
<div class="category-card" id="cho-thue">
|
||||
<div class="category-icon">
|
||||
<i class="fas fa-key"></i>
|
||||
</div>
|
||||
<h3>Cho thuê</h3>
|
||||
<div class="service-list">
|
||||
<div class="service-item">
|
||||
<h4>Cho thuê xe có động cơ</h4>
|
||||
<p>Dịch vụ cho thuê xe chất lượng cao</p>
|
||||
</div>
|
||||
<div class="service-item">
|
||||
<h4>Cho thuê máy móc, thiết bị</h4>
|
||||
<p>Cho thuê máy móc xây dựng, văn phòng</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Transportation -->
|
||||
<div class="category-card" id="van-tai">
|
||||
<div class="category-icon">
|
||||
<i class="fas fa-truck"></i>
|
||||
</div>
|
||||
<h3>Vận tải & Hỗ trợ vận tải</h3>
|
||||
<div class="service-list">
|
||||
<div class="service-item">
|
||||
<h4>Vận tải hành khách đường bộ khác</h4>
|
||||
<p>Dịch vụ vận tải hành khách chuyên nghiệp</p>
|
||||
</div>
|
||||
<div class="service-item">
|
||||
<h4>Vận tải hàng hóa bằng đường bộ</h4>
|
||||
<p>Vận chuyển hàng hóa an toàn, đúng tiến độ</p>
|
||||
</div>
|
||||
<div class="service-item">
|
||||
<h4>Hoạt động dịch vụ hỗ trợ vận tải</h4>
|
||||
<p>Các dịch vụ hỗ trợ logistics chuyên nghiệp</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- IT Services -->
|
||||
<div class="category-card" id="cong-nghe">
|
||||
<div class="category-icon">
|
||||
<i class="fas fa-laptop-code"></i>
|
||||
</div>
|
||||
<h3>Công nghệ thông tin</h3>
|
||||
<div class="service-list">
|
||||
<div class="service-item">
|
||||
<h4>Lập trình máy vi tính</h4>
|
||||
<p>Phát triển phần mềm theo yêu cầu</p>
|
||||
</div>
|
||||
<div class="service-item">
|
||||
<h4>Tư vấn và quản trị hệ thống</h4>
|
||||
<p>Tư vấn và triển khai hệ thống CNTT</p>
|
||||
</div>
|
||||
<div class="service-item">
|
||||
<h4>Dịch vụ công nghệ thông tin khác</h4>
|
||||
<p>Các giải pháp CNTT toàn diện</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Consulting -->
|
||||
<div class="category-card" id="tu-van">
|
||||
<div class="category-icon">
|
||||
<i class="fas fa-chart-line"></i>
|
||||
</div>
|
||||
<h3>Tư vấn, nghiên cứu & khoa học</h3>
|
||||
<div class="service-list">
|
||||
<div class="service-item">
|
||||
<h4>Tư vấn đầu tư</h4>
|
||||
<p>Tư vấn chiến lược đầu tư hiệu quả</p>
|
||||
</div>
|
||||
<div class="service-item">
|
||||
<h4>Tư vấn quản lý</h4>
|
||||
<p>Giải pháp quản lý doanh nghiệp tối ưu</p>
|
||||
</div>
|
||||
<div class="service-item">
|
||||
<h4>Tư vấn kỹ thuật & giám sát</h4>
|
||||
<p>Giám sát thi công công trình dân dụng và công nghiệp</p>
|
||||
</div>
|
||||
<div class="service-item">
|
||||
<h4>Nghiên cứu khoa học</h4>
|
||||
<p>Nghiên cứu phát triển công nghệ mới</p>
|
||||
</div>
|
||||
<div class="service-item">
|
||||
<h4>Tư vấn chuyên ngành khác</h4>
|
||||
<p>Tư vấn nông học, môi trường và công nghệ</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Construction & Installation -->
|
||||
<div class="category-card" id="xay-dung">
|
||||
<div class="category-icon">
|
||||
<i class="fas fa-building"></i>
|
||||
</div>
|
||||
<h3>Xây dựng & Lắp đặt</h3>
|
||||
<div class="service-list">
|
||||
<div class="service-item">
|
||||
<h4>Xây dựng nhà để ở</h4>
|
||||
<p>Thi công các công trình dân dụng chất lượng cao</p>
|
||||
</div>
|
||||
<div class="service-item">
|
||||
<h4>Xây dựng nhà không để ở</h4>
|
||||
<p>Xây dựng nhà xưởng, kho bãi công nghiệp</p>
|
||||
</div>
|
||||
<div class="service-item">
|
||||
<h4>Xây dựng công trình kỹ thuật dân dụng khác</h4>
|
||||
<p>Thi công các công trình kỹ thuật đặc biệt</p>
|
||||
</div>
|
||||
<div class="service-item">
|
||||
<h4>Lắp đặt hệ thống điện</h4>
|
||||
<p>Lắp đặt hệ thống điện công nghiệp và dân dụng</p>
|
||||
</div>
|
||||
<div class="service-item">
|
||||
<h4>Lắp đặt hệ thống cấp, thoát nước</h4>
|
||||
<p>Thi công hệ thống cấp thoát nước chuyên nghiệp</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- END SERVICE CATEGORIES SECTION -->
|
||||
|
||||
<!-- SERVICE BENEFITS SECTION -->
|
||||
<section class="service-benefits">
|
||||
<div class="container">
|
||||
<h2 class="section-title">LỢI ÍCH KHI SỬ DỤNG DỊCH VỤ</h2>
|
||||
<div class="benefits-grid">
|
||||
<div class="benefit-card">
|
||||
<div class="benefit-icon">
|
||||
<i class="fas fa-clock"></i>
|
||||
</div>
|
||||
<h3>Tiết kiệm thời gian</h3>
|
||||
<p>
|
||||
Giải pháp nhanh chóng, tiết kiệm thời gian vận hành cho doanh
|
||||
nghiệp
|
||||
</p>
|
||||
</div>
|
||||
<div class="benefit-card">
|
||||
<div class="benefit-icon">
|
||||
<i class="fas fa-dollar-sign"></i>
|
||||
</div>
|
||||
<h3>Tiết kiệm chi phí</h3>
|
||||
<p>Tối ưu hóa ngân sách với chi phí dịch vụ cạnh tranh</p>
|
||||
</div>
|
||||
<div class="benefit-card">
|
||||
<div class="benefit-icon">
|
||||
<i class="fas fa-shield-alt"></i>
|
||||
</div>
|
||||
<h3>An toàn tuyệt đối</h3>
|
||||
<p>Tuân thủ nghiêm ngặt các tiêu chuẩn an toàn công nghiệp</p>
|
||||
</div>
|
||||
<div class="benefit-card">
|
||||
<div class="benefit-icon">
|
||||
<i class="fas fa-user-tie"></i>
|
||||
</div>
|
||||
<h3>Đội ngũ chuyên gia</h3>
|
||||
<p>Đội ngũ kỹ sư giàu kinh nghiệm, trình độ cao</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- END SERVICE BENEFITS SECTION -->
|
||||
|
||||
<!-- SERVICE PROCESS SECTION -->
|
||||
<section class="service-process">
|
||||
<div class="container">
|
||||
<h2 class="section-title">QUY TRÌNH LÀM VIỆC</h2>
|
||||
<div class="process-steps">
|
||||
<div class="process-step">
|
||||
<div class="step-number">1</div>
|
||||
<h3>Tiếp nhận yêu cầu</h3>
|
||||
<p>Khách hàng liên hệ và cung cấp thông tin yêu cầu dịch vụ</p>
|
||||
</div>
|
||||
<div class="process-step">
|
||||
<div class="step-number">2</div>
|
||||
<h3>Tư vấn giải pháp</h3>
|
||||
<p>Chuyên gia phân tích và đề xuất giải pháp tối ưu</p>
|
||||
</div>
|
||||
<div class="process-step">
|
||||
<div class="step-number">3</div>
|
||||
<h3>Ký kết hợp đồng</h3>
|
||||
<p>Thống nhất các điều khoản và ký kết hợp đồng</p>
|
||||
</div>
|
||||
<div class="process-step">
|
||||
<div class="step-number">4</div>
|
||||
<h3>Triển khai dịch vụ</h3>
|
||||
<p>Đội ngũ chuyên gia thực hiện theo đúng kế hoạch</p>
|
||||
</div>
|
||||
<div class="process-step">
|
||||
<div class="step-number">5</div>
|
||||
<h3>Nghiệm thu & bảo hành</h3>
|
||||
<p>Nghiệm thu công trình và cam kết bảo hành dài hạn</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- END SERVICE PROCESS SECTION -->
|
||||
|
||||
<!-- Footer Component -->
|
||||
<div id="footer"></div>
|
||||
|
||||
<script src="servicePages/serviceMain.js?v=1.0"></script>
|
||||
<script src="/components/header/header.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,54 @@
|
||||
//// views\servicePages\serviceMain.js
|
||||
// Load footer
|
||||
fetch("components/footer/footer.html")
|
||||
.then((response) => response.text())
|
||||
.then((data) => {
|
||||
document.getElementById("footer").innerHTML = data;
|
||||
});
|
||||
|
||||
// Navigation highlighting
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
// Smooth scrolling for anchor links
|
||||
document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
|
||||
anchor.addEventListener("click", function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
const targetId = this.getAttribute("href");
|
||||
if (targetId === "#") return;
|
||||
|
||||
const targetElement = document.querySelector(targetId);
|
||||
if (targetElement) {
|
||||
window.scrollTo({
|
||||
top: targetElement.offsetTop - 100,
|
||||
behavior: "smooth",
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Animate service cards on scroll
|
||||
const serviceCards = document.querySelectorAll(".category-card");
|
||||
|
||||
function animateOnScroll() {
|
||||
serviceCards.forEach((card) => {
|
||||
const cardPosition = card.getBoundingClientRect().top;
|
||||
const screenPosition = window.innerHeight / 1.3;
|
||||
|
||||
if (cardPosition < screenPosition) {
|
||||
card.style.opacity = "1";
|
||||
card.style.transform = "translateY(0)";
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Initialize card styles
|
||||
serviceCards.forEach((card) => {
|
||||
card.style.opacity = "0";
|
||||
card.style.transform = "translateY(20px)";
|
||||
card.style.transition = "all 0.5s ease";
|
||||
});
|
||||
|
||||
// Check on load and scroll
|
||||
window.addEventListener("scroll", animateOnScroll);
|
||||
animateOnScroll();
|
||||
});
|
||||
@@ -0,0 +1,196 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<urlset xmlns="http://sitemaps.org/schemas/sitemap/0.9">
|
||||
<!-- Homepage -->
|
||||
<url>
|
||||
<loc>https://kylongtech.com/</loc>
|
||||
<lastmod>2025-04-19</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>1.0</priority>
|
||||
</url>
|
||||
|
||||
<!-- About Pages -->
|
||||
<url>
|
||||
<loc>https://kylongtech.com/aboutMain</loc>
|
||||
<lastmod>2025-04-19</lastmod>
|
||||
<changefreq>monthly</changefreq>
|
||||
<priority>0.9</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://kylongtech.com/aboutMain#gioi-thieu</loc>
|
||||
<lastmod>2025-04-19</lastmod>
|
||||
<changefreq>monthly</changefreq>
|
||||
<priority>0.8</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://kylongtech.com/aboutMain#lich-su-phat-trien</loc>
|
||||
<lastmod>2025-04-19</lastmod>
|
||||
<changefreq>monthly</changefreq>
|
||||
<priority>0.8</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://kylongtech.com/aboutMain#van-hoa-doanh-nghiep</loc>
|
||||
<lastmod>2025-04-19</lastmod>
|
||||
<changefreq>monthly</changefreq>
|
||||
<priority>0.8</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://kylongtech.com/aboutMain#doi-ngu-quan-ly</loc>
|
||||
<lastmod>2025-04-19</lastmod>
|
||||
<changefreq>monthly</changefreq>
|
||||
<priority>0.8</priority>
|
||||
</url>
|
||||
|
||||
<!-- Product Pages -->
|
||||
<url>
|
||||
<loc>https://kylongtech.com/productMain</loc>
|
||||
<lastmod>2025-04-19</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.9</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://kylongtech.com/productMain#khi-dot</loc>
|
||||
<lastmod>2025-04-19</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.8</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://kylongtech.com/productMain#production</loc>
|
||||
<lastmod>2025-04-19</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.8</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://kylongtech.com/productMain#wholesale</loc>
|
||||
<lastmod>2025-04-19</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.8</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://kylongtech.com/productMain#retail</loc>
|
||||
<lastmod>2025-04-19</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.8</priority>
|
||||
</url>
|
||||
|
||||
<!-- Service Pages -->
|
||||
<url>
|
||||
<loc>https://kylongtech.com/serviceMain</loc>
|
||||
<lastmod>2025-04-19</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.9</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://kylongtech.com/serviceMain#sang-tao</loc>
|
||||
<lastmod>2025-04-19</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.8</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://kylongtech.com/serviceMain#an-toan</loc>
|
||||
<lastmod>2025-04-19</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.8</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://kylongtech.com/serviceMain#toc-do</loc>
|
||||
<lastmod>2025-04-19</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.8</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://kylongtech.com/serviceMain#de-dang</loc>
|
||||
<lastmod>2025-04-19</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.8</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://kylongtech.com/serviceMain#linh-dong</loc>
|
||||
<lastmod>2025-04-19</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.8</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://kylongtech.com/serviceMain#xu-huong</loc>
|
||||
<lastmod>2025-04-19</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.8</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://kylongtech.com/serviceMain#sua-chua</loc>
|
||||
<lastmod>2025-04-19</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.8</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://kylongtech.com/serviceMain#cho-thue</loc>
|
||||
<lastmod>2025-04-19</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.8</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://kylongtech.com/serviceMain#van-tai</loc>
|
||||
<lastmod>2025-04-19</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.8</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://kylongtech.com/serviceMain#cong-nghe</loc>
|
||||
<lastmod>2025-04-19</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.8</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://kylongtech.com/serviceMain#tu-van</loc>
|
||||
<lastmod>2025-04-19</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.8</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://kylongtech.com/serviceMain#xay-dung</loc>
|
||||
<lastmod>2025-04-19</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.8</priority>
|
||||
</url>
|
||||
|
||||
<!-- News Pages -->
|
||||
<url>
|
||||
<loc>https://kylongtech.com/newsMain</loc>
|
||||
<lastmod>2025-04-19</lastmod>
|
||||
<changefreq>daily</changefreq>
|
||||
<priority>0.8</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://kylongtech.com/newsArticle1</loc>
|
||||
<lastmod>2025-03-01</lastmod>
|
||||
<changefreq>monthly</changefreq>
|
||||
<priority>0.7</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://kylongtech.com/newsArticle2</loc>
|
||||
<lastmod>2025-02-25</lastmod>
|
||||
<changefreq>monthly</changefreq>
|
||||
<priority>0.7</priority>
|
||||
</url>
|
||||
|
||||
<!-- Contact Page -->
|
||||
<url>
|
||||
<loc>https://kylongtech.com/lien-he</loc>
|
||||
<lastmod>2025-04-19</lastmod>
|
||||
<changefreq>monthly</changefreq>
|
||||
<priority>0.8</priority>
|
||||
</url>
|
||||
|
||||
<!-- Legal Pages -->
|
||||
<url>
|
||||
<loc>https://kylongtech.com/privacy-policy</loc>
|
||||
<lastmod>2025-04-19</lastmod>
|
||||
<changefreq>yearly</changefreq>
|
||||
<priority>0.3</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://kylongtech.com/terms-of-service</loc>
|
||||
<lastmod>2025-04-19</lastmod>
|
||||
<changefreq>yearly</changefreq>
|
||||
<priority>0.3</priority>
|
||||
</url>
|
||||
</urlset>
|
||||
@@ -0,0 +1,67 @@
|
||||
# Terms of Service
|
||||
|
||||
## Introduction
|
||||
|
||||
Welcome to our website. By accessing or using our website, you agree to be bound by these Terms of Service ("Terms"). Please read these Terms carefully before using our services.
|
||||
|
||||
## Acceptance of Terms
|
||||
|
||||
By accessing or using our website, you acknowledge that you have read, understood, and agree to be bound by these Terms. If you do not agree to these Terms, please do not use our website.
|
||||
|
||||
## Changes to Terms
|
||||
|
||||
We reserve the right to modify these Terms at any time. We will provide notice of any material changes by posting the updated Terms on our website. Your continued use of our website after such modifications constitutes your acceptance of the modified Terms.
|
||||
|
||||
## User Accounts
|
||||
|
||||
Some features of our website may require you to create an account. You are responsible for maintaining the confidentiality of your account information and for all activities that occur under your account. You agree to notify us immediately of any unauthorized use of your account.
|
||||
|
||||
## User Content
|
||||
|
||||
You may be able to submit content to our website. By submitting content, you grant us a worldwide, non-exclusive, royalty-free license to use, reproduce, modify, adapt, publish, translate, and distribute your content in any existing or future media formats.
|
||||
|
||||
You are solely responsible for your content and the consequences of posting it. We reserve the right to remove any content that violates these Terms or that we find objectionable.
|
||||
|
||||
## Prohibited Activities
|
||||
|
||||
You agree not to:
|
||||
|
||||
- Use our website in any way that violates any applicable laws or regulations
|
||||
- Use our website to transmit any malicious code or viruses
|
||||
- Attempt to gain unauthorized access to our website or systems
|
||||
- Interfere with the proper functioning of our website
|
||||
- Engage in any activity that could disable, overburden, or impair our website
|
||||
|
||||
## Disclaimers
|
||||
|
||||
Our website is provided "as is" and "as available" without any warranties of any kind. We do not guarantee that our website will be uninterrupted, secure, or error-free.
|
||||
|
||||
## Limitation of Liability
|
||||
|
||||
To the maximum extent permitted by law, we shall not be liable for any indirect, incidental, special, consequential, or punitive damages arising out of or relating to your use of our website.
|
||||
|
||||
## Indemnification
|
||||
|
||||
You agree to indemnify and hold us harmless from any claims, damages, liabilities, costs, or expenses arising from your use of our website or violation of these Terms.
|
||||
|
||||
## Governing Law
|
||||
|
||||
These Terms shall be governed by and construed in accordance with the laws of [Jurisdiction], without regard to its conflict of law provisions.
|
||||
|
||||
## Termination
|
||||
|
||||
We reserve the right to terminate or suspend your access to our website at any time, without notice, for any reason, including if you violate these Terms.
|
||||
|
||||
## Severability
|
||||
|
||||
If any provision of these Terms is held to be invalid or unenforceable, such provision shall be struck and the remaining provisions shall be enforced.
|
||||
|
||||
## Entire Agreement
|
||||
|
||||
These Terms constitute the entire agreement between you and us regarding your use of our website.
|
||||
|
||||
## Contact Information
|
||||
|
||||
If you have any questions about these Terms, please contact us at [contact information].
|
||||
|
||||
Last Updated: [19/04/2025]
|
||||
Reference in New Issue
Block a user