/* style.css - Glorycash */
:root{
  --brand: #febd03;
  --bg: #fdfdfd;
  --text: #222222;
  --muted: #666666;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;font-family:'Poppins',sans-serif;background:var(--bg);color:var(--text);scroll-behavior:smooth;}
a{color:var(--brand);text-decoration:none;}
.container{max-width:1223px;margin:0 auto;padding:0 20px;}

/* Navbar */
.navbar{position:fixed;top:0;left:0;right:0;background:var(--brand);border-bottom:1px solid #e4a902;z-index:1000;box-shadow: 0 2px 10px rgba(0,0,0,0.1);}
.navbar .container{display:flex;align-items:center;justify-content:space-between;height:80px;}
.brand{display:flex;align-items:center;gap:12px;}
.brand-logo{
  display:flex;
  align-items:center;
  justify-content:flex-start; /* จัดโลโก้ให้อยู่ด้านบน */
  width:80px;    /* ปรับความกว้าง */
  height:110px;   /* ปรับความสูงให้เลยลงมา */
  background:#fff;
  border-radius: 0 0 35px 35px; /* ทำให้ขอบล่างโค้ง */
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
  padding-top: 20px; /* เพิ่มช่องว่างด้านบนเพื่อดันโลโก้ลงมา */
}
.brand-logo img{height:52px;width:auto; margin: 0 auto; } /* ปรับขนาดและจัดกลาง */
.brand-name{font-weight:700;color:#222;}
.brand-tagline{font-size:12px;color:#555;}

/* New Navigation Menu Style */
.navlinks ul {
  position: relative;
  display: flex;
  margin: 0;
  padding: 0;
  height: 70px;
  align-items: center;
}
.navlinks li.list {
  list-style: none;
  width: 90px; /* ปรับความกว้างให้เท่ากับขนาดของวงกลม */
  height: 70px;
}
.navlinks a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
  font-weight: 500;
  z-index: 1; /* ทำให้ลิงก์ (ไอคอน+ข้อความ) อยู่เหนือ indicator */
}
.navlinks .icon {
  position: relative;
  display: block;
  line-height: 75px;
  font-size: 1.5em;
  transition: 0.5s;
  color: #222;
}
.navlinks li.active a .icon { 
  transform: translateY(-8px); /* ยกไอคอนขึ้นเล็กน้อย */
  color: #222; /* ทำให้ไอคอนเป็นสีเข้มบนพื้นขาว */
}
.navlinks .text {
  position: absolute;
  color: #222;
  font-weight: 600; /* เพิ่มความหนาของตัวอักษร */
  font-size: 0.7em; /* ลดขนาดตัวอักษรลง */
  letter-spacing: 0.05em;
  transition: 0.5s;
  opacity: 1; /* เปลี่ยนจาก 0 เป็น 1 เพื่อให้แสดงข้อความตลอดเวลา */
  transform: translateY(25px); /* ปรับตำแหน่งเริ่มต้นให้ต่ำลงเล็กน้อย */
  /* --- เพิ่มกรอบให้ข้อความ --- */
  background-color: var(--brand);
  padding: 2px 7px; /* ลดช่องว่างภายในเล็กน้อยให้พอดีกับตัวอักษร */
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.navlinks li.active a .text {
  transform: translateY(22px); /* ปรับตำแหน่งแสดงผลให้อยู่ในวงกลมพอดี */
}
.indicator {
  position: absolute;
  top: -4px; /* ขยับวงกลมลงมาเล็กน้อย */
  width: 60px; /* ความกว้างของวงกลม */
  height: 60px; /* ความสูงของวงกลม */
  background-color: #fff;
  border-radius: 50%;
  border: 6px solid var(--brand);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15); /* เพิ่มเงาให้ชัดขึ้น */
  transition: 0.5s;
  /* ตัว indicator จะอยู่หลังไอคอน */
  z-index: 0; 
}

/* Buttons */
.btn-primary{background:var(--brand);color:#222;padding:10px 16px;border-radius:8px;border:none;cursor:pointer;font-weight:600;transition:all 0.3s ease;box-shadow:0 4px 12px rgba(0,0,0,0.08);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,0.12);filter:brightness(1.05);}
.btn-primary:active{transform:translateY(0);box-shadow:0 2px 8px rgba(0,0,0,0.1);}

.btn-secondary{padding:10px 12px;border-radius:8px;border:1px solid #ddd;background-color: #fff; color: #333;transition:all 0.3s ease;}
.btn-secondary:hover{background-color:#f5f5f5;border-color:#ccc;}

/* Animation for elements on scroll */
.cardbox, .fb-area, .hero .card {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.in-view { opacity: 1; transform: translateY(0); }

/* Main content */
.main-content{margin-top:80px;}

/* Hero - slider */
.hero{margin-top:80px;} /* เพิ่มระยะห่างด้านบน */
.hero-content {
  position: relative;
  overflow: hidden; /* ซ่อนส่วนเกินของสไลด์ */
  border-radius: 12px; /* ทำให้มุมของสไลด์โค้งมน */
  box-shadow: 0 8px 25px rgba(0,0,0,0.1); /* เพิ่มเงาให้ดูมีมิติ */
}
.slider{display:flex;transition:transform 0.6s ease;will-change:transform;}
.slide{min-width:100%;position:relative;height:611px;display:flex;align-items:center;justify-content:center;background:#f5f5f5;}
.slide img{width:100%;height:611px;object-fit:contain;display:block;}

/* overlay text */
.hero .overlay{position:absolute;left:0;top:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;pointer-events:none;}
.hero .card{background:rgba(255,255,255,0.92);padding:24px;border-radius:12px;max-width:780px;pointer-events:auto;box-shadow:0 8px 30px rgba(0,0,0,0.08);}
.hero h1{margin:0 0 8px 0;font-size:28px;}
.hero p{margin:0;color:var(--muted);}

/* Page Hero (for inner pages) */
.page-hero {
  padding: 40px 0;
  background-color: #f8f9fa;
  text-align: center;
  border-bottom: 1px solid #eee;
}
.page-hero h1 { margin: 0 0 8px 0; }
.page-hero p { margin: 0; color: var(--muted); }

/* sections */
.section{padding:56px 0;}
.bg-white{background:#fff;}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}

/* Section Title Style */
.section-title {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 48px; /* เพิ่มระยะห่างด้านล่าง */
  position: relative;
  display: inline-block; /* ทำให้เส้นขีดมีความกว้างเท่ากับข้อความ */
  padding-bottom: 12px;
}
.section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background-color: var(--brand);
  border-radius: 2px;
}

/* About Us Section */
.about-us-grid-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr; /* ให้ข้อความมีพื้นที่มากกว่ารูปเล็กน้อย */
  gap: 40px; /* เพิ่มช่องว่างระหว่างข้อความกับรูป */
  align-items: center;
  text-align: left;
  /* --- เพิ่มคอนเทนเนอร์และเงาเรืองแสง --- */
  background-color: #fffaf0;
  padding: 32px;
  border-radius: 16px;
  animation: glowing-brand 5s ease-in-out infinite;
  /* --- จัดให้อยู่กึ่งกลาง --- */
  max-width: 1100px;
  margin: 0 auto;
}
.about-us-main-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* ทำให้รูปเต็มพื้นที่ container โดยไม่เสียสัดส่วน */
  /* เพิ่มมุมโค้งมนให้รูปภาพเพื่อให้เข้ากับกรอบ */
  border-radius: 12px;
}
.about-us-headline {
  font-size: 2em;
  font-weight: 700;
  margin: 0 0 16px 0; /* เพิ่มระยะห่างด้านล่างเล็กน้อย */
  display: flex;
  flex-direction: column; /* จัดเรียงเป็นแนวตั้ง */
  align-items: center;
  gap: 12px; /* ระยะห่างระหว่างโลโก้กับข้อความ */
}
.headline-logo {
  height: 110px; /* เพิ่มขนาดโลโก้ให้ใหญ่ขึ้น */
}
.about-us-subheadline { margin-bottom: 16px; }
.about-us-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.tag { background-color: var(--brand); color: #222; padding: 4px 10px; border-radius: 16px; font-size: 0.9em; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.divider { margin: 24px 0; border: 0; border-top: 1px solid #eee; }
.section-title {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 48px; /* เพิ่มระยะห่างด้านล่าง */
  position: relative;
  display: inline-block; /* ทำให้เส้นขีดมีความกว้างเท่ากับข้อความ */
  padding-bottom: 12px;
}
.section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background-color: var(--brand);
  border-radius: 2px;
}

.cardbox{background:#fff;padding:18px;border-radius:10px;box-shadow:0 6px 18px rgba(0,0,0,0.04);border:1px solid #f0f0f0;transition:transform 0.3s ease, box-shadow 0.3s ease;}
.cardbox:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,0.08);}
.text-muted, p.muted{color:var(--muted);}

/* Facebook Grid Section */
.fb-grid {
  display: grid;
  grid-template-columns: 1fr 380px; /* แบ่งเป็น 2 ส่วน */
  gap: 24px; /* ลดช่องว่างลงเล็กน้อย */
  align-items: center;
  text-align: left; /* ปรับให้ข้อความชิดซ้าย */
  margin-top: 24px;
  /* ย้ายอนิเมชันและสไตล์พื้นหลังมาไว้ที่นี่ */
  background: #fffaf0;
  padding: 24px;
  border-radius: 12px;
  animation: glowing-brand 5s ease-in-out infinite;
}

.fb-description h3 {
  font-size: 24px;
  margin-top: 0;
  margin-bottom: 12px;
}
.btn-fb-follow {
  margin-top: 24px;
  font-size: 16px;
  padding: 12px 24px;
}
.btn-fb-follow i { margin-right: 8px; }

/* Glowing effect for Facebook section */
@keyframes glowing-brand {
  0% { box-shadow: 0 0 5px rgba(254, 189, 3, 0.3); }
  50% { box-shadow: 0 0 25px 8px rgba(254, 189, 3, 0.6); }
  100% { box-shadow: 0 0 5px rgba(254, 189, 3, 0.3); }
}

/* New Video & Features Layout */
.video-features-layout {
  display: grid;
  grid-template-columns: 400px 1fr; /* คอลัมน์ซ้ายสำหรับวิดีโอ, คอลัมน์ขวาสำหรับจุดเด่น */
  gap: 32px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}
.video-wrapper video {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

/* Features Grid Section */
.features-grid {
  display: grid;
  /* จัดเรียงเป็น 2 คอลัมน์ 3 แถว */
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.feature-box {
  background-color: #fff;
  padding: 24px;
  border-radius: 12px;
  text-align: center;
  border: 1px solid #f0f0f0;
  box-shadow: 0 6px 18px rgba(0,0,0,0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.feature-box:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}
.feature-box i {
  font-size: 2.5em;
  color: var(--brand);
  margin-bottom: 16px;
}
.feature-box h4 {
  margin: 0;
  font-size: 1.1em;
  font-weight: 600;
  color: var(--text);
}

#fb {
  background: #fff;
  padding: 56px 0;
}

/* Forms */
.short-form{display:flex;gap:8px;align-items:center;}
.short-form input{flex:1;padding:10px;border-radius:8px;border:1px solid #ddd;transition:box-shadow 0.3s ease, border-color 0.3s ease;}
/* Re-use btn-primary for short-form button */
.short-form button{padding:10px 12px;}

/* Wrapper for the form to center it */
.contact-layout-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* แบ่ง 2 คอลัมน์เท่ากัน */
  gap: 32px; /* ช่องว่างระหว่างคอลัมน์ */
  align-items: start; /* จัดให้อยู่ด้านบนสุด */
  /* --- ทำให้กลายเป็นบล็อกเดียวกัน --- */
  background-color: #f8f9fa; /* เพิ่มสีพื้นหลังอ่อนๆ */
  padding: 24px;
  border-radius: 16px;
  border: 1px solid #f0f0f0;
  box-shadow: 0 8px 30px rgba(0,0,0,0.05);
  margin-top: 32px; /* เพิ่มระยะห่างจากบล็อกคำแนะนำด้านบน */
}

/* Title for the form block */
.form-block-title {
  grid-column: 1 / -1; /* ทำให้หัวข้อกว้างเต็ม 2 คอลัมน์ */
  text-align: center;
  margin: 0 0 16px 0;
  font-size: 1.5em;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* Container for the video below the form */
.video-container {
  position: sticky; /* ทำให้วิดีโอ "ลอย" ตามการ scroll */
  top: 100px; /* ระยะห่างจากขอบบน (80px ของ navbar + 20px) */
}
.video-container video {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}
.contact-form{
  margin-top:0;
  background-color: #fff;
  padding: 24px;
  border-radius: 12px;
  border: 1px solid #f0f0f0;
  box-shadow: 0 8px 25px rgba(0,0,0,0.06);
}
.form-fields-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.contact-form {
  /* ย้าย .contact-form มาอยู่หลัง .form-instructions-card เพื่อให้ animation ทำงานทีหลัง */
  animation-delay: 0.4s;
}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}.form-group {   position: relative; } .form-group.full-width {   grid-column: 1 / -1; /* ทำให้ช่องนี้กว้างเต็ม */ } .form-group i {   position: absolute;   left: 15px;   top: 50%;   transform: translateY(-50%);   color: var(--muted);   transition: color 0.3s ease; } .form-group input, .form-group select {
  width:100%;
  padding: 12px 12px 12px 45px; /* เพิ่ม padding ด้านซ้ายสำหรับไอคอน */
  border-radius:8px;
  border:1px solid #ddd;
  font-family: inherit;
  font-size: 1em;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.form-group input:focus, .form-group select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(254, 189, 3, 0.3);
}
.form-group input:focus + i, .form-group select:focus + i {
  color: var(--brand);
}
.form-actions{display:flex;justify-content:center;margin-top:24px;}
.form-actions .btn-primary i { margin-right: 8px; }

/* Utility classes */
.mt-12{margin-top:12px;}
.mt-18{margin-top:18px;}

/* Contact Grid Buttons */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 40px;
}
.contact-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 20px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  color: #fff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.contact-button:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}
/* Bouncing animation for contact buttons */
@keyframes bounce-in {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}
.contact-button.bouncing {
  /* animation: name duration timing-function delay iteration-count direction fill-mode; */
  animation: bounce-in 2s ease-in-out 0.5s infinite;
}
/* Add delay for each button */
.contact-button:nth-child(1).bouncing { animation-delay: 0.5s; }
.contact-button:nth-child(2).bouncing { animation-delay: 0.7s; }
.contact-button:nth-child(3).bouncing { animation-delay: 0.9s; }
.contact-button:nth-child(4).bouncing { animation-delay: 1.1s; }
.contact-button i {
  font-size: 1.8em;
  margin-right: 12px;
}
.contact-button .text-content { display: flex; flex-direction: column; align-items: flex-start; }
.contact-button .text-content span { font-size: 0.8em; font-weight: 400; opacity: 0.9; }

/* Button specific colors */
.btn-facebook { background-color: #1877F2; }
.btn-line { background-color: #06C755; }
.btn-instagram { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
.btn-phone { background-color: var(--brand); color: #222; }
.btn-phone .text-content span { color: #555; }


/* Footer */
footer{background:#fafafa;padding:24px 0;margin-top:20px;border-top:1px solid #eee;}
.footer-inner{display:flex;justify-content:space-between;align-items:center;}

/* Responsive */
@media(max-width:900px){
  .contact-grid {
    grid-template-columns: 1fr 1fr; /* 2 columns on tablet */
  }
  .fb-grid {
    grid-template-columns: 1fr; /* ทำให้เหลือ 1 คอลัมน์บนจอแท็บเล็ต */
  }
  .grid{grid-template-columns:1fr;}
  .hero .card{margin:16px;width:calc(100% - 32px);}
  .navlinks{display:none;}
}

/* --- Mobile Navigation Styles --- */
.mobile-nav-toggle {
  display: none; /* ซ่อนปุ่มนี้ในหน้าจอคอม */
  width: 30px;
  height: 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  position: relative;
  z-index: 1002; /* ให้อยู่เหนือทุกอย่าง */
}
.mobile-nav-toggle span {
  display: block;
  width: 100%;
  height: 3px;
  background-color: #222;
  border-radius: 2px;
  position: absolute;
  left: 0;
  transition: all 0.3s ease;
}
.mobile-nav-toggle span:nth-child(1) { top: 0; }
.mobile-nav-toggle span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.mobile-nav-toggle span:nth-child(3) { bottom: 0; }

/* Animation for hamburger to 'X' */
.mobile-nav-open .mobile-nav-toggle span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
.mobile-nav-open .mobile-nav-toggle span:nth-child(2) { opacity: 0; }
.mobile-nav-open .mobile-nav-toggle span:nth-child(3) { bottom: 50%; transform: translateY(50%) rotate(-45deg); }

@media(max-width:600px){
  .form-grid{grid-template-columns:1fr;}
  .short-form{flex-direction:column;align-items:stretch;}
  .contact-grid {
    grid-template-columns: 1fr; /* 1 column on mobile */
  }
  .mobile-nav-toggle { display: block; } /* แสดงปุ่มบนจอมือถือ */
  .navlinks {
    display: flex; /* ทำให้มองเห็นได้เมื่อถูกสั่งเปิด */
    position: fixed;
    top: 0;
    right: 0;
    width: 280px; /* ความกว้างของเมนูที่สไลด์ออกมา */
    height: 100vh;
    background-color: #fff;
    box-shadow: -5px 0 15px rgba(0,0,0,0.1);
    transform: translateX(100%); /* ซ่อนไว้นอกจอทางขวา */
    transition: transform 0.4s ease;
    z-index: 1001;
  }
  .mobile-nav-open .navlinks { transform: translateX(0); } /* แสดงเมนูเมื่อกดปุ่ม */
  .navlinks ul { flex-direction: column; height: auto; padding-top: 100px; align-items: flex-start; width: 100%; }
  .navlinks li.list { width: 100%; }
  .navlinks a { flex-direction: row; justify-content: flex-start; padding: 15px 20px; }
  .navlinks .text { position: static; transform: none; opacity: 1; background: none; box-shadow: none; padding: 0; margin-left: 15px; }
  .navlinks .icon { line-height: 1; }
  .navlinks li.active a .icon, .indicator { display: none; } /* ซ่อนวงกลมและไอคอนที่ลอยขึ้น */
  .main-content { margin-top: 0; } /* ลบ margin ของ main-content บนมือถือ */

  /* --- ปรับสไลด์โชว์สำหรับมือถือ --- */
  main { margin-top: 0; } /* ลบ margin ของ main เพื่อให้สไลด์ชิดขอบบน */
  .hero { margin-top: 20px; } /* ขยับสไลด์ให้ติดขอบล่างของเฮดบาร์ */
  .hero-content {
    border-radius: 0; /* ทำให้สไลด์เต็มความกว้าง ไม่มีขอบโค้ง */
    box-shadow: none; /* ลบเงาของคอนเทนเนอร์สไลด์ออก */
  }
  .slide, .slide img { 
    height: 300px; 
    object-fit: contain; /* เปลี่ยนเป็น contain เพื่อให้รูปแสดงผลเต็ม ไม่ถูกตัด */
    background: transparent; /* ทำให้พื้นหลังของสไลด์โปร่งใส */
  }
  .hero .overlay { background-color: transparent; } /* ทำให้ overlay โปร่งใส */
  .hero .card {
    max-width: calc(100% - 32px); /* ปรับขนาดกล่องข้อความ */
    background-color: rgba(255, 255, 255, 0.85); /* ทำให้พื้นหลังโปร่งแสง */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* เพิ่มเงาให้ดูมีมิติขึ้น */
  }
  .hero h1 { font-size: 24px; }
}

/* Dual Slider Section */
.dual-slider-section {
  overflow: hidden;
}
.dual-slider-container {
  position: relative;
  height: 300px; /* <-- จุดปรับขนาดรูปสไลด์! แค่เปลี่ยนตัวเลขตรงนี้ได้เลยครับ */
  display: flex;
  justify-content: center;
  align-items: center;
}
.dual-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px; /* ลดช่องไฟตรงกลางให้ชิดขึ้น */
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}
.dual-slide.active {
  opacity: 1;
}
.slide-image-left, .slide-image-right {
  /* ทำให้รูปภาพแสดงผลเต็มโดยไม่ถูกตัด */
  max-height: 100%;
  max-width: 48%; /* จำกัดความกว้างสูงสุดของแต่ละรูป */
  height: auto;
  width: auto;
  
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}
/* Initial state (hidden) */
.slide-image-left { transform: translateX(-150%); }
.slide-image-right { transform: translateX(150%); }
/* Active state (visible) */
.dual-slide.active .slide-image-left { transform: translateX(0); }
.dual-slide.active .slide-image-right { transform: translateX(0); }

/* Loan Steps Section */
.steps-title { color: #222; }
.steps-title::after { background-color: #fff; }

.steps-container {
  display: flex;
  justify-content: center;
  align-items: stretch; /* ทำให้ความสูงเท่ากัน */
  flex-wrap: wrap; /* ให้ขึ้นบรรทัดใหม่บนจอมือถือ */
  gap: 20px;
}
.step-item {
  background-color: #fff;
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 180px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.step-item:hover {
  transform: translateY(-10px) scale(1.05);
  box-shadow: 0 12px 30px rgba(0,0,0,0.15);
}
.step-icon {
  font-size: 3em;
  color: var(--brand);
  margin-bottom: 16px;
  line-height: 1;
}
.step-text {
  font-size: 1.1em;
  font-weight: 600;
  color: #333;
}
.step-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5em;
  color: rgba(255, 255, 255, 0.8);
}

/* Staggered animation for steps */
.step-item:nth-of-type(1) { transition-delay: 0.1s; }
.step-arrow:nth-of-type(2) { transition-delay: 0.2s; }
.step-item:nth-of-type(3) { transition-delay: 0.3s; }
.step-arrow:nth-of-type(4) { transition-delay: 0.4s; }
.step-item:nth-of-type(5) { transition-delay: 0.5s; }
.step-arrow:nth-of-type(6) { transition-delay: 0.6s; }
.step-item:nth-of-type(7) { transition-delay: 0.7s; }

/* Qualifications Page */
.qualifications-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr; /* แบ่ง 2 ส่วนไม่เท่ากัน */
  gap: 30px;
  align-items: start;
}
.qualifications-card {
  background-color: #fff;
  padding: 24px 32px;
  border-radius: 16px;
  border: 1px solid #f0f0f0;
  box-shadow: 0 8px 25px rgba(0,0,0,0.06);
  height: 100%; /* ทำให้การ์ดสูงเท่ากัน */
}
.qualifications-card.highlight-card {
  background-color: #fffaf0;
  border-left: 5px solid var(--brand);
}
.qualifications-card .card-icon {
  font-size: 2.5em;
  color: var(--brand);
  margin-bottom: 16px;
  display: inline-block;
}
.qualifications-card h3 {
  margin-top: 0;
  margin-bottom: 24px;
  font-size: 1.5em;
}
.qualifications-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 1.1em;
}
.qualifications-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  color: var(--text);
}
.qualifications-list li i {
  color: var(--brand);
  font-size: 1.2em;
}
.cta-box {
  margin-top: 48px;
  padding: 24px;
  background-color: #f8f9fa;
  border-radius: 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.cta-box p { margin: 0; font-size: 1.2em; font-weight: 600; }
.cta-box .btn-primary i { margin-left: 8px; }

@media(max-width: 900px) {
  .step-arrow { display: none; } /* ซ่อนลูกศรบนจอมือถือ */
  .step-item { width: calc(50% - 10px); } /* แสดง 2 คอลัมน์ */
  .fb-description {
    text-align: center; /* ทำให้ข้อความและปุ่มกลับมาอยู่กลางบนจอมือถือ */
  }
  .form-layout {
    grid-template-columns: 1fr; /* 1 คอลัมน์บนจอแท็บเล็ต */
  }
  .contact-layout-grid {
    grid-template-columns: 1fr; /* ทำให้เหลือ 1 คอลัมน์ */
  }
  .video-container { position: static; margin-top: 32px; } /* ยกเลิก sticky บนมือถือ */
  .qualifications-grid {
    grid-template-columns: 1fr; /* 1 คอลัมน์บนจอแท็บเล็ต */
  }
  /* --- เพิ่มเติมสำหรับ Responsive --- */
  .about-us-grid-layout,
  .video-features-layout {
    grid-template-columns: 1fr; /* ทำให้เรียงเป็น 1 คอลัมน์ */
    padding: 24px 16px;
  }
  .about-us-headline {
    font-size: 1.8em;
  }
  .dual-slide {
    flex-direction: column; /* ทำให้รูปในสไลด์เรียงกันแนวตั้ง */
  }
}

/* Form Instructions Card */
.form-instructions-card {
  background-color: #fff;
  padding: 24px;
  border-radius: 12px;
  border: 1px solid #f0f0f0;
  box-shadow: 0 8px 25px rgba(0,0,0,0.06);
  opacity: 0;
  transform: translateY(20px);
  animation: fade-in-up 0.8s 0.2s ease-out forwards;
}
.instruction-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.3em;
  margin: 0 0 16px 0;
  color: var(--text);
}
.instruction-title i {
  color: var(--brand);
}
.instruction-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.instruction-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
}
.instruction-list li i {
  color: #a0aec0; /* สีเทาอ่อน */
  font-size: 1.1em;
}
.instruction-section-note {
  margin-top: 24px;
  padding: 16px;
  background-color: #fffaf0;
  border-left: 4px solid var(--brand);
  border-radius: 8px;
}
.note-list li {
  align-items: flex-start; /* จัดชิดบนสำหรับข้อความยาว */
}
.required-star {
  color: #e53e3e; /* สีแดง */
  font-weight: bold;
  }


/* Article Grid Section */
.article-grid {
  margin-top: 24px;
  text-align: left; /* Reset text alignment for cards */
}
.article-card {
  padding: 0; /* Remove default padding from cardbox */
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--text);
}
.article-card img {
  width: 100%;
  height: 200px; /* Set a fixed height for all images */
  object-fit: cover; /* Ensure images cover the area without distortion */
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.article-content {
  padding: 16px;
}
.article-content h4 { margin: 0 0 8px 0; }

/* Article Page Styles */
.article-container {
  max-width: 840px; /* Limit content width for readability */
}
.article-body {
  background-color: #fff;
  padding: 32px 40px;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.07);
  line-height: 1.8;
  font-size: 1.1em;
  color: #333;
  opacity: 0;
  transform: translateY(20px);
  animation: fade-in-up 0.8s 0.2s ease-out forwards;
}

@keyframes fade-in-up {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.article-body p { margin: 0 0 1.5em 0; }
.article-body h3 {
  font-size: 1.5em;
  margin: 2em 0 1em 0;
  color: var(--text);
}
.article-body .article-h2 {
  font-size: 1.8em;
  margin: 2.5em 0 1.2em 0;
  padding-bottom: 0.5em;
  border-bottom: 2px solid #f0f0f0;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
}
.article-body .article-h2 i { color: var(--brand); }
.article-body .article-intro {
  font-size: 1.2em;
  color: var(--muted);
  border-left: 4px solid var(--brand);
  padding-left: 1.5em;
  margin-bottom: 2em;
}
.article-body strong {
  color: var(--brand);
  font-weight: 600;
}

/* Article Summary Box */
.article-summary-box {
  margin-top: 3em;
  padding: 24px;
  background-color: #fffaf0;
  border-left: 5px solid var(--brand);
  border-radius: 8px;
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.summary-icon {
  font-size: 2em;
  color: var(--brand);
  margin-top: 4px;
}
.summary-content h4 {
  margin: 0 0 8px 0;
  font-size: 1.2em;
  color: var(--text);
}
.summary-content p {
  margin: 0;
  line-height: 1.7;
}

/* Comparison Grid for Pros */
.comparison-grid {
  display: grid;
  grid-template-columns: 1fr 250px; /* <-- ปรับขนาดรูปภาพที่นี่ครับ: คอลัมน์รูปภาพจะมีความกว้างคงที่ 450px */
  gap: 24px;
  margin-top: 2em;
}
.comparison-card {
  border: 1px solid #eee;
  border-radius: 12px;
  overflow: hidden; /* To keep border-radius on header */
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.comparison-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}
.comparison-card .card-header-od, .comparison-card .card-header-loan {
  padding: 16px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
}
.comparison-card .card-header-od { background-color: #3b5998; } /* Example color */
.comparison-card .card-header-loan { background-color: #25D366; } /* Example color */
.comparison-card .card-header-od h4, .comparison-card .card-header-loan h4 { margin: 0; font-size: 1.1em; }
.comparison-card .styled-list { list-style: none; padding: 16px; margin: 0; font-size: 1em; }
.comparison-card .styled-list li { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.comparison-card .styled-list li i { color: var(--brand); margin-top: 5px; }

@media(max-width: 600px) {
  .comparison-grid { grid-template-columns: 1fr; }
  .article-body { padding: 24px; }
}

.contact-form, .form-instructions-card {
  opacity: 0;
  transform: translateY(20px);
  animation: fade-in-up 0.8s ease-out forwards;
}
/* HR Definitions Grid */
.hr-definitions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 2em 0;
}
.hr-card {
  border: 1px solid #eee;
  border-radius: 12px;
  text-align: center;
  padding: 20px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hr-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}
.hr-card-header {
  font-size: 2em;
  font-weight: 700;
  margin-bottom: 8px;
}
.hr-card-header.hrm-header { color: #2980b9; }
.hr-card-header.hrd-header { color: #27ae60; }
.hr-card-header.od-header { color: #d35400; }
.hr-card-title { font-weight: 600; color: var(--text); margin-bottom: 12px; }
.hr-card p { font-size: 0.9em; color: var(--muted); margin: 0; line-height: 1.6; }

@media(max-width: 768px) {
  .hr-definitions-grid { grid-template-columns: 1fr; }
}

/* FAQ Page Styles */
.faq-container {
  max-width: 840px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.faq-item {
  background-color: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  transition: box-shadow 0.3s ease;
}
.faq-item:hover {
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}
.faq-item[open] {
  border-color: var(--brand);
}
.faq-item summary {
  font-size: 1.2em;
  font-weight: 600;
  padding: 20px;
  cursor: pointer;
  list-style: none; /* Remove default marker */
  position: relative;
  padding-right: 40px; /* Space for the icon */
}
.faq-item summary::-webkit-details-marker { display: none; } /* Hide marker for Chrome/Safari */
.faq-item summary::after {
  content: '\f078'; /* Font Awesome chevron-down */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  transition: transform 0.3s ease;
  color: var(--muted);
}
.faq-item[open] summary::after {
  transform: translateY(-50%) rotate(-180deg);
  color: var(--brand);
}
.faq-content {
  padding: 0 20px 20px 20px;
  line-height: 1.7;
  color: var(--muted);
}
.faq-content ul { padding-left: 20px; }

/* Map Section */
.map-container {
  position: relative;
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}
.map-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* New Map & Contact Grid Layout */
.map-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: center;
  text-align: left;
}

.contact-info-box {
  background-color: #fff;
  padding: 24px 32px;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.07);
  border: 1px solid #f0f0f0;
  height: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.contact-info-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 35px rgba(0,0,0,0.1);
}
.contact-info-box h3 {
  margin: 0 0 24px 0;
  font-size: 1.5em;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
}
.contact-info-box h3 i {
  color: var(--brand);
}
.contact-info-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.contact-info-box li {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  font-size: 1.05em;
  line-height: 1.6;
}
.contact-info-box li i {
  color: var(--muted);
  font-size: 1.2em;
  margin-top: 5px;
  width: 20px; /* Set a fixed width for alignment */
  text-align: center;
}
.contact-info-box a {
  font-weight: 600;
  transition: color 0.3s ease;
}
.contact-info-box a:hover {
  color: #222;
  text-decoration: underline;
}

@media(max-width: 900px) {
  .map-contact-grid {
    grid-template-columns: 1fr; /* Stack on smaller screens */
  }
}