Fix: Resolve responsive layout issues on contact page

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 {

views/contactPages/contactMain.html

@@ -89,11 +89,12 @@
     </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">
+      <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 -->
@@ -158,10 +159,11 @@
             </form>
 
             <!-- Container for success/error messages -->
-          <div id="form-messages"></div>
+          </div>
         </div>
 
-        <div class="contact-details">
+        <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">
@@ -181,7 +183,7 @@
             <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%"
+                class="w-100"
                 height="300"
                 style="border: 0"
                 allowfullscreen=""
@@ -190,6 +192,7 @@
             </div>
           </div>
         </div>
+      </div>
     </section>
 
     <!-- Footer Component -->