/*!
Theme Name: pinpung
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: pinpung
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

pinpung is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
- Normalize
- Box sizing
# Base
- Typography
- Elements
- Links
- Forms
## Layouts
# Components
- Navigation
- Posts and pages
- Comments
- Widgets
- Media
- Captions
- Galleries
# plugins
- Jetpack infinite scroll
# Utilities
- Accessibility
- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
  ========================================================================== */

/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
:root {
  --orange: #fb9b00;
  --orange-2: #ffb32d;
  --orange-3: #ffe0a8;
  --white: #ffffff;
  --silver: #f4f6f8;
  --silver-2: #e5e9ee;
  --silver-3: #b7c0cb;
  --dark: #14161a;
  --muted: #69717d;
  --line: rgba(20, 22, 26, .08);
  --glass: rgba(255, 255, 255, .76);
  --shadow: 0 28px 80px rgba(20, 22, 26, .13);
  --shadow-soft: 0 18px 42px rgba(20, 22, 26, .08);
  --max: 1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Inter", "Noto Sans Thai", sans-serif;
  color: var(--dark);
  background:
    radial-gradient(circle at 86% 3%, rgba(251,155,0,.20), transparent 31%),
    radial-gradient(circle at 8% 42%, rgba(183,192,203,.24), transparent 32%),
    linear-gradient(180deg, #fff, #f7f9fb 46%, #fff);
  overflow-x: hidden;
}

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

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

.page {
  position: relative;
  /* overflow: hidden; */
}

.page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -4;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(20,22,26,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,22,26,.035) 1px, transparent 1px);
  background-size: 70px 70px;
  mask-image: radial-gradient(circle at 50% 20%, #000, transparent 78%);
}

.page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  opacity: .09;
  mix-blend-mode: multiply;
  background-image: repeating-radial-gradient(circle at 0 0, rgba(20,22,26,.18) 0 1px, transparent 1px 7px);
}

/* NAV */
.navbar {
  position: fixed;
  inset: 0 0 auto;
  width: 100%;
  z-index: 100;
  background: rgba(0,0,0,.92);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 34px rgba(20,22,26,.12);
}

.nav-inner {
  width: min(1200px, calc(100% - 48px));
  height: 80px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo img {
  max-height: 38px;
  object-fit: contain;
}

.logo-fallback {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 900;
  background: linear-gradient(135deg, var(--orange-2), var(--orange));
  box-shadow: 0 14px 34px rgba(251,155,0,.25);
}

.menu {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 30px;
  margin: 0;
  padding: 0;
}

.menu a {
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  position: relative;
  transition: .25s ease;
}

.menu a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -9px;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--orange-2), var(--orange));
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .3s ease;
}

.menu a:hover,
.menu a.active {
  color: var(--orange-2);
}

.menu a:hover::after,
.menu a.active::after {
  transform: scaleX(1);
  transform-origin: left;
}

.contact-btn {
  padding: 11px 22px;
  border-radius: 999px;
  color: #fff !important;
  background: linear-gradient(135deg, #ffbc00, #ff721f);
  box-shadow: 0 12px 28px rgba(251,155,0,.24);
}

.menu-toggle {
  display: none;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: #14161a;
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  margin: 4px auto;
  border-radius: 999px;
  background: var(--orange);
}

/* COMMON */
.inner {
width: min(var(--max), calc(100% - 32px));
  margin: 0 auto;
}

.section {
  position: relative;
  padding: clamp(78px, 9vw, 132px) 20px;
}

.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--orange);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.section-kicker::before {
  content: "";
  width: 30px;
  height: 2px;
  border-radius: 99px;
  background: currentColor;
}

.section-title {
  margin: 16px 0 0;
  font-size: clamp(38px, 5.8vw, 82px);
  line-height: 1.04;
  letter-spacing: -.065em;
  font-weight: 900;
}

.section-copy {
  max-width: 720px;
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.82;
}

.gradient-text {
  padding-bottom: 15px;
  display: inline-block;
  background: linear-gradient(100deg, #f08d30, #ffb32d, #ffd04e, #fb9b00);
  background-size: 240% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradientRiver 4s linear infinite;
}

.btn {
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 0 24px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: .25s ease;
}

.btn::after {
  content: "";
  position: absolute;
  width: 150%;
  height: 150%;
  top: -25%;
  left: -170%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.48), transparent);
  transform: rotate(20deg);
  transition: left .68s ease;
}

.btn:hover::after { left: 130%; }

.btn:hover {
  transform: translateY(-4px) scale(1.03);
}

.btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--orange-2), var(--orange));
  box-shadow: 0 20px 44px rgba(251,155,0,.32);
}

.btn-dark {
  color: #fff;
  background: var(--dark);
  box-shadow: 0 18px 42px rgba(20,22,26,.20);
}

/* HERO */
.hero {
  position: relative;
  padding: 156px 20px 84px;
  min-height: 76vh;
  display: grid;
  place-items: center;
  color: #fff;
  isolation: isolate;
  background: #08090b;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -4;
  background:
    linear-gradient(120deg, rgba(0,0,0,.86), rgba(0,0,0,.58) 48%, rgba(0,0,0,.28)),
    url("https://pinpung.com/wp-content/uploads/2025/10/Pinpung-1-24.jpg?auto=format&fit=crop&w=1800&q=85") center/cover;
  animation: heroBreath 14s ease-in-out infinite alternate;
}

.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 34%;
  z-index: -1;
  background: linear-gradient(to bottom, transparent, #fff);
  pointer-events: none;
}

.hero-orb {
  position: absolute;
  width: 620px;
  height: 620px;
  right: -190px;
  top: 8%;
  z-index: -2;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(251,155,0,.45), transparent 66%);
  filter: blur(12px);
  animation: orbFloat 9s ease-in-out infinite alternate;
}

.hero-content {
  width: min(var(--max), calc(100% - 32px));
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(14px);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.hero-eyebrow::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 8px rgba(251,155,0,.18);
}

.hero h1 {
  max-width: 980px;
  margin: 24px 0 0;
  font-size: clamp(48px, 7.8vw, 112px);
  line-height: .9;
  letter-spacing: -.04em;
  font-weight: 900;
  text-shadow: 0 18px 70px rgba(0,0,0,.55);
}

.hero-copy {
  max-width: 700px;
  margin: 24px 0 0;
  color: rgba(255,255,255,.78);
  font-size: clamp(16px, 1.8vw, 20px);
  line-height: 1.75;
  font-weight: 600;
}

/* CONTACT LAYOUT */
.contact-section {
  background: #fff;
  padding-top: 64px;
}

.contact-layout {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: clamp(26px, 5vw, 58px);
  align-items: start;
}

.form-shell {
  position: relative;
  padding: clamp(26px, 4.6vw, 48px);
  border-radius: 42px;
  background:
    radial-gradient(circle at 90% 8%, rgba(251,155,0,.14), transparent 32%),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(244,246,248,.92));
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.form-shell::before {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  right: -170px;
  bottom: -170px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(251,155,0,.18), transparent 68%);
  pointer-events: none;
}

.form-title {
  margin: 0;
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1;
  letter-spacing: -.06em;
  font-weight: 900;
}

.form-subtitle {
  margin: 12px 0 0;
  color: var(--muted);
  line-height: 1.75;
  font-weight: 600;
}

.form-block {
  margin-top: 34px;
  position: relative;
  z-index: 2;
}

.block-title {
  margin: 0 0 22px;
  font-size: 24px;
  letter-spacing: -.04em;
  font-weight: 900;
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px 28px;
}

.field {
  position: relative;
}

.field.full {
  grid-column: 1 / -1;
}

label {
  display: block;
  margin-bottom: 8px;
  color: #9aa1aa;
  font-size: 13px;
  font-weight: 900;
}

input,
textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(20,22,26,.14);
  background: transparent;
  outline: none;
  padding: 12px 0 13px;
  font-family: inherit;
  color: var(--dark);
  font-size: 15px;
  font-weight: 700;
  transition: .25s ease;
}

textarea {
  min-height: 150px;
  resize: vertical;
  padding: 16px 18px;
  border: 1px solid rgba(20,22,26,.10);
  border-radius: 22px;
  background: rgba(255,255,255,.72);
  line-height: 1.7;
}

input:focus,
textarea:focus {
  border-color: rgba(251,155,0,.60);
  box-shadow: 0 12px 28px rgba(251,155,0,.08);
}

textarea::placeholder,
input::placeholder {
  color: #a4abb4;
  font-weight: 700;
}

.check-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 11px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.74);
  border: 1px solid rgba(20,22,26,.08);
  cursor: pointer;
  transition: .25s ease;
  font-weight: 800;
  color: #505965;
}

.choice input {
  width: 16px;
  height: 16px;
  padding: 0;
  border: auto;
  accent-color: var(--orange);
  box-shadow: none;
}

.choice:hover,
.choice:has(input:checked) {
  color: var(--dark);
  transform: translateY(-2px);
  border-color: rgba(251,155,0,.34);
  box-shadow: 0 16px 34px rgba(251,155,0,.10);
  background: #fff;
}

.budget-tabs {
  display: inline-flex;
  margin: 12px 0 22px;
  padding: 4px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(20,22,26,.08);
  box-shadow: var(--shadow-soft);
}

.budget-tab {
  border: 0;
  min-width: 178px;
  min-height: 42px;
  border-radius: 999px;
  background: transparent;
  color: #67717c;
  font-family: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  transition: .25s ease;
}

.budget-tab.active {
  color: #fff;
  background: linear-gradient(135deg, var(--orange-2), var(--orange));
  box-shadow: 0 12px 28px rgba(251,155,0,.22);
}

.budget-panel {
  display: none;
  animation: fadeRise .35s ease both;
}

.budget-panel.active {
  display: block;
}

.radio-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.radio-card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.74);
  border: 1px solid rgba(20,22,26,.08);
  cursor: pointer;
  transition: .25s ease;
  color: #505965;
  font-size: 13px;
  font-weight: 850;
}

.radio-card input {
  width: 16px;
  height: 16px;
  padding: 0;
  accent-color: var(--orange);
  box-shadow: none;
}

.radio-card:hover,
.radio-card:has(input:checked) {
  color: var(--dark);
  transform: translateY(-2px);
  border-color: rgba(251,155,0,.34);
  background: #fff;
  box-shadow: 0 16px 34px rgba(251,155,0,.10);
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 28px;
}

/* OFFICE */
.office-stack {
  display: grid;
  gap: 18px;
}

.office-card,
.quick-card {
  position: relative;
  padding: clamp(24px, 4vw, 36px);
  border-radius: 38px;
  background: rgba(255,255,255,.82);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.office-card::before,
.quick-card::before {
  content: "";
  position: absolute;
  inset: auto -90px -110px auto;
  width: 240px;
  height: 240px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(251,155,0,.18), transparent 68%);
  pointer-events: none;
}

.office-card h2,
.quick-card h3 {
  margin: 0;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1;
  letter-spacing: -.06em;
  font-weight: 900;
}

.office-card .lead {
  margin: 12px 0 26px;
  color: var(--muted);
  font-weight: 700;
}

.office-info {
  display: grid;
  gap: 18px;
  position: relative;
  z-index: 2;
}

.info-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px;
  border-radius: 22px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(20,22,26,.07);
  transition: .25s ease;
}

.info-item:hover {
  transform: translateY(-4px);
  border-color: rgba(251,155,0,.28);
  box-shadow: 0 16px 36px rgba(251,155,0,.09);
  background: #fff;
}

.info-icon {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg, var(--orange-2), var(--orange));
  box-shadow: 0 12px 26px rgba(251,155,0,.22);
  font-weight: 900;
}

.info-item b {
  display: block;
  margin-bottom: 6px;
  font-size: 15px;
  font-weight: 900;
}

.info-item p {
  margin: 0;
  color: #525c67;
  line-height: 1.65;
  font-weight: 650;
}

.info-item a {
  color: #525c67;
  transition: .2s ease;
}

.info-item a:hover {
  color: var(--orange);
}

.email-list {
  display: grid;
  gap: 7px;
}

.quick-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 22px;
  position: relative;
  z-index: 2;
}

.quick-link {
  min-height: 86px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 16px;
  border-radius: 22px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(20,22,26,.07);
  transition: .25s ease;
}

.quick-link:hover {
  transform: translateY(-4px);
  background: #fff;
  border-color: rgba(251,155,0,.30);
  box-shadow: 0 16px 36px rgba(251,155,0,.10);
}

.quick-link small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.quick-link strong {
  font-size: 15px;
  font-weight: 900;
}

.map-section {
  padding-top: 0;
  background: #fff;
}

.map-shell {
  position: relative;
  min-height: 520px;
  border-radius: 42px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background: var(--silver);
}

.map-shell iframe {
  width: 100%;
  height: 520px;
  border: 0;
  filter: grayscale(.18) contrast(1.04);
}

.map-label {
  position: absolute;
  left: 24px;
  bottom: 24px;
  max-width: 390px;
  padding: 20px 22px;
  border-radius: 28px;
  color: #fff;
  background: rgba(20,22,26,.86);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(18px);
  box-shadow: 0 22px 56px rgba(0,0,0,.24);
}

.map-label small {
  display: block;
  color: rgba(255,255,255,.62);
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.map-label b {
  display: block;
  margin-top: 8px;
  font-size: 22px;
  letter-spacing: -.03em;
}

.map-label p {
  margin: 8px 0 0;
  color: rgba(255,255,255,.72);
  line-height: 1.55;
  font-weight: 650;
}

/* FOOTER */
.footer {
  padding: 64px 20px;
  text-align: center;
  color: var(--dark);
  background:
    radial-gradient(circle at 50% 0%, rgba(251,155,0,.18), transparent 34%),
    linear-gradient(135deg, #fff, #edf1f5);
  border-top: 1px solid var(--line);
}

.footer img {
  width: 132px;
  margin: 0 auto 24px;
}

.footer-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-links a {
  color: #57616d;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
  transition: .24s ease;
}

.footer-links a:hover { color: var(--orange); }

.footer p {
  margin: 24px 0 0;
  color: var(--muted);
  font-size: 13px;
}

/* FLOAT */
.contact-bubble {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px 12px 12px;
  border-radius: 999px;
  background: rgba(20,22,26,.88);
  border: 1px solid rgba(251,155,0,.22);
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 42px rgba(0,0,0,.22);
  color: white;
  transition: .28s ease;
  animation: floaty 5.2s ease-in-out infinite;
}

.contact-bubble:hover {
  transform: translateY(-4px) scale(1.03);
  background: linear-gradient(135deg, var(--orange-2), var(--orange));
}

.bubble-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--orange-2), var(--orange));
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(251,155,0,.32);
}

.bubble-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.bubble-text small {
  color: rgba(255,255,255,.58);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.bubble-text strong {
  margin-top: 4px;
  font-size: 15px;
  font-weight: 900;
}

/* REVEAL */
.reveal {
  opacity: 0;
  transform: translate3d(0, 46px, 0) scale(.97);
  filter: blur(10px);
  transition:
    opacity .82s cubic-bezier(.16,1,.3,1),
    transform .86s cubic-bezier(.16,1,.3,1),
    filter .82s ease;
  transition-delay: var(--delay, 0ms);
}

.reveal.visible {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

@keyframes gradientRiver {
  from { background-position: 0% center; }
  to { background-position: 240% center; }
}

@keyframes heroBreath {
  from { transform: scale(1.05); filter: saturate(1.04) contrast(1.02); }
  to { transform: scale(1.14) translate3d(-1.2%, 1%, 0); filter: saturate(1.18) contrast(1.08); }
}

@keyframes orbFloat {
  from { transform: translate3d(0, 0, 0) scale(.95); opacity: .72; }
  to { transform: translate3d(-120px, 120px, 0) scale(1.16); opacity: 1; }
}

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

@keyframes fadeRise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1080px) {
  .contact-layout {
    grid-template-columns: 1fr;
  }

  .office-stack {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .menu { display: none; }

  .menu-toggle { display: block; }

  .menu.is-open {
    position: absolute;
    top: 80px;
    left: 24px;
    right: 24px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 14px;
    border-radius: 24px;
    background: rgba(255,255,255,.94);
    box-shadow: var(--shadow);
  }

  .menu.is-open a {
    display: block;
    color: #20242b;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(20,22,26,.05);
  }

  .menu.is-open .contact-btn {
    color: #fff !important;
    background: linear-gradient(135deg, var(--orange-2), var(--orange));
  }

  .menu a::after { display: none; }
}

@media (max-width: 720px) {
  .nav-inner {
    width: calc(100% - 24px);
  }

  .hero {
    min-height: auto;
    padding-top: 128px;
  }

  .field-grid,
  .check-list,
  .radio-grid,
  .quick-grid {
    grid-template-columns: 1fr;
  }

  .budget-tabs {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    border-radius: 24px;
  }

  .budget-tab {
    width: 100%;
    min-width: 0;
  }

  .form-actions {
    justify-content: stretch;
  }

  .form-actions .btn {
    width: 100%;
  }

  .map-shell,
  .map-shell iframe {
    min-height: 440px;
    height: 440px;
  }

  .map-label {
    left: 14px;
    right: 14px;
    bottom: 14px;
  }

  .contact-bubble {
    left: 16px;
    bottom: 16px;
  }
}


/* CONTACT ROLE SELECTOR */
.contact-role-select {
  position: relative;
  z-index: 3;
  margin: 0 0 30px;
  padding: 20px;
  border-radius: 28px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(20,22,26,.08);
}

.role-select-label {
  display: block;
  margin-bottom: 14px;
  color: var(--dark);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -.02em;
}

.role-select-label span { color: var(--orange); }

.role-select-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.role-select-card {
  min-height: 92px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(20,22,26,.09);
  border-radius: 22px;
  background: rgba(255,255,255,.80);
  color: var(--dark);
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition: .25s ease;
}

.role-select-card:hover,
.role-select-card.active {
  transform: translateY(-3px);
  background: #fff;
  border-color: rgba(251,155,0,.48);
  box-shadow: 0 16px 34px rgba(251,155,0,.13);
}

.role-select-card.active {
  background: linear-gradient(135deg, rgba(255,179,45,.20), rgba(255,255,255,.96));
}

.role-select-icon {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg, var(--orange-2), var(--orange));
  box-shadow: 0 10px 24px rgba(251,155,0,.22);
  font-size: 20px;
  font-weight: 900;
}

.role-select-card strong {
  display: block;
  font-size: 16px;
  font-weight: 900;
}

.role-select-card small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.contact-role-placeholder {
  padding: 28px 22px;
  border: 1px dashed rgba(251,155,0,.42);
  border-radius: 24px;
  background: rgba(251,155,0,.06);
  color: #68717c;
  text-align: center;
  font-weight: 750;
  line-height: 1.7;
}

.contact-role-panel { display: none; }

.contact-role-panel.active {
  display: block;
  animation: fadeRise .4s ease both;
}

.contact-role-panel .form-title { margin-top: 8px; }

.contact-role-panel select {
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(20,22,26,.14);
  border-radius: 0;
  background: transparent;
  outline: none;
  padding: 12px 0 13px;
  font-family: inherit;
  color: var(--dark);
  font-size: 15px;
  font-weight: 700;
  transition: .25s ease;
}

.contact-role-panel select:focus {
  border-color: rgba(251,155,0,.60);
  box-shadow: 0 12px 28px rgba(251,155,0,.08);
}

.file-upload {
  padding: 13px 16px;
  border: 1px dashed rgba(20,22,26,.20);
  border-radius: 18px;
  background: rgba(255,255,255,.65);
}

.file-upload input {
  padding: 0;
  border: 0;
  box-shadow: none;
}



/* CONTACT FORM: SAME WIDTH AS HERO CONTENT */
.contact-section {
  padding-top: clamp(72px, 8vw, 112px);
  padding-bottom: clamp(74px, 8vw, 118px);
  background:
    radial-gradient(circle at 8% 8%, rgba(251,155,0,.11), transparent 24%),
    linear-gradient(180deg, #fff 0%, #f8fafc 100%);
}

.contact-section .contact-layout {
  width: min(var(--max), calc(100% - 32px));
  display: block;
  margin: 0 auto;
}

.contact-section .form-shell {
  width: 100%;
  padding: clamp(28px, 4.5vw, 54px);
  border-radius: clamp(30px, 3.6vw, 44px);
}

.contact-section .form-block {
  margin-top: 38px;
}

.contact-section .field-grid {
  gap: 24px 30px;
}

.contact-section .check-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}


/* CONTACT HUB — unified office, routes and map */
.contact-hub-section {
  position: relative;
  padding: clamp(74px, 9vw, 128px) 20px clamp(76px, 9vw, 124px);
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 10%, rgba(251,155,0,.16), transparent 25%),
    radial-gradient(circle at 88% 78%, rgba(183,192,203,.24), transparent 27%),
    linear-gradient(180deg, #fff 0%, #f4f6f8 100%);
}

.contact-hub-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .7;
  background-image:
    linear-gradient(rgba(20,22,26,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,22,26,.035) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 86%, transparent);
}

.contact-hub-wrap {
  position: relative;
  width: min(var(--max), calc(100% - 32px));
  margin: 0 auto;
}

.contact-hub-intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 26px;
  margin-bottom: 28px;
}

.contact-hub-intro .section-kicker { color: var(--orange); }

.contact-hub-intro h2 {
  max-width: 720px;
  margin: 16px 0 0;
  color: var(--dark);
  font-size: clamp(42px, 5.6vw, 78px);
  line-height: .94;
  letter-spacing: -.07em;
  font-weight: 900;
}

.contact-hub-intro h2 em {
  color: var(--orange);
  font-style: normal;
}

.contact-hub-intro p {
  max-width: 330px;
  margin: 0 0 5px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75;
  font-weight: 650;
}

.contact-hub-main {
  display: grid;
  grid-template-columns: minmax(320px, .88fr) minmax(0, 1.12fr);
  border-radius: 38px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(20,22,26,.08);
  box-shadow: 0 28px 78px rgba(20,22,26,.13);
}

.hub-office {
  position: relative;
  min-height: 500px;
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 4vw, 48px);
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 92% 10%, rgba(251,155,0,.72), transparent 29%),
    radial-gradient(circle at 0% 100%, rgba(255,255,255,.13), transparent 29%),
    linear-gradient(145deg, #101216 0%, #20262f 55%, #111317 100%);
}

.hub-office::before {
  content: "";
  position: absolute;
  width: 250px;
  height: 250px;
  right: -130px;
  bottom: -105px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 0 0 31px rgba(255,255,255,.045), 0 0 0 62px rgba(255,255,255,.025);
  pointer-events: none;
}

.hub-office > * { position: relative; z-index: 1; }

.hub-office-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--orange-2);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.hub-office-mark i {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #111317;
  background: linear-gradient(135deg, #ffcf59, var(--orange));
  box-shadow: 0 12px 26px rgba(251,155,0,.24);
  font-size: 16px;
}

.hub-office h3 {
  max-width: 390px;
  margin: 22px 0 0;
  font-size: clamp(34px, 4.4vw, 57px);
  line-height: .94;
  letter-spacing: -.065em;
  font-weight: 900;
}

.hub-office h3 span { color: var(--orange-2); }

.hub-address {
  margin: 28px 0 0;
  color: rgba(255,255,255,.76);
  font-size: 15px;
  line-height: 1.78;
  font-weight: 650;
}

.hub-address b {
  color: #fff;
  font-weight: 900;
}

.hub-office-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: auto;
  padding-top: 32px;
}

.hub-meta-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 11px 13px;
  border-radius: 18px;
  color: rgba(255,255,255,.82);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 750;
}

.hub-meta-item i {
  color: var(--orange-2);
  font-size: 16px;
}

.hub-map-card {
  position: relative;
  min-height: 500px;
  overflow: hidden;
  background: #e9edf0;
}

.hub-map-card iframe {
  width: 100%;
  height: 100%;
  min-height: 500px;
  border: 0;
  filter: saturate(.84) contrast(1.04) grayscale(.07);
}

.hub-map-toolbar {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 13px 14px 13px 16px;
  border-radius: 20px;
  color: #fff;
  background: rgba(20,22,26,.84);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(16px);
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
}

.hub-map-toolbar small {
  display: block;
  color: rgba(255,255,255,.54);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.hub-map-toolbar b {
  display: block;
  margin-top: 3px;
  font-size: 15px;
  letter-spacing: -.025em;
  font-weight: 900;
}

.hub-map-open {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #16181c;
  background: linear-gradient(135deg, #ffcf59, var(--orange));
  font-size: 17px;
  transition: .25s ease;
}

.hub-map-open:hover { transform: translateY(-3px) rotate(4deg); }

.hub-map-note {
  position: absolute;
  left: 20px;
  bottom: 20px;
  z-index: 2;
  max-width: 340px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 15px 17px;
  border-radius: 20px;
  color: rgba(255,255,255,.82);
  background: rgba(255,255,255,.90);
  color: #4e5863;
  border: 1px solid rgba(20,22,26,.08);
  box-shadow: 0 16px 38px rgba(20,22,26,.14);
  backdrop-filter: blur(16px);
  font-size: 12px;
  line-height: 1.58;
  font-weight: 700;
}

.hub-map-note i {
  color: var(--orange);
  font-size: 17px;
  margin-top: 1px;
}

.hub-routes {
  margin-top: 16px;
  padding: 23px;
  border-radius: 32px;
  color: #fff;
  background: linear-gradient(135deg, #171a1f, #252c36);
  box-shadow: 0 24px 60px rgba(20,22,26,.15);
}

.hub-routes-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  padding: 5px 6px 22px;
}

.hub-routes-heading small {
  display: block;
  color: var(--orange-2);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.hub-routes-heading h3 {
  margin: 9px 0 0;
  font-size: clamp(27px, 3.3vw, 42px);
  line-height: .98;
  letter-spacing: -.06em;
  font-weight: 900;
}

.hub-routes-heading p {
  max-width: 370px;
  margin: 0;
  color: rgba(255,255,255,.58);
  font-size: 13px;
  line-height: 1.7;
  font-weight: 650;
  text-align: right;
}

.hub-routes-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.hub-route-card {
  position: relative;
  min-height: 130px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 17px;
  overflow: hidden;
  border-radius: 22px;
  color: #fff;
  background: rgba(255,255,255,.075);
  border: 1px solid rgba(255,255,255,.10);
  transition: .25s ease;
}

.hub-route-card::after {
  content: "";
  position: absolute;
  width: 94px;
  height: 94px;
  right: -46px;
  top: -50px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(251,155,0,.24), transparent 67%);
  transition: .25s ease;
}

.hub-route-card:hover {
  transform: translateY(-5px);
  color: #191b20;
  background: #fff;
  border-color: rgba(255,255,255,.62);
  box-shadow: 0 17px 34px rgba(0,0,0,.18);
}

.hub-route-card:hover::after { transform: scale(1.32); }

.hub-route-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #1c1f24;
  background: linear-gradient(135deg, #ffcf59, var(--orange));
  font-size: 16px;
  box-shadow: 0 9px 18px rgba(251,155,0,.18);
}

.hub-route-card small {
  display: block;
  margin-top: 18px;
  color: rgba(255,255,255,.53);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 900;
  transition: .25s ease;
}

.hub-route-card:hover small { color: #7a8490; }

.hub-route-card strong {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  line-height: 1.35;
  letter-spacing: -.02em;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.hub-route-arrow {
  position: absolute;
  top: 20px;
  right: 17px;
  color: var(--orange-2);
  font-size: 17px;
  transition: .25s ease;
}

.hub-route-card:hover .hub-route-arrow {
  color: var(--orange);
  transform: translate(3px, -3px);
}

@media (max-width: 980px) {
  .contact-hub-main { grid-template-columns: 1fr; }
  .hub-office, .hub-map-card, .hub-map-card iframe { min-height: 450px; }
  .hub-office { min-height: 430px; }
  .hub-routes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .contact-hub-intro, .hub-routes-heading {
    align-items: start;
    flex-direction: column;
  }
  .contact-hub-intro p, .hub-routes-heading p { text-align: left; }
}

@media (max-width: 620px) {
  .contact-hub-section { padding-left: 12px; padding-right: 12px; }
  .contact-hub-wrap { width: 100%; }
  .contact-hub-intro { margin-bottom: 22px; }
  .contact-hub-intro h2 { font-size: clamp(42px, 14vw, 62px); }
  .contact-hub-main { border-radius: 28px; }
  .hub-office { min-height: 440px; padding: 27px 22px; }
  .hub-office-meta { grid-template-columns: 1fr; padding-top: 25px; }
  .hub-map-card, .hub-map-card iframe { min-height: 390px; }
  .hub-map-toolbar { top: 14px; left: 14px; right: 14px; }
  .hub-map-note { left: 14px; bottom: 14px; right: 14px; max-width: none; }
  .hub-routes { padding: 13px; border-radius: 26px; }
  .hub-routes-heading { padding: 11px 10px 18px; }
  .hub-routes-grid { grid-template-columns: 1fr; }
  .hub-route-card { min-height: 118px; }
}



/* BALANCED CONTACT HUB — mostly white/silver, orange used only as an accent */
.contact-hub-section {
  background:
    radial-gradient(circle at 8% 2%, rgba(251,155,0,.075), transparent 23%),
    radial-gradient(circle at 92% 85%, rgba(183,192,203,.16), transparent 27%),
    linear-gradient(180deg, #ffffff 0%, #f7f9fb 62%, #ffffff 100%);
}

.contact-hub-main {
  gap: 0;
  border: 1px solid rgba(20,22,26,.08);
  box-shadow: 0 28px 78px rgba(20,22,26,.09);
  background: #fff;
}

.hub-office {
  color: var(--dark);
  background:
    radial-gradient(circle at 95% 8%, rgba(251,155,0,.10), transparent 23%),
    linear-gradient(145deg, #ffffff 0%, #fbfcfd 64%, #f3f6f8 100%);
  border-right: 1px solid rgba(20,22,26,.08);
}

.hub-office::before {
  right: -110px;
  bottom: -112px;
  border-color: rgba(251,155,0,.12);
  box-shadow:
    0 0 0 31px rgba(251,155,0,.035),
    0 0 0 62px rgba(251,155,0,.015);
}

.hub-office-mark { color: var(--orange); }

.hub-office-mark i {
  color: #fff;
  background: linear-gradient(135deg, var(--orange-2), var(--orange));
  box-shadow: 0 12px 26px rgba(251,155,0,.20);
}

.hub-office h3 { color: var(--dark); }
.hub-office h3 span { color: var(--orange); }
.hub-address { color: #5d6670; }
.hub-address b { color: var(--dark); }

.hub-meta-item {
  color: #4e5862;
  background: #fff;
  border-color: rgba(20,22,26,.09);
  box-shadow: 0 10px 24px rgba(20,22,26,.045);
  transition: .25s ease;
}

.hub-meta-item:hover {
  color: var(--dark);
  transform: translateY(-3px);
  background: #fffdf9;
  border-color: rgba(251,155,0,.30);
  box-shadow: 0 16px 30px rgba(20,22,26,.08);
}

.hub-meta-item i { color: var(--orange); }

.hub-map-card { background: #f3f6f8; }

.hub-map-card iframe {
  filter: saturate(.90) contrast(1.01) brightness(1.035);
}

.hub-map-toolbar {
  color: var(--dark);
  background: rgba(255,255,255,.95);
  border-color: rgba(20,22,26,.09);
  box-shadow: 0 16px 40px rgba(20,22,26,.10);
}

.hub-map-toolbar small { color: var(--orange); }
.hub-map-toolbar b { color: var(--dark); }

.hub-map-open {
  color: #fff;
  background: linear-gradient(135deg, var(--orange-2), var(--orange));
  box-shadow: 0 10px 24px rgba(251,155,0,.20);
}

.hub-map-note {
  color: #5c6671;
  background: rgba(255,255,255,.96);
  border-color: rgba(20,22,26,.08);
  box-shadow: 0 16px 38px rgba(20,22,26,.10);
}

.hub-routes {
  color: var(--dark);
  background:
    radial-gradient(circle at 100% 0%, rgba(251,155,0,.075), transparent 22%),
    linear-gradient(135deg, #ffffff 0%, #fafbfd 65%, #f2f5f7 100%);
  border: 1px solid rgba(20,22,26,.08);
  box-shadow: 0 24px 60px rgba(20,22,26,.085);
}

.hub-routes-heading small { color: var(--orange); }
.hub-routes-heading h3 { color: var(--dark); }
.hub-routes-heading p { color: #69717d; }

.hub-route-card {
  color: var(--dark);
  background: #fff;
  border-color: rgba(20,22,26,.08);
  box-shadow: 0 8px 22px rgba(20,22,26,.04);
}

.hub-route-card::after {
  background: radial-gradient(circle, rgba(251,155,0,.10), transparent 67%);
}

.hub-route-card:hover {
  color: var(--dark);
  background: #fff;
  border-color: rgba(251,155,0,.28);
  box-shadow: 0 18px 34px rgba(20,22,26,.09);
}

.hub-route-card small,
.hub-route-card:hover small { color: #7c858f; }

.hub-route-icon {
  color: #fff;
  background: linear-gradient(135deg, var(--orange-2), var(--orange));
  box-shadow: 0 9px 18px rgba(251,155,0,.18);
}

.hub-route-arrow,
.hub-route-card:hover .hub-route-arrow { color: var(--orange); }

/* Clear, business-first wording for the contact area */
.hub-office h3 {
  max-width: 430px;
  margin-top: 22px;
}

.hub-office-company {
  margin: 13px 0 0;
  color: var(--orange);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -.02em;
}

.hub-office-company + .hub-address {
  margin-top: 22px;
}

.hub-routes-heading h3 {
  margin-top: 8px;
}

@media (max-width: 980px) {
  .hub-office { border-right: 0; border-bottom: 1px solid rgba(20,22,26,.08); }
}
/* ============================================================
   CONTACT FORM 7 COMPATIBILITY SHIM
   ปรับ markup ที่ CF7 เรนเดอร์ให้เข้ากับดีไซน์เดิมของฟอร์ม
   ============================================================ */

/* CF7 ห่อทุกฟิลด์ด้วย <span class="wpcf7-form-control-wrap"> ซึ่งเป็น inline
   ทำให้ input/textarea ที่ width:100% ยุบลง */
.form-shell .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

.form-shell .wpcf7 form > p:empty,
.form-shell .wpcf7 form > br {
  display: none;
}

/* ปล่อยให้ .wpcf7-list-item ไหลเข้า grid ของ .check-list / .radio-grid โดยตรง
   ใช้ descendant selector เพราะ wpautop ของ CF7 อาจแทรก <p> คั่นไว้ */
.form-shell .check-list p,
.form-shell .check-list .wpcf7-form-control-wrap,
.form-shell .check-list .wpcf7-checkbox,
.form-shell .radio-grid p,
.form-shell .radio-grid .wpcf7-form-control-wrap,
.form-shell .radio-grid .wpcf7-radio {
  display: contents;
}

.form-shell .check-list br,
.form-shell .radio-grid br {
  display: none;
}

.form-shell .wpcf7-list-item {
  display: block;
  min-width: 0;
  margin: 0;
}

/* .wpcf7-list-item > label ทำหน้าที่แทนการ์ด .choice / .radio-card เดิม */
.form-shell .check-list .wpcf7-list-item label,
.form-shell .radio-grid .wpcf7-list-item label,
.form-consent .wpcf7-list-item label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin-bottom: 0;
  padding: 11px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.74);
  border: 1px solid rgba(20,22,26,.08);
  cursor: pointer;
  transition: .25s ease;
  color: #505965;
  font-size: 13px;
  font-weight: 800;
}

.form-shell .check-list .wpcf7-list-item label:hover,
.form-shell .radio-grid .wpcf7-list-item label:hover,
.form-shell .check-list .wpcf7-list-item label:has(input:checked),
.form-shell .radio-grid .wpcf7-list-item label:has(input:checked) {
  color: var(--dark);
  transform: translateY(-2px);
  border-color: rgba(251,155,0,.34);
  background: #fff;
  box-shadow: 0 16px 34px rgba(251,155,0,.10);
}

.form-shell .wpcf7-list-item input[type="checkbox"],
.form-shell .wpcf7-list-item input[type="radio"] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  accent-color: var(--orange);
  box-shadow: none;
}

.form-shell .wpcf7-list-item-label {
  line-height: 1.35;
}

/* PDPA consent */
.form-consent .wpcf7-list-item label {
  align-items: flex-start;
  min-height: 0;
  line-height: 1.6;
}

.form-consent .wpcf7-list-item input[type="checkbox"] {
  margin-top: 3px;
}

/* ปุ่มส่งของ CF7 เป็น <input type="submit"> จึงโดน input { width:100% } */
.form-actions input[type="submit"].btn {
  width: auto;
  border-bottom: 0;
}

.form-actions {
  align-items: center;
  gap: 12px;
}

.wpcf7-spinner {
  margin: 0;
}

/* ข้อความตอบกลับ / ข้อความ validation */
.form-shell .wpcf7 form .wpcf7-response-output {
  margin: 22px 0 0;
  padding: 14px 18px;
  border-width: 1px;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.6;
}

.form-shell .wpcf7 form.sent .wpcf7-response-output {
  border-color: rgba(45,175,120,.45);
  background: rgba(45,175,120,.08);
  color: #1e7d55;
}

.form-shell .wpcf7 form.invalid .wpcf7-response-output,
.form-shell .wpcf7 form.unaccepted .wpcf7-response-output,
.form-shell .wpcf7 form.failed .wpcf7-response-output,
.form-shell .wpcf7 form.spam .wpcf7-response-output {
  border-color: rgba(214,69,69,.42);
  background: rgba(214,69,69,.07);
  color: #b5342f;
}

.form-shell .wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  color: #d64545;
  font-size: 12px;
  font-weight: 800;
}

.form-shell input.wpcf7-not-valid,
.form-shell select.wpcf7-not-valid {
  border-bottom-color: rgba(214,69,69,.55);
}

.form-shell textarea.wpcf7-not-valid {
  border-color: rgba(214,69,69,.55);
}

@media (max-width: 600px) {
  .form-actions input[type="submit"].btn {
    width: 100%;
  }
}
/* CF7 บังคับให้ radio group ต้องมีค่าเสมอ (ใส่ * หรือไม่ก็ตาม) กลุ่มงบจึงมี
   ตัวเลือก "Not specified" ไว้ตัวแรกเป็นค่าตั้งต้น แล้วซ่อนไม่ให้ผู้ใช้เห็น
   ผู้ใช้จึงเริ่มต้นแบบยังไม่ได้เลือกอะไร โดยฟอร์มยังผ่าน validation */
.form-shell .radio-grid .wpcf7-list-item:first-child {
  display: none;
}
/* ระหว่างที่ CF7 กำลังส่ง มันจะใส่คลาส .submitting ไว้ที่ form
   ล็อกปุ่มไว้เพื่อกันดับเบิลคลิก ซึ่งเป็นสาเหตุหลักของการส่งซ้ำ */
.form-shell .wpcf7 form.submitting input[type="submit"] {
  pointer-events: none;
  opacity: .55;
  cursor: progress;
}

.form-shell .wpcf7 form.submitting {
  cursor: progress;
}

/* ระหว่างส่งไม่ให้แก้ข้อมูลได้ กันเคสอัปโหลด Media Kit ที่ใช้เวลานาน */
.form-shell .wpcf7 form.submitting input,
.form-shell .wpcf7 form.submitting select,
.form-shell .wpcf7 form.submitting textarea,
.form-shell .wpcf7 form.submitting .budget-tab {
  pointer-events: none;
}
/* ข้อความตอบกลับของ CF7 ค้างอยู่ถาวรจนกว่าจะรีเฟรช js/cf7-ui.js เป็นตัวสั่งซ่อน
   หลังส่งสำเร็จ ส่วนข้อความ error ปล่อยค้างไว้เพราะผู้ใช้ต้องอ่านเพื่อแก้ */
.form-shell .wpcf7 form .wpcf7-response-output {
  transition: opacity .35s ease, transform .35s ease;
}

.form-shell .wpcf7 form .wpcf7-response-output.is-fading {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}

.form-shell .wpcf7 form .wpcf7-response-output.is-hidden {
  display: none;
}