/* =========================
   FLY TECH Theme (CI #00A987)
   ========================= */

:root {
  /* CI */
  --brand: #00A987;

  /* Brand scale */
  --primary: #00A987;
  --primary-dark: #007E66;
  --primary-deeper: #005E4C;
  --primary-soft: #DFF7F1;
  --primary-glow: rgba(0, 169, 135, 0.35);

  /* Neutral */
  --accent: #111111;
  --text-main: #1f2933;
  --text-muted: #6b7280;

  /* Dark surfaces */
  --bg-dark: #050b0a;
  --surface-dark: rgba(10, 20, 18, 0.92);
  --surface-card: rgba(15, 23, 42, 0.9);

  /* Border / radius / shadow */
  --border-soft: #e5e7eb;
  --radius-lg: 18px;
  --shadow-soft: 0 18px 40px rgba(0, 0, 0, 0.12);
  --max-width: 1200px;

  /* Semantic */
  --success: var(--primary);
  --success-ink: #032b24;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Noto Sans Thai", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  line-height: 1.6;
  color: var(--text-main);
  background-color: #ffffff;
}


img {
  max-width: 100%;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ให้เลื่อนหน้าแบบนุ่ม ๆ เวลา click เมนู */
html {
  scroll-behavior: smooth;
}

/* เผื่อระยะให้ไม่โดน header บังเวลาเลื่อนไปยังแต่ละ section */


/* =========================
   HEADER
   ========================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 9999; /* ให้ชัวร์ว่าไม่ถูก section อื่นทับ */
  background: rgba(10, 20, 18, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  /* ✅ เอาเส้นสีขาวใต้ header ออก */
  border-bottom: none !important;

  /* ใช้เงาแบบนุ่มแทนเส้น */
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.5rem;
  max-width: var(--max-width);
  margin: 0 auto;
}

.logo-area {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: #ffffff;
}

.logo-box {
  width: 75px;
  height: 75px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1rem;
  color: var(--primary-dark);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);
}

.logo-box img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  height: auto;
  width: auto;
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.logo-text span:first-child {
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.logo-text span:last-child {
  font-size: 0.97rem;
  opacity: 0.8;

  /* ให้เข้ากับ CI */
  color: var(--primary);
  opacity: 0.95;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.main-nav a {
  font-size: 0.95rem;
  color: #e5e7eb;
  transition: color 0.2s ease, transform 0.2s ease;
}

.main-nav a:hover {
  color: #ffffff;
  transform: translateY(-1px);
}

.header-cta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.phone-label {
  font-size: 0.8rem;
  color: #9ca3af;
}

.btn-phone {
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(248, 250, 252, 0.38);
  color: #ffffff;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;

  /* CI gradient */
  background: linear-gradient(
    135deg,
    rgba(0, 169, 135, 0.22),
    rgba(0, 126, 102, 0.85)
  );
}

.btn-phone span {
  font-weight: 600;
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: #ffffff;
  font-size: 1.4rem;
  cursor: pointer;
}

/* =========================
   HERO
   ========================= */

.hero {
  background: radial-gradient(
      circle at top left,
      rgba(0, 169, 135, 0.25),
      transparent 55%
    ),
    linear-gradient(180deg, #06211c, #02100d);
  color: #ffffff;
  padding: 3rem 0 3.5rem 0;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/images/hero-bg-flytech.png");
  background-repeat:no-repeat;
  background-position: left center;
  background-size: 60% auto;  /* ปรับ 60% / 50% ได้ */
  opacity: 0.10;
  mix-blend-mode: screen;
  pointer-events: none;
}

.hero-inner {
  position: relative;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
  display: grid;
  /* แบ่งพื้นที่ใหม่: ให้คอลัมน์ขวาได้กว้างขึ้น */
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.8fr);
  gap: 2rem; /* ลดช่องว่างระหว่างสองฝั่งลงนิดหน่อย */
  align-items: center;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border-radius: 999px;
  padding: 0.18rem 0.7rem;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(148, 163, 184, 0.7);
  font-size: 0.75rem;
  margin-bottom: 0.75rem;
}

.hero-badge span.tag {
  background: var(--primary);
  color: var(--success-ink);
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-weight: 600;
}

.hero-title {
  font-size: clamp(2rem, 3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1.25;
  text-transform: uppercase;
}

.hero-subtitle {
  font-size: 1.1rem;
  margin-top: 0.75rem;
  max-width: 30rem;
  color: #d1fae5;
}

.hero-copy {
  margin-top: 1rem;
  font-size: 0.95rem;
  color: #d1d5db;
  max-width: 34rem;
}

.hero-actions {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.btn-primary,
.btn-secondary {
  padding: 0.7rem 1.35rem;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease,
    background-color 0.15s ease, color 0.15s ease;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #ffffff;
  box-shadow: 0 20px 45px var(--primary-glow);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 22px 55px rgba(0, 169, 135, 0.45);
}

.btn-secondary {
  background: rgba(15, 23, 42, 0.1);
  color: #e5e7eb;
  border-color: rgba(148, 163, 184, 0.65);
}

.btn-secondary:hover {
  background: rgba(15, 23, 42, 0.3);
  transform: translateY(-1px);
}

.hero-note {
  margin-top: 1rem;
  font-size: 0.85rem;
  color: #00A987;
}

.hero-media {
  position: relative;
}

.hero-slider {
  position: relative;
  overflow: hidden;
  min-height: 480px; /* สูงใกล้เคียงของเดิม ปรับได้ */
}

.hero-card {
  background: var(--surface-card);
  border-radius: 24px;
  padding: 1.1rem 1.1rem 1.3rem;
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(148, 163, 184, 0.4);

  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* การ์ดที่กำลังแสดง */
.hero-card.is-active {
  opacity: 1;
  transform: translateX(0);
  z-index: 2;
}

/* การ์ดที่กำลังเลื่อนออกซ้าย */
.hero-card.is-leaving {
  opacity: 0;
  transform: translateX(-40px);
  z-index: 1;
}

.hero-drone-label {
  font-size: 0.8rem;
  color: #00A987;
  margin-bottom: 0.4rem;
}

.hero-drone-title {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
}

.hero-drone-tagline {
  font-size: 0.9rem;
  color: #e5e7eb;
  margin-bottom: 0.6rem;
}

.hero-drone-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: #d1d5db;
}

.hero-drone-actions .btn-link {
  color: var(--primary);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.hero-floating-pill {
  position: absolute;
  bottom: -1rem; /* หรือค่าที่คุณตั้งไว้เดิม */
  left: -0.5rem;
  background: var(--primary);
  color: var(--success-ink);
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  box-shadow: 0 18px 35px rgba(0, 169, 135, 0.45);

  z-index: 10; /* ให้ pill ลอยอยู่ด้านบนการ์ด */
}

/* =========================
   SECTIONS
   ========================= */

.section {
  padding: 3rem 0;
}

.section-header {
  text-align: center;
  margin-bottom: 1.75rem;
}

.section-title {
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
}

/* ===== (6) Services title: ทำให้หัวข้อ "บริการของเรา" เด่นขึ้น ===== */
#services .section-title{
  font-size: 2.2rem;
  font-weight: 900;
  letter-spacing: .01em;
}


.section-subtitle {
  font-size: 0.95rem;
  color: var(--text-muted);
}

/* =========================
   PRODUCTS
   ========================= */

#products .container {
  max-width: 1360px; /* ลอง 1360 ก่อน ถ้าอยากกว้างอีกใช้ 1440 ได้ */
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem; /* ลดนิดหน่อยเพื่อให้พื้นที่การ์ดเพิ่มขึ้น */
}

.product-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  padding: 0.9rem 1.1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  background: #ffffff;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.04);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.08);
}

/* แกลเลอรีรูปสินค้าในแต่ละการ์ด */
.product-gallery {
  margin: 0.4rem 0 0.8rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;

  /* กำหนดความสูงเท่ากันทุกการ์ด */
  height: 240px; /* ปรับเลขได้ตามที่ชอบ เช่น 200, 240 */

  background: #ffffff; /* ให้พื้นหลังขาวเหมือนบัตร */
}

/* รูปแต่ละสไลด์ */
.product-gallery img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* จัดให้อยู่กลางกรอบ */

  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain; /* แสดงรูปทั้งลำตัวโดรน ไม่โดนครอป */

  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}

/* รูปที่กำลังแสดง */
.product-gallery img.is-active {
  opacity: 1;
}

.product-badge {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--primary);
  background: rgba(0, 169, 135, 0.12);
  padding: 6px 14px;
  display: inline-block;
  border-radius: 12px;
  margin-bottom: 0.5rem;
  line-height: 1.4;
  white-space: normal;
  letter-spacing: 0.3px;
  word-spacing: 2px;
}

.product-name {
  font-size: 1rem;
  font-weight: 700;
}

.product-tagline {
  font-size: 0.9rem;
  color: var(--text-muted);
}

.product-price {
  margin-top: 0.4rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent);
}

.product-price span {
  color: var(--primary-dark);
  font-size: 1rem;
}

.product-footer {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
}

/* ===== Contact Strip (Hero Banner) ===== */
.contact-strip{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  position: relative;
  overflow: hidden;

  /* ✅ คุม padding ด้วยตัวแปร */
  --cs-pad-y: 60px;
  padding: var(--cs-pad-y) 0;

  color: #ffffff;
  background: linear-gradient(135deg, rgba(0,169,135,.92), rgba(0,94,76,.92));
}


/* ===== Contact Strip (Hero Banner) — FIX: background consistent + bigger QR ===== */
.contact-strip.contact-strip--hero{
  /* ✅ ขยาย QR ให้ใหญ่ขึ้นเหมือนแบบที่ต้องการ */
  --cs-qr-size: 280px; /* ปรับเป็น 260/300 ได้ตามชอบ */

  /* ✅ บังคับโทนพื้นหลังเขียวแบบภาพ 1 (กันโดน rule อื่น override) */
  background: linear-gradient(135deg, rgba(0,169,135,.92), rgba(0,94,76,.92)) !important;
  color: #ffffff;
}

/* ✅ บังคับ overlay/ภาพพื้นหลังของ HERO ให้เหมือนกันทุกหน้า */
.contact-strip.contact-strip--hero::before{
  background-image: url("/images/contact-strip-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: .18;
  filter: saturate(1.05) contrast(1.05);
}

.contact-strip.contact-strip--hero::after{
  background: radial-gradient(circle at 35% 55%, rgba(0,0,0,.18), rgba(0,0,0,.10) 55%, rgba(0,0,0,.18));
}

/* ===== Product head: logo on RIGHT ===== */
.product-head.product-head--right-logo{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

/* กันข้อความดันล้น */
.product-head-text{
  min-width: 0;
  flex: 1 1 auto;
}

/* โลโก้ด้านขวา */
.product-dji-logo{
  width: 64px;          /* ปรับ 64–90 ได้ */
  height: auto;
  flex: 0 0 auto;
  border-radius: 16px;
  box-shadow: 0 12px 26px rgba(0,0,0,.18);
  margin-left: 8px;     /* เว้นจากข้อความเล็กน้อย */
}

/* มือถือ: ถ้าพื้นที่แคบ ให้โลโก้ลงบรรทัดใหม่ (ดูสะอาดกว่าเบียดกัน) */


/* ภาพพื้นหลัง (ใส่ไฟล์ตามพาธนี้ ถ้าไม่มีจะเห็นเป็น gradient) */
.contact-strip::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: url("/images/contact-strip-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: .18;
  filter: saturate(1.05) contrast(1.05);
  transform: scale(1.02);
  pointer-events:none;
}

/* เงาเข้มเล็กน้อยให้ตัวหนังสือเด่น */
.contact-strip::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 35% 55%, rgba(0,0,0,.18), rgba(0,0,0,.10) 55%, rgba(0,0,0,.18));
  pointer-events:none;
}

.contact-strip-inner{
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 18px;

  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
}

/* ซ้าย: รูป + ข้อความ */
.contact-strip-left{
  display: flex;
  align-items: center;
  gap: 22px;
  min-width: 0;
}

/* รูปพนักงานแบบวงกลม */
.contact-strip-person{
  width: 250px;
  height: 250px;
}

.contact-strip-person img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center ; /* หรือ center 20% */
}

/* ตัวหนังสือ */
.contact-strip-copy{ min-width: 0; }

.contact-strip-head{
  font-size: clamp(10px, 6vw, 86px); /* ลดโอกาสตัดบรรทัดตามความกว้างจอ */
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: .01em;
  text-shadow: 0 10px 24px rgba(0,0,0,.22);
  white-space: nowrap;          /* ไม่ให้ขึ้นบรรทัดใหม่ */
  word-break: keep-all;
}

.contact-strip-sub{
  margin-top: 10px;
  font-size: clamp(1rem, 1.7vw, 2.12rem);
  opacity: .96;
}

.contact-strip-buttons{
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* FIX: กัน overlay ทับตัวหนังสือใน Contact Strip */
.contact-strip::before,
.contact-strip::after{
  z-index: 0;
}

.contact-strip-inner{
  position: relative;
  z-index: 1;
}


/* ปุ่มสไตล์เดียวกับภาพที่ 2 */
.btn-contact{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.55);
  color: #ffffff;
  text-decoration: none;
  font-weight: 900;
  min-width: 150px;
  background: rgba(0,0,0,.12);
  backdrop-filter: blur(6px);
  transition: transform .15s ease, background .15s ease;
}

.btn-contact:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.12);
}

/* ปุ่มโทร: พื้นขาว ตัวเขียว */
.btn-contact--primary{
  background: #ffffff;
  color: var(--primary-deeper, #005E4C);
  border-color: rgba(255,255,255,.85);
}

.btn-contact--primary:hover{ background: #ffffff; }

/* ขวา: QR */
.contact-strip-qr{
  width: var(--cs-qr-size, 210px);
  height: var(--cs-qr-size, 210px);
  border-radius: 22px;
  background: #ffffff;
  padding: 10px;
  box-shadow: 0 18px 45px rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.55);
  display: grid;
  place-items: center;
  transition: transform .15s ease;
}


.contact-strip-qr-link{
  display: block;
  border-radius: 22px;
  text-decoration: none;
  color: inherit;
}
.contact-strip-qr-link:hover .contact-strip-qr{
  transform: translateY(-2px);
}

.contact-strip-qr img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ✅ Desktop: ล็อกรูปคนให้ชิดขอบล่างของแถบเขียว */
@media (min-width: 901px){

  /* ✅ ตั้งค่าขนาดรูปคนตรงนี้จุดเดียว */
  .contact-strip{
    --cs-person-w: 320px; /* <<< เปลี่ยนเป็น 340px/360px ได้ */
    --cs-gap: 22px;
  }

  .contact-strip-inner{ align-items: stretch; }

  /* ✅ กันข้อความไม่ให้ทับรูปคน */
  .contact-strip-left{
    position: relative;
    padding-left: calc(var(--cs-person-w) + var(--cs-gap));
    height: 100%;
  }

  /* ✅ รูปคนใหญ่ขึ้น */
  .contact-strip-person{
    position: absolute;
    left: 0;
    bottom: calc(-1 * var(--cs-pad-y)); /* ชิดขอบล่างกรอบเขียวเหมือนเดิม */
    width: var(--cs-person-w);
    height: auto;

    background: transparent;
    border-radius: 0;
    overflow: visible;
    display: block;
  }

  .contact-strip-person img{
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center bottom;
  }
}

/* มือถือ: เรียงเป็นแนวตั้ง */


.btn-outline {
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--primary-dark);
  background: transparent;
  color: var(--primary-dark);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease,
    transform 0.15s ease;
  letter-spacing: 0.02em;
}

.btn-yun {
  padding: 0.7rem 1.35rem;
  border-radius: 999px;
  border: 1px solid var(--primary-dark);
  background: transparent;
  color: var(--primary-dark);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease,
    transform 0.15s ease;
  letter-spacing: 0.02em;
}

.btn-calc{
  padding: 0.7rem 1.35rem;
  border-radius: 999px;
  border: 1px solid rgba(0,169,135,.35);
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
  letter-spacing: 0.02em;
}


.btn-outline:hover {
  background: var(--primary-dark);
  color: #ffffff;
  transform: translateY(-1px);
}

/* =========================
   LAYOUT / TEXT
   ========================= */

.split-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.5fr);
  gap: 2rem;
  align-items: center;
}

.text-muted {
  color: var(--text-muted);
  font-size: 0.95rem;
}

.highlight-quote{
  margin-top: 0.75rem;
  padding-left: 1.2rem;
  border-left: 4px solid var(--primary, #00A987);
  padding-left: 16px; /* ระยะจากเส้นถึงเนื้อหา */
}

.highlight-quote ul{
  margin: 0;
  padding-left: 22px; /* ✅ ถอย bullet เข้าไปไม่ทับเส้น */
  list-style-position: outside;
}


/* =========================
   SERVICES
   ========================= */

.services-grid {
  margin-top: 1.7rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.service-card {
  background: #ffffff;
  border-radius: var(--radius-lg);
  padding: 0.9rem 0.9rem 1rem;
  border: 1px solid var(--border-soft);
  text-align: center;
  font-size: 0.85rem;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.03);
}

.service-icon {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  margin: 0 auto 0.4rem;
  background: var(--primary-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--primary-dark);
}

.service-title {
  font-weight: 600;
  margin-bottom: 0.1rem;
}

/* =========================
   ABOUT & CTA
   ========================= */

.about-card {
  border-radius: 24px;
  padding: 4.9rem;

  /* ปรับโทนเขียวให้เป็น CI */
  background: linear-gradient(
      120deg,
      rgba(0, 169, 135, 0.08),
      rgba(8, 47, 35, 0.9)
    ),
    #020617;

  color: #e5e7eb;
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 1.2fr);
  gap: 1.5rem;
  align-items: center;
  box-shadow: var(--shadow-soft);
}

.about-card h3 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}

.about-card p {
  font-size: 0.9rem;
  color: #d1d5db;
}

.about-quote {
  margin-top: 0.9rem;
  font-size: 1.1rem;
  font-style: italic;
  color: #bbf7d0;
}

.about-meta {
  margin-top: 1rem;
  font-size: 0.88rem;
  color: #cbd5f5;
}

.about-map {
  border-radius: 24px;
  overflow: hidden;
  background: #000;
  min-height: 220px;
}

.about-map iframe {
  width: 100%;
  height: 100%;
  min-height: 220px;
  border: 0;
  display: block;
  border-radius: inherit;
}

/* CTA BAND */

.cta-band {
  margin-top: 1rem;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--primary-dark), var(--primary-deeper));
  padding: 1.8rem 1.6rem;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.15fr);
  gap: 1rem;
  align-items: center;
  color: #ecfdf5;
  box-shadow: var(--shadow-soft);
}

/* แถวไอคอนโซเชียลใน CTA */
.cta-social {
  margin-top: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.cta-social-label {
  font-size: 0.85rem;
  opacity: 0.9;
}

.cta-social-icons {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ไอคอนพื้นกลม */
.social-icon {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

/* ถ้าจะใช้เป็นรูปภาพโลโก้ไฟล์โปร่งใส */
.social-icon::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* กำหนดโลโก้แต่ละแพลตฟอร์ม */
.social-facebook::before {
  background-image: url("/images/social/icon-facebook.png");
}

.social-youtube::before {
  background-image: url("/images/social/icon-youtube.png");
}

.social-tiktok::before {
  background-image: url("/images/social/icon-tiktok.png");
}

/* เอฟเฟกต์ hover */
.social-icon:hover {
  background: rgba(15, 23, 42, 0.6);
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.3);
}

.cta-title {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
}

.cta-subtitle {
  font-size: 0.95rem;
  opacity: 0.9;
}

.cta-actions {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.cta-right {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.line-card {
  background: rgba(15, 23, 42, 0.26);
  border-radius: 20px;
  padding: 1rem 6.2rem;
  min-width: 260px;
  font-size: 0.85rem;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
}

.line-card-text {
  flex: 1;
}

.line-id {
  font-weight: 600;
  margin-top: 0.1rem;
}

/* กล่อง QR ด้านในกรอบดำ */
.line-card-qr {
  /*width: 96px;*/
  /*height: 96px;*/
  width: 180px;
  height: 180px;
  border-radius: 16px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.line-card-qr img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =========================
   FOOTER
   ========================= */

.site-footer {
  background: #020617;
  color: #9ca3af;
  padding: 1.6rem 0 2rem 0;
  margin-top: 3rem;
  font-size: 0.82rem;
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}

.footer-company {
  max-width: 420px;
}

.footer-contact {
  text-align: right;
}

.footer-contact a {
  color: #e5e7eb;
  font-weight: 600;
}

/* =========================
   RESPONSIVE
   ========================= */


/* =========================
   PRODUCT DETAIL PAGE
   ========================= */

.breadcrumb {
  display: flex;
  gap: .5rem;
  align-items: center;
  font-size: .9rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}
.breadcrumb a { color: var(--primary-dark); font-weight: 600; }
.breadcrumb span { opacity: .8; }

.product-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}

.product-detail-main {
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  background: #fff;
  box-shadow: 0 10px 25px rgba(15,23,42,0.05);
}
.product-detail-main img {
  width: 100%;
  height: auto;
  display: block;
}

.product-detail-thumbs {
  display: flex;
  gap: .6rem;
  margin-top: .8rem;
}
.thumb {
  border: 1px solid var(--border-soft);
  background: #fff;
  border-radius: 14px;
  padding: .35rem;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease;
}
.thumb:hover { transform: translateY(-1px); border-color: rgba(0,169,135,.5); }
.thumb.is-active { border-color: var(--primary); box-shadow: 0 10px 18px rgba(0,169,135,.18); }
.thumb img { width: 70px; height: 52px; object-fit: contain; }

.product-detail-title {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: .02em;
  margin-top: .35rem;
}
.product-detail-subtitle {
  color: var(--text-muted);
  margin-top: .5rem;
  font-size: .98rem;
}

.price-box {
  margin-top: 1rem;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  padding: .9rem 1rem;
  background: #fff;
}
.price-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .45rem 0;
  border-bottom: 1px dashed rgba(17,17,17,.08);
}
.price-row:last-child { border-bottom: 0; }
.price-label { color: var(--text-muted); font-weight: 600; }
.price-value { font-weight: 800; color: var(--accent); }

.product-detail-actions {
  margin-top: 1rem;
  display: flex;
  gap: .7rem;
  flex-wrap: wrap;
}

.spec-grid {
  margin-top: 1.2rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}
.spec-item {
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  padding: .75rem .85rem;
  background: var(--primary-soft);
}
.spec-k { font-size: .8rem; color: var(--primary-dark); font-weight: 800; }
.spec-v { margin-top: .25rem; font-weight: 700; color: var(--text-main); }

.detail-sections {
  margin-top: 2rem;
  display: grid;
  gap: 1rem;
}
.detail-card {
  border: 1px solid var(--border-soft);
  border-radius: 24px;
  padding: 1.2rem 1.2rem;
  background: #fff;
  box-shadow: 0 10px 25px rgba(15,23,42,0.03);
}
.detail-card h2 {
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: .6rem;
}

.bundle-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .9rem;
}
.bundle-item {
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  padding: .9rem;
  background: #fff;
}
.bundle-item h3 { font-size: 1rem; font-weight: 800; margin-bottom: .35rem; }

.faq details {
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  padding: .75rem .9rem;
  background: #fff;
}
.faq details + details { margin-top: .6rem; }
.faq summary {
  cursor: pointer;
  font-weight: 800;
  color: var(--text-main);
}
.faq p { margin-top: .5rem; }


/* =========================
   SPEC SHEET (TABLE)
   ========================= */
.specsheet-card { padding: 1.2rem 1.2rem 1.1rem; }

.specsheet-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:.6rem;
}

.btn-mini{
  padding: .38rem .9rem;
  border-radius: 10px;
  border: 1px solid rgba(0,169,135,.45);
  color: var(--primary-dark);
  background: #fff;
  font-weight: 700;
  font-size: .85rem;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.btn-mini:hover{
  transform: translateY(-1px);
  border-color: rgba(0,169,135,.8);
  box-shadow: 0 10px 18px rgba(0,169,135,.12);
}

.specsheet{
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
}

.spec-table{
  width:100%;
  border-collapse: collapse;
  font-size: .92rem;
}

.spec-table td{
  padding: .62rem .9rem;
  border-bottom: 1px solid rgba(17,17,17,.06);
  vertical-align: top;
}

.spec-table tr:last-child td{ border-bottom: 0; }

.spec-key{
  width: 44%;
  color: var(--text-muted);
  font-weight: 700;
  background: rgba(248,250,252,.6);
}

.spec-val{
  font-weight: 650;
  color: var(--text-main);
}

.spec-table tbody tr:nth-child(even) .spec-val{
  background: #fff;
}

/* section header row */
.spec-section td{
  padding: .58rem .9rem;
  font-weight: 900;
  color: var(--primary-dark);
  background: var(--primary-soft);
  border-top: 3px solid rgba(0,169,135,.55);
  border-bottom: 1px solid rgba(0,169,135,.18);
}

.spec-note{ margin-top: .75rem; }

/* =========================
   BTN: CALCULATE
   ========================= */
.btn-calc{
  padding: 0.7rem 1.35rem;
  border-radius: 999px;
  border: 1px solid rgba(0,169,135,.35);
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-size: 0.95rem;
  font-weight: 700;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
}
.btn-calc:hover{
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color:#fff;
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(0,169,135,.22);
}

/* =========================
   FINANCE PAGE UI
   ========================= */

.ft-calc-head{margin-bottom:.85rem}
.ft-calc-title{font-size:1.35rem;font-weight:800;margin:0}
.ft-calc-subtitle{margin:.35rem 0 0;color:var(--text-muted);font-size:.95rem}

.ft-calc-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:.85rem;
}


.ft-field{display:flex;flex-direction:column;gap:.35rem}
.ft-label{font-size:.85rem;font-weight:800;color:var(--primary-dark)}
.ft-input{
  padding:.7rem .8rem;
  border-radius:16px;
  border:1px solid var(--border-soft);
  outline:none;
  background:#fff;
  font-size: .95rem;
}

.ft-hint{font-size:.82rem;color:var(--text-muted);margin-top:.1rem}

.ft-calc-actions{
  margin-top: 1rem;
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
}

.ft-btn{
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color:#fff;
  border:1px solid transparent;
  padding:.65rem 1.15rem;
  border-radius:999px;
  font-weight:800;
  cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.ft-btn:hover{transform: translateY(-1px); box-shadow: 0 22px 55px rgba(0,169,135,.25);}

.ft-btn-outline{
  background:#fff;
  color: var(--primary-dark);
  border:1px solid rgba(0,169,135,.45);
}
.ft-btn-outline:hover{
  box-shadow:none;
  background: var(--primary-soft);
}

.ft-btn-ghost{
  background: rgba(15,23,42,0.06);
  color: var(--text-main);
  border:1px solid rgba(148,163,184,0.45);
  text-decoration:none;
}
.ft-btn-ghost:hover{background: rgba(15,23,42,0.10); box-shadow:none;}

.ft-result{
  margin-top: 1rem;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  overflow:hidden;
  background:#fff;
}
.ft-result-row{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding:.7rem .9rem;
  border-top: 1px solid rgba(17,17,17,.06);
}
.ft-result-row:first-child{border-top:none;}
.ft-result-row strong{font-weight:900;}
.ft-result-highlight{
  background: var(--primary-soft);
}
.ft-result-highlight strong{
  color: var(--primary-dark);
  font-size: 1.05rem;
}

/* =========================
   FORCE FONT CONSISTENCY
   ========================= */
html, body {
  font-family: "Noto Sans Thai", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
}

/* ให้พวกฟอร์ม/ปุ่มใช้ฟอนต์เดียวกับเว็บ */
button, input, select, textarea {
  font: inherit;          /* สำคัญสุด: inherit ทั้ง family/size/weight */
  letter-spacing: inherit;
  color: inherit;
}

/* ทำให้น้ำหนักตัวอักษรใน label/หัวข้อไปทิศทางเดียวกัน */
.ft-label { font-weight: 800; }
.ft-calc-title { font-weight: 800; }
.ft-calc-subtitle { font-weight: 400; }

/* =========================
   STICKY FOOTER (ไม่ลอย)
   ========================= */
html, body {
  height: 100%;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1; /* ดัน footer ลงล่างเสมอ */
}

/* =========================
   PREMIUM SELECT (Native)
   ========================= */
.ft-input,
select.ft-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  width: 100%;
  padding: .78rem 2.6rem .78rem .95rem; /* เผื่อที่ลูกศร */
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;

  font-weight: 650;
  color: var(--text-main);
  box-shadow: 0 10px 20px rgba(15,23,42,.03);
  transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}

.ft-input:focus {
  border-color: rgba(0,169,135,.75);
  box-shadow: 0 0 0 5px rgba(0,169,135,.14);
}

/* ห่อ select เพื่อใส่ลูกศร custom */
.ft-select {
  position: relative;
}

.ft-select::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 10px;
  height: 10px;
  transform: translateY(-50%) rotate(45deg);
  border-right: 2px solid rgba(0,126,102,.9);
  border-bottom: 2px solid rgba(0,126,102,.9);
  pointer-events: none;
}

/* hover ให้ดูเท่ */
.ft-select:hover select.ft-input {
  border-color: rgba(0,169,135,.45);
  transform: translateY(-1px);
}


/* =========================
   HEADER SEAM FIX (บางเบราว์เซอร์มีเส้น 1px จาก subpixel/backdrop-filter)
   ========================= */
.hero { margin-top: 0 !important; }
.site-header + * { margin-top: 0 !important; }


/* =========================
   FIX: HEADER MUST NEVER DISAPPEAR
   - บางหน้า/บางเบราว์เซอร์ sticky อาจหลุดเมื่อมี parent ที่มี overflow/transform
   - เปลี่ยนเป็น fixed เพื่อให้ค้างบนจอตลอด
   ========================= */
:root{ --header-h: 68px; }

.site-header{
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
}

/* ดันเนื้อหาทั้งหน้าไม่ให้โดน header ทับ */
body{
  padding-top: var(--header-h);
}

/* เผื่อหน้าไหนไม่มี <main> แต่มี wrapper ชื่อ .page/.content */
.page, .content{
  scroll-margin-top: var(--header-h);
}

/* ปรับ scroll-margin-top ให้สัมพันธ์กับ header จริง */
#home,
#products,
#services,
#about,
#contact{
  scroll-margin-top: calc(var(--header-h) + 8px);
}


/* ===== Service icon hover: zoom image on mouse over ===== */
.service-icon{
  overflow: visible;          /* สำคัญ: ให้รูปขยายแล้วไม่โดนตัด */
}

.service-icon img{
  width: 40px;                /* ปรับได้ตามขนาดไอคอนจริง */
  height: 40px;
  transition: transform .18s ease;
  transform-origin: center;
  will-change: transform;
}

/* โฮเวอร์ที่ตัวไอคอน หรือทั้งการ์ดก็ได้ */
.service-icon:hover img,
.service-card:hover .service-icon img{
  transform: scale(1.35);
}

/* กันรูปขยายแล้วไปทับเพื่อนบ้านแบบดูไม่ชัด */
.service-card:hover{
  position: relative;
  z-index: 2;
}
/* =========================
   NEW FINANCE LAYOUT
   ========================= */
.ft-calc-card {
  background: #fff;
  border-radius: 24px;
  padding: 2.5rem;
  box-shadow: 0 15px 40px rgba(0,0,0,0.05);
  border: 1px solid var(--border-soft);
}

/* จัด Layout หลัก */
.ft-layout {
  display: grid;
  grid-template-columns: 45% 1fr; /* ปรับสัดส่วนซ้ายขวา */
  gap: 2.5rem;
  align-items: start;
}

/* ส่วนจัดการราคาและตารางสรุปผลให้อยู่ในกลุ่มเดียวกัน */
.ft-side-summary {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.5rem;
}

/* ตารางสรุปผลรูปแบบเก่า แต่ปรับให้กะทัดรัดขึ้น */
.ft-result-old-style {
  border: 2px solid var(--primary);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
}

.ft-result-header {
  background: var(--primary);
  color: #fff;
  padding: 8px;
  text-align: center;
  font-weight: 700;
  font-size: 0.9rem;
}

.ft-result-rows {
  padding: 5px 0;
}

.ft-res-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 15px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  font-size: 0.95rem;
}

.ft-res-row:last-child { border-bottom: none; }

.ft-res-row.highlight {
  background: var(--primary-soft);
  color: var(--primary-dark);
}

.ft-res-row.highlight strong {
  font-size: 1.3rem;
  font-weight: 800;
}

/* ฟอร์มกรอกข้อมูล 3 คอลัมน์ */
.ft-form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.ft-field.full-width {
  grid-column: span 3;
}

/* ปรับราคาให้ดูเด่น */
.ft-price-tag {
  background: #f1f5f9;
  border: 1px solid var(--border-soft);
  padding: 1rem;
  border-radius: 18px;
  text-align: center;
}

.ft-price-display {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--primary-dark);
}

/* สำหรับมือถือ */


.partner-head{
  text-align: center;
  margin-top: -70px;     /* เดิม 6px -> ขยับขึ้น (ปรับ -10 ถึง -24 ได้) */
  margin-bottom: 14px;
}

.partner-kicker{
  max-width: 920px;
  margin: 0 auto 18px;
  color: var(--primary, #00A987);
  font-weight: 900;
  font-size: clamp(1.05rem, 1.2vw, 1.45rem);
  line-height: 1.25;
  letter-spacing: 0.2px;
}

.partner-divider{
  width: min(860px, 92%);
  height: 2px;
  margin: 0 auto 18px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0,169,135,.9),
    transparent
  );
  border-radius: 999px;
}

/* =========================
   PARTNER LOGO SLIDER (5 visible, step 1)
   ========================= */
.partner-band{
  margin-top: 40px;
  padding: 18px 0 10px;
  background: transparent;
}

.partner-inner{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1rem;
}

.partner-title{
  text-align: center;
  font-weight: 900;
  font-size: 1.35rem;
  margin: 0 0 14px;
  color: var(--accent);
}

/* ไม่มีกรอบนอก */


/* track เป็น flex */
.partner-track{
  display: flex;
  align-items: center;
  gap: 24px;
  will-change: transform;
  transform: translateX(0);
}

/* ✅ ให้ 1 โลโก้กินพื้นที่ = 1/5 ของ viewport (พอดี 5 รูป) */
.partner-track img{
  flex: 0 0 calc((100% - (24px * 4)) / 5);  /* 5 ช่อง และมี gap 4 ช่อง */
  height: 170px;
  width: auto;
  object-fit: contain;  /* ไม่ตัด */
  display: block;
}

/* Mobile: ถ้าต้องการยังคง 5 ให้รูปเล็กลงอัตโนมัติ (หรือคุณจะเปลี่ยนเป็น 3/2 ก็ได้) */


/* =========================
   PARTNER LOGO SLIDER: เว้นโลโก้จากเฟด
   ========================= */
.partner-viewport{
  position: relative;

  /* ปรับ 2 ค่านี้ได้ตามชอบ */
  --fade: 40px;                       /* ความกว้างเฟด */
  --edge-pad: calc(var(--fade) + 10px); /* ระยะกันโลโก้ออกจากโซนเฟด */

  overflow: hidden;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;

  /* ✅ เว้นระยะซ้าย-ขวา ให้โลโก้ไม่เข้าโซนเฟด */
  padding-inline: var(--edge-pad);

  /* ✅ เฟดขอบซ้าย-ขวา (ใช้ค่าพิกเซล จะคุมได้เป๊ะ) */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--fade),
    #000 calc(100% - var(--fade)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--fade),
    #000 calc(100% - var(--fade)),
    transparent 100%
  );
}

/* (ทางเลือก) overlay เฟดเป็น fallback/ช่วยให้เห็นเฟดชัดขึ้น */
.partner-viewport::before,
.partner-viewport::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width: var(--fade);
  pointer-events:none;
  z-index: 2;
}

.partner-viewport::before{
  left:0;
  background: linear-gradient(to right, var(--page-bg, #fff), rgba(255,255,255,0));
}

.partner-viewport::after{
  right:0;
  background: linear-gradient(to left, var(--page-bg, #fff), rgba(255,255,255,0));
}

/* มือถือ: ลดระยะลงไม่ให้กินพื้นที่มาก */


/* =========================
   WHY DRONE (image left / content right)
   ========================= */
.why-drone{
  margin-top: 2.4rem;
}

.why-grid{
  display: grid;
  grid-template-columns: minmax(280px, 460px) 1fr;
  gap: 28px;
  align-items: start;
}

/* กล่องรูป */
.why-media{
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.06);
  background:
    radial-gradient(circle at 30% 25%, rgba(0,169,135,.18), transparent 55%),
    linear-gradient(180deg, rgba(0,169,135,.08), rgba(0,169,135,0));
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
}

/* รูปให้เป็นสี่เหลี่ยมพอดี ดูพรีเมียม */
.why-media img{
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 1 / 1;
  object-fit: cover; /* ถ้าอยากให้เห็นรูปเต็มๆ ไม่โดนครอป เปลี่ยนเป็น contain */
  transform: scale(1.02);
}

/* มือถือ: รูปขึ้นก่อน */


/* =========================
   PROMO SECTIONS (7-10)
   ========================= */

.hide-mob{ display: inline; }


/* --- #7 + #8 ... */
.promo-band{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  position: relative;
  overflow: hidden;
}

.promo-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 36px 18px;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 28px;
  align-items: center;
}

.promo-band--dark{
  background: #05070a;
  color: #ffffff;

  /* ✅ เว้นระยะห่าง (บน/ล่าง) จาก section อื่น ๆ */
  margin-top: 28px;
  margin-bottom: 28px;
}

.promo-band--dark::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 220px at 30% 45%, rgba(0,169,135,.35), transparent 60%),
    linear-gradient(90deg, rgba(0,0,0,.65), rgba(0,0,0,.15));
  pointer-events: none;
}

.promo-band--dark .promo-inner{
  position: relative;
  /* ✅ ให้คอลัมน์รูปใหญ่ขึ้น + เพิ่มความสูงแถบ */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  padding: 46px 18px;
}

.promo-kicker{
  margin: 0 0 10px;
  font-weight: 650;
  color: rgba(255,255,255,.88);
}

.promo-kicker-accent{
  color: var(--primary, #00A987);
  font-weight: 900;
}

.promo-quote{
  margin: 0;
  font-weight: 950;
  font-size: clamp(2.1rem, 4.4vw, 3.9rem);
  line-height: 1.02;
  color: #ffffff;
  text-shadow: 0 10px 30px rgba(0,0,0,.45);
}

.promo-quote .accent{ color: var(--primary, #00A987); }

.promo-art{
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.promo-art img{
  width: 100%;
  max-width: 520px;
  max-height: 260px;
  object-fit: contain;
  transform: translateY(10px);
  filter: drop-shadow(0 20px 45px rgba(0,0,0,.60));
}

/* ✅ #7: ขยายรูปโดรนให้ใหญ่ขึ้น (เฉพาะแถบดำ) */
.promo-band--dark .promo-art img{
  max-width: 720px;
  max-height: 360px;
  transform: translateY(16px);
}


/* --- Light banner (#8) --- */
.promo-band--light{
  background: #ffffff;
  padding: 0;
}

.promo-inner--light{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 18px;
  display: grid;
  grid-template-columns: minmax(280px, 560px) minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
}

.promo-photo{
  overflow: hidden;
  border-radius: 18px 0 0 18px;
  min-height: 260px;
}

.promo-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.promo-card{
  background: #ffffff;
  padding: 26px 28px;
  border-radius: 0 18px 18px 0;
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 18px 40px rgba(15,23,42,.08);
}

.promo-title{
  margin: 0;
  font-weight: 950;
  font-size: clamp(2rem, 4vw, 3.1rem);
  line-height: 1.05;
  color: #0f172a;
}

.promo-title .accent{ color: var(--primary, #00A987); }

.promo-sub{
  margin: 10px 0 0;
  font-weight: 900;
  font-size: 1.15rem;
  color: var(--primary-dark, #007E66);
}

.promo-bullets{
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.promo-bullets ul{
  margin: 0;
  padding-left: 1.05rem;
  color: #0f172a;
  font-size: 0.98rem;
}

.promo-bullets li{ margin: 6px 0; }


/* ===== Scroll Slide-in (from left) ===== */
.js-slidein{
  will-change: transform, opacity;
  transform: translateX(-38vw); /* เริ่มนอกจอซ้าย (ปรับ -20vw ถึง -60vw ได้) */
  opacity: 0;
  transition: opacity .12s linear; /* opacity ใช้ช่วยนิดเดียว */
}

/* เคารพผู้ใช้ที่ปิด motion */
@media (prefers-reduced-motion: reduce){
  .js-slidein{
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
}

/* ===== Drone floating (hover-in-place) ===== */
.promo-art{
  position: relative;
  overflow: visible; /* กันโดนตัดตอนลอย */
}

.promo-drone-float{
  will-change: transform, filter;
  transform-origin: 55% 60%;
  animation: drone-float 3.6s ease-in-out infinite;
  filter: drop-shadow(0 22px 45px rgba(0,0,0,.55));
}

/* ลอยขึ้นลง + แกว่งนิดๆ เหมือนกำลังบินอยู่กับที่ */
@keyframes drone-float{
  0%   { transform: translateY(0) translateX(0) rotate(-1deg); }
  25%  { transform: translateY(-10px) translateX(4px) rotate(1.2deg); }
  50%  { transform: translateY(-16px) translateX(0) rotate(-0.6deg); }
  75%  { transform: translateY(-8px) translateX(-4px) rotate(1deg); }
  100% { transform: translateY(0) translateX(0) rotate(-1deg); }
}

/* เพิ่ม “แรงสั่นเบาๆ” ให้ดูเหมือนแรงลม/ใบพัด (ไม่มากเกิน) */
.promo-drone-float::after{ content:none; } /* กันคนคาดหวัง pseudo */

@media (prefers-reduced-motion: reduce){
  .promo-drone-float{
    animation: none !important;
    transform: none !important;
  }
}

.promo-drone-float{ animation-play-state: paused; }
.promo-drone-float.is-flying{ animation-play-state: running; }


/* --- #9: Finance Offer --- */
.finance-offer{
  padding: 42px 0 54px;
  background: #ffffff;
}

.finance-title{
  text-align: center;
  font-size: 1.85rem;
  font-weight: 950;
  margin: 0 0 18px;
  color: #0f172a;
}

.finance-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.finance-item{
  background: #ffffff;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 18px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  box-shadow: 0 12px 28px rgba(15,23,42,.06);
  text-align: center;
}

.finance-icon{ color: var(--primary, #00A987); }

.finance-text strong{
  display: block;
  font-size: 1.05rem;
  color: #0f172a;
}

.finance-cta{ margin-top: 18px; text-align: center; }


.finance-icon{
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.finance-icon-img{
  width: 90px;
  height: 90px;
  object-fit: contain;
  display: block;
  transition: transform .18s ease;
  transform-origin: center;
  will-change: transform;
}

/* โฮเวอร์ที่ตัวไอคอน หรือทั้งการ์ดก็ได้ */
.finance-icon:hover img,
.service-grid:hover .service-icon img{
  transform: scale(1.35);
}

/* กันรูปขยายแล้วไปทับเพื่อนบ้านแบบดูไม่ชัด */
.service-grid:hover{
  position: relative;
  z-index: 2;
}

/* --- #10: Contact Banner (QR + Person) --- */
.contact-strip--banner{
  width: 100vw;
  margin-left: calc(50% - 50vw);

  /* ปรับค่า 3 จุดนี้ได้เลย */
  /*
    NOTE: เปลี่ยนชื่อ “ตัวแปร” ให้แยกเฉพาะแบนเนอร์ (ไม่ชนกับ strip อื่นในหน้าเดียว)
    - csb = contact strip banner
  */
  --csb-pad-y: 34px;      /* ความสูง Padding บน/ล่างของแบนเนอร์ */
  --csb-qr-size: 260px;   /* ขนาด QR (กว้าง=สูง) */
  --csb-person-w: 300px;  /* ความกว้างรูปคน */
  --csb-person-h: 300px;  /* ความสูงรูปคน */
  --csb-person-nudge: 14px; /* ดันรูปคนให้ชิดล่างเพิ่ม (กันไฟล์ PNG มีขอบใส) */

  padding: var(--csb-pad-y) 0;
  position: relative;
  overflow: hidden;

  /* ✅ โทนเขียวเหมือนภาพ 1 (ยังคงรูปพื้นหลังไว้ แต่ tint ให้เป็นเขียว) */
  background:
    linear-gradient(90deg, rgba(0,169,135,.88), rgba(0,94,76,.55)),
    url("/images/contact-bg.jpg") center/cover no-repeat;
}

/* โครงแบนเนอร์ */
.contact-strip--banner .contact-strip-inner--banner{
  width: min(1200px, 92vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) var(--csb-qr-size) var(--csb-person-w);
  gap: 28px;
  align-items: center; /* ให้ Text + QR อยู่กลางเหมือนเดิม */
}

/* ซ้าย: ข้อความ + ปุ่ม */
.contact-strip--banner .contact-left{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact-strip--banner .contact-title{
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.contact-strip--banner .contact-title strong{
  font-size: clamp(34px, 4.2vw, 56px);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
  text-shadow: 0 12px 40px rgba(0,0,0,.35);
}

.contact-strip--banner .contact-title span{
  font-size: clamp(14px, 1.6vw, 20px);
  line-height: 1.35;
  color: rgba(255,255,255,.92);
  text-shadow: 0 10px 30px rgba(0,0,0,.28);
}

.contact-strip--banner .contact-actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.contact-strip--banner .contact-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(0,0,0,.18);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.contact-strip--banner .contact-pill:hover{
  transform: translateY(-2px);
  background: rgba(0,0,0,.26);
  border-color: rgba(255,255,255,.40);
}

.contact-strip--banner .contact-pill--phone{
  background: #fff;
  color: #0a6b5c;
  border-color: transparent;
}

/* Image 2: Phone button -> match Image 1 (.btn-contact--primary) */
.contact-strip--banner .contact-pill--phone{
  padding: 12px 18px;
  min-width: 150px;
  font-weight: 900;

  background: #ffffff;
  color: var(--primary-deeper, #005E4C);
  border: 1px solid rgba(255,255,255,.85);

  transition: transform .15s ease, background .15s ease;
}

.contact-strip--banner .contact-pill--phone:hover{
  transform: translateY(-1px);
  background: #ffffff;
  border-color: rgba(255,255,255,.85);
}


/* QR */
.contact-strip--banner .contact-strip-qr-link{
  display: inline-block;
  text-decoration: none;
}

.contact-strip--banner .contact-strip-qr{
  width: var(--csb-qr-size);
  height: var(--csb-qr-size);
  border-radius: 18px;
  background: #fff;
  padding: 14px;
  box-shadow: 0 18px 48px rgba(0,0,0,.28);
}

.contact-strip--banner .contact-strip-qr img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* คน: ดึงให้ชิดขอบล่าง “เฉพาะรูปคน” (Text/QR ยังอยู่กลาง) */
@media (min-width: 981px){
  .contact-strip--banner .contact-person{
    align-self: end;
    display: flex;
    justify-content: flex-end;
    margin-bottom: calc(-1 * var(--csb-pad-y) - var(--csb-person-nudge));
  }
}

.contact-strip--banner .contact-person img{
  width: var(--csb-person-w);
  height: var(--csb-person-h);
  object-fit: contain;
  object-position: center bottom;
  display: block;
}

/* มือถือ/จอเล็ก: ซ้อนลงมา */


/* ===== FIX: ให้ปุ่มโทร "ขนาดเท่ากับ" Facebook/LINE (สูง/หนาเท่ากัน) ===== */
.contact-strip--banner .contact-pill{
  /* ทำมาตรฐานร่วมให้เท่ากัน */
  padding: 10px 16px;
  font-weight: 700;
  line-height: 1;
  min-height: 44px;          /* คุมความสูงให้เท่ากัน */
}

/* ปุ่มโทร: คงสไตล์ขาว-เขียว แต่ไม่ให้ใหญ่กว่าคนอื่น */
.contact-strip--banner .contact-pill--phone{
  padding: 10px 16px;        /* ให้เท่ากับปุ่มอื่น */
  font-weight: 700;          /* ให้เท่ากับปุ่มอื่น */
  min-width: auto;           /* เอา min-width ที่ทำให้ใหญ่เกินออก */
  background: #fff;
  color: var(--primary-deeper, #005E4C);
  border-color: rgba(255,255,255,.85);
}

/* =========================
   SCROLL REVEAL: Contact Strips (Hero + Banner) - Premium Slow
   ========================= */
.js-reveal [data-reveal]{
  opacity: 0;
  transform: translateY(12px);
  filter: blur(2px);
  will-change: transform, opacity, filter;

  transition:
    opacity 1.1s cubic-bezier(.16,1,.3,1),
    transform 1.1s cubic-bezier(.16,1,.3,1),
    filter 1.1s cubic-bezier(.16,1,.3,1);
}

/* เข้าเฟรม: ซ้าย/ขวา ให้ดูแพงขึ้น */
.contact-strip--hero.js-reveal .contact-strip-person[data-reveal],
.contact-strip--hero.js-reveal .contact-strip-copy[data-reveal]{
  transform: translateX(-16px);
}
.contact-strip--hero.js-reveal .contact-strip-qr-link[data-reveal]{
  transform: translateX(16px);
}

/* Banner: ข้อความมาจากซ้าย, QR กลางขยับขึ้น, รูปคนมาจากขวา */
.contact-strip--banner.js-reveal .contact-left[data-reveal]{
  transform: translateX(-18px);
}
.contact-strip--banner.js-reveal .contact-strip-qr-link[data-reveal]{
  transform: translateY(14px) scale(.985);
}
.contact-strip--banner.js-reveal .contact-person[data-reveal]{
  transform: translateX(18px);
}

.js-reveal.is-inview [data-reveal]{
  opacity: 1;
  transform: translate(0,0) scale(1);
  filter: blur(0);
}

/* ===== Stagger (Hero) ===== */
.contact-strip--hero.js-reveal .contact-strip-person{ transition-delay: .10s; }
.contact-strip--hero.js-reveal .contact-strip-head{   transition-delay: .30s; }
.contact-strip--hero.js-reveal .contact-strip-sub{    transition-delay: .50s; }
.contact-strip--hero.js-reveal .contact-strip-buttons{transition-delay: .70s; }
.contact-strip--hero.js-reveal .contact-strip-qr-link{transition-delay: .90s; }

/* ===== Stagger (Banner) ===== */
.contact-strip--banner.js-reveal .contact-left{        transition-delay: .12s; }
.contact-strip--banner.js-reveal .contact-title strong{transition-delay: .28s; }
.contact-strip--banner.js-reveal .contact-title span{  transition-delay: .44s; }
.contact-strip--banner.js-reveal .contact-actions{     transition-delay: .60s; }
.contact-strip--banner.js-reveal .contact-strip-qr-link{transition-delay: .78s; }
.contact-strip--banner.js-reveal .contact-person{      transition-delay: .96s; }

/* ปุ่มให้ “pop” เบา ๆ */
.contact-strip--banner.js-reveal .contact-actions .contact-pill,
.contact-strip--hero.js-reveal .contact-strip-buttons .btn-contact{
  transform: translateY(10px) scale(.985);
}
.contact-strip--banner.js-reveal.is-inview .contact-actions .contact-pill,
.contact-strip--hero.js-reveal.is-inview .contact-strip-buttons .btn-contact{
  transform: translateY(0) scale(1);
}

/* เคารพผู้ใช้ที่ปิด motion */
@media (prefers-reduced-motion: reduce){
  .js-reveal [data-reveal]{
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* =========================================================
   CONTACT BANNER (ปรึกษาฟรี แบนเนอร์)
   - คุมขนาดรูปคน/QR
   - ให้ "รูปคน" ชิดขอบล่าง โดยไม่ดันองค์ประกอบอื่น
   ========================================================= */

.contact-strip--banner{
  /* NOTE: โซนนี้เดิมใช้ตัวแปรชื่อกว้าง ๆ (qr-size/person-w ฯลฯ)
     เปลี่ยนเป็นชุดตัวแปรเฉพาะแบนเนอร์ (csb-*) เพื่อไม่ชนกับ strip อื่นในหน้าเดียว */
  --csb-pad-y: 34px;
  --csb-person-nudge: 0px;   /* ปรับได้: ค่าติดลบ = ลงล่างเพิ่ม */
  --csb-person-w: 360px;     /* ปรับขนาดรูปคน */
  --csb-person-h: 340px;     /* ปรับขนาดรูปคน */
  --csb-qr-size: 250px;      /* ปรับขนาด QR */
  --csb-qr-pad: 12px;        /* ระยะห่างกรอบ QR */
  padding: var(--csb-pad-y) 0 !important;
}

/* ให้แบนเนอร์จัดวางกลางเหมือนเดิม */
.contact-strip--banner .contact-strip-inner--banner{
  align-items: center !important;
}

/* เฉพาะรูปคน: ดึงให้ชิดขอบล่างของแบนเนอร์ */
.contact-strip--banner .contact-person{
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  align-self: flex-end; /* ติดขอบล่างของแถบ */
  height: 100%;
  margin-bottom: calc(var(--csb-pad-y) * -1 + var(--csb-person-nudge));
  pointer-events: none;
}

.contact-strip--banner .contact-person img{
  width: var(--csb-person-w);
  height: var(--csb-person-h);
  object-fit: contain;
  object-position: center bottom;
  display: block;
}

/* ขยาย QR */
.contact-strip--banner .contact-strip-qr{
  width: var(--csb-qr-size);
  height: var(--csb-qr-size);
  padding: var(--csb-qr-pad);
}

/* Mobile: ไม่ดึงลงล่าง (กันหลุดเฟรม) */


/* =========================================================
   ABOUT + CTA + FOOTER: เต็มจอ, ติดกัน, เนื้อหากลางหน้าจอ
   (พื้นหลังยืดเต็มจอ แต่คุมความกว้างเนื้อหาด้วย --max-width)
   ========================================================= */

/* ตัด padding/margin รอบ section เพื่อให้ 3 ส่วน "ติดกัน" */
.section#about{ padding: 0 !important; margin: 0 !important; }
.site-footer{ margin-top: 0 !important; }

/* ทำให้ container ภายใน about เป็น full width */
#about > .container{
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* สูตรคุมระยะขอบ: ถ้าจอกว้างเกิน --max-width จะทำให้เนื้อหาถูก "จัดกึ่งกลาง" แบบพรีเมียม */
#about .about-card,
#about .cta-band{
  width: 100%;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}

/* ===== ABOUT ===== */
#about .about-card{
  padding-block: clamp(2.6rem, 4vw, 4.8rem);
  padding-inline: max(1.5rem, calc((100vw - var(--max-width)) / 2));
}

#about .about-card p{
  margin: 0.4rem 0;      /* ให้เป็น "ย่อหน้า" ชัดเจน */
  line-height: 1.65;
}

/* ===== CTA ===== */
#about .cta-band{
  padding-block: clamp(1.8rem, 3vw, 2.4rem);
  padding-inline: max(1.5rem, calc((100vw - var(--max-width)) / 2));
}

/* ป้องกันช่องว่างไม่พึงประสงค์จากองค์ประกอบสุดท้าย */
#about .cta-band *:last-child{ margin-bottom: 0; }

/* =========================
   Floating Chaty (FT)
   - white button + colored ring like ref image
   - gold hover ring (smaller) on ALL buttons incl. main
   ========================= */

:root{
  /* Sizes */
  --ft-size-item: 56px;
  --ft-size-main: 56px;

  --ft-gap: 14px;
  --ft-right: 22px;
  --ft-bottom: 22px;

  /* Base */
  --ft-shadow: 0 10px 28px rgba(0,0,0,.18);

  /* Channel colors (พื้นหลังปุ่ม) */
  --ft-line:  #00C300;  /* LINE */
  --ft-msg:   #1877F2;  /* Messenger */
  --ft-phone: #3d4240;  /* Phone */
  --ft-main:  #00A987;  /* Main */

  /* Gold hover ring (เล็กลง) */
  --ft-gold: #D4AF37;
  --ft-gold-w: 2px;

  /* Motion */
  --ft-rot-duration: 220ms;
  --ft-item-duration: 220ms;

  /* Tooltip */
  --ft-tip-bg: #ffffff;     /* พื้นหลังขาว */
  --ft-tip-text: #111111;   /* ตัวอักษรดำ */
  --ft-tip-border: rgba(0,0,0,.10);
}

/* Container */
.ft-chaty{
  position: fixed;
  right: var(--ft-right);
  bottom: var(--ft-bottom);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--ft-gap);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, "Noto Sans Thai", sans-serif;
}

/* Shared button base */
.ft-chaty__main,
.ft-chaty__item{
  border: 0;
  border-radius: 999px;
  box-shadow: var(--ft-shadow);
  display: grid;
  place-items: center;
  cursor: pointer;
  position: relative;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Sizes */
.ft-chaty__item{
  width: var(--ft-size-item);
  height: var(--ft-size-item);
}
.ft-chaty__main{
  width: var(--ft-size-main);
  height: var(--ft-size-main);
}

/* Background colors */
.ft-chaty__main{ background: var(--ft-main); }
.ft-chaty__menu .ft-chaty__item:nth-child(1){ background: var(--ft-line); }   /* LINE */
.ft-chaty__menu .ft-chaty__item:nth-child(2){ background: var(--ft-msg); }    /* Messenger */
.ft-chaty__menu .ft-chaty__item:nth-child(3){ background: var(--ft-phone); }  /* Phone */

/* Icon sizes */
.ft-chaty__item img{
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
}
.ft-chaty__main img{
  width: 34px;
  height: 34px;
  object-fit: contain;
  display: block;
}

/* Tooltip base */
.ft-tip{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--ft-tip-bg);
  color: var(--ft-tip-text);
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 800; /* ตัวหนา */
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;

  border: 1px solid var(--ft-tip-border);
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
}

/* Tooltip position: force ALL tooltips to the LEFT of button */
.ft-tip--left,
.ft-tip--right{
  left: auto;
  right: calc(100% + 12px);
  transform: translateY(-50%) translateX(6px);
}

/* Show tooltip on hover */
.ft-chaty__main:hover .ft-tip--right,
.ft-chaty__main:hover .ft-tip--left,
.ft-chaty__item:hover .ft-tip--left,
.ft-chaty__item:hover .ft-tip--right{
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* Gold hover ring on ALL buttons */
.ft-chaty__main:hover,
.ft-chaty__item:hover{
  box-shadow:
    var(--ft-shadow),
    0 0 0 var(--ft-gold-w) rgba(212,175,55,.95);
}

/* Menu stack */
.ft-chaty__menu{
  display: grid;
  gap: var(--ft-gap);
  align-items: end;
  justify-items: end;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 160ms ease, transform 160ms ease;
}

/* Items animation */
.ft-chaty__item{
  opacity: 0;
  transform: translateY(10px) scale(.98);
  transition: opacity var(--ft-item-duration) ease, transform var(--ft-item-duration) ease;
}

/* Open state */
.ft-chaty.is-open .ft-chaty__menu{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.ft-chaty.is-open .ft-chaty__item{
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Stagger */
.ft-chaty.is-open .ft-chaty__item:nth-child(1){ transition-delay: 0ms; }
.ft-chaty.is-open .ft-chaty__item:nth-child(2){ transition-delay: 60ms; }
.ft-chaty.is-open .ft-chaty__item:nth-child(3){ transition-delay: 120ms; }

/* =========================
   Main icon: Rotate on click (outer layer)
   + Flip idle (inner layer)
   ========================= */

/* Outer rotates */
.ft-chaty__icon{
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 999px;

  transform: rotate(0deg);
  transition: transform var(--ft-rot-duration) ease;
}

/* Inner flips */
.ft-chaty__flip{
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  will-change: transform;
}

/* Two icons overlay */
.ft-main-logo,
.ft-main-x{
  position: absolute;
  inset: 0;
  margin: auto;
  display: block;
}

/* Logo */
.ft-main-logo{
  width: 34px;
  height: 34px;
  object-fit: contain;
  opacity: 1;
  transition: opacity 140ms ease;
}

/* X icon */
.ft-main-x{
  width: 28px;
  height: 28px;
  opacity: 0;
  transform: scale(.92);
  transition: opacity 140ms ease, transform 140ms ease;
}
.ft-main-x path{
  fill: none;
  stroke: #fff;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Toggle logo <-> X */
.ft-chaty.is-open .ft-main-logo{ opacity: 0; }
.ft-chaty.is-open .ft-main-x{
  opacity: 1;
  transform: scale(1);
}

/* Tooltip text toggle (ต้องมี 2 span ใน HTML) */
.ft-tip--open{ display: none; }
.ft-chaty.is-open .ft-tip--closed{ display: none; }
.ft-chaty.is-open .ft-tip--open{ display: inline-block; }

/* Idle flip (ชัดแน่นอน) + มีช่วงพัก */
@keyframes ftIdleFlipX{
  0%   { transform: scaleX(1); }
  20%  { transform: scaleX(-1); }
  40%  { transform: scaleX(1); }
  100% { transform: scaleX(1); }
}
.ft-chaty:not(.is-open) .ft-chaty__flip{
  animation: ftIdleFlipX 2.4s ease-in-out infinite;
}

/* Stop flip when open */
.ft-chaty.is-open .ft-chaty__flip{
  animation: none !important;
}

/* Rotation on click: 1 full turn */
.ft-chaty__icon.rot-cw{ animation: ftRotCW var(--ft-rot-duration) ease forwards; }
.ft-chaty__icon.rot-ccw{ animation: ftRotCCW var(--ft-rot-duration) ease forwards; }

@keyframes ftRotCW{
  from{ transform: rotate(0deg); }
  to{   transform: rotate(360deg); }
}
@keyframes ftRotCCW{
  from{ transform: rotate(0deg); }
  to{   transform: rotate(-360deg); }
}

/* Ensure flip does not fight with rotate during click animation */
.ft-chaty__icon.rot-cw .ft-chaty__flip,
.ft-chaty__icon.rot-ccw .ft-chaty__flip{
  animation: none !important;
}

/* Focus ring (gold, small) */
.ft-chaty__main:focus-visible,
.ft-chaty__item:focus-visible{
  outline: none;
  box-shadow:
    var(--ft-shadow),
    0 0 0 var(--ft-gold-w) rgba(212,175,55,.75);
}


/* ===== YouTube embed under partner logos ===== */
.partner-video{
  margin-top: 22px;
  width: min(980px, 100%);
}

.partner-video-title{
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 800;
  text-align: center;
}

.yt-embed{
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(0,0,0,.18);
  background: #000;
}

.yt-embed .yt-frame{
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

/* Center the YouTube block under partner logos */
.partner-video{
  width: min(980px, 100%);
  margin: 22px auto 0;   /* <-- จัดให้อยู่กลาง */
  display: flex;
  flex-direction: column;
  align-items: center;   /* <-- หัวข้อ + กล่องอยู่กลาง */
}

.partner-video-title{
  width: 100%;
  text-align: center;
}

.yt-embed{
  width: 100%;
}

.partner-video{
  text-align: center;
  margin: 22px auto 0;
}

.partner-video-title{
  font-weight: 800;
  margin-bottom: 14px;
}

.video-embed{
  max-width: 980px;
  margin: 0 auto;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
  background: #111;
}

.ft-video{
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16/9;
}

/* ปุ่มเปิดเสียง */
.video-unmute{
  margin-top: 12px;
  border: 0;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 800;
  cursor: pointer;
  background: #fff;
  color: #111;
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
}


/* ===== Make hero text readable (overlay + shadow + spacing) ===== */
.page-hero{
  position: relative;
  isolation: isolate; /* กัน z-index เพี้ยน */
}

/* Overlay ทับภาพเพื่อให้ข้อความเด่นขึ้น */
.page-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;

  /* ปรับความเข้มได้ที่ alpha (.78 / .55) */
  background:
    linear-gradient(90deg, rgba(0,0,0,.65), rgba(0,0,0,.25)),
    linear-gradient(180deg, rgba(0,168,138,.45), rgba(0,0,0,.15));
}

/* ดันเนื้อหาให้อยู่เหนือ overlay */
.page-hero > *{
  position: relative;
  z-index: 1;
}

/* ทำให้ตัวอักษรอ่านง่ายขึ้น */
.page-hero h1{
  text-shadow: 0 10px 28px rgba(0,0,0,.55);
  letter-spacing: .2px;
}

.page-hero p,
.page-hero .crumbs{
  text-shadow: 0 8px 22px rgba(0,0,0,.45);
}

/* ระยะบรรทัด + จำกัดความกว้างบรรทัดให้อ่านง่าย */
.page-hero p{
  line-height: 1.7;
  max-width: 62ch;
}

/* ===== Floating Back-to-Top (match Chaty style) ===== */
:root{
  --ft-top-size: 56px;
  --ft-top-left: 22px;
  --ft-top-bottom: 22px;

  /* ใช้โทนเดียวกับปุ่มหลัก chaty */
  --ft-top-bg: #00A987;

  /* ring ทอง */
  --ft-gold: #D4AF37;
  --ft-gold-w: 2px;

  --ft-shadow: 0 10px 28px rgba(0,0,0,.18);
}

.ft-top{
  position: fixed;
  left: var(--ft-top-left);
  bottom: var(--ft-top-bottom);
  z-index: 9999;

  width: var(--ft-top-size);
  height: var(--ft-top-size);
  border: 0;
  border-radius: 999px;
  background: var(--ft-top-bg);
  color: #fff;

  display: grid;
  place-items: center;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  box-shadow: var(--ft-shadow);

  /* hidden by default */
  opacity: 0;
  transform: translateY(10px) scale(.98);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}

.ft-top.is-show{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* gold hover ring */
.ft-top:hover{
  box-shadow: var(--ft-shadow), 0 0 0 var(--ft-gold-w) rgba(212,175,55,.95);
}

/* tooltip ใช้ class เดียวกับของ chaty ได้ */
.ft-top .ft-tip{
  position: absolute;
  top: 50%;
  right: calc(100% + 12px);
  transform: translateY(-50%) translateX(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;

  background: #fff;            /* ตามที่คุณขอ: พื้นหลังขาว */
  color: #111;                 /* ตัวอักษรดำ */
  font-weight: 800;            /* ตัวหนา */
  padding: 8px 10px;
  border-radius: 10px;
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
  white-space: nowrap;
}

.ft-top:hover .ft-tip{
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* ===== TOP label (replace arrow) ===== */
.ft-top__label{
  font-weight: 900;
  letter-spacing: .6px;
  font-size: 14px;
  line-height: 1;
  display: block;

  /* โยก 1 วินาที แล้วพัก (คูลดาวน์) */
  animation: ftTopWiggle 3s ease-in-out infinite; /* 3s = โยก 1s + พัก 2s */
  will-change: transform;
}

/* ช่วง 0% - 33.33% = 1 วินาทีแรก (โยก)
   ช่วงที่เหลือ = ค้างนิ่ง (คูลดาวน์) */
@keyframes ftTopWiggle{
  0%   { transform: translateX(0); }
  6%   { transform: translateX(-3px); }
  12%  { transform: translateX(3px); }
  18%  { transform: translateX(-2px); }
  24%  { transform: translateX(2px); }
  30%  { transform: translateX(-1px); }
  33.33% { transform: translateX(0); }

  100% { transform: translateX(0); } /* พักนิ่ง */
}

/* ===== Tooltip to the RIGHT of the button ===== */
.ft-top .ft-tip{
  position: absolute;
  top: 50%;
  left: calc(100% + 12px);  /* ไปอยู่ขวาของปุ่ม */
  right: auto;

  transform: translateY(-50%) translateX(-6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;

  background: #fff;
  color: #111;
  font-weight: 800;
  padding: 8px 10px;
  border-radius: 10px;
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
  white-space: nowrap;
}

.ft-top:hover .ft-tip{
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* เคารพการลด motion */
@media (prefers-reduced-motion: reduce){
  .ft-top__label{ animation: none !important; }
}

:root{
  --brand: #00A987;          /* สีหลัก */
  --brand-2: #8BE6D6;        /* สีไฮไลต์อ่อน */
  --glass: rgba(255,255,255,0.72);
  --glass-border: rgba(0,0,0,0.06);
  --shadow: 0 18px 60px rgba(0,0,0,0.10);
}

/* Overlay */
.page-loader{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  padding: 24px;

  /* พื้นหลังแบบแพง: ไล่โทน + เบลอ */
  background:
    radial-gradient(1200px 600px at 30% 20%, rgba(0,169,135,0.08), transparent 60%),
    radial-gradient(900px 500px at 70% 80%, rgba(139,230,214,0.10), transparent 55%),
    rgba(255,255,255,0.88);
  backdrop-filter: blur(10px);

  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

body.is-loading .page-loader{
  opacity: 1;
  pointer-events: all;
}

/* Card */
.loader-card{
  width: min(320px, 92vw);
  border-radius: 24px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow);
  padding: 22px 22px 18px;
  display: grid;
  justify-items: center;
  gap: 14px;

  transform: translateY(8px) scale(0.98);
  opacity: 0.98;
  animation: cardIn 360ms ease forwards;
}

@keyframes cardIn{
  to { transform: translateY(0) scale(1); opacity: 1; }
}

/* Logo zone */
.logo-wrap{
  width: 110px;
  height: 110px;
  position: relative;
  display: grid;
  place-items: center;
}

.logo-wrap img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* โลโก้ฐาน (จางๆ) ช่วยให้ดู premium ขึ้น */
.logo-base{
  opacity: 0.18; /* ถ้าอยากให้ “รูปเดียวจริงๆ” ตั้งเป็น 0 */
  filter: blur(0.1px);
}

/* Reveal layer */
.logo-reveal{
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 18px; /* ให้ขอบมนเล็กๆ ช่วยความเนียน */

  /* เริ่มซ่อนจากขวา 100% */
  clip-path: inset(0 100% 0 0);
  animation: reveal 1.35s cubic-bezier(.2,.9,.2,1) infinite;
}

/* จังหวะแพง: เติม -> พัก -> รีเซ็ต */
@keyframes reveal{
  0%   { clip-path: inset(0 100% 0 0); }
  68%  { clip-path: inset(0 0 0 0); }
  88%  { clip-path: inset(0 0 0 0); }  /* hold */
  100% { clip-path: inset(0 100% 0 0); } /* reset */
}

/* แสงวิ่ง (sheen) */
.sheen{
  position: absolute;
  inset: -20%;
  background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,0.55) 50%, transparent 60%);
  transform: translateX(-60%);
  animation: sheen 1.35s cubic-bezier(.2,.9,.2,1) infinite;
  mix-blend-mode: screen;
  pointer-events: none;
}

@keyframes sheen{
  0%   { transform: translateX(-65%); opacity: 0; }
  35%  { opacity: 0.0; }
  60%  { opacity: 1; }
  85%  { transform: translateX(65%); opacity: 0; }
  100% { transform: translateX(65%); opacity: 0; }
}

/* Progress line (indeterminate) */
.progress{
  width: 76%;
  height: 6px;
  border-radius: 999px;
  background: rgba(0,0,0,0.06);
  overflow: hidden;
}

.progress__bar{
  display: block;
  height: 100%;
  width: 48%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2), var(--brand));
  background-size: 200% 100%;
  animation: indeterminate 1.1s ease-in-out infinite;
}

@keyframes indeterminate{
  0%   { transform: translateX(-110%); background-position: 0% 50%; }
  100% { transform: translateX(240%);  background-position: 100% 50%; }
}

/* Hint text */
.loader-hint{
  font-size: 12px;
  letter-spacing: 0.6px;
  color: rgba(0,0,0,0.45);
}

/* เคารพผู้ใช้ที่ไม่ชอบแอนิเมชัน */
@media (prefers-reduced-motion: reduce){
  .loader-card{ animation: none; transform: none; }
  .logo-reveal, .sheen, .progress__bar{ animation: none; }
  .logo-reveal{ clip-path: inset(0 0 0 0); }
}

/* =========================================================
   MOBILE + CHATY PATCH (append-only; does not change PC styles)
   Added by assistant - v2
   ========================================================= */

/* ---------- 1) CONTACT STRIP (banner) - normalize phone pill size ---------- */
/* เป้าหมาย: ปุ่ม "โทร" ให้สูง/หนา/ฟอนต์ เท่ากับปุ่มอื่น (ทุกขนาดจอ) */
.contact-strip--banner .contact-pill{
  min-height: 44px;
  padding: 10px 16px;
  line-height: 1;
}
.contact-strip--banner .contact-pill--phone{
  min-width: auto !important;   /* ตัด min-width ที่ทำให้ใหญ่เกิน */
  padding: 10px 16px !important;
  font-weight: 700;             /* ให้เท่าปุ่มอื่น */
}

/* ---------- 2) CHATY - idle flip on logo (no conflict with click rotate) ---------- */
/* ปรับได้จากตัวแปรนี้ (ช้าลง = ตัวเลขมากขึ้น) */
:root{
  --ft-idle-flip-duration: 3.6s;
  --ft-idle-flip-angle: 22deg; /* ถ้าอยากฟลิปแรงขึ้น เพิ่มได้ */
}

/* ฟลิบที่ "โลโก้" เท่านั้น เพื่อไม่ชนกับ transform ของการหมุนตอนกด */
@keyframes ftIdleFlipLogo{
  0%   { transform: rotateY(0deg); }
  20%  { transform: rotateY(var(--ft-idle-flip-angle)); }
  40%  { transform: rotateY(0deg); }
  60%  { transform: rotateY(calc(var(--ft-idle-flip-angle) * -1)); }
  80%  { transform: rotateY(0deg); }
  100% { transform: rotateY(0deg); }
}

/* ทำ 3D ให้โลโก้เห็นมิติ */
.ft-chaty__main{ perspective: 900px; }
.ft-main-logo{
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transform-origin: center;
  will-change: transform;
}

/* เล่นเฉพาะตอน "ยังไม่เปิด" และ "ไม่ได้กำลังหมุนจากคลิก" */
.ft-chaty:not(.is-open) .ft-chaty__icon:not(.rot-cw):not(.rot-ccw) .ft-main-logo{
  animation: ftIdleFlipLogo var(--ft-idle-flip-duration) ease-in-out infinite;
}

/* ตอนเปิด/หรือกำลังหมุนจากคลิก -> หยุดฟลิป */
.ft-chaty.is-open .ft-main-logo,
.ft-chaty__icon.rot-cw .ft-main-logo,
.ft-chaty__icon.rot-ccw .ft-main-logo{
  animation: none !important;
}

/* คลิกแล้วหมุน 1 รอบ (คงเดิม/ย้ำอีกครั้งเผื่อถูกทับ) */
@keyframes ftRotCW{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } }
@keyframes ftRotCCW{ from{ transform: rotate(0deg); } to{ transform: rotate(-360deg); } }
.ft-chaty__icon.rot-cw{ animation: ftRotCW var(--ft-rot-duration) ease forwards; }
.ft-chaty__icon.rot-ccw{ animation: ftRotCCW var(--ft-rot-duration) ease forwards; }

/* ---------- 3) MOBILE HARDENING (only under breakpoints) ---------- */


/* =========================================================
   End patch
   ========================================================= */
/* ===== MOBILE ONLY ===== */


/* =========================
   MOBILE FIX (Image 3): Person sticks to bottom in banner
   ========================= */


/* =========================
   MOBILE FIX (Image 4): Promo text must be fully visible
   ========================= */


/* =========================================
   LOCK: CONTACT BANNER (รูปพื้นหลัง + tint เขียว) — แบบรูปที่คุณต้องการ
   ========================================= */
.contact-strip.contact-strip--banner{
  position: relative;
  overflow: hidden;

  /* สำคัญ: ใช้ absolute path กันพังเมื่ออยู่หน้า/โฟลเดอร์ย่อย */
  background-image:
  radial-gradient(
    ellipse at center,
    rgba(0,169,135,.70) 0%,
    rgba(0,94,76,.80) 70%
  ),
    url("/images/contact-bg.png");

  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: cover, cover;
  background-blend-mode: multiply;

  color: #fff;
}

/* ปิด overlay เก่าที่อาจทับภาพจนเพี้ยน */
.contact-strip.contact-strip--banner::before,
.contact-strip.contact-strip--banner::after{
  display: none !important;
}

/* กัน content ถูก layer ทับ */
.contact-strip.contact-strip--banner .contact-strip-inner--banner{
  position: relative;
  z-index: 1;
}

/* =========================================
   PREMIUM BANNER LOOK (makes it "สวย/แพง")
   ========================================= */
.contact-strip.contact-strip--banner{
  position: relative;
  overflow: hidden;

  /* ภาพเป็นบรรยากาศ: ลดความจัดของสี + เพิ่มคอนทราสต์นิด */
  background-image:
    linear-gradient(135deg, rgba(0,169,135,.55), rgba(0,94,76,.72)),
    url("/images/contact-bg.png");
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;

  /* เลิก multiply ที่ทำให้แข็งเกิน */
  background-blend-mode: normal;
}

/* วินเย็ต + โฟกัสตรงกลางให้ดูแพง และอ่านง่าย */
.contact-strip.contact-strip--banner::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 420px at 35% 50%, rgba(0,0,0,.22), transparent 60%),
    radial-gradient(1200px 520px at 70% 50%, rgba(0,0,0,.26), transparent 62%),
    linear-gradient(90deg, rgba(0,0,0,.22), rgba(0,0,0,.08), rgba(0,0,0,.22));
  pointer-events:none;
  z-index:0;
}

/* ให้คอนเทนต์อยู่เหนือ overlay */
.contact-strip.contact-strip--banner .contact-strip-inner--banner{
  position: relative;
  z-index: 1;
  align-items: center !important;
  gap: 22px !important;
}

/* ===== ทำกล่อง glass รองข้อความ (จุดที่ทำให้ดูพรีเมียมขึ้นทันที) ===== */
.contact-strip--banner .contact-left{
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border-radius: 22px;
  padding: 18px 18px;

  box-shadow: 0 18px 45px rgba(0,0,0,.18);
}

/* ข้อความใหญ่ขึ้น อ่านชัด */
.contact-strip--banner .contact-title strong{
  font-size: clamp(40px, 4.2vw, 64px) !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em;
  text-shadow: 0 12px 30px rgba(0,0,0,.35);
}

.contact-strip--banner .contact-title span{
  font-size: clamp(14px, 1.35vw, 18px) !important;
  opacity: .95;
}

/* ปุ่มให้ดูเนียนขึ้น ไม่อ้วน */
.contact-strip--banner .contact-actions{
  gap: 10px !important;
}
.contact-strip--banner .contact-pill{
  background: rgba(0,0,0,.22) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  min-height: 42px;
  padding: 9px 14px;
}
.contact-strip--banner .contact-pill--phone{
  background: #fff !important;
  color: #0a6b5c !important;
  border-color: rgba(255,255,255,.85) !important;
}

/* QR เล็กลงนิด + เงาพอดี */
.contact-strip--banner{
  --csb-qr-size: 230px; /* เดิมใหญ่ไป ทำให้บาลานซ์เสีย */
}
.contact-strip--banner .contact-strip-qr{
  width: var(--csb-qr-size) !important;
  height: var(--csb-qr-size) !important;
  border-radius: 18px;
  padding: 12px;
  box-shadow: 0 18px 40px rgba(0,0,0,.22);
}

/* รูปคน: ลดเด่นเกิน + ให้ชิดล่างแบบพอดี */
.contact-strip--banner .contact-person{
  align-self: end !important;
  margin-bottom: -10px !important;
}
.contact-strip--banner .contact-person img{
  width: min(320px, 24vw);
  height: auto;
  filter: drop-shadow(0 18px 35px rgba(0,0,0,.22));
}

/* มือถือ: จัดให้ดูพรีเมียม (ไม่ล้น) */


/* =========================================
   BANNER: Person stick to BOTTOM EDGE (Desktop only)
   ========================================= */
@media (min-width: 981px){

  /* 1) ทำให้กริดยืดสูงเต็มแถบ แล้วค่อยจัดชิดล่างได้ */
  .contact-strip.contact-strip--banner .contact-strip-inner--banner{
    align-items: stretch !important;
  }

  /* 2) ดึงรูปคนให้ชิดล่างแบบจริงจัง */
  .contact-strip.contact-strip--banner .contact-person{
    align-self: end !important;                 /* ชิดล่างในกริด */
    margin-bottom: calc(-1 * var(--csb-pad-y, 34px)) !important; /* หักลบ padding ล่างของแถบ */
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
  }

  /* 3) กันไฟล์ PNG มีขอบใสล่าง ให้แตะขอบจริงด้วย translate */
  .contact-strip.contact-strip--banner .contact-person img{
    display: block;
    transform: translateY(6px);                 /* ปรับ 0–12px ได้ */
    object-position: center bottom;
  }
}

/* =========================================
   BANNER: move buttons down + typography tune
   ========================================= */
.contact-strip--banner .contact-left{
  padding: 22px 22px !important;   /* เพิ่มพื้นที่หายใจ */
}

/* ปรับขนาดตัวอักษรในกล่อง */
.contact-strip--banner .contact-title strong{
  font-size: clamp(44px, 5vw, 64px) !important;
  line-height: 1.02 !important;
}

.contact-strip--banner .contact-title span{
  font-size: clamp(14px, 1.6vw, 18px) !important;
  line-height: 1.35 !important;
  opacity: .92;
}

/* ✅ เอาปุ่มลงมา + จัดระยะให้สวย */
.contact-strip--banner .contact-actions{
  margin-top: 18px !important;     /* ดันลง */
  gap: 12px !important;
  justify-content: flex-start;
}

/* ปรับฟอนต์/ขนาดปุ่มให้บาลานซ์ */
.contact-strip--banner .contact-pill{
  font-size: 15px !important;
  font-weight: 800 !important;
  padding: 10px 16px !important;
  min-height: 44px !important;
}

.contact-strip--banner .contact-pill--phone{
  font-size: 15px !important;
  padding: 10px 16px !important;
}

/* มือถือ: ให้ปุ่มอยู่กลาง + ขนาดกำลังดี */

/* ===== HERO FLYING (base/PC) ===== */
/* =========================================================
   HERO DRONE — Flying Motion (CSS)
   Add this at the END of your style.fixed.css (or style.css)
   ========================================================= */

/* Keep card premium & centered */
.hero-card{
  position: absolute; /* keep slider behavior */
}

/* Wrapper floats (so img transform is reserved for parallax tilt) */
.hero-drone-wrap{
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 12px 10px;
  transform-origin: 50% 60%;
  animation: ftHeroDroneFloat 4.8s ease-in-out infinite;
  will-change: transform;
}

/* The drone image */
.hero-drone-img{
  width: min(92%, 520px);
  height: auto;
  transform-origin: 50% 60%;
  filter:
    drop-shadow(0 38px 70px rgba(0,0,0,.58))
    drop-shadow(0 14px 26px rgba(0,169,135,.18));
  will-change: transform;
}

/* Add subtle rotor/air “vibe” via brightness pulse (very light) */
.hero-card.is-active .hero-drone-img{
  animation: ftHeroVibe 1.35s ease-in-out infinite;
}

/* Float path: up/down + tiny yaw */
@keyframes ftHeroDroneFloat{
  0%   { transform: translate3d(0, 10px, 0) rotateZ(-1deg); }
  50%  { transform: translate3d(0, -12px, 0) rotateZ(1deg); }
  100% { transform: translate3d(0, 10px, 0) rotateZ(-1deg); }
}

@keyframes ftHeroVibe{
  0%   { filter: drop-shadow(0 38px 70px rgba(0,0,0,.58)) drop-shadow(0 14px 26px rgba(0,169,135,.18)); }
  50%  { filter: drop-shadow(0 44px 80px rgba(0,0,0,.62)) drop-shadow(0 16px 30px rgba(0,169,135,.22)); }
  100% { filter: drop-shadow(0 38px 70px rgba(0,0,0,.58)) drop-shadow(0 14px 26px rgba(0,169,135,.18)); }
}

/* Mobile: reduce height + keep drone visually centered */


/* Respect reduced motion */

/* =========================================================
   PC: Premium Hero Badge (glass + clean)
   ========================================================= */
@media (min-width: 769px){

  .hero-badge{
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;

    padding: 10px 14px !important;
    border-radius: 999px !important;

    /* premium glass */
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    box-shadow:
      0 16px 40px rgba(0,0,0,.22),
      inset 0 1px 0 rgba(255,255,255,.06) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;

    /* typography */
    font-size: 14px !important;
    line-height: 1 !important;
    letter-spacing: .12px;
    color: rgba(255,255,255,.88) !important;

    /* keep single line on PC */
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
  }

  .hero-badge .tag{
    padding: 6px 10px !important;
    border-radius: 999px !important;

    background: rgba(0,169,135,.18) !important;
    border: 1px solid rgba(0,169,135,.35) !important;

    color: #dff7f1 !important;
    font-weight: 850 !important;
    letter-spacing: .22px;
    font-size: 13px !important;

    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  }

  .hero-badge span:not(.tag){
    color: rgba(255,255,255,.84) !important;
    font-weight: 650 !important;
    opacity: 1 !important;
  }

  /* hover เบาๆ ให้ดูแพง */
  .hero-badge:hover{
    border-color: rgba(255,255,255,.18) !important;
    box-shadow:
      0 18px 46px rgba(0,0,0,.26),
      inset 0 1px 0 rgba(255,255,255,.07) !important;
  }
}

/* =========================================================
   HERO — Premium Drone Stage (PC + Mobile)
   ========================================================= */

/* ให้ hero-media ไม่ล้น */
.hero-media{ position: relative; }

/* ลดความโล่งด้วยความสูงสมเหตุสมผล */
.hero-slider{
  position: relative;
  min-height: 520px; /* PC */
}

/* ---------- Premium Card Skin ---------- */
.hero-card--droneOnly{
  position: absolute;
  inset: 0;
  border-radius: 26px;
  overflow: hidden;

  /* premium glass + deep navy */
  background:
    radial-gradient(900px 520px at 70% 30%, rgba(0,169,135,.16), transparent 62%),
    radial-gradient(700px 420px at 35% 70%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, rgba(9,16,26,.94), rgba(6,12,20,.94));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 28px 90px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.08);
}

/* subtle texture grid */
.hero-card--droneOnly::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 38px 38px;
  opacity: .12;
  mask-image: radial-gradient(circle at 55% 52%, #000 0 55%, transparent 78%);
  pointer-events:none;
}

/* vignette ให้ดูแพง */
.hero-card--droneOnly::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 520px at 50% 55%, rgba(0,0,0,.18), transparent 60%),
    radial-gradient(1200px 700px at 50% 55%, rgba(0,0,0,.32), transparent 70%);
  pointer-events:none;
}

/* ---------- Stage layout ---------- */
.hero-stage{
  position: relative;
  height: 100%;
  padding: 18px;
  display: grid;
  place-items: center;
  z-index: 1;
}

.hero-stage__frame{
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 22px;

  /* inner frame (glass) */
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  overflow: hidden;

  display: grid;
  place-items: center;
  padding: 26px 18px 20px;
}

/* halo ใต้โดรน */
.hero-stage__halo{
  position:absolute;
  left:50%;
  top:56%;
  width: min(520px, 72%);
  height: 140px;
  transform: translateX(-50%);
  border-radius: 999px;
  background:
    radial-gradient(closest-side, rgba(0,169,135,.20), transparent 70%),
    radial-gradient(closest-side, rgba(255,255,255,.10), transparent 72%);
  filter: blur(18px);
  opacity: .55;
  pointer-events:none;
}

/* wrapper สำหรับ motion (ลอย) */
.hero-drone-wrap{
  width: 100%;
  display: grid;
  place-items: center;
  transform-origin: 50% 60%;
  animation: ftHeroFloat 4.8s ease-in-out infinite;
  will-change: transform;
}

/* รูปโดรน */
.hero-drone-img{
  width: min(520px, 92%);
  height: auto;
  object-fit: contain;
  transform-origin: 50% 60%;
  filter:
    drop-shadow(0 44px 80px rgba(0,0,0,.62))
    drop-shadow(0 16px 30px rgba(0,169,135,.18));
}

/* “vibe” เบา ๆ ให้รู้สึกใบพัด */
.hero-card--droneOnly.is-active .hero-drone-img{
  animation: ftHeroVibe 1.35s ease-in-out infinite;
}

@keyframes ftHeroFloat{
  0%   { transform: translate3d(0, 10px, 0) rotateZ(-1deg); }
  50%  { transform: translate3d(0, -12px, 0) rotateZ(1deg); }
  100% { transform: translate3d(0, 10px, 0) rotateZ(-1deg); }
}
@keyframes ftHeroVibe{
  0%   { filter: drop-shadow(0 44px 80px rgba(0,0,0,.62)) drop-shadow(0 16px 30px rgba(0,169,135,.18)); }
  50%  { filter: drop-shadow(0 52px 92px rgba(0,0,0,.66)) drop-shadow(0 18px 34px rgba(0,169,135,.22)); }
  100% { filter: drop-shadow(0 44px 80px rgba(0,0,0,.62)) drop-shadow(0 16px 30px rgba(0,169,135,.18)); }
}

/* ---------- Meta / CTA (ไม่รก แต่ไม่โล่ง) ---------- */
.hero-stage__meta{
  position: absolute;
  left: 18px;
  bottom: 18px;
  display: grid;
  gap: 6px;
  text-align: left;
  max-width: 65%;
}

.hero-stage__chip{
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(0,169,135,.16);
  border: 1px solid rgba(0,169,135,.30);
  color: rgba(255,255,255,.92);
  font-weight: 850;
  letter-spacing: .2px;
  font-size: 13px;
}

.hero-stage__sub{
  color: rgba(255,255,255,.78);
  font-weight: 650;
  font-size: 13px;
}

.hero-stage__cta{
  position: absolute;
  right: 18px;
  bottom: 18px;
  color: rgba(0,169,135,.95);
  font-weight: 800;
  font-size: 13px;
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
}
.hero-stage__cta:hover{
  background: rgba(255,255,255,.10);
}

/* ---------- Mobile: ไม่โล่ง + สัดส่วนดี ---------- */


/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .hero-drone-wrap,
  .hero-card--droneOnly.is-active .hero-drone-img{
    animation: none !important;
  }
}

/* =========================================================
   HERO STAGE — Luxury Minimal (override)
   ========================================================= */

/* ลดความรก: เอา grid texture + vignette หนาออก */
.hero-card--droneOnly::before{ display:none !important; }
.hero-card--droneOnly::after{
  background:
    radial-gradient(900px 520px at 50% 55%, rgba(0,0,0,.22), transparent 62%) !important;
}

/* การ์ดหลักให้เรียบและแพงขึ้น */
.hero-card--droneOnly{
  background:
    radial-gradient(900px 520px at 60% 35%, rgba(0,169,135,.12), transparent 60%),
    linear-gradient(180deg, rgba(8,14,22,.96), rgba(6,10,18,.96)) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 26px 80px rgba(0,0,0,.55) !important;
}

/* ตัด frame ซ้อน: ทำให้ frame เป็นแค่ layout container */
.hero-stage__frame{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 18px 18px 16px !important;
}

/* Halo เนียนขึ้น + อยู่ใต้โดรนจริง */
.hero-stage__halo{
  top: 60% !important;
  width: min(620px, 78%) !important;
  height: 160px !important;
  opacity: .45 !important;
  filter: blur(22px) !important;
}

/* โดรนต้องใหญ่ขึ้น (พระเอก) */
.hero-drone-img{
  width: min(640px, 96%) !important;
  filter:
    drop-shadow(0 52px 92px rgba(0,0,0,.62))
    drop-shadow(0 18px 34px rgba(0,169,135,.16)) !important;
}

/* แถบข้อมูลล่าง: ทำให้เป็น soft bar แบบโชว์รูม */
.hero-stage__meta{
  left: 18px !important;
  right: 18px !important;
  bottom: 16px !important;
  max-width: none !important;

  display:flex !important;
  align-items:center !important;
  justify-content: space-between !important;
  gap: 12px !important;

  padding: 12px 12px !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ชิปซ้าย: เล็ก เนี้ยบ */
.hero-stage__chip{
  padding: 8px 12px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  background: rgba(0,169,135,.14) !important;
  border: 1px solid rgba(0,169,135,.26) !important;
}

/* คำอธิบาย: นุ่มขึ้น */
.hero-stage__sub{
  font-size: 13px !important;
  color: rgba(255,255,255,.78) !important;
  font-weight: 650 !important;
}

/* CTA ให้เป็นปุ่มนุ่ม ๆ ไม่แหลม */
.hero-stage__cta{
  position: static !important;
  padding: 10px 14px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: rgba(0,169,135,.95) !important;
  font-weight: 900 !important;
}
.hero-stage__cta:hover{
  background: rgba(255,255,255,.12) !important;
}

/* =========================================================
   HERO Bottom Bar — Fix overlap + Premium (Green glow)
   ========================================================= */

.hero-stage__meta{
  position: absolute !important;
  left: 18px !important;
  right: 18px !important;
  bottom: 16px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;

  padding: 12px 12px !important;
  border-radius: 18px !important;

  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow:
    0 16px 40px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.06) !important;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  z-index: 3 !important;
}

/* กลุ่มซ้าย: chip + sub */
.hero-stage__chip{
  flex: 0 0 auto !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  background: rgba(0,169,135,.14) !important;
  border: 1px solid rgba(0,169,135,.26) !important;
  font-weight: 900 !important;
}

.hero-stage__sub{
  flex: 1 1 auto !important;
  min-width: 0 !important;             /* สำคัญ: ให้ truncate ทำงาน */
  color: rgba(255,255,255,.78) !important;
  font-weight: 650 !important;
  font-size: 13px !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* CTA: ยกเลิกการลอยทับ แล้ววางขวาใน bar */
.hero-stage__cta{
  position: static !important;
  margin-left: auto !important;
  flex: 0 0 auto !important;

  padding: 10px 14px !important;
  border-radius: 999px !important;

  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.12) !important;

  color: rgba(0,169,135,.95) !important;
  font-weight: 900 !important;
  text-decoration: none !important;

  z-index: 4 !important;
}

.hero-stage__cta:hover{
  background: rgba(255,255,255,.12) !important;
}

/* Green glow เบาๆ ใต้โดรน (ไม่แรง) */
.hero-stage__halo{
  opacity: .42 !important;
  filter: blur(22px) !important;
}


/* =========================================================
   FIX: CTA must NOT overlap bottom bar (PC)
   Put at END of style.pc.v2.css
   ========================================================= */

.hero-card--droneOnly .hero-stage__meta{
  position: absolute !important;
  left: 18px !important;
  right: 18px !important;
  bottom: 16px !important;

  display: flex !important;
  align-items: center !important;
  gap: 12px !important;

  /* เผื่อพื้นที่ให้ CTA ทางขวา (สำคัญ) */
  padding: 12px 170px 12px 12px !important;

  border-radius: 18px !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;

  z-index: 3 !important;
}

.hero-card--droneOnly .hero-stage__chip{
  flex: 0 0 auto !important;
}

.hero-card--droneOnly .hero-stage__sub{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ตรึง CTA ให้อยู่มุมขวาล่าง “ในระดับเดียวกับ bar” */
.hero-card--droneOnly .hero-stage__cta{
  position: absolute !important;
  right: 30px !important;
  bottom: 26px !important;          /* จูนให้พอดีกลาง bar */
  transform: none !important;

  padding: 10px 14px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  backdrop-filter: blur(10px) !important;

  color: rgba(0,169,135,.95) !important;
  font-weight: 900 !important;
  text-decoration: none !important;

  z-index: 4 !important;
}

.hero-card--droneOnly .hero-stage__cta:hover{
  background: rgba(255,255,255,.12) !important;
}

/* =========================
   FLYTECH HERO (NEW, CLEAN)
   ========================= */

.ft-hero{
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(1100px 560px at 15% 15%, rgba(0,169,135,.22), transparent 60%),
    linear-gradient(180deg, #06211c, #02100d);
  padding: 56px 0 62px;
}

.ft-hero__inner{
  width: min(1200px, 92vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 28px;
  align-items: center;
}

/* ----- Copy ----- */
.ft-hero__badge{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
}

.ft-hero__tag{
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,169,135,.16);
  border: 1px solid rgba(0,169,135,.30);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .2px;
  color: rgba(255,255,255,.92);
}

.ft-hero__badgeText{
  font-size: 13px;
  font-weight: 650;
  color: rgba(255,255,255,.86);
}

.ft-hero__title{
  margin: 16px 0 10px;
  font-size: clamp(34px, 3.1vw, 48px);
  line-height: 1.12;
  letter-spacing: .2px;
  font-weight: 950;
  text-shadow: 0 18px 50px rgba(0,0,0,.35);
}

.ft-hero__lead{
  margin: 0;
  max-width: 54ch;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255,255,255,.82);
}

.ft-hero__actions{
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.ft-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 900;
  min-height: 48px;
  border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.ft-btn--primary{
  background: linear-gradient(135deg, #00A987, #007E66);
  color: #fff;
  box-shadow: 0 18px 46px rgba(0,169,135,.28);
}
.ft-btn--primary:hover{ transform: translateY(-1px); box-shadow: 0 24px 60px rgba(0,169,135,.34); }

.ft-btn--ghost{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
}
.ft-btn--ghost:hover{ transform: translateY(-1px); background: rgba(255,255,255,.10); }

.ft-hero__trust{
  margin-top: 14px;
  font-size: 13px;
  color: rgba(0,169,135,.95);
  font-weight: 800;
  letter-spacing: .2px;
}

/* ----- Stage ----- */
.ft-stage{
  position: relative;
  border-radius: 26px;
  overflow: visible;
  min-height: 520px;
  background:
    radial-gradient(900px 520px at 60% 35%, rgba(0,169,135,.14), transparent 60%),
    linear-gradient(180deg, rgba(8,14,22,.96), rgba(6,10,18,.96));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 26px 80px rgba(0,0,0,.55);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ft-stage__bg{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1000px 520px at 50% 55%, rgba(0,0,0,.22), transparent 65%),
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: auto, 42px 42px, 42px 42px;
  opacity: .18;
  pointer-events: none;
}

.ft-stage__halo{
  position: absolute;
  left: 50%;
  top: 56%;
  transform: translateX(-50%);
  width: min(640px, 78%);
  height: 170px;
  border-radius: 999px;
  background:
    radial-gradient(closest-side, rgba(0,169,135,.18), transparent 70%),
    radial-gradient(closest-side, rgba(255,255,255,.10), transparent 72%);
  filter: blur(22px);
  opacity: .45;
  pointer-events: none;
}

.ft-droneWrap{
  position: relative;
  width: 100%;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  padding: 12px 8px 12px;
  transform-origin: 50% 60%;
  animation: ftFloat 4.8s ease-in-out infinite;
  will-change: transform;
}

.ft-drone{
  width: min(720px, 98%);
  height: auto;
  object-fit: contain;
  transform-origin: 50% 60%;
  filter:
    drop-shadow(0 52px 92px rgba(0,0,0,.62))
    drop-shadow(0 18px 34px rgba(0,169,135,.16));
  will-change: transform;
}

@keyframes ftFloat{
  0%   { transform: translate3d(0, 10px, 0) rotateZ(-1deg); }
  50%  { transform: translate3d(0, -12px, 0) rotateZ(1deg); }
  100% { transform: translate3d(0, 10px, 0) rotateZ(-1deg); }
}

/* bottom bar */
.ft-stage__bar{
  position: relative;
  width: calc(100% - 32px);
  max-width: 720px;
  margin: 12px auto 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  flex-wrap: wrap;
}

.ft-stage__meta{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.ft-chip{
  flex: 0 0 auto;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(0,169,135,.14);
  border: 1px solid rgba(0,169,135,.26);
  font-weight: 900;
  font-size: 13px;
  color: rgba(255,255,255,.92);
}

.ft-meta{
  min-width: 0;
  font-size: 13px;
  font-weight: 650;
  color: rgba(255,255,255,.78);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ft-miniCta{
  flex: 0 0 auto;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(0,169,135,.95);
  font-weight: 900;
  text-decoration: none;
}
.ft-miniCta:hover{ background: rgba(255,255,255,.12); }

/* =========================================================
   PC FIX: Drone too high + meta text clipped
   ========================================================= */
@media (min-width: 769px){

  /* 1) ปรับ padding ของ droneWrap ให้เหมาะสม */
  .ft-droneWrap{
    padding: 20px 8px 12px !important;
  }

  /* halo ลงมานิดให้สมจริง */
  .ft-stage__halo{
    top: 60% !important;               /* เดิม 56% */
  }

  /* 2) แถบล่างไม่ต้องตัดข้อความหนัก */
  .ft-stage__meta{
    min-width: 0;
  }

  /* เปลี่ยนจาก 1 บรรทัด -> 2 บรรทัดแบบพรีเมียม */
  .ft-meta{
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: clip !important;

    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2;
    -webkit-box-orient: vertical !important;

    line-height: 1.25 !important;
    max-width: 46ch;                   /* กันไม่ให้กินพื้นที่ปุ่ม */
  }

  /* ถ้าปุ่มขวายังเบียด: ลดขนาดปุ่มนิด */
  .ft-miniCta{
    padding: 9px 12px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }
}

.ft-droneWrap{ padding-top: 52px !important; }

/* =========================================================
   HERO LEFT BACKDROP (LIKE SAMPLE #2)
   - Background image behind LEFT text area (not a card)
   - No border radius / no box look
   ========================================================= */

/* 1) เลือก “คอลัมน์ซ้าย” ของ hero-inner ให้เป็นตัววางฉากหลัง */
.hero-inner > :first-child{
  position: relative;
  z-index: 1;
}

/* 2) รูปพื้นหลัง (จาง ๆ) */
.hero-inner > :first-child::before{
  content:"";
  position:absolute;
  inset: -18px -18px -18px -18px; /* เผื่อขอบให้ภาพลามนิดเหมือนตัวอย่าง */
  background: url("/images/hero-left-bg.png") center/cover no-repeat;
  opacity: .22;
  filter: saturate(1.05) contrast(1.05);
  transform: scale(1.02);
  pointer-events:none;

  /* ทำให้ภาพ “กลืน” กับพื้น ไม่เป็นกรอบ */
  -webkit-mask-image: radial-gradient(circle at 45% 45%, #000 0 62%, transparent 85%);
          mask-image: radial-gradient(circle at 45% 45%, #000 0 62%, transparent 85%);
}

/* 3) overlay เขียว + vignette ให้ตัวหนังสือเด่น (เหมือนภาพที่ 2) */
.hero-inner > :first-child::after{
  content:"";
  position:absolute;
  inset: -18px -18px -18px -18px;
  background:
    radial-gradient(900px 520px at 35% 40%, rgba(0,169,135,.22), transparent 60%),
    linear-gradient(90deg, rgba(0,94,76,.45), rgba(0,0,0,0));
  pointer-events:none;

  -webkit-mask-image: radial-gradient(circle at 45% 45%, #000 0 70%, transparent 90%);
          mask-image: radial-gradient(circle at 45% 45%, #000 0 70%, transparent 90%);
}

/* 4) ดันเนื้อหาให้อยู่เหนือฉากหลัง */
.hero-inner > :first-child > *{
  position: relative;
  z-index: 2;
}

/* =========================================================
   FT HERO: Background image + green premium overlay
   ========================================================= */
.ft-hero{
  position: relative;
  overflow: hidden;
}

/* รูปพื้นหลัง */
.ft-hero::before{
  content:"";
  position:absolute;
  inset:0;

  background: url("/images/hero-bg-flytech.png") left center / 125% auto no-repeat;
  opacity: .18; /* ปรับ 0.12–0.22 */
  filter: saturate(1.05) contrast(1.05);
  transform: scale(1.02);
  pointer-events:none;
  z-index: 0;
}

/* overlay เขียว + vignette ให้ดูหรูและอ่านชัด */
.ft-hero::after{
  content:"";
  position:absolute;
  inset:0;

  background:
    radial-gradient(1100px 560px at 18% 20%, rgba(0,169,135,.24), transparent 60%),
    radial-gradient(900px 520px at 70% 60%, rgba(0,0,0,.28), transparent 62%),
    linear-gradient(180deg, rgba(2,16,13,.65), rgba(2,16,13,.88));
  pointer-events:none;
  z-index: 0;
}

/* ดันเนื้อหาทั้งหมดให้อยู่เหนือพื้นหลัง */
.ft-hero > *{
  position: relative;
  z-index: 1;
}

/* ✅ REMOVE white glass/blur box behind text (Contact Banner) */
.contact-strip--banner .contact-left{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 0 !important;  /* ถ้าอยากให้ไม่มีทรงกล่องเลย */
  padding: 0 !important;        /* ถ้าอยากให้ชิดเหมือนไม่มีกล่อง */
}

/* ให้แบนเนอร์มีความสูงอ้างอิง (ถ้ามีอยู่แล้ว ไม่ต้องใส่ซ้ำ) */
.contact-strip--banner{
  min-height: 360px; /* ปรับตามดีไซน์จริง */
}

/* ✅ จัดกึ่งกลางแนวตั้งเฉพาะฝั่งข้อความ */
.contact-strip--banner .contact-left{
  height: 100%;              /* สำคัญ: ให้กินความสูงของแถบ */
  display: flex;
  flex-direction: column;
  justify-content: center;    /* ✅ บน/ล่างเท่ากัน */
  padding: 0 24px;            /* กันชิดซ้าย */
}

/* (ถ้ารู้สึกว่าปุ่มชิดเกิน) */
.contact-strip--banner .contact-actions{
  margin-top: 14px;
}

.contact-strip.contact-strip--banner{
  background-image:
    /* ✅ ปรับ 2 ค่านี้ = โทน/ความเข้มเขียว */
    linear-gradient(135deg,
      rgba(0,169,135,.65),  /* ซ้าย/บน (เพิ่ม .55 -> .65 = เข้มขึ้น) */
      rgba(0,94,76,.82)     /* ขวา/ล่าง (เพิ่ม .72 -> .82 = เข้มขึ้น) */
    ),
    url("/images/contact-bg.png");
}

/* ค้นหาและลบกฎ @media (max-width: 901px) และส่วนที่เกี่ยวข้องกับมือถือในไฟล์นี้ออก */
/* เหลือเพียงกฎที่ใช้แสดงผลมาตรฐานบน PC */

.menu-toggle {
  display: none; /* ซ่อนไว้เสมอในหน้าจอ PC */
  background: none;
  border: none;
  color: #ffffff;
  font-size: 1.8rem;
  cursor: pointer;
  z-index: 10001;
}

/* ส่วนที่เหลือใน style.pc.css คงเดิมตามโครงสร้าง PC ของคุณ */