/* โค้ด CSS ที่มีอยู่แล้ว */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

/* ================================================= */
/* ============== YOUR ORIGINAL STYLES ============= */
/* ================================================= */

ul {
  list-style-type: none; /* Removes the bullet points */
  /* margin: 0;         Removes default margin */
  padding: 0;          /* Removes default padding */
}

.tfoot {
  background: linear-gradient(to bottom, #DAB800 0%, #FFE661 39%);
  height: 150px;
}

.full-width-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0px;
  object-fit: cover;
  filter: blur(2px);
}

.left-yellow-line {
  width: 7%;
  border: none;
  height: 6px;
  background-color: #FFD90D;
  margin-left: 1px;
  border-radius: 10px;
  transition: width 0.3s ease;
}

/* ปรับปรุงโครงสร้างหลัก */
.content-container {
  position: relative;
  display: flex; /* ใช้ flexbox เพื่อจัดวางองค์ประกอบหลัก */
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 60vh; /* กำหนดความสูงให้เต็มหน้าจอ */
  overflow: hidden;
}

.background-image {
  position: absolute;
  width: 100%;
  object-fit: cover;
  z-index: 0; /* ให้อยู่ด้านหลังสุด */
  filter: blur(2px); /* เพิ่มความมัว 2px */
}

/* ปรับปรุง text-box-wrapper */
.text-box-wrapper {
  position: relative;
  z-index: 2; /* ให้อยู่ด้านหน้าของรูปภาพพื้นหลัง */
  width: 40%; /* ปรับความกว้างให้เหมาะสม */
}

.text-box {
  background-color: rgba(255, 255, 255, 0.7);
  padding: 50px;
  border-radius: 20px;
  box-shadow: 0 0 10px #FFD90D;
}

.text-box h2 {
  color: #BB9E00;
  font-weight: bold;
  font-size: 1.2em;
  line-height: 1.2;
  margin-bottom: 10px;
}

.text-box h3 {
  font-weight: normal;
  font-size: 1em;
  color: #272626;
  line-height: 1.6;
}

/* เส้นคั่นแนวตั้ง */
.vertical-yellow-line {
  width: 6px;
  height: 50%;
  background: linear-gradient(to bottom, #FFD90D 0%, #FFDE80 50%, #FFA200 100%);
  border-radius: 10px;
  position: relative;
  z-index: 2;
  margin: 0 20px;
  border: none
}

.content-yellow-line {
  /* Set a fixed height for the line */
  height: 350px;
  
  /* Center the line vertically within its container */
  align-self: center;

  /* Keep your existing styles which are already great */
  width: 6px;
  background: linear-gradient(to bottom, #FFA200 0%, #FFD90D 50%, #996100 100%);
  border-radius: 10px;
  margin: 0 20px;
  border: none;
  margin-bottom: 80px;
}

/* กล่องรูปภาพบ้าน */
.house-image-wrapper {
  position: relative;
  z-index: 2;
  width: 350px; /* ลดความสูงของกล่องที่ครอบรูปภาพ */
  height: auto;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 0 10px #FFD90D;
  margin-right: 5%; /* ดันไปทางซ้ายเล็กน้อย */
}

.house-image-wrapper img {
  width: 100%;
  height: 300px;      /* 1. กำหนดความสูงคงที่ (สำคัญมาก) */
  display: block;
  border-radius: 20px;
  object-fit: fill;   /* 2. สั่งให้รูปภาพ "ยืด" ให้เต็มกรอบที่กำหนด */
}

.floating-icon {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  background-color: #FFD90D;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.floating-icon img {
  width: 60%;
  height: 60%;
}

.contact-item {
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-family: 'Kanit', sans-serif;
  font-size: 15px;
  width: 180px;
  gap: 15px;
  margin-bottom: 15px;
  /* justify-content: center; */
}

.contact-item3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-family: 'Kanit', sans-serif;
  font-size: 15px;
  width: 100px;
}

.contact-item i {
  color: white;
  font-size: 28px;
  margin-bottom: 8px;
}

.contact-item3 i {
  color: white;
  font-size: 28px;
  margin-bottom: 8px;
}

.arrow-container h2{
  text-align: center;
  color: #998208;
}

.arrow-container h3{
  text-align: center;
  color: #645D5D;
  padding-top: 20px;
}


/* ================================================= */
/* ============== MOBILE RESPONSIVE STYLES ========= */
/* ================================================= */

@media (max-width: 768px) {

  /* เปลี่ยน layout หลักให้เรียงจากบนลงล่าง */
  .content-container {
    flex-direction: column;
    height: auto; /* ปรับความสูงเป็น auto เพื่อให้เนื้อหาขยายได้ */
    padding: 20px 0; /* เพิ่ม padding ด้านบนและล่าง */
  }

  /* ปรับขนาดกล่องข้อความให้เกือบเต็มความกว้าง */
  .text-box-wrapper {
    width: 90%;
    margin-bottom: 30px; /* เพิ่มระยะห่างด้านล่าง */
  }

  /* ลด padding ในกล่องข้อความ */
  .text-box {
    padding: 25px;
  }
  
  /* ซ่อนเส้นคั่นแนวตั้งที่ไม่จำเป็นแล้ว */
  .vertical-yellow-line,
  .content-yellow-line {
    display: none;
  }

  /* ปรับขนาดกล่องรูปภาพและระยะห่าง */
  .house-image-wrapper {
    width: 90%; /* ทำให้กล่องรูปภาพกว้างเกือบเต็มจอ */
    margin-right: 0; /* ลบ margin ด้านขวา */
  }
  
  /* ลดขนาดตัวอักษรเล็กน้อยเพื่อให้อ่านง่ายขึ้น */
  .text-box h2 {
    font-size: 1.1em;
  }

  .text-box h3 {
    font-size: 0.95em;
  }

}

/* -------------------------services-------------------- */
.services {
  height: 700px;
  background-color: #ffffff;
  margin-top: 100px;
}

.service-title h3 {
  font-size: 30px;
  background: linear-gradient(to right, #FFD90D, #998208);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  text-align: center;
  line-height: 1.5; /* หรือ 1.5 (ลองปรับค่าดู) */
}

.service-title p {
  font-size: 22px;
  color: #998208;
  text-align: center;
  padding-top: 20px;
}

.serviceme h1{
  padding-top: 80px;
  padding-left: 120px;
  margin: 0;
  color: #988C8C;
  font-size: 1.5rem;
}

.serviceicon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  padding: 40px 20px;
  font-family: 'Kanit', sans-serif;
}

.service-row {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  padding: 40px 20px;
}

.service-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 250px;
  font-family: 'Kanit', sans-serif;
}

.icon-circle {
  position: relative;
  width: 170px;
  height: 160px;
  background-color: white;
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(255, 217, 13, 0.6); /* เงาภายนอก */
  border: 1px solid rgba(255, 217, 13, 0.3); /* ขอบสีเหลืองจางๆ */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

.icon-circle img {
  position: absolute;
  top: 15px; /* ปรับตำแหน่งรูปไอคอน */
  width: 80px;
  height: 80px;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
  background-color: transparent;
  z-index: 1;
}

.icon-circle .number {
  position: absolute;
  bottom: 15px; /* ปรับตำแหน่งตัวเลข */
  font-size: 2rem; /* ขนาดตัวอักษรใหญ่ขึ้น */
  color: #8A791B;
  z-index: 1;
}

.item-text h4 {
  font-size: 1.2em;
  color: #998208;
  margin: 0 0 5px;
}

.item-text p {
  font-size: 1em;
  color: #875E5E;
  margin: 0;
  line-height: 1.4;
}

.service-item img {
  padding: 5px;
  background-color: white;
  box-sizing: border-box;

}

.service-item p {
  margin-top: 10px;
  font-size: 14px;
  color: #645D5D;
  line-height: 1.4;
}

.about_h2 h2{
  font-size: 30px;
  background: linear-gradient(to right, #FFD90D, #998208);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  text-align: left;
  padding-left: 10rem;
  padding-bottom: 10px;
}

h1.arrow-right {
  font-weight: normal;
  display: inline-block;
  padding-right: 5rem;
  font-size: 3rem; /* ปรับขนาดให้ใหญ่ขึ้น */
  transform: rotate(180deg); /* หมุนลูกศรไปทางขวา */
  background: linear-gradient(to right, #6C6C6C 0%, #FFD90D 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

h1.arrow-two {
  font-weight: normal;
  display: inline-block;
  padding-left: 17rem;
  font-size: 4rem; /* ปรับขนาดให้ใหญ่ขึ้น */
  background: linear-gradient(to bottom, #6C6C6C 0%, #FFD90D 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.card-yellow-line {
  width: 20%;
  border: none;
  height: 9px;
  background-color: #FFD90D;
  margin-bottom: 10px;
  margin-right: 210px;
  border-radius: 10px;
  transition: width 0.3s ease;
}

.card-yellow-lone {
  width: 20%;
  border: none;
  height: 9px;
  background-color: #FFD90D;
  margin-bottom: 10px;
  margin-right: 230px;
  border-radius: 10px;
  transition: width 0.3s ease;
}


/* ================================================= */
/* ============== MOBILE RESPONSIVE STYLES (IMPROVED AESTHETICS) ========= */
/* ================================================= */

@media (max-width: 768px) {

  /* ปรับ Section หลัก */
  .services {
    height: auto; 
    margin-top: 50px;
    padding: 40px 0; /* เพิ่ม padding ด้านบน-ล่าง ให้มีพื้นที่หายใจ */
  }

  /* ปรับหัวข้อ */
  .service-title h3 {
    font-size: 26px; 
    padding: 0 15px; /* เพิ่ม padding ซ้าย-ขวา ป้องกันข้อความชิดขอบจอ */
  }

  .service-title p {
    font-size: 18px;
    padding: 0 20px;
  }
  
  .serviceme h1 {
    padding: 40px 20px 0;
    font-size: 1.2rem;
  }

  /* ⭐️ จุดที่ปรับปรุงหลัก: การจัดวางไอคอน ⭐️ */
  .service-row {
    display: flex;
    flex-wrap: wrap; /* ยังคงให้ขึ้นบรรทัดใหม่ได้ */
    justify-content: center;
    gap: 20px; /* ระยะห่างระหว่างการ์ด */
    padding: 30px 15px; /* padding รอบๆ กรอบไอคอนทั้งหมด */
  }
  
  /* ⭐️ ทำให้ service-item เป็น "การ์ด" ที่สวยงาม ⭐️ */
  .service-item {
    width: calc(50% - 10px); /* คำนวณความกว้างเพื่อให้มี 2 คอลัมน์พอดี (10px คือครึ่งหนึ่งของ gap) */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-family: 'Kanit', sans-serif;
    
    /* --- ดีไซน์ใหม่แบบการ์ด --- */
    background-color: #ffffff;
    padding: 25px 10px;
    border-radius: 16px; /* ทำให้มุมมนสวยงาม */
    box-shadow: 0 6px 20px rgba(153, 130, 8, 0.1); /* เพิ่มเงาให้นูนขึ้นมาเล็กน้อย */
    box-sizing: border-box; /* สำคัญมากเมื่อใช้ calc() กับ padding */
    transition: transform 0.2s ease-in-out; /* เพิ่ม animation ตอน hover */
  }

  .service-item:hover {
      transform: translateY(-5px); /* ทำให้การ์ดลอยขึ้นเล็กน้อยเมื่อสัมผัส */
  }

  /* ปรับขนาดวงกลมไอคอนให้สมดุลกับการ์ดใหม่ */
  .icon-circle {
    width: 120px;
    height: 110px;
    margin-bottom: 15px;
  }

  .icon-circle img {
    width: 55px;
    height: 55px;
  }

  .icon-circle .number {
    font-size: 1.6rem;
    bottom: 10px;
  }
  
  .item-text h4 {
      font-size: 1.1em;
  }
  
  .item-text p {
      font-size: 0.9em;
  }

  /* ปรับการจัดวางและ padding ของหัวข้อ About */
  .about_h2 h2 {
    font-size: 24px;
    padding: 0 20px 10px; /* ปรับ padding ให้เหมาะสม */
    text-align: center; 
  }

  /* ซ่อนลูกศร */
  h1.arrow-right,
  h1.arrow-two {
    display: none; 
  }
  
  /* ปรับเส้นสีเหลืองใต้ Card */
  .card-yellow-line,
  .card-yellow-lone {
    width: 50%; 
    margin: 0 auto 10px auto; /* จัดกลางและกำหนด margin ใหม่ */
  }
}

/* ---------------------------top-houses------------------------- */
.top-houses {
  padding: 30px 20px;
  background-color: #F5F2EA;
}

/* Added h2 styling for context */
.top-houses h2 {
    position: relative;
    font-size: 2rem;
    margin-bottom: 25px;
    padding-bottom: 10px;
    color: #333;
}

.top-houses h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 50%;
  height: 4px;
  background: #ffd700;
  border-radius: 5px;
}

.house-cards {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: auto; /* Changed to auto for better snapping if you add it later */
  padding-bottom: 10px;
  cursor: grab;
  height: auto;
  align-items: flex-start;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.house-cards:active {
  cursor: grabbing;
}

.house-cards::-webkit-scrollbar {
  display: none; /* Hide scrollbar for Chrome, Safari and Opera */
}

.card {
  background: white;
  border: 3px solid transparent;
  border-radius: 20px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  transition: 0.3s ease;
  min-width: 230px;
  max-width: 250px;
  height: auto;
  flex: 0 0 auto;
  overflow: hidden;
  padding: 0;
}

.card-image .info {
  position: relative;
  z-index: 2;
}

.card:hover {
  border-color: #ffd700;
  box-shadow: 0 0 10px #ffd700;
}

.card-image {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
}

/* overlay สีเหลืองจาง ๆ */
.card-image::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.737),
    rgba(255, 217, 0, 0.805)
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.card-image:hover::after {
  opacity: 1;
}

/* คำอธิบายที่แสดงเมื่อ hover */
.hover-description {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 12px;
  color: #000000;
  font-size: 0.7rem;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 2;
}

.card-image:hover .hover-description {
  opacity: 1;
}

.card-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 20px;
}

/* ✅ กล่อง info ล่าง */
.card-image .info {
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ✅ Rating */
.card-image .rating {
  padding: 4px 8px;
  border-radius: 10px;
  font-size: 0.85rem;
  color: #FFD90D;
}

.card-image:hover .rating {
  color: #ffffff;
}

.card-image .inra{
  font-size: 0.85rem;
  color: #000;
}

/* ✅ ปุ่มอ่านเพิ่มเติม */
.card-image .btn {
  background: #ffffff;
  color: #333;
  padding: 5px 10px;
  border-radius: 20px;
  font-weight: bold;
  font-size: 0.8rem;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}

@keyframes flash-twice {
  0%   { opacity: 1; }
  25%  { opacity: 0; }
  50%  { opacity: 1; }
  75%  { opacity: 0; }
  100% { opacity: 1; }
}

.btn:hover i {
  animation: flash-twice 0.8s ease-in-out 1;
}


/* ================================================= */
/* ============== MOBILE RESPONSIVE STYLES ========= */
/* ================================================= */

@media (max-width: 768px) {
  
  /* ลด padding ด้านข้างเพื่อให้มีพื้นที่แสดงการ์ดมากขึ้น */
  .top-houses {
    padding: 30px 15px;
  }

  /* ปรับขนาดหัวข้อให้พอดีกับจอเล็ก */
  .top-houses h2 {
    font-size: 1.8rem;
  }
  
  .top-houses h2::after {
      width: 40%; /* ลดความยาวเส้นใต้หัวข้อ */
  }

  /* ลดช่องว่างระหว่างการ์ด */
  .house-cards {
    gap: 15px;
  }
  
  /* ปรับขนาดการ์ดให้เล็กลงเล็กน้อย */
  .card {
    min-width: 210px;
    max-width: 210px;
  }

  /* หมายเหตุ: เอฟเฟกต์ hover จะไม่ทำงานบนอุปกรณ์ touch screen ส่วนใหญ่
     แต่เนื่องจากข้อมูลสำคัญ (rating, ปุ่ม) แสดงอยู่ตลอดเวลา
     จึงไม่มีปัญหาต่อการใช้งานครับ */
}

/*--------------------- custom-frame ------------------*/
.home-frame {
  display: flex; /* Use flexbox to align items horizontally */
  justify-content: center;
  align-items: center;
  gap: 20px; /* Add some space between the two images */
  margin-bottom: 80px;
}

.image-container-left {
  flex: 1; /* Allow this container to grow and take up available space */
  max-width: 500px; /* Set a max-width to control its size */
  position: relative; /* Make this a positioning context for floating boxes */
}

.image-container-right {
  flex: 1; /* Allow this container to grow */
  max-width: 500px; /* Set max-width based on your custom frame size */
}

.image-full {
    width: 400px;
    height: 300px;
    object-fit: cover;
    border-radius: 30px;
    box-shadow: 0 4px 10px rgba(220, 204, 113, 0.7); /* เพิ่มเงาสี DCCC71 */
}

.custom-frame {
  width: 100%; 
  height: 100%;
  position: relative;
  border-radius: 30px;
}

.notch-top-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 120px;
  height: 80px;
  background: rgb(255, 255, 255);
  border-bottom-right-radius: 30px;
}

.notch-bottom-right {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 250px;
  height: 80px;
  background: rgb(255, 255, 255);
  border-top-left-radius: 30px;
}

.image-inside {
  width: 500px;
  height: 100%;
  object-fit: cover;
  border-radius: 30px;
}

.oru{
  background-color: #F5F2EA;
}

.construction-card img {
  margin-bottom: 30px;
}

.construction-card {
  display: flex;
  flex-direction: column; 
  align-items: center; 
  border-radius: 8px;
  padding: 20px;
}

.construction-card h3 {
  color: #998208;
  margin: 0 0 10px;
  font-size: 18px;
  text-align: center;
}

.Our_Service img {
  margin-bottom: 30px;
}

.Our_Service {
  display: flex;
  flex-direction: column;
  align-items: center; 
  border-radius: 8px;
  padding: 20px;
}

.Our_Service h3 {
  background: linear-gradient(to right, #8D8B84, #998208);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0 0 10px;
  font-size: 18px;
  text-align: center;
}

.floating-box {
  position: absolute;
  top: calc(50% - 310px);
  left: calc(50% - 520px);
  width: 450px;
  height: 410px;
  background-color: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  z-index: 3;
  font-weight: bold;
  font-size: 1.5rem;
  box-shadow: 
    0 -12px 10px -8px rgba(255, 217, 13, 0.6),   
    0 12px 10px -8px rgba(255, 217, 13, 0.6);   
}

.service-summary {
  text-align: center;
  color: #875E5E;   
  font-size: 14px;   
  margin-top: -15px;
}

.service-summary i.bi-check {
  color: #ffffff;
  margin-right: 8px;
  font-size: 50px;
  text-shadow: 
    -1px -1px 0 #FFD700,   
     1px -1px 0 #FFD700,
    -1px  1px 0 #FFD700,
     1px  1px 0 #FFD700;
}

.container::before {
  content: "";
  background: url('https://via.placeholder.com/600x400') no-repeat center;
  background-size: cover;
  opacity: 0.1;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}

.content {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #5c4a47;
}

.content h2 {
  font-size: 24px;
  margin-bottom: 20px;
  background: linear-gradient(to right, #998208, #FFA200);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.content p {
  font-size: 16px;
  line-height: 1.8;
  margin: 0 0 20px;
  color: #875E5E;
}

.buttons {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 20px;
}

.buttons a {
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 30px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: 0.3s ease;
  text-decoration: none;
  font-weight: bold;
}

.buttons .detail-btn {
  background-color: white;
  color: #998208;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.buttons .chat-btn {
  background-color: white;
  color: #FFA200;
  border: 2px solid transparent;
  border-radius: 30px;
  background-image: 
    linear-gradient(white, white),
    linear-gradient(to bottom, #FFD90D, #FFA200);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

.buttons a:hover {
  opacity: 0.8;
}

.floating-box2 {
  position: absolute;
  top: calc(50% - 320px);
  right: calc(50% - 400px);
  width: 170px;
  height: 70px;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  border-radius: 20px;
  z-index: 3;
  font-weight: bold;
  font-size: 1.5rem;
}

.content2 {
  display: flex;
  align-items: center;
  gap: 1rem; 
}

.fa-calendar-days {
  font-size: 3rem; 
  color: #fcbc4d;
}

.content2 h2 {
  font-size: 1.5rem; 
  font-weight: bold;
  color: #998208;
  margin: 0;
  line-height: 1;
  text-align: center;
}

.content2 p {
  font-size: 0.7rem; 
  color: #998208; 
  margin: 0;
  line-height: 1;
}

.floating-box3 {
  position: absolute;
  bottom: calc(50% - 180px);
  right: calc(50% - 550px);
  width: 210px;
  height: 70px;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  border-radius: 16px;
  z-index: 3;
  font-weight: bold;
  font-size: 1.5rem;
}

.content3 {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.fa-thumbs-up {
  font-size: 3rem; 
  color: #b8860b; 
}

.content3 h2 {
  font-size: 1.5rem; 
  font-weight: bold;
  color: #b8860b;
  margin: 0;
  line-height: 1;
  text-align: center;
}

.content3 p {
  font-size: 0.7rem;
  color: #b8860b;
  margin: 0;
  line-height: 1;
}


/* ================================================= */
/* ============== MOBILE RESPONSIVE STYLES ========= */
/* ================================================= */

@media (max-width: 768px) {

  /* --- Section: home-frame --- */
  .home-frame {
    /* ⭐️ นำ flex-direction: column ออก เพื่อให้เรียงแนวนอนเหมือนเดิม */
    gap: 15px; /* ลดช่องว่างลงเล็กน้อย */
    margin-bottom: 40px;
    padding: 0 15px; 
    align-items: stretch; /* ทำให้ความสูงของสองฝั่งเท่ากัน */
  }

  /* ⭐️ ยกเลิกการบังคับให้เต็ม 100% */
  .image-container-left,
  .image-container-right {
    /* ปล่อยให้ flexbox จัดการความกว้างอัตโนมัติ (50% / 50%) */
    max-width: 50%; /* จำกัดความกว้างไว้ที่ 50% */
  }

  /* ปรับขนาดรูปภาพให้เต็มคอนเทนเนอร์ของมัน */
  .image-full,
  .image-inside {
    width: 100%;
    height: 100%; /* ทำให้รูปภาพสูงเต็มกรอบ */
    object-fit: cover; /* ทำให้รูปเต็มพื้นที่โดยไม่เสียสัดส่วน */
  }
  
  .custom-frame{
      height: 100%; /* ทำให้กรอบสูงเต็มคอนเทนเนอร์ */
  }

  /* ซ่อนรอยบากบนจอเล็กเพื่อความเรียบง่าย */
  .notch-top-left,
  .notch-bottom-right {
      display: none;
  }
  
  /* ⭐️⭐️ กล่องลอย (Floating Boxes) ⭐️⭐️ */
  /* ยังคงจัดวางแบบปกติเหมือนเดิม ซึ่งเป็นมิตรกับมือถือ */
  .floating-box, .floating-box2, .floating-box3 {
    position: relative; 
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none; 
    
    width: 90%; 
    height: auto; 
    margin: 20px auto; 
    padding: 20px;
    box-sizing: border-box;
  }

  /* --- Section: content --- */
  .content h2 {
    font-size: 22px;
  }

  .content p {
    font-size: 15px;
  }

  /* จัดปุ่มให้อยู่ในแนวตั้ง */
  .buttons {
    flex-direction: column;
    align-items: center; 
    gap: 10px;
  }

  .buttons a {
    width: 80%; 
    text-align: center;
  }

  /* ปรับขนาด Font Awesome icons */
  .fa-calendar-days,
  .fa-thumbs-up {
    font-size: 2.5rem;
  }
  
  /* ปรับขนาดตัวอักษรใน content2, content3 */
  .content2 h2, .content3 h2 {
    font-size: 1.3rem;
  }
  .content2 p, .content3 p {
    font-size: 0.7rem;
  }
}

/* -------------Our Technology------------------ */
.orutitel{
  text-align: center;
  margin-bottom: 10px;
}

.orutitel h3{
  padding-left: 50px;
  text-align: left;
  padding-top: 60px;
  font-size: 30px;
  background: linear-gradient(to right, #FFD700 0%, #998208 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.orutitel h3 strong {
  font-weight: bold;
  font-size: 30px;
  background: linear-gradient(to right, #FFD700, #998208);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.orutitel p{
  font-size: 22px;
  color: #875E5E;
}

.construction-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1250px;
  margin: 40px auto;
}

.construction_2-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 1250px;
  margin: 40px auto;
  margin-bottom: 100px;
}

.construction-icon {
  font-size: 80px;
  color: #f6b400;
  margin-bottom: 10px;
  text-align: center;
}

.construction-list { 
  list-style: none;
  text-align: center;
}

.Our_Service-list { 
  list-style: none;
  text-align: center;
  margin-bottom: 30px;
}

.construction-lone { 
  list-style: none;
  text-align: left;
  margin-right: 80px;
}

.construction-long { 
  list-style: none;
  text-align: left;
  margin-right: 90px;
}

.construction-lone li,
.construction-long li,
.construction-list li,
.Our_Service-list li {
  margin-bottom: 8px;
  position: relative;
  color: #645D5D;
}

.construction-list li i,
.Our_Service-list li i {
  position: absolute;
  left: 0;
  top: 2px;
  color: #f6b400;
  font-size: 16px;
}


/* ================================================= */
/* ============== MOBILE RESPONSIVE STYLES ========= */
/* ================================================= */

@media (max-width: 768px) {

  /* --- ปรับหัวข้อ --- */
  .orutitel h3 {
    font-size: 24px; /* ลดขนาดตัวอักษร */
    text-align: center; /* จัดกลาง */
    padding-left: 15px; /* ลด padding ลง */
    padding-right: 15px;
    padding-top: 40px;
  }

  .orutitel p {
    font-size: 18px; /* ลดขนาดตัวอักษร */
    padding: 0 20px; /* เพิ่ม padding กันข้อความชิดขอบ */
  }

  /* --- ปรับ Grid Containers --- */
  .construction-container,
  .construction_2-container {
      grid-template-columns: 1fr; /* ⭐️ ทำให้เหลือ 1 คอลัมน์ */
      gap: 30px; /* เพิ่มระยะห่างระหว่างแถว */
      margin-left: 15px;
      margin-right: 15px;
  }

  .construction_2-container {
      margin-bottom: 50px;
  }
  
  /* --- ปรับการจัดวาง List --- */
  .construction-lone,
  .construction-long {
    margin-right: 0; /* ⭐️ ลบ margin ที่ดันข้อความออกไป */
    padding-left: 20px; /* เพิ่ม padding เพื่อให้ดูสวยงาม */
    text-align: left;
  }

  /* ปรับการแสดงผล list ที่มีไอคอน */
  .construction-list,
  .Our_Service-list {
      display: inline-block; /* ทำให้ list กว้างตามเนื้อหา */
      text-align: left; /* จัดข้อความชิดซ้าย */
      padding: 0;
  }
  
  .construction-list li,
  .Our_Service-list li {
      padding-left: 25px; /* เพิ่ม padding เพื่อเว้นที่ให้ไอคอน */
  }

  .construction-list li i,
  .Our_Service-list li i {
      left: 0; /* จัดไอคอนให้อยู่ที่ขอบซ้ายของ padding */
  }
}



/* ---------------Why Choose Us------------------- */
.whychoose-container {
    text-align: center;
    margin-top: 50px; /* เพิ่มระยะห่างด้านบน */
    margin-bottom: 50px; /* เพิ่มระยะห่างด้านล่าง */
}

.whychoose-header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px; /* ระยะห่างระหว่างหัวข้อและไอคอน */
    margin-bottom: 10px;
}

.whychoose-title {
    font-size: 30px;
    font-weight: bold;
    background: linear-gradient(to right, #B0970E, #996100);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.whychoose-icon {
    width: 70px; /* ขนาดของไอคอน */
    height: auto;
}

.whychoose-subtitle {
    font-size: 20px;
    color: #555; /* สีข้อความที่เข้มขึ้นเล็กน้อย */
}

.whychoose{
  font-size: 20px;
  background: linear-gradient(to right, #B0970E, #996100);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  /* margin-left: 150px; */
  text-align: center;
}

.whychoose-container {
  max-width: 1000px;
  margin: 50px auto;
  padding: 0 20px;
  text-align: center;
}

.whychoose-container h2 {
  color: #f6b400;
  font-size: 22px;
  margin-bottom: 5px;
}

.whychoose-container h3 {
  font-size: 26px;
  margin: 0 0 100px;
  color: #998208;
}

.whychoose_2-header {
    justify-content: center;
    align-items: center;
    gap: 15px; /* ระยะห่างระหว่างหัวข้อและไอคอน */
    margin-bottom: 10px;
}

.whychoose_2-header h1 {
  font-size: 40px;
  font-weight: bold;
  background: linear-gradient(to right,#FFD700 30%, #998208 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 20px;
}

.whychoose_2-header p {
  color: #998208; /* สีน้ำตาลทองเข้ม */
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 100px;
}

.whychoose-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;  /* ต้องมีเพื่อให้ pseudo-element ใช้ absolute ได้ */
  gap: 0;
}

/* เส้นคั่นตรงกลาง */
.whychoose-grid::before {
  content: "";
  position: absolute;
  top: 60px;
  height: 350px;
  left: 50%;
  width: 8px;
  border-radius: 15px;
  background-color: #FFD90D;
  transform: translateX(-50%);
  z-index: 1;
}

/* เส้นนอนชุดแรก - ซ้าย */
.whychoose-grid::after {
  content: "";
  position: absolute;
  top: 200px;
  left: 230px;
  width: 25%;
  height: 8px;
  border-radius: 15px;
  background-color: #FFD90D;
  z-index: 1;
}

/* เส้นนอนชุดแรก - ขวา */
.whychoose-grid > :first-child::before {
  content: "";
  position: absolute;
  top: 200px;
  right: 230px;
  width: 25%;
  height: 8px;
  border-radius: 15px;
  background-color: #FFD90D;
  z-index: 1;
}

/* เส้นนอนชุดที่สอง - ซ้าย */
.whychoose-grid > :nth-child(2)::after {
  content: "";
  position: absolute;
  top: 400px;
  left: 230px;
  width: 25%;
  height: 8px;
  border-radius: 15px;
  background-color: #FFD90D;
  z-index: 1;
}

/* เส้นนอนชุดที่สอง - ขวา */
.whychoose-grid > :nth-child(2)::before {
  content: "";
  position: absolute;
  top: 400px;
  right: 230px;
  width: 25%;
  height: 8px;
  border-radius: 15px;
  background-color: #FFD90D;
  z-index: 1;
}

.whychoose-item {
  padding: 30px 70px;
  text-align: center;
}

.whychoose-icon {
  font-size: 40px;
  color: #f6b400;
  margin-bottom: 10px;
}

.whychoose-item h4 {
  color: #f6b400;
  margin-bottom: 8px;
  font-size: 18px;
}

.whychoose-item p {
  color: #777;
  font-size: 15px;
  margin: 0;
}

/* สมมติ .whychoose-item ตัวสุดท้ายคืออันที่ 5 */
.whychoose-item:last-child {
  grid-column: 1 / -1; /* ให้ครอบคอลัมน์ตั้งแต่ 1 ถึงสุดท้าย (เต็มแถว) */
  justify-self: center; /* จัดกึ่งกลางในกริด */
  max-width: 600px; /* กำหนดความกว้างตามต้องการ จะไม่เต็ม 100% */
}

/* Base Styles */
.circle {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #F5F2EA;
    padding: 50px 20px;
}

.circle-container {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 40px;
    max-width: 1200px;
    width: 100%;
}

.circle-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 250px;
}

.circle-card p {
    margin-top: 15px;
    font-size: 1.2rem;
    background: linear-gradient(to right, #FFA200, #998208);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 500;
}

/* Progress Circle Styles */
.progress-circle {
    position: relative;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #FFD700; /* Outer circle color */
}

.progress-circle::before {
    content: '';
    position: absolute;
    width: 60%;
    height: 60%;
    background-color: #F5F2EA; /* Inner circle color */
    border-radius: 50%;
}

.progress-circle span {
    position: relative;
    font-size: 2rem;
    font-weight: bold;
    color: #B0970E;
    z-index: 1;
}

.circle-card span {
  color: #8A791B;
  font-size: 2rem;
}

/* Progress Bar Logic */
.progress-circle {
    background: conic-gradient(#FFD700 0%, #FFD700 360deg);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

/* 90% */
.p90 {
  position: relative; /* จำเป็นเพื่อให้ ::before ทำงานถูกต้อง */
  border-radius: 50%;
  /* สร้างพื้นหลังไล่ระดับสีตามองศา (90% = 324deg) */
  background: conic-gradient(#FFD700 280deg, #F5F2EA 0deg);
  border: 3px solid #FFD700; /* ใส่ขอบสีทอง */
  transform: rotate(80deg); /* หมุน */
}

/* สร้างรูตรงกลางเพื่อทำให้กลายเป็นวงแหวน */
.p90::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #F5F2EA; /* ต้องเป็นสีเดียวกับพื้นหลังของหน้าเว็บ */
  border-radius: 50%;
  border: 3px solid #FFD700; /* ใส่ขอบสีทอง */
}

/* 100% */
.p100 {
    background: conic-gradient(#FFD700 360deg, #ffffff 0deg);
}

/* 95% */
.p95 {
  position: relative; /* จำเป็นเพื่อให้ ::before ทำงานถูกต้อง */
  border-radius: 50%;
  /* สร้างพื้นหลังไล่ระดับสีตามองศา (90% = 324deg) */
  background: conic-gradient(#FFD700 320deg, #F5F2EA 0deg);
  border: 3px solid #FFD700; /* ใส่ขอบสีทอง */
  transform: rotate(50deg); /* หมุน */
}

/* สร้างรูตรงกลางเพื่อทำให้กลายเป็นวงแหวน */
.p95::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #F5F2EA; /* ต้องเป็นสีเดียวกับพื้นหลังของหน้าเว็บ */
  border-radius: 50%;
  border: 3px solid #FFD700; /* ใส่ขอบสีทอง */
}

.whychoose-section {
    background-color: #ffffff;
    padding: 50px 20px;
    text-align: center;
}


.whychoose-header h1 {
    font-size: 30px;
    font-weight: bold;
    color: #FFD90D;
    margin-bottom: 10px;
}

.whychoose-header p {
    font-size: 20px;
    color: #8A791B;
}

.whychoose-grid-container {
    position: relative;
    display: grid;
    grid-template-areas:
        "top-left top-right"
        "bottom-left bottom-right";
    gap: 20px;
    max-width: 900px;
    margin: 0 auto;
}

.whychoose-item-wrapper {
    position: relative;
    padding: 20px;
}

.whychoose-item-wrapper.top-left {
    grid-area: top-left;
    text-align: center;
    margin-right: 300px;
}

.whychoose-item-wrapper.top-right {
    grid-area: top-right;
    text-align: center;
}

.whychoose-item-wrapper.bottom-left {
    grid-area: bottom-left;
    text-align: center;
    margin-right: 250px;
}

.whychoose-item-wrapper.bottom-right {
    grid-area: bottom-right;
    text-align: center;
}
/* ฟอนต์บนซ้าย */
.whychoose-text-top-left h4 ,
.whychoose-text-top-right h4 ,
.whychoose-text-bottom-left h4 ,
.whychoose-text-bottom-right h4 {
    font-size: 1.2rem;
    font-weight: bold;
    background: linear-gradient(to right, #FFD700, #998208);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 5px;
}

.whychoose-text-top-left p,
.whychoose-text-top-right p,
.whychoose-text-bottom-left p,
.whychoose-text-bottom-right p {
    font-size: 1rem;
    color: #875E5E;
    line-height: 1.5;
}

.whychoose-center-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 250px;
    height: 250px;
    background-color: white;
    border-radius: 20px;
    border: 2px solid #FFD90D;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.whychoose-center-icon::before,
.whychoose-center-icon::after {
    content: "";
    position: absolute;
    background-color: #FFD90D;
}

.whychoose-center-icon::before {
    width: 100%;
    height: 2px;
    top: 50%;
    transform: translateY(-50%);
}

.whychoose-center-icon::after {
    width: 2px;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
}

.icon-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    width: 100%;
    height: 100%;
    gap: 10px;
    padding: 10px;
}

.icon-group img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.whychoose-icon-grid {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px; /* ระยะห่างระหว่างกล่อง */
    width: 250px;  /* ปรับขนาดตามความเหมาะสม */
    height: 250px; /* ปรับขนาดตามความเหมาะสม */
    z-index: 2;
    margin-left: 20px;
}

/* ตัวกล่องหลัก (พื้นที่สีขาวด้านใน) */
.whychoose-icon-box-top-left {
    position: relative; /* สำคัญมากสำหรับ ::before */
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
    z-index: 1; /* ทำให้ element นี้อยู่ข้างหน้า ::before */

    /* ใช้ clip-path เดิมเพื่อตัดรูปทรง */
    clip-path: polygon(20% 0%, 100% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 100%, 0% 20%);
}

.whychoose-icon-box-top-left img ,
.whychoose-icon-box-top-right img,
.whychoose-icon-box-bottom-left img,
.whychoose-icon-box-bottom-right img {
    position: relative; /* ทำให้ z-index ใช้งานได้ */
    z-index: 2;       /* กำหนดให้รูปอยู่ชั้นบนสุด */
    height: auto;
    width: 70%; /* ปรับขนาดรูปให้เหมาะสม */
}

/* ::before (ทำหน้าที่เป็นขอบสีเหลือง) */
.whychoose-icon-box-top-left::before {
    content: '';
    position: absolute;
    top: -10px; 
    left: -10px; 
    right: -10px; 
    bottom: -10px;

    /* ใช้ background เป็นสีของขอบ (ลบ border ที่ไม่จำเป็นออก) */
    background-image: radial-gradient(circle, #FFFFFF, #FFCF7B);
    
    z-index: 0;
    clip-path: polygon(20% 0%, 100% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 100%, 0% 20%);
}

/* ตัวกล่องหลัก (พื้นที่สีขาวด้านใน) */
.whychoose-icon-box-top-right {
    position: relative;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
    z-index: 1;

    /* --- แก้ไข --- ค่า polygon ที่กลับด้านแล้ว */
    clip-path: polygon(0% 0%, 80% 0%, 100% 20%, 100% 100%, 20% 100%, 0% 80%);
}

/* ::before (ทำหน้าที่เป็นขอบสีเหลือง) */
.whychoose-icon-box-top-right::before {
    content: '';
    position: absolute;
    top: -10px; 
    left: -10px; 
    right: -10px; 
    bottom: -10px;
    background-image: radial-gradient(circle, #FFFFFF, #FFD90D);
    z-index: 0;

    /* --- แก้ไข --- ใช้ค่า polygon ที่กลับด้านแล้วเหมือนกัน */
    clip-path: polygon(0% 0%, 80% 0%, 100% 20%, 100% 100%, 20% 100%, 0% 80%);
}

/* ตัวกล่องหลัก (พื้นที่สีขาวด้านใน) */
.whychoose-icon-box-bottom-left {
    position: relative;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
    z-index: 1;

    /* --- แก้ไข --- ค่า polygon ที่พลิกในแนวตั้งแล้ว */
    clip-path: polygon(20% 100%, 100% 100%, 100% 80%, 100% 20%, 80% 0%, 20% 0%, 0% 0%, 0% 80%);
}

/* ::before (ทำหน้าที่เป็นขอบสีเหลือง) */
.whychoose-icon-box-bottom-left::before {
    content: '';
    position: absolute;
    top: -10px; 
    left: -10px; 
    right: -10px; 
    bottom: -10px;
    background-image: radial-gradient(circle, #FFFFFF, #FFD90D);
    z-index: 0;

    /* --- แก้ไข --- ใช้ค่า polygon ที่พลิกแล้วเหมือนกัน */
    clip-path: polygon(20% 100%, 100% 100%, 100% 80%, 100% 20%, 80% 0%, 20% 0%, 0% 0%, 0% 80%);
}

/* ตัวกล่องหลัก (พื้นที่สีขาวด้านใน) */
.whychoose-icon-box-bottom-right {
    position: relative; /* สำคัญมากสำหรับ ::before */
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
    z-index: 1; /* ทำให้ element นี้อยู่ข้างหน้า ::before */

    /* ใช้ clip-path เดิมเพื่อตัดรูปทรง */
    clip-path: polygon(20% 0%, 100% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 100%, 0% 20%);
}


/* ::before (ทำหน้าที่เป็นขอบสีเหลือง) */
.whychoose-icon-box-bottom-right::before {
    content: '';
    position: absolute;
    top: -10px; 
    left: -10px; 
    right: -10px; 
    bottom: -10px;

    /* ใช้ background เป็นสีของขอบ (ลบ border ที่ไม่จำเป็นออก) */
    background-image: radial-gradient(circle, #FFFFFF, #FFCF7B);
    
    z-index: 0;
    clip-path: polygon(20% 0%, 100% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 100%, 0% 20%);
}

/* whychoose-icon-box-top-right */
.whychoose-icon-box {
    position: relative;
    background-color: white; /* สีพื้นหลังด้านใน */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
    /* ใช้ clip-path เพื่อสร้างรูปทรงแปดเหลี่ยม */
    clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
}
.whychoose-icon-box::before {
    content: '';
    position: absolute;
    top: -3px; left: -3px; right: -3px; bottom: -3px; /* ขนาดความหนาของขอบ */
    background: linear-gradient( #FFD90D, #AB9000); /* สี Gradient ของขอบ */
    z-index: -1;
    /* ใช้ clip-path เดียวกันเพื่อให้ขอบเป็นรูปทรงเดียวกัน */
    clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
}

/* 4. สไตล์ของรูปภาพไอคอนด้านใน */
.whychoose-icon-box img {
    width: 70%;
    height: 70%;
    object-fit: contain;
    color: #ffffff;
}

/* ================================================= */
/* ============== MOBILE RESPONSIVE STYLES ========= */
/* ================================================= */

@media (max-width: 768px) {

  /* --- General Header Adjustments --- */
  .whychoose-title,
  .whychoose_2-header h1,
  .whychoose-header h1 {
    font-size: 24px; /* ลดขนาด Font หัวข้อหลัก */
  }

  .whychoose-subtitle,
  .whychoose_2-header p,
  .whychoose-header p {
    font-size: 18px; /* ลดขนาด Font หัวข้อรอง */
    margin-bottom: 30px; /* ลดระยะห่างด้านล่าง */
  }
  
  .whychoose_2-header h1 {
      margin-bottom: 10px;
  }
  
  .whychoose_2-header p {
      font-size: 16px;
      margin-bottom: 40px;
  }

  .whychoose-icon {
    width: 50px; /* ลดขนาดไอคอน */
  }
  
  .whychoose-container {
      margin: 30px auto;
      padding: 0 15px;
  }
  
  .whychoose-container h3 {
      margin: 0 0 40px;
  }


  /* --- ⭐️ Section: whychoose-grid (ตารางที่มีเส้นเชื่อม) ⭐️ --- */
  .whychoose-grid {
    grid-template-columns: 1fr; /* เปลี่ยนเป็น 1 คอลัมน์ */
    gap: 20px;
  }

  /* ⭐️⭐️ ซ่อนเส้นตกแต่งทั้งหมด เพราะไม่เหมาะกับมือถือ ⭐️⭐️ */
  .whychoose-grid::before,
  .whychoose-grid::after,
  .whychoose-grid > :first-child::before,
  .whychoose-grid > :nth-child(2)::after,
  .whychoose-grid > :nth-child(2)::before {
    display: none;
  }

  .whychoose-item {
    padding: 15px 20px; /* ลด padding ลง */
  }
  
  .whychoose-item:last-child {
      max-width: 100%; /* ทำให้เต็มความกว้าง */
  }


  /* --- Section: Circle Progress Bars --- */
  .circle-card {
    width: calc(50% - 20px); /* จัดเป็น 2 คอลัมน์ */
    margin-bottom: 20px;
  }
  
  .circle-card p {
      font-size: 1rem;
  }
  
  .progress-circle {
      width: 80px;
      height: 80px;
  }
  
  .progress-circle span {
      font-size: 1.8rem;
  }

  /* --- ⭐️ Section: whychoose-grid-container (ตารางที่มีไอคอนตรงกลาง) ⭐️ --- */
  .whychoose-grid-container {
    display: flex; /* เปลี่ยนเป็น Flexbox เพื่อจัดเรียงง่ายขึ้น */
    flex-direction: column; /* เรียงจากบนลงล่าง */
    align-items: center; /* จัดทุกอย่างอยู่กลาง */
    gap: 20px;
  }

  /* ยกเลิกการใช้ grid-area และ margin ที่ดันเนื้อหาออก */
  .whychoose-item-wrapper.top-left,
  .whychoose-item-wrapper.top-right,
  .whychoose-item-wrapper.bottom-left,
  .whychoose-item-wrapper.bottom-right {
    grid-area: auto;
    margin-right: 0;
    width: 100%;
    max-width: 400px; /* กำหนดความกว้างสูงสุด */
  }

  /* ⭐️⭐️ จัดการไอคอนตรงกลางใหม่ ⭐️⭐️ */
  .whychoose-center-icon,
  .whychoose-icon-grid {
    position: relative; /* เปลี่ยนเป็น relative เพื่อให้อยู่ใน Flow */
    top: auto;
    left: auto;
    transform: none; /* ยกเลิก transform */
    
    width: 200px; /* ลดขนาดลง */
    height: 200px;
    margin: 20px auto; /* จัดกลางและเพิ่มระยะห่าง */
    
    /* ⭐️ สั่งให้มาอยู่ระหว่าง item ที่ 2 และ 3 ⭐️ */
    order: 3; 
  }

  /* จัดลำดับ item ใหม่ให้ไอคอนอยู่ตรงกลาง */
  .whychoose-item-wrapper.top-left { order: 1; }
  .whychoose-item-wrapper.top-right { order: 2; }
  .whychoose-item-wrapper.bottom-left { order: 4; }
  .whychoose-item-wrapper.bottom-right { order: 5; }

  /* ซ่อนเส้นกากบาทในไอคอนกลาง */
  .whychoose-center-icon::before,
  .whychoose-center-icon::after {
      display: none;
  }
  
  /* ปรับขนาดข้อความใน Grid */
  .whychoose-text-top-left h4,
  .whychoose-text-top-right h4,
  .whychoose-text-bottom-left h4,
  .whychoose-text-bottom-right h4 {
    font-size: 1.1rem;
  }

  .whychoose-text-top-left p,
  .whychoose-text-top-right p,
  .whychoose-text-bottom-left p,
  .whychoose-text-bottom-right p {
    font-size: 0.9rem;
  }

}
/* ===================================== */

/* Container หลัก */
.contact-card-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px 20px;
}

/* กล่องหลักที่มีขอบสีเหลือง */
.contact-card-content {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 40px;
    max-width: 1000px;
    width: 100%;
    padding: 30px;
    background-color: #ffffff;
    border: 3px solid #FFD90D;
    border-radius: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Main container for contact info */
.contact-info-wrapper {
    flex: 1;
    min-width: 300px;
    font-family: 'Kanit', sans-serif;
    display: flex;
    flex-direction: column; /* จัดเรียงเนื้อหาข้างใน (หัวข้อ, เบอร์โทร, QR) เป็นแนวตั้ง */
    align-items: center;   /* จัดให้ทุกอย่างอยู่กึ่งกลางแนวนอน */
    justify-content: center; /* จัดให้ทุกอย่างอยู่กึ่งกลางแนวตั้ง */
    gap: 25px;
}

/* "สนใจติดต่อสอบถาม" Title */
.contact-title {
    font-size: 2.2rem;
    font-weight: bold;
    background: linear-gradient(to right, #AA8F00, #998100);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    margin-bottom: 10px;
}

/* Container for each contact item (Phone, Messenger) */
.contact-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
}

/* Styling for the icons */
.contact-item i.phone-icon {
    font-size: 2.5rem;
    color: #31C64C;
    transform: scaleX(-1);
}

.contact-item i.messenger-icon {
    font-size: 2.5rem;
    color: #0078FF;
}

/* Styling for the text next to icons */
.contact-text {
    font-size: 1.2rem;
    white-space: nowrap;
    background: linear-gradient(to right, #998208, #FFA200);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    text-decoration: none;
}

/* "หรือ สแกน qr Code" sub-heading */
.qr-text {
    font-size: 1.5rem;
    background: linear-gradient(to right, #998208, #FFA200);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    margin-top: 15px;
}

/* Styling for the QR code image */
.qr-code-wrapper {
    position: relative;
    width: 180px;
    height: 180px;
}

.qr-code-image {
    width: 180px;
    height: 180px;
    border-radius: 20px;
    padding: 10px;
    background-color: white;
}

.qr-code-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    border-radius: 12px;
}

/* ส่วนขวา: รูปภาพ */
.contact-image-wrapper {
    flex: 1;
    min-width: 300px;
    max-width: 500px;
    position: relative;
    padding: 20px;
}

.contact-house-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}


/* ================================================= */
/* ============== MOBILE RESPONSIVE STYLES ========= */
/* ================================================= */

@media (max-width: 768px) {
    .contact-card-container {
      padding: 30px 15px;
    }

    .contact-card-content {
      flex-direction: column;
      align-items: center; /* ⭐️ เพิ่มบรรทัดนี้เพื่อจัดให้อยู่กึ่งกลาง ⭐️ */
      gap: 30px;
      padding: 20px;
    }
    
    .contact-info-wrapper {
        gap: 20px;
        text-align: center;
    }
    
    .contact-title {
      font-size: 1.8rem;
    }
    
    .contact-text {
        font-size: 1.1rem;
    }

    .qr-text {
      font-size: 1.2rem;
    }
    
    .qr-code-wrapper,
    .qr-code-image {
        width: 160px;
        height: 160px;
    }
    
    .qr-code-logo {
        width: 45px;
        height: 45px;
    }

    .contact-image-wrapper {
        padding: 0;
    }
}


/* =============== จบ ======================== */
/* ---------------section------------------- */
.section-container {
  max-width: 1200px;
  margin: 50px auto;
  padding: 0 20px;
  border: 2px solid #f6b400;
  border-radius: 10px;
  overflow: hidden;
}

.section-content {
  display: flex;
  flex-wrap: wrap;
  padding: 20px;
  gap: 20px;
}

.left-content {
  flex: 1 1 350px;
}

.left-content h2 {
font-size: 26px;
font-weight: bold;
color: #f6b400;
margin-bottom: 15px;
}

.left-content h2 span {
  color: #ff9900;
}

.left-content p {
  margin: 10px 0 20px;
  font-size: 16px;
  color: #444;
  line-height: 1.5em;
}

.arrow-icon {
  color: #f6b400;
  font-size: 22px;
  margin-right: 8px;
}

.image-box {
  margin-bottom: 20px;
}

.image-box img {
  max-width: 100%;
  border-radius: 10px;
  display: block;
}

.button-group {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.btn {
  padding: 10px 25px;
  font-size: 16px;
  border-radius: 25px;
  cursor: pointer;
  font-weight: 500;
}

.btn-primary {
  background: #fff;
  color: #f6b400;
  border: 2px solid #f6b400;
}

.btn-primary:hover {
  background: #f6b400;
  color: #fff;
}

.btn-secondary {
  background: #f6b400;
  color: #fff;
  border: none;
}

.btn-secondary:hover {
  background: #d49a00;
}

.right-content {
  flex: 1 1 350px;
  display: flex;
  align-items: center;
}

.right-content img {
  max-width: 100%;
  border-radius: 10px;
  display: block;
}

.bottom-bar {
  border-top: 2px solid #f6b400;
  padding: 15px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px;
  font-size: 14px;
}

.bottom-bar .contact-btn {
  background: #fff;
  border: 2px solid #f6b400;
  color: #f6b400;
  border-radius: 15px;
  padding: 5px 15px;
  font-weight: 500;
}

.bottom-bar .contact-info {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
  color: #555;
}

.contact-info div {
  /* align-items: center; */
  gap: 5px;
}

.icon {
  color: #f6b400;
}

/* ---------------ModHou------------------- */
.ModHou-container {
  position: relative;
  width: 1242px;
  height: 668px;
  border-radius: 30px;
  overflow: hidden;
  color: rgb(0, 0, 0);
  padding: 20px 0 0 100px;
  box-sizing: border-box;
  margin: 0 auto;
}

.frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 600px;
  pointer-events: none;
  z-index: 1;
}

.top-left-text {
  position: relative;
  z-index: 2;
}

.top-left-text h1 {
  font-size: 32px;
  background: linear-gradient(to right, #998208, #FFA200);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  margin: 20px 0 10px 0;
}

.top-left-text p {
  font-size: 22px;
  color: #875E5E;
  margin: 0;
  line-height: 1.6;
}

.highlight-icon {
    font-size: 40px;
    color: #FBC02D;
}

.bottom-images {
  position: absolute;
  top: 75px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 10px;
  align-items: center;
  padding: 0 60px;
  z-index: 2;
}

.Left-Image{
  width: 500px;
  height: auto;
  border-radius: 10px;
}

.Right-Image {
  width: 600px;
  height: auto;
  border-radius: 10px;
}

.ModHou-container .btn-additional-info,
.ModHou-container .btn-chat-inquiry {
  padding: 0.75rem 2.5rem;
  border-radius: 9999px;
  font-size: 1.25rem;
  border: 4px solid #FBC02D;
  margin-top: 300px;
}

.ModHou-container .btn-additional-info {
  background-color: white;
  color: #FBC02D;
}

.ModHou-container .btn-chat-inquiry {
  background-color: #FBC02D;
  color: #998208;
}

.floating-boxcon {
  position: absolute;
  bottom: 45px; 
  right: 60px;
  width: 700px;
  min-height: 130px;

  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  border-radius: 16px;
  border: 1px solid #FBC02D;
  z-index: 3;
  font-size: 1.5rem;
  font-family: 'Kanit', sans-serif;
}

.floating-boxcon .contact-itemcon {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: center;
  font-size: 32px;
  width: 180px;
  margin-left: 12px;
  color: #998208;
}

.floating-boxcon .contact-icon {
  width: 40px;
  height: 40px;
  color: #FBC02D;
}

.floating-boxcon .contact-info {
  display: flex;
  flex-direction: column;
  font-size: 1rem;
  color: #333;
}

.floating-boxcon .contact-label {
  font-size: 1rem;
  color: #000000;
  white-space: nowrap;
}

.floating-boxcon .contact-text {
  font-size: 13px;
   color: #998208;
}

.floating-boxcon .contact-address {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 180px;
}

.floating-boxcon .address-placeholder {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 150px;
}

.floating-boxcon .fa-phone-alt,
.floating-boxcon .fa-envelope,
.floating-boxcon .fa-map-marker-alt {
  color: #FBC02D;
  font-size: 28px;
}

.icon-label {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---------------example-home------------------- */
.example-home{
  margin-top: 100px;
}

.example-text{
  text-align: center;
}

.example-text h1{
  font-size: 32px;
  background: linear-gradient(to right, #FFA200, #996100);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.example-text p{
  font-size: 18px;
  color: #875E5E;
}

.example {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #FCC900;
}

.grid-container {
  display: grid;
  grid-template-columns: 2fr 1.5fr 2fr;
  grid-template-rows: repeat(3, 200px);
  gap: 10px;
  width: 900px;
  max-width: 100%;
}

.item {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: white;
}

.item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

/* Overlay ซ้อน */
.item .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(254, 232, 107, 0.6); 
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 60px; /* เดิม 20px → ขยับขึ้นมา */
  opacity: 0;
  transition: opacity 0.3s ease;
}

.item:hover img {
  transform: scale(1.05);
}

.item:hover .overlay {
  opacity: 1;
}

/* ปุ่ม See More */
.overlay button {
  background: #FFA200;
  color: white;
  border: none;
  padding: 10px 18px;
  border-radius: 6px;
  margin-top: 10px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.item .overlay button {
  margin-top: 10px; /* ระยะห่างจาก h3 */
  margin-bottom: 30px; /* ขยับขึ้นจากขอบล่าง */
  padding: 8px 16px;
  background-color: #FFA200;
  border: none;
  border-radius: 6px;
  color: white;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.3s ease;
}

.overlay button:hover {
  background: #ff8400;
}

.item {
  position: relative;
}

.circle-badge {
  position: absolute;
  bottom: 15px;
  right: 15px;
  background-color: #FFD90D;
  color: #000;
  font-weight: bold;
  font-size: 14px;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none; /* เอาขีดเส้นใต้ลิงก์ออก */
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  transition: background-color 0.3s, transform 0.2s;
}

.circle-badge:hover {
  background-color: #e6c208;
  transform: scale(1.05);
}

.item1 {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}

.item2 {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

.item3 {
  grid-column: 3 / 4;
  grid-row: 1 / 3;
}

.item4 {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

.item5 {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
}

.item6 {
  grid-column: 2 / 4;
  grid-row: 3 / 4;
}

/* ---------------contect-bt------------------- */
.contect-bt{
  font-family: 'Inter', sans-serif;
  background-color: #ffffff;
  /* height: 50vh; */
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.contact-btn {
  background: linear-gradient(180deg, #F9D038 0%, #F5AE23 100%);
  color: white;
  font-size: 1.5rem;
  font-weight: bold;
  padding: 1rem 3rem;
  border-radius: 9999px;
  border: none;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), inset 0 -4px 0 rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  text-decoration: none;
}

.contact-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15), inset 0 -4px 0 rgba(0, 0, 0, 0.1);
}

.scroll-to-top-btn {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: #FFD238;
  color: white;
  padding: 0.5rem;
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.scroll-to-top-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

/* ----- New CSS for the floating contact button and menu ----- */
.floating-contact-container {
  position: fixed;
  bottom: 10rem;
  right: 2rem;
  z-index: 100;
}

.floating-main-btn {
  background: linear-gradient(180deg, #F9D038 0%, #F5AE23 100%);
  color: white;
  border-radius: 50%;
  width: 4rem;
  height: 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), inset 0 -4px 0 rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.floating-main-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15), inset 0 -4px 0 rgba(0, 0, 0, 0.1);
}

.floating-menu {
  position: absolute;
  bottom: 5rem; /* Position above the main button */
  right: 0;
  display: none; /* Initially hidden */
  flex-direction: column;
  align-items: flex-end;
  gap: 1rem;
}

.floating-menu.active {
  display: flex;
}

.floating-main-btn i {
  color: white;
  font-size: 32px; /* ให้ใกล้เคียงขนาด SVG เดิม */
}

        
.menu-item {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.menu-text {
  background-color: #AEAEAE;
  color: #333;
  font-weight: bold;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  white-space: nowrap;
  
  /* ซ่อนข้อความตอนปกติ */
  opacity: 0;
  visibility: hidden;
  transform: translateX(-10px); /* ขยับนิดหน่อยเพื่อให้มี effect */
  transition: all 0.2s ease-in-out;
}

/* โชว์ข้อความเมื่อ hover */
.menu-item:hover .menu-text {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.menu-btn {
  background-color: white;
  color: #F5AE23;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 15px; /* 🔹 เปลี่ยนจาก 50% เป็น 0 เพื่อทำให้เป็นสี่เหลี่ยม */
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.menu-btn img {
  width: 80%;    /* ปรับให้เต็มกรอบประมาณ 70% ของปุ่ม */
  height: 80%;
  object-fit: contain; /* ป้องกันรูปบิดเบี้ยว */
}

.menu-btn:hover {
  transform: scale(1.1);
}