From c75e660e20e840a35e8836b8567eae774cc2c7bd Mon Sep 17 00:00:00 2001
From: hiep200311 <hiepmp088@gmail.com>
Date: Thu, 4 Jun 2026 09:29:35 +0700
Subject: [PATCH] Fix: Resolve responsive layout issues on contact page

---
 views/contactPages/contactMain.css  |  48 +++++---
 views/contactPages/contactMain.html | 183 ++++++++++++++--------------
 2 files changed, 122 insertions(+), 109 deletions(-)

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..ec04b08 100644
--- a/views/contactPages/contactMain.html
+++ b/views/contactPages/contactMain.html
@@ -89,104 +89,107 @@
     </div>
 
     <!----- CONTACT PAGE CONTENT ----->
-    <section class="contact-section">
+    <section class="contact-section container py-5 my-3 overflow-hidden">
       <h1 class="page-intro">LIÊN HỆ VỚI KỲ LONG</h1>
 
-      <div class="contact-container">
-        <div class="contact-form">
-          <h2>Gửi tin nhắn cho chúng tôi</h2>
+      <div class="contact-container row g-4 g-lg-5">
+        <div class="col-12 col-md-6 mb-4 mb-md-0">
+          <div class="contact-form h-100">
+            <h2>Gửi tin nhắn cho chúng tôi</h2>
 
-          <!-- Optional: Progress bar to show form completion -->
-          <div class="form-progress">
-            <div class="form-progress-bar"></div>
+            <!-- Optional: Progress bar to show form completion -->
+            <div class="form-progress">
+              <div class="form-progress-bar"></div>
+            </div>
+
+            <form action="/contactSubmit" method="POST" id="contactForm">
+              <div class="form-group">
+                <label for="name" class="required">Họ và tên</label>
+                <input
+                  type="text"
+                  id="name"
+                  name="name"
+                  placeholder="Nhập họ và tên của bạn"
+                  required
+                />
+                <div class="error-message">Vui lòng nhập họ và tên của bạn</div>
+              </div>
+
+              <div class="form-group">
+                <label for="email" class="required">Email</label>
+                <input
+                  type="email"
+                  id="email"
+                  name="email"
+                  placeholder="Nhập địa chỉ email của bạn"
+                  required
+                />
+                <div class="error-message">
+                  Vui lòng nhập một địa chỉ email hợp lệ
+                </div>
+              </div>
+
+              <div class="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>
-
-          <form action="/contactSubmit" method="POST" id="contactForm">
-            <div class="form-group">
-              <label for="name" class="required">Họ và tên</label>
-              <input
-                type="text"
-                id="name"
-                name="name"
-                placeholder="Nhập họ và tên của bạn"
-                required
-              />
-              <div class="error-message">Vui lòng nhập họ và tên của bạn</div>
-            </div>
-
-            <div class="form-group">
-              <label for="email" class="required">Email</label>
-              <input
-                type="email"
-                id="email"
-                name="email"
-                placeholder="Nhập địa chỉ email của bạn"
-                required
-              />
-              <div class="error-message">
-                Vui lòng nhập một địa chỉ email hợp lệ
-              </div>
-            </div>
-
-            <div class="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 class="col-12 col-md-6">
+          <div class="contact-details h-100">
+            <h2>Thông tin liên hệ</h2>
+            <div class="contact-info">
+              <div class="contact-item">
+                <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="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 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"
+                class="w-100"
+                height="300"
+                style="border: 0"
+                allowfullscreen=""
+                loading="lazy"
+              ></iframe>
+            </div>
           </div>
         </div>
       </div>