/* ==============================================================
   MONZONE — COMPONENTS
   ปุ่ม · หัวข้อ section · การ์ด · chamfer · navbar · footer · ปุ่มติดต่อลอย
   ============================================================== */

/* ==============================================================
   COMPONENTS — radius 8px เสมอ · วงกลมเฉพาะไอคอน
   ============================================================== */

/* ==========================================================
   BUTTONS
   ========================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  min-height:52px; padding-inline:var(--s6);
  border:1px solid transparent; border-radius:var(--r);
  font-family:var(--font-body); font-size:var(--fs-body); line-height:20px; font-weight:600;
  cursor:pointer; text-align:center;
  transition:background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
             color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn--lg{ min-height:56px }

.btn--primary{ background:var(--accent); color:var(--ink-on-dark) }
.btn--primary:hover{ background:var(--accent-hover); transform:translateY(-1px) }
.btn--primary:active{ background:var(--accent-active); transform:none }

.btn--secondary{ background:var(--bg); border-color:var(--line); color:var(--ink) }
.btn--secondary:hover{ border-color:var(--ink); transform:translateY(-1px) }

/* ปุ่มเส้นขอบเหลือง — CTA บนแถบนำทางตาม Figma */
.btn--amber{ background:transparent; border:2px solid var(--amber); color:var(--amber); min-height:48px; padding-inline:var(--s5) }
.btn--amber:hover{ background:var(--amber); color:var(--on-amber); transform:translateY(-1px) }

.btn--ghost{ background:transparent; color:var(--accent) }
.btn--ghost:hover{ background:var(--accent-soft) }

/* ---------------------------------------------------------
   SWEEP — ปุ่มมาตรฐานนอกหน้า hero
   ตั้งต้น: พื้นโปร่ง ขอบเทาอ่อน · hover: พื้นแดงกวาดซ้าย→ขวา
   --------------------------------------------------------- */
.btn--sweep{
  position:relative; overflow:hidden; isolation:isolate;
  background:transparent; border-color:var(--line); color:var(--ink);
}
.btn--sweep--on-dark{ color:var(--ink-on-dark) }
.btn--sweep::before{
  content:""; position:absolute; z-index:-1; inset:0;
  background:var(--accent);
  transform:translateX(-101%);
  transition:transform var(--dur-enter) var(--ease);
}
.btn--sweep:hover,
.btn--sweep:focus-visible{ color:var(--ink-on-dark); border-color:var(--accent) }
.btn--sweep:hover::before,
.btn--sweep:focus-visible::before{ transform:translateX(0) }
.btn--sweep:active::before{ background:var(--accent-active) }

/* ---------------------------------------------------------
   SWEEP บนปุ่ม Primary (hero)
   ปุ่มนี้พื้นแดง --accent อยู่แล้ว จึงให้แผ่น --accent-hover (red-700)
   กวาดซ้าย→ขวาทับพื้นเดิม แทนการสลับสีพื้นทันที
   ต้องเจาะจง .btn--primary.btn--sweep เพราะ .btn--sweep ประกาศทีหลัง
   และจะ override background ของ .btn--primary ที่ specificity เท่ากัน
   --------------------------------------------------------- */
.btn--primary.btn--sweep{
  background:var(--accent); border-color:transparent; color:var(--ink-on-dark);
}
.btn--primary.btn--sweep::before{ background:var(--accent-hover) }
.btn--primary.btn--sweep:hover,
.btn--primary.btn--sweep:focus-visible{
  background:var(--accent); border-color:transparent; color:var(--ink-on-dark);
  transform:none;   /* ไม่ยกตัว — ให้เหมือนปุ่ม .btn--sweep ตัวอื่นบนหน้า */
}
.btn--primary.btn--sweep:active::before{ background:var(--accent-active) }

.btn__icon{ width:18px; height:18px; flex:none }
.btn__label{ position:relative }

/* ---------------------------------------------------------
   WOBBLE HORIZONTAL — ลูกศรสั่นซ้าย-ขวาเมื่อ hover
   --------------------------------------------------------- */
@keyframes wobble-h{
  0%,100%{ transform:translateX(0) }
  15%{ transform:translateX(7px) }
  30%{ transform:translateX(-5px) }
  45%{ transform:translateX(4px) }
  60%{ transform:translateX(-3px) }
  75%{ transform:translateX(2px) }
}
.btn:hover .btn__icon,
.btn:focus-visible .btn__icon,
.btn-circle:hover .btn__icon,
.btn-circle:focus-visible .btn__icon,
.slider-btn:hover .btn__icon,
.slider-btn:focus-visible .btn__icon,
.card:hover .card__arrow .btn__icon,
.svc:hover .svc__arrow .btn__icon,
.svc.is-active .svc__arrow .btn__icon{ animation:wobble-h 800ms var(--ease) }

/* วงกลมไอคอน + ข้อความข้าง ๆ */
.btn-circle{ display:inline-flex; align-items:center; gap:var(--s3); min-height:48px; font-weight:600; color:var(--ink) }
/* วง 40px เท่าวงลูกศรบนการ์ด · ตัวปุ่มยังสูง 48px (min-height ด้านบน) จึงกดง่ายเท่าเดิม */
.btn-circle__ring{
  width:40px; height:40px; flex:none;
  border:1px solid var(--line); border-radius:var(--r-pill);
  display:grid; place-items:center;
  transition:background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn-circle:hover{ color:var(--accent) }
.btn-circle:hover .btn-circle__ring{ background:var(--accent); border-color:var(--accent); color:var(--ink-on-dark) }

/* hero: ตัวอักษรขาวเป็นค่าปกติ · hover เป็นเหลือง */
.btn-circle--hero{ color:var(--ink-on-dark) }
.btn-circle--hero .btn-circle__ring{ border-color:var(--line); color:var(--ink-on-dark) }
.btn-circle--hero:hover,
.btn-circle--hero:focus-visible{ color:var(--amber) }
.btn-circle--hero:hover .btn-circle__ring{ background:transparent; border-color:var(--amber); color:var(--amber) }

/* ปุ่มวงกลมของสไลเดอร์ */
.slider-btn{
  width:48px; height:48px; color:var(--ink-on-dark);
  position:relative; overflow:hidden; isolation:isolate;
  background:transparent; border:1px solid var(--line); border-radius:var(--r-pill);
  display:grid; place-items:center;
  transition:border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.slider-btn::before{
  content:""; position:absolute; z-index:-1; inset:0;
  background:var(--accent); transform:translateX(-101%);
  transition:transform var(--dur-enter) var(--ease);
}
.slider-btn:hover::before,
.slider-btn:focus-visible::before{ transform:translateX(0) }
.slider-btn:hover,
.slider-btn:focus-visible{ border-color:var(--accent) }
.slider-btn--prev .btn__icon{ transform:rotate(180deg) }
@keyframes wobble-h-rev{
  0%,100%{ transform:rotate(180deg) translateX(0) }
  15%{ transform:rotate(180deg) translateX(7px) }
  30%{ transform:rotate(180deg) translateX(-5px) }
  45%{ transform:rotate(180deg) translateX(4px) }
  60%{ transform:rotate(180deg) translateX(-3px) }
  75%{ transform:rotate(180deg) translateX(2px) }
}
.slider-btn--prev:hover .btn__icon,
.slider-btn--prev:focus-visible .btn__icon{ animation:wobble-h-rev 800ms var(--ease) }

/* ==========================================================
   SECTION HEADER — H2 สองโทน (บรรทัดบนหนา · บรรทัดล่างบาง)
   ========================================================== */
.sec-head__title{
  font-family:var(--font-display); font-size:var(--fs-h2); line-height:var(--lh-h2);
  font-weight:700; color:var(--ink); text-wrap:balance;
}
.sec-head__title .is-muted,
.sec-head__title .is-soft,
.sec-head__title .is-on-dark,
.sec-head__title .is-accent-light{ font-weight:300 }
.sec-head__title .is-amber{ color:var(--amber) }
.sec-head__title .is-accent{ color:var(--accent) }
.sec-head__title .is-accent-light{ color:var(--accent-hover) }
.sec-head__title .is-muted{ color:var(--ink-on-dark-muted) }
.sec-head__title .is-soft{ color:var(--ink-body) }
.sec-head__title .is-on-dark{ color:var(--ink-on-dark) }

/* ==========================================================
   CARD — การ์ดโซลูชัน
   ========================================================== */
.card{
  position:relative; display:flex; flex-direction:column;
  background:var(--bg-alt); border-radius:var(--r-lg);
  overflow:hidden;
  /* ใช้ property `translate` / `scale` เดี่ยว ไม่ใช่ transform
     เพราะ .js .reveal.is-in{transform:none} เจาะจงกว่า .card:hover
     ถ้าเขียนเป็น transform จะโดนทับจนยกไม่ขึ้น */
  transition:translate var(--dur) var(--ease), scale var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease);
}
.card:hover,
.card:focus-within{ translate:0 -4px; scale:1.015; box-shadow:var(--shadow-pop) }

.card__media{ position:relative; aspect-ratio:3/2; overflow:hidden; background:var(--placeholder) }
/* ซูมด้วย width/height ไม่ใช่ transform:scale — ภาพคมกว่า และไม่ชนกฎ "ห้าม scale ตอน hover"
   ภาพโตออกนอกกรอบทุกด้านเท่ากัน แล้วถูก overflow:hidden ตัด จึงไม่มีขอบขาดให้เห็น */
.card__media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  /* ต้องปลด max-width:100% ของ reset ไม่งั้นตอนซูม width จะถูกบีบกลับเป็น 100%
     แต่ inset ติดลบยังทำงาน ภาพเลยเลื่อนไปทางซ้ายแล้วโผล่พื้นเทาด้านขวา */
  max-width:none;
  transition:inset 600ms var(--ease), width 600ms var(--ease), height 600ms var(--ease);
}
.card:hover .card__media img,
.card:focus-within .card__media img{ inset:-3%; width:106%; height:106% }

.card__body{ display:flex; flex-direction:column; gap:var(--s3); padding:var(--s5); flex:1 }
.card__title{ font-family:var(--font-display); font-size:var(--fs-card); line-height:var(--lh-card); font-weight:600; color:var(--ink) }
.card__desc{ font-size:var(--fs-sm); line-height:var(--lh-sm); color:var(--ink-body) }
.card__arrow{
  position:relative; overflow:hidden; isolation:isolate;
  width:40px; height:40px;
  margin-block-start:auto;   /* ดันลงล่างสุดของการ์ด */
  align-self:end;            /* ชิดขวาล่าง */
  background:transparent; border:1px solid var(--line); border-radius:var(--r-pill);
  display:grid; place-items:center; color:var(--ink);
  transition:border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.card__arrow::before{
  content:""; position:absolute; z-index:-1; inset:0;
  background:var(--accent); transform:translateX(-101%);
  transition:transform var(--dur-enter) var(--ease);
}
.card:hover .card__arrow::before,
.card:focus-within .card__arrow::before{ transform:translateX(0) }
.card:hover .card__arrow,
.card:focus-within .card__arrow{ border-color:var(--accent); color:var(--ink-on-dark) }
.card__link{ position:absolute; z-index:3; inset:0; border-radius:var(--r-lg) }

/* ==========================================================
   CHAMFER — ลายเซ็นแบรนด์ (3 ที่)
   ========================================================== */
/* 1 · มุมบนซ้ายตัด 24px — ส่วน “ทำไมต้อง Monzone” */
.chamfer-top{ clip-path:polygon(var(--chamfer) 0, 100% 0, 100% 100%, 0 100%, 0 var(--chamfer)) }

/* 2 · บล็อกเหลืองเว้ารอยบาก — ส่วนโซลูชัน */
.chamfer-block{ clip-path:polygon(0 3%, 4% 0, 100% 0, 100% 100%, 0 100%) }
@media (min-width:1024px){
  .chamfer-block{
    clip-path:polygon(
      0 3.6%, 3.3% 0, 40.5% 0, 52.1% 18%, 97.2% 18%, 100% 22.2%,
      100% 94.6%, 96.8% 100%, 75.8% 100%, 71.2% 94.1%, 2.8% 94.1%, 0 89.8%
    );
  }
}

/* 3 · มุมบนของบล็อกติดต่อ ซ้อนทับส่วนเสียงลูกค้า
   มือถือใช้มุมโค้ง (พื้นที่แคบ มุมตัดจะดูเป็นเสี้ยนมากกว่าลายเซ็น)
   เดสก์ท็อปตัดเฉียงให้ไดเรกชันตรงกับบล็อกโซลูชัน:
   ซ้ายลาดขึ้นไปทางขวา · ขวาลาดลงไปทางขวา สัดส่วน 56:40 เท่ากับรอยบากมุมบนซ้ายของบล็อกเหลือง */


/* ────────────── home ────────────── */

/* ==========================================================
   HEADER (โปร่งแสงลอยบน hero · กระจกเข้มเมื่อเลื่อน)
   ========================================================== */
.header-probe{ position:absolute; inset-block-start:24px; inset-inline-start:0; width:1px; height:1px; pointer-events:none }

.site-header{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:100;
  background:transparent; border:0;
  /* เส้นขอบล่างใช้ box-shadow inset แทน border — ไม่กินความสูง แถบเลยสูงเท่าเดิมทั้งสองสถานะ
     (เดิมย่อ 72 → 64px + border โผล่ 1px ตอนเลื่อน เนื้อหาในแถบเลยกระตุกขึ้นลง) */
  box-shadow:inset 0 -1px 0 transparent;
  transition:background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.site-header.is-stuck{
  background:var(--scrim-header);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  box-shadow:inset 0 -1px 0 var(--line-dark);
}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .site-header.is-stuck{ background:var(--scrim-header-stuck) }
}
.site-header__inner{
  display:flex; align-items:center; gap:var(--s5); min-height:var(--header-h);
}
.site-header__logo{ display:flex; align-items:center; min-height:44px; flex:none }
.site-header__logo img{ width:160px }
@media (min-width:1024px){ .site-header__logo img{ width:228px } }

/* ---- Nav ---- */
.site-nav{ display:none; margin-inline-start:auto }
@media (min-width:1024px){ .site-nav{ display:block } }
.site-nav__list{ display:flex; align-items:center; gap:var(--s6) }
/* --mega-gap = ระยะจากก้นปุ่มเมนูลงไปถึงขอบล่างของแถบ header + เว้นอีก 8px
   ลิงก์สูง 44px แต่แถบ header สูง --header-h (72px)
   ถ้าอิง 100% ของตัว li เฉย ๆ กล่องจะไปเริ่มกลางแถบ แล้วทับขอบล่างของ header */
.site-nav__item{ position:relative; --mega-gap:calc((var(--header-h) - 44px) / 2 + var(--s2)) }
/* เมนูทุกตัวเป็นสีขาวเท่ากันหมด — สถานะ hover ดูจากขีดแดงใต้ข้อความอย่างเดียว */
.site-nav__link{
  position:relative; display:flex; align-items:center; gap:var(--s2);
  min-height:44px; font-size:var(--fs-sm); line-height:var(--lh-sm);
  font-weight:500; color:var(--ink-on-dark);
}
.site-nav__link::after{
  content:""; position:absolute; inset-inline:0; inset-block-end:6px; height:2px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur) var(--ease);
}
.site-nav__link:hover::after,
.site-nav__item.is-open .site-nav__link::after{ transform:scaleX(1) }
.site-nav__caret{ width:12px; height:12px; transition:transform var(--dur) var(--ease) }
.site-nav__item.is-open .site-nav__caret{ transform:rotate(180deg) }

/* ---- Mega menu ---- */
.mega{
  position:absolute; inset-block-start:calc(100% + var(--mega-gap)); inset-inline-start:0; z-index:110;
  /* กว้างตามเมนูที่ยาวสุด (เดิมล็อก 320px + ขอบใน 24px — เมนูสั้นจึงมีที่ว่างเยอะ) */
  width:max-content; min-width:200px; padding:var(--s2);
  background:var(--bg-dark); border:1px solid var(--line-dark); border-radius:var(--r);
  box-shadow:var(--shadow-pop);
  display:grid; gap:var(--s1);
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
/* สะพานล่องหนคลุมช่องว่างระหว่างปุ่มกับกล่อง — ถ้าไม่มี พอเมาส์ลากผ่านช่องว่าง
   จะหลุดออกนอก li แล้ว mouseleave ยิงปิดเมนูก่อนจะถึงกล่อง */
.mega::before{
  content:""; position:absolute; inset-inline:0;
  inset-block-start:calc(var(--mega-gap) * -1); height:var(--mega-gap);
}
.site-nav__item.is-open .mega{ opacity:1; visibility:visible; transform:none }
.mega__link{
  display:flex; align-items:center; gap:var(--s4);
  min-height:44px; padding-inline:var(--s3); border-radius:var(--r);
  font-size:var(--fs-sm); line-height:var(--lh-sm); font-weight:500; color:var(--ink-on-dark);
  transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
/* hover ต้องเห็นชัดบนแผงเข้ม — เดิมใช้ขาว 6% จมหายไปกับพื้น
   พื้นสว่างขึ้นเป็น 12% + ตัวอักษรเหลืองแบรนด์ (คีย์บอร์ดโฟกัสได้หน้าตาเดียวกัน) */
.mega__link:hover,
.mega__link:focus-visible{ background:var(--hover-on-dark-strong); color:var(--amber) }

/* ---- CTA + burger ---- */
.site-header__cta{ display:none; margin-inline-start:var(--s6) }
@media (min-width:1024px){ .site-header__cta{ display:inline-flex } }

.burger{
  display:grid; place-items:center; width:48px; height:48px;
  margin-inline-start:auto; border-radius:var(--r); color:var(--ink-on-dark);
  transition:background-color var(--dur) var(--ease);
}
.burger:hover{ background:var(--hover-on-dark-strong) }
@media (min-width:1024px){ .site-header__inner > .burger{ display:none } }

/* ---- Mobile nav ---- */
.mobile-nav{
  position:fixed; inset:0; z-index:200; background:var(--bg-dark); color:var(--ink-on-dark);
  display:flex; flex-direction:column; overflow-y:auto;
  transform:translateX(100%); visibility:hidden;
  transition:transform var(--dur-enter) var(--ease), visibility var(--dur-enter);
}
.mobile-nav.is-open{ transform:none; visibility:visible }
.mobile-nav__head{ display:flex; align-items:center; justify-content:space-between; min-height:var(--header-h); padding-inline:var(--gutter); border-block-end:1px solid var(--line-dark) }
.mobile-nav__head .burger{ margin-inline-start:0 }
.mobile-nav__body{ padding:var(--s6) var(--gutter) var(--s8) }
.mobile-nav__link{ display:flex; align-items:center; min-height:56px; font-size:var(--fs-lead); line-height:var(--lh-lead); font-weight:500; color:var(--ink-on-dark); border-block-end:1px solid var(--line-dark) }
.mobile-nav__sub{ display:flex; align-items:center; min-height:44px; padding-inline-start:var(--s5); font-size:var(--fs-sm); color:var(--ink-on-dark-muted); border-block-end:1px solid var(--line-dark) }
.mobile-nav__cta{ margin-block-start:var(--s6); width:100% }
body.is-locked{ overflow:hidden }

/* ==========================================================
   FOOTER
   ========================================================== */
.site-footer{ background:var(--bg-dark); color:var(--ink-on-dark); padding-block:var(--s8) var(--s6) }
@media (min-width:1024px){ .site-footer{ padding-block:var(--s9) var(--s6) } }

.site-footer__grid{ display:grid; gap:var(--s7) }
@media (min-width:768px){  .site-footer__grid{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1024px){ .site-footer__grid{ grid-template-columns:1.7fr 1fr 1.1fr; gap:var(--s8) } }

.site-footer__logo img{ width:220px; max-width:100% }
@media (min-width:1024px){ .site-footer__logo img{ width:320px } }
.site-footer__addr{ margin-block-start:var(--s8); font-size:var(--fs-body); line-height:var(--lh-body); color:var(--ink-on-dark) }
.site-footer__branch{ margin-block-start:var(--s5); font-size:var(--fs-sm); line-height:var(--lh-sm); color:var(--ink-on-dark-muted) }
.site-footer__branch strong{ font-weight:500 }

.site-footer__col{ display:flex; flex-direction:column }
/* มือถือ: เมนู 6 ลิงก์เรียง 2 คอลัมน์ (3 แถว) — ฟุตเตอร์สั้นลงครึ่งหนึ่ง หัวข้อ "เมนู" คร่อมทั้งสองคอลัมน์ */
@media (max-width:767px){
  .site-footer__menu{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:var(--s5) }
  .site-footer__menu .site-footer__title{ grid-column:1 / -1 }
}
@media (min-width:1024px){
  .site-footer__col{ padding-inline-start:var(--s8); border-inline-start:1px solid var(--line-dark) }
}
.site-footer__title{ font-size:var(--fs-body); line-height:var(--lh-body); font-weight:600; color:var(--ink-on-dark); margin-block-end:var(--s5) }
.site-footer__link{ display:flex; align-items:center; min-height:44px; font-size:var(--fs-sm); line-height:var(--lh-sm); color:var(--ink-on-dark-muted); transition:color var(--dur) var(--ease) }
.site-footer__link:hover{ color:var(--ink-on-dark) }

.site-footer__row{ display:flex; align-items:center; gap:var(--s4); min-height:44px; margin-block-end:var(--s5) }
/* ไอคอนช่องทางติดต่อ — เดิมเป็นภาพ raster วงกลมทึบสีเหลือง ซึ่งขัดกฎที่ว่า
   --amber ใช้ได้เฉพาะแถบ hotline และปรับสีตามสถานะไม่ได้เลย
   เปลี่ยนเป็น SVG เส้นจาก sprite เดียวกับไอคอนอื่นทั้งหน้า (24px · stroke 1.75)
   สีมาจาก currentColor จึงจางตามข้อความ และสว่างขึ้นเองตอน hover */
/* กล่องรองไอคอน — ต้องมีกล่องจริงเพราะ <svg> วาง ::before ไม่ได้
   ตั้งต้นโปร่งใส ไม่มีขอบ หน้าตาเหมือนเดิมทุกอย่าง
   hover: แผ่นเหลืองกวาดซ้าย→ขวาเหมือนปุ่มลูกศร ไอคอนสลับเป็นสีเข้มบนเหลือง */
.site-footer__icbox{
  position:relative; overflow:hidden; isolation:isolate; flex:none;
  display:grid; place-items:center;
  width:40px; height:40px; border-radius:var(--r-pill);
  color:var(--ink-on-dark-muted);
  transition:color var(--dur) var(--ease);
}
.site-footer__icbox::before{
  content:""; position:absolute; z-index:-1; inset:0;
  background:var(--amber); transform:translateX(-101%);
  transition:transform var(--dur-enter) var(--ease);
}
.site-footer__row:hover .site-footer__icbox::before,
.site-footer__row:focus-within .site-footer__icbox::before{ transform:translateX(0) }
.site-footer__row:hover .site-footer__icbox,
.site-footer__row:focus-within .site-footer__icbox{ color:var(--on-amber) }
.site-footer__ic{ width:24px; height:24px }
.site-footer__meta{ font-size:var(--fs-sm); line-height:var(--lh-sm); color:var(--ink-on-dark-muted) }
.site-footer__meta-head{ display:block; font-weight:500 }
.site-footer__mail{ transition:color var(--dur) var(--ease) }
.site-footer__mail:hover{ color:var(--ink-on-dark) }
.site-footer__social{ color:var(--ink-on-dark-muted); font-size:var(--fs-sm); line-height:var(--lh-sm); font-weight:500; transition:color var(--dur) var(--ease) }
.site-footer__social:hover{ color:var(--ink-on-dark) }

.site-footer__bottom{
  margin-block-start:var(--s8); padding-block-start:var(--s5);
  border-block-start:1px solid var(--line-dark);
  display:flex; flex-wrap:wrap; gap:var(--s4) var(--s7); align-items:center; justify-content:space-between;
  font-size:var(--fs-sm); line-height:var(--lh-sm); color:var(--ink-on-dark-muted);
}
.site-footer__legal{ display:flex; flex-wrap:wrap; gap:var(--s5) }
.site-footer__legal a{ transition:color var(--dur) var(--ease) }
.site-footer__legal a:hover{ color:var(--ink-on-dark) }

/* มือถือ — บีบระยะใน footer: ค่าชุดเดสก์ท็อปตั้งไว้สำหรับ 3 คอลัมน์เรียงข้างกัน
   พอมาเรียงซ้อนกันแนวตั้ง ช่องไฟ 48-64px เลยกลายเป็นช่องว่างยาวเกินจำเป็น
   ⛔ ไม่แตะ min-height:44px ของลิงก์/แถวติดต่อ — เป็นขนาดพื้นที่กดขั้นต่ำ */
@media (max-width:767px){
  .site-footer{ padding-block:var(--s7) var(--s5) }
  .site-footer__grid{ gap:var(--s6) }
  .site-footer__addr{ margin-block-start:var(--s5) }
  .site-footer__branch{ margin-block-start:var(--s4) }
  .site-footer__title{ margin-block-end:var(--s4) }
  .site-footer__row{ margin-block-end:var(--s3) }
  .site-footer__bottom{ margin-block-start:var(--s6); padding-block-start:var(--s4) }
  .site-footer__legal{ gap:var(--s3) var(--s5) }
}

/* ---------------------------------------------------------
   hover ข้อความที่คลิกได้ใน footer → ขีดเส้นแดงบาง ๆ ใต้ตัวอักษร
   จองเส้นไว้ล่วงหน้าด้วยสีโปร่ง ตัวอักษรจะได้ไม่ขยับตอน hover
   ขีดที่ <span> ข้างในทุกตัว ไม่ใช่ที่ <a> — เพราะ .site-footer__link เป็น flex
   กินเต็มความกว้างคอลัมน์ (222px) ถ้าขีดที่ <a> เส้นอาจลากยาวเกินตัวอักษร
   ส่วน social link ก็มี <img> อยู่ในลิงก์ด้วย ต้องเลี่ยงไม่ให้ขีดใต้รูป
   --------------------------------------------------------- */
.site-footer__link span,
.site-footer__mail,
.site-footer__social span,
.site-footer__legal a{
  text-decoration:underline;
  text-decoration-color:transparent;
  text-decoration-thickness:1px;
  text-underline-offset:4px;
  transition:color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease);
}
.site-footer__link:hover span,
.site-footer__link:focus-visible span,
.site-footer__mail:hover,
.site-footer__mail:focus-visible,
.site-footer__social:hover span,
.site-footer__social:focus-visible span,
.site-footer__legal a:hover,
.site-footer__legal a:focus-visible{ text-decoration-color:var(--accent) }

/* ==========================================================
   CONTACT FAB (ป็อปอัพติดต่อ มุมขวาล่าง)
   ========================================================== */
.contact-fab{
  position:fixed; z-index:90;
  inset-block-end:calc(var(--s4) + env(safe-area-inset-bottom, 0px));
  inset-inline-end:var(--s4);
  display:grid; justify-items:end; gap:var(--s3);
}
@media (min-width:1024px){ .contact-fab{ inset-block-end:var(--s5); inset-inline-end:var(--s5) } }

.contact-fab__btn{
  position:relative; display:grid; place-items:center;
  width:52px; height:52px; border-radius:var(--r-pill);
  background:var(--accent); color:var(--ink-on-dark);
  box-shadow:var(--shadow-pop);
  transition:background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
/* มือถือใช้ 52px (เคยเหลือ 40px เล็กไป กดยาก และต่ำกว่า 44px ตาม WCAG 2.5.5) — 58px บังเนื้อหามากเกินไปบนจอแคบ
   จอใหญ่กลับไป 58px เหมือนเดิม · กฎนี้ต้องอยู่ "หลัง" กฎตั้งต้น
   ไม่งั้น specificity เท่ากันแล้วตัวที่ประกาศทีหลังชนะ ขนาด desktop จะไม่ติด */
@media (min-width:1024px){ .contact-fab__btn{ width:58px; height:58px } }
.contact-fab__btn:hover{ background:var(--accent-hover); transform:translateY(-2px) }

/* ---------------------------------------------------------
   WOBBLE VERTICAL — ปุ่มโทรเด้งขึ้น-ลงทุก 3 วิ เรียกความสนใจ
   คาบ 3s แต่ตัวเด้งกินแค่ช่วง 0–27% (~800ms) ที่เหลือนิ่ง
   ใช้ค่าเดียวกับ wobble-h แค่เปลี่ยนแกน และสลับให้เด้งขึ้นก่อน
   --------------------------------------------------------- */
@keyframes wobble-v{
  0%{ transform:translateY(0) }
  4%{ transform:translateY(-7px) }
  8%{ transform:translateY(5px) }
  12%{ transform:translateY(-4px) }
  16%{ transform:translateY(3px) }
  20%{ transform:translateY(-2px) }
  27%,100%{ transform:translateY(0) }
}
.contact-fab__btn{ animation:wobble-v 3s var(--ease) infinite }
/* ต้อง animation:none ไม่ใช่ play-state:paused — ไม่งั้น transform ค้างที่ค่าของ
   animation แล้วปุ่มจะไม่ยกตัวตอน hover · และตอนเปิดแผงปุ่มเป็นปุ่มปิด ไม่ต้องเด้ง */
.contact-fab__btn:hover,
.contact-fab__btn:focus-visible,
.contact-fab__btn[aria-expanded="true"]{ animation:none }
.contact-fab__ic{ grid-area:1/1; width:24px; height:24px; transition:opacity var(--dur) var(--ease) }
.contact-fab__ic--close{ opacity:0 }
.contact-fab__btn[aria-expanded="true"] .contact-fab__ic--phone{ opacity:0 }
.contact-fab__btn[aria-expanded="true"] .contact-fab__ic--close{ opacity:1 }

.contact-fab__ping{
  position:absolute; inset-block-start:4px; inset-inline-end:4px;
  width:10px; height:10px; border-radius:var(--r-pill);
  background:var(--amber); border:2px solid var(--accent);
  animation:fab-ping 2.4s var(--ease) infinite;
}
@keyframes fab-ping{
  0%,100%{ box-shadow:0 0 0 0 var(--pulse-amber) }
  70%{ box-shadow:0 0 0 8px var(--pulse-amber-out) }
}
.contact-fab__btn[aria-expanded="true"] .contact-fab__ping{ display:none }

/* พื้นเหลืองแบรนด์ — ตัวอักษรบนเหลืองต้องเป็น --on-amber เสมอตาม design system */
.contact-fab__panel{
  width:min(290px, calc(100vw - var(--s8)));
  padding:var(--s5); border-radius:var(--r);
  background:var(--amber); border:1px solid var(--line-dark);
  box-shadow:var(--shadow-pop); color:var(--on-amber);
  display:grid; gap:var(--s1);
  transform-origin:bottom right;
  animation:fab-in var(--dur-enter) var(--ease);
  transition:background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
@keyframes fab-in{ from{ opacity:0; transform:translateY(8px) } }
/* ลอยอยู่เหนือพื้นเหลือง (Solutions / Contact) → สลับเป็นแผงขาว ไม่ให้จมหาย
   สีตัวอักษร/เส้น/hover เป็นโทนดำโปร่งแสงอยู่แล้ว ใช้บนขาวได้เลย (JS ใส่คลาส is-on-amber) */
.contact-fab.is-on-amber .contact-fab__panel{ background:var(--bg); border-color:var(--line) }

.contact-fab__head{
  display:flex; align-items:center; gap:var(--s2);
  margin-block-end:var(--s3); padding-block-end:var(--s3);
  border-block-end:1px solid var(--line-on-amber);
  font-size:var(--fs-sm); line-height:var(--lh-sm); font-weight:600;
}
/* จุดนำหน้าหัวข้อ — บนพื้นเหลืองต้องเปลี่ยนเป็นแดง ไม่งั้นจมหายไปกับพื้น */
.contact-fab__dot{ width:6px; height:6px; flex:none; border-radius:var(--r-pill); background:var(--accent) }

.contact-fab__row{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  min-height:44px; padding-inline:var(--s2); border-radius:var(--r);
  transition:background-color var(--dur) var(--ease);
}
.contact-fab__row:hover{ background:var(--hover-on-amber) }
.contact-fab__country{ display:inline-flex; align-items:center; gap:var(--s2); font-size:var(--fs-sm); line-height:var(--lh-sm); color:var(--ink-on-amber-muted) }
/* ธงประเทศ — กว้างเท่ากันทุกผืน (สัดส่วนจริงต่างกัน SG 3:2 · MY/PH 2:1) · ขอบบางกันธงสีขาวกลืนกับพื้น */
.contact-fab__flag{ width:22px; height:auto; flex:none; border-radius:2px; box-shadow:0 0 0 1px var(--line-on-amber) }
.contact-fab__num{ color:var(--on-amber); font-variant-numeric:tabular-nums }

.contact-fab__mail{
  display:flex; align-items:center; min-height:44px;
  margin-block-start:var(--s3); padding-block-start:var(--s3); padding-inline:var(--s2);
  border-block-start:1px solid var(--line-on-amber);
  font-size:var(--fs-mono); line-height:var(--lh-mono); color:var(--ink-on-amber-muted);
  transition:color var(--dur) var(--ease);
}
.contact-fab__mail:hover{ color:var(--on-amber) }

body.is-locked .contact-fab{ display:none }
/* ซ่อนชั่วคราวตอนปุ่มใน hero ยังอยู่ในจอ (มือถือ) — JS ใส่คลาส is-tucked */
.contact-fab{ transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur) }
/* visibility:hidden ด้วย — คีย์บอร์ด Tab จะข้ามปุ่มที่มองไม่เห็น */
.contact-fab.is-tucked{ opacity:0; visibility:hidden; transform:translateY(var(--s4)); pointer-events:none }