diff --git a/package-lock.json b/package-lock.json index 7ace0a5..12dfb94 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,10 +9,12 @@ "version": "1.0.0", "dependencies": { "body-parser": "^1.20.3", + "bootstrap-icons": "^1.13.1", "cookie-parser": "^1.4.7", "dotenv": "^16.5.0", "express": "^4.21.2", "express-validator": "^7.2.1", + "gsap": "^3.15.0", "marked": "^15.0.8", "nodemailer": "^8.0.10" }, @@ -92,6 +94,22 @@ "node": ">= 0.8" } }, + "node_modules/bootstrap-icons": { + "version": "1.13.1", + "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.13.1.tgz", + "integrity": "sha512-ijombt4v6bv5CLeXvRWKy7CuM3TRTuPEuGaGKvTV5cz65rQSY8RQ2JcHt6b90cBBAC7s8fsf2EkQDldzCoXUjw==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/twbs" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/bootstrap" + } + ], + "license": "MIT" + }, "node_modules/bytes": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz", @@ -455,6 +473,12 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/gsap": { + "version": "3.15.0", + "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.15.0.tgz", + "integrity": "sha512-dMW4CWBTUK1AEEDeZc1g4xpPGIrSf9fJF960qbTZmN/QwZIWY5wgliS6JWl9/25fpTGJrMRtSjGtOmPnfjZB+A==", + "license": "Standard 'no charge' license: https://gsap.com/standard-license." + }, "node_modules/has-symbols": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz", diff --git a/package.json b/package.json index 8855c97..b2f8b2c 100644 --- a/package.json +++ b/package.json @@ -9,10 +9,12 @@ }, "dependencies": { "body-parser": "^1.20.3", + "bootstrap-icons": "^1.13.1", "cookie-parser": "^1.4.7", "dotenv": "^16.5.0", "express": "^4.21.2", "express-validator": "^7.2.1", + "gsap": "^3.15.0", "marked": "^15.0.8", "nodemailer": "^8.0.10" }, diff --git a/views/aboutPages/aboutMain.html b/views/aboutPages/aboutMain.html index 074d1e6..66653c8 100644 --- a/views/aboutPages/aboutMain.html +++ b/views/aboutPages/aboutMain.html @@ -25,62 +25,8 @@ - - - - - - - - + +
@@ -308,6 +254,7 @@ + diff --git a/views/components/header/header.css b/views/components/header/header.css index 945f71f..7ecb8d4 100644 --- a/views/components/header/header.css +++ b/views/components/header/header.css @@ -144,7 +144,8 @@ margin: 0 15px; /* space around separator */ /* stacked dots */ - box-shadow: 0 6px 0 rgba(255, 255, 255, 0.6), + box-shadow: + 0 6px 0 rgba(255, 255, 255, 0.6), 0 -6px 0 rgba(255, 255, 255, 0.6); } @@ -328,7 +329,7 @@ flex-grow: 1; } - .contact-section { + .header-contact-section { display: none; /* Hide contact info on mobile - it will be in sidebar */ } diff --git a/views/components/header/header.html b/views/components/header/header.html index ccb4e89..283ae4c 100644 --- a/views/components/header/header.html +++ b/views/components/header/header.html @@ -55,7 +55,7 @@
-
+
diff --git a/views/components/sidebar/sidebar.css b/views/components/sidebar/sidebar.css new file mode 100644 index 0000000..20146ce --- /dev/null +++ b/views/components/sidebar/sidebar.css @@ -0,0 +1,128 @@ +/* views/components/sidebar/sidebar.css */ +/* Floating Menu Button Styles */ +.floating-menu-btn { + display: none; + position: fixed; + bottom: 25px; + right: 25px; + width: 60px; + height: 60px; + border-radius: 50%; + background-color: #e84e0f; + color: white; + border: none; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); + z-index: 1030; + cursor: pointer; + align-items: center; + justify-content: center; + transition: all 0.3s ease; +} + +.floating-menu-btn:hover { + background-color: #c93d0a; + transform: scale(1.05); +} + +.floating-menu-btn i { + font-size: 1.8rem; +} + +/* Sidebar Overlay */ +.sidebar-overlay { + display: none; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + z-index: 1040; +} + +.sidebar-overlay.show { + display: block; +} + +/* Sidebar Styles */ +.sidebar { + position: fixed; + top: 0; + left: -300px; + width: 300px; + height: 100%; + background-color: #30875f; + z-index: 1050; + overflow-y: auto; + transition: left 0.3s ease; + padding: 20px; + box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2); +} + +.sidebar.open { + left: 0; +} + +.sidebar-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 20px; + padding-bottom: 15px; + border-bottom: 1px solid rgba(255, 255, 255, 0.2); +} + +.sidebar-logo { + width: 60px; + height: auto; +} + +.close-sidebar { + background: none; + border: none; + color: white; + font-size: 1.5rem; + cursor: pointer; +} + +.sidebar-nav { + display: flex; + flex-direction: column; +} + +.sidebar-nav .nav-link { + padding: 15px 10px !important; + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + color: white !important; + text-decoration: none; +} + +.sidebar-contact { + margin-top: 20px; + color: white; + font-size: 0.9rem; +} + +.sidebar-contact div { + margin-bottom: 10px; +} + +/* Media Queries for Sidebar */ +@media (max-width: 768px) { + .floating-menu-btn { + display: flex; + } +} + +@media (max-width: 576px) { + .sidebar { + width: 250px; + } + + .floating-menu-btn { + width: 50px; + height: 50px; + bottom: 20px; + right: 20px; + } +} diff --git a/views/components/sidebar/sidebar.html b/views/components/sidebar/sidebar.html new file mode 100644 index 0000000..925ebc9 --- /dev/null +++ b/views/components/sidebar/sidebar.html @@ -0,0 +1,56 @@ + + + + + + + + diff --git a/views/components/sidebar/sidebar.js b/views/components/sidebar/sidebar.js new file mode 100644 index 0000000..6eda3f0 --- /dev/null +++ b/views/components/sidebar/sidebar.js @@ -0,0 +1,73 @@ +// views/components/sidebar/sidebar.js +// NOTE: This script is always loaded dynamically by sidebarLoader.js AFTER +// the sidebar HTML has already been injected into #sidebar-container. +// DOMContentLoaded has already fired at this point, so we must call +// initSidebar() directly — NOT inside a DOMContentLoaded listener. + +function initSidebar() { + const floatingMenuBtn = document.getElementById("floatingMenuBtn"); + const sidebarOverlay = document.getElementById("sidebarOverlay"); + const sidebar = document.getElementById("sidebar"); + const closeSidebarBtn = document.querySelector(".close-sidebar"); + + function openSidebar() { + if (sidebar && sidebarOverlay) { + sidebar.classList.add("open"); + sidebarOverlay.style.display = "block"; + } + } + + function closeSidebar() { + if (sidebar && sidebarOverlay) { + sidebar.classList.remove("open"); + sidebarOverlay.style.display = "none"; + } + } + + if (floatingMenuBtn) { + floatingMenuBtn.addEventListener("click", openSidebar); + } + + if (closeSidebarBtn) { + closeSidebarBtn.addEventListener("click", closeSidebar); + } + + if (sidebarOverlay) { + sidebarOverlay.addEventListener("click", closeSidebar); + } + + // Close sidebar when clicking outside or on a link + document.addEventListener("click", (e) => { + if (sidebar && sidebar.classList.contains("open")) { + // Click outside sidebar and not on floating menu button + if ( + !sidebar.contains(e.target) && + !e.target.closest("#floatingMenuBtn") + ) { + closeSidebar(); + } + // Click on a nav link + if (e.target.closest(".sidebar-nav .nav-link")) { + closeSidebar(); + } + } + }); + + // Handle scroll behavior to hide/show floating menu button smoothly + let lastScrollY = window.scrollY; + window.addEventListener("scroll", () => { + if (window.innerWidth <= 768 && floatingMenuBtn) { + if (window.scrollY > lastScrollY && window.scrollY > 100) { + // Scrolling down + floatingMenuBtn.style.display = "none"; + } else { + // Scrolling up + floatingMenuBtn.style.display = "flex"; + } + } + lastScrollY = window.scrollY; + }); +} + +// Call directly — sidebar HTML is already in DOM when this script executes +initSidebar(); diff --git a/views/components/sidebar/sidebarLoader.js b/views/components/sidebar/sidebarLoader.js new file mode 100644 index 0000000..b0e5d87 --- /dev/null +++ b/views/components/sidebar/sidebarLoader.js @@ -0,0 +1,24 @@ +// views/components/sidebar/sidebarLoader.js +document.addEventListener("DOMContentLoaded", function () { + const sidebarContainer = document.getElementById("sidebar-container"); + if (!sidebarContainer) return; + + // Load HTML + fetch("/components/sidebar/sidebar.html") + .then((response) => response.text()) + .then((data) => { + sidebarContainer.innerHTML = data; + + // Load CSS + const link = document.createElement("link"); + link.rel = "stylesheet"; + link.href = "/components/sidebar/sidebar.css"; + document.head.appendChild(link); + + // Load JS + const script = document.createElement("script"); + script.src = "/components/sidebar/sidebar.js"; + document.body.appendChild(script); + }) + .catch((error) => console.error("Error loading sidebar:", error)); +}); diff --git a/views/contactPages/contactMain.css b/views/contactPages/contactMain.css index 81bae96..23fa254 100644 --- a/views/contactPages/contactMain.css +++ b/views/contactPages/contactMain.css @@ -35,10 +35,7 @@ a:active { /* Contact Section */ .contact-section { - padding: 60px 5%; background-color: #f9f9f9; - max-width: 1400px; - margin: 0 auto; } .page-intro { @@ -60,19 +57,18 @@ a:active { } .contact-container { - display: flex; - gap: 40px; margin-top: 30px; } /* Enhanced Form Container */ .contact-form { - flex: 1; background-color: white; padding: 35px; border-radius: 12px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1); - transition: transform 0.3s ease, box-shadow 0.3s ease; + transition: + transform 0.3s ease, + box-shadow 0.3s ease; position: relative; overflow: hidden; } @@ -303,7 +299,9 @@ a:active { border-radius: 50%; transform: scale(0); opacity: 0; - transition: transform 0.6s, opacity 0.6s; + transition: + transform 0.6s, + opacity 0.6s; } .submit-button:hover::after { @@ -313,14 +311,17 @@ a:active { /* Contact Details Section */ .contact-details { - flex: 1; background-color: white; padding: 35px; border-radius: 12px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1); - transition: transform 0.3s ease, box-shadow 0.3s ease; + transition: + transform 0.3s ease, + box-shadow 0.3s ease; position: relative; overflow: hidden; + display: flex; + flex-direction: column; } .contact-details::before { @@ -380,7 +381,9 @@ a:active { color: #30875f; margin-right: 15px; margin-top: 3px; - transition: color 0.3s, transform 0.3s; + transition: + color 0.3s, + transform 0.3s; } .contact-item:hover i { @@ -428,8 +431,18 @@ a:active { border-radius: 12px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); - transition: transform 0.3s ease, box-shadow 0.3s ease; + transition: + transform 0.3s ease, + box-shadow 0.3s ease; position: relative; + flex-grow: 1; + display: flex; + flex-direction: column; +} +.map-container iframe { + flex-grow: 1; + height: 100% !important; + min-height: 250px; } .map-container:hover { @@ -488,7 +501,8 @@ a:active { /* Responsive Design */ @media (max-width: 1200px) { .contact-section { - padding: 50px 4%; + padding-top: 50px; + padding-bottom: 50px; } .contact-form, @@ -514,13 +528,8 @@ a:active { } @media (max-width: 768px) { - .contact-container { - flex-direction: column; - } - .contact-form, .contact-details { - width: 100%; padding: 25px; } @@ -557,7 +566,8 @@ a:active { @media (max-width: 576px) { .contact-section { - padding: 40px 15px; + padding-top: 40px; + padding-bottom: 40px; } .page-intro { diff --git a/views/contactPages/contactMain.html b/views/contactPages/contactMain.html index 3b8322a..3fed1dc 100644 --- a/views/contactPages/contactMain.html +++ b/views/contactPages/contactMain.html @@ -31,162 +31,111 @@ - - - - - - - - + + -
+

LIÊN HỆ VỚI KỲ LONG

-
-
-

Gửi tin nhắn cho chúng tôi

+
+
+
+

Gửi tin nhắn cho chúng tôi

- -
-
+ +
+
+
+ +
+
+ + +
Vui lòng nhập họ và tên của bạn
+
+ +
+ + +
+ Vui lòng nhập một địa chỉ email hợp lệ +
+
+ +
+ + +
+ Vui lòng nhập số điện thoại của bạn +
+
+ +
+ + +
Vui lòng nhập nội dung tin nhắn
+
+ + +
+ +
- -
-
- - -
Vui lòng nhập họ và tên của bạn
-
- -
- - -
- Vui lòng nhập một địa chỉ email hợp lệ -
-
- -
- - -
- Vui lòng nhập số điện thoại của bạn -
-
- -
- - -
Vui lòng nhập nội dung tin nhắn
-
- - -
- - -
-
-

Thông tin liên hệ

-
-
- -

Lầu 12, số 27 Đinh Bộ Lĩnh, P. Bình Thạnh, TP.Hồ Chí Minh

+
+
+

Thông tin liên hệ

+
+
+ +

Lầu 12, số 27 Đinh Bộ Lĩnh, P. Bình Thạnh, TP.Hồ Chí Minh

+
+
+ +

+84 96 227 7912

+
+
+ +

info@kylongtech.com

+
-
- -

+84 96 227 7912

-
-
- -

info@kylongtech.com

-
-
-
- +
+ +
@@ -197,6 +146,7 @@ + diff --git a/views/homePages/homeMain.html b/views/homePages/homeMain.html index 7b478e0..2214dca 100644 --- a/views/homePages/homeMain.html +++ b/views/homePages/homeMain.html @@ -25,62 +25,8 @@ - - - - - - - - + + +
+
+ diff --git a/views/newsPages/newsArticle2/newsArticle2.css b/views/newsPages/newsArticle2/newsArticle2.css index 21e6e5a..c48dc48 100644 --- a/views/newsPages/newsArticle2/newsArticle2.css +++ b/views/newsPages/newsArticle2/newsArticle2.css @@ -35,8 +35,6 @@ a:active { /* MAIN CONTENT - ARTICLE STYLING */ article { - max-width: 800px; - margin: 40px auto; padding: 30px; background-color: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); @@ -93,7 +91,6 @@ article h3 + p { /* Article responsiveness */ article { padding: 15px; - margin: 20px auto; } article h1 { diff --git a/views/newsPages/newsArticle2/newsArticle2.html b/views/newsPages/newsArticle2/newsArticle2.html index 7204e48..8786385 100644 --- a/views/newsPages/newsArticle2/newsArticle2.html +++ b/views/newsPages/newsArticle2/newsArticle2.html @@ -25,276 +25,299 @@ -
-

Khí đốt tự nhiên được khai thác từ đâu? Cùng tìm hiểu

-

- 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. -

+ + -

Dầu mỏ là gì? Khí thiên nhiên là gì?

-

- Dầu mỏ 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. -

+
+
+
+
+

Khí đốt tự nhiên được khai thác từ đâu? Cùng tìm hiểu

+

+ 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. +

-

- Khí thiên nhiên 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. -

+

Dầu mỏ là gì? Khí thiên nhiên là gì?

+

+ Dầu mỏ 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. +

-

- 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. -

+

+ Khí thiên nhiên 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. +

- Dầu mỏ tự nhiên -

Dầu mỏ tự nhiên

+

+ 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. +

-

Khu vực khai thác khí thiên nhiên tại Việt Nam

-

- 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. -

+ Dầu mỏ tự nhiên +

Dầu mỏ tự nhiên

-

Khu Vực Bắc Bộ

-

- 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. -

+

Khu vực khai thác khí thiên nhiên tại Việt Nam

+

+ 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. +

-

Khu Vực Miền Trung

-
    -
  • - Dung Quất (Quảng Ngãi): 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. -
    • -
  • - Cá Voi Xanh (Chu Lai): 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. -
    • -
  • - Kèn Bầu (Quảng Trị): 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í. -
    • -
+

Khu Vực Bắc Bộ

+

+ 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. +

-

Khu Vực Nam Bộ

-

- Nam Côn Sơn: 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ể. -

-

- Cà Mau: 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. -

-

- 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. -

+

Khu Vực Miền Trung

+
    +
  • + Dung Quất (Quảng Ngãi): 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. +
    • +
  • + Cá Voi Xanh (Chu Lai): 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. +
    • +
  • + Kèn Bầu (Quảng Trị): 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í. +
    • +
-

Các mỏ khí thiên nhiên lớn tại Việt Nam

-

- 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. -

+

Khu Vực Nam Bộ

+

+ Nam Côn Sơn: 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ể. +

+

+ Cà Mau: 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. +

+

+ 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. +

-

- 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. -

+

Các mỏ khí thiên nhiên lớn tại Việt Nam

+

+ 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. +

-

- 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. -

+

+ 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. +

- Hoạt động khai thác khí tại Việt Nam -

Hoạt động khai thác khí tại Việt Nam

+

+ 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. +

-

Tình trạng khai thác dầu mỏ và khí thiên nhiên tại Việt Nam

+ Hoạt động khai thác khí tại Việt Nam +

Hoạt động khai thác khí tại Việt Nam

-

Quy trình khai thác dầu mỏ

-

- 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. -

+

Tình trạng khai thác dầu mỏ và khí thiên nhiên tại Việt Nam

-

Giai Đoạn 1: Tìm Kiếm và Định Vị Mỏ Dầu

-

- 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. -

-

- 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ỏ. -

+

Quy trình khai thác dầu mỏ

+

+ 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. +

-

Giai Đoạn 2: Khoan Thăm Dò và Xây Dựng Giếng

-

- 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. -

-

- 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. -

+

Giai Đoạn 1: Tìm Kiếm và Định Vị Mỏ Dầu

+

+ 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. +

+

+ 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ỏ. +

- Nhà máy khai thác dầu mỏ -

Nhà máy khai thác dầu mỏ

+

Giai Đoạn 2: Khoan Thăm Dò và Xây Dựng Giếng

+

+ 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. +

+

+ 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. +

-

Quy trình khai thác khí thiên nhiên

-

- 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. -

+ Nhà máy khai thác dầu mỏ +

Nhà máy khai thác dầu mỏ

-
    -
  • - Giai Đoạn 1: Định Vị và Khảo Sát: 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. -
    • -
  • - Giai Đoạn 2: Khoan Thăm Dò: 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. -
    • -
  • - Giai Đoạn 3: Thiết Kế và Xây Dựng Cơ Sở Hạ Tầng: 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. -
    • -
  • - Giai Đoạn 4: Khoan Sản Xuất: 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. -
    • -
  • - Giai Đoạn 5: Khai Thác và Sản Xuất: Đâ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í. -
    • -
  • - Giai Đoạn 6: Xử Lý và Phân Phối: 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. -
    • -
  • - Giai Đoạn 7: Giám Sát và Bảo Trì: 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. -
    • -
+

Quy trình khai thác khí thiên nhiên

+

+ 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. +

- Công trình khai thác khí thiên nhiên -

Công trình khai thác khí thiên nhiên

+
    +
  • + Giai Đoạn 1: Định Vị và Khảo Sát: 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. +
    • +
  • + Giai Đoạn 2: Khoan Thăm Dò: 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. +
    • +
  • + Giai Đoạn 3: Thiết Kế và Xây Dựng Cơ Sở Hạ Tầng: + 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. +
    • +
  • + Giai Đoạn 4: Khoan Sản Xuất: 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. +
    • +
  • + Giai Đoạn 5: Khai Thác và Sản Xuất: Đâ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í. +
    • +
  • + Giai Đoạn 6: Xử Lý và Phân Phối: 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. +
    • +
  • + Giai Đoạn 7: Giám Sát và Bảo Trì: 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. +
    • +
-

Lời kết

-

- 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. -

-
+ Công trình khai thác khí thiên nhiên +

Công trình khai thác khí thiên nhiên

+

Lời kết

+

+ 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. +

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

Tin Tức & Sự Kiện

-
+
@@ -261,15 +209,15 @@
-
+
@@ -279,6 +227,7 @@ + diff --git a/views/productPages/productMain/productMain.html b/views/productPages/productMain/productMain.html index 06b9aca..4dc9921 100644 --- a/views/productPages/productMain/productMain.html +++ b/views/productPages/productMain/productMain.html @@ -25,62 +25,8 @@ - - - - - - - - + +
@@ -379,6 +325,7 @@ + diff --git a/views/productPages/productSeparateCommerceLNG/productSeparateCommerceLNG.html b/views/productPages/productSeparateCommerceLNG/productSeparateCommerceLNG.html index cdb9f14..e0fe8b4 100644 --- a/views/productPages/productSeparateCommerceLNG/productSeparateCommerceLNG.html +++ b/views/productPages/productSeparateCommerceLNG/productSeparateCommerceLNG.html @@ -32,6 +32,9 @@ + + +
@@ -142,6 +145,7 @@ + diff --git a/views/productPages/productSeparateCommercePNG/productSeparateCommercePNG.html b/views/productPages/productSeparateCommercePNG/productSeparateCommercePNG.html index 48ca1be..343a955 100644 --- a/views/productPages/productSeparateCommercePNG/productSeparateCommercePNG.html +++ b/views/productPages/productSeparateCommercePNG/productSeparateCommercePNG.html @@ -31,6 +31,9 @@ + + +
@@ -140,6 +143,7 @@ + diff --git a/views/productPages/productSeparateProductionGasMeter/productSeparateProductionGasMeter.html b/views/productPages/productSeparateProductionGasMeter/productSeparateProductionGasMeter.html index 35c9aea..e23921f 100644 --- a/views/productPages/productSeparateProductionGasMeter/productSeparateProductionGasMeter.html +++ b/views/productPages/productSeparateProductionGasMeter/productSeparateProductionGasMeter.html @@ -31,6 +31,9 @@ + + +
@@ -137,6 +140,7 @@ + diff --git a/views/productPages/productSeparateProductionPRU/productSeparateProductionPRU.html b/views/productPages/productSeparateProductionPRU/productSeparateProductionPRU.html index 6d8947f..666a034 100644 --- a/views/productPages/productSeparateProductionPRU/productSeparateProductionPRU.html +++ b/views/productPages/productSeparateProductionPRU/productSeparateProductionPRU.html @@ -32,6 +32,9 @@ + + +
@@ -140,6 +143,7 @@ + diff --git a/views/productPages/productSeparateProductionPressureRegulatorValve/productSeparateProductionPressureRegulatorValve.html b/views/productPages/productSeparateProductionPressureRegulatorValve/productSeparateProductionPressureRegulatorValve.html index 7182f16..b471b2f 100644 --- a/views/productPages/productSeparateProductionPressureRegulatorValve/productSeparateProductionPressureRegulatorValve.html +++ b/views/productPages/productSeparateProductionPressureRegulatorValve/productSeparateProductionPressureRegulatorValve.html @@ -29,6 +29,9 @@ + + +
@@ -137,6 +140,7 @@ + diff --git a/views/productPages/productSeparateProductionVaporizer/productSeparateProductionVaporizer.html b/views/productPages/productSeparateProductionVaporizer/productSeparateProductionVaporizer.html index 5a3d9d7..3f3c1e6 100644 --- a/views/productPages/productSeparateProductionVaporizer/productSeparateProductionVaporizer.html +++ b/views/productPages/productSeparateProductionVaporizer/productSeparateProductionVaporizer.html @@ -29,6 +29,9 @@ + + +
@@ -137,6 +140,7 @@ + diff --git a/views/servicePages/serviceMain.html b/views/servicePages/serviceMain.html index 81d99b4..e3d5f88 100644 --- a/views/servicePages/serviceMain.html +++ b/views/servicePages/serviceMain.html @@ -26,62 +26,8 @@ - - - - - - - - + +
@@ -321,6 +267,7 @@ +